/* THE ANAMBRA RECORD — V3 / MONOCHROME EDITORIAL EDITION
   Real scanned pages remain untouched. This sheet changes their presentation. */
:root {
  --navy: #0b0c0e;
  --navy2: #18191b;
  --ink: #161718;
  --blue: #64543e;
  --gold: #d2b477;
  --cream: #faf9f6;
  --paper: #f2f0ea;
  --muted: #646666;
  --line: #dad8d2;
  --serif: 'Newsreader', Georgia, serif;
}

html { scroll-padding-top: 74px; }
body { background: #faf9f6; color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #669cff; outline-offset: 3px; }

/* One quiet navigation system, without the extra large mobile banner. */
.announcement { height: 31px; gap: 25px; background: #202022; color: #dedbd3; font-size: 10px; }
.announcement-label { color: var(--gold); }
.announcement a { color: #e7e5e0; }
.site-header { position: sticky; top: 0; height: 73px; background: #0b0c0e; border-bottom: 1px solid #ffffff28; z-index: 40; }
.brand { color: #f6f4ef; }
.brand-symbol { border-color: #d2b477; color: #f4f1e9; }
.brand-symbol .accent-dot { color: #d2b477; }
.brand-words small { color: #9e9c96; }
.site-header nav a { color: #c5c5c0; font-size: 12px; }
.site-header nav a:hover { color: #d2b477; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-action { background: #d2b477; color: #161616; padding: 14px 19px; min-height: 44px; font-size: 11px; font-weight: 800; letter-spacing: .075em; }
.nav-action:hover { background: #ebcc8e; }
.nav-action span:last-child { font-size: 19px; line-height: 1; margin-left: 12px; }
.nav-action-short, .nav-toggle { display: none; }

/* Art direction: black gallery walls, white image borders, warm brass typography. */
.hero { background: #0b0c0e; }
.hero:after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: radial-gradient(#e6e0d5 0.45px, transparent 0.45px); background-size: 7px 7px; z-index: -1; }
.hero:before { background-size: 130px 130px; opacity: .35; }
.hero-layout { grid-template-columns: 1.03fr .97fr; min-height: 667px; }
.hero-copy { padding: 101px 15px 65px 0; }
.hero-kicker { font-size: 10px; letter-spacing: .21em; color: #d1c4ad; }
.kicker-marker { background: var(--gold); }
.hero h1 { font-family: var(--serif); font-size: clamp(68px, 6.4vw, 104px); line-height: .98; letter-spacing: -.057em; margin: 35px 0 26px; font-weight: 500; }
.hero h1 em { color: #d5b675; font-weight: 400; }
.hero-copy>p { color: #d0ceca; font-size: 17px; line-height: 1.73; max-width: 515px; }
.hero-ctas { gap: 28px; margin-top: 37px; }
.btn { border-radius: 0; }
.btn-yellow { background: var(--gold); color: #101112; }
.btn-yellow:hover { background: #e7ca90; }
.hero-link { border-color: #9c968d; color: #eee9df; }
.hero-link:hover { color: #e4c183; border-color: #e4c183; }
.hero-footnote { color: #b6b1a9; margin-top: 64px; font-size: 12px; }
.live-dot { background: var(--gold); }
.hero-gallery { min-height: 654px; height: 654px; margin-left: 0; position: relative; }
.hero-image { border: 5px solid #efebe2; background: #2f3032; box-shadow: 0 26px 95px #000a; }
.hero-image-main { width: 78%; height: 56%; top: 15%; left: 19%; transform: rotate(2deg); z-index: 1; }
.hero-image-top { width: 46%; height: 33%; left: 0; top: 8%; transform: rotate(-5deg); z-index: 3; }
.hero-image-bottom { width: 50%; height: 32%; left: 2%; bottom: 9%; transform: rotate(-3deg); z-index: 3; }
.image-credit { background: #0b0c0ef5; color: #eae8e3; font-size: 10px; }
.image-credit b { color: #e5c47c; }
.hero-figure { position: absolute; right: 0; bottom: 1%; z-index: 4; display: flex; align-items: baseline; gap: 9px; color: #f9f5ec; text-shadow: 0 2px 12px #0007; }
.hero-figure strong { font: 500 94px/.9 var(--serif); letter-spacing: -.07em; }
.hero-figure span { color: #cfc9bd; font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.6; }
.hero-vertical { color: #adaba6; right: -7%; top: 12%; }
.hero-bottom { height: 61px; color: #b3ae9f; letter-spacing: .1em; }
.hero-bottom i { color: var(--gold); padding-inline: 7px; font-style: normal; }
.hero-bottom a { color: var(--gold); }

/* Stately numbers, used as information rather than decoration. */
.facts-strip { background: #f4f2ed; border-bottom: 1px solid #dad6ca; }
.facts-grid { gap: 0; }
.facts-grid>div, .facts-grid>a { border-right: 1px solid #d7d4cc; }
.facts-grid strong { color: #111214; font-family: var(--serif); letter-spacing: -.07em; font-weight: 500; }
.facts-grid div span, .facts-grid>a span { color: #68675f; }
.facts-grid>a b { color: #222; }
.section-index { color: #747067; }
.section-index>span:first-child { background: #151617; color: #f5f4f0; }
.section-index i { background: #bfbdb5; }
.section-index.light { color: #beb9af; }
.section-index.light>span:first-child { background: var(--gold); color: #121212; }
.section-index.light i { background: #77746e; }

/* Source-book feature replaces the former text-only, generic mission block. */
.mission { padding-top: 116px; padding-bottom: 130px; }
.mission-layout { display: grid; grid-template-columns: 1.13fr .87fr; gap: clamp(48px, 8vw, 132px); align-items: center; margin-top: 35px; }
.mission h2, .collections-heading h2, .spotlight h2, .method-section h2, .explorer-heading h2, .closing-section h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; line-height: 1.03; }
.mission h2 { font-size: clamp(53px, 5.3vw, 77px); margin-bottom: 35px; }
.mission-copy>p { max-width: 650px; }
.mission-copy p.mission-lead { font: 500 clamp(22px, 2.15vw, 29px)/1.4 var(--serif); color: #252423; }
.mission-copy>p:not(.mission-lead) { font-size: 15px; line-height: 1.88; color: #65615a; }
.underlined-link { color: #252423; border-color: #252423; }
.mission-cover { background: #171718; color: #f4f1e9; padding: 24px 24px 17px; box-shadow: 22px 24px 0 #eae5dc; }
.mission-cover-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; color: #eee9db; font-weight: 800; letter-spacing: .1em; padding-bottom: 17px; border-bottom: 1px solid #6d6658; }
.mission-cover-label b { color: var(--gold); font-size: 9px; }
.mission-cover img { object-fit: contain; height: 445px; width: 100%; margin: 20px auto 15px; }
.cover-bottom { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .12em; font-weight: 800; color: #dbd4c8; border-top: 1px solid #6d6658; padding-top: 14px; }
.cover-bottom i { color: var(--gold); font-style: normal; }

/* Chapter mosaic — each photographed exhibit remains page-linked. */
.collections-section { background: #111214; padding-block: 116px 119px; }
.collections-section:before { background: radial-gradient(ellipse, #ffffff0a, transparent 70%); }
.collections-heading h2 { font-size: clamp(54px, 5.6vw, 78px); }
.collections-heading p { color: #b9b6ae; }
.collection-grid { gap: 15px; }
.collection-card { background: #292a2b; }
.collection-card:after { background: linear-gradient(to bottom, #09090910 3%, #0a0a0a55 45%, #090909f5 100%); }
.collection-card img { filter: saturate(.84) contrast(1.05); }
.collection-card:hover img { filter: saturate(1.05); }
.collection-number { color: #e0c387; }
.collection-card h3 { font: 500 43px/1.1 var(--serif); }
.collection-card p { color: #e2dfd8; }
.collection-card-footer { border-color: #eae7de75; color: #f5efe5; font-size: 12px; }
.collection-circle { background: #d2b477; color: #111; }
.collection-footer>span { color: #c7c0b5; }
.btn-outline { border-color: #bca67d; color: #f6efdf; }

.spotlight { padding-top: 127px; padding-bottom: 137px; }
.spotlight-top h2 { font-size: clamp(56px, 5.5vw, 77px); }
.spotlight-top p { color: #69655e; }
.spotlight-card { border: 1px solid #e3ded5; background: #fff; }
.spotlight-photo { background: #e4e1db; }
.spotlight-number, .spotlight-link { color: #69553a; }
.spotlight-card h3 { font-family: var(--serif); }
.spotlight-description { margin: 0 23px 15px; color: #5a554e; font-size: 13px; line-height: 1.55; }
.evidence-status { display: block; margin: 0 23px 20px; font-size: 9px; letter-spacing: .05em; color: #5a5142; font-weight: 800; }

.method-section { background: #eae6dd; padding-block: 125px; }
.method-section h2 { color: #121312; font-size: clamp(53px, 5.3vw, 76px); }
.method-section .section-index { color: #605a4f; }
.method-items h3 { color: #222; }
.method-items p { color: #625f5a; }
.method-items>div { border-color: #c7c3b9; }

/* The collection is a reading room, not a photo feed. */
.explorer-section { background: #f8f7f3; padding-block: 123px 140px; }
.explorer-heading h2 { font-size: clamp(55px, 5.7vw, 80px); }
.explorer-heading p { color: #66645e; }
.explorer-heading-note { color: #746e63; }
.explorer-toolbar { grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; }
.searchbox, .quick-jump { border: 1px solid #cac4b9; background: #fff; }
.searchbox input { font-size: 15px; }
.quick-jump label { color: #686154; }
.quick-jump button { background: #141516; min-width: 76px; }
.filter-row { display: flex; flex-direction: column; gap: 13px; align-items: stretch; margin: 25px 0 27px; }
.quick-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 38px 6px 1px; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(90deg, #000 0%, #000 94%, transparent 100%); }
.quick-filters::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; scroll-snap-align: center; min-height: 42px; border: 1px solid #c8c1b5; color: #49453e; background: #f8f7f3; border-radius: 2px; font-size: 13px; padding: 10px 17px; }
.chip.active, .chip:hover { background: #131416; border-color: #131416; color: #fff; }
.result-count { color: #69645b; font-size: 12px; letter-spacing: .03em; }
.page-grid { gap: 19px; }
.page-card { background: #fff; border: 1px solid #d6d1c7; padding: 12px; box-shadow: 0 7px 25px #211e1812; }
.page-card:hover { box-shadow: 0 13px 40px #211e1825; }
.page-image-shell { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; position: relative; background: #eae5da; padding: 9px; }
.page-image-shell:before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff75 46%, transparent 64%); background-size: 260% 100%; animation: image-wait 1.45s linear infinite; }
.page-image-shell.is-loaded:before { display: none; }
.page-image-shell .page-image { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; background: transparent; opacity: 0; transition: opacity .22s ease; position: relative; z-index: 1; }
.page-image-shell.is-loaded .page-image { opacity: 1; }
.page-image-shell.is-error:after { content: 'Image not available'; color: #5d584e; font-size: 12px; position: absolute; z-index: 2; }
.page-card-bottom { padding: 15px 3px 5px; }
.page-card-bottom b, .page-card-bottom span { font-size: 13px; font-weight: 800; color: #181818; }
.page-card-title { color: #57524a; font-size: 13px; }
.load-more { background: #121314; color: #f7f4ee; }
.scan-note { border-color: #d8d2c6; }
.scan-note span { color: #474239; }

/* The reading room supports real pinch, double-tap, pan and swipe. */
body.reader-open { overflow: hidden; }
.reader { background: #0e0f10; color: #f9f7f2; }
.reader-top { background: #0a0a0b; border-color: #4c4a46; }
.reader-close, .reader-tool { background: #232322; border-color: #57544e; color: #fff; min-height: 44px; }
.reader-tool:hover, .reader-close:hover { background: #413c32; }
.reader-section { color: #d9c5a2; }
.zoom-level { font-size: 11px; color: #d5c8ae; min-width: 42px; text-align: center; font-weight: 800; }
.reader-progress { height: 3px; background: #45413a; flex: 0 0 3px; }
.reader-progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .22s ease; }
.reader-image-area { background: #1d1e20; overflow: hidden; }
.reader-image-area:before { background: radial-gradient(circle at 50% 40%, #fafafa17, transparent 75%); }
.reader-image-area.loading:after { content: 'LOADING ORIGINAL SCAN'; position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #f6e4be; font-size: 11px; font-weight: 800; letter-spacing: .12em; background: #101011e0; padding: 15px 20px; border: 1px solid #716657; white-space: nowrap; }
.reader-paper-wrap, .reader-paper-wrap.zoom { padding: 16px 58px; overflow: hidden; justify-content: center; align-items: center; touch-action: none; user-select: none; }
.reader-paper-wrap img, .reader-paper-wrap.zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform: translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(var(--zoom,1)); transform-origin: center; will-change: transform; cursor: grab; user-select: none; -webkit-user-drag: none; }
.reader-paper-wrap:active img { cursor: grabbing; }
.reader-tool:disabled { opacity: .37; cursor: default; }
.reader-arrow { background: #090909bc; border: 1px solid #d7c5a666; width: 50px; height: 60px; }
.reader-sidebar { background: #f9f8f5; color: #151515; }
.reader-sidebar h3, .reader-sidebar h4 { font-family: var(--serif); }
.reader-source { background: #eeeae2; }
.reader-record { border: 1px solid #d2c5ae; padding: 15px 16px; margin-top: 22px; background: #fcfaf5; }
.reader-record b { color: #5d4b31; font-size: 10px; letter-spacing: .08em; }
.reader-record p { color: #272521; font-size: 13px; line-height: 1.5; margin: 9px 0; }
.reader-record small { color: #766a57; font-size: 9px; line-height: 1.5; font-weight: 800; }
.reader-source>span, .reader-source button, .reader-pdf-link { color: #67512d; }
.reader-pagejump button { background: #141414; }
.ocr-warning { color: #554d42; }
.closing-section { background: #111213; }
.closing-section h2 { font-size: clamp(56px, 5.6vw, 81px); }
.footer { background: #080909; }

@keyframes image-wait { from { background-position-x: 100%; } to { background-position-x: -160%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 1180px) {
  .hero-layout { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(57px, 6.1vw, 80px); }
  .hero-gallery { height: 570px; min-height: 570px; }
  .hero-copy { padding-top: 90px; }
}

@media (max-width: 860px) {
  .announcement { display: none; }
  .site-header { height: 65px; padding-inline: 24px; }
  .site-header nav { display: none; position: absolute; top: 65px; left: 0; right: 0; background: #101112; border-top: 1px solid #49463f; padding: 18px 24px 25px; box-shadow: 0 20px 40px #0007; flex-direction: column; gap: 0; }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 13px 5px; border-bottom: 1px solid #393834; font-size: 14px; }
  .nav-toggle { width: 43px; height: 43px; background: #1e1f20; border: 1px solid #615b4c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; }
  .nav-toggle span { display: block; width: 19px; height: 2px; background: #f3f0e8; }
  .nav-action-long { display: none; }
  .nav-action-short { display: inline; }
  .nav-action { padding: 12px 13px; font-size: 10px; }
  .nav-action span:last-child { margin-left: 5px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { padding: 55px 0 0; }
  .hero-gallery { height: 450px; min-height: 450px; width: 100%; margin: 14px auto 0; }
  .hero h1 { font-size: clamp(60px, 9vw, 80px); }
  .mission-layout { grid-template-columns: 1fr .85fr; gap: 40px; }
  .mission-cover img { height: 380px; }
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 36px); }
  .site-header { padding-inline: 17px; }
  .brand-symbol { width: 39px; height: 39px; font-size: 20px; }
  .brand-words b { font-size: 10px; letter-spacing: .07em; }
  .brand-words small { font-size: 7px; letter-spacing: .04em; }
  .header-actions { gap: 7px; }
  .nav-action { padding: 12px 10px; min-height: 40px; }
  .nav-toggle { height: 40px; width: 39px; }
  .hero-layout { display: grid; grid-template-columns: 1fr; min-height: 0; padding-top: 32px; }
  .hero-copy { display: contents; }
  .hero-kicker { grid-row: 1; font-size: 9px; letter-spacing: .13em; }
  .hero h1 { grid-row: 2; font-size: clamp(46px, 12vw, 64px); margin: 20px 0 18px; line-height: .98; }
  .hero-gallery { grid-row: 3; width: 100%; height: 340px; min-height: 340px; margin: 0 auto; }
  .hero-image { border-width: 4px; }
  .hero-image-main { top: 15%; left: 17%; width: 81%; height: 56%; }
  .hero-image-top { top: 2%; left: 0; width: 50%; height: 32%; }
  .hero-image-bottom { left: 4%; bottom: 7%; width: 51%; height: 32%; }
  .hero-figure { bottom: 2%; right: 0; gap: 6px; }
  .hero-figure strong { font-size: 58px; }
  .hero-figure span { font-size: 8px; }
  .hero-vertical { display: none; }
  .image-credit { font-size: 8px; padding: 7px; }
  .image-credit b { font-size: 8px; }
  .hero-copy>p { grid-row: 4; font-size: 15px; line-height: 1.65; margin: 15px 0 0; color: #d5d2ca; }
  .hero-ctas { grid-row: 5; margin: 23px 0 0; gap: 19px; }
  .hero-ctas .btn { width: 100%; min-height: 54px; font-size: 12px; }
  .hero-link { font-size: 12px; }
  .hero-footnote { grid-row: 6; font-size: 11px; line-height: 1.45; margin: 24px 0 35px; }
  .hero-bottom { display: none; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .facts-grid>div,.facts-grid>a { min-height: 104px; padding: 15px; border-right: 1px solid #d7d4cc; border-bottom: 1px solid #d7d4cc; }
  .facts-grid strong { font-size: 47px; }
  .facts-grid div span,.facts-grid>a span { font-size: 10px; }
  .facts-grid>a b { font-size: 12px; }
  .mission { padding-block: 74px 85px; }
  .mission-layout { grid-template-columns: 1fr; margin-top: 27px; gap: 38px; }
  .mission h2,.collections-heading h2,.spotlight h2,.method-section h2,.explorer-heading h2 { font-size: clamp(45px, 10.5vw, 56px); }
  .mission h2 { margin-bottom: 20px; }
  .mission-copy p.mission-lead { font-size: 23px; }
  .mission-copy>p:not(.mission-lead) { font-size: 15px; }
  .mission-cover { padding: 18px 18px 14px; box-shadow: 11px 14px 0 #eae5dc; margin-right: 10px; }
  .mission-cover-label { font-size: 9px; }
  .mission-cover img { height: 335px; margin: 15px auto; }
  .collections-section { padding-block: 80px; }
  .collections-heading { margin-bottom: 29px; }
  .collections-heading p { font-size: 15px; }
  .collection-grid { gap: 12px; }
  .collection-card,.collection-card:first-child,.collection-card:nth-child(5) { flex-basis: min(78vw, 310px); height: 345px; min-height: 345px; }
  .collection-card-content { padding: 22px; }
  .collection-card h3 { font-size: 36px; }
  .collection-card-footer { font-size: 11px; }
  .spotlight { padding-block: 85px 95px; }
  .spotlight-card h3 { font-size: 31px; }
  .method-section { padding-block: 84px; }
  .method-section h2 { margin-top: 24px; }
  .explorer-section { padding-block: 83px 90px; }
  .explorer-heading { margin-top: 30px; }
  .explorer-heading-note { font-size: 11px; }
  .explorer-toolbar { grid-template-columns: 1fr; gap: 10px; }
  .searchbox,.quick-jump { min-height: 58px; }
  .searchbox input { font-size: 14px; }
  .searchbox kbd { display: none; }
  .quick-jump { padding-left: 13px; }
  .quick-jump label { font-size: 11px; }
  .filter-row { display: block; margin: 22px 0; }
  .quick-filters { margin-right: -18px; padding-right: 33px; gap: 8px; }
  .chip { padding: 9px 15px; font-size: 13px; min-height: 43px; }
  .result-count { display: block; margin-top: 10px; font-size: 12px; }
  .page-grid { gap: 12px; }
  .page-card { padding: 7px; }
  .page-image-shell { padding: 6px; }
  .page-card-bottom { padding: 11px 2px 4px; }
  .page-card-bottom b,.page-card-bottom span { font-size: 12px; }
  .page-card-title { font-size: 12px; color: #4b4942; padding: 0 2px 5px; }
  .scan-note { font-size: 13px; line-height: 1.7; }
  .closing-section h2 { font-size: 54px; }
  .reader-top { height: 57px; min-height: 57px; padding-inline: 10px; }
  .reader-close { width: 42px; height: 42px; }
  .reader-top-tools { gap: 6px; }
  .reader-tool { min-width: 41px; height: 42px; min-height: 42px; padding: 8px; }
  .reader-zoom-tool { font-size: 23px; }
  .reader-top #reader-copy { display: none; }
  .zoom-level { font-size: 10px; min-width: 32px; }
  .reader-content { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 0; }
  .reader-paper-wrap,.reader-paper-wrap.zoom { padding: 6px 7px; }
  .reader-arrow { display: none; }
  .reader-bottom { height: 72px; background: #0b0c0e; padding: 0 9px; }
  .reader-info-button { background: #242424; border: 1px solid #716b5f; color: #f5efe3; padding: 9px 8px; min-height: 46px; }
  .reader-info-button span { font-size: 10px; }
  .reader-bottom>span { font-size: 11px; color: #eee0c1; }
  .reader-bottom-controls { gap: 5px; }
  .reader-bottom-controls button { display: flex; gap: 4px; align-items: center; justify-content: center; background: #242424; border: 1px solid #716b5f; color: #fff; height: 46px; width: 58px; font-size: 17px; }
  .reader-bottom-controls button span { font-size: 9px; letter-spacing: .03em; font-weight: 800; }
  .reader-sidebar { height: 80dvh; }
}

/* Floating background soundtrack: deliberately quiet against the editorial UI. */
.background-audio { position: fixed; right: 21px; bottom: calc(21px + env(safe-area-inset-bottom, 0px)); z-index: 80; }
.music-toggle { display: flex; align-items: center; gap: 13px; padding: 12px 14px; min-width: 181px; min-height: 58px; border: 1px solid #a89267; border-radius: 3px; background: #0b0c0ef2; color: #f8f5ee; box-shadow: 0 12px 37px #0006; text-align: left; backdrop-filter: blur(10px); }
.music-toggle:hover { border-color: #dfc995; background: #1b1b1c; }
.music-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.music-copy b { font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.music-copy small { font-size: 9px; color: #d0b681; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.music-wave { width: 23px; height: 22px; display: flex; justify-content: center; align-items: center; gap: 3px; }
.music-wave i { display: block; width: 3px; height: 8px; background: #d2b477; border-radius: 2px; transform-origin: center; }
.music-wave i:nth-child(2) { height: 15px; }
.music-wave i:nth-child(3) { height: 12px; }
.music-wave i:nth-child(4) { height: 18px; }
.background-audio.playing .music-wave i { animation: sound-bars .75s ease-in-out infinite alternate; }
.background-audio.playing .music-wave i:nth-child(2) { animation-delay: -.3s; }
.background-audio.playing .music-wave i:nth-child(3) { animation-delay: -.52s; }
.background-audio.playing .music-wave i:nth-child(4) { animation-delay: -.15s; }
.music-play-icon { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #d2b477; }
.background-audio.playing .music-play-icon { width: 9px; height: 12px; border: 0; border-left: 3px solid #d2b477; border-right: 3px solid #d2b477; }
.reader-open .background-audio { bottom: calc(87px + env(safe-area-inset-bottom, 0px)); right: 14px; }
.reader-open .music-toggle { min-width: 48px; min-height: 46px; height: 46px; padding: 10px; justify-content: center; }
.reader-open .music-copy, .reader-open .music-play-icon { display: none; }
@keyframes sound-bars { from { transform: scaleY(.52); } to { transform: scaleY(1.25); } }
@media (max-width: 600px) {
  .background-audio { right: 12px; bottom: calc(15px + env(safe-area-inset-bottom, 0px)); }
  .music-toggle { min-height: 52px; min-width: 166px; padding: 10px 12px; gap: 10px; }
}