/* ===========================================================================
   FSF2026 — one page's surfaces. Loaded by that page only.
   ---------------------------------------------------------------------------
   A chapter of the site with a palette of its own, the way A.R.M.S. is: the
   shell, the grid, the type scale and the motion are the house's, and only
   the fields change. Here the fields are read from the manifesto's own
   picture — its sky, the green of its hill, the orange of the letters among
   its roots — and the page goes down through them in that order: sky, hill,
   paper, earth.

   Yellow is the house's and stays rare: the small mark beside a label, the
   seal, the one thing to press, and the closing line.

   Colour notes (measured, see DESIGN-NOTES.md):
   · the sky is the illustration's own, sampled along its edges, so the page
     continues the picture instead of framing it;
   · ink on any part of that sky is 4.9:1 or better; white is not, so nothing
     small is ever white on it;
   · the green is a step deeper than the PDF's #17A249 — white on that is
     3.3:1, on this 4.7:1 — and the PDF's own green keeps the line of the
     staircase, where nothing is read against it.
   =========================================================================== */
@font-face {
  /* Nunito, for the three things born in the PDF, which is set in Apertura —
     a face that cannot be licensed for the web. This is its nearest free
     relative: the same rounded, open geometry. */
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/nunito-normal-latin.woff2") format("woff2");
}
:root {
  /* The opening is one illustrated scene: a sky, the Tree of Sport standing
     in it, and SPORT on the line where the sky meets the green. The sky is
     the section's own, full-bleed, set once here: the PDF's blue moved into
     the true sky-blue range for a screen (hue 202° at the top to 206° at the
     foot — never toward violet), light above, deeper toward the horizon and
     a little deeper again behind the roots. */
  --fsf-sky-top:     #8FCDF1;
  --fsf-sky-mid:     #5BB0E8;
  --fsf-sky-horizon: #3696DA;
  --fsf-sky-deep:    #2A86CB;
  --fsf-glow:        232 248 255;   /* white-cyan, as rgb channels for alpha */
  --fsf-green: #11863C;
  --fsf-leaf:  #17A249;
  --fsf-root:  #ED7835;
  --fsf-accent: "Nunito", var(--font-display);
}
.fsf .header-inner { justify-content: flex-start; }
.fsf .header-inner > .header-nav { margin-left: auto; }
/* The chapter's name and the language switch both live in this header; on
   the narrowest phones the spaces between its parts close up so MENU stays
   on the screen. */
@media (max-width: 399px) { .fsf .header-inner { column-gap: 12px; } .fsf .header-nav { gap: 10px; } }
.fsf .chapter-of, .fsf .chapter-of__here { color: inherit; }
.fsf .tab { background: var(--nsv-yellow); }
.fsf .meta .tab { display: inline-block; vertical-align: middle; margin-right: .9em; }

/* --- 01 · 02 the sky, and the tree standing in it -------------------------- */
.fsf-sky {
  --fg: var(--nsv-ink); --fg-quiet: var(--nsv-ink); --rule-color: var(--nsv-ink);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  color: var(--nsv-ink);
  /* a fine grain at ~3% over the gradient, so it never shows a band */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, var(--fsf-sky-top) 0%, var(--fsf-sky-mid) 40%, var(--fsf-sky-horizon) 76%, var(--fsf-sky-deep) 100%);
}
.fsf-sky :focus-visible { outline-color: var(--nsv-ink); }
.fsf-hero { position: relative; z-index: 1; padding-top: clamp(140px, 19vh, 260px); padding-bottom: var(--space-5); }
.fsf-eyebrow { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.fsf-eyebrow .rule { flex: 1 1 auto; }
.fsf-eyebrow .meta { white-space: nowrap; }
@media (max-width: 767px) {
  .fsf-eyebrow { flex-direction: column; gap: 6px; }
  .fsf-eyebrow .rule { display: none; }
}
.fsf-title { color: var(--nsv-ink); }
.fsf-held {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  line-height: var(--lh-tight); letter-spacing: var(--track-h);
}
/* The tree stands on the sky; nothing frames it. Its light is the section's,
   not the drawing's: a very large, very soft glow behind the crown that fades
   to nothing long before its own edge, so it has none. */
.fsf-ground { padding-top: var(--space-2); }
.fsf-tree-label { margin: 0; }
.fsf-plate { position: relative; margin: var(--space-2) auto 0; width: min(1400px, 100%); }
.fsf-plate::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 48.8%; top: 30%; width: 200%; aspect-ratio: 1.45; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(var(--fsf-glow) / .58), rgb(var(--fsf-glow) / .26) 42%,
                              rgb(var(--fsf-glow) / .08) 72%, rgb(var(--fsf-glow) / 0) 100%);
}
.fsf-plate .tos { display: block; width: 100%; height: auto; overflow: visible; }
/* CULTURE, the root word, in the same cut as SPORT, the crown word: one
   voice, two scales */
