:root {
  --font-main: "League Spartan", Arial, sans-serif;
  --ink: #171410;
  --ink-rgb: 23, 20, 16;
  --paper: #fffdf8;
  --muted: #6f675b;
  --near-black: #050505;
  --green: #187247;
  --yellow: #F0A000;
  --red: #D41D19;
  --blue: #004494;
  --shadow: 0 22px 70px rgba(42, 34, 24, 0.18);
  --radius: 8px;
  /* Every "content rises + fades into view" reveal (scroll sections, diary
     panels, media tiles) shares this curve — previously two near-identical
     cubic-beziers had drifted in across different components for the same
     effect; consolidating avoids a third one drifting in later. */
  --ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);
}

* {
  box-sizing: border-box;
}

/* overflow-x/overscroll-behavior are set on html only, not duplicated on
   body — declaring them on both the root and body has been a known source
   of Chrome miscalculating (and sometimes fully locking) the page's
   scrollable area, even though the same duplication is harmless in Safari. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--near-black);
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
}

/* Keeps text available to screen readers and search engines without
   displaying it — used where the visible page would otherwise repeat
   itself (e.g. the hero heading), but the full text still matters for
   accessibility/SEO. Standard, well-tested pattern: absolutely positioned
   to a 1px box and clipped, rather than display:none (which some screen
   readers skip entirely) or a huge negative text-indent. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}

.hero-photo,
.hero-tint {
  position: absolute;
  inset: 0;
}

.hero-photo {
  background:
    linear-gradient(120deg, rgba(0, 120, 69, 0.22), rgba(239, 159, 0, 0.16)),
    url("../img/hero-soest.jpg") center / cover;
  transform: scale(1.02);
  transition: background-image 280ms ease, opacity 280ms ease, transform 900ms ease;
}

.hero-tint {
  /* The first stop must be fully opaque --paper (not a photo/paper blend),
     so the tone behind the wordmark matches flat --paper backgrounds
     elsewhere on the page (e.g. .partners) exactly. */
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 1) 0%, rgba(255, 253, 248, 0.78) 42%, rgba(255, 253, 248, 0.16) 100%),
    linear-gradient(0deg, rgba(255, 253, 248, 0.22), rgba(255, 253, 248, 0.02));
}

.language-switch {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 2.4vw, 28px));
  right: calc(env(safe-area-inset-right, 0px) + clamp(16px, 2.4vw, 28px));
  z-index: 30;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: rgba(255, 253, 248, 0.74);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: 999px;
  box-shadow: 0 16px 36px rgba(var(--ink-rgb), 0.12);
}

.language-switch button {
  display: grid;
  min-width: 38px;
  min-height: 28px;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.language-switch button:hover,
.language-switch button:focus-visible {
  transform: translateY(-1px);
}

.language-switch button.is-active {
  color: var(--paper);
  background: var(--ink);
}

.stripe-menu {
  --menu-width: clamp(290px, 37vw, 480px);
  --stripe-width: clamp(17px, 2vw, 26px);
  --stripe-gap: clamp(14px, 2.3vw, 28px);
  --open-row-height: 64px;
  --open-badge-height: 56px;
  --open-left: 0px;
  --closed-width: calc(var(--stripe-width) + var(--stripe-gap) + var(--stripe-width) + var(--stripe-gap) + var(--stripe-width) + var(--stripe-gap) + var(--stripe-width));
  position: relative;
  z-index: 25;
  display: block;
  width: var(--closed-width);
  height: 144px;
  overflow: visible;
  transform: rotate(6deg);
  transform-origin: 50% 10%;
  transition: transform 260ms ease;
}

.stripe-menu:hover,
.stripe-menu:focus-within,
.stripe-menu.is-menu-open {
  transform: rotate(0deg);
}

.stripe-badge {
  --stripe-color: var(--green);
  --stripe-order: 0;
  --closed-y: 0px;
  --stripe-left: 0px;
  --open-y: 0px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--stripe-left);
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--stripe-width);
  height: 102px;
  padding: 0;
  /* overflow: hidden alone clips the .stripe-flow child to this rounded
     shape just fine. Pairing it with contain: paint (as before) made
     Safari/Chrome occasionally fail to re-clip that child mid-transform,
     flashing its square corners for a frame — worse the faster you moved
     across the four badges, since each one retriggers .stripe-flow's own
     slide-in/out transition. */
  overflow: hidden;
  opacity: 0.96;
  cursor: pointer;
  background: var(--stripe-color);
  border-radius: 999px;
  box-shadow: 0 18px 36px rgba(var(--ink-rgb), 0.18);
  transform-origin: center top;
  transform: translateY(var(--closed-y));
  will-change: left, top, width, height, transform;
  transition: left 260ms ease, top 260ms ease, width 260ms ease, height 260ms ease, transform 260ms ease, opacity 160ms ease, box-shadow 260ms ease;
}

.stripe-badge.is-current {
  opacity: 1;
  box-shadow:
    0 0 0 3px rgba(255, 253, 248, 0.72),
    0 18px 36px rgba(var(--ink-rgb), 0.2);
}

.stripe-menu:hover .stripe-badge.is-current,
.stripe-menu:focus-within .stripe-badge.is-current,
.stripe-menu.is-menu-open .stripe-badge.is-current {
  box-shadow:
    0 0 0 2px rgba(255, 253, 248, 0.82),
    0 16px 34px rgba(var(--ink-rgb), 0.18);
}

.stripe-badge:nth-child(2) {
  --stripe-order: 1;
  --stripe-left: calc(var(--stripe-width) + var(--stripe-gap));
  --closed-y: 12px;
  --open-y: var(--open-row-height);
}

.stripe-badge:nth-child(3) {
  --stripe-order: 2;
  --stripe-left: calc(var(--stripe-width) + var(--stripe-gap) + var(--stripe-width) + var(--stripe-gap));
  --closed-y: 2px;
  --open-y: calc(var(--open-row-height) + var(--open-row-height));
}

.stripe-badge:nth-child(4) {
  --stripe-order: 3;
  --stripe-left: calc(var(--stripe-width) + var(--stripe-gap) + var(--stripe-width) + var(--stripe-gap) + var(--stripe-width) + var(--stripe-gap));
  --closed-y: 18px;
  --open-y: calc(var(--open-row-height) + var(--open-row-height) + var(--open-row-height));
}

.stripe-badge-green {
  --stripe-color: var(--green);
}

.stripe-badge-yellow {
  --stripe-color: var(--yellow);
}

.stripe-badge-red {
  --stripe-color: var(--red);
}

.stripe-badge-blue {
  --stripe-color: var(--blue);
}

.stripe-menu:hover .stripe-badge,
.stripe-menu:focus-within .stripe-badge,
.stripe-menu.is-menu-open .stripe-badge {
  top: var(--open-y);
  left: var(--open-left);
  width: var(--menu-width);
  height: var(--open-badge-height);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(var(--ink-rgb), 0.16);
  transform: translateY(0);
}

/* Open badges stack with a visual gap between rows (see --open-row-height
   vs --open-badge-height). Without this, moving the pointer from one row
   straight down into the next crosses a strip that belongs to no element,
   :hover is lost mid-transit, and the whole menu snaps shut. This invisible
   pseudo-element sits behind the badges (z-index 1 vs 2) and only gains
   pointer-events once the menu is already open, bridging those gaps so
   hover survives the trip between rows. */
.stripe-menu::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--open-left);
  width: 0;
  height: 0;
  pointer-events: none;
}

