/* page.css — the "new style" for editorial content pages (work, composer, …), matching the marketing
   homepage's design system (Newsreader + Inter, ink/paper/orange). Kept SEPARATE from site.css so the
   redesign can roll out page-by-page; site.css still drives the timeline + any not-yet-migrated pages.
   Rolled out first on the Work page (the simplest). (NTI-379 style system) */

/* ---- design tokens (shared with home.css) ------------------------------------------------- */
:root{
  --ink:#0C0C0E;            /* near-black text / grounds */
  --ink-soft:#26221D;      /* long-form body ink — a touch warmer/softer than pure near-black */
  --paper:#F6F2EC;         /* off-white page ground */
  --paper-2:#EFE9DD;       /* faint panel fill */
  --accent:#E4572E;        /* orange — links, CTAs, the one accent */
  --accent-deep:#C7431F;   /* hover */
  --grey:#8B8B8D;          /* secondary text */
  --rule:#DDD8CF;          /* hairlines */
  --paper-dim:#c9c3b6;     /* muted text on dark grounds (the masthead search) */

  --serif:"Newsreader",Georgia,"Times New Roman",serif;   /* display + long-form reading */
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --maxw-page:1600px;      /* masthead + footer container — matches the homepage (--maxw) */
  --maxw-read:720px;       /* the reading column */
  --gutter:clamp(24px,4vw,64px);   /* matches the homepage gutter */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:64px; --s8:80px;
}
/* Phones: standardise the page gutter to the composer page's 10px (site.css --pad-x). The clamp floors
   at 24px, which left the work page wider-padded than the CDP on mobile. site.css isn't loaded here, so
   the value is literal. Applies to the masthead, reading column and footer alike, so they stay aligned. */
@media (max-width:767.98px){
  :root{--gutter:10px}
}

/* ---- reset / base ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-deep);text-decoration:none}   /* rest: deep C7431F */
a:hover{color:var(--accent)}                        /* hover: brighten to E4572E + underline wipe */
img{max-width:100%;height:auto}

/* Animated underline (from the old site.css): a 1px bar in the link's own colour that wipes in from
   the left on hover. One rest-state definition for the content text links; each :hover just grows it
   to full width. The brand lockup (an image) and the audio button opt out by not being listed. */
.w-crumb a,.w-body a,.attribution a,.rec-cred a,.w-back a,.pg-foot a{
  text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:left bottom;background-size:0 1px;
  transition:background-size .8s ease,color .15s ease}
.w-crumb a:hover,.w-body a:hover,.attribution a:hover,.rec-cred a:hover,.w-back a:hover,.pg-foot a:hover{
  background-size:100% 1px}

/* ---- masthead (dark band, like the homepage hero) ----------------------------------------- */
/* brand.png is the light/cream logo+wordmark lockup, so it needs the dark ground; the serif tagline
   with its orange period echoes the homepage hero headline. */
