/* Hybridizing Dragon Fruit — brand read from the live site, 30 Aug 2026.
   Black ground, #FF7200 orange, white highlight. Archivo Black over Space Grotesk. */
/* HIS FONTS, SELF-HOSTED.
   They were loaded from Google Fonts, which means a third-party request on every
   page of a site whose whole advantage is being fast and clean — and if it fails,
   his chosen heavy face silently falls back to whatever the browser has. That is
   exactly what was happening in every screenshot I showed him: the container
   blocks fonts.googleapis.com, so he was judging a fallback, not Archivo Black.
   Subset to latin: 11 KB and 18 KB. Both are SIL Open Font License 1.1 — see
   src/assets/fonts/OFL.txt. */
@font-face{font-family:'Archivo Black';src:url('/assets/fonts/archivo-black.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --black:#000; --panel:#0B0B0B; --panel-2:#101010; --raised:#151515;
  --rule:#262626; --rule-2:#363636;
  --white:#fff; --grey-1:#B4B4B4; --grey-2:#8A8A8A; --grey-3:#6B6B6B;
  --orange:#FF7200; --orange-lift:#FF9440; --orange-dim:#1C1409;
  --display:'Archivo Black','Arial Black',Helvetica,sans-serif;
  --body:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5vw,72px); --max:1280px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;background:#000}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important} .hero-video,.motes,.scroll-hint,.bloom-canvas,.bloom-progress,.fruit-photo .wipe{display:none!important}}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--body);font-size:17px;font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.02em;text-wrap:balance;color:var(--orange)}
h1{font-size:clamp(2.5rem,6.2vw,4.2rem);line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(1.4rem,3vw,1.9rem)}
h3{font-size:1.1rem;color:var(--white)}
p{margin:0 0 14px}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-lift);text-decoration:underline}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;color:var(--orange-lift);background:var(--panel-2);padding:1px 5px;border-radius:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;background:var(--orange);color:#000;padding:12px 18px;font-weight:700;z-index:99}
.skip:focus{left:12px;top:12px}

header.site{border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px var(--pad);max-width:var(--max);margin:0 auto}
@media (max-width:560px){.nav{padding:10px var(--pad);gap:10px 18px}}
/* HIS LOGO, IN THE HEADER, AT A SIZE WHERE IT READS.
   Jay, three times: "my logo beed s to be on the landing page too, dont forget
   branding like you did before" and then "My logo is the cactus letters, my
   business header is Hybridizing Dragon Fruit."

   I removed it and substituted type because it went muddy at 46px, and wrote
   that judgement into a comment instead of telling him I was overriding him.
   The mud was real and it was mine to fix: the old mark was a wide crop of the
   whole desert scene, so the letters were a fraction of an already small image.
   Cropped tight to the letters off the 3840x2160 original and rendered at 62px
   — exported at 3x so it is sharp on a retina screen — they read cleanly.

   The Seal of Authenticity is NOT here. It certifies his hybrids. */
.nav a.brand{display:flex;align-items:center;gap:14px;font-family:var(--display);
  color:var(--white);letter-spacing:-.01em;line-height:1.05}
.nav a.brand img{height:62px;width:auto;flex-shrink:0;border-radius:3px}
/* "Hybridizing Dragon Fruit" breaks in TWO lines, never three — 13ch is wide
   enough to hold "Dragon Fruit" together on the second. */
/* WIDE AND ORANGE. His instruction, 1 Sep 2026: "Orange letters on my fucking
   name / not white" and "wide and orange, my fucking brand!" — so it runs on ONE
   line, letterspaced, in the brand orange. It was white and wrapped into a
   narrow two-line block; both were wrong. */
/* IT IS A TITLE, SO IT IS SIZED AS ONE. His note, 1 Sep 2026: "the title
   letter are not bif enough, they dont seem like a title as they are the same
   text size as navigation" — and he was exactly right: it was .88rem on a phone
   and the nav links are .88rem. Roughly double the nav now at every width. */
.brand-full{font-family:var(--display);font-size:2.05rem;color:var(--orange);
  white-space:nowrap;letter-spacing:-.02em;line-height:1.02}
