/* Fairways & Fintech site: composition only. Loaded last, after tokens.css, kit.css and fairways-profile.css (kit v1.2, clear liquid body).
   THE LIGHT HALF (Frost, Mono, Mirror Platinum) IS THE SITE: <html data-mode="frost" data-accent="mono">, pinned, no toggle. The dark build is the git tag pre-light-default.
   Colours come from existing tokens; there is no literal colour in this file (the two inline LQIPs live in each page's head).
   No glass value is set here (--blur, --sat, --lq-*, --lens-gain) except the measured tint block below (--slab, --tile per page): the kit and the profile own the material (Frost blur 7px, scrim .18/.30).
   Contrast: pixel pass on this file in ENGINEER-NOTES "Final". */

/* TINT SEARCH (BRIEF-golf-worlds 5), the one place this file sets glass values. These photographs are brighter than the old ribbon plate, so the glass can be clearer.
   For each page the slab tint was stepped .46, .42, .38, .34 (tile = slab minus .18, ring unused: the lens carries the tint once on the host) and the kit's pixel-contrast pass was run
   at 1440x900 and 1040x800, lens on and off, 30px steps (tools/tint-sweep.mjs, review/golf-worlds/tint/). The lowest step with 0 failing rows and a smallest-text minimum of 4.6 or more is kept:
     home .34 (min 5.00)   rulings .34 (5.02)   course .34 (5.50)   404 .34 (5.07)   about .46 (the sweep passed .42 at 4.70, but after the padding and slab changes of round 2 it read 4.53 at 1040, so it is back at the kit default)   corrections .46 (4.73; .42 reads 4.50, .38 fails 12 rows: the dark grass bottom left)
   Blur is never raised to fix a row: if a row fails, what is behind the glass changes (the scene grade) first. */
@media (min-width:900px){   /* round 3: the text slabs blur the scene less (4px, the kit says 7), so the object behind a pane or a slab stays recognisable; the pixel pass decides. Below 900 the slab dissolves into tiles over the portrait crop and keeps the kit values (the mobile pixel pass failed 10 rows at the lower tint) */
  [data-page]{ --blur:4px; }
  [data-page="home"], [data-page="rulings"], [data-page="course"], [data-page="404"]{ --slab:rgba(255,255,255,.34); --tile:rgba(255,255,255,.16); }
  [data-page="about"]{ --slab:rgba(255,255,255,.50); --tile:rgba(255,255,255,.32); }   /* round 8: the same 4px blur as every page (it was 7px: "peach milk") with a higher tint; the pixel pass at 1440 and 1040, lens on and off, reads 5.27 at .50 (BLUR=4px tools/tint-sweep.mjs about .46,.50,.54,.58: 0 failing, 5.05 to 5.67) */
}

:root{
  font-synthesis:none;
  --ff-wrap:min(1360px, 100% - 2 * var(--gutter));
  --ff-section:48px;
  --ff-pad-l:48px;
}
/* slab padding 24 to 56px: the kit's adaptive lens takes the 40px tier from about 1040 and the 64px tier once the padding clears 56px of every text rect */
@media (min-width:900px){ :root{ --pad-slab:56px; --pad-tile:24px; --ff-section:96px; } }
@media (min-width:1300px){ :root{ --ff-pad-l:max(64px, calc((100% - 1360px) / 2 + 24px)); } }
html{ scroll-behavior:auto; }
body.ff-page{ overflow-x:clip; }
.ff-page button{ font:inherit; }
.ff-wrap{ position:relative; width:var(--ff-wrap); margin-inline:auto; }

/* ---------- text styles: T1 to T9 (Big Shoulders 700 to 900, Hanken 400 to 600; nothing else) ---------- */
.ff-h1{ margin:0; font-size:clamp(48px, 2rem + 4vw, 88px); text-wrap:balance; }                                    /* T1 display: .sg-display + the profile (88 at 1440, 74 at 1040, 48 at 375; Big Shoulders 900) */
.ff-h2{ margin:0; font-family:var(--font-display); font-weight:var(--fw-num); font-size:clamp(32px, 2rem + .5vw, 40px); line-height:1.05; letter-spacing:var(--tr-display); text-transform:uppercase; color:var(--ink); text-wrap:balance; }   /* T2 */
@media (max-width:359.98px){ .ff-h1{ font-size:40px; } }                                                          /* 320: "FAIRWAYS" at 48px is 253px wide in a 232px head tile */
.ff-h2--page{ font-size:clamp(36px, 2rem + 1.2vw, 56px); line-height:1; }                                          /* T2 on a slab-level heading */
.ff-p{ margin:0; font-size:var(--fs-body); line-height:24px; color:var(--ink); text-wrap:pretty; }                  /* T4 body 16/24 */
.ff-lead{ margin:0; max-width:36em; font-size:18px; line-height:28px; color:var(--ink2); text-wrap:pretty; }        /* T5 lead 18/28 */
.ff-small{ margin:0; font-size:var(--fs-meta); line-height:20px; color:var(--ink2); text-wrap:pretty; }             /* T6 small 14/20 */
.ff-claim{ margin:0; font-size:22px; font-weight:var(--fw-ui); line-height:28px; color:var(--ink); text-wrap:balance; }   /* T7 claim 22/28 */
.ff-q{ quotes:"\201C" "\201D"; }
.ff-t8{ margin:0; font-family:var(--font-display); font-weight:var(--fw-num); font-size:var(--fs-num); line-height:1.02; letter-spacing:var(--tr-num); text-transform:uppercase; color:var(--ink); }   /* T8 numerals */
.ff-link{ overflow-wrap:anywhere; color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); transition:text-decoration-color var(--d-fast) var(--ease); }
.ff-link:hover{ text-decoration-color:var(--ink); }
.ff-page a:focus-visible, .ff-replay:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }
.ff-page .sg-btn:focus-visible, .ff-page .sg-nav__item:focus-visible{ border-radius:var(--r-pill); }
/* the statement: the house view's three lines, the largest type on the site (T9). Plain type: no stamp, no chrome, no gradient. */
.ff-statement{ --ff-st:clamp(40px, 7.2vw, 104px); }
.ff-statement > li{ margin:0; font-family:var(--font-display); font-weight:var(--fw-display); font-size:var(--ff-st); line-height:.98; letter-spacing:var(--tr-display); text-transform:uppercase; color:var(--ink); text-wrap:balance; }
.ff-statement--sm{ --ff-st:clamp(32px, 8.4cqi, 44px); }

/* skip link: the first tab stop */
.ff-skip{ position:absolute; z-index:100; left:16px; top:-96px; }
.ff-skip:focus-visible{ top:12px; }

