:root{
    --blk:#050505; --panel:#0d0d0d; --panel-2:#111111;
    --bone:#f4f2ec; --dim:#9a978f; --faint:#55534d;
    --gold:#c9a24b; --gold-soft:#d9b972; /* original MvxxleMvzik gold (recovered from v2 design tokens) */
    --line:rgba(244,242,236,.1); --line-2:rgba(244,242,236,.05);
    --disp:'Archivo Black',Impact,sans-serif;
    --disp-brand:'Syne','Archivo Black',Impact,sans-serif;
    --sans:'Inter',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --maxw:1320px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{background:var(--blk);color:var(--bone);font-family:var(--sans);line-height:1.6;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--gold);color:#050505}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:var(--blk)}
  ::-webkit-scrollbar-thumb{background:#222;border:3px solid var(--blk)}
  :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  section[id],div[id]{scroll-margin-top:70px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  @media(max-width:640px){.wrap{padding:0 18px}}

  .mono{font-family:var(--mono)}
  .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
  .disp{font-family:var(--disp);text-transform:uppercase;line-height:.85;letter-spacing:-.01em}

  /* nav */
  .nav{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
  .wm{font-family:var(--disp);font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase}
  .wm em{font-style:normal;color:var(--gold)}
  .nav-l{display:flex;gap:26px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
  .nav-l a{color:var(--dim);transition:color .25s}
  .nav-l a:hover{color:var(--bone)}
  .cta{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#050505;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--gold);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .cta:hover{background:var(--gold-soft);border-color:var(--gold-soft);transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(201,162,75,.55)}
  .cta:active{transform:none;box-shadow:none}
  .cta.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
  .cta.ghost:hover{background:transparent;border-color:var(--bone);box-shadow:none}
  @media(max-width:760px){.nav-l{display:none}}

  /* hero */
  .hero{padding:9vh 0 64px;border-bottom:1px solid var(--line-2);position:relative;overflow:hidden}
  .hero h1{font-size:clamp(3.7rem,15.5vw,13.5rem)}
  .hero h1 .gold{color:var(--gold)}
  .hero-sub{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;margin-top:44px;align-items:end}
  @media(max-width:860px){.hero-sub{grid-template-columns:1fr;gap:28px}}
  .hero-sub p{font-size:clamp(1.02rem,1.5vw,1.25rem);color:var(--dim);max-width:44ch}
  .hero-sub p b{color:var(--bone);font-weight:600}
  .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
  @media(max-width:860px){.chips{justify-content:flex-start}}
  .chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);color:var(--dim);padding:9px 14px;white-space:nowrap}
  .chip b{color:var(--gold);font-weight:500}
  .hero-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
  @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  .hero .wrap>*{animation:rise .9s var(--ease) both}
  .hero .wrap>*:nth-child(2){animation-delay:.12s}
  .hero .wrap>*:nth-child(3){animation-delay:.22s}
  .hero .wrap>*:nth-child(4){animation-delay:.32s}

  /* ticker */
  .ticker{padding:34px 0;border-bottom:1px solid var(--line-2);overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
  .tk{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:tkScroll 70s linear infinite}
  .ticker:hover .tk{animation-play-state:paused}
  @keyframes tkScroll{to{transform:translateX(-50%)}}

  /* ---- Roll call: artists (scrolling outline) paired with brands (solid, counter-scrolling)
     The two strips move in opposite directions so the pairing is unmistakable. Brands use the
     Syne Extrabold rather than Archivo Black. Archivo Black is the default free bold sans and
     reads as generic; Syne's letterforms are distinctive enough to look art-directed, and the
     contrast against the outlined Archivo above is deliberate. */
  .rollcall .lab{padding-bottom:16px}
  .rollcall .lab-b{padding-top:30px;padding-bottom:14px}
  .bstrip{padding:0 0 34px;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
  .bk{display:flex;align-items:center;width:max-content;white-space:nowrap;
    animation:bkScroll 46s linear infinite}
  @keyframes bkScroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .bstrip:hover .bk{animation-play-state:paused}
  .bk span{font-family:var(--disp-brand);font-weight:800;
    text-transform:uppercase;font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1;
    color:var(--bone);margin-right:28px;letter-spacing:-.015em}
  /* Syne has no usable bullet glyph -- it renders as a malformed mark. Draw the separator
     rather than setting it as type. */
  .bk span::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;
    background:var(--gold);vertical-align:middle;margin:0 0 .22em 28px}
  @media(prefers-reduced-motion:reduce){.bk{animation:none}}
  .tk span{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.6rem,6.5vw,5.4rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(244,242,236,.3);margin-right:34px}
  .tk span::after{content:"●";-webkit-text-stroke:0;color:var(--gold);font-size:.22em;vertical-align:middle;margin-left:34px}

  /* section heads */
  .shead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
  .shead h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:.9}
  .shead .lab{padding-bottom:6px}
  section{padding:92px 0}
  @media(max-width:640px){section{padding:60px 0}}

  /* wall */
  #wall{padding-top:80px}
  .wall{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
  @media(max-width:1000px){.wall{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:600px){.wall{grid-template-columns:repeat(3,1fr)}}
  /* Subtle branded ground so a lazy tile reads as intentional while its image decodes,
     instead of flashing an empty box during a fast scroll. */
  .tile{position:relative;aspect-ratio:1;overflow:hidden;display:block;
    background:linear-gradient(145deg,#101010 0%,#070707 100%);
    box-shadow:inset 0 0 0 1px rgba(201,162,75,.10)}
  .tile.big{grid-column:span 2;grid-row:span 2}
  .tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .4s ease}
  .tile:hover img{transform:scale(1.06)}
  .tile .cap{position:absolute;inset:auto 0 0 0;padding:22px 12px 10px;background:linear-gradient(to top,rgba(5,5,5,.92),transparent);
    font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone);
    opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .tile .cap b{display:block;color:var(--gold);font-weight:500;margin-bottom:2px}
  .tile:hover .cap{opacity:1;transform:none}
  .wall-note{margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}

  /* numbers */
  .nums{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--panel)}
  .nums-in{display:grid;grid-template-columns:repeat(4,1fr)}
  @media(max-width:820px){.nums-in{grid-template-columns:repeat(2,1fr)}}
  /* long figures (10,000+) need the full column on small phones */
  @media(max-width:560px){.nums-in{grid-template-columns:1fr}}
  .num{padding:38px 26px;border-left:1px solid var(--line-2)}
  .num:first-child{border-left:none}
  @media(max-width:820px){.num{border-left:none;border-top:1px solid var(--line-2)}}
  .num .n{font-family:var(--disp);font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1;color:var(--bone)}
  .num .n em{font-style:normal;color:var(--gold)}
  .num .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:10px}

  /* index / ledger */
  .controls{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
  .filters{display:flex;gap:8px;flex-wrap:wrap}
  .fbtn{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;transition:all .25s var(--ease)}
  .fbtn:hover{color:var(--bone);border-color:var(--dim)}
  .fbtn.on{background:var(--gold);color:#050505;border-color:var(--gold)}
  .fbtn .c{opacity:.55;margin-left:6px}
  .search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:8px 2px;transition:border-color .3s}
  .search:focus-within{border-color:var(--gold)}
  .search input{background:none;border:none;outline:none;color:var(--bone);font-family:var(--mono);font-size:.8rem;width:210px}
  .search input::placeholder{color:var(--faint)}
  .count{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin:16px 0 10px}
  .ledger{border-top:1px solid var(--line)}
  .lrow{display:grid;grid-template-columns:46px 64px 1.3fr 1fr .9fr 96px;gap:16px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line-2);transition:background .25s}
  .lrow:hover{background:var(--panel)}
  .lrow .th{width:42px;height:42px;background:var(--panel-2);overflow:hidden}
  .lrow .th img{width:100%;height:100%;object-fit:cover}
  /* Branded fallback for credits with no verified artwork. Reads as an intentional
     category mark rather than a missing image. Never fabricates a poster. */
  .lrow .th .thf{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
    font-family:var(--disp);font-size:15px;line-height:1;color:var(--gold);
    background:linear-gradient(145deg,#0f0f0f 0%,#080808 100%);
    box-shadow:inset 0 0 0 1px rgba(201,162,75,.28)}
  .lrow .yr{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
  .lrow .tt{font-weight:700;font-size:.95rem;letter-spacing:.01em;line-height:1.25;transition:color .25s}
  .lrow:hover .tt{color:var(--gold)}
  .lrow .tt a{color:inherit}
  .lrow .tt .ext{color:var(--faint);font-size:.72em;margin-left:5px;vertical-align:super}
  .lrow .aa{color:var(--dim);font-size:.86rem}
  .lrow .rr{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .lrow .cc{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:4px 8px;text-align:center;justify-self:end}
  .lhead{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .lhead:hover{background:none}
  @media(max-width:820px){
    .lrow{grid-template-columns:46px 1.4fr 1fr;gap:12px}
    .lrow .yr,.lrow .rr,.lrow .cc{display:none}
    .lhead{display:none!important}
  }

  /* audio — play controls + global player bar */
  .pb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);width:52px;height:52px;border-radius:50%;background:var(--gold);color:#050505;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s;z-index:3}
  .tile:hover .pb,.pb:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .pb:hover{background:var(--gold-soft)}
  .tile.playing .pb{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .tile.playing{outline:2px solid var(--gold);outline-offset:-2px}
  @media(hover:none),(pointer:coarse),(max-width:820px){.pb{opacity:.94;transform:translate(-50%,-50%) scale(1)}}
  .th{position:relative}
  .th .mini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,5,5,.5);color:var(--gold);border:none;cursor:pointer;opacity:0;transition:opacity .25s;padding:0}
  .lrow:hover .th .mini,.lrow.playing .th .mini{opacity:1}
  .lrow.playing .tt{color:var(--gold)}
  @media(hover:none),(pointer:coarse),(max-width:820px){.th .mini{opacity:.92}}
  .playerbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(5,5,5,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
  .playerbar.on{transform:none}
  body.has-player{padding-bottom:78px}
  .pbar-in{max-width:var(--maxw);margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:14px}
  @media(max-width:640px){.pbar-in{padding:10px 14px;gap:10px}}
  .pbar-art{width:44px;height:44px;object-fit:cover;background:var(--panel);flex:none}
  .pbar-meta{min-width:0;flex:1}
  .pbar-t{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pbar-l{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
  .pbar-btn{width:42px;height:42px;border-radius:50%;background:var(--gold);border:none;color:#050505;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:background .3s}
  .pbar-btn:hover{background:var(--gold-soft)}
  .pbar-x{background:none;border:none;color:var(--faint);font-family:var(--mono);cursor:pointer;font-size:1rem;padding:8px;flex:none}
  .pbar-x:hover{color:var(--bone)}
  .pbar-prog{position:absolute;top:-2px;left:0;right:0;height:4px;background:var(--line-2);cursor:pointer}
  .pbar-fill{height:100%;width:0;background:var(--gold)}

  /* roster */
  .ros-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--line-2);background:var(--panel);margin-bottom:38px}
  @media(max-width:820px){.ros-stats{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.ros-stats{grid-template-columns:1fr}}
  .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
  @media(max-width:600px){.rgrid{grid-template-columns:repeat(2,1fr)}}
  .rghead{grid-column:1/-1;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding:26px 0 10px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
  .rghead:first-child{padding-top:0}
  .rghead .sub{color:var(--faint);letter-spacing:.1em;margin-left:12px;text-transform:none}
  .rcard{position:relative;aspect-ratio:1;overflow:hidden;background:var(--panel);display:block}
  .rcard img{width:100%;height:100%;object-fit:cover;filter:grayscale(35%);transition:transform .8s var(--ease),filter .5s var(--ease)}
  .rcard:hover img{transform:scale(1.05);filter:grayscale(0)}
  .rcard .rmeta{position:absolute;inset:auto 0 0 0;padding:30px 14px 13px;background:linear-gradient(to top,rgba(5,5,5,.95),transparent)}
  .rcard .rn{font-family:var(--disp);text-transform:uppercase;font-size:clamp(.95rem,1.6vw,1.25rem);line-height:1}
  .rcard .rr{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:6px}
  .rcard.noimg .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:clamp(3rem,8vw,6rem);color:var(--gold);opacity:.85}

  /* story */
  #story{background:var(--panel);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  @media(max-width:860px){.story-grid{grid-template-columns:1fr;gap:30px}}
  .story-grid h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.2rem,5vw,4rem);line-height:.9}
  .story-grid h2 em{font-style:normal;color:var(--gold)}
  .story-copy p{color:var(--dim);margin-bottom:18px;max-width:56ch}
  .story-copy p b{color:var(--bone);font-weight:600}

  /* book */
  #book .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
  @media(max-width:860px){#book .book-grid{grid-template-columns:1fr;gap:36px}}
  #book h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.88}
  #book h2 em{font-style:normal;color:var(--gold)}
  #book .lead{color:var(--dim);margin-top:18px;max-width:40ch}
  .direct{margin-top:30px;font-family:var(--mono);font-size:.78rem;line-height:2.2;color:var(--dim)}
  .direct a{color:var(--bone);border-bottom:1px solid var(--line);transition:border-color .25s}
  .direct a:hover{border-color:var(--gold)}
  .direct .dl{display:inline-block;width:110px;color:var(--gold);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
  form .row{margin-bottom:16px}
  form label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
  form input,form select,form textarea{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--bone);font-family:var(--sans);font-size:.95rem;padding:13px 14px;transition:border-color .25s,box-shadow .25s}
  form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
  form textarea{resize:vertical;min-height:100px}
  form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:520px){form .two{grid-template-columns:1fr}}
  .fnote{font-family:var(--mono);font-size:.64rem;color:var(--faint);margin-top:10px;line-height:1.8}
  .ok-msg{display:none;border:1px solid var(--gold);padding:30px;font-family:var(--mono);font-size:.8rem;line-height:1.9;color:var(--bone)}
  .ok-msg.show{display:block}

  footer{padding:52px 0 40px}
  .ft{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  .ft .fm{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

  /* tap targets: every interactive element clears 24px (WCAG 2.2 AA minimum) */
  .ft .fm a{display:inline-block;padding:6px 3px}
  .direct a{display:inline-block;padding:4px 0 3px}
  .search input{padding:4px 0}
  .nav-l a{display:inline-block;padding:5px 0}
  .lrow .tt a{display:inline-block;padding:3px 0}

  /* reveals */
  .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .rv.in{opacity:1;transform:none}

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .tk{animation:none}
    .ticker{overflow-x:auto}
    .hero .wrap>*{animation:none}
    .rv{opacity:1;transform:none;transition:none}
    *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  }

/* ============================================================
   MULTI-PAGE ARCHITECTURE
   Shared chrome and page-level components. Same tokens, same
   motion curve, same restraint as the original one-page build.
   ============================================================ */

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#050505;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px}
.skip:focus{left:0}

/* nav: active route + mobile menu */
.nav-l a.on{color:var(--bone)}
.nav-l a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
.nav-l a{position:relative}
.navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--bone);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;transition:border-color .3s var(--ease)}
.navtoggle:hover{border-color:var(--bone)}
.navmenu{display:none;flex-direction:column;border-top:1px solid var(--line-2);background:var(--blk)}
.navmenu a{font-family:var(--disp);text-transform:uppercase;font-size:1.5rem;padding:16px 28px;
  border-bottom:1px solid var(--line-2);color:var(--bone)}
.navmenu a.on{color:var(--gold)}
.navmenu.open{display:flex}
@media(max-width:860px){
  .nav-l{display:none}
  .navtoggle{display:block}
  .nav .cta{display:none}
  .navmenu a{font-size:1.25rem;padding:14px 18px}
}

/* breadcrumbs */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:18px 28px 0;display:flex;gap:9px;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.crumbs a{color:var(--dim);display:inline-block;padding:5px 2px}
.crumbs a:hover{color:var(--bone)}
@media(max-width:640px){.crumbs{padding:14px 18px 0}}

/* page hero (every route except home) */
.phero{padding:64px 0 34px;border-bottom:1px solid var(--line-2)}
.phero h1{font-size:clamp(2.6rem,8vw,6rem);margin-top:14px}
.phero .gold{color:var(--gold)}
.plead{color:var(--dim);max-width:60ch;margin-top:26px;font-size:clamp(1rem,1.4vw,1.15rem)}
@media(max-width:640px){.phero{padding:44px 0 26px}}

/* generic band + section head with a "see more" link */
.band{padding:78px 0}
.band.alt{background:var(--panel);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
@media(max-width:640px){.band{padding:54px 0}}
.seemore{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;transition:opacity .3s var(--ease)}
.seemore:hover{opacity:.72}

/* homepage feature grid: fewer, larger, curated */
.wall.feature{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.wall.feature{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.wall.feature{grid-template-columns:repeat(2,1fr)}}

/* preview cards -> other routes */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:2px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;gap:8px;padding:34px 28px;background:var(--blk);
  border:1px solid var(--line-2);transition:background .35s var(--ease),border-color .35s var(--ease)}
.pcard:hover{background:#0b0b0b;border-color:rgba(201,162,75,.35)}
.pcard .pn{font-family:var(--disp);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;color:var(--gold);text-wrap:balance}
.pcard .pn em{font-style:normal;color:var(--bone)}
.pcard .pt{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.pcard .pd{color:var(--dim);font-size:.94rem;flex:1}
.pcard .pgo{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-top:6px;transition:transform .35s var(--ease)}
.pcard:hover .pgo{transform:translateX(4px)}

/* closing call-to-action band */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin-top:56px;padding:36px 32px;border:1px solid var(--line);background:var(--panel)}
.cta-band h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1}
.cta-band p{color:var(--dim);margin-top:8px;max-width:52ch}
@media(max-width:640px){.cta-band{padding:26px 20px;margin-top:40px}}

/* services */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:76px 1fr 1.25fr;gap:30px;padding:38px 6px;
  border-bottom:1px solid var(--line);align-items:start;transition:background .35s var(--ease)}
.svc-row:hover{background:var(--panel)}
.svc-row .no{font-family:var(--mono);font-size:.78rem;color:var(--gold);letter-spacing:.1em}
.svc-row h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.05}
.svc-row .who{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:10px}
.svc-row p{color:var(--dim)}
@media(max-width:820px){.svc-row{grid-template-columns:1fr;gap:12px;padding:28px 4px}.svc-row .no{order:-1}}

/* about */
.story-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:34px}}
.story-side h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px}
.people dt{font-weight:700;margin-top:18px}
.people dd{color:var(--dim);font-size:.94rem;margin-top:4px}
.nums-in.inline{border:1px solid var(--line-2);margin-top:56px;background:var(--panel)}

/* long-form legal prose */
.prose{max-width:70ch}
.prose h2{font-family:var(--disp);text-transform:uppercase;font-size:1.1rem;margin:34px 0 10px}
.prose p{color:var(--dim);margin-bottom:14px}
.prose p b{color:var(--bone);font-weight:600}
.prose a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--gold)}
.prose .meta{font-family:var(--mono);font-size:.7rem;color:var(--faint);margin:0 0 30px;
  text-transform:uppercase;letter-spacing:.1em}

