/* Naytra — the bridge line: a scroll-scrubbed word-by-word reveal between
   "The Problem" and the transmission chain. A held breath: enters dim, resolves
   lit on the payoff, then hands off. Light (cream) section. Fraunces + DM Sans.
   System tokens only — retune via the vars below. Depends on tokens + base. */

.tr{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* retunable palette — mapped to system tokens */
  --tr-bg:var(--paper);         /* white ground, like the other sections */
  --tr-dim:var(--ink-3);        /* unlit word */
  --tr-lit:var(--ink);          /* lit word (default) */
  --tr-accent:var(--accent-500);/* only emphasis: the first "Naytra" */
  --tr-font:var(--font-serif);
  position:relative;height:200vh;background:var(--tr-bg)}

.tr__pin{position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 clamp(var(--space-40),6vw,var(--space-120));text-align:center}

/* light Fraunces (340), smaller + left-aligned in a centred column (CRED-style,
   easy to read) — the block centres, the text reads left */
/* Width snapped to a 9-of-12 column span (9·col + 8·gutter ≈ 870px, same 75% measure);
   the big type then wraps within the guides and may run taller than the viewport. */
.tr__text{max-width:calc(var(--col) * 9 + var(--gutter) * 8);margin:0;
  font-family:var(--tr-font);font-weight:300;
  font-size:44px;line-height:1.28;letter-spacing:-.01em;
  text-align:left;color:var(--tr-lit)}

/* default = lit (no-JS / reduced-motion fallback stays readable) */
.tr__w{color:var(--tr-lit)}
.tr__w--accent{color:var(--tr-accent)}

/* once JS takes over, words start dim; inline colours then scrub per scroll */
.tr.is-scrub .tr__w{color:var(--tr-dim)}

/* handoff cue */
.tr__cue{position:absolute;bottom:clamp(24px,6vh,56px);left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font-sans);font-weight:600;font-size:11px;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tr__cue .tr__arw{font-size:13px}

@media (max-width:820px){
  .tr{height:150vh}
  .tr__text{font-size:clamp(26px,6.6vw,40px)}
}

/* Reduced motion: no pin, no scrub — render fully lit */
@media (prefers-reduced-motion:reduce){
  .tr{height:auto}
  .tr__pin{position:static;height:auto;padding-block:clamp(80px,16vh,160px)}
  .tr.is-scrub .tr__w{color:var(--tr-lit)}
  .tr.is-scrub .tr__w--accent{color:var(--tr-accent)}
}