/* ---------- header: one glass bar, scrolls away ---------- */
.ff-header-wrap{ position:relative; z-index:5; padding-top:24px; }
.ff-header-wrap--home{ position:absolute; inset:0 0 auto 0; }
.ff-header{ display:flex; width:100%; height:68px; gap:24px; padding-inline:16px 10px; }
.ff-hlock--sm{ flex:none; min-height:44px; color:var(--ink); text-decoration:none; border-radius:var(--r-ctl); }
.ff-hlock .ff-stack--sm{ --stack-fs:16px; }
.ff-header .sg-nav{ --nav-item:transparent; --nav-item-edge:0 0 transparent; margin:0 auto; padding-inline:0; flex:0 1 auto; }
.ff-header .sg-nav__item{ height:40px; }
.ff-header__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.ff-header .sg-btn{ height:44px; }
.ff-arrow{ width:16px; height:16px; }
@media (max-width:959.98px){
  .ff-header{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand cta" "nav nav"; height:auto; row-gap:4px; padding:10px 10px 10px 14px; border-radius:28px; }
  .ff-hlock--sm{ grid-area:brand; }
  .ff-header .sg-nav{ grid-area:nav; margin:0; padding-inline:0; margin-inline:0; min-width:0; }
  .ff-header .sg-nav__item{ height:44px; }
  .ff-header__actions{ display:contents; }
  .ff-header__follow{ display:none; }
  .ff-header__cta{ grid-area:cta; }
}
@media (max-width:349.98px){ .ff-header{ grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "nav" "cta"; } .ff-header__cta{ justify-self:start; } }

/* ---------- scenes: one place per page (BRIEF-golf-worlds 3 and 5). The fixed layer is a photograph; each page places it by looking so a slab edge crosses its object (the bend rule).
   object-position x only (the frames are 1.77:1, so at 1440x900 and 1040x800 the height binds): X(f) = f * S - R * p, S the scaled width, R = S - viewport width. Starting values from the brief, then looked at. ---------- */
.ff-page[data-page="home"] .sg-scene:not(.ff-landing__scene) .sg-scene__img{ object-position:50% 50%; }
.ff-page[data-page="rulings"] .sg-scene__img{ object-position:70% 50%; }
.ff-page[data-page="course"] .sg-scene__img{ object-position:50% 50%; }   /* 100% with a 1000px slab measures 7.6 on the bend but hides the flag behind the glass: the flag is the page's proud object, so 50% */
.ff-page[data-page="corrections"] .sg-scene__img{ object-position:25% 50%; }
.ff-page[data-page="404"] .sg-scene__img{ object-position:25% 50%; }
@media (max-width:1299.98px){
  .ff-page[data-page="home"] .sg-scene:not(.ff-landing__scene) .sg-scene__img{ object-position:100% 50%; }
  .ff-page[data-page="rulings"] .sg-scene__img{ object-position:100% 50%; }
  .ff-page[data-page="course"] .sg-scene__img{ object-position:100% 50%; }
  .ff-page[data-page="corrections"] .sg-scene__img{ object-position:25% 50%; }
  .ff-page[data-page="404"] .sg-scene__img{ object-position:100% 50%; }
}
/* the portrait crops (below 900): the object is chosen into the crop in the file, this only trims */
@media (max-width:899.98px){ .ff-page .sg-scene__img{ object-position:50% 50% !important; } }

/* ---------- Home hero: poster, then the loop, behind the copy. The plate (poster, video, live canvas share one box and one cover-fit) is nudged down by --ff-plate-top so the ball clears the header bar by 16px,
   the strip above it is the poster's own top row. All sizes are container units of the hero, so the copy column, the plate and the canvas read one geometry. ---------- */
.ff-landing{ --hh:max(100svh, 760px); --ff-sph-gap:48px; container:ff-hero / inline-size; position:relative; min-height:var(--hh); display:grid; align-content:center; padding:0; overflow:clip; }   /* no padding: 100cqw is the hero's content box, and the plate and the copy both read the whole width */
.ff-landing__scene{ -webkit-mask-image:linear-gradient(black calc(100% - 220px), transparent); mask-image:linear-gradient(black calc(100% - 220px), transparent); }   /* the plate dissolves into the fixed hall scene below (no seam): the hero has no background of its own */
.ff-landing::before{ content:""; position:absolute; z-index:0; left:0; right:0; top:0; height:96px; pointer-events:none; background:var(--ff-strip, var(--stage)); -webkit-mask-image:linear-gradient(black 60%, transparent); mask-image:linear-gradient(black 60%, transparent); }   /* the poster's own top row above the nudged plate */
.ff-landing__plate, .ff-landing__copy{
  --sw:max(100cqw, calc(var(--hh) * 16 / 9));                              /* displayed width of the 16:9 art (cover) */
  --ox:calc((var(--sw) - 100cqw) * -.2);                                   /* object-position 20% 0% */
  --sl:calc((var(--ball-cx) - var(--ball-r)) * var(--sw) + var(--ox));       /* the baked ball's left edge */
}
.ff-landing__plate{ position:absolute; left:0; width:100%; height:var(--hh); top:clamp(0px, calc(108px - (var(--ball-cy) * 9 / 16 - var(--ball-r)) * var(--sw)), 72px); }
.ff-landing__plate > picture{ display:contents; }
.ff-landing__img, .ff-landing__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:20% 0%; }
.ff-landing__img{ transition:none; opacity:1; }
.ff-landing__video{ opacity:0; transition:opacity 400ms var(--ease); pointer-events:none; }
.ff-landing__video.is-on{ opacity:1; }
.ff-landing__scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgb(var(--ff-day) / .55) 0%, rgb(var(--ff-day) / .32) 45%, rgb(var(--ff-day) / 0) 62%); }   /* the profile's light scrim (Brief C 5.2) */
.ff-landing__copy{ position:relative; z-index:2; margin:112px 24px 72px var(--ff-pad-l); width:min(900px, calc(var(--sl) - var(--ff-sph-gap) - var(--ff-pad-l))); display:grid; justify-items:start; }
.ff-landing .ff-h1{ font-size:clamp(48px, 5.6vw, 80px); }                              /* 80 at 1440 (BRIEF-golf-worlds 5.1), so it clears the ball */
.ff-landing .sg-eyebrow{ margin:0 0 24px; }
.ff-landing .ff-lead{ margin-top:24px; }
.ff-landing__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.ff-landing__disc{ margin:24px 0 0; font-size:var(--fs-meta); line-height:20px; color:var(--ink); }
/* pause / play: WCAG 2.2.2, only once something moves (the script unhides it) */
.ff-landing__pause{ position:absolute; z-index:3; right:24px; bottom:24px; display:inline-grid; place-items:center; width:var(--ctl); height:var(--ctl); padding:0; border:0; border-radius:50%; color:var(--ink); cursor:pointer;
  transition:background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }   /* the kit's icon button look, without its own aria-pressed toggle (the script owns the state) */
.ff-landing__pause:hover{ box-shadow:var(--lq-ctl-edge-hi), var(--lift); }
.ff-landing__pause[aria-pressed="true"]{ color:var(--ink-on-hi); }
.ff-landing__pause:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.ff-landing__pause .ff-i-play{ display:none; fill:currentColor; }
.ff-landing__pause[aria-pressed="true"] .ff-i-pause{ display:none; }
.ff-landing__pause[aria-pressed="true"] .ff-i-play{ display:block; }
.ff-landing__pause[hidden]{ display:none; }
/* 900 to 1099: the square crop, right half, fading into the stage behind the copy */
@media (max-width:1099.98px){
  .ff-landing{ --hh:max(100svh, 640px); }
  .ff-landing__plate{ left:auto; top:calc(24px + 68px + 8px); right:-6cqw; width:60cqw; height:60cqw; -webkit-mask-image:radial-gradient(closest-side, black 80%, transparent 100%); mask-image:radial-gradient(closest-side, black 80%, transparent 100%); }
  .ff-landing__img{ object-position:50% 50%; }
  .ff-landing__copy{ width:calc(53cqw - 96px); }                                        /* the ball (77% of the square) starts at 53% of the width: 48px of air */
  .ff-landing .ff-h1{ font-size:clamp(40px, 6vw, 60px); }
  .ff-landing__video{ display:none; }
}
@media (max-width:899.98px){
  .ff-landing{ --ff-band:clamp(240px, 34svh, 420px); --ff-bandtop:calc(24px + 112px + 6px); display:block; min-height:0; }
  .ff-landing__plate{ left:50%; right:auto; transform:translateX(-50%); width:var(--ff-band); height:var(--ff-band); top:var(--ff-bandtop); -webkit-mask-image:radial-gradient(closest-side, black 82%, transparent 100%); mask-image:radial-gradient(closest-side, black 82%, transparent 100%); }   /* the whole ball, below the header: the square crop at band size, dissolving into the hall */
  .ff-landing__scrim{ background:none; }
  .ff-landing__copy{ width:auto; margin:calc(var(--ff-bandtop) + var(--ff-band) + 6px) var(--gutter) 48px; }
  .ff-landing .ff-h1{ font-size:clamp(40px, 12.8vw, 56px); margin-bottom:0; }
  .ff-landing .sg-eyebrow{ white-space:normal; height:auto; min-height:26px; padding-block:6px; line-height:1.1; }
  .ff-landing__cta{ flex-direction:column; align-items:stretch; }
  .ff-landing__cta .sg-btn{ justify-content:center; }
}
@media (max-width:349.98px){ .ff-landing{ --ff-bandtop:calc(24px + 178px + 8px); } }
/* the next section lets the fixed scene arrive without a seam */
.ff-arrive{ position:relative; }

.ff-arrive > *{ position:relative; z-index:1; }
.ff-section.ff-arrive{ margin-top:0; padding-top:24px; }

/* ---------- sections and slabs ---------- */
.ff-section{ margin-top:var(--ff-section); }
.ff-main > .ff-section:first-child, .ff-main > .ff-first{ margin-top:var(--ff-section); }
.ff-main--inner{ padding-top:24px; }
.ff-main--inner > .ff-section:first-child{ margin-top:0; }
.sg-slab > * + *{ margin-top:var(--gap); }
.sg-slab > .ff-pagehead + *, .sg-slab > .ff-section-head + *{ margin-top:32px; }
/* the lens injects two spans before the slab's content; the first real block must not take the sibling gap (a jump at load, CLS) */
.sg-slab > .sg-lens-ring + *{ margin-top:0; }
/* the sibling gap above must never reach the lens spans: a 16px margin on .sg-lens-ring pushed the band 16px down, the 'second box' seam inside the rim */
.sg-slab > .sg-lens-body, .sg-slab > .sg-lens-ring{ margin:0; }
@media (min-width:900px){
  .sg-slab > .sg-slab__head{ padding-inline:4px; }
  .sg-slab > .ff-pagehead, .sg-slab > .ff-section-head, .sg-slab > .ff-top{ padding-top:6px; }
  .sg-slab > .sg-slab__head:last-child{ padding-bottom:12px; }
}
@media (max-width:899.98px){ .sg-slab > * + *{ margin-top:12px; } .sg-slab > .ff-pagehead + *, .sg-slab > .ff-section-head + *{ margin-top:12px; } }
.ff-section-head, .ff-pagehead{ display:grid; gap:12px; justify-items:start; }
.ff-section-head__top{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; }
.ff-pagehead__row{ display:flex; width:100%; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; }
.ff-pagehead .ff-lead, .ff-section-head .ff-lead{ margin-top:4px; }
.ff-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ff-cta{ padding-top:8px; }

