body.home{padding:0}body.home header{position:sticky;inset:auto;top:0;height:86px;z-index:10;color:#171717;background:#fff;border-bottom:1px solid var(--line)}body.home nav a{color:#333}body.home #language{border-color:#ddd}.home .hero{margin:0 var(--gutter);height:auto;aspect-ratio:2.4;min-height:0;max-height:none}.home .hero-photo{object-position:center 18%}.home .hero:after{display:none}.home .identity{left:42px;bottom:38px}.home .identity img{width:235px}.home .identity p{display:none}.home-image-note{margin:0 var(--gutter);padding:20px 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#555;letter-spacing:.02em}.home-image-note a{padding:3px 0}.home-image-note a:first-child span{margin-left:12px}.home-story{padding:clamp(90px,12vw,180px) var(--gutter);max-width:1600px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr;column-gap:12%;align-items:end}.home-story>.eyebrow{grid-column:1/-1;margin:0 0 32px}.home-story h1{font-size:clamp(52px,7.5vw,112px);line-height:1.07;letter-spacing:-.065em;margin:0}.story-copy{padding-bottom:5px}.story-copy p{color:#606060;margin:0;line-height:1.9}.founder-quote{margin:0 0 30px}.founder-quote blockquote{margin:0}.founder-quote blockquote p{color:#171717;font-size:clamp(20px,1.9vw,27px);line-height:1.5;letter-spacing:-.015em;text-wrap:balance}.founder-quote figcaption{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.founder-name{font-size:14px;color:#171717}.founder-role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}html[lang=th] .founder-quote blockquote p{letter-spacing:0;line-height:1.6}html[lang=th] .founder-role{letter-spacing:0;text-transform:none}.home-places{padding:0 var(--gutter) 140px;max-width:1600px;margin:auto}.home-section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;border-top:1px solid #ddd;padding-top:38px;margin-bottom:50px}.home-section-heading h2{font-size:clamp(40px,4.6vw,68px);line-height:1.08;margin:24px 0 0;letter-spacing:-.045em}.home-section-heading>.textlink{flex-shrink:0}.places-cities{text-wrap:balance}.places-cities span{color:#b5b5b5;font-weight:300}.home-places-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px 60px}.place-main{grid-column:1/-1}.home-photo-wrap{overflow:hidden;background:#eee;aspect-ratio:1.5}.place-main .home-photo-wrap{aspect-ratio:2.2}.home-photo-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}.home-place:hover img{transform:scale(1.025)}.place-caption{display:flex;justify-content:space-between;align-items:center;padding:17px 0}.place-caption .eyebrow{margin:0 0 9px;font-size:12px}.place-caption h3{font-weight:400;font-size:21px;letter-spacing:-.02em;margin:0}.place-caption>span{font-size:22px;transition:transform .3s}.home-place:hover .place-caption>span{transform:translate(3px,-3px)}.home-team{display:grid;grid-template-columns:1.25fr 1fr;gap:8%;padding:0 var(--gutter) 160px;align-items:center;max-width:1600px;margin:auto}.home-team-photo{aspect-ratio:1.6;overflow:hidden}.home-team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:contrast(1.12) brightness(.94) saturate(1.06)}.home-team-copy h2{font-size:clamp(40px,4.6vw,68px);line-height:1.06;letter-spacing:-.055em;margin:28px 0}.home-team-copy>p:not(.eyebrow){color:#666;max-width:380px}.home-footer{padding:50px var(--gutter) 35px;border-top:1px solid #ddd;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}.home-footer>a{font-size:62px;line-height:1}.home-footer p{font-size:12px;letter-spacing:.12em}.home-footer div{display:flex;gap:28px;font-size:14px}.home-footer>span{grid-column:1/-1;font-size:12px;letter-spacing:.1em;color:#6f6f6f;margin-top:30px}.home [id]{scroll-margin-top:30px}@media(max-width:1000px){.home-story{column-gap:7%}.home-places-grid{gap:32px}.home-team{gap:6%}}@media(max-width:800px){body.home header{height:78px}body.home nav{top:78px;height:calc(100dvh - 78px)}.home .hero{margin:0 var(--gutter);min-height:0;height:auto;aspect-ratio:4/5}.home .hero-photo{object-position:50% center}.home .identity{left:24px;bottom:28px}.home .identity img{width:210px}.home-image-note{margin:0 var(--gutter);font-size:12px;line-height:1.6;gap:16px;padding:16px 0}.home-story{grid-template-columns:1fr;padding-top:90px;padding-bottom:90px;gap:0}.home-story>.eyebrow{margin-bottom:25px}.home-story h1{font-size:clamp(50px,9.5vw,76px)}.story-copy{margin-top:38px;max-width:450px}.home-places{padding-bottom:70px}.home-section-heading{display:block;margin-bottom:35px}.home-section-heading h2{font-size:40px}.home-section-heading>.textlink{margin-top:22px}.home-places-grid{grid-template-columns:1fr;gap:25px}.place-main{grid-column:auto}.place-main .home-photo-wrap,.home-photo-wrap{aspect-ratio:1.5}.home-team{grid-template-columns:1fr;padding-top:0;padding-bottom:96px;gap:36px}.home-team-photo{aspect-ratio:1.5}.home-team-copy h2{font-size:40px}.home-footer{grid-template-columns:auto 1fr;gap:20px;padding-top:35px}.home-footer div{grid-column:1/-1;gap:26px}.home-footer>span{margin-top:10px}}@media(prefers-reduced-motion:reduce){.home-photo-wrap img{transition:none}}

.home .identity .brand-lockup{width:265px;gap:14px}.home .identity .brand-lockup .brand-wordmark{width:82%}.home .identity .brand-lockup .brand-tagline{width:100%}@media(max-width:800px){.home .identity .brand-lockup{width:235px}}

/* Homepage coffee discovery uses the same product language as Shop. */
.home-coffees{max-width:1600px;margin:0 auto;padding:0 var(--gutter) 176px;border-top:0}.home-coffees:before{content:"";display:block;border-top:1px solid #ddd;margin-bottom:40px}.home-coffees .location-coffees-head h2{text-transform:none;font-size:clamp(40px,4.6vw,68px);margin-top:22px}.home-coffees .coffee-rail{margin-top:0}.home-coffees .coffee-controls button:disabled{opacity:.28;cursor:default;background:transparent;color:#171717;border-color:#ccc}.home-coffee-progress{height:1px;background:#ddd;margin-top:20px;overflow:hidden}.home-coffee-progress span{display:block;width:100%;height:100%;background:#171717;transform:scaleX(.12);transform-origin:left;transition:transform .35s var(--ease)}@media(max-width:800px){.home-coffees{padding-top:0;padding-bottom:96px}.home-coffees:before{margin-bottom:32px}.home-coffees .location-coffees-head h2{font-size:40px}.home-coffee-progress{margin-top:12px}}
.home-origin{display:block;position:relative;margin:0 0 70px}.home-origin-frame{display:block;overflow:hidden}.home-origin img{display:block;width:100%;height:auto;aspect-ratio:3.2/1;object-fit:cover;object-position:center 45%;transition:transform 1.2s var(--ease)}.home-origin:hover img{transform:scale(1.02)}.home-origin-note{display:block;padding-top:20px;color:#555;font-size:12px;letter-spacing:.02em}@media(max-width:800px){.home-origin{margin-bottom:44px}.home-origin img{aspect-ratio:16/9}.home-origin-note{padding-top:16px}}html[lang=th] .home-origin-note{letter-spacing:0}.home-coffees .coffee-card{display:flex;flex-direction:column}.home-coffees .coffee-card h3{min-height:2.7em;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.coffee-card-sub{display:block;min-height:1.5em;font-size:13px;line-height:1.5;color:var(--muted);margin-bottom:8px}html[lang=th] .home-coffees .coffee-card>p{letter-spacing:0}.home-footer .footer-social{grid-column:1/-1;margin-top:28px;font-size:12px;letter-spacing:.07em;gap:10px 26px}.home .hero{position:relative;overflow:hidden}.hero-video{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}.hero-video.is-playing{opacity:1}.hero-video video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover;border:0}.home-note-right{display:flex;align-items:center;gap:26px}.hero-film-link{color:#555}.hero-film-link:hover{color:#171717}@media(max-width:800px){.home-note-right{gap:16px}}@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
/* mobile refinement 2026-09-24 */
body.home header{background:#ffffffed;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(max-width:800px){
 body.home header{height:58px}
 .home-image-note{flex-direction:column;align-items:flex-start;gap:0;padding:10px 0 16px}
 .home-image-note>a:first-child,.home-note-right a:not([hidden]){display:inline-flex;align-items:center;min-height:44px}
 .home-note-right a[hidden]{display:none}
 .home-note-right a[href^="#"]{display:none}
 .home-footer .footer-social a,.home-footer a{display:inline-flex;align-items:center;min-height:44px}
 html[lang=th] .home-image-note{font-size:13px;line-height:1.7}
 html[lang=th] .home-story h1,html[lang=th] .places-cities,html[lang=th] .home-team h2,html[lang=th] .home-coffee h2{line-height:1.32}
 html[lang=th] .home-footer p,html[lang=th] .home-footer>span{font-size:13px}
 html[lang=th] .coffee-card p,html[lang=th] .coffee-card small{font-size:13px}
}
/* mobile type scale + rhythm 2026-09-24 (b) */
.cities-sep{display:none}
.cities-pair{display:block}
@media(min-width:801px){.cities-sep{display:inline}.cities-pair{display:inline}}
@media(max-width:800px){
 .home-story{padding-top:64px;padding-bottom:62px}
 .home-story h1{font-size:clamp(42px,8.6vw,64px)}
 .home-section-heading h2,.home-team-copy h2,.home-coffees .location-coffees-head h2{font-size:34px;line-height:1.14;letter-spacing:-.04em}
 .home-section-heading h2{margin-top:18px}
 .home-places{padding-bottom:58px}
 .home-coffees{padding-bottom:96px}
 html[lang=th] .home-story h1,html[lang=th] .home-section-heading h2,html[lang=th] .home-team-copy h2,html[lang=th] .home-coffees .location-coffees-head h2{line-height:1.34}
}
/* home footer: the wordmark text next to the % mark was removed 2026-09-25.
   Without it the middle grid cell is gone, so pin the link row to the right. */
@media(min-width:1001px){
  .home-footer{grid-template-columns:auto 1fr}
  .home-footer>div:not(.footer-social){justify-self:end}
}

/* ─── Homepage hero, matched to arabica.com (2026-09-26) ──────────────────
   Full-bleed video the height of the viewport, a transparent header laid over
   it in white, and the brand lockup centred. The header turns solid once the
   hero has scrolled past, which arabica.com does not do — their header simply
   scrolls away. Ours stays because this site has 69 pages and people navigate
   it; losing the nav on every scroll would cost more than the visual match is
   worth. Remove `.is-past-hero` below to match them exactly. */
.home .hero{margin:0;aspect-ratio:auto;height:100dvh;min-height:520px;max-height:none}
.home .hero-photo{object-position:50% 45%}
/* scrim: the nav is white and the footage is bright, so the top needs a floor */
.home .hero:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.10) 34%,rgba(0,0,0,0) 58%,rgba(0,0,0,.12))}

