:root {
  --font-main: "League Spartan", Arial, sans-serif;
  --ink: #171410;
  --ink-rgb: 23, 20, 16;
  --paper: #fffdf8;
  --muted: #6f675b;
  --near-black: #050505;
  --green: #007845;
  --yellow: #EF9F00;
  --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;
  transition: opacity 200ms ease;
}

/* Language-switch crossfade — see runLanguageCrossfade() in
   page-transitions.js. Not full transparency: dimming rather than fully
   hiding keeps the page from reading as "gone" for the brief moment the
   text is actually swapping underneath. */
body.is-language-switching {
  opacity: 0.35;
}

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

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: 28px;
  right: 0;
  z-index: 8;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  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: 42px;
  min-height: 30px;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 0.78rem;
  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(260px, 34vw, 430px);
  --stripe-width: clamp(14px, 1.7vw, 22px);
  --stripe-gap: clamp(12px, 2vw, 24px);
  --open-row-height: 56px;
  --open-badge-height: 48px;
  --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: 124px;
  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: 88px;
  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: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.78rem, 1.4vw, 1.03rem);
  font-weight: 900;
  line-height: 1;
  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.8rem, 1.4vw, 1.05rem);
  font-weight: 900;
  line-height: 1;
  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: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  width: min(1180px, calc(100% - 48px));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 84px 0 clamp(74px, 11vh, 132px);
}

.hero-copy {
  width: min(1180px, 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;
  align-items: center;
  max-width: 100%;
}

.roots-wordmark img {
  display: block;
  height: clamp(28px, 6vw, 64px);
  width: auto;
  max-width: 100%;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--yellow);
  font-family: var(--font-main);
  font-size: 0.82rem;
  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(3rem, 7vw, 6.7rem);
  font-weight: 700;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.45rem);
  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: 700px;
  margin: 24px 0 0;
  color: #4e473c;
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.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: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 160ms ease, color 160ms ease;
}

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

.button-primary {
  color: var(--red);
}

.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);
  line-height: 1.65;
}

.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);
  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);
  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);
}

.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 {
  min-height: 100vh;
  color: var(--paper);
  background: var(--near-black);
}

.subpage-shell {
  position: relative;
  min-height: 100vh;
  padding: clamp(26px, 4.5vw, 70px) clamp(18px, 4vw, 58px);
  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 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, 100%);
  margin: 0 auto clamp(36px, 7vh, 74px);
  gap: 18px;
}

.subpage .language-switch {
  position: static;
  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);
  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: 700;
  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;
}

.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;
}

.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);
  line-height: 1.5;
}

.diary-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  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;
}

.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;
  margin-top: 16px;
}

.diary-media-strip-item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  /* 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: clamp(24px, 6vw, 64px);
  background: rgba(5, 5, 5, 0.94);
}

.lightbox[hidden] {
  display: none;
}

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

.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);
}

/* 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-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-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: 20px;
  right: 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: 20px;
}

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

.lightbox-next {
  right: 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: 18px;
  bottom: 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;
}

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

.page-swipe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  z-index: 120;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

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

.page-swipe span {
  --stripe-left: -18vw;
  --stripe-order: 0;
  position: absolute;
  top: -12vh;
  top: -12dvh;
  left: var(--stripe-left);
  width: max(40vw, 190px);
  height: 124vh;
  height: 124dvh;
  border-radius: 0;
  transform: translate3d(-175vw, 0, 0) skewX(-7deg);
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform 820ms cubic-bezier(0.83, 0, 0.17, 1);
  transition-delay: calc(var(--stripe-order) * 54ms);
  will-change: transform;
}

.page-swipe span:nth-child(1) {
  --stripe-left: -18vw;
  --stripe-order: 0;
  background: var(--green);
}

.page-swipe span:nth-child(2) {
  --stripe-left: 20vw;
  --stripe-order: 1;
  background: var(--yellow);
}

.page-swipe span:nth-child(3) {
  --stripe-left: 58vw;
  --stripe-order: 2;
  background: var(--red);
}

.page-swipe span:nth-child(4) {
  --stripe-left: 96vw;
  --stripe-order: 3;
  background: var(--blue);
}

.page-swipe.is-cover span {
  transform: translate3d(0, 0, 0) skewX(-7deg);
}

.page-swipe.is-right span {
  transform: translate3d(175vw, 0, 0) skewX(-7deg);
}

@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) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero-inner {
    width: calc(100% - 34px);
    min-height: 100vh;
    min-height: 100svh;
    gap: 34px;
    padding: 58px 0 clamp(64px, 12vh, 112px);
  }

  .hero-brand-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
  }

  .roots-wordmark {
    flex: 1 1 auto;
    max-width: calc(100vw - 132px);
  }

  .roots-wordmark img {
    height: clamp(20px, 9vw, 34px);
    max-width: 100%;
  }

  .stripe-menu {
    --menu-width: min(240px, 68vw);
    --stripe-width: 12px;
    --stripe-gap: 13px;
    --open-row-height: 51px;
    --open-badge-height: 44px;
    /* The stripe-menu sits right after the wordmark, near the right side of
       the row on a narrow screen. The desktop rule (--open-left: 0) grows the
       expanded badge rightward from there, which runs the menu straight off
       the edge of a phone screen. Anchoring the right edge to where the
       closed cluster's right edge already is, and growing left instead,
       keeps it within the viewport — there's reliably more open space under
       the wordmark to the left than there is past the actual screen edge. */
    --open-left: calc(var(--closed-width) - var(--menu-width));
    height: 96px;
    max-width: none;
    flex: 0 0 var(--closed-width);
  }

  .stripe-badge {
    width: var(--stripe-width);
    height: 68px;
  }

  .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(2rem, 9vw, 3rem);
  }

  .hero-subtitle {
    font-size: 1rem;
  }

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

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

  .subpage-shell {
    padding: 22px 18px 54px;
  }

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

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

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

  .section {
    padding: 76px 18px;
  }

  /* .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-right: 18px;
    padding-bottom: 68px;
    padding-left: 18px;
  }

  .diary-carousel-viewport {
    min-height: 520px;
  }

  .diary-card {
    flex-basis: min(78vw, 330px);
    min-height: 440px;
  }

  .diary-card-date strong {
    font-size: clamp(5.3rem, 24vw, 7.8rem);
  }

  .diary-media-grid {
    grid-template-columns: 1fr;
  }

  /* 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;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(130px, 38vw, 170px);
  }

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

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

  .diary-carousel-control {
    top: auto;
    bottom: 20px;
    width: 44px;
    height: 44px;
    font-size: 1.7rem;
  }

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

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

  .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;
  }

  .page-swipe span {
    top: -14vh;
    top: -14dvh;
    width: max(52vw, 210px);
    height: 128vh;
    height: 128dvh;
  }
}

@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: clamp(92px, 10vw, 132px);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 84px) clamp(18px, 4vw, 58px) clamp(24px, 3.5vw, 42px);
  place-items: center;
  color: rgba(255, 253, 248, 0.42);
  /* Fades from transparent (letting whatever sits above — the hero, or a
     subpage-shell's colored radial washes — show through and dissolve)
     into the flat page background, instead of a hard-edged box. */
  background: linear-gradient(180deg, transparent, var(--near-black) 140px);
  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);
}