/* footer */
.ft{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:44px;align-items:start}
@media(max-width:820px){.ft{grid-template-columns:1fr;gap:30px}}
.ft-brand .wm{font-size:1.6rem;display:inline-block;margin-bottom:12px}
.ft-brand .fm{color:var(--dim);font-size:.9rem;max-width:38ch;text-transform:none;letter-spacing:0}
.ft-col h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px}
.ft-col a{display:block;color:var(--dim);padding:7px 0;font-size:.92rem;transition:color .3s var(--ease)}
.ft-col a:hover{color:var(--bone)}
.ft-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-2)}


/* ============ CATALOG SALES ============ */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.cta.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-2)}
.cta.ghost:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.fineprint{font-family:var(--mono);font-size:.66rem;line-height:1.6;color:var(--faint);margin-top:16px;max-width:60ch}

.taglist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.taglist li{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);padding:10px 14px;box-shadow:inset 0 0 0 1px var(--line-2);transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.taglist li:hover{color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,162,75,.5)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:8px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);padding:30px 26px 34px}
.step .no{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--gold);margin-bottom:16px}
.step h3{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;margin:0 0 10px;letter-spacing:-.01em}
.step p{color:var(--dim);font-size:.9rem;line-height:1.6;margin:0}

.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
@media(max-width:760px){.trust{grid-template-columns:1fr}}
.trust>div{background:var(--panel);padding:28px 26px}
.trust h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.trust p{color:var(--dim);font-size:.9rem;line-height:1.65;margin:0}