.tos-culture { font-family: var(--font-display); font-weight: 800; }
@media (max-width: 767px) {
  .fsf-hero { padding-bottom: var(--space-3); }
  .fsf-plate { width: 112%; margin-left: -6%; }
  .tos-culture { font-size: 92px; }
}

/* --- the tree grows -----------------------------------------------------------
   From culture to sport: the roots feed the tree. Played once, when the
   opening arrives (the house's reveal sweep adds .is-in); calm, eased, about
   3.5 s on a desktop and 2.3 s on a phone (--t). Only clip reveals, opacity
   and transforms, on groups — the leaves grow through one inherited number
   (--grow) that each leaf, a <use> of a <symbol>, scales by from its stalk.
   Without script, or with reduced motion, the tree is simply there. */
@property --grow { syntax: "<number>"; inherits: true; initial-value: 1; }
.fsf-sky { --t: 1; --ease: cubic-bezier(.3, .02, .18, 1); --ease-leaf: cubic-bezier(.2, .75, .25, 1); }
@media (max-width: 767px) { .fsf-sky { --t: .65; } }
.tos-lf { transform: rotate(calc((1 - var(--grow)) * -26deg)) scale(var(--grow)); }

/* Each part opens from where it grows — a circle in the drawing's own
   coordinates (a <clipPath> in the SVG), scaled up from that point. */
.tos-clip { transform-box: view-box; }
.tos-clip-hz { transform-origin: 812px 583px; }
:is(.tos-clip-r1, .tos-clip-r2, .tos-clip-r3) { transform-origin: 812px 604px; }
.tos-clip-trunk { transform-origin: 812px 612px; }
:is(.tos-clip-b1, .tos-clip-b2, .tos-clip-b3) { transform-origin: 812px 470px; }

@media (prefers-reduced-motion: no-preference) {
  .js .fsf-plate:not(.is-in)::before { opacity: .55; }
  .js .fsf-plate:not(.is-in) .tos-clip { transform: scale(0); }
  .js .fsf-plate:not(.is-in) .tos-leaves { --grow: 0; }
  .js .fsf-plate:not(.is-in) .tos-letter { opacity: 0; transform: translateY(12px); }
  .js .fsf-sky:has(.fsf-plate:not(.is-in)) .fsf-sport { opacity: 0; transform: translateY(14px); }

  .fsf-plate.is-in::before { animation: tos-glow calc(900ms * var(--t)) var(--ease) backwards; }
  .fsf-plate.is-in .tos-clip-hz    { animation: tos-open calc(800ms * var(--t)) var(--ease) backwards; }
  .fsf-plate.is-in .tos-clip-r1    { animation: tos-open calc(800ms * var(--t)) var(--ease) calc(300ms * var(--t)) backwards; }
  .fsf-plate.is-in .tos-clip-r2    { animation: tos-open calc(800ms * var(--t)) var(--ease) calc(480ms * var(--t)) backwards; }
  .fsf-plate.is-in .tos-clip-r3    { animation: tos-open calc(820ms * var(--t)) var(--ease) calc(640ms * var(--t)) backwards; }
  .fsf-plate.is-in .tos-letter {
    animation: tos-letter calc(560ms * var(--t)) var(--ease-leaf) calc((700ms + var(--i) * 100ms) * var(--t)) backwards;
  }
  .fsf-plate.is-in .tos-clip-trunk { animation: tos-open calc(800ms * var(--t)) var(--ease) calc(950ms * var(--t)) backwards; }
  .fsf-plate.is-in .tos-clip-b1    { animation: tos-open calc(780ms * var(--t)) var(--ease) calc(1330ms * var(--t)) backwards; }
  .fsf-plate.is-in .tos-clip-b2    { animation: tos-open calc(780ms * var(--t)) var(--ease) calc(1520ms * var(--t)) backwards; }
  .fsf-plate.is-in .tos-clip-b3    { animation: tos-open calc(840ms * var(--t)) var(--ease) calc(1700ms * var(--t)) backwards; }
  .fsf-plate.is-in .tos-leaves {
    animation: tos-leaf calc(560ms * var(--t)) var(--ease-leaf) calc((1950ms + var(--n) * 115ms) * var(--t)) backwards;
  }
  .fsf-sky:has(.fsf-plate.is-in) .fsf-sport {
    animation: tos-sport calc(650ms * var(--t)) var(--ease-leaf) calc(3100ms * var(--t)) backwards;
  }

  /* afterwards, on a desktop: a breeze in the crown, never in the roots */
  @media (min-width: 768px) and (hover: hover) {
    .fsf-plate.is-idle .tos-crown {
      transform-box: view-box; transform-origin: 812px 455px;
      animation: tos-sway 7.6s ease-in-out infinite alternate;
    }
    .fsf-plate.is-idle :is(.tos-leaves-6, .tos-leaves-9) {
      transform-box: fill-box; transform-origin: 50% 70%;
      animation: tos-flutter 4.2s ease-in-out infinite alternate;
    }
    .fsf-plate.is-idle .tos-leaves-8 {
      transform-box: fill-box; transform-origin: 50% 70%;
      animation: tos-flutter 5.1s ease-in-out -1.7s infinite alternate-reverse;
    }
    .fsf-plate.is-paused .tos-crown, .fsf-plate.is-paused .tos-leaves { animation-play-state: paused; }
  }
}
@keyframes tos-glow   { from { opacity: .55; } to { opacity: 1; } }
@keyframes tos-open   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tos-leaf   { from { --grow: 0; } to { --grow: 1; } }
@keyframes tos-letter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tos-sport  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tos-sway   { from { transform: rotate(-.4deg); } to { transform: rotate(.4deg); } }
@keyframes tos-flutter { from { transform: rotate(-.9deg); } to { transform: rotate(.8deg); } }

