/* 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,.film-pause{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}
/* His instruction, 4 Sep 2026: "make the navigation text links to be bold so they
   stand out better and make sure they are bright white". Ruling nav-links-bold-white. */
.nav a{color:var(--white);font-size:.88rem;font-weight:700;padding:6px 0;display:inline-block}
/* CART IS A BUTTON, to the right of the words "Hybridizing Dragon Fruit", at
   every width. His ruling, 5 Sep 2026, when Legal made nine nav links: "make it
   two rows" … "Cart becomes a button by the logo" … "the side opposite of the
   logo" … "right side" … "there is supposed to be a BUTTON to the right hand
   side of the words". The links sit on their own row below the brand row. */
.nav nav{width:100%}
.nav a.brand{flex:1 1 0;min-width:0}
.nav a.cart-button{display:inline-block;flex:0 0 auto;margin-left:auto;padding:12px 20px;background:var(--orange);color:#000;border:0;border-radius:2px;font-size:.95rem;line-height:1}
.nav a.cart-button:hover{background:var(--orange-lift);color:#000;text-decoration:none}
/* On a phone the eight links are a grid, four across and two down, each centered
   in its cell, so the two rows line up. His words, 4 Sep 2026: "The navigation
   lacks symmetry on an actual phone. Can we get that to look a little more
   clean?" The type scales with the screen so "Hybridizing" fits its cell at
   320px without a word ever breaking. */
@media (max-width:560px){
  .nav ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 4px}
  .nav a.cart-button{padding:8px 14px;font-size:.88rem}
  .nav li{min-width:0;text-align:center}
  .nav a{display:block;padding:8px 0;font-size:clamp(.7rem,3.3vw,.88rem);white-space:nowrap;letter-spacing:0}
}
.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}
p.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}
/* ── the Cart: everything for sale today, each with its own page's Buy form,
      every Buy landing on Stripe's checkout (4 Sep 2026) */
.cart-tier{margin-top:40px}
.cart-tier h2{margin-bottom:6px}
.cart-list{list-style:none;margin:0;padding:0}
.cart-item{display:grid;gap:18px;padding:26px 0;border-top:1px solid var(--rule)}
@media (min-width:721px){.cart-item:has(.cart-pic){grid-template-columns:200px minmax(0,1fr);align-items:start}}
.cart-pic img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px;display:block}
.cart-body h3{margin:0 0 6px;font-size:1.35rem}
.cart-taste{color:var(--grey-1);max-width:60ch;margin:0}
.cart-body .buy{margin:16px 0 0}
.buy fieldset{border:0;margin:0;padding:0}
/* The Donate button on About (his ruling, 4 Sep 2026) reuses the buy form's
   shape, so it looks like every other way to pay on the site. */