/* replay: a text button with the sprite refresh icon */
.ff-replay{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 4px; border:0; background:none; cursor:pointer; font-size:var(--fs-meta); font-weight:var(--fw-ui); line-height:20px; color:var(--ink2); transition:color var(--d-fast) var(--ease); }
.ff-replay:hover{ color:var(--ink); }
.ff-replay[hidden]{ display:none; }
@media (max-width:899.98px){ .ff-replay{ min-height:44px; } }
@media (min-width:900px){ .ff-replay{ min-height:44px; margin-block:-6px; } }   /* a 44px hit area without moving anything */

/* Home rulings slab at >= 900: the "All rulings" pill sits in the head beside Replay. The DOM keeps the copy order (head, cards, link); the grid places it. */
@media (min-width:900px){
  .ff-rulingslab{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"top all" "h2 h2" "lead lead" "cards cards"; column-gap:16px; align-items:center; }
  .ff-rulingslab > * + *{ margin-top:0; }
  .ff-rulingslab > .ff-section-head{ display:contents; }
  .ff-rulingslab .ff-section-head__top{ grid-area:top; align-self:center; }
  .ff-rulingslab .ff-section-head > .ff-h2{ grid-area:h2; margin-top:12px; }
  .ff-rulingslab .ff-section-head > .ff-lead{ grid-area:lead; margin-top:12px; }
  .ff-rulingslab > .ff-cards{ grid-area:cards; margin-top:32px; }
  .ff-rulingslab > .ff-rulings__all{ grid-area:all; justify-self:end; align-self:center; }
}