.formlead{color:var(--dim);max-width:64ch;margin:0 0 22px}
.mockbanner{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--gold);
  padding:12px 16px;background:rgba(201,162,75,.08);box-shadow:inset 0 0 0 1px rgba(201,162,75,.3);margin-bottom:26px}
.cform{max-width:880px}
.cform fieldset{border:0;padding:0;margin:0 0 34px}
.cform legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding:0 0 16px}
.cform legend .opt{color:var(--faint)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
.cform label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.cform label.wide{margin-top:16px}
.req{color:var(--gold)}
.opt{color:var(--faint);text-transform:none;letter-spacing:.02em}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{
  width:100%;margin-top:8px;background:var(--panel);color:var(--bone);border:0;
  box-shadow:inset 0 0 0 1px var(--line-2);padding:13px 14px;font-family:Inter,system-ui,sans-serif;
  font-size:.95rem;letter-spacing:0;text-transform:none;transition:box-shadow .25s var(--ease)}
.cform textarea{resize:vertical;line-height:1.55}
/* Selects must not fall back to the OS control -- a white dropdown on black reads broken. */
.cform select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
    linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cform select option{background:var(--blk);color:var(--bone)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--gold)}
.fieldgroup{margin-top:20px}
.glabel{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.optchips{display:flex;flex-wrap:wrap;gap:9px}
.optchip{position:relative;display:inline-flex}
.optchip input{position:absolute;opacity:0;width:0;height:0}
.optchip span{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim);padding:11px 15px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line-2);transition:all .25s var(--ease)}
.optchip input:checked+span{color:var(--blk);background:var(--gold);box-shadow:none}
.optchip input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--gold)}