.pg-mast{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.pg-mast .pg-wrap{max-width:var(--maxw-page);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.pg-brand{display:inline-flex;align-items:center}
.pg-brand img{height:42px;width:auto;display:block}
.pg-brand .pg-markimg{display:none}                       /* default: the full lockup */
/* Mobile portrait: tight header → show just the mark, drop the wordmark. */
@media (max-width:560px){
  .pg-brand .pg-brandimg{display:none}
  .pg-brand .pg-markimg{display:block;height:32px}
}

/* ---- Mobile hamburger: the mark doubles as the menu button (mark → ☰ → ✕), Squarespace-style, with a
   dropdown of the site nav + a scrim. Matches the CDP (.site-header-new) and the homepage; sitemenu.js
   toggles body.nav-flip/nav-open and self-gates on the mark's visibility (so desktop links 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:10;
  transition:opacity .4s ease}   /* below the sticky masthead (z-20); the ✕ + dropdown ride above it */
body.nav-locked{overflow:hidden}                 /* freeze the page behind the open menu */
body.nav-open .site-navscrim{opacity:1;pointer-events:auto}
body.nav-open.nav-hover .site-navscrim{opacity:0;pointer-events:none}   /* hover-opened dropdown: no page-dimming scrim (mirrors the homepage Composers menu) */

/* Desktop (>560px): a 3-bar hamburger sits at the right of the masthead (right of the search), opening a
   right-aligned dropdown of the site nav. Push the brand left so search + hamburger group on the right. */
@media (min-width:561px){
  .pg-mast .pg-brand{margin-right:auto}
  .pg-mast .site-menubtn{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    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)}
  .pg-mast .site-navmenu{display:flex;flex-direction:column;position:absolute;z-index:3;top:100%;
    right:var(--gutter);left:auto;min-width:190px;margin-top:2px;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 .pg-mast .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)}
  /* Tiered "Composers" group (NTI-394): dim header over indented Timeline/Waveform/Index. */
  .site-navmenu .site-nav-hd{display:block;position:relative;padding:9px 18px 5px;font-family:var(--sans);
    font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:.5}
  .site-navmenu .site-nav-hd::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;
    background:rgba(255,255,255,.12)}
  .site-navmenu a.site-nav-sub{padding-left:34px}
  .site-navmenu .site-nav-hd + a.site-nav-sub::before{display:none}
}
@media (max-width:560px){
  .pg-brand{position:relative;perspective:240px}   /* perspective → the mark's rotateY reads as a 3D flip */
  .pg-brand .pg-markimg{transition:opacity .12s ease,transform .18s ease}
  .pg-brand .site-navbars{display:block;position:absolute;left:3px;top:50%;transform:translateY(-50%);
    width:26px;height:17px;opacity:0;transition:opacity .12s ease}   /* the ☰ / ✕, overlaid on the 32px mark */
  .pg-brand .site-navbars>span{position:absolute;left:0;right:0;height:2px;border-radius:2px;
    background:#fff;transition:transform .5s ease}
  .pg-brand .site-navbars>span:nth-child(1){top:2px}
  .pg-brand .site-navbars>span:nth-child(2){bottom:2px}
  body.nav-flip .pg-brand .pg-markimg{opacity:0;transform:rotateY(90deg)}   /* mark flips out … */
  body.nav-flip .pg-brand .site-navbars{opacity:1}                          /* … ☰ flips in */
  body.nav-open .pg-brand .site-navbars>span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}   /* ☰ → ✕ */
  body.nav-open .pg-brand .site-navbars>span:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)}
  /* The in-header search steps aside so the open menu reads as one panel (just the ✕ stays). */
  .pg-mast .hp-search{transition:opacity .2s ease}
  body.nav-open .pg-mast .hp-search{opacity:0;pointer-events:none}

  .pg-mast .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 .pg-mast .site-navmenu{max-height:80vh}
  /* Items left-aligned under the ✕ (same --gutter as the masthead content); dividers inset to the text,
     placed ABOVE each item so none hangs after the last. */
  .site-navmenu a{position:relative;padding:18px var(--gutter);font-family:var(--sans);font-size:13px;
    font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;opacity:.92}
  .site-navmenu a:hover{opacity:1}
  .site-navmenu a::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;
    height:1px;background:rgba(255,255,255,.14)}
  /* Tiered "Composers" group (NTI-394): dim header over indented Timeline/Waveform/Index. */
  .site-navmenu .site-nav-hd{display:block;position:relative;padding:14px var(--gutter) 6px;font-family:var(--sans);
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.5}
  .site-navmenu .site-nav-hd::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;
    height:1px;background:rgba(255,255,255,.14)}
  .site-navmenu a.site-nav-sub{padding-left:calc(var(--gutter) + 18px)}
  .site-navmenu .site-nav-hd + a.site-nav-sub::before{display:none}
}

/* composer search in the masthead — the same widget as the homepage, on the dark ground */
.hp-search{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:150px;
  width:clamp(190px,22vw,260px);color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:9px 14px;transition:background .15s,border-color .15s}
.hp-search:focus-within{background:rgba(255,255,255,.13);border-color:var(--accent)}
.hp-search-ic{width:15px;height:15px;flex:0 0 auto;color:var(--paper-dim)}
.hp-q{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;
  font-family:var(--sans);font-size:14px;letter-spacing:.01em}
.hp-q::placeholder{color:rgba(246,242,236,.5)}
.hp-slash{flex:0 0 auto;font-family:var(--sans);font-size:11px;color:rgba(246,242,236,.55);
  border:1px solid rgba(255,255,255,.22);border-radius:5px;padding:0 6px;line-height:1.5}
.hp-search:focus-within .hp-slash{display:none}
/* SEARCH-RESULT BOX — same shape as .wt-ac (site.css) and .ll-results (styles.ts); this block is a near
   verbatim copy of home.css's .hp-results (the composer search lives on both pages, in separate CSS).
   When one next changes, dedupe into a shared search-results.css. See [[search-result-box-convention]]. */