/* ---------- bento (container queries read the slab) ---------- */
.ff-bento{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }
.ff-bento > .sg-tile > * + *{ margin-top:12px; }
.ff-bento > .sg-tile > .ff-label + .ff-h2{ margin-top:8px; }
@container sg-slab (min-width:640px){
  .ff-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ff-s4, .ff-s2f{ grid-column:1 / -1; }
}
@container sg-slab (min-width:1100px){
  .ff-bento{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ff-s2, .ff-s2f{ grid-column:span 2; }
  .ff-s4{ grid-column:1 / -1; }
}
/* the statement tile: the house view as one composed block, the page's biggest type */
.ff-statement-tile{ padding-block:40px 48px; }
.ff-statement-tile > .ff-label{ color:var(--ink); }                 /* ink2 read 4.2:1 on this tile where a crest crosses its top-left (fine sweep) */
@media (max-width:899.98px){ .ff-statement-tile{ padding-block:24px 28px; } }
.ff-statement-tile > .ff-statement{ margin-top:20px; --ff-st:clamp(40px, 8.4cqi, 104px); }

/* ---------- ruling cards ---------- */
.ff-cards{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }
@container sg-slab (min-width:880px){ .ff-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ff-card{ gap:0; }
.ff-card > .ff-claim{ margin-top:10px; }
.ff-card > .ff-p{ margin-top:14px; margin-bottom:24px; }
.ff-card > .ff-stamp{ align-self:flex-end; margin:auto 8px 0 0; }
/* the signature moment (brief 7): one landing per card, 160ms stamp, 180ms thud 140ms later, no sweep */
.ff-arm .ff-card:not(.is-landed) .ff-stamp{ opacity:0; }
.ff-arm .ff-card.is-landed .ff-stamp{ animation:ff-land 160ms cubic-bezier(.2,.9,.3,1) var(--ff-delay, 0ms) backwards; }
.ff-arm .ff-card.is-landed{ animation:ff-thud 180ms var(--ease) calc(var(--ff-delay, 0ms) + 140ms) backwards; }
@keyframes ff-land{ from{ opacity:0; transform:rotate(-3deg) scale(1.18); } }
@keyframes ff-thud{ 40%{ transform:translate3d(0, 2px, 0); } }

/* ---------- verdict key (tray): the Rulings page's hero object ---------- */
.ff-key{ display:block; }
.ff-key__dl{ position:relative; margin:0; padding:8px 8px 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:8px; row-gap:16px; }
.ff-key__tray{ grid-row:1; grid-column:1 / -1; align-self:stretch; margin:-8px -8px 0; pointer-events:none; }
.ff-key__item{ display:contents; }
.ff-key__item > dt{ grid-row:1; position:relative; z-index:1; margin:0; }
.ff-key__item > dd{ grid-row:2; margin:0; padding:12px 6px 0; box-shadow:inset 0 1px 0 var(--lq-hair); }   /* each definition is a band of light under its stamp */
.ff-key__item > dt, .ff-key__item > dd{ grid-column:var(--col); }
@container (max-width:639.98px){
  .ff-key__dl{ grid-template-columns:180px minmax(0,1fr); padding:0; row-gap:12px; column-gap:16px; align-items:center; }
  .ff-key__tray{ display:none; }
  .ff-key__item{ display:contents; }
  .ff-key__item > dt, .ff-key__item > dd{ grid-column:auto; grid-row:auto; padding:0; box-shadow:none; }
  .ff-key__item > dt .ff-stamp--fill{ --ff-tr:.06em; }
  /* no tray at this width, but the clear OUT OF BOUNDS stamp still needs the obsidian slot behind it to clear 4.5:1 over the brightest crest */
  .ff-key__item > dt{ padding:6px; border-radius:var(--r-ctl); background:var(--ff-tray); box-shadow:inset 0 6px 14px -4px rgb(var(--ff-shade) / .9), var(--ff-well-edge); }
}
@container (max-width:419.98px){
  .ff-key__dl{ grid-template-columns:minmax(0,1fr); row-gap:8px; }
  .ff-key__item > dd{ margin-bottom:8px; }
}

/* ---------- rows are bands of light: the row's top edge catches the one light (--lq-hair), never a drawn line ---------- */
.ff-list{ margin:0; padding:0; list-style:none; display:grid; gap:0; }
.ff-list > li{ position:relative; padding:12px 0 12px 24px; font-size:var(--fs-body); line-height:24px; color:var(--ink); text-wrap:pretty; }
.ff-list > li::before{ content:""; position:absolute; left:2px; top:20px; width:8px; height:8px; border-radius:50%; background:var(--lq-bead); box-shadow:var(--lq-bead-edge); }
.ff-rows > li, .ff-rows > .ff-row{ box-shadow:inset 0 1px 0 var(--lq-hair); }
.ff-list--plain > li{ padding-left:0; }
.ff-list--plain > li::before{ display:none; }
@container (min-width:640px){
  .ff-list--cols{ display:block; column-count:2; column-gap:40px; }
  .ff-list--cols > li{ break-inside:avoid; }
}
.ff-lies > li{ padding-left:0; display:grid; gap:2px; }
.ff-lies > li::before{ display:none; }
.ff-lies__lead{ font-weight:var(--fw-strong); color:var(--ink); }
.ff-lies__text{ color:var(--ink); }                      /* ink2 read 4.42:1 where a crest crosses the tile (fine sweep, 1440); the lead keeps its 600 weight */
.sg-tile > .sg-tile__title + .ff-list{ margin-top:8px; }
/* How it works: four numbered steps, 2 x 2 from 480px, numerals in Big Shoulders 800 */
.ff-steps{ margin:0; padding:0; list-style:none; counter-reset:ff-step; display:grid; grid-template-columns:minmax(0,1fr); gap:20px 28px; margin-top:16px; }
.ff-steps > li{ counter-increment:ff-step; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:start; font-size:var(--fs-body); line-height:24px; color:var(--ink); text-wrap:pretty; }
.ff-steps > li::before{ content:counter(ff-step); font-family:var(--font-display); font-weight:var(--fw-num); font-size:56px; line-height:44px; min-width:.5em; color:var(--ink2); }
@container (min-width:480px){ .ff-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ff-steps__note{ margin-top:20px; padding-top:16px; box-shadow:inset 0 1px 0 var(--lq-hair); }

/* course facts: a numeral band */
.ff-facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 16px; margin:8px 0 0; padding:0; list-style:none; }
@container (min-width:520px){ .ff-facts{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ff-stat{ display:flex; flex-direction:column; justify-content:flex-start; gap:4px; min-width:0; }
.ff-stat .ff-small{ margin:0; }
.ff-stat__pre{ font-size:var(--fs-meta); line-height:20px; color:var(--ink2); }
.ff-stat > .ff-t8:first-child{ margin-top:20px; }                    /* the four numerals share one baseline ("About" sits above 18,700 without lifting its neighbours) */
.ff-t8--fact{ font-size:clamp(40px, 9cqi, 64px); line-height:1; white-space:nowrap; }
.ff-facts__note{ margin-top:8px; padding-top:16px; box-shadow:inset 0 1px 0 var(--lq-hair); }
.ff-tilehead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.ff-tilehead .sg-tile__title{ min-width:0; }
.ff-duo{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); align-items:start; }
.ff-duo > .sg-tile > * + *{ margin-top:12px; }
@container sg-slab (min-width:1100px){
  .ff-duo--a{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:stretch; }
  .ff-duo--b{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:stretch; }
}

/* the ghost table and the corrections record sit directly on their tile (no black well): heads stay, rows are bands of light */
.ff-ghost, .ff-record{ width:100%; border-collapse:separate; border-spacing:0; }
.ff-ghost caption{ text-align:left; padding:0 0 16px; }
.ff-record caption{ text-align:left; padding:0 0 12px; }
.ff-ghost .sg-table__th, .ff-record .sg-table__th{ padding:0 12px 10px; }
.ff-ghost .sg-table__td, .ff-record .sg-table__td{ padding:14px 12px; font-size:var(--fs-body); border-radius:0; }
.ff-ghost tbody th{ text-align:left; font-weight:var(--fw-strong); color:var(--ink); }
.ff-ghost td{ color:var(--ink2); }
.ff-ghost tbody tr > *, .ff-record tbody tr > *{ box-shadow:inset 0 1px 0 var(--lq-hair); }
.ff-record__empty{ color:var(--ink); }
.ff-spec{ display:block; margin-top:8px; padding:12px 16px; border-radius:var(--r-ctl); background:var(--tile2); box-shadow:var(--inset), var(--lq-well-edge); font-size:var(--fs-body); line-height:24px; color:var(--ink); }   /* the one wording template: a recessed specimen */
.ff-tabletile{ padding-block:24px 12px; }
@media (max-width:639.98px){
  .ff-ghost thead, .ff-record thead{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  .ff-ghost, .ff-ghost tbody, .ff-ghost tr, .ff-ghost th, .ff-ghost td, .ff-record, .ff-record tbody, .ff-record tr, .ff-record td{ display:block; }
  .ff-ghost tr{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:8px; padding:14px 0; box-shadow:inset 0 1px 0 var(--lq-hair); }
  .ff-ghost tbody tr > *{ box-shadow:none; padding:0 !important; }
  .ff-ghost tbody th{ grid-column:1 / -1; padding-bottom:8px !important; }
  .ff-ghost td::before{ content:attr(data-label); display:block; font-family:var(--font-display); font-weight:var(--fw-label); font-size:var(--fs-label); letter-spacing:var(--tr-title); text-transform:uppercase; color:var(--ink2); margin-bottom:2px; }
}
@media (max-width:899.98px){
  .ff-record thead{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  .ff-record, .ff-record tbody, .ff-record tr, .ff-record td{ display:block; }
  .ff-record td[data-label]::before{ content:attr(data-label); display:block; font-family:var(--font-display); font-weight:var(--fw-label); font-size:var(--fs-label); letter-spacing:var(--tr-title); text-transform:uppercase; color:var(--ink2); }
  .ff-record tbody td{ box-shadow:none; padding:6px 0 !important; }
  .ff-record tbody tr{ box-shadow:inset 0 1px 0 var(--lq-hair); }
}

/* house view lines */
.ff-house{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }

/* ---------- signup form ---------- */
.ff-form{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:0; }
.ff-form > label{ grid-row:1; }
.ff-form__panel{ grid-row:2; display:grid; }
.ff-form__fine{ grid-row:3; margin:0; }
.ff-form__msg{ grid-row:4; }                              /* the 44px reserve (CLS 0) sits under the fine print and reads as tile padding */
.ff-form__panel > *{ grid-area:1 / 1; }
.ff-field{ position:relative; display:grid; gap:12px; align-content:center; }
.ff-field .sg-input{ height:56px; border-radius:var(--r-pill); padding-inline:24px 24px; font-size:var(--fs-body); }
.ff-field .sg-btn{ height:44px; }
@media (min-width:640px){
  .ff-field .sg-input{ padding-right:218px; }
  .ff-field .sg-btn{ position:absolute; right:6px; top:6px; }
}
.ff-form__done{ display:flex; align-items:center; gap:12px; margin:0; font-size:var(--fs-body); line-height:24px; color:var(--ink); visibility:hidden; }
.ff-form__done:focus-visible{ outline:2px solid var(--focus); outline-offset:6px; border-radius:var(--r-ctl); }
.ff-form[data-state="success"] .ff-field, .ff-form[data-state="already"] .ff-field{ visibility:hidden; }
.ff-form[data-state="success"] .ff-form__done, .ff-form[data-state="already"] .ff-form__done{ visibility:visible; }
.ff-form__bead{ display:inline-grid; place-items:center; flex:none; width:var(--ctl-sm); height:var(--ctl-sm); border-radius:50%; background:var(--lq-hi); color:var(--ink-on-hi); box-shadow:var(--lq-hi-edge), var(--lift-tight); }
.ff-form__msg{ display:flex; align-items:flex-start; gap:8px; min-height:44px; margin:0; font-size:var(--fs-meta); line-height:20px; color:var(--ink2); }
.ff-form__msg .sg-dot{ margin-top:7px; }
.ff-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.ff-signup{ display:grid; gap:var(--gap); align-items:stretch; }
@container sg-slab (min-width:900px){ .ff-signup{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center; gap:32px; } }
.ff-signup > .sg-tile{ padding-block:28px 12px; }
.ff-signup__lead{ display:grid; gap:12px; align-content:start; justify-items:start; }

/* ---------- footer ---------- */
.ff-footer{ margin-top:var(--ff-section); padding-bottom:48px; }
.ff-footer__grid{ display:grid; gap:24px; }
@container sg-slab (min-width:900px){ .ff-footer__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }
.ff-footer__text{ display:grid; gap:12px; align-content:start; }
.ff-footer__l1{ margin:0; font-size:var(--fs-body); line-height:24px; color:var(--ink); }
.ff-footer__l2{ max-width:31em; }
.ff-footer__links{ display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:flex-start; gap:0 20px; margin:0; padding:0; list-style:none; }
@container sg-slab (min-width:900px){ .ff-footer__links{ justify-content:flex-end; } }
.ff-footer__links a{ display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:var(--fs-meta); font-weight:var(--fw-ui); color:var(--ink2); text-decoration:none; }
.ff-footer__links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.ff-aboutslab{ --lens-gain:2; }   /* round 8: the slab edge is About's only bend target now (the framed portrait is gone); gain 2 reads 15.8 at 1440 and 23 at 1040, measured on both slab edges */
[data-page="about"] .ff-footer__links a, [data-page="about"] .ff-lead{ color:var(--ink); }   /* round 5: the 19th-hole scene is graded darker behind the About slab (glass over a room, not peach milk), so the footer links take full ink */
.ff-footer__copy{ margin-top:8px; padding-top:20px; box-shadow:inset 0 1px 0 var(--lq-hair); }   /* a hair band between the disclosure and the closing line */
@container sg-slab (min-width:900px){ .ff-footer__copy{ grid-column:1 / -1; } }

/* ---------- Send a claim: a slim band, not a tile ---------- */
.ff-send{ display:grid; gap:8px; }
.ff-send > *{ margin:0; }
/* below 900 the band keeps its own glass (the kit's dissolved .sg-slab__head tile); from 900 it is a band of light on the slab */
@media (min-width:900px){ .ff-send{ padding-top:20px; box-shadow:inset 0 1px 0 var(--lq-hair); } }
@container sg-slab (min-width:900px){
  .ff-send{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-areas:"label note" "lead note"; column-gap:48px; align-items:center; }
  .ff-send__label{ grid-area:label; }
  .ff-send__lead{ grid-area:lead; max-width:none; }
  .ff-send__note{ grid-area:note; justify-self:end; max-width:24em; }
}

/* ---------- Corrections: two columns of equal height, no dead space ---------- */
.ff-corr{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }
.ff-corr > .sg-tile > * + *{ margin-top:12px; }
@container sg-slab (min-width:900px){
  .ff-corr{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:auto 1fr; }
  }

/* ---------- About ---------- */
/* round 8: no framed portrait; Frank is laid over the scene (block at the end of this file) and the slab keeps clear of him (--strip). */
.ff-contact{ display:grid; gap:8px; }
.ff-cols{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }
.ff-cols > .sg-tile > * + *{ margin-top:12px; }
@container sg-slab (min-width:640px){
  .ff-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:auto auto 1fr; }
  .ff-cols__means{ grid-column:1; grid-row:1 / span 3; }
  .ff-cols__house{ grid-column:2; grid-row:1; }
  .ff-cols__contact{ grid-column:2; grid-row:2; }
  .ff-cols__privacy{ grid-column:2; grid-row:3; }
}

/* ---------- 404 ---------- */
.ff-lost{ --pad-slab:40px; width:min(640px, 100%); margin-inline:auto; }
.ff-lost .ff-lead{ max-width:none; }
.ff-lost__line{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }

/* ---------- misc ---------- */
.ff-landing .ff-lead{ max-width:none; text-wrap:wrap; color:var(--ink); }   /* the hero sub-line takes full ink (the dune rim crosses it) and breaks between sentences */
.ff-landing .ff-lead > span{ display:inline-block; }
.ff-record .sg-table__th{ white-space:normal; }
#main:focus{ outline:none; }                                                 /* the skip-link target takes focus programmatically and needs no ring */

/* ---------- degradation: the kit owns the backdrop-filter, reduced-transparency and forced-colors fallbacks; these cover this file's additions ---------- */
@media (forced-colors:active){
  .ff-stamp{ border:1px solid CanvasText; }
  .ff-key__tray{ outline:1px solid GrayText; }
  .ff-rows > li, .ff-rows > .ff-row, .ff-key__item > dd, .ff-ghost tbody tr > *, .ff-record tbody tr > *, .ff-steps__note, .ff-facts__note, .ff-footer__copy, .ff-send{ box-shadow:none; border-top:1px solid GrayText; }
  .ff-ghost tr, .ff-record tbody tr{ box-shadow:none; }
  .ff-spec{ outline:1px solid GrayText; }
}
@media print{ .ff-replay{ display:none; } }


/* small tile labels and table heads: ink2 read 4.41 to 4.48:1 on single rows where a crest crosses the tile (fine sweep, 1440, v1.2 values untouched), so they take full ink; the glass is not touched */
.ff-card > .ff-label, .ff-ghost .sg-table__th, .ff-record .sg-table__th{ color:var(--ink); }

/* hero sub-line: three short sentences, kept to the left of the dune rim (at 1280 and 1366 the one-line version ran over it, 2.85 to 3.44:1); slab-level labels take full ink (4.43:1 at 1920) */
.ff-landing .ff-lead{ max-width:30em; }
.ff-section-head .ff-label, .ff-signup__lead .ff-label, .ff-form > .ff-label{ color:var(--ink); }
/* every tile label takes full ink (4.34 to 4.49:1 on single rows in ink2 where a crest crosses a tile; the labels are Big Shoulders 700 caps, so hierarchy holds by type) */
.sg-tile .ff-label{ color:var(--ink); }
/* 320: the one-line chip ("Hole 1 in preparation. No scores yet.", 253px) is wider than the 232px head tile, so it may wrap */
@media (max-width:359.98px){ .ff-pagehead .sg-chip{ flex:0 1 auto; max-width:100%; white-space:normal; height:auto; min-height:28px; padding-block:4px; line-height:1.2; } }

/* ======================================================================================================================
   ROUND 2 (review 31/40): seam, dead glass, hero air, hierarchy and lit objects. Earlier rules above are overridden here on purpose.
   ====================================================================================================================== */

/* LENS BAND (review M1). The band shows the scene at the lens's own 1.2px blur and a tint .06 lighter than the body, so its inner edge reads as a frame
   (hard-cornered where the band is deeper than the slab radius). The ring now takes the slab's tint and a 6px blur: the bend and the crest stay, the step across the edge halves.
   Measured on 404 and Rulings (review\restyle-after\r2\seam-*): see ENGINEER-NOTES Round 2. The body's blur and the slab tint are untouched. */
.sg-slab > .sg-lens-ring{ -webkit-backdrop-filter:var(--lens-url,) blur(6px) saturate(var(--lens-sat)); backdrop-filter:var(--lens-url,) blur(6px) saturate(var(--lens-sat)); }


/* FOOTER (review M2): disclosure wide, links stacked in a lit column, one closing line; the slab shrinks to its content */
@container sg-slab (min-width:900px){
  .ff-footer__grid{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); column-gap:48px; row-gap:0; align-items:start; }
  .ff-footer__l2{ max-width:none; }
  .ff-footer__links{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start; gap:0; padding-left:32px; box-shadow:inset 1px 0 0 var(--lq-hair); }
  .ff-footer__links li{ width:100%; }
  .ff-footer__links a{ min-height:44px; width:100%; font-size:16px; color:var(--ink); }
  .ff-footer__copy{ margin-top:24px; }
}

/* SEND A CLAIM (review M2): the lead takes the full width, the note sits under it; no stray right-hand line */
@container sg-slab (min-width:900px){
  .ff-send{ grid-template-columns:minmax(0,1fr); grid-template-areas:"label" "lead" "note"; column-gap:0; align-items:start; }
  .ff-send__note{ justify-self:start; max-width:none; }
}

/* SIGNUP (review M2): the tile is as tall as the lead beside it; the reserved message line is its last row and reads as padding */
@container sg-slab (min-width:900px){ .ff-signup{ align-items:stretch; } }
.ff-signup > .sg-tile{ padding-block:28px 20px; display:flex; flex-direction:column; }
.ff-signup > .sg-tile > .ff-form{ flex:1; grid-template-rows:auto auto auto 1fr; align-content:space-between; }
.ff-form__msg{ min-height:44px; align-self:end; }

/* COURSE (review M2): Hole 1 facts are a 2 x 2 numeral block until the tile is wide, and every banded list fills its tile */
.ff-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 24px; margin-top:12px; }
.ff-t8--fact{ font-size:clamp(36px, 11cqi, 72px); }
@container (min-width:820px){ .ff-facts{ grid-template-columns:repeat(4, minmax(0,1fr)); } .ff-t8--fact{ font-size:clamp(40px, 9cqi, 64px); } }
.ff-stat > .ff-t8:first-child{ margin-top:0; }
.ff-stat__pre + .ff-t8{ margin-top:0; }
.ff-stat:not(:has(.ff-stat__pre)){ padding-top:20px; }                   /* the numerals share one baseline: the "About" line takes the same 20px above the others */
.ff-duo > .sg-tile{ display:flex; flex-direction:column; }
.ff-duo--b > .sg-tile > .ff-list{ flex:1; grid-auto-rows:1fr; align-content:stretch; }
.ff-duo--b > .sg-tile > .ff-list > li{ display:flex; align-items:center; }
.ff-duo--b > .sg-tile > .ff-list.ff-lies > li{ display:grid; align-content:center; }
.ff-duo--a > .sg-tile > .ff-facts{ flex:1; align-content:space-between; }
.ff-duo--a > .sg-tile > .ff-steps{ flex:1; align-content:space-between; }

/* LIT OBJECTS AND HIERARCHY (review H2): raised key-cap numerals on the steps, raised chips, Replay as a lit pill */
.ff-steps > li::before{ display:grid; place-items:center; flex:none; width:48px; height:48px; min-width:48px; border-radius:50%; font-size:28px; line-height:1; padding-top:2px; box-sizing:border-box;
  background:var(--lq-hi); color:var(--ink-on-hi); box-shadow:var(--lq-hi-edge), var(--lift-tight); }
.ff-steps > li{ grid-template-columns:48px minmax(0,1fr); column-gap:16px; align-items:center; min-height:48px; }
.ff-pagehead .sg-chip, .ff-tilehead .sg-chip{ background:var(--lq-hi); color:var(--ink-on-hi); box-shadow:var(--lq-hi-edge), var(--lift-tight); font-weight:var(--fw-strong); }
.ff-replay{ min-height:32px; padding:0 14px 0 10px; border-radius:var(--r-pill); background:var(--ctl-bg); box-shadow:var(--lq-ctl-edge); color:var(--ink); }
.ff-replay:hover{ background:var(--ctl-bg-hover); box-shadow:var(--lq-ctl-edge-hi), var(--lift-tight); }
@media (min-width:900px){ .ff-replay{ min-height:36px; margin-block:-2px; } }
.ff-list > li::before{ top:calc(50% - 4px); }
.ff-list--plain > li::before{ top:auto; }
.ff-duo--b > .sg-tile > .ff-list:not(.ff-lies) > li{ padding-left:24px; }
@container (min-width:640px){
  .ff-lies.ff-list--cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(5, 1fr); grid-auto-flow:column; column-gap:40px; column-count:auto; }
  .ff-lies.ff-list--cols > li{ margin:0; }
}
.ff-signup > .sg-tile{ padding-block:32px 4px; }

/* MOBILE NAV (review M6): at 375 the four links fit on one row without the scroller clipping "Corrections" and "About" (320 still scrolls, with the kit's edge fade) */
@media (max-width:959.98px) and (min-width:360px){ .ff-header .sg-nav__item{ padding-inline:8px; font-size:14px; } .ff-header .sg-nav{ gap:0; } }
@media (max-width:359.98px){ .ff-header .sg-nav__item{ padding-inline:6px; font-size:14px; } .ff-header .sg-nav{ gap:0; } }

/* ======================================================================================================================
   ROUND 3
   ====================================================================================================================== */

/* LENS BAND SEAM, root cause (review R2-M1). The kit paints the slab as two translucent spans (body inside, ring in the band) whose masks sum to 1, but each carries its own tint,
   so where both are partly transparent (the feather) the tints stack to 1-(1-t*m)(1-t*(1-m)), up to 14 points less than t at t=.76: a lighter hairline along the whole inner edge,
   square-cornered where the band is deeper than the slab radius. The tint now lives once, on the host behind both spans (they blur and bend the tinted image); the spans keep only
   the sheen (body) and no fill (ring). Colour is continuous across the band edge; the bend, the 8px body blur and the .76 tint are unchanged. */
[data-sg-lens] .sg-slab[data-sg-lens-host]{ background:var(--slab); --lens-body-fill:var(--lq-sheen); --lens-ring-fill:transparent; }

/* THE STATEMENT (review R2-H2): no plate. Large display type straight on the clear slab, a lit hairline above it and one small lit key-cap rule before the label. From 900px;
   below that there is no slab, so the kit's dissolved glass tile stays under the type. */
@media (min-width:900px){
  .ff-statement-tile.sg-tile{ background:none; box-shadow:inset 0 1px 0 var(--lq-hair); border-radius:0; padding-inline:4px; }
  .ff-statement-tile.sg-tile::before{ display:none; }
  .ff-statement-tile > .ff-label{ display:flex; align-items:center; gap:14px; }
  .ff-statement-tile > .ff-label::before{ content:""; flex:none; width:44px; height:8px; border-radius:var(--r-pill); background:var(--lq-hi); box-shadow:var(--lq-hi-edge), var(--lift-tight); }
}

/* ---------- LIGHT HALF: the profile's light scrim channel, small-type inks and the verdict key's obsidian slot ---------- */
/* the profile's light hero scrim (example.html, Brief C 5.2): the dark geometry washing toward platinum white; Frank's region gets none */
.ff-page{ --ff-day:250 251 252; }
.ff-landing__scrim{ background:linear-gradient(90deg, rgb(var(--ff-day) / .55) 0%, rgb(var(--ff-day) / .32) 45%, rgb(var(--ff-day) / 0) 62%); }
@media (max-width:899.98px){ .ff-landing__scrim{ background:none; } }
/* light-half fixes found by its own pixel sweep */
.ff-field .sg-input, .ff-field .sg-input:hover{ background:var(--tile2); }                              /* the kit's recessed well holds the placeholder */
.ff-page{ --ff-tray:var(--ff-obsidian); }                                                                           /* the verdict key's obsidian slot at < 640 (the profile defines it for .ff-tray only) */
@media (min-width:900px){ .ff-lead, .ff-send__note, .ff-small{ color:var(--ink); } }                     /* profile rule (Brief C A1): on the bare light slab ink2 measures 3.9 to 4.3; slab-level lines take full ink */
.ff-key__item > dt[data-mode="smoke"]{ --ff-tray:var(--ff-obsidian); }
@container (max-width:639.98px){ .ff-key__item > dt{ background:var(--ff-obsidian); } }
@media (min-width:900px){ .ff-label{ color:var(--ink); } }
.ff-field .sg-input::placeholder{ color:var(--ink); opacity:.78; }

/* ======================================================================================================================
   GOLF WORLDS (BRIEF-golf-worlds): a different place per page, offset slabs with a window of scene beside them, one proud object per page
   ====================================================================================================================== */
@media (min-width:900px){
  .ff-slab--l680{ width:min(560px, 100%); }
  .ff-slab--l760{ width:min(600px, 100%); }   /* 760 in the brief; 880 (the brief allows up to 880) puts the slab edge through the small cup (calibrated by eye, bend rule) */
  .ff-slab--l860{ width:min(600px, 100%); }
  .ff-slab--l1060{ width:min(720px, 100%); }
  .ff-slab--r1060{ width:min(1060px, 100%); margin-left:auto; }
}
/* wide screens: the bend search (tools/bend-search.mjs) put the edges here; below 1300 the narrower values above hold */
@media (min-width:1300px){
  .ff-slab--l680{ width:min(680px, 100%); }
  .ff-slab--l760{ width:min(880px, 100%); }
  .ff-slab--l860{ width:min(860px, 100%); }
  .ff-slab--l1060{ width:min(1060px, 100%); }
  .ff-slab--c1120{ width:min(1120px, 100%); margin-inline:auto; }
}

/* the pause / play control sits on the bare poster: a small glass disc so it reads over the bright floor */
.ff-landing__pause{ background:var(--slab); -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat)); box-shadow:var(--lq-ctl-edge-hi), var(--lift-tight); }
.ff-landing__pause[aria-pressed="true"]{ background:var(--lq-hi); }