.more{margin:0 0 30px;box-shadow:inset 0 0 0 1px var(--line-2)}
.more summary{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);padding:16px 18px;cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+ ";font-weight:700}
.more[open] summary::before{content:"- "}
.more summary span{color:var(--faint);text-transform:none;letter-spacing:.02em}
.moreinner{padding:0 18px 22px}

.uploadnote{font-size:.86rem;line-height:1.65;color:var(--dim);background:var(--panel);
  padding:20px 22px;margin-bottom:26px}
.uploadnote b{color:var(--bone)}
.uploadnote span{display:block;margin-top:10px;font-family:var(--mono);font-size:.68rem;
  line-height:1.6;color:var(--faint)}

.consent{display:flex!important;gap:12px;align-items:flex-start;margin-bottom:24px;
  text-transform:none!important;letter-spacing:0!important;font-family:Inter,system-ui,sans-serif!important;
  font-size:.86rem!important;line-height:1.6;color:var(--dim)!important;cursor:pointer}
.consent input{margin-top:1px;accent-color:var(--gold);width:24px;height:24px;flex:0 0 auto;cursor:pointer}
.cform .submit{border:0;cursor:pointer;font-size:.8rem}

.sent{max-width:640px;padding:38px 34px;background:var(--panel)}
.sent h3{font-family:var(--disp);text-transform:uppercase;font-size:1.35rem;margin:14px 0 14px;letter-spacing:-.01em}
.sent p{color:var(--dim);line-height:1.7;margin:0 0 12px}

