/* ============ The Clearing — session recap (editorial) ============
   THE ONE CLOCK: every duration and curve here is a token from /tokens.css, and
   why the room moves the way it does is written in DESIGN.md (Motion). Two voices:
   the room ANSWERS you (--t-answer, after --t-pause for a hover) and SPEAKS its own
   content slowly (--t-exhale, --t-develop), both on the breath; whatever leaves goes
   on the exhale curve. A literal value is allowed only with a `motion:` reason.

   WHAT NEVER MOVES: body text once placed; layout, rules, and margins;
   type size on hover; anything on hover (hover may only deepen color).
   Things arrive by DEVELOPING — ink darkening on stationary text — never
   by sliding, popping, or blurring.
   =================================================================== */
:root{
  --measure:36rem;   /* colors, faces, time and curves: /tokens.css, loaded first on every page */
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-weight:var(--w-read);
  font-size:1.02rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color 3s linear;    /* motion: the Hours cross their boundaries as a sunset */
  padding:clamp(2.2rem,7vw,5rem) 1.5rem 6rem;}
.page{max-width:var(--measure); margin:0 auto;}
a{color:inherit; text-decoration:none;}   /* underlines come from explicit border-bottom, never the default */

/* ---------- the threshold veil: internal doors pass through cream ---------- */
.veil{position:fixed; inset:0; background:var(--paper); opacity:0; pointer-events:none;
  transition:opacity var(--answer); z-index:80;}
.veil.on{opacity:1; pointer-events:auto;}

/* ...and every arrival is revealed through the same cream (head script adds .veilfx) */
.veilfx body::before{content:""; position:fixed; inset:0; background:var(--paper); z-index:79;
  opacity:1; pointer-events:none; transition:opacity var(--t-exhale) var(--ease-breath);}
.veilfx.lifted body::before{opacity:0;}


/* ---------- the site's menu ----------
   The same four pages at the top of every page on the site, the Project's and The
   Clearing's alike, so any page reaches any other in one tap (Sha, Oct 2, 2026).
   It lives here because every static page loads this file; the home page draws the
   same row in components/MainApp.js, and scripts/check-nav.js fails the build if
   any copy differs. mono capitals, because it is a control (DESIGN.md §8).
   The current page is in ink, with no line under it (Sha, Oct 13, 2026); the rest are soft and answer on hover. */
.site-nav{display:flex; flex-wrap:wrap; align-items:baseline; margin:0 0 var(--s-tier);
  font-family:var(--label); font-weight:400; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; line-height:1.5;}
.site-nav a{position:relative; color:var(--soft);}   /* hover and the current page's ink: links.css */
.site-nav a::after{content:""; position:absolute; inset:-.95rem -.45rem;}   /* a 44px target around each word */
.site-nav .dot{color:var(--faint); padding:0 .55rem;}
@media (max-width:22.5rem){.site-nav{letter-spacing:.1em;} .site-nav .dot{padding:0 .35rem;}}   /* one line down to 320px */
@media print{.site-nav{display:none;}}

/* ---------- the page header ----------
   Once you scroll down, a slim bar at the top of the window holds the Project's logo and the
   page's name, so you always know where you are (Sha, Oct 13, 2026). header.js builds it from the
   menu and sets where it fades: over the last stretch of scrolling in which the page's big logo
   (the CE logo, or The Clearing's name) slides up under it, so its small logo never shows beside
   the big one. The fade is tied to the scroll itself, so it moves exactly as far as the finger does and
   reverses the same way: the one thing on the site that answers scrolling (DESIGN.md, the
   principles). It fades; it never slides. The name is the menu's current item in the serif, as
   a word in a sentence (about, Faculty, join, archive; Sha, Oct 13, 2026), in ink. */
.ce-head{position:fixed; top:0; left:0; right:0; z-index:50; height:3.5rem;
  background:var(--paper); border-bottom:1px solid var(--line); pointer-events:none;
  transition:background-color 3s linear;}   /* motion: the Hours, as the body crosses them */