.hp-results{position:absolute;top:calc(100% + 10px);right:0;left:auto;z-index:30;
  width:min(400px,calc(100vw - 2*var(--gutter)));
  background:#171613;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);max-height:min(60vh,420px);overflow-y:auto}
.hp-result{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:8px;cursor:pointer}
.hp-result[aria-selected="true"]{background:rgba(228,87,46,.18)}
.hp-r-name{color:var(--paper);font-family:var(--serif);font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-r-yrs{color:var(--paper-dim);font-family:var(--sans);font-size:12px;flex:0 0 auto;font-variant-numeric:tabular-nums}
@media (max-width:560px){ .hp-slash{display:none} }

/* Mobile portrait: the composer search collapses to just the magnifier (like the homepage) — tapping it
   takes over the masthead row, growing left over the mark. Absolute → out of the flex flow, so the 32px
   mark alone sets the header height (≈47px, matching the CDP/timeline mastheads); the 16px pg-wrap padding
   drops to 7px. Input text is hidden until the box takes over; 16px font so iOS never zooms in. */
@media (max-width:560px){
  .pg-mast .pg-wrap{position:relative;padding:7px var(--gutter)}
  .pg-mast .hp-search{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:5;
    width:40px;height:40px;min-width:0;padding:0;background:none;border:0;
    transition:width .3s ease,background .2s ease,border-color .2s ease}
  .pg-mast .hp-search-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);pointer-events:none;
    width:20px;height:20px;color:#fff;transition:left .3s ease}
  .pg-mast .hp-q{width:100%;height:100%;padding:0 0 0 40px;font-size:16px;color:transparent;caret-color:#fff}
  .pg-mast .hp-q::placeholder{color:transparent}
  .pg-mast .hp-search:focus-within{width:calc(100% - 2*var(--gutter));background:rgba(255,255,255,.1);
    border:1px solid var(--accent);border-radius:999px}
  /* search takes over → the mark gets out of the way (homepage does the same with .nav-toggle) */
  .pg-mast .pg-wrap:has(.hp-search:focus-within) .pg-brand{opacity:0;pointer-events:none;
    transition:opacity .2s ease}
  .pg-mast .hp-search:focus-within .hp-search-ic{left:14px}
  .pg-mast .hp-search:focus-within .hp-q{color:#fff}
  .pg-mast .hp-search:focus-within .hp-q::placeholder{color:rgba(246,242,236,.5)}
  .pg-mast .hp-results{left:0;right:0;width:auto}
}

/* ---- content column ----------------------------------------------------------------------- */
.pg-main{max-width:var(--maxw-read);margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter) var(--s8)}

/* work header */
.w-crumb{margin:0 0 var(--s3);font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}
.w-crumb a{color:var(--accent)}
.w-title{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,50px);
  line-height:1.08;letter-spacing:-.015em}
.w-sub{margin:.5em 0 0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,2.6vw,25px);line-height:1.3;color:#5b544b}
.w-meta{margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.w-meta>span{background:#d9d6d2;color:#888;padding:4px 9px;border-radius:4px}

/* section rule + labels */
.pg-rule{border:0;border-top:1px solid var(--rule);margin:var(--s4) 0}
.pg-sec{margin-top:var(--s6)}
.pg-sec h2{margin:0 0 var(--s3);font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}

/* long-form description — the one place we read in serif, magazine-style */
.w-body{font-family:var(--serif);font-size:20px;line-height:1.62;color:var(--ink-soft)}
.w-body>*:first-child{margin-top:0}
.w-body p{margin:0 0 1.05em}
.w-body a{color:var(--accent)}
.w-body h2,.w-body h3{font-weight:500;line-height:1.2;margin:1.4em 0 .5em}
.attribution{margin:var(--s2) 0 0;font-family:var(--sans);font-size:12.5px;color:var(--grey)}
.attribution a{color:var(--grey)}
.attribution a:hover{color:var(--accent)}

/* movements */
.movements{list-style:none;margin:0;padding:0;counter-reset:mv}
.movements li{counter-increment:mv;display:flex;gap:16px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--rule);font-family:var(--sans);font-size:15.5px}
.movements li:first-child{border-top:0}
.movements li::before{content:counter(mv,decimal-leading-zero);flex:0 0 auto;
  font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:var(--accent);
  letter-spacing:.04em;padding-top:2px}
/* Opera acts (NTI-441): a subheading over each act's numbered arias, which indent beneath it. Each act's
   list restarts numbering (per-act .movements resets counter-reset:mv) — Atto I: 01,02… Atto II: 01,02… */
.mv-act{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);margin:24px 0 2px}
.mv-act:first-of-type{margin-top:8px}
.movements.mv-in-act{margin-left:18px}
/* Opera synopsis (NTI-442): prose above the whole opera and per act. .syn-act indents to line up with
   its act's arias; the setting line is a muted italic locale ("Scene 1: A hall …"). */
.syn-block{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:var(--maxw-read)}
.syn-block p{margin:0 0 .6em}
.syn-act{margin:2px 0 10px 18px}
.syn-setting{font-style:italic;color:var(--grey)}
.syn-attr{font-family:var(--sans);font-size:12px;color:var(--grey);margin-top:14px}
.syn-attr a{color:var(--accent-deep)}.syn-attr a:hover{color:var(--accent)}

/* Recommended recordings (NTI-231): editorial commercial picks, metadata only. Primary pick starred. */
.rec-list{list-style:none;margin:0;padding:0}
/* Every row is indented 1.75rem so all titles line up exactly; the ★ is absolutely positioned in
   that indent (out of flow) so it can't nudge the primary's title — rows without a star stay flush. */
.rec-list li{position:relative;padding:11px 0 11px 1.75rem;border-top:1px solid var(--rule);font-family:var(--sans);font-size:15.5px}
.rec-list li:first-child{border-top:0}
.rec-list .rec-pick .rec-perf{font-weight:600}
.rec-list .rec-pick::before{content:"★";color:var(--accent);position:absolute;left:0;top:11px}
.rec-year{color:var(--grey);font-variant-numeric:tabular-nums}
/* Links always drop to their own line under the title (block-level flex), never flow inline after it —
   so row height is consistent regardless of title length. Shared by recommended + recent strips. */
.rec-links{display:flex;flex-wrap:wrap;gap:.9em;margin-top:.3rem}
.rec-links a.rec-svc{display:inline-flex;align-items:center;gap:.35em;font-size:13.5px;white-space:nowrap}
.rec-ico{width:16px;height:16px;flex:0 0 16px}
.rec-links .rec-sub{color:var(--grey)}
/* "Most recent recordings" provenance note — small, muted; flags the strip as automatic, not editorial. */
.rec-note{margin:.7rem 0 0;font-family:var(--sans);font-size:12.5px;color:var(--grey)}
/* YouTube embeds (NTI-258): responsive 16:9, capped to the card (bounded-card rule). */
.yt-embeds{list-style:none;margin:0;padding:0}
.yt-embeds>li{margin:0 0 var(--s2)}
.yt-embeds>li:last-child{margin-bottom:0}
.yt-frame{position:relative;width:100%;max-width:680px;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-embeds .rec-cred{margin:.5rem 0 0;font-family:var(--sans);font-size:13px;color:var(--grey)}

/* recordings / audio player (keeps player.js's hooks: .player/.player-btn/.player-bar/.player-fill/.player-time) */
.recordings{list-style:none;margin:0;padding:0}
.recordings>li{padding:var(--s2) 0;border-top:1px solid var(--rule)}
.recordings>li:first-child{border-top:0}
.player{display:flex;align-items:center;gap:14px}
.player-btn{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .15s}
.player-btn:hover{background:var(--accent-deep)}
.player-btn svg{width:18px;height:18px;fill:currentColor}
.player-bar{flex:1;height:4px;border-radius:2px;background:var(--rule);position:relative;overflow:hidden;cursor:pointer}
.player-fill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--accent);border-radius:2px}
.player-time{flex:0 0 auto;font-family:var(--sans);font-size:13px;color:var(--grey);
  font-variant-numeric:tabular-nums}