/* ---------- display sizes: the page's largest type is never its neighbour's (W5) ---------- */
@media (min-width:900px){
  [data-page="course"] .ff-h1{ font-size:clamp(56px, 2rem + 4.4vw, 96px); }
  [data-page="corrections"] .ff-h1{ font-size:clamp(48px, 2rem + 3vw, 80px); }
  [data-page="404"] .ff-h1{ font-size:clamp(64px, 3rem + 5.5vw, 120px); line-height:.92; }
}

/* ---------- Home: one lead ruling across the top, two under it (grid placement only; the DOM keeps the copy order). Round 3: the lead card is as tall as its content: the claim large on the left, the reason and the stamp on the right. ---------- */
@container sg-slab (min-width:880px){
  [data-page="home"] .ff-cards{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  [data-page="home"] .ff-card:nth-child(1){ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-template-areas:"label label" "claim body" "claim stamp"; column-gap:56px; align-items:start; padding:36px 40px 32px; }
  [data-page="home"] .ff-card:nth-child(1) > .ff-label{ grid-area:label; }
  [data-page="home"] .ff-card:nth-child(1) > .ff-claim{ grid-area:claim; margin-top:20px; font-size:clamp(34px, 3.6vw, 52px); line-height:1.04; font-weight:var(--fw-ui); letter-spacing:-.01em; }
  [data-page="home"] .ff-card:nth-child(1) > .ff-p{ grid-area:body; margin:24px 0 0; font-size:18px; line-height:28px; }
  [data-page="home"] .ff-card:nth-child(1) > .ff-stamp{ grid-area:stamp; justify-self:end; margin:20px 8px 0 0; }
}

/* ---------- Rulings: the key as four key caps (2 x 2), the rulings as a docket ---------- */
@media (min-width:900px){
  [data-page="rulings"] .ff-key__dl{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:20px; row-gap:0; padding:4px 0 0; }
  [data-page="rulings"] .ff-key__tray{ display:none; }
  [data-page="rulings"] .ff-key__item > dt{ padding:6px; border-radius:var(--r-ctl); background:var(--ff-obsidian); box-shadow:inset 0 6px 14px -4px rgb(var(--ff-shade) / .9), var(--ff-well-edge); margin-top:12px; }
  [data-page="rulings"] .ff-key__item > dd{ margin:0; padding:12px 4px 16px; box-shadow:none; }
  [data-page="rulings"] .ff-key__item:nth-child(2) > dt{ grid-area:1 / 1; } [data-page="rulings"] .ff-key__item:nth-child(2) > dd{ grid-area:2 / 1; }
  [data-page="rulings"] .ff-key__item:nth-child(3) > dt{ grid-area:1 / 2; } [data-page="rulings"] .ff-key__item:nth-child(3) > dd{ grid-area:2 / 2; }
  [data-page="rulings"] .ff-key__item:nth-child(4) > dt{ grid-area:3 / 1; } [data-page="rulings"] .ff-key__item:nth-child(4) > dd{ grid-area:4 / 1; }
  [data-page="rulings"] .ff-key__item:nth-child(5) > dt{ grid-area:3 / 2; } [data-page="rulings"] .ff-key__item:nth-child(5) > dd{ grid-area:4 / 2; }
  /* the docket: one row per ruling, claim and reason left, the stamp at the right; hair bands between rows, no boxes */
  [data-page="rulings"] .ff-cards{ display:block; }
  [data-page="rulings"] .ff-card{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label stamp" "claim stamp" "body stamp"; column-gap:28px; align-items:center; padding:24px 4px 26px; border-radius:0; background:none; box-shadow:inset 0 1px 0 var(--lq-hair); }
  [data-page="rulings"] .ff-card::before{ display:none; }
  [data-page="rulings"] .ff-card > .ff-label{ grid-area:label; }
  [data-page="rulings"] .ff-card > .ff-claim{ grid-area:claim; margin-top:8px; }
  [data-page="rulings"] .ff-card > .ff-p{ grid-area:body; margin:10px 0 0; }
  [data-page="rulings"] .ff-card > .ff-stamp{ grid-area:stamp; margin:0 10px 0 0; align-self:center; }
}

/* ---------- Course: the two opening tiles side by side in the 860 slab ---------- */
@container sg-slab (min-width:700px) and (max-width:1099.98px){ .ff-duo--a{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; } }

/* ---------- Corrections: the policy in the window slab, the record and the appeals in a full one ---------- */
@container sg-slab (min-width:900px){
  .ff-corr{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); grid-template-rows:auto; }
  .ff-corr__record{ grid-column:1; grid-row:1; }
  .ff-corr__appeals{ grid-column:2; grid-row:1; }
}

/* ---------- 404: a window slab standing across the lake, the stakes in the open beside it ---------- */
@media (min-width:900px){ .ff-lost{ --lw:720px; --pad-slab:56px; width:min(var(--lw), 100%); margin-left:clamp(0px, min(23.5%, calc(100% - var(--lw))), 320px); margin-right:auto; } }
@media (min-width:1300px){ .ff-lost{ --lw:700px; } }


/* About: the portrait stays 48px or more from the header's type (brand rule: Frank is never near type) */
@media (min-width:900px){ [data-page="about"] .ff-main--inner{ padding-top:40px; } }

/* the Rulings key at phone width: the key caps keep their size (44px caps, obsidian slot) but stop at 220px instead of running the whole tile, so the one green cap is 2.5% of a 375 screen (the palette gate measured 3.6% with it full width) */
@container (max-width:419.98px){ .ff-key__item > dt{ justify-self:start; width:min(100%, 220px); } }

/* ======================================================================================================================
   ROUND 3: LENS WINDOWS. An empty pane of clear glass beside the text slab, placed from the scene's own geometry so a real object (trophy, flag, stake, board, the ball) sits
   half behind a pane edge: the kit's deepest lens band (64px, no text in it, so the text guard never trims it) bends the object, and the object shows through almost unblurred.
   No words, aria-hidden. Tint .04, blur .8px (also in the band), saturation 1.1: it is a window, not a veil, and nothing is read through it.
   Position (round 6): site.js places every window from the scene's own geometry at the CURRENT viewport (frame fractions in data-win, the object's box in data-obj), hides it where it cannot sit on its object, and
   toolsgate-lens-anchor.mjs checks that over a matrix of sizes. Only the shapes, the tint and the lens gain live here.
   ====================================================================================================================== */
.ff-lens{ position:absolute; z-index:0; pointer-events:none; padding:0; display:none;
  --slab:rgba(255,255,255,.04); --tile:rgba(255,255,255,.04); --blur:.8px; --sat:1.1; --lens-gain:2.8; --lq-sheen:linear-gradient(118deg, rgba(255,255,255,.20), rgba(255,255,255,0) 38%);
  left:0; top:0; width:200px; height:400px; }   /* site.js sets left, top, width and height from the scene (data-win); the ball window is placed by the hero's own rules below */
.ff-lens[data-win]{ position:fixed; }   /* round 7: pinned to the fixed scene, so a pane stays on its object for the whole scroll (site.js sets left, top, width, height in viewport pixels) */
.ff-lens[data-win], .ff-lens[data-hero]{ opacity:1; transition:opacity .18s ease; }
.ff-lens[data-win]:not([data-anchored="1"]), .ff-lens[data-hero]:not([data-anchored="1"]){ visibility:hidden; opacity:0; transition:opacity .18s ease, visibility 0s linear .18s; }   /* no JS, not on its object at this size, or a slab / the header is passing over it: no box (it fades) */
.ff-lens > .sg-lens-ring{ -webkit-backdrop-filter:var(--lens-url,) blur(.8px) saturate(1.1); backdrop-filter:var(--lens-url,) blur(.8px) saturate(1.1); }
@media (min-width:900px){ .ff-lens{ display:block; } }
/* hidden wherever the glass is solid */
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more), (forced-colors:active){ .ff-lens{ display:none !important; } }
.ff-main > .ff-section .ff-wrap > .sg-slab:not(.ff-lens), .ff-footer .sg-slab{ z-index:1; }
/* the ball: a pane across its right half and the floor under it */
.ff-lens--ball{ --sw:max(100cqw, calc(var(--hh) * 16 / 9)); --ox:calc((var(--sw) - 100cqw) * -.2); z-index:1;
  left:calc(var(--ball-cx) * var(--sw) + var(--ox) + .12 * var(--ball-r) * var(--sw)); width:calc(1.0 * var(--ball-r) * var(--sw));
  top:calc(clamp(0px, calc(108px - (var(--ball-cy) * 9 / 16 - var(--ball-r)) * var(--sw)), 72px) + var(--ball-cy) * var(--sw) * 9 / 16 - .62 * var(--ball-r) * var(--sw)); height:calc(1.6 * var(--ball-r) * var(--sw)); }