.ce-bar{position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:auto;
  padding:0 calc(100% - var(--ce-left,1.5rem) - var(--ce-width,calc(100% - 3rem))) 0 var(--ce-left,1.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;}   /* the logo at the left edge of the text, the page's name at its right (Sha, Oct 13, 2026) */
.ce-head-mark{display:block; line-height:0; position:relative;}   /* a mark: it doesn't answer the cursor */
.ce-head-mark::after{content:""; position:absolute; inset:-.25rem;}   /* a 48px target around the 40px logo */
.ce-head-mark img{display:block; height:2.5rem; width:auto;}
html[data-theme="dark"] .ce-head-mark img{filter:invert(1);}
.ce-head-name{font-family:var(--serif); font-weight:var(--w-read); font-size:1rem; line-height:1.3; color:var(--ink);   /* no underline: the bar names one page, so nothing needs marking as current (Sha, Oct 13, 2026) */
  position:relative; top:.065em;}
.ce-head-name::after{content:""; position:absolute; inset:-.75rem -.6rem;}   /* a 44px target around the word, as the menu's are */   /* centered on the logo as the eye sees it: the band from the baseline to the tops of the tall letters meets the logo's middle (measured in iOS Safari's pixels, Oct 13, 2026; Chrome sits about half a pixel higher) */
:root:has(.site-nav a[aria-current]){scroll-padding-top:3.5rem;}   /* a link to a place on the page lands below the bar, not under it: set here, for every page with the bar, so it's in place before any script scrolls (fold.js opens an old Department's link at once) */
/* the paper comes first and has covered the big logo's last edge by halfway; the bar's logo and name
   come in only after that, so the two never show through each other. The paper never takes a tap;
   the bar, across the window's whole width, takes them only once the paper is whole, so a tap on
   the page while it can still be seen reaches the page */
@keyframes ce-head-in{0%{opacity:0; visibility:hidden;} 50%,100%{opacity:1; visibility:visible;}}
@keyframes ce-bar-in{0%{opacity:0; visibility:hidden;} 49.9%{visibility:hidden;} 50%,55%{opacity:0; visibility:visible;} 100%{opacity:1; visibility:visible;}}
@supports (animation-timeline: scroll()){
  .ce-head,.ce-bar{animation-duration:auto; animation-fill-mode:both;
    animation-timing-function:linear;   /* motion: tied to the scroll, so it moves exactly as far as the finger does */
    animation-timeline:scroll(root block); animation-range:var(--ce-from,0px) var(--ce-to,3rem);}
  .ce-head{animation-name:ce-head-in;}
  .ce-bar{animation-name:ce-bar-in;}
}
/* reduced motion zeroes every animation's duration (tokens.css), which would leave this one finished
   at the top of the page; tied to the finger, it moves only as the visitor does, so it keeps its own */
@media (prefers-reduced-motion: reduce){ @supports (animation-timeline: scroll()){ .ce-head,.ce-bar{animation-duration:auto !important;} } }
/* where the browser can't tie motion to scrolling (Firefox, Safari before 26), header.js turns the bar
   on once the page's big logo has left the window, and it fades in on the site's answer. Off, it is hidden
   from taps, Tab and screen readers, but only once its fade out has finished */
@supports not (animation-timeline: scroll()){
  .ce-head{opacity:0; visibility:hidden; transition:opacity var(--t-answer) var(--ease-breath), visibility 0s var(--t-answer);}
  .ce-head.on{opacity:1; visibility:visible; transition:opacity var(--t-answer) var(--ease-breath);}
  .ce-head:not(.on) .ce-bar{pointer-events:none;}   /* fading out, it lets taps through to the page coming back */
}
@media print{.ce-head{display:none;}}

/* ---------- top wordmark ---------- */
/* three tiers, evenly spaced: the site's menu, The Clearing, then the page (Sha, Oct 7, 2026). The
   "← archive" link that hung under the wordmark is gone: the menu's "archive" is current, in ink. */
.home{display:inline-flex; align-items:center; gap:.42rem; margin-bottom:var(--s-tier); color:var(--ink); text-decoration:none;}
.home .name{display:block; font-size:clamp(2.9rem,10vw,3.9rem); width:4.643em; height:1.147em; fill:currentColor;}   /* The Clearing's drawn name (assets/the-clearing.svg), at the script's old size; a mark: it doesn't answer the cursor (DESIGN.md, Hover) */

/* ---------- masthead ---------- */
.mast{margin-bottom:clamp(2.4rem,7vw,3.6rem);}
.eyebrow{font-family:var(--label); font-weight:400; text-transform:uppercase; letter-spacing:.22em; font-size:.66rem;
  color:var(--soft); margin:0 0 1.1rem;}
.mast h1{font-family:var(--serif); font-weight:var(--w-head); font-size:clamp(2.6rem,10vw,4rem); line-height:1;
  letter-spacing:-.015em; margin:0 0 .5rem;}
.mast .date{font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--soft); font-size:1.05rem; margin:0 0 .4rem;}
.mast .credit{font-family:var(--serif); color:var(--soft); font-size:1rem; margin:0 0 .3rem;}
.mast .credit + :not(.credit){margin-top:1.8rem;}   /* the credits need real air before the lede (:last-of-type never matched: the lede is a <p> too) */
.mast .credit em{font-style:normal; font-feature-settings:var(--serif-alts); color:var(--ink-2);}
.typefx .mast:not(.typed) .credit a{border-bottom-color:transparent;}
.mast .credit .amp{color:var(--faint);}
.mast .lede{color:var(--ink-2); font-size:1.06rem; line-height:1.62; margin:0; max-width:32rem;}
.mast .lede + .lede{margin-top:1rem;}
.rule{border:none; border-top:1px solid var(--line); margin:clamp(2.4rem,7vw,3.4rem) 0 0;}