@media (max-width:560px){
  .nav a.brand img{height:52px}
  /* On a phone "Hybridizing Dragon Fruit" cannot sit on one line at title size
     beside the logo — 390px will not hold it. So it takes two lines and stays
     BIG, rather than shrinking to nav size to stay on one. */
  .brand-full{font-family:var(--display);font-size:1.42rem;color:var(--orange);
    white-space:normal;max-width:13ch;line-height:1.06;letter-spacing:-.02em}
}
.brand:hover{text-decoration:none;color:var(--orange)}
.nav ul{display:flex;gap:clamp(12px,2vw,28px);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{color:var(--grey-1);font-size:.88rem;font-weight:600;padding:6px 0;display:inline-block}
.nav a:hover{color:var(--white);text-decoration:none}
main{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
main>h1,main>.answer,main>.sub,main>p{max-width:62ch}
footer.site{margin-top:80px;padding:34px var(--pad);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 32px;color:var(--grey-3);font-size:.8rem;max-width:var(--max);margin-inline:auto}

.crumbs{padding:16px 0 0;font-size:.74rem;letter-spacing:.06em;color:var(--grey-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li::after{content:"/";margin-left:8px;color:var(--rule-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--grey-3)}
.label{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.answer{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.35;color:var(--white);margin:18px 0;letter-spacing:-.01em}
.sub{color:var(--grey-1);max-width:60ch;font-weight:500}
.note,.pending{font-size:.88rem;color:var(--grey-2)}
.pending{border-left:2px solid var(--rule-2);padding-left:14px}
.todo{color:var(--grey-3)}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 14px}
.chip{font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:20px}
.chip-brand{background:var(--orange);color:#000}
.chip-stock{border:1px solid var(--rule-2);color:var(--white)}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:15px 30px;background:var(--orange);color:#000;font-family:var(--body);font-weight:700;font-size:1.02rem;letter-spacing:.01em;border:0;border-radius:2px;cursor:pointer}
.cta:hover{background:var(--orange-lift);color:#000;text-decoration:none}
.cta-ghost{background:transparent;color:var(--white);border:1px solid var(--rule-2)}
.cta-ghost:hover{background:var(--panel-2);color:var(--white);border-color:var(--orange)}

.buy{background:var(--panel-2);border:1px solid var(--rule-2);border-radius:4px;padding:24px;max-width:560px;margin:24px 0}
.buy fieldset{border:0;margin:0;padding:0}
.sizes{display:flex;gap:11px;flex-wrap:wrap;margin-top:12px}
.sizes input{position:absolute;opacity:0;width:1px;height:1px}
.sizes label{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:12px 20px;min-height:60px;flex:1 1 150px;cursor:pointer;background:var(--black);border:1.5px solid var(--rule-2);border-radius:2px}
.sizes label b{color:var(--white)}
.sizes input:checked+label{border-color:var(--orange);background:var(--orange-dim)}
.sizes input:focus-visible+label{outline:2px solid var(--orange);outline-offset:2px}
.terms{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 0;padding-top:13px;border-top:1px solid var(--rule);font-size:.74rem;color:var(--grey-3)}
.price{font-size:1.2rem;font-weight:700;color:var(--white)}

.licence{margin-top:18px;padding:16px 18px;background:var(--black);border:1px solid var(--orange);border-radius:3px}
.licence h2{font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.licence p{font-size:.82rem;line-height:1.6;color:var(--grey-1)}
.licence strong{color:var(--white)}
.ack{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--rule)}
.ack input{width:20px;height:20px;margin:0;accent-color:var(--orange);flex-shrink:0}
.ack label{font-size:.82rem;color:var(--white);cursor:pointer}
.ack label span{display:block;color:var(--grey-3);font-size:.74rem;margin-top:2px}
.agent-note{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--rule);font-size:.78rem;color:var(--grey-2)}

.lede{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(24px,4vw,56px);align-items:start;padding-top:18px}
@media (max-width:900px){.lede{grid-template-columns:1fr}.lede figure{order:-1}}
figure{margin:0}
figure img{width:100%;border:1px solid var(--rule);border-radius:3px;background:var(--panel)}
figcaption{font-size:.72rem;color:var(--grey-3);padding-top:8px}

.record{margin:56px 0 0;border:1px solid var(--rule-2);border-radius:4px;overflow:hidden;background:var(--panel)}
.record-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 22px;background:var(--raised);border-bottom:1px solid var(--rule-2)}
.record-h p{margin:0;font-size:.74rem;color:var(--grey-3)}
.record dl,.parents dl,.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule);margin:0}
.record div,.parents div,.contact div{background:var(--panel);padding:18px 22px;display:flex;flex-direction:column;gap:6px}
dt{font-size:.65rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-3)}
dd{margin:0;font-variant-numeric:tabular-nums;color:var(--white)}
dd.hero{color:var(--orange);font-weight:600}
/* The parentage band spans the whole record grid. */
.record .cross{grid-column:1/-1}
.record .cross dd{font-family:var(--display);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.3;color:var(--orange);letter-spacing:-.01em}
.record .cross dd a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
.record .cross dd a:hover{color:var(--orange-lift)}
/* Inline here, so the grandparent cross reads as belonging to the parent it follows. */
.record .cross .gp{display:inline;margin:0;font-size:.62em}
/* Grandparent cross, shown one generation deep inside the parentage line. */
.gp{display:block;margin-top:4px;color:var(--grey-3);font-weight:500;font-size:.82rem;font-style:italic}

/* Variety photography — cut fruit leads, whole fruit tucks into the corner. */
figure.photos{position:relative;margin:0}
/* Cutouts sit on the black ground directly — no frame, no panel behind them. */
figure.photos img{border:0;background:none;border-radius:0}
figure.photos .p-cut{display:block;width:100%;height:auto}
figure.photos .p-whole{position:absolute;right:-2%;bottom:8%;width:38%;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
figure.photos figcaption{margin-top:10px;font-size:.8rem;color:var(--grey-3)}
@media (max-width:640px){figure.photos .p-whole{width:34%;right:0;bottom:2%}}

/* Breeder's ratings. The number is the content; the bar is decoration.
   A single thick bar is far easier to read at a glance than five small stars. */
.ratings{margin:34px 0 0;padding:24px 26px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel)}
.ratings h2{margin:0 0 16px}
.ratings ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ratings li{display:grid;grid-template-columns:minmax(120px,auto) minmax(96px,auto) 1fr;gap:14px;align-items:center}
.r-k{font-weight:700;font-size:1.02rem}
.r-v{font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.r-max{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-3);margin-left:6px}
.r-bar{display:block;height:14px;border-radius:7px;background:var(--raised);overflow:hidden}
.r-bar i{display:block;height:100%;background:var(--orange);border-radius:7px}
.ratings .note{margin:16px 0 0;font-size:.84rem;color:var(--grey-3);max-width:60ch}
@media (max-width:560px){
  .ratings li{grid-template-columns:1fr auto;grid-template-areas:"k v" "b b";gap:6px 12px}
  .r-k{grid-area:k}.r-v{grid-area:v}.r-bar{grid-area:b}
}

/* Full siblings — varieties out of the same cross. */
.siblings{margin:34px 0 0;padding:24px 26px;border:1px solid var(--rule-2);border-left:3px solid var(--orange);border-radius:4px;background:var(--panel)}
.siblings h2{margin:0 0 10px}
.siblings p{margin:0 0 14px;max-width:62ch}
.siblings ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.siblings li{padding:12px 14px;background:var(--raised);border-radius:3px;line-height:1.5}
.siblings li a{font-weight:700;color:var(--orange)}
.siblings .note{margin:14px 0 0;font-size:.84rem;color:var(--grey-3)}
.parents dl,.contact{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));border:1px solid var(--rule);border-radius:4px;overflow:hidden;margin:14px 0}

