/* newstyle.css — new-style overlay for the legacy site.css server pages (Composer detail + Composers
   index), NTI-379.

   Loaded AFTER site.css. Rather than re-port the intricate, works.js-coupled markup, this simply REMAPS
   site.css's design tokens to the homepage design system (Newsreader + Inter; orange/ink/paper). Because
   every rule in site.css reads those tokens, the whole page — works list/timeline, search, sort, genre
   filter, the composers table, sticky header + footer — adopts the new palette + fonts in one move,
   while keeping the tested 46px header layout (logo to the side), the works-search docking, and all
   behaviour untouched. The animated wipe-in underline already lives in site.css, so it carries over in
   the new orange automatically. Pages opt in with new_logo=1 (dark header) + this stylesheet. */
:root{
  --paper:#F6F2EC; --paper-hi:#EFE9DD; --paper-lo:#E7E1D5;
  --ink:#0C0C0E; --ink-soft:#26221D; --rule:#DDD8CF;
  --brass:#E4572E; --brass-deep:#C7431F; --muted:#8B8B8D;
  --orange-muted:color-mix(in srgb, #E4572E 62%, #8A877D);   /* softened orange for toggle controls — matches the timeline's --ll-orange-muted */
  --orange-wash:rgba(228,87,46,.18);   /* the light-orange selected-option wash (orange #E4572E at 18%) */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --paper-dim:#c9c3b6;   /* muted text on the dark header */
}
/* the homepage ground is flat paper, not site.css's warm radial */
html,body{background:var(--paper)}

/* ---- dark header (46px, logo to the side) + the docked works-bar --------------------------- */
.site-header-new{background:var(--ink);border-bottom-color:rgba(255,255,255,.08)}
.site-header-new .site-brandimg{height:28px;width:auto;display:block}
.site-header-new .site-markimg,.wh-markimg{display:none}   /* default: full lockup shows, mark hidden */
.site-header-new .site-tag{display:none}   /* brand.png already carries the wordmark; drop the tagline */
.site-header-new .site-dock{color:var(--paper)}          /* docked page title reads light on dark */
/* When the Works toolbar docks to the top it becomes the dark bar (same ground as the header it
   merges into); its brand lockup + search + tools ride on it. */
.works-head.stuck{background:var(--ink);border-bottom-color:rgba(255,255,255,.08)}
.wh-brandimg{height:28px;width:auto;display:block}

/* Mobile portrait: the header AND the docked works-bar are tight → show just the mark, drop the
   wordmark. AFTER the base rules (and matching .stuck's specificity) so it also wins once the bar docks. */
@media (max-width:560px){
  .site-header-new .site-brandimg{display:none}
  .site-header-new .site-markimg{display:block;height:28px;width:auto}
  .wh-brandimg,.works-head.stuck .wh-brandimg{display:none}
  .wh-markimg,.works-head.stuck .wh-markimg{display:block;height:28px;width:auto}
}

/* ---- Mobile hamburger: the mark doubles as the menu button (mark → ☰ → ✕), Squarespace-style, with
   a dropdown of the site nav + a scrim. Mirrors the homepage (.nav-toggle) and the timeline component.
   Only where the mark shows (≤560px, and NOT the program page, which keeps the full lockup); sitemenu.js
   self-gates on the mark's visibility, so desktop/program fall through to the wordmark's link home. --- */
.site-navbars,.site-navmenu,.site-menubtn{display:none}
.site-navscrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;z-index:3;
  transition:opacity .4s ease}   /* below the sticky header (z-4); the ✕ + dropdown ride above it */
body.nav-locked{overflow:hidden}                 /* freeze the page behind the open menu */
/* Once open, lift the header (its dropdown lives inside) AND the scrim above the sticky Works toolbar
   (.works-head, z-5) + column header (.w-thead, z-4) — otherwise those stack through the open menu. */
body.nav-open .site-header{z-index:22}
body.nav-open .site-navscrim{opacity:1;pointer-events:auto;z-index:21}

/* Desktop (>560px): a dedicated 3-bar hamburger in the header's top-right opens a right-aligned dropdown
   of the site nav (mobile uses the mark-flip instead). Same body.nav-open state drives both. */