.stripe-menu:hover::after,
.stripe-menu:focus-within::after,
.stripe-menu.is-menu-open::after {
  width: var(--menu-width);
  height: calc(var(--open-row-height) * 3 + var(--open-badge-height));
  pointer-events: auto;
}

.stripe-label {
  position: relative;
  z-index: 2;
  display: block;
  max-width: calc(var(--menu-width) - 42px);
  color: var(--paper);
  font-family: var(--font-main);
  font-size: clamp(0.88rem, 1.6vw, 1.18rem);
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  /* No delay here — this is the rule that governs closing (fading back
     out to opacity: 0), which should feel immediate/responsive. The
     delay for the *opening* direction is set separately below, on the
     rule that makes the label visible, so open and close aren't forced
     to share one timing. */
  transition: opacity 150ms ease, transform 180ms ease;
}

.stripe-menu:hover .stripe-label,
.stripe-menu:focus-within .stripe-label,
.stripe-menu.is-menu-open .stripe-label {
  opacity: 1;
  transform: translateY(0);
  /* The pill (badge width/height/position, menu rotation) takes 260ms to
     settle. The label used to start fading in at 60ms and be fully
     visible by ~210ms — 50ms before the pill finished resizing — so the
     text could be caught mid-transition looking skewed or off from the
     pill's eventual center. Waiting until the pill has essentially
     settled removes that window entirely. This delay only applies here,
     on the opening direction — the base rule above (closing) stays fast. */
  transition: opacity 150ms ease 220ms, transform 180ms ease 200ms;
}

.stripe-flow {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  /* Centered to match .stripe-label's resting position exactly — this
     panel replaces that label on hover, and the slide-up motion (still
     driven by the transform below) was the intended effect, not a
     bottom-anchored final position. Anything other than dead center here
     makes the label visibly jump the moment the cursor lands on a badge. */
  align-items: center;
  overflow: hidden;
  color: var(--paper);
  pointer-events: none;
  background: var(--stripe-color);
  transform: translateY(105%);
  will-change: transform;
  transition: transform 220ms ease;
}

.stripe-flow-inner {
  display: flex;
  width: 100%;
  min-width: 100%;
  justify-content: center;
}

.stripe-flow-inner span {
  flex: 0 0 auto;
  padding: 0;
  color: var(--paper);
  font-family: var(--font-main);
  font-size: clamp(0.88rem, 1.6vw, 1.18rem);
  font-weight: 900;
  line-height: 1.18;
  text-transform: uppercase;
  white-space: nowrap;
}

.stripe-badge:hover .stripe-flow,
.stripe-badge:focus-visible .stripe-flow {
  transform: translateY(0);
}

.stripe-badge:hover .stripe-label,
.stripe-badge:focus-visible .stripe-label {
  opacity: 0;
}

.stripe-menu:hover .stripe-badge:not(:hover),
.stripe-menu:focus-within .stripe-badge:not(:focus-visible) {
  opacity: 0.94;
}

.hero-inner {
  position: static;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Bottom-anchored to match the mobile rule below and keep the action
     buttons pinned near the bottom edge of the hero, not floating mid-page. */
  align-items: end;
  width: min(1320px, calc(100% - 48px));
  min-height: 100vh;
  min-height: 100svh;
  /* Left-anchored with a modest, responsive inset instead of auto-centered
     — centering was pushing content further from the left edge than
     necessary on wide screens, reading as empty space rather than
     intentional margin. The right side stays flexible for the photo. */
  margin: 0 auto 0 clamp(24px, 4vw, 64px);
  padding: 48px 0;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(1320px, 100%);
}

.hero-brand-row {
  display: inline-grid;
  grid-template-columns: minmax(0, max-content) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  max-width: 100%;
  margin-bottom: 30px;
}

.roots-wordmark {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.roots-wordmark img {
  display: block;
  height: clamp(30px, 7.5vw, 92px);
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  object-fit: contain;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--yellow);
  font-family: var(--font-main);
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-main);
  line-height: 1.08;
}

h1 {
  max-width: none;
  font-size: clamp(3.2rem, 9vw, 9.8rem);
  font-weight: 700;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(2.2rem, 5.5vw, 5.8rem);
  font-weight: 700;
}

.scroll-float {
  overflow: visible;
}

.scroll-float-text {
  display: inline-block;
  line-height: 1.08;
}

.scroll-float-word {
  display: inline-block;
  white-space: nowrap;
}

.char {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(24px) scale(0.96);
  transform-origin: 50% 70%;
  will-change: opacity, filter, transform;
}

h3 {
  font-size: 1.18rem;
}

.hero-subtitle {
  max-width: 820px;
  margin: 28px 0 0;
  color: #4e473c;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 42px;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 2px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  font-family: var(--font-main);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 160ms ease, color 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

/* A real, filled button — not just colored text like the base .button —
   specifically for the diary link. First-time visitors should be funneled
   toward the diary hard, since it's the site's best content; previously
   this was the same small uppercase text-link treatment as every other
   link on the page, competing with nothing standing out. */
.button-primary {
  padding: 26px 58px;
  color: var(--paper);
  background: var(--red);
  border-radius: 999px;
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  letter-spacing: 0.02em;
  box-shadow: 0 16px 34px rgba(var(--ink-rgb), 0.28);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.button-primary:hover,
.button-primary:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 20px 40px rgba(var(--ink-rgb), 0.34);
}

.button-light {
  color: var(--green);
}

.button-light:hover,
.button-light:focus-visible {
  color: var(--ink);
}

.site-lower {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--near-black);
}

.site-lower::before {
  position: absolute;
  inset: -18vh -22vw 170px;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 10%, rgba(0, 120, 69, 0.3), transparent 32%),
    radial-gradient(ellipse at 88% 18%, rgba(239, 159, 0, 0.24), transparent 34%),
    radial-gradient(ellipse at 78% 52%, rgba(212, 29, 25, 0.2), transparent 34%),
    radial-gradient(ellipse at 14% 82%, rgba(0, 68, 148, 0.28), transparent 36%),
    linear-gradient(120deg, transparent 0 12%, rgba(0, 120, 69, 0.15) 22%, transparent 34%),
    linear-gradient(127deg, transparent 24%, rgba(239, 159, 0, 0.14) 38%, transparent 52%),
    linear-gradient(114deg, transparent 48%, rgba(212, 29, 25, 0.13) 62%, transparent 74%),
    linear-gradient(128deg, transparent 64%, rgba(0, 68, 148, 0.15) 78%, transparent 92%);
  filter: blur(8px);
  opacity: 0.9;
}

.site-lower > .section {
  position: relative;
  z-index: 1;
}

.section {
  position: relative;
  isolation: isolate;
  padding: clamp(58px, 8vh, 84px) 28px;
  background: transparent;
  scroll-margin-top: 12vh;
}

.section::after {
  display: none;
}

.section > * {
  position: relative;
  z-index: 1;
}

.section-heading {
  width: min(920px, 100%);
  margin: 0 auto clamp(28px, 4vh, 42px);
}

.section-heading .eyebrow {
  color: var(--green);
}

.before-section {
  color: var(--paper);
  background: transparent;
  padding-bottom: 24px;
}

.about-section {
  padding-top: clamp(54px, 7vh, 82px);
}

.journey-section {
  padding-top: clamp(96px, 14vh, 160px);
}

.journey-section .diary-carousel {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 520ms ease, transform 620ms var(--ease-reveal);
}

.journey-section.is-content-visible .diary-carousel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.before-section .section-heading .eyebrow {
  color: var(--yellow);
}

.before-section .story-copy {
  border-left-color: var(--green);
}