.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:4px;margin:22px 0}

/* Long unbreakable strings and 400% zoom.
   Jay reads this site with macOS Zoom, so 320px is a real reading width, not a
   phone edge case. A token with no break opportunity does not overflow its own
   paragraph quietly — it pushes the entire page sideways, and reading then means
   scrolling left and right for every line.
   Measured across all 114 built pages, ten of them did this. Three causes, one
   defect: support@hybridizingdragonfruit.com (34 chars) in the legal contact
   line, /videos/v/p8gg6k7zn76n9bw6wj6b8p2nem5et4 (40 chars) in the hybridizing
   guides, and a long word in the troubleshooting h1.
   break-word, not anywhere: it breaks a word only when it would otherwise
   overflow, so ordinary prose keeps measuring exactly as it does now. code and
   links get anywhere, because a path or URL should break wherever it must. */
body{overflow-wrap:break-word}
code,a,.legal{overflow-wrap:anywhere}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:.88rem}
caption{text-align:left;padding:0 0 10px;color:var(--grey-3);font-size:.8rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-3);background:var(--raised);font-weight:600;position:sticky;top:0}
tbody th{font-weight:700}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tr.excl th a{color:var(--orange)}
tr:hover{background:var(--panel-2)}

.cards,.stages{list-style:none;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.cards a,.stages a{display:block;height:100%;padding:22px;background:var(--panel);border:1px solid var(--rule);border-radius:4px;color:var(--white)}
.cards a:hover,.stages a:hover{border-color:var(--orange);background:var(--panel-2);text-decoration:none}
.cards h2,.stages h2{font-size:1.15rem;margin:6px 0 8px}
.cards p,.stages p{font-size:.9rem;color:var(--grey-1);font-weight:500;margin:0}
.n{font-size:.72rem;letter-spacing:.14em;color:var(--orange);font-weight:600}
.related,.toc ul{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.related li,.toc li{background:var(--panel);padding:0}
.related a,.toc li{display:block;padding:14px 18px;color:var(--white);font-weight:500;font-size:.93rem}
.related a:hover{background:var(--panel-2);color:var(--orange);text-decoration:none}
.related h2,.toc h2{margin:26px 0 0}
.pager{display:flex;justify-content:space-between;gap:14px;margin:34px 0;padding-top:20px;border-top:1px solid var(--rule);font-weight:600}
.cta-box{margin:34px 0;padding:26px;background:linear-gradient(140deg,var(--orange-dim),var(--panel));border:1px solid var(--rule-2);border-radius:4px}
.cta-box h2{font-size:1.2rem;margin-bottom:8px}
.facts ul{margin:14px 0;padding-left:20px;display:flex;flex-direction:column;gap:9px;color:var(--grey-1)}
.clause{margin:34px 0;padding-top:20px;border-top:1px solid var(--rule);scroll-margin-top:90px}

/* ---------------------------------------------------------------- landing */
/* The landing page is composed like a printed cover story: full-bleed
   photography against contained, measured type, and nothing moving. The shell
   gives every other page a padded 1280px column; here the photographs must own
   the whole viewport width, so main.landing drops that padding and .wrap opts
   each run of text back into the column. No 100vw tricks — 100vw includes the
   scrollbar and is exactly how a page starts scrolling sideways. */
main.landing{max-width:none;padding:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.kicker{font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--orange);margin:0 0 14px}
/* Landing section headings: large, white, tight — the orange is spent on
   kickers, numbers and the h1 accent, not on every heading. */
main.landing h2{font-size:clamp(1.9rem,5.5vw,3rem);color:var(--white);letter-spacing:-.03em;line-height:1.05}

/* ── the cover ──
   The photograph is the first thing on the page, edge to edge, before a single
   word of copy: on a phone the full 3:4 frame of his violet Stenopterus, on a
   wide screen a cinematic band of the magenta one. The caption sits UNDER the
   photograph on solid black, like a plate caption in a book — nothing is ever
   printed over the petals. */
.hero{padding:0}
.hero-figure{margin:0}
/* The still <picture> defines the hero's layout. When src/video/hero.mp4
   exists, the <video> sits absolutely OVER it — same box, zero layout shift
   whether the clip exists, loads, or is hidden by prefers-reduced-motion. */
.hero-media{position:relative;overflow:hidden;background:var(--black)}
.hero-figure img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroFade 2s ease-out both}
@media (min-width:921px){.hero-figure img{aspect-ratio:12/5;object-position:50% 42%}.hero-video{object-position:50% 42%}}
.hero-figure figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;
  max-width:var(--max);margin-inline:auto;padding:12px var(--pad) 0;
  font-size:.8rem;letter-spacing:.02em;color:var(--grey-1)}