/* homepage catalog-sales module */
.catmod{border-top:1px solid var(--line-2)}
.catmod-in{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center;padding:70px 30px}
@media(max-width:820px){.catmod-in{grid-template-columns:1fr;gap:26px;padding:52px 30px}}
.catmod h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.8rem,4vw,3.1rem);
  line-height:1.02;margin:14px 0 16px;letter-spacing:-.015em}
.catmod p{color:var(--dim);line-height:1.7;margin:0;max-width:52ch}
.catmod .cta{margin-top:4px}
/* ============ CONSENT (dormant unless a category is registered) ============ */
.cc-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:rgba(5,5,5,.97);
  border-top:1px solid rgba(201,162,75,.35);transform:translateY(100%);
  transition:transform .45s var(--ease)}
@supports(backdrop-filter:blur(8px)){.cc-bar{background:rgba(5,5,5,.88);backdrop-filter:blur(10px)}}
.cc-bar.cc-in{transform:none}
@media(prefers-reduced-motion:reduce){.cc-bar{transition:none}}
.cc-bar-in{max-width:1240px;margin:0 auto;padding:22px 30px;display:flex;gap:28px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-copy{flex:1 1 420px;min-width:0}
.cc-lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.cc-copy p{margin:0;color:var(--dim);font-size:.86rem;line-height:1.6;max-width:68ch}
.cc-bar-acts{display:flex;gap:10px;flex-wrap:wrap}
/* Every action is the same size and weight. Reject is never the quiet one. */
.cc-btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line-2);
  padding:14px 18px;min-height:44px;cursor:pointer;transition:all .25s var(--ease)}