@media (min-width:561px){
  .site-header-new .site-menubtn{display:flex;align-items:center;justify-content:center;position:absolute;
    top:50%;right:var(--pad-x);transform:translateY(-50%);z-index:2;width:26px;height:24px;padding:0;border:0;
    background:none;cursor:pointer}
  .site-menubars{position:relative;width:22px;height:16px}
  .site-menubars>span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--paper-dim);
    transition:transform .3s ease,opacity .2s ease}
  .site-menubars>span:nth-child(1){top:0}
  .site-menubars>span:nth-child(2){top:7px}
  .site-menubars>span:nth-child(3){top:14px}
  .site-menubtn:hover .site-menubars>span{background:var(--paper)}
  body.nav-open .site-menubars>span:nth-child(1){transform:translateY(7px) rotate(45deg)}   /* ☰ → ✕ */
  body.nav-open .site-menubars>span:nth-child(2){opacity:0}
  body.nav-open .site-menubars>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-header-new .site-navmenu{display:flex;flex-direction:column;position:absolute;z-index:3;top:100%;
    right:var(--pad-x);left:auto;min-width:190px;margin-top:6px;background:var(--ink);
    border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.5);
    overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .2s ease}
  body.nav-open .site-header-new .site-navmenu{max-height:70vh;opacity:1}
  .site-navmenu a{position:relative;padding:11px 18px;font-family:var(--sans);font-size:12px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-decoration:none;opacity:.9}
  .site-navmenu a:hover{opacity:1;background:rgba(255,255,255,.06)}
  .site-navmenu a:not(:first-child)::before{content:"";position:absolute;left:18px;right:18px;top:0;
    height:1px;background:rgba(255,255,255,.12)}
}
@media (max-width:560px){
  .site-header-new .wordmark{position:relative;perspective:240px}   /* perspective → the mark's rotateY reads as a 3D flip */
  .site-header-new .site-markimg{transition:opacity .12s ease,transform .18s ease}
  .site-header-new .site-navbars{display:block;position:absolute;left:2px;top:50%;transform:translateY(-50%);
    width:24px;height:16px;opacity:0;transition:opacity .12s ease}   /* the ☰ / ✕, overlaid on the mark */
  .site-header-new .site-navbars>span{position:absolute;left:0;right:0;height:2px;border-radius:2px;
    background:var(--paper);transition:transform .5s ease}
  .site-header-new .site-navbars>span:nth-child(1){top:2px}
  .site-header-new .site-navbars>span:nth-child(2){bottom:2px}
  body.nav-flip .site-header-new .site-markimg{opacity:0;transform:rotateY(90deg)}   /* mark flips out … */
  body.nav-flip .site-header-new .site-navbars{opacity:1}                            /* … ☰ flips in */
  body.nav-open .site-header-new .site-navbars>span:nth-child(1){transform:translateY(5px) rotate(45deg)}   /* ☰ → ✕ */
  body.nav-open .site-header-new .site-navbars>span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

  .site-header-new .site-navmenu{display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;background:var(--ink);
    max-height:0;overflow:hidden;transition:max-height .5s ease}
  body.nav-open .site-header-new .site-navmenu{max-height:80vh}
  /* Items left-aligned under the ✕ (same --pad-x as the header content); dividers inset to the text,
     placed ABOVE each item so none hangs after the last. */
  .site-navmenu a{position:relative;padding:18px var(--pad-x);font-family:var(--sans);font-size:13px;
    font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-decoration:none;opacity:.92}
  .site-navmenu a:hover{opacity:1}
  .site-navmenu a::before{content:"";position:absolute;left:var(--pad-x);right:var(--pad-x);top:0;
    height:1px;background:rgba(255,255,255,.14)}
  /* Program page keeps the full lockup on mobile → no hamburger there. */
  .program-page .site-navbars,.program-page .site-navmenu,.program-page .site-navscrim{display:none}
}

/* ---- footer: brand in sans caps, tagline in serif with an orange period -------------------- */
.site-footer a.site-foot-brand{font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}   /* THE LONG LINE — Inter caps, beats .site-footer a's serif */
.site-footer .site-foot-tag{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:12.8px;color:var(--ink-soft)}   /* tagline: EB Garamond italic, 12.8px */
.site-footer .site-foot-tag .dot{color:var(--brass)}   /* the orange period */