/* ---------- playlist (collapsible) ---------- */
.pl{border-bottom:1px solid var(--line);}
.pl > summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:1rem;
  padding:clamp(1.15rem,3.5vw,1.6rem) 0; -webkit-tap-highlight-color:transparent;}
.pl > summary::-webkit-details-marker{display:none;}
.pl > summary:focus-visible{outline:none;}
.pl > summary:focus-visible .pl-name{text-decoration:underline; text-underline-offset:4px;}
.pl-idx{font-family:var(--label); font-weight:400; font-size:.72rem; color:var(--faint); letter-spacing:.06em;
  position:relative; top:-.35em; flex:none; width:1.9rem;}
.pl-name{font-family:var(--serif); font-weight:var(--w-head); font-size:clamp(1.7rem,6vw,2.3rem); line-height:1;
  letter-spacing:-.01em; flex:1 1 auto;}
.pl-chev{flex:none; width:16px; height:16px; align-self:center; color:var(--soft);
  transition:transform var(--t-exhale) var(--ease-breath), color var(--answer-hover),
    opacity var(--t-develop) var(--ease-breath) var(--t-pause);}
.pl > summary:hover .pl-chev{color:var(--ink);}
.pl[open] > summary .pl-chev{transform:rotate(180deg);}
.pl.closing > summary .pl-chev{transform:none;}   /* turn back the moment the exhale begins */
.pl-chev svg{display:block; width:100%; height:100%;}

.pl-body{padding:0;}   /* no padding on the animated box, or its height can't collapse below it */
.pl-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.1rem;
  font-family:var(--label); font-weight:400; font-size:.68rem; letter-spacing:.04em; color:var(--soft);
  padding:0 0 1.2rem 2.9rem; margin-top:-.2rem;}
.pl-by{font-family:var(--serif); font-weight:var(--w-read); font-size:.94rem; text-transform:none; letter-spacing:0;}
.pl-by em{font-style:normal; font-feature-settings:var(--serif-alts); color:var(--ink-2);}
.pl-dot{color:var(--faint);}
.pl-links{margin-left:auto; display:flex; gap:.7rem; align-items:baseline;}
.pl-links a{color:var(--soft);}
.pl-links .soon{color:var(--faint); opacity:.75;}

/* ---------- tracklist ---------- */
.tracks{list-style:none; margin:0; padding:0 0 clamp(1.4rem,4vw,2.2rem);}   /* bottom breathing room lives inside, so the body can animate to a true 0 */
.track{display:grid; grid-template-columns:2.9rem 1fr auto; gap:0 .9rem; align-items:baseline;
  padding:.7rem 0; border-top:1px solid var(--line-2);}