.cc-btn:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.cc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cc-primary{background:var(--gold);color:var(--blk);box-shadow:none}
.cc-primary:hover{background:var(--gold-soft);color:var(--blk);box-shadow:none}

.cc-modal{position:fixed;inset:0;z-index:9100;background:rgba(5,5,5,.82);display:flex;
  align-items:center;justify-content:center;padding:22px;overflow-y:auto}
.cc-box{background:var(--blk);box-shadow:inset 0 0 0 1px rgba(201,162,75,.3);
  max-width:640px;width:100%;padding:34px 30px;max-height:calc(100vh - 44px);overflow-y:auto}
.cc-box h2{font-family:var(--disp);text-transform:uppercase;font-size:1.5rem;
  letter-spacing:-.015em;margin:10px 0 22px}
.cc-rows{display:flex;flex-direction:column;gap:2px;margin-bottom:26px}
.cc-row{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  background:var(--panel);padding:20px 22px}
.cc-row h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 8px}
.cc-row p{margin:0;color:var(--dim);font-size:.84rem;line-height:1.6}
.cc-always{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;padding-top:2px}
.cc-sw{position:relative;flex:0 0 auto;width:52px;height:30px;cursor:pointer}
.cc-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-track{position:absolute;inset:0;background:var(--panel-2,#141414);
  box-shadow:inset 0 0 0 1px var(--line-2);transition:all .25s var(--ease);pointer-events:none}
.cc-track::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;
  background:var(--faint);transition:all .25s var(--ease)}