.rec-cred{margin:var(--s1) 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--grey)}
.rec-cred a{color:var(--grey)}
.rec-cred a:hover{color:var(--accent)}

/* elsewhere links */
.links{list-style:none;margin:0;padding:0}
.links li{border-top:1px solid var(--rule)}
.links li:first-child{border-top:0}
.links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;color:var(--ink);font-family:var(--sans);font-size:15.5px;font-weight:500}
.links a::after{content:"↗";color:var(--grey);font-size:13px}
.links a:hover{color:var(--accent);text-decoration:none}
.links a:hover::after{color:var(--accent)}
/* wipe-in underline under the LABEL only (not the full flex row / the ↗) */
.links a .l-txt{background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:left bottom;background-size:0 1px;
  transition:background-size .8s ease}
.links a:hover .l-txt{background-size:100% 1px}

/* back link */
.w-back{margin:var(--s6) 0 0}
.w-back a{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent)}

/* ---- footer ------------------------------------------------------------------------------- */
.pg-foot{position:sticky;bottom:0;z-index:20;background:var(--paper);
  border-top:1px solid var(--rule);margin-top:var(--s8)}
.pg-foot .pg-wrap{max-width:var(--maxw-page);margin:0 auto;padding:var(--s3) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--sans);font-size:13px;color:var(--grey)}
.pg-foot a{color:var(--grey)}
.pg-foot a:hover{color:var(--accent)}
.pg-foot .pg-foot-brand{font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.pg-foot-tag{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:15px;color:var(--ink-soft)}
.pg-foot-tag .dot{color:var(--accent)}
@media (max-width:560px){ .pg-foot-nav{display:none} }   /* mobile: drop the Timeline·Composers nav */