.before-section .story-copy:nth-child(2) {
  border-color: var(--yellow);
}

.before-section .story-copy p {
  color: rgba(255, 253, 248, 0.72);
}

.archive-logo-stage {
  position: relative;
  width: 100%;
  padding: 12px 0 8px;
}

.archive-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vw, 46px);
  width: min(1180px, 100%);
  margin: 0 auto;
}

.archive-logo-card {
  flex: 0 0 auto;
  width: clamp(130px, 13vw, 210px);
  max-width: 40vw;
  margin: 0;
}

.archive-logo-card-focus {
  width: clamp(150px, 15vw, 240px);
}

.archive-logo-card img {
  width: 100%;
  height: auto;
  max-height: clamp(150px, 24vw, 260px);
  object-fit: contain;
}

.archive-logo-link {
  display: block;
  cursor: pointer;
  border-radius: var(--radius);
  transition: transform 220ms ease;
}

.archive-logo-link:hover,
.archive-logo-link:focus-visible {
  transform: scale(1.08);
}

.archive-logo-link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 6px;
}

.archive-logo-link[aria-disabled="true"] {
  cursor: default;
}

.before-documentary {
  position: relative;
  width: min(820px, 100%);
  margin: clamp(40px, 6vh, 64px) auto 0;
  padding: 0 28px;
  text-align: center;
}

/* Reveal-on-scroll for the "before" and "about" sections, driven by the
   IntersectionObserver in site.js: each element fades/slides in the first
   time it scrolls into view, then is left alone. */
.before-documentary,
#about-title {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 520ms ease, transform 560ms var(--ease-reveal);
}

.before-documentary.is-visible,
#about-title.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.about-section .story-copy,
.about-section .identity-strip {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 520ms ease, transform 560ms var(--ease-reveal);
}

.about-section .story-copy.is-visible,
.about-section .identity-strip.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.about-section .story-copy:nth-of-type(2).is-visible {
  transition-delay: 140ms;
}

.about-section .identity-strip.is-visible {
  transition-delay: 280ms;
}

.documentary-intro {
  margin: 0 0 28px;
  color: rgba(255, 253, 248, 0.86);
  font-size: clamp(1.04rem, 1.6vw, 1.24rem);
  font-weight: 400;
  line-height: 1.65;
  /* .before-documentary (the parent) centers text for the shorter toggle
     button above this — fine for that, but this is a full paragraph of
     prose, and centered multi-line body text is harder to read than
     left-aligned. Overriding just here, not on the parent, since the
     toggle button should stay centered. */
  text-align: left;
}

.documentary-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 280px);
  min-height: 48px;
  padding: 12px 22px;
  overflow: hidden;
  color: var(--paper);
  background: var(--near-black);
  border: 2px solid rgba(255, 253, 248, 0.9);
  border-radius: 999px;
  font-family: var(--font-main);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.22);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.documentary-toggle::before {
  display: none;
}

.documentary-toggle:hover,
.documentary-toggle:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 0 12px 28px rgba(var(--ink-rgb), 0.3);
  transform: translateY(-2px);
}

.documentary-toggle:hover::before,
.documentary-toggle:focus-visible::before,
.before-documentary.is-open .documentary-toggle::before {
  display: none;
}

.documentary-detail {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  opacity: 0;
  text-align: left;
  contain: layout paint;
  transform: translate3d(0, -8px, 0);
  transition: opacity 180ms ease, transform 220ms ease;
}

/* Author styles win over the UA stylesheet's [hidden] { display: none },
   so the `display: grid` above was quietly cancelling the hidden
   attribute — the collapsed detail block was reserving its full height
   (four paragraphs' worth) at all times, just invisible via opacity.
   That reserved space is exactly the "big empty gap" below the toggle
   button before the About section. This restores the actual collapse. */
.documentary-detail[hidden] {
  display: none;
}

.before-documentary.is-open .documentary-detail {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.documentary-detail p {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  color: rgba(255, 253, 248, 0.76);
  font-weight: 400;
  line-height: 1.65;
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  transition: opacity 200ms ease, transform 240ms ease;
}

.documentary-detail p::before {
  position: absolute;
  top: 0.45em;
  bottom: 0.35em;
  left: 0;
  width: 4px;
  content: "";
  background: var(--detail-color, var(--yellow));
  border-radius: 999px;
}

.before-documentary.is-open .documentary-detail p {
  opacity: 1;
  transform: translateX(0);
}

.before-documentary.is-open .documentary-detail p:nth-child(2) {
  transition-delay: 70ms;
}

.before-documentary.is-open .documentary-detail p:nth-child(3) {
  transition-delay: 140ms;
}

.documentary-detail .documentary-note {
  margin-top: 4px;
  color: rgba(255, 253, 248, 0.82);
  font-size: clamp(0.96rem, 1.3vw, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
}

.before-documentary.is-open .documentary-detail p:nth-child(4) {
  transition-delay: 210ms;
}

.about-section,
.journey-section {
  color: var(--paper);
  background: transparent;
}

.about-section .section-heading .eyebrow,
.journey-section .section-heading .eyebrow {
  color: var(--yellow);
}

.about-section .story-copy p,
.diary-card p,
.identity-strip > span {
  color: rgba(255, 253, 248, 0.72);
}

/* Regular weight for this one specifically (not the shared rule above,
   which also covers the diary card body and the short identity-strip
   badges — those read better bold, this is multi-sentence prose). */
.about-section .story-copy p {
  font-weight: 400;
}

.story-flow {
  display: grid;
  grid-template-columns: 1fr 1fr 0.78fr;
  gap: 30px;
  align-items: start;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.story-copy {
  padding-left: 22px;
  border-left: 4px solid var(--green);
}

.story-copy:nth-child(2) {
  border-color: var(--yellow);
}

.story-copy p {
  margin: 16px 0 0;
  color: var(--muted);
}

.identity-strip {
  display: grid;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.identity-strip img {
  width: 100%;
  max-width: 240px;
}

.identity-strip a {
  display: inline-flex;
  width: fit-content;
  border-radius: var(--radius);
}

.identity-strip a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 6px;
}

.identity-strip > span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: lowercase;
}

.identity-strip > span::before {
  width: 10px;
  height: 10px;
  margin-right: 9px;
  content: "";
  background: var(--yellow);
  border-radius: 50%;
}

.identity-strip > span:nth-child(3)::before {
  background: var(--green);
}

.identity-strip > span:nth-child(4)::before {
  background: var(--red);
}

.diary-carousel {
  position: relative;
  width: auto;
  margin: 0 calc(50% - 50vw);
  padding: 8px max(28px, calc((100vw - 1180px) / 2)) 48px;
  overflow: hidden;
  --active-color: var(--green);
}

.diary-carousel::before {
  position: absolute;
  inset: 12% 12vw 8%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 28% 34%, color-mix(in srgb, var(--active-color) 34%, transparent), transparent 54%),
    radial-gradient(ellipse at 74% 62%, rgba(255, 253, 248, 0.07), transparent 48%);
  filter: blur(12px);
  opacity: 0.74;
  transition: background 420ms ease;
}

.diary-carousel-viewport {
  position: relative;
  z-index: 1;
  min-height: clamp(390px, 58vh, 540px);
  overflow: visible;
  perspective: 1200px;
  touch-action: pan-y;
}

.diary-carousel-track {
  display: flex;
  gap: clamp(18px, 2.6vw, 34px);
  align-items: stretch;
  width: max-content;
  min-width: max-content;
  cursor: grab;
  transform-style: preserve-3d;
  will-change: transform;
  user-select: none;
}

.diary-carousel.is-dragging .diary-carousel-track {
  cursor: grabbing;
}

.diary-card {
  position: relative;
  display: grid;
  flex: 0 0 clamp(250px, 25vw, 360px);
  grid-template-rows: auto 1fr;
  min-height: clamp(340px, 48vh, 480px);
  padding: clamp(20px, 2.1vw, 28px);
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.18), transparent 27%),
    var(--date-color);
  border: 0;
  border-radius: 0;
  box-shadow: 0 22px 50px rgba(var(--ink-rgb), 0.26);
  transform-origin: 50% 58%;
  transition: opacity 260ms ease;
  will-change: transform, opacity;
}

