/* =========================================================
   HOME PAGE: puts the motion reel in the site's own colours
   (marble ink, sand, sign gold) and type (Bricolage Grotesque
   for the display lines over Plus Jakarta Sans).
   ========================================================= */
body.r-home{
  --r-bg:#231C18;          /* --ink */
  --r-bg-2:#1B1512;        /* a step deeper, for the sliding reel */
  --r-fg:#F3EDE3;          /* --paper */
  --r-muted:rgba(243,237,227,.64);
  --r-accent:#E3C79B;      /* --accent-hi, sign gold */
  --r-line:rgba(243,237,227,.14);
  --r-btn-bg:#F3EDE3;
  --r-btn-fg:#231C18;
  --r-btn-hover:#E3C79B;
  --r-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --r-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --r-dw:700;
  --r-track:-.045em;
  --r-lh:.92;
  background:var(--r-bg);
}
/* zero specificity, so any of the site's sections that set their own background keep it */
:where(body.r-home .home-main > section){ background-color:var(--paper); }

/* the site nav sits on top of the reel hero */
.r-hero .top-nav{ position:absolute; top:0; left:0; right:0; z-index:5; }
.r-hero .top-nav-mobile-menu{ z-index:30; }
@media (min-aspect-ratio:4/5){ .r-hero-slot{ top:17vh; } }
.reel h1,.reel h2,.reel h3,.r-num,.r-bigword,.r-mgroup span,.r-expand-words span,.r-work-end p,.r-loader-count{ font-optical-sizing:auto; }

/* Hero headline: the one loud typographic moment on the site.
   Heavy, slightly condensed Bricolage for the first two lines, then the
   last line opens up to full width in gold, so the sentence lands. */
.reel .r-hero h1{ font-weight:800; font-stretch:88%; letter-spacing:-.05em; line-height:.9; max-width:44vw; }
@media (max-aspect-ratio:4/5){ .reel .r-hero h1{ max-width:9.6ch; font-size:clamp(2.9rem,14vw,7rem); } }
.reel .r-hero h1 .r-mask:nth-child(4) span,
.reel .r-hero h1 .r-mask:nth-child(5) span{ color:var(--r-accent); font-stretch:100%; font-weight:700; letter-spacing:-.055em; }