/* 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);text-decoration:none}
a:hover{color:var(--accent-deep)}
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}

/* 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)}
}
@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)}
}

/* 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}
.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} }

/* ---- 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}

/* 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 */