.track:first-child{border-top:none;}
.t-num{font-family:var(--label); font-weight:400; font-size:.74rem; color:var(--faint); font-variant-numeric:tabular-nums; letter-spacing:.02em; padding-top:.15em;}
.t-title{font-family:var(--serif); font-size:1.04rem; font-weight:var(--w-head); line-height:1.32; color:var(--ink);}
.t-ver{color:var(--soft); font-size:.86em; font-style:italic; font-feature-settings:var(--serif-alts-italic);}
.t-artist{font-size:.92rem; color:var(--ink-2); line-height:1.4; margin-top:.05rem;}
.t-album{font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:.83rem; color:var(--soft); line-height:1.4; margin-top:.12rem;}
.t-meta{font-family:var(--label); font-weight:400; font-size:.74rem; color:var(--soft); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; padding-top:.2em; display:flex; flex-direction:column; gap:.15rem; align-items:flex-end;}
.t-year{color:var(--ink-2);}
.t-len{color:var(--faint);}

/* ---------- the program develops in once the masthead settles ---------- */
.typefx .pl .pl-idx,.typefx .pl .pl-name{
  transition:color var(--t-develop) var(--ease-breath) var(--t-pause);}
.typefx:not(.revealed) .pl .pl-idx,
.typefx:not(.revealed) .pl .pl-name{color:var(--undeveloped);}
.typefx:not(.revealed) .pl .pl-chev{opacity:0;}

/* ---------- the tracklist unveiled (first open only; reopening is instant) ---------- */
@media (prefers-reduced-motion: no-preference){
  .pl-cover img{filter:grayscale(1); transition:filter var(--t-develop) var(--ease-breath) var(--t-pause);}   /* attention confers color */
  .pl.did-open .pl-cover img{filter:none;}
  .pl.unveiling .track{opacity:0;}
  .pl.unveiling.did-open .track{opacity:1; transition:opacity var(--t-answer) var(--ease-breath);
    transition-delay:calc(var(--t-pause) + var(--i,0)*var(--t-stagger));}
}

/* ---------- small screens: keep the meta on the title line, tighten ---------- */
@media(max-width:460px){
  .track{grid-template-columns:1.7rem 1fr; gap:0 .7rem;}
  .t-meta{grid-column:2 / 3; flex-direction:row; gap:.7rem; text-align:left; justify-content:flex-start;
    padding-top:.3rem; align-items:baseline;}
  .pl-meta{padding-left:1.7rem;}
  .pl-links{margin-left:0; flex-basis:100%;}
}

/* ---------- who curates: the bio card ----------
   hover-that-waits: a credited name waits a beat, then a small card
   develops in place below it (above it on /info's signature) — bio, and where to find them. The card
   doesn't move; it appears as ink on paper and recedes faster than it
   arrived. A cursor that rests on the name opens it where it is; a click,
   a tap or the keyboard opens it to stay, and the page eases to show it
   when it can't all be seen (bio.js). */
.has-bio{position:relative;}   /* the card's anchor: a session's credit line, or a page's [data-bio-host] (the /info signature) */
.bio-card{position:absolute; z-index:40; width:min(21.5rem,100%); scroll-margin:1rem;   /* the gap it keeps from the window's edges, and from the page header, when it brings itself into view (bio.js) */
  background:var(--card); border:1px solid var(--line); padding:1.05rem 1.15rem 1rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t-answer) var(--ease-exhale), visibility 0s var(--t-answer);}   /* leaving: the exhale */
.bio-card.on{opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity var(--answer);}                               /* arriving: the breath */
.bio-name{font-family:var(--label); font-weight:400; font-size:.6rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--faint); margin:0 0 .55rem;}
.bio-text{font-family:var(--serif); font-size:.9rem; line-height:1.6; color:var(--ink-2); margin:0 0 .8rem;}
.bio-links{font-family:var(--label); font-weight:400; font-size:.66rem; letter-spacing:.04em; margin:0;
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; align-items:baseline;}   /* four links must wrap, not spill */
.bio-links a{color:var(--soft);}
.bio-dot{color:var(--faint);}
@media (prefers-reduced-motion: reduce){
  .bio-card,.bio-card.on{transition:none;}
}