.diary-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
}

.diary-card-date {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.diary-card-date strong {
  color: var(--paper);
  font-size: clamp(4.6rem, 7.4vw, 7.4rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.78;
  text-shadow: 0 20px 44px rgba(var(--ink-rgb), 0.26);
}

.diary-card-date span,
.diary-card-meta span {
  color: rgba(255, 253, 248, 0.84);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.diary-card-copy {
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  gap: 12px;
}

.diary-card h3 {
  max-width: 12ch;
  color: var(--paper);
  font-size: clamp(1.28rem, 1.9vw, 1.95rem);
}

.diary-card p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: 0.88rem;
}

.diary-card-points {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  color: rgba(255, 253, 248, 0.82);
  font-size: 0.86rem;
  line-height: 1.16;
  list-style: none;
}

.diary-card-points li {
  position: relative;
  padding-left: 14px;
}

.diary-card-points li::before {
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: rgba(255, 253, 248, 0.88);
  border-radius: 50%;
}

.diary-card .entry-link {
  color: var(--paper);
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.diary-card:not(.is-active) .diary-card-copy p,
.diary-card:not(.is-active) .diary-card-points,
.diary-card:not(.is-active) .entry-link {
  opacity: 0;
}

.diary-card.is-active {
  filter: saturate(1.06);
}

.diary-carousel-control {
  position: absolute;
  top: calc(50% - 28px);
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--paper);
  background: rgba(255, 253, 248, 0.1);
  border: 1px solid rgba(255, 253, 248, 0.2);
  border-radius: 50%;
  font-family: var(--font-main);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.diary-carousel-control:hover,
.diary-carousel-control:focus-visible {
  background: rgba(255, 253, 248, 0.2);
  transform: translateY(-2px);
}

.diary-carousel-control-prev {
  left: max(12px, calc((100vw - 1180px) / 2 - 70px));
}

.diary-carousel-control-next {
  right: max(12px, calc((100vw - 1180px) / 2 - 70px));
}

.diary-carousel-dots {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: min(780px, 100%);
  margin: 16px auto 0;
}

.diary-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: color-mix(in srgb, var(--dot-color) 62%, rgba(255, 253, 248, 0.28));
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.48;
  transition: transform 180ms ease, opacity 180ms ease;
}

.diary-dot.is-active,
.diary-dot:hover,
.diary-dot:focus-visible {
  opacity: 1;
  transform: scale(1.45);
}

.partners {
  padding-top: clamp(40px, 6vh, 66px);
  padding-bottom: clamp(42px, 7vh, 72px);
  color: var(--ink);
  background: var(--paper);
}

.partners::after {
  display: block;
  position: absolute;
  inset: 0 -16vw auto;
  z-index: 0;
  height: 120px;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 28%, rgba(0, 120, 69, 0.15), transparent 36%),
    radial-gradient(ellipse at 38% 10%, rgba(239, 159, 0, 0.13), transparent 36%),
    radial-gradient(ellipse at 63% 24%, rgba(212, 29, 25, 0.11), transparent 38%),
    radial-gradient(ellipse at 84% 12%, rgba(0, 68, 148, 0.14), transparent 38%);
  filter: blur(14px);
  opacity: 0.7;
}

.partners .section-heading {
  margin-bottom: 14px;
  text-align: center;
}

.partner-rider {
  position: relative;
  width: auto;
  margin: 6px calc(50% - 50vw) 0;
  padding: 10px 0 14px;
  overflow: hidden;
  background: var(--paper);
}

.logoloop {
  --logoloop-gap: clamp(48px, 6vw, 88px);
  --logoloop-logoHeight: clamp(58px, 5.6vw, 86px);
  --logoloop-fadeColor: var(--paper);
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.logoloop.is-dragging {
  cursor: grabbing;
}

.logoloop__track {
  position: relative;
  z-index: 0;
  display: flex;
  width: max-content;
  user-select: none;
  will-change: transform;
}

.logoloop__list {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  line-height: 1;
}

.logoloop__link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  border-radius: var(--radius);
  text-decoration: none;
}

.logo-rider-card {
  display: grid;
  width: clamp(188px, 16vw, 260px);
  min-width: clamp(188px, 16vw, 260px);
  min-height: clamp(112px, 10vw, 142px);
  gap: 13px;
  place-items: center;
  font-family: var(--font-main);
  font-weight: 700;
  text-align: center;
}

.logo-rider-card img {
  display: block;
  width: auto;
  max-width: min(260px, 20vw);
  height: var(--logoloop-logoHeight);
  max-height: var(--logoloop-logoHeight);
  object-fit: contain;
  transition: transform 240ms ease;
  -webkit-user-drag: none;
  image-rendering: -webkit-optimize-contrast;
  pointer-events: none;
}

.logo-rider-card-prominent img {
  max-width: min(340px, 25vw);
  height: calc(var(--logoloop-logoHeight) * 1.12);
  max-height: calc(var(--logoloop-logoHeight) * 1.12);
}

.logo-rider-card-bmz img {
  height: calc(var(--logoloop-logoHeight) * 1.25);
  max-height: calc(var(--logoloop-logoHeight) * 1.25);
}

.logo-rider-card-forum img {
  height: calc(var(--logoloop-logoHeight) * 1.2);
  max-height: calc(var(--logoloop-logoHeight) * 1.2);
}

.logo-rider-card > span {
  max-width: 220px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.16;
}

.logo-rider-card strong {
  color: var(--red);
  font-size: 1.18rem;
}

.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover strong {
  transform: scale(1.08);
  transform-origin: center;
}

.logoloop--fade::before,
.logoloop--fade::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: clamp(42px, 9%, 150px);
  content: "";
  pointer-events: none;
}

.logoloop--fade::before {
  left: 0;
  background: linear-gradient(to right, var(--logoloop-fadeColor) 0%, rgba(255, 253, 248, 0) 100%);
}

.logoloop--fade::after {
  right: 0;
  background: linear-gradient(to left, var(--logoloop-fadeColor) 0%, rgba(255, 253, 248, 0) 100%);
}

.section-link-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: min(1180px, 100%);
  margin: clamp(8px, 2.2vh, 22px) auto 0;
}