@media (max-width:899.98px){ .ff-lens--ball{ display:none; } }
@media (min-width:900px) and (max-width:1099.98px){   /* the square crop: ball centre at 76% of the width, radius 23.1% */
  .ff-lens--ball{ left:calc(76cqw - 3cqw); width:calc(23.1cqw * 1.1); top:calc(24px + 68px + 8px + 30cqw - 14.3cqw); height:calc(1.6 * 23.1cqw); }
}
/* below 1300 the slabs are narrower and the scene sits at the page's second crop, so the windows follow it (calibrated at 1040x800 with the search tool) */
@media (min-width:900px) and (max-width:1299.98px){ .ff-lost{ --lw:560px; margin-left:0; } }

/* the chip sits clear of the H1's line box (the pixel pass measures the line box, and a 12px gap put the chip's top 8px inside it) */
.ff-pagehead__row{ row-gap:28px; }


/* ======================================================================================================================
   ROUND 4: PHONES. Below 900 the kit lens is off, so a CSS-only window stands in for it: a pane of clear glass over a magnified copy of the page's own scene crop (the same file the fixed layer uses),
   a second, stronger magnification in the bezel ring, the kit's lit rim and a soft inner glow. No words, no script, no per-frame cost.
   ====================================================================================================================== */
.ff-lensm{ display:none; }
@media (max-width:899.98px){
  .ff-page{ --Sm:max(100vw, calc(100svh * .5625)); }
  .ff-lensm{ display:block; container-type:size; position:relative; isolation:isolate; overflow:hidden; padding:0; height:clamp(190px, 26svh, 300px); border-radius:var(--r-slab); background:none; box-shadow:var(--lq-float), var(--lq-edges);
    --mag:1.16; --bw:calc(var(--Sm) * var(--mag)); --bw2:calc(var(--bw) * 1.22); }
  .ff-lensm__img{ position:absolute; left:clamp(calc(100cqw - var(--bw)), calc(50cqw - var(--ox) * var(--bw)), 0px); top:clamp(calc(100cqh - var(--bw) * 1.7778), calc(50cqh - var(--oy) * var(--bw) * 1.7778), 0px); width:var(--bw); height:calc(var(--bw) * 1.7778); background:var(--m) center / 100% 100% no-repeat; filter:saturate(1.1) contrast(1.04); }
  .ff-lensm__ring{ position:absolute; inset:0; z-index:1; padding:16px; border-radius:inherit; pointer-events:none; filter:saturate(1.2);
    background:var(--m) no-repeat; background-size:var(--bw2) calc(var(--bw2) * 1.7778); background-position:clamp(calc(100cqw - var(--bw2)), calc(50cqw - var(--ox) * var(--bw2)), 0px) clamp(calc(100cqh - var(--bw2) * 1.7778), calc(50cqh - var(--oy) * var(--bw2) * 1.7778), 0px);
    -webkit-mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite:xor; mask:linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0); }
  .ff-lensm::after{ content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
    box-shadow:inset 0 0 0 1px rgb(255 255 255 / .55), inset 0 0 0 16px rgb(255 255 255 / .06), inset 0 0 28px 4px rgb(255 255 255 / .34), inset 0 -16px 24px -14px rgb(40 50 70 / .26); }
  .ff-lensm::before{ z-index:3; }
  .ff-lensm--rulings{ --ox:.34; --oy:.30; } .ff-lensm--course{ --ox:.52; --oy:.34; } .ff-lensm--corr{ --ox:.55; --oy:.40; } .ff-lensm--oob{ --ox:.80; --oy:.44; } .ff-lensm--hall{ --ox:.62; --oy:.46; }
  /* the Home ball: a round lens on its lower-right rim, magnifying the square crop 1.45x (a magnifying glass over the ball) */
  .ff-lensm--ball{ position:absolute; z-index:2; width:calc(.44 * var(--ff-band)); height:calc(.44 * var(--ff-band)); border-radius:50%; --mag:1.45;
    left:calc(50cqw + .27 * var(--ff-band) - .22 * var(--ff-band)); top:calc(var(--ff-bandtop) + .67 * var(--ff-band) - .22 * var(--ff-band)); --ox:.77; --oy:.67; --bw:calc(var(--ff-band) * 1.45); --bw2:calc(var(--bw) * 1.18); }
  .ff-lensm--ball .ff-lensm__img{ left:clamp(calc(100cqw - var(--bw)), calc(50cqw - var(--ox) * var(--bw)), 0px); top:clamp(calc(100cqh - var(--bw)), calc(50cqh - var(--oy) * var(--bw)), 0px); height:var(--bw); }
  .ff-lensm--ball .ff-lensm__ring{ padding:10px; background-size:var(--bw2) var(--bw2); background-position:clamp(calc(100cqw - var(--bw2)), calc(50cqw - var(--ox) * var(--bw2)), 0px) clamp(calc(100cqh - var(--bw2)), calc(50cqh - var(--oy) * var(--bw2)), 0px); }
  /* round 5: Corrections and 404 windows re-cropped. The crop is sized from the tile's own width (--z x the tile), so it shows the same part of the scene at 360, 390, 768; the bezel ring uses the SAME registration as the inner image (no second magnification, so no seam),
     and the tile has a fixed 16:10 shape (capped at 560px wide on tablets) so a portrait scene is never cut to a thin band. Corrections: the desk and chair in the glass hut with its prismatic edge; 404: the tips of the two nearest crystal stakes. */
  .ff-lensm--corr, .ff-lensm--oob{ height:auto; aspect-ratio:16 / 10; width:min(100%, 560px); margin-inline:auto; --bw:calc(100cqw * var(--z)); --bw2:var(--bw); }
  .ff-lensm--corr{ --z:1.7; --ox:.38; --oy:.66; }
  .ff-lensm--oob{ --z:1.4; --ox:.74; --oy:.17; }
  .ff-lensm--corr .ff-lensm__ring, .ff-lensm--oob .ff-lensm__ring{ filter:saturate(1.35) brightness(1.04); }
  /* the section rhythm: scene gaps where the art breathes between panels */
  .ff-section{ --ff-section:72px; }
  /* card rhythm (round 4): not a stack of equal slabs. Cards alternate their inset, every second one drops a scene gap below the one before it (the art shows through), and the page-head tile stays the lead */
  .ff-cards, .ff-bento, .ff-duo{ gap:var(--gap); }
  .ff-cards > .ff-card:nth-child(odd), .ff-bento > .sg-tile:nth-child(odd), .ff-duo > :nth-child(odd){ margin-right:18px; }
  .ff-cards > .ff-card:nth-child(even), .ff-bento > .sg-tile:nth-child(even), .ff-duo > :nth-child(even){ margin-left:18px; }
  .ff-cards > .ff-card:nth-child(2), .ff-cards > .ff-card:nth-child(4), .ff-bento > .sg-tile:nth-child(3n+2), .ff-duo > :nth-child(2){ margin-top:44px; }
  .sg-slab > .ff-lensm + .sg-tile, .sg-slab > .ff-key + .ff-cards{ margin-top:40px; }
  [data-page="rulings"] .ff-cards > .ff-card:nth-child(even){ margin-top:44px; }
}