.buy.donate{margin-top:16px}
.buy.donate .field{display:grid;gap:8px;margin:16px 0 0;max-width:320px}
.buy.donate .field label{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.buy.donate .field 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.donate .field input:focus-visible{border-color:var(--orange)}
.buy.donate .cta{margin-top:16px}
.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 video,figure.onplant video,.fn-photos video,figure.shot video{display:block;width:100%;height:auto;background:#000;border-radius:3px}
/* The whole fruit beside the cut one. It was 38% of the picture's width; his words, 4 Sep 2026:
   "the full fruit pics just need to be 15% larger or so" — so 44%, and 39% on a phone (was 34%).
   It is placed against the cut photograph (.pair), not the figure, so it never sits on the caption. */
figure.photos .pair{position:relative}
figure.photos video.p-whole{position:absolute;right:-2%;bottom:0;width:44%}
figure.photos .p-whole{position:absolute;right:-2%;bottom:0;width:44%;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:39%;right:0;bottom:0}}

/* 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}

/* ── the film ──
   His video is the page. 4 Sep 2026: "a visually spectacular video landing page
   that is minimal and elegant" — "use the video i provided" — "do it again from
   scratch, dont reuse ANY MATERIAL except for the video i supplied, and the
   CTA's". It fills the first screen edge to edge: on a phone the whole portrait
   frame, on a wide screen the flower across the width. Its box is the screen
   less the header and the caption (src/landing.js measures them; these are the
   fallbacks), so the caption is one scroll away. The poster frame sits under it
   for reduced motion and for a browser with no video, in the same box, so
   nothing shifts. The caption sits under the film on solid black — nothing is
   printed over the flower. */
.hero{padding:0}
.hero-figure{margin:0}
.hero-media{position:relative;overflow:hidden;background:var(--black);height:calc(100vh - 236px);height:var(--film-h,calc(100svh - 236px));min-height:420px;max-height:1200px}
.hero-still,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.hero-video{animation:heroFade 2s ease-out both}
@media (min-width:921px){.hero-media{height:calc(100vh - 196px);height:var(--film-h,calc(100svh - 196px))}.hero-still,.hero-video{object-position:50% 34%}}
.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. */
/* the Pause button src/landing.js adds to the film (WCAG 2.2.2: anything that
   moves for more than five seconds can be stopped) */
.film-pause{position:absolute;right:var(--pad);bottom:18px;z-index:2;min-height:40px;padding:8px 14px;background:rgba(0,0,0,.55);color:var(--white);border:1px solid var(--rule-2);border-radius:2px;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.film-pause:hover,.film-pause:focus-visible{border-color:var(--orange);color:var(--orange);outline:none}

/* ── the choices ──
   Under the film: the title, its line, then his three choices, then the tour as
   it was. His words, 4 Sep 2026: "Replace it with a title that reads (in thick
   orange letters), “New To Dragon Fruit?” With a considerably smaller white text
   subtitle just below that says, “Start here…”" — and of the choices, "don't
   make the 3 cta buttons look different from each other either". One column,
   the width of a hand. */
.choose{padding-top:clamp(28px,5vw,56px);padding-bottom:clamp(56px,9vw,120px);max-width:760px}
.start{font-family:var(--display);color:var(--orange);font-size:clamp(2rem,7vw,3rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 8px}
.start-sub{color:var(--white);font-size:clamp(1rem,2.6vw,1.15rem);font-weight:500;margin:0 0 22px}

/* 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)}

/* guided tour — CSS only, no JavaScript anywhere. It begins at his three
   choices, directly under Explore, and unfolds from there. */
.tour{margin:0;padding:0;background:none;border:0;border-radius:0;scroll-margin-top:90px}
.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}
/* his three choices are three identical buttons — "don't make the 3 cta buttons
   look different from each other either, that annoys me!" — the site's orange
   button, one under the other; the chosen one turns white */
.step-1 .opts{grid-template-columns:1fr;gap:12px}
.tour .step-1 .opts label{background:var(--orange);border:2px solid var(--orange);color:#000;min-height:64px;padding:16px 24px;font-weight:700;font-size:1.02rem;border-radius:2px}
.tour .step-1 .opts label small{color:#3a1d00;font-weight:500}
.tour .step-1 .opts label:hover{background:var(--orange-lift);border-color:var(--orange-lift)}
.tour .step-1 input:checked+label{background:var(--white);border-color:var(--white)}
.tour .step-1 input:checked+label small{color:#333}
/* steps 2+ and the results stay hidden until the prior answer exists */
.step-2,.step-3,.step-4,.step-5,.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 fourth question, sweet or tart, belongs to the flavor track alone */
.tour:has(#g-flavor:checked):has(.q4:checked) .step-5{display:block}

.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(#t-sweet:checked):has(.q2:checked):has(.q4:checked) .r-flavor-any-sweet,
.tour:has(#g-flavor:checked):has(#f-any:checked):has(#t-balanced:checked):has(.q2:checked):has(.q4:checked) .r-flavor-any-balanced,
.tour:has(#g-flavor:checked):has(#f-any:checked):has(#t-tart:checked):has(.q2:checked):has(.q4:checked) .r-flavor-any-tart,
.tour:has(#g-flavor:checked):has(#f-any:checked):has(#t-all:checked):has(.q2:checked):has(.q4:checked) .r-flavor-any-all,
.tour:has(#g-flavor:checked):has(#f-red:checked):has(#t-sweet:checked):has(.q2:checked):has(.q4:checked) .r-flavor-red-sweet,
.tour:has(#g-flavor:checked):has(#f-red:checked):has(#t-balanced:checked):has(.q2:checked):has(.q4:checked) .r-flavor-red-balanced,
.tour:has(#g-flavor:checked):has(#f-red:checked):has(#t-tart:checked):has(.q2:checked):has(.q4:checked) .r-flavor-red-tart,
.tour:has(#g-flavor:checked):has(#f-red:checked):has(#t-all:checked):has(.q2:checked):has(.q4:checked) .r-flavor-red-all,
.tour:has(#g-flavor:checked):has(#f-purple:checked):has(#t-sweet:checked):has(.q2:checked):has(.q4:checked) .r-flavor-purple-sweet,
.tour:has(#g-flavor:checked):has(#f-purple:checked):has(#t-balanced:checked):has(.q2:checked):has(.q4:checked) .r-flavor-purple-balanced,
.tour:has(#g-flavor:checked):has(#f-purple:checked):has(#t-tart:checked):has(.q2:checked):has(.q4:checked) .r-flavor-purple-tart,
.tour:has(#g-flavor:checked):has(#f-purple:checked):has(#t-all:checked):has(.q2:checked):has(.q4:checked) .r-flavor-purple-all,
.tour:has(#g-flavor:checked):has(#f-white:checked):has(#t-sweet:checked):has(.q2:checked):has(.q4:checked) .r-flavor-white-sweet,
.tour:has(#g-flavor:checked):has(#f-white:checked):has(#t-balanced:checked):has(.q2:checked):has(.q4:checked) .r-flavor-white-balanced,
.tour:has(#g-flavor:checked):has(#f-white:checked):has(#t-tart:checked):has(.q2:checked):has(.q4:checked) .r-flavor-white-tart,
.tour:has(#g-flavor:checked):has(#f-white:checked):has(#t-all:checked):has(.q2:checked):has(.q4:checked) .r-flavor-white-all,
.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 h2{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:22px 0 26px;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}
/* His words, 4 Sep 2026: "the text is grey and the contrast is poor, make those
   letters white for legibility." The article used to inherit the small-print
   .note rule above (grey-2 at .88rem) by sharing its class name. */
article.note{font-size:1rem;color:var(--white)}
article.note>p{line-height:1.65;max-width:66ch;color:var(--white)}
.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,.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 film settles in over its poster frame */
@keyframes heroFade{from{opacity:0}to{opacity:1}}

/* ══ 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}

/* ---- The cookie banner: the one on his Squarespace site, measured there on 4 Sep 2026
   (black bar fixed across the bottom, white 12.8px words, three 12px uppercase pill
   buttons — Manage cookies plain, Decline all outlined, Accept all filled — and a
   black 640px Manage Cookies dialog). Words in data/cookie-banner.json. ---- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#000;color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px;box-sizing:border-box;font-family:var(--body);font-weight:600}
.cookie-banner[hidden],.cookie-pref[hidden]{display:none}
.cookie-text{margin:0;font-size:12.8px;line-height:1.5;color:var(--white)}
.cookie-buttons{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:flex-end;flex-shrink:0}
.cookie-manage,.cookie-decline,.cookie-accept,.cookie-save{font-family:var(--body);font-size:12px;font-weight:600;text-transform:uppercase;line-height:1.3;padding:11px 15px;border-radius:300px;border:2px solid transparent;background:none;color:var(--orange);cursor:pointer;white-space:nowrap}
.cookie-decline{border-color:var(--orange)}
.cookie-accept,.cookie-save{background:var(--orange);border-color:var(--orange);color:var(--white)}
.cookie-banner button:hover,.cookie-save:hover{filter:brightness(1.12)}
.cookie-banner button:focus-visible,.cookie-save:focus-visible,.cookie-close:focus-visible,.cookie-pref button:focus-visible,.cookie-toggle input:focus-visible+.cookie-switch{outline:3px solid var(--white);outline-offset:2px}
@media (max-width:760px){.cookie-banner{flex-direction:column;align-items:stretch}}
.cookie-dialog{background:#000;color:var(--white);border:0;padding:40px;width:min(640px,calc(100vw - 32px));max-height:88vh;overflow:auto;box-sizing:border-box;margin:auto;font-family:var(--body);font-weight:600;font-size:12px;line-height:16px}
.cookie-dialog::backdrop{background:rgba(0,0,0,.55)}
.cookie-close{position:absolute;top:20px;right:20px;background:none;border:0;padding:11px 15px;cursor:pointer;color:var(--white);line-height:0}
.cookie-dialog-title{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.15;letter-spacing:-.02em;text-transform:uppercase;color:var(--orange);margin:10px 0 20px}
.cookie-cat{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cookie-cat-title{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;color:var(--orange);margin:15px 0}
.cookie-state{color:var(--white);font-size:12px;font-weight:600;line-height:16px;margin:0}
.cookie-desc{margin:0 100px 20px 0;color:var(--white)}
.cookie-dialog hr{border:0;height:1px;background:var(--white);margin:5px 0}
.cookie-toggle{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer}
.cookie-toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cookie-switch{display:inline-block;width:28px;height:16px;border-radius:8px;border:1px solid var(--white);background:#000;position:relative;box-sizing:border-box}
.cookie-switch::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--white);transition:left .15s}
.cookie-toggle input:checked+.cookie-switch{background:var(--orange);border-color:var(--orange)}
.cookie-toggle input:checked+.cookie-switch::after{left:13px}
.cookie-save-row{display:flex;justify-content:flex-end;margin-top:36px}
.cookie-pref{background:#000;padding:7px 10px;display:inline-block}
.cookie-pref button{background:none;border:0;padding:0;color:var(--white);font-family:var(--body);font-size:12px;font-weight:400;cursor:pointer}
@media (max-width:760px){.cookie-desc{margin-right:0}.cookie-dialog{padding:24px}}
@media (prefers-reduced-motion:reduce){.cookie-switch::after{transition:none}}

/* ---- Customer reviews (4 Sep 2026): buyers only, approved by him; the words are theirs ---- */
.reviews{margin:32px 0 0}
.review-sum{margin:0 0 12px;font-weight:600}
.review-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:16px}
.review{border:1px solid #2a2a2a;border-radius:12px;padding:14px 16px;background:#0e0e0e}
.review .stars{margin:0 0 6px;color:var(--orange);font-weight:600}
.review .stars span{letter-spacing:.08em;font-size:1.1rem}
.review p{margin:0 0 8px}
.review .by{margin:0;color:var(--grey-1);font-size:.95rem}
.review-ask{margin:12px 0 0;padding:14px 16px;border:1px solid #2a2a2a;border-radius:12px}
.review-ask .hint{margin:0 0 10px}
.review-ask label{display:block;font-weight:600;margin:0 0 6px}
.review-ask input{display:block;width:100%;max-width:26rem;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--grey-3);background:#000;color:var(--white);font:inherit;margin:0 0 12px}
.review-page fieldset{border:1px solid #2a2a2a;border-radius:12px;padding:12px 16px;margin:0 0 16px}
.review-page legend{padding:0 6px;font-weight:600}
.review-page .star-choice{display:block;padding:6px 0}
.review-page label{display:block;font-weight:600;margin:0 0 6px}
.review-page input[type=text],.review-page textarea{display:block;width:100%;max-width:38rem;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--grey-3);background:#000;color:var(--white);font:inherit}
.review-page .form-error{color:var(--orange-lift);font-weight:600}