.section-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 14px clamp(24px, 4vw, 52px) 12px;
  color: var(--paper);
  background: var(--near-black);
  border: 2px solid rgba(255, 253, 248, 0.92);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--yellow);
  font-size: clamp(0.86rem, 1.2vw, 1.04rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.section-link-button:hover,
.section-link-button:focus-visible {
  background: #111;
  box-shadow: 0 0 0 3px var(--yellow), 0 16px 34px rgba(var(--ink-rgb), 0.24);
  transform: translateY(-2px);
}

.section-link-button-dark {
  border-color: var(--paper);
  box-shadow: 0 0 0 3px var(--ink);
}

.section-link-button-dark:hover,
.section-link-button-dark:focus-visible {
  box-shadow: 0 0 0 3px var(--ink), 0 16px 34px rgba(var(--ink-rgb), 0.2);
}

.subpage {
  --subpage-edge-offset: clamp(18px, 2vw, 34px);
  min-height: 100vh;
  color: var(--paper);
  background: var(--near-black);
}

.subpage-shell {
  position: relative;
  min-height: 100vh;
  padding: var(--subpage-edge-offset) clamp(18px, 4vw, 58px) clamp(26px, 4.5vw, 70px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 10% 12%, rgba(0, 120, 69, 0.23), transparent 38%),
    radial-gradient(ellipse at 88% 10%, rgba(212, 29, 25, 0.2), transparent 40%),
    radial-gradient(ellipse at 20% 92%, rgba(0, 68, 148, 0.18), transparent 40%),
    radial-gradient(ellipse at 76% 76%, rgba(239, 159, 0, 0.18), transparent 42%),
    var(--near-black);
}

.subpage-hero,
.subpage-content,
.subpage-topbar,
.subpage-day-index {
  position: relative;
  z-index: 1;
}

.subpage-topbar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, 100%);
  margin: 0 auto clamp(22px, 4vh, 42px);
  gap: 18px;
}

.subpage .language-switch {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--subpage-edge-offset));
  right: calc(env(safe-area-inset-right, 0px) + var(--subpage-edge-offset));
  z-index: 30;
  color: var(--ink);
}

.subpage-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 18px 8px;
  color: var(--paper);
  background: rgba(255, 253, 248, 0.08);
  border: 1px solid rgba(255, 253, 248, 0.2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transition: background 180ms ease, transform 180ms ease;
}

.subpage-back:hover,
.subpage-back:focus-visible {
  background: rgba(255, 253, 248, 0.16);
  transform: translateY(-1px);
}

.subpage-hero {
  width: min(1180px, 100%);
  margin: 0 auto clamp(30px, 5vw, 54px);
}

.subpage-hero h1 {
  max-width: 980px;
  margin: 0;
  color: var(--paper);
  font-size: clamp(3rem, 8vw, 7.6rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.84;
  text-transform: uppercase;
}

.subpage-hero p {
  max-width: 780px;
  margin: clamp(18px, 2vw, 28px) 0 0;
  color: rgba(255, 253, 248, 0.74);
  font-size: clamp(1.04rem, 1.45vw, 1.32rem);
  font-weight: 400;
  line-height: 1.45;
}

.subpage-hero .subpage-kicker {
  max-width: none;
  margin-top: clamp(16px, 2vw, 24px);
  color: var(--yellow);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.subpage-thanks {
  width: min(880px, 100%);
  margin-top: clamp(18px, 2.4vw, 32px);
}

.subpage-thanks h2 {
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  color: var(--ink);
  font-size: clamp(1.5rem, 2.3vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
}

.subpage-thanks p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  font-weight: 400;
  line-height: 1.42;
  text-transform: none;
}

.subpage-thanks p + p {
  margin-top: clamp(10px, 1.4vw, 16px);
}

.subpage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.subpage-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 12px 20px 10px;
  color: var(--paper);
  background: var(--near-black);
  border: 1px solid rgba(255, 253, 248, 0.24);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.subpage-content {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.diary-festival-invite {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  width: min(1180px, 100%);
  margin: 0 auto clamp(28px, 4vw, 46px);
  padding: clamp(6px, 1vw, 12px) 0 clamp(6px, 1vw, 12px) clamp(20px, 2.4vw, 32px);
}

.diary-festival-copy > span {
  display: block;
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.diary-festival-copy h2 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(1.65rem, 3vw, 3.1rem);
  font-weight: 900;
  line-height: 0.96;
}

.diary-festival-copy p {
  max-width: 760px;
  margin: 12px 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: clamp(0.96rem, 1.25vw, 1.14rem);
  font-weight: 400;
  line-height: 1.48;
}

.diary-festival-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 16px 24px 14px;
  color: var(--near-black);
  background: var(--paper);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--yellow);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.diary-festival-button:hover,
.diary-festival-button:focus-visible {
  box-shadow: 0 0 0 3px var(--yellow), 0 16px 34px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.diary-festival-button > span:last-child {
  font-size: 1.35rem;
  line-height: 0.7;
}

.subpage-day-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(1180px, 100%);
  margin: 0 auto clamp(22px, 3vw, 36px);
}

.subpage-day-index a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 8px 12px 6px;
  color: var(--paper);
  background: rgba(255, 253, 248, 0.08);
  border: 1px solid color-mix(in srgb, var(--day-color) 52%, rgba(255, 253, 248, 0.16));
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.62;
  transition: opacity 180ms ease, background 180ms ease, transform 180ms ease;
}

.subpage-day-index a.is-current {
  color: var(--near-black);
  background: var(--day-color);
  opacity: 1;
  transform: translateY(-1px);
}

.full-diary-grid {
  display: block;
}

.review-empty-state {
  max-width: 46ch;
  margin: 10vh auto;
  text-align: center;
  font-size: 1.1rem;
  color: var(--muted);
}

.diary-day-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(28px, 5vh, 64px) clamp(18px, 4.2vw, 62px);
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--day-color) 20%, transparent), transparent 30%),
    rgba(255, 253, 248, 0.045);
  border-left: 10px solid var(--day-color);
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  scroll-margin-top: 12vh;
  transform: translate3d(0, 34px, 0) scale(0.985);
  transition: opacity 460ms ease, transform 620ms var(--ease-reveal);
}

.diary-day-panel.is-current {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.diary-day-panel::after {
  position: absolute;
  top: 22px;
  right: clamp(18px, 3vw, 44px);
  width: clamp(42px, 7vw, 82px);
  height: 78%;
  content: "";
  pointer-events: none;
  background: var(--day-color);
  border-radius: 999px;
  opacity: 0.14;
  transform: rotate(7deg);
}

.diary-day-date {
  display: grid;
  align-content: start;
  gap: 16px;
}

.diary-day-date span {
  color: rgba(255, 253, 248, 0.82);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.diary-day-date strong {
  color: var(--day-color);
  font-size: clamp(4.2rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.82;
}

.diary-day-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(12px, 1.8vw, 20px);
  align-content: center;
  min-width: 0;
}

.diary-day-copy > span {
  color: rgba(255, 253, 248, 0.82);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.diary-day-copy h2 {
  max-width: 620px;
  margin: 0;
  color: var(--paper);
  font-size: clamp(2rem, 4.2vw, 4.7rem);
  font-weight: 900;
  line-height: 0.92;
}

.diary-day-copy p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 253, 248, 0.74);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 400;
  line-height: 1.5;
}

.diary-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(8px, 1.5vw, 18px);
}