/* ---------- ROUND 4: a designed set, not a template: each window has its own shape, size and orientation, always over a real object ---------- */
@media (min-width:900px){
  /* Home: a round lens on the ball's right rim */
  .ff-lens--ball{ --d:calc(1.15 * var(--ball-r) * var(--sw)); width:var(--d); height:var(--d); border-radius:calc(var(--d) / 2);
    left:calc(var(--ball-cx) * var(--sw) + var(--ox) + .02 * var(--ball-r) * var(--sw));
    top:calc(clamp(0px, calc(108px - (var(--ball-cy) * 9 / 16 - var(--ball-r)) * var(--sw)), 72px) + var(--ball-cy) * var(--sw) * 9 / 16 + .12 * var(--ball-r) * var(--sw) - var(--d) / 2); }
  /* Rulings: a wide letterbox across two trophies at their waist */
  .ff-lens--rulings{ --lens-gain:4.2; border-radius:22px; }
  /* Course: a tall slit around the flag pole and the cup ring */
  .ff-lens--course{ --lens-gain:5; border-radius:calc(var(--w) / 2); }
  /* Corrections: an arched doorway (half-round top, square-cornered foot), over the hut's glass wall; Course is a narrow capsule, so the two no longer rhyme */
  .ff-lens--corr{ border-radius:calc(var(--w) / 2) calc(var(--w) / 2) 16px 16px; }
  /* 404: tilted, where the stakes line up */
  .ff-lens--oob{ transform:rotate(-5deg); border-radius:28px; --lens-gain:4.5; }
}