/* ---- CDP works list: zebra rows so the list reads as a table, softening the busy orange titles ---- */
.works li{border-bottom:0}                       /* the alternating fill is the row separator now */
.works li:nth-child(even){background:var(--paper-hi)}
.w-thead{background:#d9d6d2;transition:box-shadow .2s ease}   /* sticky sort header on a gray ground */
/* Shadow only once the bar is DOCKED (works.js toggles .stuck on .works-head, its previous sibling):
   falls only BELOW — the negative spread cancels the left/right bleed so the row keeps its width. */
.works-head.stuck ~ .w-thead{box-shadow:0 6px 6px -4px rgba(0,0,0,.4)}
/* Works header row: distinct #aaaaa4 ground, no gap under it, full-bleed so it's the SAME width as the
   rows below (the in-flow bar had no gutter break-out, so it sat narrower than the table). Dark labels. */
.works-head{background:#aaaaa4;margin-bottom:0;
  margin-inline:calc(-1 * var(--pad-x));padding-inline:var(--pad-x)}
.works-head.stuck{margin-inline:calc(50% - 50vw) 0}   /* docked: keep full-viewport; cancel the in-flow break-out */
.works-head h2.wh-title{color:var(--ink)}             /* "Works" heading dark on the gray ground */
#w-th-title:not(:hover):not(.on){color:var(--ink)}    /* "Title" column header dark at rest (sort states keep brass) */
.wt-seg{border:0}                                     /* drop the segmented view-toggle outline */
/* Works toolbar controls: muted orange on both states, matching the timeline's segmented toggles —
   idle icon + pressed/active fill in --orange-muted instead of the full --brass. */
.wt-chip{color:var(--orange-muted)}
.wt-chip:hover{color:var(--orange-muted)}
.wt-chip.on{background:var(--orange-muted);color:#fff}
.wt-btn{color:var(--orange-muted)}
.wt-btn:hover:not(:disabled){border-color:var(--orange-muted);color:var(--orange-muted)}
.wt-btn.active,.wt-btn.active:hover:not(:disabled){border-color:var(--orange-muted);background:var(--orange-muted);color:#fff}
/* Full-window works view (fs-on): the header is the docked BLACK bar the whole time — no gray-at-rest
   → black-on-scroll flip. The block adds a --pad-x gutter, so the bar breaks out of it (margin) while
   its content stays inset (padding); otherwise the solid black bar leaves 10px of white beside it. */
.works-block.fs-on .works-head,
.works-block.fs-on .works-head.stuck{background:var(--ink);border-bottom-color:rgba(255,255,255,.08);
  margin-inline:calc(-1 * var(--pad-x));padding-inline:var(--pad-x)}

/* Works-table titles: Inter, weight 400, upright
   (not the serif italic — Inter's italic face isn't loaded). Subtitle stays lighter to keep hierarchy. */
.works .w-title{font-family:var(--sans);font-weight:400;font-style:normal}
.works .w-sub{font-weight:400;font-style:normal}

/* ---- Program page (Custom Focus / radio playlist): new style ------------------------------------
   H1 (.program-title) + H2 (show headers) stay Newsreader via the --serif token. The "Composer: Work"
   H3 rows are Inter — composer upright, work italic (both wrappers baked by PlayHistory._build). Links
   pick up the orange --brass-deep token automatically. */
.program-text h3{font-family:var(--sans);font-weight:500}
.program-text .program-title{margin-top:1.25rem}   /* top air for the program title (beats the .program-text h1 rule) */
.program-text h2 + h3{margin-top:0}   /* first track sits close under its "Hour 1" / "Hour 2" heading */
.program-text .pl-h3-composer{font-family:var(--sans);font-style:normal}
.program-text .pl-h3-work{font-family:var(--sans);font-style:italic;font-weight:400}

/* ---- Program page right-hand timeline: the new-style LIGHT canvas theme (theme="light"). First cut:
   light ground + the new era palette under a lighter overlay (render.ts opts.light). The component reads
   these --ll-* vars off the host element. (Orange links / muted-orange buttons are a follow-up.) */
.program-stage long-line{
  --ll-paper:#F6F2EC; --ll-paper-hi:#EFE9DD; --ll-paper-lo:#E7E1D5;
  --ll-ink:#26221D; --ll-rule:#DDD8CF; --ll-muted:#8B8B8D;
  --ll-brass:#E4572E; --ll-brass-deep:#C7431F;
}

/* Program page header: unlike the CDP/WDP (tight, in-header search), it has room — so keep the FULL
   logo+wordmark lockup on mobile instead of dropping to the mark-only. Overrides the ≤560px rule above. */
@media (max-width:560px){
  .program-page .site-header-new .site-brandimg{display:block;height:28px;width:auto}
  .program-page .site-header-new .site-markimg{display:none}
}