/* The credit inherits the caption color on purpose: pages.test.mjs measures the
   caption's contrast by making the figcaption's color transparent, and a child
   with its own color would be measured as background. */

.hero-title{padding-top:clamp(36px,6vw,76px)}
.hero .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-2);margin:0 0 20px}
.hero h1{font-size:clamp(2.75rem,10.5vw,6.1rem);line-height:.95;letter-spacing:-.04em;color:var(--white)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-cols{display:grid;gap:24px}
@media (min-width:921px){.hero-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,5vw,80px);align-items:end}}
.hero .pitch{font-size:clamp(1.08rem,1.6vw,1.28rem);font-weight:500;color:var(--grey-1);max-width:44ch;margin:0 0 26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* The numbers: one hairline, four figures, no boxes. */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;margin-top:clamp(44px,7vw,72px);padding-top:clamp(20px,3vw,30px);border-top:1px solid var(--rule)}
@media (min-width:721px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--orange);line-height:1}
.stats span{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-3)}

/* ── the night garden ──
   His own sentence from the pollination guide, set as display type, then a
   full-bleed triptych of one-night blooms at a shared 4:5 plate size. The 3px
   gaps read as film-strip rules, not card borders. */
.night{margin-top:clamp(72px,11vw,140px)}
.nightline{font-family:var(--display);font-size:clamp(1.6rem,5vw,3.2rem);line-height:1.1;letter-spacing:-.02em;color:var(--white);max-width:24ch;margin:0;text-wrap:balance}
.nightsrc{margin:14px 0 0;font-size:.86rem;color:var(--grey-2)}
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:clamp(26px,4vw,48px);overflow:hidden}
.triptych img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.platecap{margin:12px 0 0;font-size:.8rem;color:var(--grey-3)}

