/* 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}
/* Musical-term tooltips (timeline/glossary.py). The term gets a dotted underline; the gloss is a
   bubble on hover, keyboard focus, or tap (the span is tabindex=0, so touch can reach it too).

   ANCHORED TO THE ROW, NOT THE TERM — deliberately. .mv-term stays position:static so its ::after
   resolves against the li, which lets the bubble be left:0 / max-width:100%: it can never be wider
   than the row and so can never push the page sideways on a phone. A term-centred bubble near the
   right edge would, and iOS will not clip it for us. The trade is that the bubble appears under the
   row rather than pointing at the word — fine here, where rows are one line of a short list. */
.mv-term{
  text-decoration:underline dotted var(--rule);
  text-underline-offset:3px;
  cursor:help;
}
.mv-term:hover,.mv-term:focus-visible{color:var(--accent);text-decoration-color:var(--accent)}
.mv-term:focus{outline:none}
.mv-term:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.movements li{position:relative}          /* the bubble's containing block */
.mv-term::after{
  content:attr(data-gloss);
  position:absolute;left:0;top:calc(100% - 8px);z-index:5;
  max-width:100%;width:max-content;
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:13px;line-height:1.45;font-weight:400;
  padding:8px 11px;border-radius:5px;
  box-shadow:0 6px 20px rgba(12,12,14,.22);
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
  pointer-events:none;   /* the bubble must never eat the hover that spawned it */
}
.mv-term:hover::after,.mv-term:focus::after{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .14s ease,transform .14s ease,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .mv-term::after{transition:none}
}
/* 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 */