/* ---------- print: reveal every playlist, drop the chrome ---------- */
@media print{
  @page{margin:18mm;}
  body{background:#fff; color:#000; padding:0; font-size:11pt;}
  .home,.pl-chev,.pl-links,.veil{display:none;}
  .pl,.pl:last-child{border-color:#ccc;}
  .pl > summary{cursor:default; padding:1.1rem 0 .5rem;}
  .pl:not([open]) > .pl-body{display:block !important;}   /* force every tracklist open in print */
  .pl-cover img{filter:none !important;}
  .track{break-inside:avoid; opacity:1 !important;}
  .pl{break-inside:avoid;}
  .t-year{color:#000;} .t-num,.t-len{color:#555;}
  a{color:#000; text-decoration:none;}
}

/* ---------- guestbook: the kept ledger ---------- */
.gb{margin-top:clamp(2.6rem,8vw,4rem); padding-top:clamp(1.6rem,4vw,2.2rem); border-top:1px solid var(--line);}
.gb-kicker{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--ink); font-size:1.2rem; margin:0 0 .5rem;}
.gb-lede{color:var(--soft); margin:0 0 1.6rem; font-size:.98rem;}
.gb-fields{display:flex; gap:1.5rem; align-items:flex-start;}
.gb-field{flex:0 0 11rem; min-width:0;}
.gb-field-msg{flex:1 1 auto;}
.gb-field label{display:block; font-family:var(--label); font-weight:400; font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--soft); margin-bottom:.5rem;}
.gb-field input,.gb-field textarea{width:100%; font-family:var(--serif); font-weight:var(--w-read); font-size:1.02rem; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0;
  height:2.3rem; line-height:1.5; padding:.35rem 0;
  transition:border-color var(--answer);}
.gb-field input:focus,.gb-field textarea:focus{outline:none; border-bottom-color:var(--ink);}
.gb-field textarea{resize:none; min-height:0; overflow:hidden;}
.gb-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}
.gb-actions{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:1.3rem;}   /* the slide (controls.css), then the status */
.gb-status{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:.9rem; color:var(--soft);
  opacity:0; transition:opacity var(--t-exhale) var(--ease-breath);}
.gb-status.on{opacity:1;}
.gb-thread{list-style:none; margin:2rem 0 0; padding:0;}
.gb-entry{padding:.75rem 0; border-top:1px solid var(--line-2);}
.gb-entry:first-child{border-top:none;}
.gb-line{display:flex; align-items:baseline; gap:.45rem;}
.gb-star{font-size:.56rem; color:var(--soft); position:relative; top:-.09em;}
.gb-who{font-family:var(--serif); font-weight:var(--w-head); color:var(--ink); font-size:1rem;}
.gb-was{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--soft); font-size:.95rem;}
.gb-when{margin-left:auto; font-family:var(--label); font-weight:400; font-size:.66rem; color:var(--faint); white-space:nowrap;}
.gb-text{font-family:var(--serif); color:var(--ink-2); font-size:.98rem; line-height:1.55; margin:.3rem 0 0 1rem;}

/* names surface one at a time, developing from paper to ink */
.gb-entry .gb-star,.gb-entry .gb-who,.gb-entry .gb-was,.gb-entry .gb-when,.gb-entry .gb-text{
  transition:color var(--t-develop) var(--ease-breath);}
.gb-entry,.gb-waiting{transition:border-color var(--t-develop) var(--ease-breath), opacity var(--t-exhale) var(--ease-breath);}
.gb-undev:not(.gb-dev){border-color:transparent; opacity:0;}
.gb-undev:not(.gb-dev) .gb-star,.gb-undev:not(.gb-dev) .gb-who,.gb-undev:not(.gb-dev) .gb-was,
.gb-undev:not(.gb-dev) .gb-when,.gb-undev:not(.gb-dev) .gb-text{color:var(--undeveloped);}

/* a new signature: it eases in whole, then its ink develops while a hairline draws beneath */
.gb-fresh{max-height:16rem; overflow:hidden; animation:gb-appear var(--t-exhale) var(--ease-breath) both;}
@keyframes gb-appear{from{opacity:0; max-height:0; padding-top:0; padding-bottom:0;}}
.gb-fresh .gb-star,.gb-fresh .gb-who,.gb-fresh .gb-was,.gb-fresh .gb-when,.gb-fresh .gb-text{
  animation:gb-develop var(--t-develop) var(--ease-breath) both;}
@keyframes gb-develop{from{color:var(--undeveloped);}}
.gb-fresh{position:relative;}
.gb-fresh::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--line-2); transform:scaleX(0); transform-origin:left;
  animation:gb-line var(--t-exhale) var(--ease-breath) var(--t-answer) both;}
@keyframes gb-line{to{transform:scaleX(1);}}

/* the room remembers its signers */
.gb-mine .gb-star{color:var(--ink);}