/* ── the fruit ── */
.fruitband{margin-top:clamp(72px,11vw,150px)}
.fruit-grid{display:grid;gap:clamp(26px,4vw,64px)}
@media (min-width:921px){.fruit-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.fruit-copy h2{margin:0 0 18px}
.fruit-copy .sub{margin:0 0 12px}
.fruit-photo{margin:0}
.fruit-photo img{width:100%;height:auto;display:block;border-radius:3px}

/* The four Exclusive Hybrids, as a specimen list: number, stock, a big name,
   his tasting line, and the Seal of Authenticity — which appears here because
   these ARE the Exclusive Hybrids it designates, and nowhere else. */
.excl{list-style:none;margin:clamp(32px,5vw,56px) 0 0;padding:0;border-top:1px solid var(--rule-2)}
.excl li{border-bottom:1px solid var(--rule-2)}
.excl a{display:flex;align-items:center;gap:clamp(14px,3vw,30px);padding:clamp(18px,3vw,28px) 0;color:inherit}
.excl a:hover{text-decoration:none}
.excl .x-n{font-family:var(--display);font-size:clamp(.85rem,1.4vw,1rem);color:var(--grey-3);align-self:flex-start;padding-top:8px}
.excl .x-mid{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.excl .x-stock{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.excl .x-name{font-family:var(--display);font-size:clamp(1.55rem,4.6vw,2.5rem);line-height:1.02;letter-spacing:-.02em;color:var(--white)}
.excl a:hover .x-name{color:var(--orange)}
.excl .x-taste{color:var(--grey-1);font-size:.95rem;max-width:62ch;line-height:1.5}
.excl .x-seal{width:clamp(44px,6vw,62px);height:auto;flex-shrink:0;opacity:.92}
.excl-note{margin:16px 0 0;font-size:.84rem;color:var(--grey-1);max-width:70ch}
/* The Exclusive Hybrid designation on /varieties. Not a footnote: the non-propagation clause binds a purchaser on the basis that the material was "clearly designated at the point of sale", so it is a panel, in the same orange the licence block on a variety page uses, and its text is grey-1 (8.6:1 on black) rather than grey-3 (3.9:1, below AA and too dim to read with Zoom). */
.excl-designation{display:flex;gap:14px;align-items:flex-start;margin:16px 0 0;padding:16px 18px;background:var(--black);border:1px solid var(--orange);border-radius:3px;font-size:.9rem;line-height:1.6;color:var(--white);max-width:70ch}
.excl-designation .x-seal{flex:none;margin:2px 0 0}
.excl-designation b{color:var(--orange)}

/* ── the knowledge ── */
.know{margin-top:clamp(72px,11vw,150px)}
.know-grid{display:grid;gap:clamp(28px,5vw,72px)}
@media (min-width:921px){.know-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.know-photo{margin:0}
.know-photo img{width:100%;height:auto;border-radius:3px;display:block}
.know-copy h2{margin:0 0 14px}
.stagelist{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--rule)}
.stagelist li{border-bottom:1px solid var(--rule)}
.stagelist a{display:flex;align-items:baseline;gap:16px;padding:13px 0;color:inherit}
.stagelist a:hover{text-decoration:none}
.stagelist .st-n{font-family:var(--display);color:var(--orange);font-size:.9rem}
.stagelist .st-t{font-weight:700;color:var(--white);font-size:1.08rem}
.stagelist a:hover .st-t{color:var(--orange)}
.know-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ── the sign-off ── the wordmark, held back until the end so it lands as a
   signature rather than floating over the cover. */
.closing{margin-top:clamp(80px,12vw,160px);text-align:center}
.closing-logo{width:min(520px,86%);height:auto;margin:0 auto;border-radius:4px}
.closing-line{margin:28px 0 0;font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.4rem);color:var(--white);letter-spacing:-.02em}
.closing-place{margin:12px 0 0;font-size:.95rem;color:var(--grey-1)}
.closing-links{margin:8px 0 0;font-size:.92rem;color:var(--grey-3)}

/* guided tour — CSS only, no JavaScript anywhere. On the landing page it sits
   as an open section like the others — kicker, big heading, hairlines — rather
   than a boxed widget. */
.tour{margin:clamp(72px,11vw,150px) 0 0;padding:clamp(28px,4vw,40px) 0 0;background:none;border:0;border-top:1px solid var(--rule);border-radius:0;scroll-margin-top:90px}
.tour>h2{font-size:clamp(1.9rem,5.5vw,3rem)}
.tour .lead{color:var(--grey-1);max-width:52ch;margin:12px 0 30px}
.tour fieldset{border:0;margin:0 0 22px;padding:0}
.tour legend{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);padding:0 0 12px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}
.tour input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.opts label{display:flex;flex-direction:column;gap:5px;padding:16px 18px;min-height:60px;cursor:pointer;background:var(--black);border:2px solid var(--rule-2);border-radius:3px;color:var(--white);font-weight:700;font-size:1rem}
.opts label small{font-weight:500;font-size:.8rem;color:var(--grey-2);line-height:1.45}
.opts label:hover{border-color:var(--grey-2)}
.tour input:checked+label{border-color:var(--orange);background:var(--orange-dim)}
.tour input:focus-visible+label{outline:2px solid var(--orange);outline-offset:2px}
/* steps 2+ and the results stay hidden until the prior answer exists */
.step-2,.step-3,.step-4,.tour-result,.tour-tip{display:none}
.tour:has(.q1:checked) .step-2{display:block}
.tour:has(.q2:checked) .step-3{display:block}
.tour:has(.q3:checked) .step-4{display:block}
/* the result appears only once all three are answered, and only the one that matches Q1 */
.tour:has(#g-fruit:checked):has(#f-any:checked):has(.q2:checked):has(.q4:checked) .r-fruit-any,
.tour:has(#g-fruit:checked):has(#f-red:checked):has(.q2:checked):has(.q4:checked) .r-fruit-red,
.tour:has(#g-fruit:checked):has(#f-purple:checked):has(.q2:checked):has(.q4:checked) .r-fruit-purple,
.tour:has(#g-fruit:checked):has(#f-white:checked):has(.q2:checked):has(.q4:checked) .r-fruit-white,
.tour:has(#g-flavor:checked):has(#f-any:checked):has(.q2:checked):has(.q4:checked) .r-flavor-any,
.tour:has(#g-flavor:checked):has(#f-red:checked):has(.q2:checked):has(.q4:checked) .r-flavor-red,
.tour:has(#g-flavor:checked):has(#f-purple:checked):has(.q2:checked):has(.q4:checked) .r-flavor-purple,
.tour:has(#g-flavor:checked):has(#f-white:checked):has(.q2:checked):has(.q4:checked) .r-flavor-white,
.tour:has(#g-breed:checked):has(.q2:checked):has(.q3:checked):has(.q4:checked) .r-breed{display:block}
/* Q2 and Q4 toggle notes inside whichever result is showing */
.tour:has(#s-unsure:checked) .tour-result .t-unsure,
.tour:has(#s-ground:checked) .tour-result .t-ground,
.tour:has(#s-pot:checked) .tour-result .t-pot,
.tour:has(#c-cold:checked) .tour-result .t-cold,
.tour:has(#c-light:checked) .tour-result .t-cold{display:block}
.tour-result{margin-top:8px;padding:26px;background:var(--black);border:1px solid var(--orange);border-radius:4px}
.tour-result .label{color:var(--orange)}
.tour-result h3{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);color:var(--orange);margin:8px 0 10px;letter-spacing:-.02em}
.tour-result p{color:var(--grey-1);max-width:56ch}
.tour-result .why{color:var(--white)}
.tour-result .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.tour-tip{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);font-size:.88rem;color:var(--grey-2)}
.tour-noscript{margin-top:20px;font-size:.85rem;color:var(--grey-3)}

/* The Seal of Authenticity — the Exclusive Hybrid designation made visible.
   It appears only where the designation legally belongs: at the point of sale
   and on the acceptance page. Never decoratively. */
.licence{position:relative}
.seal{float:right;width:82px;height:auto;margin:0 0 10px 16px;shape-outside:circle()}
.seal-lg{display:block;float:none;width:clamp(110px,18vw,150px);margin:0 0 18px}
@media (max-width:420px){.seal{width:64px}}

.flesh-plate{width:100%;max-width:620px;margin:0 0 16px;opacity:.95}
.about-logo{width:100%;max-width:640px;border:1px solid var(--rule);border-radius:4px;margin:18px 0 26px}

.field{display:flex;flex-direction:column;gap:6px;margin:16px 0 0}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.field input{padding:13px 15px;min-height:48px;background:var(--black);border:2px solid var(--rule-2);border-radius:3px;color:var(--white);font-family:var(--body);font-size:1rem;font-weight:500}
.field input:focus-visible{border-color:var(--orange);outline:none}
.field .hint{font-size:.78rem;color:var(--grey-3)}
.buy.notify .field{margin-top:12px}
/* Waitlist form: label above, input and button on their own line. */
.buy.notify form{display:grid;gap:8px;margin-top:14px;max-width:420px}
.buy.notify form label{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.buy.notify form input{width:100%;min-height:50px;padding:12px 14px;background:var(--black);color:var(--white);border:1.5px solid var(--rule-2);border-radius:2px;font:inherit}
.buy.notify form input:focus-visible{border-color:var(--orange)}
.buy.notify form .cta{justify-self:start;margin-top:4px}

/* Honest caveat under a photograph the camera could not fully capture. */
figure.photos .cav{display:block;margin-top:6px;color:var(--grey-3);font-style:italic;max-width:52ch}

/* "Before you buy one" — shown when a variety will not set fruit alone. */
.pollen{margin:34px 0 0;padding:22px 26px;border:1px solid var(--orange);border-radius:4px;background:var(--orange-dim)}
.pollen h2{margin:0 0 10px}
.pollen p{margin:0 0 12px;max-width:64ch}
.pollen p:last-child{margin:0}
.pollen strong{color:var(--orange)}
.qual{font-family:var(--body);font-size:.78rem;color:var(--grey-2);white-space:nowrap}

/* A measurement that needs a caveat, shown under the record it qualifies. */
.note.measured{margin:14px 0 0;padding-left:14px;border-left:2px solid var(--rule-2);max-width:64ch}

/* "When to pick it" — the harvest-timing tradeoff. */
.ripeness{margin:34px 0 0;padding:24px 26px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel)}
.ripeness h2{margin:0 0 12px}
.ripeness p{margin:0 0 14px;max-width:64ch}
.ripeness strong{color:var(--orange)}
.ripeness ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ripeness li{padding:14px 16px;background:var(--raised);border-radius:3px;line-height:1.55;max-width:66ch}
.ripeness li strong{display:block;margin-bottom:2px}
.ripeness .note{margin:16px 0 0;font-size:.88rem;color:var(--grey-2)}

/* "What it has actually survived" — tested hardiness, both ends. */
.hardy{margin:34px 0 0;padding:24px 26px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel)}
.hardy h2{margin:0 0 12px}
.hardy ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hardy li{padding:14px 16px;background:var(--raised);border-radius:3px;line-height:1.55;max-width:66ch}
.hardy li strong{display:block;margin-bottom:2px;color:var(--orange)}
.hardy .note{margin:16px 0 0;font-size:.88rem;color:var(--grey-2);max-width:64ch}
.hardy .caveat{margin:14px 0 0;padding:14px 16px;border-left:3px solid var(--orange);background:var(--orange-dim);line-height:1.55;max-width:66ch;font-size:.92rem}
.hardy .caveat strong{color:var(--orange)}
/* How it got its name — the breeder's own words, so it is set as a quotation
   and attributed rather than absorbed into house voice. */
.fn-photos{display:grid;gap:14px;margin:26px 0 0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fn-photos figure{margin:0}
.fn-photos img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--rule-2)}
/* Field Notes */
.notes{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.notes li a{display:block;padding:20px 22px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel);text-decoration:none;color:inherit}
.notes li a:hover{border-color:var(--orange)}
.notes h2{margin:0;font-size:1.15rem;color:var(--orange)}
.notes .when{margin:4px 0 0;font-size:.85rem;color:var(--grey-2)}
.notes li p{margin:8px 0 0;line-height:1.55;max-width:70ch}
.note h1{margin-bottom:6px}
article.note>p{line-height:1.65;max-width:66ch}
.mentions{margin:30px 0 0;padding:20px 22px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel)}
.mentions h2{margin:0 0 10px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.mentions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.fn-strip{margin:34px 0 0;padding:24px 26px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel)}
.fn-strip h2{margin:0 0 12px}
.fn-strip ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fn-strip li{line-height:1.5}
.ratings .std{margin:0 0 18px;padding:0 0 0 18px;border-left:3px solid var(--orange)}
.ratings .std p{margin:0;line-height:1.6;max-width:64ch}
.ratings .std footer{margin:10px 0 0;font-size:.88rem;color:var(--grey-2)}
.naming{margin:34px 0 0;padding:24px 26px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel)}
.naming h2{margin:0 0 12px}
.naming blockquote{margin:0;padding:0 0 0 18px;border-left:3px solid var(--orange)}
.naming blockquote p{margin:0;font-size:1.05rem;line-height:1.6;max-width:64ch}
.naming footer{margin:12px 0 0;font-size:.88rem;color:var(--grey-2)}
.naming footer .cav{color:var(--grey-2)}
.hardy-lede{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.3;color:var(--orange);margin:0 0 16px;letter-spacing:-.01em}

/* "Choosing between the four" — the sibling comparison on /varieties. */
.compare{margin:40px 0;padding:28px;border:1px solid var(--rule-2);border-left:3px solid var(--orange);border-radius:4px;background:var(--panel)}
.compare>h2{margin:0 0 12px}
.compare>p{max-width:66ch}
.compare h3{margin:26px 0 12px;font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.shared{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin:0}
.shared div{background:var(--panel-2);padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.compare table{min-width:860px}
.compare .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.compare th[scope=row] a{font-weight:700}
.compare .note{margin-top:14px;max-width:66ch}

/* A sale price: the old price struck through, the price actually charged in orange. */
.sizes .was{text-decoration:line-through;color:var(--grey-3);margin-right:6px;font-weight:500}
.sizes .now{color:var(--orange);font-weight:700}
.sizes .left{display:block;margin-top:3px;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}

/* YouTube card: real thumbnail, duration, publish date. */
.ytcard{position:relative;display:block;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--panel)}
.ytcard img{display:block;width:100%;border:0;border-radius:0}
.ytcard:hover{border-color:var(--orange);text-decoration:none}
.ytcard .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.72);color:var(--orange);font-size:1.9rem;display:flex;align-items:center;justify-content:center;padding-left:6px}
.ytcard:hover .play{background:var(--orange);color:#000}
.ytmeta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:12px 16px;border-top:1px solid var(--rule)}
.ytmeta b{color:var(--orange)}
.ytmeta span{font-size:.8rem;color:var(--grey-3)}

/* Video library */
.vtopic{margin:44px 0 0}
.vtopic h3{scroll-margin-top:90px}
.vtopic .sub{margin:6px 0 18px}
.vgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.vid h4{margin:12px 0 4px;font-family:var(--body);font-size:1rem;font-weight:700;color:var(--white)}
.vid h4 a{color:inherit}
.vid h4 a:hover{color:var(--orange)}
.vid .ytcard .play{width:56px;height:56px;font-size:1.4rem}
.vmeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;font-size:.78rem;color:var(--grey-3)}
.vmeta .kind{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:20px}
.vmeta .kind.video{background:var(--orange);color:#000}
.vmeta .kind.short{border:1px solid var(--rule-2);color:var(--grey-1)}
.vid .note{margin:8px 0 0;font-size:.82rem}
/* A single photograph, where there is no cut/whole pair. */
figure.photos.one .p-cut{border-radius:3px}
/* A second photograph: the fruit on the plant. */
figure.onplant{margin-top:22px}
figure.onplant img{width:100%;border:1px solid var(--rule);border-radius:3px}

/* The founder. His own photograph, sent 31 Aug 2026 — before it, the About page
   showed visitors the words "Founder biography to migrate from /about" where he
   should have been. Square, capped so it never dominates the page, and it keeps
   its aspect ratio at every width so his face is never stretched. */
.founder-portrait{margin:0 0 22px;max-width:320px}
.founder-portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;border-radius:4px;border:1px solid var(--rule)}
.founder .established{color:var(--grey-2);font-size:.92rem;margin-top:18px}
@media (min-width:760px){
  .founder-portrait{float:right;margin:0 0 18px 28px;max-width:280px}
}

/* ================================================================= motion ==
   Rewritten 1 Sep 2026 under Jay's revised revised mandate: "i dont care how
   you acheive it, make it look spectacular." JavaScript now carries the motion
   on the landing page (src/landing.js, GSAP scroll-scrubbed), and this
   stylesheet holds to one contract: BASE STYLES ARE THE FINISHED STILL PAGE.
   Nothing here starts hidden. Every entrance, parallax, scrub and canvas is
   created by the engine at runtime, exists only under html.js-motion, and dies
   entirely under prefers-reduced-motion (the global kill near the top of this
   file, plus the engine's own matchMedia gate) leaving the composed still. */

/* micro: color and border changes ease instead of snapping */
.cta,.opts label,.excl .x-name,.stagelist .st-t,.nav a,.ytcard,.notes li a{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease}
/* the tour's verdict fades up when the third answer lands — feedback, not decor */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tour-result{animation:rise .55s cubic-bezier(.16,1,.3,1) both}
/* the hero video slot (when Jay sends a clip) settles in over the still */
@keyframes heroFade{from{opacity:0}to{opacity:1}}

/* ── word masks — the engine wraps display lines in these so words can rise
      out of a clipped box. Padding gives descenders room inside the clip. */
.wmask{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.12em;margin-bottom:-.12em}
.wword{display:inline-block;will-change:transform}

/* ── the scroll hint — only exists when there is something to scrub */
.scroll-hint{display:none}
.js-motion .scroll-hint{display:flex;align-items:center;gap:12px;margin:30px 0 0;
  font-family:var(--display);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey-2)}
.sh-line{width:64px;height:1px;background:var(--rule-2);position:relative;overflow:hidden}
.sh-line::after{content:"";position:absolute;inset:0;background:var(--orange);
  transform:translateX(-101%);animation:shline 2.4s ease-in-out infinite}
@keyframes shline{45%{transform:translateX(0)}100%{transform:translateX(101%)}}

/* ── the motes — a sparse warm drift in the black margins, behind everything.
      The engine caps their alpha at .4, which keeps white text at 8:1 or
      better against the brightest possible speck. */
.motes{position:fixed;inset:0;z-index:0;pointer-events:none}
.js-motion main.landing,.js-motion footer.site{position:relative;z-index:1}

/* ── the bloom act ── the still page shows the wide-open flower with his
      sentence under it; the engine pins the stage and scrubs the opening. */
.bloom{margin-top:clamp(64px,10vw,130px)}
.bloom-stage{background:var(--black)}
.bloom-fig{margin:0;position:relative;overflow:hidden}
.bloom-fig img{width:100%;height:auto;max-height:82vh;object-fit:cover;display:block}
.bloom-canvas{position:absolute;inset:0;width:100%;height:100%}
.bloom-bar{position:relative;padding:clamp(22px,3.5vw,36px) var(--pad) clamp(26px,4vw,48px)}
.bloom-bar-inner{max-width:var(--max);margin:0 auto}
.bloom-quote{font-family:var(--display);font-size:clamp(1.5rem,4.2vw,2.75rem);line-height:1.12;
  letter-spacing:-.02em;color:var(--white);margin:0;max-width:30ch;text-wrap:balance}
.bloom-src{margin:12px 0 0;font-size:.86rem;color:var(--grey-2)}
.bloom-cap{margin:4px 0 0;font-size:.8rem;color:var(--grey-3)}
.bloom-progress{display:none}
.js-motion .bloom-progress{display:block;position:absolute;top:0;left:var(--pad);right:var(--pad);height:2px;background:var(--rule)}
.bloom-progress i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left center}
.js-motion .bloom-stage{height:100vh;height:100svh;display:flex;flex-direction:column}
.js-motion .bloom-fig{flex:1;min-height:0}
.js-motion .bloom-fig img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}

/* ── the fruit wipe — a black curtain the engine pulls off the photograph */
.fruit-photo .wipe{display:none}
.js-motion .fruit-photo{position:relative;overflow:hidden;border-radius:3px}
.js-motion .fruit-photo .wipe{display:block;position:absolute;inset:-1px;background:var(--black);z-index:2}

/* ── the exclusives' hairlines draw themselves in as each row arrives */
.js-motion .excl li{border-bottom-color:transparent;position:relative}
.js-motion .excl li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--rule-2);transform:scaleX(var(--rule-draw,1));transform-origin:left center}

/* ══ THE BRAND RULE ════════════════════════════════════════════════════════
   Jay, 1 Sep 2026: "all orange letters are fat" and "white text is normal".

   Orange is the voice of the brand and it is set in Archivo Black, the heavy
   display face he chose. White is reading text and stays in Space Grotesk.
   Anything orange that was still in the body face is corrected here — the
   eyebrows, kickers and small caps labels were the ones that missed it.        */
.eyebrow,.label,.kicker,.movement-kicker,.x-status,.st-n,.stat b,
.excl .x-name,.brand-hdf{font-family:var(--display);letter-spacing:-.01em}
.eyebrow,.label,.kicker,.movement-kicker{letter-spacing:.14em}