@media (max-width:1299.98px){ .ff-lens--course{ --lens-gain:7.5; } }


/* ======================================================================================================================
   ROUND 8: FRANK AT THE 19TH HOLE (BRIEF-golf-worlds 7, F1). The fixed layer behind /about stays the Frank-free ff-19th crop. Frank, his club and his floor reflection are a feathered patch (tools/make-frank.mjs, graded with the
   same grade as ff-19th, so the same pixels sit under it at rest) laid in a stage at the top of the document, so he leaves with the page and no slab or footer ever passes over him. The patch is placed from the scene's own geometry:
   a frame point lands at X = fx * S - offx, Y = fy * Sh - (Sh - H) / 2 (S the cover-scaled width of the 1.768 frame). The fixed scene takes the same --offx as a LENGTH object-position, so the two cannot disagree.
   Desktop: offx is the page's usual share of the overscan, limited so the patch keeps 32px from the left edge; the slab starts 40px right of Frank's club. Phones: the -m crop (raw frame x 360 to 1215), centred on him;
   the slab starts below his feet. Frank is full colour and never under glass; the only green on the page apart from the stamp is his faint visor.
   ====================================================================================================================== */
/* FRANK-VARS (written by tools/make-frank.mjs from design/scenes-final/frank-19th.json: do not edit) */
.ff-page[data-page="about"]{ --fx:0.22891; --fy:0.25138; --fw:0.14102; --fxm:0.29861; --fwm:0.44335; --fr:0.358; }
/* /FRANK-VARS */
.ff-page[data-page="about"]{ --Sv:max(100vw, calc(100svh * 1.768)); --Rv:calc(var(--Sv) - 100vw); --fp:1; --wl:calc((100vw - min(1360px, 100vw - 2 * var(--gutter))) / 2);
  --offx:min(calc(var(--Rv) * var(--fp)), calc(var(--fx) * var(--Sv) - 32px)); }
@media (max-width:1299.98px){ .ff-page[data-page="about"]{ --fp:.48; } }
.ff-frankstage{ position:absolute; left:0; top:0; width:100%; height:100svh; overflow:clip; pointer-events:none; z-index:0; }   /* clips the scaled layer (phones): a scaled stage must not make the page scroll sideways */
.ff-frankscale{ position:absolute; inset:0; container-type:size; transform-origin:50% 0; }
.ff-frankstage[hidden]{ display:none; }
.ff-frankstage[hidden] ~ .ff-wrap .ff-aboutslab{ margin:0; }
.ff-frank{ position:absolute; display:block; max-width:none; height:auto; --S:max(100cqw, calc(100cqh * 1.768)); --Sh:calc(var(--S) / 1.768);
  left:calc(var(--fx) * var(--S) - var(--offx)); top:calc(var(--fy) * var(--Sh) - (var(--Sh) - 100cqh) / 2); width:calc(var(--fw) * var(--S)); }
@media (min-width:900px){
  .ff-page[data-page="about"] .sg-scene__img{ object-position:calc(-1 * var(--offx)) 50%; }
  .ff-aboutslab{ margin-left:max(0px, calc(var(--fr) * var(--Sv) - var(--offx) + 40px - var(--wl))); }
}
@media (max-width:899.98px){
  .ff-page[data-page="about"]{ --Hm:max(100svh, calc(100vw / .5625)); --feet:calc((.715 * var(--Hm) - (var(--Hm) - 100svh) / 2) * var(--z, 1)); }
  .ff-page[data-page="about"] .sg-scene__img{ transform:scale(var(--z, 1)); transform-origin:50% 0; }   /* the scene and the stage scale together about the top centre (site.js sets --z) */
  .ff-frankscale{ transform:scale(var(--z, 1)); }
  .ff-frank{ --W:max(100cqw, calc(100cqh * .5625)); --H:calc(var(--W) / .5625);
    left:calc(var(--fxm) * var(--W) - (var(--W) - 100cqw) / 2); top:calc(var(--fy) * var(--H) - (var(--H) - 100cqh) / 2); width:calc(var(--fwm) * var(--W)); }
  .ff-aboutslab{ margin-top:max(0px, calc(var(--feet) + 40px - var(--mt, 174px))); }   /* the slab starts 40px below his feet (--mt: where the section starts, set by site.js) */
}
@keyframes ff-frank-leave{ to{ opacity:0; } }
@supports (animation-timeline: scroll()){ .ff-frank{ animation:ff-frank-leave linear forwards; animation-timeline:scroll(root); animation-range:60px 460px; } }
@media (prefers-reduced-motion:reduce){ .ff-frank{ animation:none; } }