.diary-media-slot {
  display: block;
  min-height: 0;
  padding: 0;
  color: rgba(255, 253, 248, 0.78);
  background: transparent;
  border-top: 0;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.diary-media-slot-panel {
  margin-top: 16px;
}

.diary-media-entry {
  display: grid;
  gap: 8px;
  margin: 0;
}

.diary-media-entry audio {
  width: 100%;
}

.diary-media-entry figcaption {
  color: rgba(255, 253, 248, 0.72);
  font-size: 0.72rem;
  line-height: 1.2;
  text-transform: none;
}

.diary-photo-gallery {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.diary-gallery-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 22px;
  color: var(--paper);
  background: var(--day-color);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.diary-gallery-toggle:hover,
.diary-gallery-toggle:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* A fixed-count preview row (not a full masonry reveal): the first
   DIARY_STRIP_PREVIEW_COUNT photos/videos (see subpages.js) render as a
   clean row of equal tiles, any further items stay in the DOM (so the
   lightbox can still page through all of them) but are hidden via
   .is-overflow, and the last visible tile gets a "+N" badge. Clicking any
   tile — including the +N one — opens the full lightbox, which already
   scans the whole day panel for every photo/video, so "jump back and
   forth" works across the complete set, not just what's shown here.

   Every tile below has an EXPLICIT width and height in px (via clamp, but
   still a concrete resolved number, not a percentage or aspect-ratio
   chain). That's deliberate: a grid/aspect-ratio-based version of this
   previously let a tile's height balloon to match something unrelated
   (an ancestor's min-height: 100vh) in some browsers. A fixed size can't
   inherit anyone else's height — it's the same number regardless of what
   any parent, sibling, or the media itself is doing. */
.diary-media-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 16px;
}

.diary-media-strip-item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  margin: 0;
  /* A grid/flex item's min-width defaults to auto, which for something
     with intrinsic size (a <video>) can mean "at least as wide as my
     natural content size" — even with width: 100% set below. That let a
     video tile force its whole grid column wider than the screen on
     mobile, pushing the block off the right edge. overflow: hidden alone
     doesn't prevent this, since it clips content after the track has
     already been sized; zeroing the minimum stops the oversized content
     from inflating the track's size calculation in the first place. */
  min-width: 0;
  min-height: 0;
  width: clamp(76px, 20vw, 128px);
  height: clamp(76px, 20vw, 128px);
  overflow: hidden;
  /* A video tile has no autoplay and no poster, so it can stay a blank,
     undecoded frame for a moment (or longer, on a slow connection) — with
     no background of its own, that blank tile was fully see-through
     against the dark diary panel, leaving only the small play icon
     floating with no visible box around it. A photo never shows this
     because it always paints over the tile immediately once loaded. */
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(var(--ink-rgb), 0.28);
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  filter: blur(8px);
  animation: diary-strip-item-in 700ms var(--ease-reveal) forwards;
  animation-delay: calc(var(--item-index, 0) * 60ms);
}

.diary-media-strip-item.is-overflow {
  display: none;
}

.diary-media-strip-item img,
.diary-media-strip-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

.diary-media-strip-item:hover img,
.diary-media-strip-item:hover video {
  transform: scale(1.06);
}

.diary-media-strip-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 248, 0.12);
  color: var(--paper);
  font-size: 1.6rem;
}

.diary-media-strip-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--paper);
  font-size: 1.3rem;
  text-shadow: 0 2px 10px rgba(var(--ink-rgb), 0.6);
}

.diary-media-strip-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 5, 0.6);
  color: var(--paper);
  font-family: var(--font-main);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 900;
}

@keyframes diary-strip-item-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .diary-media-strip-item {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + clamp(24px, 6vw, 64px))
    calc(env(safe-area-inset-right, 0px) + clamp(24px, 6vw, 64px))
    calc(env(safe-area-inset-bottom, 0px) + clamp(24px, 6vw, 64px))
    calc(env(safe-area-inset-left, 0px) + clamp(24px, 6vw, 64px));
  background: rgba(5, 5, 5, 0.94);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-stage {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
}

.lightbox-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  pointer-events: none;
  border: 4px solid rgba(255, 253, 248, 0.24);
  border-top-color: var(--yellow);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.lightbox.is-loading .lightbox-stage::after {
  opacity: 1;
  animation: lightbox-spin 800ms linear infinite;
}

@keyframes lightbox-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.lightbox-stage img,
.lightbox-stage video {
  max-width: min(100%, 1200px);
  max-height: 82vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(var(--ink-rgb), 0.5);
  transition: opacity 160ms ease;
}

.lightbox.is-loading .lightbox-stage img,
.lightbox.is-loading .lightbox-stage video {
  opacity: 0.42;
}

/* Shrink-wraps to the video's own rendered size (not the whole stage), so
   the quality pills below sit right at the video's corner instead of
   floating somewhere in a much larger invisible box. */
.lightbox-media-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.lightbox-media-wrap video {
  display: block;
}

.lightbox-quality {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  gap: 6px;
}

.lightbox-quality-option {
  padding: 6px 12px;
  color: var(--paper);
  background: rgba(5, 5, 5, 0.6);
  border: 1px solid rgba(255, 253, 248, 0.3);
  border-radius: 999px;
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.lightbox-quality-option:hover,
.lightbox-quality-option:focus-visible {
  background: rgba(5, 5, 5, 0.85);
}

.lightbox-quality-option[aria-pressed="true"] {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}

/* Solid-ish background of its own, not just relying on the lightbox's dark
   backdrop for contrast — a caption sitting close under a light-colored
   photo (pavement, stone, sky) was reading as nearly illegible pale text
   with nothing behind it. This guarantees readability regardless of what
   image or video happens to be above it. */
.lightbox-caption {
  display: inline-block;
  max-width: min(100%, 1200px);
  margin: 16px auto 0;
  padding: 8px 18px;
  color: var(--paper);
  background: rgba(5, 5, 5, 0.82);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
}

.lightbox-caption:empty {
  display: none;
}

.lightbox-counter {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(62px, 6vw, 86px));
  left: 50%;
  z-index: 202;
  min-width: 54px;
  margin: 0;
  padding: 6px 12px 5px;
  color: var(--paper);
  background: rgba(5, 5, 5, 0.7);
  border: 1px solid rgba(255, 253, 248, 0.2);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
}

.lightbox-counter[hidden] {
  display: none;
}

.lightbox-close,
.lightbox-nav {
  position: fixed;
  z-index: 201;
  display: grid;
  place-items: center;
  color: var(--paper);
  cursor: pointer;
  background: rgba(255, 253, 248, 0.12);
  border: 0;
  border-radius: 50%;
  transition: background 160ms ease;
}

.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  background: rgba(255, 253, 248, 0.22);
}

.lightbox-close {
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: calc(env(safe-area-inset-right, 0px) + 20px);
  width: 46px;
  height: 46px;
}

.lightbox-close::before {
  content: "×";
  font-size: 1.7rem;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
}

.lightbox-nav::before {
  font-size: 1.7rem;
  line-height: 1;
}

.lightbox-prev {
  left: calc(env(safe-area-inset-left, 0px) + 20px);
}

.lightbox-prev::before {
  content: "‹";
}

.lightbox-next {
  right: calc(env(safe-area-inset-right, 0px) + 20px);
}

.lightbox-next::before {
  content: "›";
}

.lightbox-nav[hidden] {
  display: none;
}

body.lightbox-open {
  overflow: hidden;
}

.partners-page {
  color: var(--ink);
  background: var(--paper);
}

.partners-page .subpage-shell {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 16% 18%, rgba(0, 120, 69, 0.09), transparent 34%),
    radial-gradient(ellipse at 42% 8%, rgba(239, 159, 0, 0.08), transparent 36%),
    radial-gradient(ellipse at 66% 20%, rgba(212, 29, 25, 0.07), transparent 36%),
    radial-gradient(ellipse at 84% 18%, rgba(0, 68, 148, 0.08), transparent 36%),
    var(--paper);
}

.partners-page .subpage-shell::before {
  display: none;
}