/* SPORT is set as the site sets its display lines — Archivo, heavy, upper
   case, the display tracking — and straddles the line where the sky becomes
   the green: the optical centre of its capitals is the boundary. With
   line-height 1, Archivo's capitals run from 0.135em to 0.835em below the top
   of the box (measured in Chromium, WebKit and Firefox), so their centre is
   at 0.485em; the green of this strip starts exactly there and continues into
   the section below. The word is centred on the trunk, not on the page: the
   trunk stands 0.55% of the drawing's width left of its middle. */
.fsf-edge {
  --sport: var(--fs-display);
  --axis: calc(-0.005481 * min(1400px, 100%));
  position: relative; z-index: 1;
  font-size: var(--sport);
  padding-top: var(--space-1);
  background: linear-gradient(to bottom, transparent calc(var(--space-1) + .485em), var(--fsf-green) calc(var(--space-1) + .485em));
}
@media (max-width: 767px) { .fsf-edge { --axis: -0.614%; } }
.fsf-sport {
  margin: 0 0 0 calc(var(--axis) * 2 - .022em); text-align: center; color: var(--nsv-white);
  font-family: var(--font-display); font-weight: 800; font-size: 1em; text-transform: uppercase;
  line-height: 1; letter-spacing: -.022em;
}

/* --- 03 the hill ----------------------------------------------------------- */
.on-fsf-green {
  --bg: var(--fsf-green); --fg: var(--nsv-white); --fg-quiet: #E6F3EA; --rule-color: var(--nsv-white);
  background: var(--bg); color: var(--fg);
}
.on-fsf-green :focus-visible { outline-color: var(--nsv-yellow); }
.fsf-hill { padding-top: var(--space-4); padding-bottom: var(--act); }
.fsf-hill > .grid { row-gap: var(--space-3); }
.fsf-hill__label { margin: .5em 0 0; grid-column: 1 / -1; }
.fsf-hill__text, .fsf-hill__get { grid-column: 1 / -1; margin: 0; }
@media (min-width: 1024px) {
  .fsf-hill > .grid { grid-template-rows: auto 1fr; }
  .fsf-hill__label { grid-column: 1 / span 4; grid-row: 1; }
  .fsf-hill__text { grid-column: 5 / span 8; grid-row: 1 / span 2; }
  .fsf-hill__get { grid-column: 1 / span 4; grid-row: 2; align-self: end; }
}
.fsf-lead {
  margin: 0; max-width: 21ch;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  line-height: var(--lh-tight); letter-spacing: var(--track-h);
}
.fsf-body {
  margin: var(--space-4) 0 0; max-width: 64ch;
  font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-text);
}
.fsf-get { color: var(--nsv-sport); }
@media (max-width: 1023px) { .fsf-hill__get { margin-top: var(--space-3); } }
.fsf-get:focus-visible .arms-get__say { outline-color: var(--nsv-sport); }