.hero-lockup{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:0 var(--gutter);text-align:center}
.hero-lockup img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
.lockup-wordmark{max-width:340px}
.lockup-tagline{max-width:318px;opacity:.95}


/* header laid over the hero */
body.home header{position:fixed;inset:0 0 auto;height:86px;z-index:20;color:#fff;
  background:none;border-bottom:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
body.home header .brand-mark,body.home header .header-ig img{filter:brightness(0) invert(1);transition:filter .35s var(--ease)}
body.home nav a{color:#fff}
body.home nav a[aria-current=page]{color:#fff}
body.home .country{color:#fff}
body.home #language{border-color:#ffffff8c;color:#fff}
body.home #language:hover{background:#fff;color:#171717}
.header-ig{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:4px}
.header-ig img{width:22px;height:22px;display:block}

/* once the hero is behind us, come back to the normal white bar */
body.home.is-past-hero header{background:#ffffffed;color:#171717;border-bottom-color:var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.home.is-past-hero header .brand-mark,
body.home.is-past-hero header .header-ig img{filter:none}
body.home.is-past-hero nav a{color:#555}
body.home.is-past-hero nav a[aria-current=page]{color:#111}
body.home.is-past-hero .country{color:#171717}
body.home.is-past-hero #language{border-color:#ddd;color:#171717}

@media(max-width:800px){
  .lockup-wordmark{max-width:230px}
  .lockup-tagline{max-width:224px}
  
  body.home header{height:58px}
  .header-ig{width:40px;height:40px}
  .header-ig img{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){body.home header{transition:none}}
/* The lockup is white and this footage is bright and busy, so it needs a floor
   of its own. A soft radial behind the centre keeps the picture readable while
   staying invisible as a shape. */
.hero-lockup:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 52% 38% at 50% 47%,rgba(0,0,0,.42),rgba(0,0,0,.18) 55%,rgba(0,0,0,0) 78%)}
.hero-lockup img{filter:brightness(0) invert(1) drop-shadow(0 1px 14px rgba(0,0,0,.35))}


/* ─── Rotating hero (2026-09-26) ─────────────────────────────────────────
   Four photographs, cross-faded. The four frames run from L=222 (the Dusit
   arch, almost white) to L=42 (One Bangkok at night) — a 180-step spread.
   One fixed scrim cannot serve both ends: strong enough to hold white type
   over the arch turns the night frame into a black rectangle. So each slide
   declares its own scrim weight through --scrim, set from its measured
   luminance, and the overlays below scale with it. */
.hero-slides{position:absolute;inset:0;z-index:1}
.hero-slides .hero-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-slides .hero-photo.is-on{opacity:1}
.home .hero{--scrim:1}
.home .hero:before{opacity:var(--scrim);transition:opacity 1.4s var(--ease)}
.hero-lockup:before{opacity:var(--scrim);transition:opacity 1.4s var(--ease)}
/* the caption under the hero changes with the frame, so fade it too */
[data-hero-note]{transition:opacity .45s var(--ease)}
[data-hero-note].is-swapping{opacity:0}
@media(prefers-reduced-motion:reduce){
  .hero-slides .hero-photo,.home .hero:before,.hero-lockup:before,
  [data-hero-note]{transition:none}
}

/* Scrim, retuned after looking at all four frames (2026-09-26).
   The first pass capped the weight at the value the Dusit arch needed, which
   left the two brightest frames washing out at full strength with nowhere to
   go. The base gradients below are heavier, and each frame's --scrim is now a
   fraction of that heavier base, so the bright frames have headroom and the
   night frame stays a night. */
.home .hero:before{background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.16) 34%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.16))}
.hero-lockup:before{background:radial-gradient(ellipse 56% 42% at 50% 47%,rgba(0,0,0,.58),rgba(0,0,0,.26) 55%,rgba(0,0,0,0) 78%)}

/* the film slide sits in the same box as the photographs */
.hero-slides .hero-film{background:#111}

/* ─── Homepage is one screen (2026-09-26) ────────────────────────────────
   arabica.com's homepage is exactly one viewport tall, cannot be scrolled
   and has no footer — verified in the browser at both 1440x900 and 375x812.
   Ours now matches. Everything that used to live below the fold has its own
   page and is reached from the menu; the footer links people still need on
   a landing page (contact, privacy, the global site, social) are laid over
   the bottom of the photograph instead of being lost with the footer. */
body.home{overflow:hidden}
.home .hero{height:100dvh;min-height:0;max-height:none;margin:0}

/* the crawler needs a heading; the design does not want to show one */
.hero-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.hero-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 34px;
  padding:0 var(--gutter) 30px;color:#fff;font-size:12px;letter-spacing:.02em}
.hero-bar a{color:#fff;opacity:.88;transition:opacity .25s var(--ease)}
.hero-bar a:hover{opacity:1}
.hero-place{margin-right:auto}
.hero-place .ar{margin-left:4px}
.hero-links,.hero-social{display:flex;gap:26px}
/* the bar sits on the photograph, so it needs the same protection the
   lockup has — tied to the same per-slide weight */
.hero-bar:before{content:'';position:absolute;left:0;right:0;bottom:0;height:190px;
  z-index:-1;pointer-events:none;opacity:var(--scrim);transition:opacity 1.4s var(--ease);
  background:linear-gradient(0deg,rgba(0,0,0,.52),rgba(0,0,0,.22) 45%,rgba(0,0,0,0))}
html[lang=th] .hero-bar{letter-spacing:0}
@media(max-width:800px){
  .hero-bar{gap:8px 20px;padding-bottom:22px;font-size:11px}
  .hero-place{flex-basis:100%;margin-right:0;margin-bottom:2px}
  .hero-links,.hero-social{gap:16px}
  .hero-social{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.hero-bar:before{transition:none}}

/* Bar legibility, set from measurement (2026-09-26).
   The bottom gradient deliberately does NOT scale with --scrim. That variable
   exists so the centre lockup can be tuned per frame; the bar sits at the very
   bottom of the photograph, where four of the five frames run bright (measured
   L=131/121/105/53/115 in the text band), so it needs a constant floor rather
   than one that thins out on the frames that need it most. The text shadow
   does the close-range work so the gradient does not have to be heavier. */
.hero-bar:before{opacity:1;
  background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.28) 42%,rgba(0,0,0,0))}
.hero-bar{text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero-bar .ar{filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}

/* ─── No vignette on the hero (Jialu, 2026-09-26) ────────────────────────
   The brand lockup sits on the photograph and the film with nothing behind
   it — no radial scrim, no top or bottom wash, no shadow on the letterforms.
   This is a deliberate trade: measured against the brightest frame the mark
   is low contrast, and that was accepted. arabica.com does the same.

   Overrides rather than deletions, so the earlier rules stay readable and
   this decision can be reversed by removing this block alone. The per-slide
   --scrim variable now drives only the bar at the bottom, which is a row of
   functional links rather than the mark. */
.home .hero:before{display:none}
.hero-lockup:before{display:none}
.hero-lockup img{filter:brightness(0) invert(1)}

/* ─── Lockup sized to arabica.com (2026-09-26) ───────────────────────────
   Measured on arabica.com at 1440x900 and at 579 wide: their lockup is a
   single PNG rendered at a FIXED 232x60, centred at 50%/50% — not a
   percentage of the viewport, and the same 232px on a phone.

   Scanning that PNG (3000x770) for its ink gives wordmark 3000x441, a
   146px gap, then tagline 2974x159. At 232px wide that is 232x34.1,
   11.3px, 230x12.3.

   Our two SVGs carry their own padding inside the box, so the numbers
   below are back-computed from each one's measured ink: wordmark ink is
   98% of its box width and 88.13% of its height, tagline ink 99.8% and
   94.64%. Hence 232/0.98 = 236.7 and 230/0.998 = 230.5, and a flex gap of
   8.6px once each box's internal padding (2.36 + 0.35) is subtracted from
   the 11.3px they leave between the two. Do not "round these up a bit". */
.hero-lockup{gap:8.6px}
.hero-lockup .lockup-wordmark{width:236.7px;max-width:none}
.hero-lockup .lockup-tagline{width:230.5px;max-width:none;opacity:1}

/* ─── Vignette: photographs yes, film no (Jialu, 2026-09-26) ─────────────
   Jialu revised the earlier "no vignette anywhere" call: keep it behind the
   lockup on the photographs, leave the film frame clean. `.is-film` is set
   by the rotation when the film slide is on. */
.home .hero:before{display:block}
.hero-lockup:before{display:block}
.home .hero.is-film:before,
.home .hero.is-film .hero-lockup:before{display:none}
.hero-lockup img{filter:brightness(0) invert(1) drop-shadow(0 1px 12px rgba(0,0,0,.3))}
.hero.is-film .hero-lockup img{filter:brightness(0) invert(1)}

/* The film keeps the top wash even though its vignette is off: the wash is
   what makes the menu readable, and a menu that cannot be read is a broken
   control rather than a styling choice. Only the radial behind the lockup —
   the vignette Jialu asked to drop on the film — is switched off there. */
.home .hero.is-film:before{display:block}

/* ─── Fix: the mobile menu was white on white (2026-09-26) ───────────────
   `body.home nav a{color:#fff}` exists so the navigation can sit over the
   hero photograph. On a phone the same links move into the drawer, which is
   a white panel — so on the homepage, and only there, opening the menu gave
   six invisible links. The header bar itself still sits over the photo while
   the drawer is open, so .country and #language stay white; only the links
   inside the drawer are brought back to the normal colour. */
@media(max-width:800px){
  body.home #navigation a{color:#333}
  body.home #navigation a:hover{color:#111}
  body.home #navigation a[aria-current=page]{color:#111}
}

/* Same technique as the footer -- the hero bar must not change height. */
.hero-links a,.hero-social a,.hero-place{position:relative}
.hero-links a:before,.hero-social a:before,.hero-place:before{content:"";position:absolute;inset:-6px 0}

/* Mobile: the bar is 76px with three 12px rows 10px and 8px apart, so a
   symmetric expansion makes neighbouring rows fight over the gap (the lower
   row paints later and wins, leaving the row above at 20px). Each row is
   given its own slice instead: 761-785, 785-810, 810-834. No overlap, all
   >=24px, and the bar does not move. */
@media(max-width:800px){
  .hero-place:before{inset:-7px 0 -5px}
  .hero-links a:before{inset:-5px 0 -8px}
  .hero-social a:before{inset:0 0 -12px}
}

/* Slide 1 (Dusit Central Park) is a white interior, and the menu sits over
   the brightest part of it: measured 2.6:1 for the nav and 2.7:1 for
   THAILAND against white text, well under the 4.5:1 body-text minimum.
   Every other slide measured 4.6:1 to 20.4:1, so this strengthens the wash
   the header already carries rather than touching the per-slide scrim.
   The film keeps the original, lighter wash -- no vignette on video. */
/* no-repeat + no border box: the header keeps a 1px transparent
   border-bottom, and a background repeats into the border area, so the
   gradient's darkest first row was being painted again as a 1px line
   across the full width. Invisible at #0005, obvious at #0008. */
body.home header{background:linear-gradient(#0008,#0003 60%,transparent) no-repeat;border-bottom:0}
body.home:has(.hero.is-film) header{background:linear-gradient(#0005,transparent) no-repeat}