.cc-sw input:checked+.cc-track{background:rgba(201,162,75,.22);box-shadow:inset 0 0 0 1px var(--gold)}
.cc-sw input:checked+.cc-track::after{left:26px;background:var(--gold)}
.cc-sw input:focus-visible+.cc-track{outline:2px solid var(--gold);outline-offset:2px}
.cc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cc-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
body.cc-lock{position:fixed;width:100%;overflow:hidden}

@media(max-width:760px){
  .cc-bar-in{padding:20px;gap:18px}
  .cc-bar-acts{width:100%}
  .cc-bar-acts .cc-btn{flex:1 1 100%;text-align:center}
  .cc-row{flex-direction:column;gap:14px}
  .cc-acts .cc-btn{flex:1 1 100%;text-align:center}
}

/* disclosure table on the cookies page — inherits the prose rhythm */
.prose .ctable{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:.9rem}
.prose .ctable th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);padding:0 0 10px;border-bottom:1px solid var(--line-2)}
.prose .ctable td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-2);
  color:var(--dim);line-height:1.6;vertical-align:top}
.prose .ctable td:first-child{color:var(--bone);white-space:nowrap;padding-right:26px}
@media(max-width:560px){
  .prose .ctable,.prose .ctable tbody,.prose .ctable tr,.prose .ctable td{display:block;width:100%}
  .prose .ctable thead{display:none}
  .prose .ctable td:first-child{padding-bottom:4px;border:0}
  .prose .ctable td{padding-right:0}
}

/* private Listening Room entry -- deliberately quiet: a members' door, not a pitch */
.nav-r{display:flex;align-items:center;gap:22px}
.roomlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);padding:12px 2px;white-space:nowrap;transition:color .25s}
.roomlink svg{color:var(--gold);flex:0 0 auto}
.roomlink:hover{color:var(--bone)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.navmenu a.navroom{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--gold);display:flex;flex-direction:column;gap:5px}
.navmenu a.navroom span{font-size:.62rem;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.ft-note{color:var(--faint)}
@media(max-width:1180px){.nav-l{gap:18px}.nav-r{gap:16px}}
@media(max-width:860px){.nav-r{display:none}}

/* Homepage strip for the Listening Room, approved September 2026. Kept quiet on purpose:
   a members door near the foot of the page, not a pitch above the work. */
.roomstrip{border-top:1px solid var(--line-2);padding:0!important}
.roomstrip-in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 30px;flex-wrap:wrap}
.roomstrip-in>div{flex:1 1 320px;min-width:0}
.roomstrip p{color:var(--dim);margin:8px 0 0;max-width:62ch;font-size:.95rem;line-height:1.65}