/* ============================================================
   F2F WEB STANDARD — components.css
   Nav · buttons · hero · trackstrip · section head · rail ·
   index rows · creed · FAQ · contact · footer.
   ALL values from tokens.css. Component-internal spacing in em
   (scales with the component's own type) is the only exception.
   Breakpoints: one small-screen line at 680px, one mid at 960px.
   ============================================================ */

/* — nav — */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--dur-2) var(--ease-3),border-color var(--dur-2);
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-color:var(--line)}
.site-nav .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);padding-block:var(--space-xs)}
.brand{display:flex;align-items:center;gap:.6em;font-family:var(--font-grotesk);font-weight:600;letter-spacing:var(--track-head);text-decoration:none}
.brand small{display:block;font-size:var(--step--2);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.site-nav nav{display:flex;gap:var(--space-l)}
.site-nav nav a{font-size:var(--step--1);font-weight:500;text-decoration:none;color:var(--ink-soft);position:relative;padding-block:.45em}
.site-nav nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-2) var(--ease-out-expo)}
.site-nav nav a:hover{color:var(--ink)}
.site-nav nav a:hover::after{transform:scaleX(1);transform-origin:left}
/* dark-hero variant: the nav's resting state over a night hero */
.site-nav.on-dark{color:var(--night-text)}
.site-nav.on-dark .brand{color:var(--night-text)}
.site-nav.on-dark .brand small{color:var(--night-muted)}
.site-nav.on-dark nav a{color:var(--night-muted)}
.site-nav.on-dark nav a:hover{color:#fff}
.site-nav.on-dark.scrolled{background:color-mix(in srgb,var(--night) 90%,transparent);border-color:var(--night-line)}
@media (max-width:680px){
  /* nothing is deleted on mobile: links move to a full-width
     scrollable strip under the brand row — all reachable, all tappable */
  .site-nav .bar{flex-wrap:wrap;row-gap:0}
  .site-nav nav{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;gap:var(--space-m);padding-bottom:var(--space-3xs)}
  .site-nav nav::-webkit-scrollbar{display:none}
  .site-nav nav a{white-space:nowrap;padding-block:.6em}
}

/* — buttons — */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-grotesk);font-size:var(--step--1);font-weight:500;
  letter-spacing:.04em;text-decoration:none;
  padding:.85em 1.5em;border:1px solid var(--ink);border-radius:var(--radius-full);
  transition:background var(--dur-1) var(--ease-3),color var(--dur-1),border-color var(--dur-1),transform var(--dur-1);
}
.btn svg{width:1em;height:1em;transition:transform var(--dur-2) var(--ease-out-expo)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
/* light-on-night variant */
.btn.light{border-color:var(--night-text);color:var(--night-text);background:transparent}
.btn.light.solid{background:var(--night-text);color:var(--night)}
.btn.light.solid:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--night)}
.btn.light.ghost:hover{border-color:var(--accent-bright);color:var(--accent-bright);background:transparent}

/* — hero (editorial, left-set — L1) — */
.hero{padding-top:calc(var(--space-xl) + 4rem);padding-bottom:var(--space-xl);position:relative}
.hero h1{font-size:var(--step-6);max-width:12em;margin-block:var(--space-m) var(--space-l)}
.hero .lede{margin-bottom:var(--space-l)}
.hero .cta{display:flex;gap:var(--space-xs);flex-wrap:wrap}
.hero-meta{
  display:flex;gap:var(--space-xl);flex-wrap:wrap;
  margin-top:var(--space-2xl);padding-top:var(--space-m);border-top:1px solid var(--line);
  font-family:var(--font-grotesk);font-size:var(--step--1);color:var(--muted);
}
.hero-meta b{display:block;font-size:var(--step-2);font-weight:600;letter-spacing:var(--track-head);color:var(--ink)}
.hero-night{background:var(--night);color:var(--night-text)}
.hero-night .lede{color:#cfc4a6}
.hero-night .eyebrow{color:var(--accent-bright)}
.hero-night .display em{color:var(--accent-bright)}
.hero-night .hero-meta{border-color:var(--night-line);color:var(--night-muted)}
.hero-night .hero-meta b{color:var(--night-text)}
@media (max-width:680px){
  .hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-m)}
}

/* — trackstrip: the system, drawn (one row of connected stations) — */
.trackstrip{border-bottom:1px solid var(--line);padding-block:var(--space-m);overflow-x:auto;scrollbar-width:none}
.trackstrip::-webkit-scrollbar{display:none}
.trackstrip ol{
  list-style:none;display:flex;justify-content:space-between;gap:var(--space-s);
  position:relative;min-width:52rem;max-width:var(--grid-max);margin-inline:auto;padding-inline:var(--gutter);
}
.trackstrip ol::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:.31rem;height:1px;background:var(--line-strong)}
.trackstrip li{position:relative;padding-top:var(--space-s);font-family:var(--font-grotesk);font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.trackstrip li::before{
  content:"";position:absolute;top:0;left:0;width:.62rem;height:.62rem;border-radius:var(--radius-full);
  background:var(--paper);border:2px solid var(--accent);
}
.trackstrip li:first-child::before{background:var(--accent)}
@media (max-width:680px){.trackstrip ol{min-width:44rem}}

/* — section head (indexed — L2) — */
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:var(--space-m) var(--space-l);align-items:start;margin-bottom:var(--space-xl)}
.sec-head .idx{font-family:var(--font-grotesk);font-size:var(--step--1);color:var(--accent-text);letter-spacing:.1em;padding-top:.9em}
.sec-head h2{font-size:var(--step-5);margin-bottom:var(--space-xs)}
.sec-head p{color:var(--ink-soft);max-width:var(--measure)}
@media (max-width:680px){.sec-head{grid-template-columns:1fr}.sec-head .idx{padding-top:0}}