.partners-page .subpage-back,
.partners-page .subpage-button {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.partners-page .subpage-hero h1,
.partners-page .subpage-hero p {
  color: var(--ink);
}

.partners-page .subpage-hero p {
  color: var(--muted);
}

.partners-page .subpage-hero .subpage-kicker {
  color: var(--green);
}

.partners-page-grid {
  display: block;
}

.partner-overview-field {
  padding: clamp(10px, 2vw, 26px) 0 clamp(26px, 4vw, 52px);
}

.partner-overview-field h2 {
  margin: 0 auto clamp(26px, 4vw, 48px);
  color: var(--ink);
  font-size: clamp(1.7rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.partner-overview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4.5vw, 72px) clamp(34px, 6vw, 92px);
  align-items: center;
  justify-content: center;
}

.partner-overview-item {
  display: grid;
  flex: 0 1 clamp(190px, 19vw, 280px);
  gap: 14px;
  place-items: center;
  min-height: 150px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  text-align: center;
  transition: transform 180ms ease, opacity 180ms ease;
}

.partner-overview-item:hover,
.partner-overview-item:focus-visible {
  opacity: 0.86;
  transform: translateY(-2px);
}

.partner-overview-item img {
  width: auto;
  max-width: min(340px, 100%);
  max-height: 112px;
  object-fit: contain;
}

.partner-overview-item span {
  max-width: 320px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.18;
}

.scroll-top {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 50;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--paper);
  cursor: pointer;
  background: var(--red);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.lightbox-open .scroll-top {
  opacity: 0;
  pointer-events: none;
}

.scroll-top:hover,
.scroll-top:focus-visible {
  transform: translateY(-2px);
}

/* Four-colour page transition — a single skewed gradient panel that wipes
   across the screen. Rebuilt from a version that animated FIVE oversized
   layers at once: a full-screen gradient ::before fading opacity, plus four
   ~76vw x 186vh <span> stripes, each permanently promoted with
   will-change and each sliding ~380vw. Compositing five huge layers every
   frame is what made it stutter on phones — earlier rewrites only ever
   touched the JS timing, never this. One moving layer instead of five is
   the actual fix for the lag.

   The container is just a fixed, clipped viewport; its ::before is the only
   thing that paints or moves, and it's promoted to a GPU layer only while
   the overlay is on screen (see .is-visible::before), so nothing sits in
   GPU memory when idle. */
.page-swipe {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  contain: layout paint style;
}

.page-swipe::before {
  content: "";
  position: absolute;
  /* Oversized and offset so the -9deg skew can never expose an uncovered
     corner at the fully-covering position, whatever the viewport ratio.
     The overhang is clipped by the container's overflow: hidden. */
  top: -20%;
  left: -30%;
  width: 160%;
  height: 140%;
  background: linear-gradient(
    100deg,
    var(--green) 0 34.375%,
    var(--yellow) 34.375% 50%,
    var(--red) 50% 65.625%,
    var(--blue) 65.625% 100%
  );
  transform: translate3d(-165%, 0, 0) skewX(-9deg);
  transition: transform 620ms cubic-bezier(0.76, 0, 0.24, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.page-swipe.is-visible {
  visibility: visible;
}

/* Promote to its own compositor layer only for as long as it's on screen. */
.page-swipe.is-visible::before {
  will-change: transform;
}

/* Off-screen left — the resting position and where an incoming page starts. */
.page-swipe.is-left::before {
  transform: translate3d(-165%, 0, 0) skewX(-9deg);
}

/* Fully covering the viewport. */
.page-swipe.is-cover::before {
  transform: translate3d(0, 0, 0) skewX(-9deg);
}

/* Off-screen right — the outgoing/reveal position. */
.page-swipe.is-right::before {
  transform: translate3d(165%, 0, 0) skewX(-9deg);
}

/* The four <span> stripes the old effect animated are no longer used; the
   single gradient panel above replaces them. Left in the markup (harmless)
   but never rendered, so no HTML across every page had to change. */
.page-swipe span {
  display: none;
}

@media (max-width: 980px) {
  .hero-inner,
  .story-flow {
    grid-template-columns: 1fr;
  }

  .diary-day-panel {
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100svh;
  }

  .diary-day-date strong {
    font-size: clamp(5rem, 22vw, 8rem);
  }

  .diary-carousel-control-prev {
    left: 16px;
  }

  .diary-carousel-control-next {
    right: 16px;
  }
}

@media (max-width: 720px) {
  .subpage {
    --subpage-edge-offset: 16px;
  }

  .page-swipe {
    display: none !important;
  }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100lvh;
  }

  .hero-photo {
    inset: -1px;
    background-position: 58% center;
    transform: none;
  }

  .hero-tint {
    background:
      linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.78) 48%, rgba(255, 253, 248, 0.14) 100%),
      linear-gradient(0deg, rgba(255, 253, 248, 0.72) 0%, rgba(255, 253, 248, 0.28) 38%, rgba(255, 253, 248, 0.04) 100%);
  }

  .language-switch {
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    padding: 3px;
  }

  .hero .language-switch {
    position: absolute;
    z-index: 30;
  }

  .subpage .language-switch {
    position: absolute;
    z-index: 30;
  }

  .language-switch button {
    min-width: 35px;
    min-height: 26px;
    font-size: 0.69rem;
  }

  .hero-inner {
    width: calc(100% - 34px);
    align-items: stretch;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100lvh;
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + clamp(48px, 6.5svh, 64px)) 0 calc(env(safe-area-inset-bottom, 0px) + clamp(96px, 13svh, 126px));
  }

  .hero-copy {
    display: grid;
    grid-template-rows: auto minmax(86px, 1fr) auto auto;
    align-items: center;
    width: 100%;
    min-height: calc(100lvh - 174px);
  }

  .hero-brand-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: clamp(38px, 7svh, 64px) auto 0;
  }

  .roots-wordmark {
    flex: 0 1 auto;
    justify-content: center;
    max-width: min(84vw, 360px);
    overflow: visible;
  }

  .roots-wordmark img {
    height: clamp(32px, 9.4vw, 42px);
    max-width: 100%;
  }

  .stripe-menu {
    --menu-width: min(312px, calc(100vw - 38px));
    --stripe-width: 13px;
    --stripe-gap: 13px;
    --open-row-height: 43px;
    --open-badge-height: 38px;
    --open-left: calc((var(--closed-width) - var(--menu-width)) / 2);
    height: 70px;
    max-width: none;
    flex: 0 0 auto;
    margin: clamp(48px, 7svh, 60px) auto 0;
    transform: rotate(0deg);
  }

  .stripe-menu:focus-within,
  .stripe-menu.is-menu-open {
    height: calc(var(--open-row-height) * 3 + var(--open-badge-height));
  }

  .stripe-badge {
    width: var(--stripe-width);
    height: 54px;
    box-shadow: 0 12px 26px rgba(var(--ink-rgb), 0.14);
  }

  .stripe-label,
  .stripe-flow-inner span {
    max-width: calc(var(--menu-width) - 32px);
    font-size: 0.66rem;
  }

  #hero-title {
    /* h1's normal clamp() floors at 3rem, which is too wide for narrow
       phones and wraps the title onto 4+ lines. That inflates hero-copy's
       height enough to push it (bottom-aligned via align-items: end) up
       into the absolutely-positioned language-switch pill at the top. */
    font-size: clamp(1.9rem, 8.4vw, 2.65rem);
    line-height: 0.96;
    text-align: center;
    white-space: nowrap;
  }

  .hero-text-stack {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 0;
    text-align: center;
  }

  .eyebrow {
    margin-bottom: 0;
    font-size: 0.88rem;
  }

  .hero-subtitle {
    max-width: 30ch;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    font-size: 0.94rem;
    line-height: 1.3;
  }

  .hero-actions {
    align-self: center;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    width: min(312px, 84vw);
    gap: 10px;
    margin-top: 16px;
  }

  .button {
    width: 100%;
    max-width: 100%;
  }

  .button-primary {
    width: 100%;
    min-height: 48px;
    padding: 14px 24px 12px;
    background: var(--red);
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 26px rgba(212, 29, 25, 0.28);
  }

  .button-light {
    width: 100%;
    min-height: 44px;
    padding: 11px 20px 9px;
    color: var(--paper);
    background: var(--green);
    border: 1px solid rgba(24, 114, 71, 0.72);
    border-radius: 999px;
    font-size: 0.84rem;
    box-shadow: 0 12px 24px rgba(24, 114, 71, 0.2);
  }

  .subpage-shell {
    padding: calc(env(safe-area-inset-top, 0px) + var(--subpage-edge-offset)) 18px 54px;
  }

  .subpage-topbar {
    align-items: flex-start;
    margin-bottom: 26px;
  }

  .subpage-hero h1 {
    font-size: clamp(2.8rem, 13vw, 5.4rem);
  }

  .subpage-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .diary-festival-invite {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-left: 18px;
  }

  .diary-festival-button {
    width: fit-content;
    max-width: 100%;
  }

  .section {
    padding: 76px 18px;
  }

  .journey-section {
    display: flex;
    min-height: auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(30px, 5svh, 44px) 0 clamp(34px, 6svh, 52px);
    scroll-margin-top: clamp(24px, 4svh, 34px);
  }

  .journey-section .section-heading {
    width: 100%;
    margin-bottom: 14px;
    padding: 0 18px;
  }

  .journey-section h2 {
    font-size: clamp(2.65rem, 12vw, 3.7rem);
  }

  /* .section's shorthand padding above resets padding-bottom too, which
     was quietly cancelling the smaller bottom padding .before-section
     sets on wider viewports (same specificity, later in the cascade) —
     restoring it here keeps the "before" section from ending in as much
     extra space as every other section on mobile. */
  .before-section {
    padding-bottom: 20px;
  }

  .partners {
    padding-top: 58px;
  }

  .before-documentary {
    margin-top: 32px;
    padding: 0 18px;
  }

  .archive-logo-card {
    width: clamp(100px, 26vw, 160px);
  }

  .diary-carousel {
    padding: 2px 18px 24px;
  }

  .diary-carousel-viewport {
    min-height: clamp(445px, 56svh, 515px);
    perspective: none;
  }

  .diary-card {
    flex-basis: min(82vw, 340px);
    grid-template-rows: auto auto;
    align-content: start;
    min-height: clamp(420px, 54svh, 490px);
    padding: clamp(22px, 6.5vw, 28px);
    box-shadow: 0 22px 52px rgba(var(--ink-rgb), 0.26);
  }

  .diary-card-date strong {
    font-size: clamp(5.4rem, 25vw, 7.1rem);
  }

  .diary-card-date span,
  .diary-card-meta span {
    font-size: 0.82rem;
  }

  .diary-card-copy {
    align-self: start;
    gap: 10px;
    margin-top: clamp(22px, 5.8svh, 38px);
  }

  .diary-card h3 {
    font-size: clamp(1.38rem, 6.4vw, 1.8rem);
  }

  .diary-card-points {
    gap: 7px;
    font-size: 0.9rem;
  }

  .diary-card .entry-link {
    font-size: 0.78rem;
  }

  .diary-carousel-dots {
    display: none;
  }

  .diary-dot {
    width: 8px;
    height: 8px;
  }

  .journey-section .section-link-row {
    margin-top: 8px;
    padding: 0 18px;
  }

  .journey-section .section-link-button {
    min-height: 42px;
    padding: 12px clamp(22px, 8vw, 36px) 10px;
    font-size: 0.8rem;
  }

  .diary-media-grid {
    grid-template-columns: 1fr;
    justify-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .diary-photo-gallery {
    justify-self: start;
    width: 100%;
    max-width: 100%;
  }

  /* 2x2 instead of a single row on mobile — the row version could wrap to
     one-tile-per-line on narrow phones since four clamp()-sized tiles
     don't reliably fit side by side under ~380px. grid-auto-rows is a
     fixed px number here on purpose (not aspect-ratio or an "auto" row) —
     a percentage/auto-sized grid row is exactly what caused tiles to
     balloon to page height in an earlier version of this component,
     because the browser had to guess a height before lazy images loaded.
     A literal px value needs no guessing. */
  .diary-media-strip {
    display: grid;
    justify-self: start;
    width: min(100%, 320px);
    max-width: 100%;
    margin-right: auto;
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(112px, 36vw, 148px);
    gap: 10px;
    overflow: visible;
  }

  .diary-media-strip-item {
    width: 100%;
    height: 100%;
  }

  .diary-media-slot {
    min-height: 0;
  }

  .diary-carousel-control {
    top: calc(50% - 22px);
    bottom: auto;
    width: 40px;
    height: 40px;
    font-size: 1.55rem;
  }

  .diary-carousel-control-prev {
    left: 18px;
  }

  .diary-carousel-control-next {
    right: 18px;
  }

  .lightbox {
    padding:
      calc(env(safe-area-inset-top, 0px) + 18px)
      calc(env(safe-area-inset-right, 0px) + 14px)
      calc(env(safe-area-inset-bottom, 0px) + 92px)
      calc(env(safe-area-inset-left, 0px) + 14px);
  }

  .lightbox-stage img,
  .lightbox-stage video {
    max-height: 66svh;
  }

  .lightbox-caption {
    max-width: calc(100vw - 28px);
    margin-top: 10px;
    padding: 8px 14px 7px;
    border-radius: 18px;
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .lightbox-counter {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 106px);
    font-size: 0.68rem;
  }

  .scroll-top {
    right: calc(env(safe-area-inset-right, 0px) + 18px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  }

  .partner-rider {
    margin-top: 12px;
    padding: 16px 0 28px;
  }

  .logoloop {
    --logoloop-gap: 42px;
    --logoloop-logoHeight: 48px;
  }

  .logo-rider-card {
    min-width: 150px;
  }

  .logo-rider-card img {
    max-width: 150px;
  }

  .logo-rider-card > span {
    font-size: 0.72rem;
  }

  /* The single-gradient page transition is sized in viewport percentages, so
     it adapts to mobile on its own — no separate stripe sizing needed here
     any more (the old four-stripe overrides lived at this spot). */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .logoloop__track {
    transform: translate3d(0, 0, 0) !important;
  }

  .logo-rider-card img {
    transition: none !important;
  }
}

.site-credit {
  display: grid;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 46px) clamp(18px, 4vw, 58px) clamp(18px, 3vw, 30px);
  place-items: center;
  color: rgba(255, 253, 248, 0.42);
  background: var(--near-black);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
}

.subpage-shell .site-credit {
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
  color: rgba(255, 253, 248, 0.48);
}

.diary-page .site-credit,
.diary-page .footer-legal,
.partners-page .site-credit,
.partners-page .footer-legal {
  background: none;
}

.partners-page .site-credit {
  color: var(--ink);
}

.footer-legal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 58px) clamp(28px, 4vw, 48px);
  background: var(--near-black);
}

.footer-legal-link {
  padding: 10px 22px;
  border-radius: 999px;
  color: var(--paper);
  font-family: var(--font-main);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.88;
  transition: opacity 200ms ease, transform 200ms ease;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-legal-link-green {
  background: var(--green);
}

.footer-legal-link-yellow {
  background: var(--yellow);
}

.footer-legal-link-red {
  background: var(--red);
}

.footer-legal-link-blue {
  background: var(--blue);
}