/* --- 04 the five words ----------------------------------------------------- */
.fsf-stairs { padding-top: var(--act); padding-bottom: var(--act); }
/* The five words step down one straight line, as they do in the manifesto:
   five columns by six rows, each word's foot on the line where its column
   begins, so word and line meet by construction rather than by eye. */
.fsf-stair {
  --row: clamp(56px, 6vw, 96px); --step: 20%;
  position: relative; margin-top: var(--space-4); padding-bottom: var(--row);
}
.fsf-stair__line {
  position: absolute; left: 0; top: 0; overflow: visible;
  width: calc(var(--step) * 5); height: calc(var(--row) * 6);
}
.fsf-stair__line path { fill: none; stroke: var(--fsf-leaf); stroke-width: var(--rule-thin); stroke-linecap: round; }
/* The script redraws the line in the page's own pixels, so its length is a
   real length and it can be drawn along; without the script it is simply
   there. */
.fsf-stair__line path[data-len] {
  stroke-dasharray: var(--len); stroke-dashoffset: 0;
  transition: stroke-dashoffset 1700ms var(--ease-editorial) 150ms;
}
.fsf-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.fsf-steps li {
  height: var(--row); margin-left: calc(var(--i) * var(--step));
  display: flex; align-items: flex-end; padding: 0 0 .26em .1em; white-space: nowrap;
  font-family: var(--fsf-accent); font-weight: 400; font-size: clamp(27px, 3.4vw, 58px); line-height: 1;
  transition: opacity 500ms var(--ease-enter), transform 500ms var(--ease-enter);
  transition-delay: calc(var(--i) * 300ms + 250ms);
}
.fsf-steps li:first-child { font-weight: 800; }
.js .fsf-stair:not(.is-in) .fsf-stair__line path[data-len] { stroke-dashoffset: var(--len); }
.js .fsf-stair:not(.is-in) .fsf-steps li { opacity: 0; transform: translateY(-10px); }
@media (max-width: 767px) { .fsf-stair { --step: 13%; --row: 58px; } }

/* --- 05 the root ----------------------------------------------------------- */
.fsf-root { padding-top: var(--act); padding-bottom: var(--act); }
/* The seven letters lie among the roots as they do in the picture — the outer
   ones high, the middle ones deep — and settle there one after another. */
.fsf-culture {
  margin: 0; display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--fsf-accent); font-weight: 800; font-size: clamp(44px, 10.6vw, 184px);
  line-height: 1; color: var(--fsf-root); padding-bottom: .7em;
}
.fsf-culture span { --drop: 0em; transform: translateY(var(--drop));
  transition: opacity 600ms var(--ease-enter), transform 900ms var(--ease-editorial);
  transition-delay: calc(var(--i) * 95ms + 120ms); }
.fsf-culture span:nth-child(2), .fsf-culture span:nth-child(6) { --drop: .34em; }
.fsf-culture span:nth-child(3), .fsf-culture span:nth-child(5) { --drop: .56em; }
.fsf-culture span:nth-child(4) { --drop: .64em; }
.js .fsf-culture:not(.is-in) span { opacity: 0; transform: translateY(calc(var(--drop) - .5em)); }
.fsf-root__row { margin-top: var(--space-5); row-gap: var(--space-4); align-items: start; }
.fsf-root__side .meta { margin: 0; }
@media (min-width: 1024px) { .fsf-root__side { position: sticky; top: clamp(110px, 16vh, 170px); } }
.fsf-idea {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight);
  letter-spacing: var(--track-h);
}

/* The declaration is a sheet of the house's paper lying on the dark ground:
   margins, a seal, a title, and a sentence with two lines to sign on. No
   border, no shadow, no corner — a sheet has none. */
.fsf-doc {
  min-width: 0;
  --fg: var(--nsv-ink); --fg-quiet: #5F5E58; --rule-color: var(--nsv-ink);
  background: var(--nsv-paper); color: var(--nsv-ink);
  padding: clamp(26px, 4.6vw, 80px);
}
.fsf-doc :focus-visible { outline-color: var(--nsv-ink); }
.fsf-doc__top > .meta { min-width: 0; }
.fsf-doc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.fsf-seal {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(64px, 6.4vw, 96px); aspect-ratio: 1; background: var(--nsv-yellow); color: var(--nsv-ink);
}
.fsf-seal .mast { transform: scale(.78); transform-origin: center; }
.fsf-doc__h { margin-top: var(--space-4); }
.fsf-decl { margin: var(--space-4) 0 0; font-family: var(--font-text); font-size: var(--fs-lead); line-height: 1.38; max-width: 36em; }
/* A line to sign on, in the sentence itself. What is written on it is set in
   the text face's italic — a hand, but one anybody can read. Until then a
   faint example lies on the line, and is never sent. */