/* — rail / stations: numeral / title / body across the grid,
     with a progress line the motion layer draws on scroll — */
.rail{list-style:none;border-top:1px solid var(--line-strong);position:relative}
.rail .rail-progress{
  display:block;padding:0;border:none;
  position:absolute;left:0;top:0;width:2px;height:100%;background:var(--accent);
  transform-origin:top;transform:scaleY(0);
}
.rail li{
  display:grid;grid-template-columns:clamp(4rem,9vw,8rem) minmax(10rem,16rem) 1fr;
  gap:var(--space-s) var(--space-l);align-items:start;
  padding-block:var(--space-l);border-bottom:1px solid var(--line);
}
.rail .r-num{
  font-family:var(--font-display);font-size:var(--step-4);font-weight:var(--w-num);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--accent);
  transition:color var(--dur-3) var(--ease-3);
}
.rail li.lit .r-num{color:var(--accent)}
@supports not (-webkit-text-stroke:1px black){.rail .r-num{color:var(--accent)}}
.rail h3{font-family:var(--font-display);font-size:var(--step-2);font-weight:var(--w-head);letter-spacing:var(--track-head)}
.rail p{color:var(--ink-soft);max-width:var(--measure)}
@media (max-width:960px){.rail li{grid-template-columns:clamp(3.4rem,12vw,5rem) 1fr}.rail p{grid-column:2}}
@media (max-width:680px){.rail .rail-progress{display:none}}

/* — index rows (collections — L4) — */
.rows{border-top:1px solid var(--line-strong)}
.row{
  display:grid;grid-template-columns:1fr auto;gap:.35rem var(--space-m);align-items:baseline;
  padding-block:var(--space-m);border-bottom:1px solid var(--line);text-decoration:none;
  transition:background var(--dur-1) var(--ease-3);
}
.row:hover{background:color-mix(in srgb,var(--accent-pale) 45%,transparent)}
.row h3{font-family:var(--font-display);font-size:var(--step-2);font-weight:var(--w-head);letter-spacing:var(--track-head)}
.row p{color:var(--ink-soft);font-size:var(--step--1);grid-column:1;max-width:var(--measure)}
.row .go{font-family:var(--font-grotesk);font-size:var(--step--1);color:var(--accent-text);white-space:nowrap;transition:transform var(--dur-2) var(--ease-out-expo)}
a.row:hover .go{transform:translate(3px,-3px)}
@media (max-width:680px){.row p{grid-column:1/-1}.row .go{grid-column:1/-1;white-space:normal}}

/* — creed: principles as manifesto statements, not cards (L4) — */
.creed{list-style:none;border-top:1px solid var(--line-strong)}
.creed li{
  display:grid;grid-template-columns:clamp(4rem,9vw,8rem) 1fr;gap:var(--space-s) var(--space-l);
  padding-block:var(--space-l);border-bottom:1px solid var(--line);align-items:start;
}
.creed .c-num{font-family:var(--font-grotesk);font-size:var(--step--1);color:var(--accent-text);letter-spacing:.12em;padding-top:1.1em}
.creed h3{font-family:var(--font-display);font-size:var(--step-3);font-weight:var(--w-head);letter-spacing:var(--track-head);margin-bottom:var(--space-2xs)}
.creed p{color:var(--ink-soft);max-width:var(--measure)}
@media (max-width:680px){.creed li{grid-template-columns:1fr}.creed .c-num{padding-top:0}}

/* — FAQ (accordion rows, height animated by the motion layer) — */
.faq{border-top:1px solid var(--line-strong);max-width:56rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-s);
  padding-block:var(--space-m);font-family:var(--font-display);font-size:var(--step-1);font-weight:var(--w-head);letter-spacing:var(--track-head);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:1.1rem;height:1.1rem;color:var(--accent-text);transition:transform var(--dur-2) var(--ease-out-expo)}
.faq details[open ] summary .plus{transform:rotate(45deg)}
.faq details p{color:var(--ink-soft);max-width:var(--measure);padding-bottom:var(--space-m)}

/* — contact block (full-bleed night — L6) — */
.contact{background:var(--night);color:var(--night-text);position:relative;overflow:hidden}
.contact .eyebrow{color:var(--accent-bright)}
.contact h2{font-size:var(--step-5);color:var(--night-text)}
.contact p{color:var(--night-muted);max-width:var(--measure-narrow)}
.contact .mail{
  display:inline-flex;align-items:center;gap:.5em;margin-top:var(--space-l);
  font-family:var(--font-display);font-style:italic;font-size:var(--step-2);color:var(--accent-bright);
  text-decoration:none;border-bottom:1px solid var(--night-line);padding-bottom:.15em;
  transition:border-color var(--dur-2),color var(--dur-2);
}
.contact .mail:hover{color:#fff;border-color:var(--accent-bright)}

/* — footer — */
.site-footer{padding-block:var(--space-l) var(--space-xl);font-size:var(--step--1);color:var(--muted)}
.site-footer .bar{display:flex;justify-content:space-between;gap:var(--space-s);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--space-m)}
.site-footer a{color:var(--ink-soft);text-decoration:none}
.site-footer a:hover{color:var(--accent-text)}