/* the blank waiting line — your line */
.gb-waiting{padding:.75rem 0 .2rem; border-top:1px solid var(--line-2); cursor:text;}
.gb-waiting .gb-star{color:var(--undeveloped);}
.gb-blank{flex:1 1 auto; border-bottom:1px solid var(--line-2); height:1.05em;}
@media(max-width:560px){ .gb-fields{flex-direction:column; gap:1.1rem; align-items:stretch;} .gb-field{flex:1 1 auto;} }
@media print{ .gb{display:none;} }

/* ---------- album segments (session two +) ---------- */
.pl-name-album{font-style:italic; font-feature-settings:var(--serif-alts-italic);}
.pl-cover{margin:0 0 1.6rem; padding-left:2.9rem;}
.pl-cover img{display:block; width:100%; height:auto; border:1px solid var(--line-2);}
.pl-meta-album{display:block;}
.pl-byline{font-family:var(--serif); font-weight:var(--w-read); font-size:.98rem; color:var(--soft); margin:0 0 .45rem; white-space:nowrap;}
.pl-byline em{font-style:normal; font-feature-settings:var(--serif-alts); color:var(--ink-2);}
.pl-byline.pl-desc{white-space:normal;}   /* descriptive bylines wrap; artist bylines still hold one line */
.pl-metarow{display:flex; align-items:baseline; gap:1.1rem; font-family:var(--label); font-weight:400; font-size:.68rem; letter-spacing:.04em; color:var(--soft);}
.pl-metarow .pl-links{margin-left:auto;}
@media(max-width:560px){
  .pl-cover{padding-left:1.7rem;}
  .pl-byline{white-space:normal;}
  .pl-metarow{flex-wrap:wrap; gap:.5rem 1.1rem;}
  .pl-metarow .pl-links{margin-left:0; flex-basis:100%;}
}

/* ---------- previous / next session ---------- */
.pn{display:flex; justify-content:space-between; gap:1.5rem; margin-top:clamp(2.6rem,8vw,4rem);
  padding-top:clamp(1.4rem,4vw,2rem); border-top:1px solid var(--line);}
.pn a{display:block;}
.pn-next{margin-left:auto; text-align:right;}
.pn-k{display:block; font-family:var(--label); font-weight:400; font-size:.62rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--faint); margin-bottom:.35rem;}
.pn-t{font-family:var(--serif); font-size:1.05rem; color:var(--ink-2);}
@media print{ .pn{display:none;} }

/* ---------- the inscription (an inline head script adds .typefx when motion is
   allowed AND the ritual hasn't already played this browsing session) ----------
   Letters land as ink: the full text is laid out invisibly from frame one (zero
   reflow), each character fades in softly, and the caret lingers on the finished
   line. The date/credit/lede sit in place from the start at near-paper color and
   DEVELOP to full ink once the title has settled — nothing moves, nothing slides. */
.typefx .mast .eyebrow,.typefx .mast h1{visibility:hidden;}
.typefx .mast .eyebrow.on,.typefx .mast h1.on{visibility:visible;}
.mast .ch{white-space:pre-wrap;}   /* pre-wrap, not pre: spaces keep their width but a long title can still break at them */
.typefx .mast .ch{opacity:0;}
.typefx .mast .ch.lit{opacity:1; transition:opacity .18s ease-out;}   /* motion: a letter landing under the pen, the inscription's own pace */
/* one arrival: everything develops together once the title lands */
.typefx .mast .date,
.typefx .mast .credit,.typefx .mast .credit em,.typefx .mast .credit .amp,
.typefx .mast .credit a,
.typefx .mast .lede,
.typefx .mast .lede + .lede{transition:color var(--t-develop) var(--ease-breath) var(--t-pause),
  border-color var(--t-develop) var(--ease-breath) var(--t-pause);}
.typefx .mast:not(.typed) .date,
.typefx .mast:not(.typed) .credit,
.typefx .mast:not(.typed) .credit em,
.typefx .mast:not(.typed) .credit .amp,
.typefx .mast:not(.typed) .lede{color:var(--undeveloped);}
/* a link in the lede develops with its words, not after them (Sha, Oct 11, 2026): its color is its
   words', so it takes no color transition of its own (one restarted with every frame of theirs and
   held the link back until they'd finished); only its underline develops, on the same clock */
.typefx .mast .lede a{transition:border-color var(--t-develop) var(--ease-breath) var(--t-pause);}