.fsf-line { display: inline-block; max-width: 100%; vertical-align: baseline; white-space: nowrap; }
.fsf-line:last-of-type input { width: 4.7em; min-width: 4.5em; }
.fsf-line input {
  field-sizing: content;
  width: 9.1em; min-width: 6em; max-width: calc(100% - .5em);
  background: transparent; border: 0; border-radius: 0;
  border-bottom: var(--rule-thin) solid var(--nsv-ink);
  padding: 0 .12em .02em; margin: 0 .1em;
  font-family: var(--font-text); font-style: italic; font-size: 1em; line-height: 1.2;
  color: var(--nsv-ink);
  transition: border-color var(--t-micro) linear;
}
.fsf-line input::placeholder { color: var(--nsv-ink); opacity: .38; font-weight: 300; }
.fsf-line input:focus { outline: none; border-bottom-color: var(--nsv-blue); box-shadow: 0 1px 0 var(--nsv-blue); }
.fsf-doc[data-state="missing"] .fsf-line input:invalid { border-bottom-color: #B3261E; box-shadow: 0 1px 0 #B3261E; }
.fsf-doc[data-state="missing"] .check input:invalid { outline: 2px solid #B3261E; outline-offset: -8px; }
.fsf-doc__act { margin-top: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.fsf-doc__act .check { margin: 0; font-size: var(--fs-body); line-height: var(--lh-text); max-width: 46em; align-items: flex-start; }
/* A drawn box, 24 px to the eye, 44 px to the finger: the control is the
   size of a fingertip and the square is painted in its middle. */
.fsf-doc__act .check input {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; cursor: pointer;
  width: 44px; height: 44px; margin: -9px -6px -9px -10px; border: 0; border-radius: 0;
  background:
    linear-gradient(var(--nsv-paper), var(--nsv-paper)) center / 20px 20px no-repeat,
    linear-gradient(var(--nsv-ink), var(--nsv-ink)) center / 24px 24px no-repeat;
}
.fsf-doc__act .check input:checked {
  background:
    linear-gradient(var(--nsv-ink), var(--nsv-ink)) center / 12px 12px no-repeat,
    linear-gradient(var(--nsv-paper), var(--nsv-paper)) center / 20px 20px no-repeat,
    linear-gradient(var(--nsv-ink), var(--nsv-ink)) center / 24px 24px no-repeat;
}
.fsf-doc__act .check input:focus-visible { outline: 2px solid var(--nsv-ink); outline-offset: -8px; }
.fsf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* The one thing to press on the page, in the one colour that means it. */
.fsf-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; border: 0; border-radius: 0; cursor: pointer;
  background: var(--nsv-yellow); color: var(--nsv-ink);
  padding: clamp(20px, 1.8vw, 30px) clamp(20px, 2.2vw, 36px);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-lead); line-height: var(--lh-tight); letter-spacing: .02em; text-align: left;
}
.fsf-cta i { flex: 0 0 auto; position: relative; width: 44px; height: var(--rule-thin); background: currentColor;
             transition: width var(--t-ui) var(--ease-editorial); }
.fsf-cta i::after { content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 9px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
@media (hover: hover) { .fsf-cta:hover i { width: 76px; } }
.fsf-cta:focus-visible { outline: 2px solid var(--nsv-ink); outline-offset: 3px; }
.fsf-cta:focus-visible i { width: 76px; }
.fsf-cta:disabled { opacity: .5; cursor: progress; }
@media (max-width: 479px) { .fsf-cta { padding-inline: 18px; } }
.fsf-doc__status { margin: var(--space-2) 0 0; min-height: 1.4em; }
.fsf-doc__status:empty { margin: 0; min-height: 0; }
/* The foot of the sheet, as a printed form has one: what the paper is, and
   in the declaration's own three words, what kind of act signing it is. */
.fsf-doc__foot {
  margin: var(--space-4) 0 0; padding-top: var(--space-2); border-top: var(--rule-thin) solid var(--nsv-ink);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px var(--space-2);
}
/* Signed: the same sheet, with the name on its line, the date, and the seal
   brought down on it. */
.fsf-signed { margin: var(--space-4) 0 0; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2); }
.fsf-signed[hidden] { display: none; }
.fsf-seal--stamp { transform: rotate(-7deg); }
.fsf-doc[data-state="sent"] .fsf-seal--stamp { animation: fsf-stamp 520ms var(--ease-editorial) both; }
@keyframes fsf-stamp { from { opacity: 0; transform: rotate(-16deg) scale(1.7); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }
.fsf-doc[data-state="sent"] .fsf-doc__act { display: none; }
.fsf-doc[data-state="sent"] .fsf-line input { pointer-events: none; }

/* --- 06 the day ------------------------------------------------------------ */
.fsf-day { padding-top: var(--act); padding-bottom: var(--act); }
.fsf-day__row { margin-top: var(--space-4); row-gap: var(--space-5); }
.fsf-wait { list-style: none; margin: 0; padding: 0; }
.fsf-wait__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) 0; border-top: var(--rule-thin) solid var(--rule-color);
}
.fsf-wait__row:last-child { border-bottom: var(--rule-thin) solid var(--rule-color); }
.fsf-wait__n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight);
  letter-spacing: var(--track-h);
}
.fsf-day__h { margin: var(--space-5) 0 0; }
.fsf-chs { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.fsf-ch { display: grid; grid-template-columns: minmax(64px, var(--span-2)) minmax(0, 1fr);
  column-gap: var(--gutter); align-items: baseline;
  padding: var(--space-3) 0; border-top: var(--rule-thin) solid var(--rule-color); }
.fsf-ch:last-child { border-bottom: var(--rule-thin) solid var(--rule-color); }
.fsf-ch__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--track-h); }
.fsf-ch__p { grid-column: 2; margin: var(--space-1) 0 0; max-width: 60ch; font-family: var(--font-text); }
.fsf-films { display: grid; gap: var(--space-4); margin-top: var(--space-5); max-width: var(--span-9); }
.fsf-film { margin: 0; }
.fsf-film video, .fsf-film iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: var(--nsv-ink); }
.fsf-film figcaption, .fsf-shot figcaption { margin-top: 10px; }
.fsf-play { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--nsv-ink); cursor: pointer; overflow: hidden; }
.fsf-play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-ui) var(--ease-enter); }
.fsf-play__mark { position: absolute; left: var(--space-2); bottom: var(--space-2); width: 64px; height: 64px; background: var(--nsv-yellow); }
.fsf-play__mark::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-36%, -50%);
  border-left: 18px solid var(--nsv-ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
@media (hover: hover) { .fsf-play:hover img { opacity: .82; } }
.fsf-grid { margin-top: var(--space-5); columns: 4; column-gap: var(--gutter); }
@media (max-width: 1279px) { .fsf-grid { columns: 3; } }
@media (max-width: 767px)  { .fsf-grid { columns: 2; column-gap: 12px; } }
.fsf-shot { margin: 0 0 var(--gutter); break-inside: avoid; }
@media (max-width: 767px) { .fsf-shot { margin-bottom: 12px; } }
.fsf-shot a { display: block; background: var(--nsv-steel-line); }
.fsf-shot img { display: block; width: 100%; height: auto; }
.fsf-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(29, 29, 27, .97); color: var(--nsv-paper); }
.fsf-lb::backdrop { background: rgba(29, 29, 27, .97); }
.fsf-lb[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.fsf-lb__fig { margin: 0; display: grid; justify-items: center; gap: 12px; padding: 56px 0 24px; touch-action: pan-y; }
.fsf-lb__fig img { max-width: 100%; max-height: calc(100dvh - 130px); width: auto; height: auto; object-fit: contain; }
.fsf-lb__x { position: absolute; top: 18px; right: var(--page-x, 24px); background: none; border: 0; color: inherit; cursor: pointer; padding: 10px 0; }
.fsf-lb__nav { width: clamp(48px, 7vw, 110px); height: 100%; min-height: 48px; background: none; border: 0; color: inherit; cursor: pointer; display: grid; place-items: center; }
.fsf-lb__nav i { width: 16px; height: 16px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.fsf-lb__nav--next i { transform: rotate(-135deg); }
.fsf-lb__nav[hidden] { visibility: hidden; display: grid; }
.fsf-lb :focus-visible { outline: 2px solid var(--nsv-yellow); outline-offset: 2px; }

/* --- 07 the closing line --------------------------------------------------- */
.fsf-close { padding-block: calc(var(--act) * 1.35); }