/* Work Sans, served from this site (fonts/). One
   variable file per character set covers every weight used (300-600).
   Licence: fonts/OFL.txt (SIL Open Font License 1.1). */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/work-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/work-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Shot by Dylan: stylesheet

   Direction: the contact sheet. One typeface (Work Sans), set light and
   large for titles and plain for everything else. The colours are the
   track's: tarmac ground, chalk-white ink like the number boards, and kerb
   red for the main action and nothing much else, so the liveries in the
   photographs stay the loudest colour on the page. Frames are square-cornered
   and sit straight on the ground: no rings, no shadows, no rules. Surfaces
   are told apart by a small step in tone. The car number is shown as a
   roof board: a solid block with the number knocked out of it.

   Contents
     1  Tokens and base
     2  Header, menu, announcement banner
     3  Buttons, plates, chips, forms
     4  Home
     5  Gallery cards, gallery list
     6  Album: photo mosaic, lightbox
     7  Page heroes, drivers, profile
     8  Legal prose, contact, footer
   ========================================================================== */

/* 1 ───────── Tokens and base ───────────────────────────────────────────── */

:root {
  --bg: #121314;            /* tarmac */
  --bg-rgb: 18, 19, 20;
  --surface: #1c1d1f;
  --surface-rgb: 28, 29, 31;
  --surface-raised: #27292b;
  --ink: #f2f2ef;           /* chalk white */
  --ink-rgb: 242, 242, 239;
  --ink-dim: #a0a3a7;
  --line: rgba(242, 242, 239, 0.16);
  --line-strong: rgba(242, 242, 239, 0.38);
  --amber: #e0102a;         /* kerb red: the accent (name kept for admin.css) */
  --amber-ink: #ffffff;
  --plate: #f2f2ef;
  --plate-ink: #121314;
  --status-error: #ff7a66;
  --status-success: #6fd39b;

  --font-display: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-body); /* taste-skill-ignore: alias to the text face for admin.css */

  /* Five sizes do all the work */
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.3125rem, 1.05rem + 1vw, 2.125rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --step-display: clamp(3.25rem, 1rem + 8vw, 9.5rem);

  --container: 1400px;
  --gutter: clamp(1rem, 2.6vw, 2.25rem);
  --header-h: 64px;
  --section-gap: clamp(5rem, 11vw, 10rem);

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  --shadow-soft: 0 24px 48px rgba(0, 0, 0, 0.45);
  --shadow-softer: none;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Height of the announcement banner while it's showing (set by
     js/banner.js); 0 otherwise. The header and page headings add it. */
  --banner-h: 0px;
}

:root[data-theme="light"] {
  --bg: #f4f4f2;
  --bg-rgb: 244, 244, 242;
  --surface: #e6e6e3;
  --surface-rgb: 230, 230, 227;
  --surface-raised: #ffffff;
  --ink: #121314;
  --ink-rgb: 18, 19, 20;
  --ink-dim: #55585c;
  --line: rgba(18, 19, 20, 0.16);
  --line-strong: rgba(18, 19, 20, 0.4);
  --amber: #c00a22;
  --amber-ink: #ffffff;
  --plate: #121314;
  --plate-ink: #f4f4f2;
  --status-error: #b2341f;
  --status-success: #1d6b45;

  --shadow-soft: 0 24px 48px rgba(18, 19, 20, 0.14);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  scrollbar-color: var(--line-strong) var(--bg);
}

html[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

::selection {
  background: var(--amber);
  color: var(--amber-ink);
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1;
  text-wrap: balance;
}

h3 {
  letter-spacing: -0.02em;
}

p {
  max-width: 64ch;
  text-wrap: pretty;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

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

/* A plain small heading. Only the admin panel still uses it. */
.section-tag { /* taste-skill-ignore: admin panel headings only */
  display: block;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 0.75rem;
}

.section-tag a {
  color: inherit;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.8s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* 2 ───────── Header, menu, banner ──────────────────────────────────────── */

/* A plain bar across the top, on the page's own ground. No backdrop-filter,
   filter or transform on the header itself: it would become the anchor for
   the fixed mobile menu and its dimming layer. */
.site-header {
  position: fixed;
  top: var(--banner-h);
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background: var(--bg);
}

.site-header::before {
  content: none;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  transition: opacity 0.2s ease;
}

.brand:hover {
  opacity: 0.75;
}

.brand .brand-accent {
  color: inherit;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav a {
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-dim);
  padding: 0.7rem 0.75rem;
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

/* The current-page underline is a bar that also slides in under any link
   you point at, from the left, so hover and "you are here" are one idea. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 0.5rem;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s var(--ease-out);
}

.theme-toggle:hover {
  background: var(--surface-raised);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

.theme-toggle .icon-moon {
  display: none;
}

html[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

html[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  margin-right: -10px;
  transition: transform 0.15s var(--ease-out);
}

.nav-toggle:active {
  transform: scale(0.9);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

.nav-toggle .bar {
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle.is-open .bar-top {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.is-open .bar-mid {
  opacity: 0;
}

.nav-toggle.is-open .bar-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 101;
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
  }

  .nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
  }

  .site-nav {
    position: fixed;
    inset: 0 0 auto auto;
    top: 0;
    height: 100dvh;
    width: min(84vw, 360px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0 2rem;
    background: var(--surface);
    box-shadow: var(--shadow-soft); /* taste-skill-ignore: the open drawer floats */
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out);
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav a {
    font-size: 2.25rem;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--ink);
    padding: 0.3rem 0;
  }

  .site-nav a[aria-current="page"] {
    color: var(--amber);
    text-decoration: none;
  }

  .theme-toggle {
    margin-left: 0;
    margin-top: 1.25rem;
    background: var(--surface-raised);
  }
}

/* Announcement banner: one line of plain text across the very top of every
   public page, set (and scheduled) from the admin panel. Fixed above the
   header, which moves down by --banner-h. A step lighter than the ground. */
.site-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem var(--gutter);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: 500;
  line-height: 1.4;
  transform: translateY(-100%);
  transition: transform 0.25s var(--ease-out);
}

.site-banner.is-visible {
  transform: translateY(0);
}

.site-banner::before {
  content: "";
  flex: 0 0 36px;
}

.site-banner-text {
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
  padding: 0.25rem 0;
}

.site-banner-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s var(--ease-out);
}

.site-banner-close:hover {
  background: var(--surface-raised);
  color: var(--ink);
}

.site-banner-close:active {
  transform: scale(0.92);
}

.site-banner-close svg {
  width: 16px;
  height: 16px;
}

.site-banner--preview {
  position: static;
  transform: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 3 ───────── Buttons, plates, chips, forms ─────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.4rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.15s var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--amber);
  color: var(--amber-ink);
}

.btn-primary:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn svg {
  width: 16px;
  height: 16px;
}

/* The roof board: every car number is a solid block with the figures
   knocked out of it. */
.plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  padding: 0.12em 0.45em;
  background: var(--plate);
  color: var(--plate-ink);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plate--lg {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  padding: 0.06em 0.4em;
}

/* Filter chips (drivers) */
.driver-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2rem;
}

.driver-filters:empty {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 1.05rem;
  background: var(--surface);
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s var(--ease-out);
}

.filter-chip:hover {
  background: var(--surface-raised);
}

.filter-chip:active {
  transform: scale(0.96);
}

.filter-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.filter-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

/* Form fields (admin panel, profile editor, list search) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

.field label {
  display: block;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.field input,
.field textarea,
.field select,
.search-input {
  width: 100%;
  background: var(--surface);
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  padding: 0.9rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.field input::placeholder,
.field textarea::placeholder,
.search-input::placeholder {
  color: var(--ink-dim);
}

.field select {
  cursor: pointer;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.search-input:focus {
  border-color: var(--amber);
  background: var(--surface-raised);
  outline: none;
}

.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

html:not([data-theme="light"]) .field input[type="date"]::-webkit-calendar-picker-indicator,
html:not([data-theme="light"]) .field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.form-note {
  font-size: var(--step-small);
  color: var(--ink-dim);
}

/* Loading placeholders: a flat tone that breathes */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.skeleton {
  background: var(--surface);
  animation: breathe 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

.skeleton-primary { aspect-ratio: 4 / 3; }
.skeleton-secondary { aspect-ratio: 16 / 10; }
.skeleton-row { aspect-ratio: 5 / 4; }

.gallery-empty {
  padding: 3.5rem 2rem;
  color: var(--ink);
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background: var(--surface);
}

.gallery-empty svg {
  width: 28px;
  height: 28px;
  color: var(--ink-dim);
}

.gallery-empty a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notice-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.9rem 1rem;
  text-align: center;
}

/* 4 ───────── Home ──────────────────────────────────────────────────────── */

/* The opening: the title, then a strip of frames from the galleries that
   the visitor drags sideways. The frame at the start of the strip is lit;
   the rest wait in the dark. */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--banner-h) + clamp(2rem, 5vh, 4rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.hero-head {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.hero-title {
  font-size: var(--step-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: unset;
}

.hero-title .line {
  display: block;
}

.hero-title .line > span {
  display: inline-block;
  animation: rise 0.9s var(--ease-out) both;
}

.hero-title .line:nth-child(2) > span {
  animation-delay: 0.08s;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.35em); }
  to { opacity: 1; transform: none; }
}

.hero-side {
  padding-bottom: 0.6rem;
  animation: rise 0.9s 0.18s var(--ease-out) both;
}

.hero-sub {
  margin: 0;
  max-width: 34ch;
  color: var(--ink);
  font-size: var(--step-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.hero-strip {
  display: flex;
  gap: 8px;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  animation: rise 1s 0.25s var(--ease-out) both;
}

.hero-strip::-webkit-scrollbar {
  display: none;
}

.hero-strip.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.hero-strip.is-dragging .hero-frame {
  pointer-events: none;
}

.hero-frame {
  position: relative;
  flex: 0 0 auto;
  height: clamp(220px, 36vh, 380px);
  aspect-ratio: 3 / 2;
  scroll-snap-align: start;
  background: var(--surface);
  overflow: hidden;
}

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.8);
  transition: filter 0.5s ease, transform 0.8s var(--ease-out), opacity 0.6s ease;
  -webkit-user-drag: none;
  user-select: none;
}

.hero-frame.is-lit img,
.hero-frame:hover img,
.hero-frame:focus-visible img {
  filter: none;
}

.hero-frame:hover img {
  transform: scale(1.03);
}

.hero-frame:focus-visible {
  outline-offset: -3px;
}

/* Frames stay invisible until their photo has decoded. */
.hero-media--randomized img,
.moment-media--randomized img {
  opacity: 0;
}

.hero-media--randomized img.is-visible,
.moment-media--randomized img.is-visible {
  opacity: 1;
  transition: opacity 0.6s ease, filter 0.5s ease, transform 0.8s var(--ease-out);
}

.hero-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  font-size: var(--step-small);
  color: var(--ink-dim);
}

.hero-caption {
  color: var(--ink);
  transition: color 0.2s ease;
}

.hero-caption:hover {
  color: var(--amber);
}

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

@media (max-width: 860px) {
  .hero-head {
    grid-template-columns: 1fr;
  }
  .hero-frame {
    height: min(46vh, 62vw);
  }
  .hero-strip {
    gap: 6px;
  }
}

/* 404: one photograph across the whole screen, words at its foot. */
.hero--photo {
  height: min(100svh, 980px);
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

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

.hero--photo .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* A neutral scrim so the words stay readable over the photograph. */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 12, 13, 0.88) 0%, rgba(11, 12, 13, 0.4) 40%, rgba(11, 12, 13, 0) 70%); /* taste-skill-ignore: scrim under text on a photo */
  pointer-events: none;
}

.hero--photo .hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(100%, var(--container));
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2rem, 6vw, 4.5rem);
}

.hero--photo .hero-title {
  color: #f2f2ef;
}

.hero--photo .hero-sub {
  margin-top: 1.25rem;
  color: #f2f2ef;
  max-width: 44ch;
}

.hero--photo .btn-ghost {
  color: #f2f2ef;
  border-color: #f2f2ef;
}

.hero--photo .btn-ghost:hover {
  background: #f2f2ef;
  color: #121314;
}

/* The archive in a sentence, and how to find your car */
.intro {
  padding: var(--section-gap) 0 0;
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.intro-title {
  font-size: var(--step-head);
  max-width: 13ch;
}

.intro-lede {
  margin: 1.75rem 0 0;
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 24ch;
  color: var(--ink);
}

.intro-lede [data-stat] {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0;
  display: grid;
  gap: clamp(2rem, 3.5vw, 3rem);
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}

@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; }
}

.step-num {
  display: none;
}

.step-title {
  display: block;
  font-size: var(--step-lead);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.step-text {
  margin: 0;
  color: var(--ink);
  font-size: var(--step-body);
}

@media (max-width: 860px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
}

/* Next at Warton: the meetings still to come, as a timing board. Each
   date is a solid block like a roof number; today's turns kerb red. */
.next-meetings {
  padding: var(--section-gap) 0 0;
}

.next-meetings[hidden] {
  display: none;
}

.next-meetings-lede {
  margin: 0;
  max-width: 30ch;
  font-size: var(--step-body);
  color: var(--ink-dim);
}

.meeting-board {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.meeting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-top: 1px solid var(--line);
}

.meeting-date {
  display: grid;
  justify-items: center;
  width: 5.25rem;
  padding: 0.55rem 0 0.6rem;
  background: var(--plate);
  color: var(--plate-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.meeting.is-today .meeting-date {
  background: var(--amber);
  color: var(--amber-ink);
}

.meeting-dow,
.meeting-month {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.meeting-day {
  margin: 0.2rem 0 0.25rem;
  font-size: 2.375rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.meeting-when {
  display: block;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--amber);
}

.meeting-name {
  margin: 0.2rem 0 0;
  font-size: var(--step-lead);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.meeting-note {
  margin: 0.35rem 0 0;
  font-size: var(--step-body);
  color: var(--ink-dim);
}

.meeting-classes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.meeting-classes a,
.meeting-classes span {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line-strong);
  font-size: var(--step-small);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.meeting-classes a:hover,
.meeting-classes a:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

@media (max-width: 760px) {
  .meeting {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .meeting-date {
    width: 4.5rem;
  }
  .meeting-day {
    font-size: 2rem;
  }
  .meeting-classes {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* Rows come in one after another as the board scrolls into view
   (js/meetings.js adds the classes; without script they just show). */
.next-meetings.is-pending .meeting {
  opacity: 0;
  translate: 0 14px;
}

.next-meetings.is-visible .meeting {
  animation: meeting-in 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes meeting-in {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .next-meetings.is-pending .meeting { opacity: 1; translate: none; }
  .next-meetings.is-visible .meeting { animation: none; }
}

/* Moment: one big photograph, and a line beside it */
.moment {
  padding: var(--section-gap) 0 0;
}

.moment-card {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.moment-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface);
}

.moment-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: opacity 0.6s ease, transform 2.4s var(--ease-out);
}

.moment-media.is-visible img,
.moment-card .reveal.is-visible img {
  transform: none;
}

.moment-title {
  font-size: var(--step-head);
  max-width: 9ch;
}

.moment-quote {
  margin: 1.25rem 0 0;
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 18ch;
}

.moment-caption {
  margin: 1.5rem 0 0;
  font-size: var(--step-small);
  color: var(--ink-dim);
}

@media (max-width: 860px) {
  .moment-card {
    grid-template-columns: 1fr;
  }
}

/* Latest meetings on the home page */
.galleries-preview {
  padding: var(--section-gap) 0 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  flex-wrap: wrap;
}

.section-title {
  font-size: var(--step-head);
  color: var(--ink);
}

/* One large card, the rest stacked beside it, no dead space for any count. */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.feature-grid:has(> :nth-child(2)) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.feature-grid:has(> :nth-child(3)) {
  grid-template-rows: auto auto;
}

.feature-grid:has(> :nth-child(2)) > .gallery-card:first-child {
  grid-row: 1 / span 2;
}

.feature-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) > .gallery-card:first-child {
  grid-row: auto;
}

.feature-grid .feature-primary .gallery-card-media {
  aspect-ratio: 4 / 3;
}

.feature-grid:has(> :nth-child(3)) .feature-primary .gallery-card-media {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 420px;
}

.feature-grid:has(> :nth-child(2)) .feature-secondary {
  flex-direction: row;
}

.feature-grid:has(> :nth-child(2)) .feature-secondary .gallery-card-media {
  flex: 0 0 52%;
  aspect-ratio: auto;
  min-height: 200px;
}

.feature-grid:has(> :nth-child(2)) .feature-secondary .gallery-card-body {
  justify-content: flex-end;
}

.feature-grid .feature-secondary h3 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}

.feature-grid .feature-primary h3 {
  font-size: var(--step-lead);
}

@media (max-width: 860px) {
  .feature-grid:has(> :nth-child(2)),
  .feature-grid:has(> :nth-child(3)) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .feature-grid:has(> :nth-child(2)) > .gallery-card:first-child {
    grid-row: auto;
  }
  .feature-grid:has(> :nth-child(2)) .feature-secondary {
    flex-direction: column;
  }
  .feature-grid:has(> :nth-child(2)) .feature-secondary .gallery-card-media {
    flex: none;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}

/* 5 ───────── Gallery cards, gallery list ───────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 8px;
}

.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  transition: background 0.25s ease;
}

.gallery-card:hover {
  background: var(--surface-raised);
}

.gallery-card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-raised);
}

.gallery-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.gallery-card:hover .gallery-card-media img {
  transform: scale(1.04);
}

.gallery-card-body {
  padding: 1.1rem 1.25rem 1.3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gallery-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  min-height: 1.6rem;
  font-size: var(--step-small);
  color: var(--ink-dim);
}

.gallery-card-meta .num {
  color: var(--ink);
}

.gallery-card h2,
.gallery-card h3 {
  order: -1;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.gallery-card-link {
  margin-top: auto;
  padding-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s ease;
}

.gallery-card:hover .gallery-card-link {
  color: var(--amber);
}

.gallery-card-link .arrow,
.story-cta .arrow,
.profile-edit-view .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

.gallery-card:hover .gallery-card-link .arrow,
.story-row:hover .story-cta .arrow,
.profile-edit-view:hover .arrow {
  transform: translateX(4px);
}

/* Gallery list (gallery.html) */
.list-tools {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 560px) {
  .list-tools { flex-wrap: wrap; }
  .list-count { order: -1; }
}

.list-tools .search-input {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 460px;
}

.list-count {
  font-size: var(--step-small);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.story-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) 8px;
  align-items: start;
}

.story-row {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.story-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface);
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.4s ease;
}

.story-row:hover .story-media img {
  transform: scale(1.04);
}

.story-index {
  display: none;
}

.story-meta h3 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.4rem;
  transition: color 0.2s ease;
}

.story-row:hover .story-meta h3 {
  color: var(--amber);
}

.story-tag {
  display: inline-flex;
  vertical-align: 0.15em;
  margin-left: 0.5rem;
  padding: 0.12em 0.45em;
  background: var(--plate);
  color: var(--plate-ink);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.story-date {
  margin: 0 0 0.7rem;
  font-size: var(--step-small);
  color: var(--ink-dim);
}

.story-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s ease;
}

.story-row:hover .story-cta {
  color: var(--amber);
}

/* The newest meeting leads: wide photo with its details beside it. */
.story-row--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: end;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.story-row--lead .story-media {
  aspect-ratio: 16 / 10;
}

.story-row--lead .story-meta {
  padding-bottom: 0.25rem;
}

.story-row--lead .story-meta h3 {
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}

.story-row--lead .story-tag {
  font-size: 1.25rem;
  vertical-align: 0.4em;
}

.story-row--lead .story-date {
  font-size: var(--step-body);
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.story-row--lead .story-cta {
  min-height: 50px;
  padding: 0 1.4rem;
  font-size: 1rem;
  background: var(--amber);
  color: var(--amber-ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.story-row--lead:hover .story-cta {
  background: var(--ink);
  color: var(--bg);
}

.story-row--lead:hover .story-meta h3 {
  color: var(--ink);
}

.story-row[aria-hidden="true"] {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .story-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .story-row--lead {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

@media (max-width: 560px) {
  .story-list {
    grid-template-columns: 1fr;
  }
}

/* 6 ───────── Album: mosaic, lightbox ───────────────────────────────────── */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 6px;
}

@media (max-width: 980px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

.photo-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  overflow: hidden;
  cursor: zoom-in;
}

/* Mosaic: every 9th photo, starting with the first (the cover shot), is a
   2x2 lead frame, alternating left then right. Every 18 photos the pattern
   closes into a full rectangle on 4, 3 and 2 columns, it depends on
   position alone so nothing shifts as images load, and a lead frame is only
   used when at least four photos follow it so the last never sits beside a
   hole. */
.photo-grid--mosaic .photo-thumb:nth-child(18n + 1):nth-last-child(n + 5),
.photo-grid--mosaic .photo-thumb:nth-child(18n + 10):nth-last-child(n + 5) {
  grid-column: span 2;
  grid-row: span 2;
  align-self: stretch;
}

.photo-grid--mosaic .photo-thumb:nth-child(18n + 10):nth-last-child(n + 5) {
  grid-column: 3 / span 2;
}

@media (max-width: 980px) {
  .photo-grid--mosaic .photo-thumb:nth-child(18n + 10):nth-last-child(n + 5) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 640px) {
  .photo-grid--mosaic .photo-thumb:nth-child(18n + 10):nth-last-child(n + 5) {
    grid-column: 1 / span 2;
  }
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out), opacity 0.3s ease;
}

.photo-thumb:hover img,
.photo-thumb:focus-visible img {
  transform: scale(1.04);
}

.photo-thumb:focus-visible {
  outline-offset: -3px;
}

/* Lightbox: opaque, the photo gets the room, controls sit at the edges. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0b0c0d;
  color: #f2f2ef;
}

.lightbox.is-open {
  display: grid;
}

.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(0.85rem, 2.4vw, 1.5rem);
}

.lightbox-counter {
  font-size: 0.9375rem;
  color: rgba(242, 242, 239, 0.85);
  font-variant-numeric: tabular-nums;
}

.lightbox-remove {
  margin-left: auto;
  padding: 0.6rem 0.25rem;
  font-size: 0.875rem;
  color: rgba(242, 242, 239, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.lightbox-remove:hover {
  color: #f2f2ef;
}

/* "More of Tyler #884" / "Your car? Collect your photos" (js/album.js). */
.lightbox-driver {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #f2f2ef;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.lightbox-driver::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: #e0102a;
}

.lightbox-driver::after {
  content: "\2192";
  transition: translate 0.2s var(--ease-out);
}

.lightbox-driver:hover::after,
.lightbox-driver:focus-visible::after {
  translate: 0.2rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-driver::after { transition: none; }
}

/* Phones: the link gets its own row under the counter and close button. */
@media (max-width: 640px) {
  .lightbox-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0;
  }
  .lightbox-remove {
    justify-self: end;
    text-align: right;
  }
  .lightbox-driver {
    order: 3;
    grid-column: 1 / -1;
    padding-top: 0;
  }
}

.lightbox-figure {
  position: relative;
  margin: 0;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(0.5rem, 6vw, 5.5rem);
  overflow: hidden;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: driftZoom 8s ease-out forwards;
}

.lightbox-figure img.is-fading {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@keyframes driftZoom {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-figure img { animation: none; }
}

.lightbox .btn-primary {
  background: #e0102a;
  color: #ffffff;
}

.lightbox .btn-primary:hover {
  background: #f2f2ef;
  color: #0b0c0d;
}

.lightbox .btn-ghost {
  border-color: rgba(242, 242, 239, 0.7);
  color: #f2f2ef;
}

.lightbox .btn-ghost:hover {
  background: #f2f2ef;
  color: #0b0c0d;
}

.lightbox-controls {
  gap: 0.5rem;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(0.85rem, 2.4vw, 1.5rem) calc(0.85rem + env(safe-area-inset-bottom));
  min-width: 0;
}

.lightbox-filmstrip {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 0.25rem;
  scrollbar-width: thin;
}

.lightbox-filmstrip::-webkit-scrollbar {
  height: 4px;
}

.lightbox-filmstrip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

.filmstrip-thumb {
  flex: 0 0 auto;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: 0;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(242, 242, 239, 0.7);
  font-family: var(--font-body);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.filmstrip-thumb:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #f2f2ef;
}

.filmstrip-thumb.is-current {
  background: #f2f2ef;
  color: #0b0c0d;
}

.filmstrip-thumb.has-image {
  width: 64px;
  min-width: 64px;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.filmstrip-thumb.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.filmstrip-thumb.has-image:hover img {
  opacity: 0.8;
}

.filmstrip-thumb.has-image.is-current img {
  opacity: 1;
}

.lightbox-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.lightbox-close,
.lightbox-nav {
  background: rgba(242, 242, 239, 0.1);
  border: 0;
  color: #f2f2ef;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s var(--ease-out);
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: #f2f2ef;
  color: #0b0c0d;
}

.lightbox-close:active,
.lightbox-nav:active {
  transform: scale(0.9);
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 18px;
  height: 18px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  z-index: 2;
}

.lightbox-prev {
  left: clamp(0.5rem, 1.6vw, 1.25rem);
}

.lightbox-next {
  right: clamp(0.5rem, 1.6vw, 1.25rem);
}

@media (max-width: 640px) {
  .lightbox-filmstrip {
    display: none;
  }
  .lightbox-bar {
    justify-content: center;
  }
  .lightbox-controls {
    width: 100%;
  }
  .lightbox-controls .btn {
    flex: 1 1 0;
  }
  .lightbox-controls .lightbox-share {
    flex: 0 0 auto;
  }
  .lightbox-nav {
    top: auto;
    bottom: 0.5rem;
    margin-top: 0;
    background: rgba(11, 12, 13, 0.75);
  }
  .lightbox-figure {
    padding: 0 0.5rem;
  }
}

/* 7 ───────── Page heroes, drivers, profile ─────────────────────────────── */

.page-hero {
  padding: calc(var(--header-h) + var(--banner-h) + clamp(3rem, 9vw, 7rem)) 0 clamp(2.5rem, 5vw, 4rem);
}

.page-hero > .container > * {
  animation: rise 0.9s var(--ease-out) both;
}

.page-hero > .container > :nth-child(2) { animation-delay: 0.08s; }
.page-hero > .container > :nth-child(3) { animation-delay: 0.16s; }
.page-hero > .container > :nth-child(n + 4) { animation-delay: 0.24s; }

.breadcrumb {
  margin: 2rem 0 0;
  font-size: var(--step-small);
  max-width: none;
}

.breadcrumb a {
  color: var(--ink-dim);
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--ink);
}

.page-hero h1 {
  font-size: var(--step-display);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--ink);
}

.page-hero p {
  margin-top: 1.5rem;
  color: var(--ink);
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 34ch;
}

.page-hero p.breadcrumb {
  margin-top: 2rem;
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0;
}

.page-hero .page-hero-description {
  margin-top: 1rem;
  font-size: var(--step-body);
  font-weight: 400;
  letter-spacing: 0;
  max-width: 62ch;
}

.page-hero > .container:has(> h1 + p) {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.page-hero > .container:has(> h1 + p) > p {
  margin: 0 0 0.4rem;
}

.page-hero > .container:has(> h1 + p) > p.breadcrumb {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 860px) {
  .page-hero > .container:has(> h1 + p) {
    grid-template-columns: 1fr;
  }
}

.page-body {
  padding: 0 0 var(--section-gap);
}

.page-rule {
  display: none;
}

/* Drivers grid: a single card never stretches across the page, and the
   last tile invites the next driver on. */
.drivers-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.gallery-card--driver .gallery-card-media {
  aspect-ratio: 4 / 5;
}

.gallery-card--driver .driver-plate {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  font-size: 1.5rem;
  padding: 0.15em 0.5em;
}

.driver-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  letter-spacing: -0.05em;
  font-size: clamp(4rem, 9vw, 6rem);
  color: var(--ink-dim);
}

.driver-card-standing {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--ink-dim);
  font-size: var(--step-small);
}

.driver-card-standing strong {
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.drivers-cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 280px;
  padding: 1.5rem;
  background: var(--amber);
  color: var(--amber-ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.drivers-cta:hover {
  background: var(--ink);
  color: var(--bg);
}

.drivers-cta-title {
  font-weight: 300;
  letter-spacing: -0.03em;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.02;
}

.drivers-cta p {
  margin: 0;
  color: inherit;
  font-size: var(--step-body);
}

.drivers-cta .gallery-card-link,
.drivers-cta:hover .gallery-card-link {
  color: inherit;
}

.driver-head {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  flex-wrap: wrap;
}

.driver-avatar {
  width: clamp(110px, 17vw, 180px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}

.driver-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.driver-avatar span {
  font-weight: 300;
  letter-spacing: -0.05em;
  font-size: 3rem;
  color: var(--ink-dim);
}

.driver-avatar--small {
  width: 88px;
}

.driver-avatar--small span {
  font-size: 1.75rem;
}

.page-hero h1[data-album-title] {
  font-size: clamp(2.25rem, 1rem + 4.4vw, 5.5rem);
  max-width: 18ch;
}

.page-hero .driver-head h1 {
  font-size: clamp(2.75rem, 1rem + 6.5vw, 7rem);
}

.driver-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.driver-standing-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: var(--step-body);
  color: var(--ink-dim);
}

.driver-standing-pill strong {
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.page-hero .driver-bio {
  margin-top: 2rem;
  max-width: 62ch;
  font-size: var(--step-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.driver-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.driver-photos-title {
  font-size: var(--step-head);
  margin-bottom: 1.5rem;
}

/* My Photos */
.profile-gate {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 8px;
  align-items: stretch;
}

.profile-gate .steps {
  align-content: start;
}

.profile-gate-card {
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  background: var(--amber);
  color: var(--amber-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.profile-gate-card h2 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  max-width: 12ch;
}

.profile-gate-card p {
  margin: 1rem 0 0;
  color: inherit;
  font-size: var(--step-body);
}

.profile-gate-actions {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.profile-gate-card .btn-primary {
  background: var(--amber-ink);
  color: var(--amber);
}

.profile-gate-card .btn-primary:hover {
  background: var(--ink);
  color: var(--bg);
}

.profile-gate-card .btn-ghost {
  border-color: var(--amber-ink);
  color: var(--amber-ink);
}

.profile-gate-card .btn-ghost:hover {
  background: var(--amber-ink);
  color: var(--amber);
}

@media (max-width: 860px) {
  .profile-gate {
    grid-template-columns: 1fr;
  }
  /* The action first on a phone; the explanation can follow. */
  .profile-gate-card {
    order: -1;
  }
}

.profile-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.profile-header h2 {
  font-size: var(--step-head);
}

.profile-header .plate {
  margin-top: 1rem;
}

.profile-standing {
  margin-top: 0.5rem;
  color: var(--ink-dim);
  font-size: var(--step-body);
}

.profile-section-title {
  font-size: var(--step-lead);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.profile-edit {
  margin-bottom: 3.5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--surface);
}

.profile-edit .field input,
.profile-edit .field textarea {
  background: var(--bg);
}

.profile-edit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-edit-head h3 {
  font-size: var(--step-lead);
  font-weight: 400;
}

.profile-edit-view {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s ease;
}

.profile-edit-view:hover {
  color: var(--amber);
}

.profile-edit .form-note {
  margin: 0.5rem 0 0;
  color: var(--ink-dim);
  font-size: var(--step-small);
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.profile-form {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.profile-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-status {
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink-dim);
}

.profile-status.is-error,
.profile-edit .form-note.is-error {
  color: var(--status-error);
}

.profile-status.is-success,
.profile-edit .form-note.is-success {
  color: var(--status-success);
}

/* 8 ───────── Legal prose, contact, footer ──────────────────────────────── */

.legal-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.legal-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 260px;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--surface);
  transition: background 0.2s ease;
}

.legal-link:hover {
  background: var(--surface-raised);
}

.legal-link-num {
  display: none;
}

.legal-link h2 {
  font-size: var(--step-lead);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.legal-link p {
  margin: 0.6rem 0 0;
  color: var(--ink);
}

.legal-link .arrow {
  font-size: 1.5rem;
  transition: transform 0.25s var(--ease-out);
}

.legal-link:hover .arrow {
  transform: translateX(6px);
}

@media (max-width: 860px) {
  .legal-links {
    grid-template-columns: 1fr;
  }
  .legal-link {
    min-height: 0;
    gap: 1.5rem;
  }
}

.legal-content {
  max-width: var(--container);
  padding-bottom: var(--section-gap);
}

.legal-content .updated-note {
  font-size: var(--step-small);
  color: var(--ink-dim);
  margin-bottom: 3rem;
}

.legal-content h2 {
  font-size: var(--step-lead);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--ink);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--ink);
  max-width: 68ch;
  margin-bottom: 1rem;
}

.legal-content ul {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.legal-content strong {
  font-weight: 600;
  color: var(--ink);
}

.legal-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal-content a:hover {
  color: var(--amber);
}

/* Contact: the address set large, a frame from the galleries beside it */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.contact-grid .moment-media {
  aspect-ratio: 4 / 3;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.removal {
  padding: var(--section-gap) 0 0;
  scroll-margin-top: calc(var(--header-h) + var(--banner-h));
}

.removal-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.removal-title {
  font-size: var(--step-head);
  max-width: 11ch;
}

.removal-body p {
  margin: 0 0 1.1rem;
}

.removal-body .btn {
  margin-top: 0.75rem;
}

@media (max-width: 860px) {
  .removal-grid {
    grid-template-columns: 1fr;
  }
}

.contact-email {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-size: clamp(1.5rem, 0.6rem + 2.6vw, 2.75rem);
  line-height: 1.1;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}

.contact-email:hover {
  color: var(--amber);
}

.album-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1.5rem;
}

.album-meta:not(:has(> :not([hidden]):not(:empty))) {
  display: none;
}

.album-meta-item {
  font-size: var(--step-body);
  color: var(--ink);
}

.album-meta-item + .album-meta-item::before {
  content: "·";
  margin-right: 1.25rem;
  color: var(--ink-dim);
}

.album-meta-item:empty {
  display: none;
}

.page-hero .album-hint {
  margin-top: 0.75rem;
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-dim);
}

/* Footer: the last rows of the board, every tile filled */
.chequer {
  display: none;
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: var(--section-gap);
  padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--gutter);
  color: var(--ink);
}

.footer-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}

.ftile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 220px;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  background: var(--surface);
}

.ftile h2 {
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-dim);
  margin: 0 0 0.75rem;
}

.ftile--nav,
.ftile--legal {
  justify-content: flex-start;
}

.ftile--statement { grid-column: span 4; }
.ftile--nav { grid-column: span 2; }
.ftile--legal { grid-column: span 2; }
.ftile--mail { grid-column: span 4; }

.footer-tagline {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 26ch;
}

.footer-copy {
  margin: 0;
  font-size: var(--step-small);
  color: var(--ink-dim);
}

.footer-links {
  display: flex;
  flex-direction: column;
}

.footer-links a {
  display: block;
  padding: 0.3rem 0;
  font-size: 1rem;
  color: var(--ink);
  transition: color 0.2s ease, transform 0.25s var(--ease-out);
}

.footer-links a:hover {
  color: var(--amber);
  transform: translateX(4px);
}

.footer-mail {
  font-size: clamp(1.125rem, 0.8rem + 0.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}

.footer-mail:hover {
  color: var(--amber);
}

.footer-social {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
}

.footer-social a {
  font-size: 1rem;
  color: var(--ink);
  transition: color 0.2s ease;
}

.footer-social a:hover {
  color: var(--amber);
}

.ftile--brand {
  grid-column: span 8;
  min-height: clamp(180px, 22vw, 320px);
  justify-content: flex-end;
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}

.footer-brand {
  display: block;
  font-size: clamp(3rem, 8.2vw, 9.25rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.85;
  white-space: nowrap;
  transition: transform 0.6s var(--ease-out);
}

.ftile--brand:hover .footer-brand {
  transform: translateX(0.5rem);
}

.ftile--cta {
  grid-column: span 4;
  min-height: clamp(180px, 22vw, 320px);
  background: var(--amber);
  color: var(--amber-ink);
  transition: background 0.25s ease, color 0.25s ease;
}

.ftile--cta:hover {
  background: var(--ink);
  color: var(--bg);
}

.ftile-cta-text {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 10ch;
}

.ftile--cta svg {
  align-self: flex-end;
  width: clamp(48px, 5vw, 72px);
  height: clamp(48px, 5vw, 72px);
  transition: transform 0.35s var(--ease-out);
}

.ftile--cta:hover svg {
  transform: translateX(8px);
}

@media (max-width: 1080px) {
  .ftile--statement { grid-column: span 6; }
  .ftile--mail { grid-column: span 6; }
  .ftile--nav { grid-column: span 6; }
  .ftile--legal { grid-column: span 6; }
  .ftile--brand { grid-column: span 12; }
  .ftile--cta { grid-column: span 12; min-height: 180px; }
}

@media (max-width: 640px) {
  .footer-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .ftile {
    min-height: 0;
    padding: 1.25rem;
  }
  .ftile--brand { grid-column: 1 / -1; order: -2; min-height: 150px; }
  .ftile--cta { grid-column: 1 / -1; order: -1; min-height: 150px; }
  .ftile--nav, .ftile--legal { grid-column: span 1; }
  .ftile--mail, .ftile--statement { grid-column: 1 / -1; }
  .footer-brand { font-size: clamp(2.5rem, 14vw, 4rem); }
}

/* ───────── Late-October additions: class filter, "new" markers,
   download all, more meetings ───────────────────────────────────────── */

/* Gallery class filter: same chips as the drivers page */
.gallery-filters {
  margin-bottom: 1.25rem;
}

/* "New" / "12 new": a small kerb-red block before the date. It sits on
   the date line, never above a title. */
.new-flag {
  display: inline-flex;
  align-items: center;
  margin-right: 0.6rem;
  padding: 0.14em 0.5em;
  background: var(--amber);
  color: var(--amber-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.15;
  vertical-align: 0.06em;
  font-variant-numeric: tabular-nums;
}

.story-row--lead .new-flag {
  font-size: 0.9375rem;
}

/* Download all */
.album-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
}

.album-actions:not(:has(> :not([hidden]))) {
  display: none;
}

.page-hero .album-zip-note {
  margin: 0;
  max-width: none;
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-dim);
}

.btn[aria-busy="true"] {
  cursor: progress;
  font-variant-numeric: tabular-nums;
}

.btn:disabled {
  opacity: 0.85;
}

.photos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.photos-head .driver-photos-title,
.photos-head .profile-section-title {
  margin-bottom: 0;
}

.photos-head:not(:has(> :not([hidden]))) {
  display: none;
}

/* More meetings: newer and older side by side at the foot of a gallery */
.album-more {
  padding-top: clamp(3rem, 7vw, 6rem);
}

.album-more-title {
  font-size: var(--step-head);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.album-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pager-tile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--surface);
  color: var(--ink);
  transition: background 0.2s ease;
}

.pager-tile--older:only-child {
  grid-column: 2;
}

.pager-tile:hover {
  background: var(--surface-raised);
}

.pager-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-raised);
}

.pager-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.pager-tile:hover .pager-media img {
  transform: scale(1.04);
}

.pager-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.pager-title {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.15;
}

.pager-date {
  font-size: var(--step-small);
  color: var(--ink-dim);
}

.pager-dir {
  margin-top: auto;
  padding-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step-small);
  font-weight: 500;
  transition: color 0.2s ease;
}

.pager-tile:hover .pager-dir {
  color: var(--amber);
}

.pager-dir .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

.pager-tile--older:hover .pager-dir .arrow {
  transform: translateX(4px);
}

.pager-tile--newer:hover .pager-dir .arrow {
  transform: translateX(-4px);
}

@media (max-width: 760px) {
  .album-pager {
    grid-template-columns: 1fr;
  }

  .pager-tile--older:only-child {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .pager-tile {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* Cookie Policy: your choices */
.choice-list {
  display: grid;
  gap: 6px;
  margin: 1.25rem 0 2.5rem;
}

.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: var(--surface);
}

.legal-content .choice h3 {
  margin: 0 0 0.25rem;
  font-size: var(--step-body);
  font-weight: 500;
}

.legal-content .choice p {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--step-small);
}

.choice .btn {
  flex: 0 0 auto;
  min-width: 5.5rem;
}

.choice .btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.legal-content [id] {
  scroll-margin-top: calc(var(--header-h) + var(--banner-h) + 1.5rem);
}

/* Phones: the class buttons become one row that scrolls sideways,
   running to the screen edges, instead of five rows of buttons. */
@media (max-width: 560px) {
  .gallery-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-filters::-webkit-scrollbar {
    display: none;
  }

  .gallery-filters .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Consent panel (js/consent.js): a raised block pinned to the bottom of
   the screen on the page margins. It doesn't cover or block the page;
   it waits for an answer. Accept and Reject look the same on purpose. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  padding: 0 var(--gutter) var(--gutter);
  pointer-events: none;
  animation: consent-in 0.35s var(--ease-out) both;
}

.consent[hidden] {
  display: none;
}

@keyframes consent-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.consent-inner {
  pointer-events: auto;
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem 2.5rem;
  align-items: end;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-soft); /* taste-skill-ignore: it floats over the page, like the drawer */
}

.consent-title {
  font-size: var(--step-lead);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
  outline: none;
}

.consent-text p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.consent-text a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.consent-options {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.consent-options[hidden] {
  display: none;
}

.consent-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.consent-option input {
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  flex: 0 0 auto;
  accent-color: var(--amber);
}

.consent-option strong {
  display: block;
  font-weight: 500;
}

.consent-option span {
  color: var(--ink-dim);
}

.consent-option strong {
  color: var(--ink);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.consent-actions .btn {
  min-width: 8.5rem;
}

.consent-choose {
  min-height: 50px;
  padding: 0 0.9rem;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.consent-choose:hover {
  color: var(--amber);
}

@media (max-width: 760px) {
  .consent-inner {
    grid-template-columns: 1fr;
  }

  .consent-actions {
    justify-content: stretch;
  }

  .consent-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .consent-choose {
    flex: 1 0 100%;
    min-height: 40px;
  }
}

/* Footer "Cookie settings": looks like the links beside it */
.footer-cookie-btn {
  display: block;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.25s var(--ease-out);
}

.footer-cookie-btn:hover {
  color: var(--amber);
  transform: translateX(4px);
}

/* ───────── Motion that answers what the visitor does ─────────────────────
   Transform and opacity only, --ease-out, short. Everything here is off
   under prefers-reduced-motion (global override at the top, plus the
   block at the end of this section for the bits that aren't transitions). */

/* 1. Page to page: a quick crossfade instead of a blank flash. The old
   page leaves fast; the new one fades in (opacity only, so the fixed
   header doesn't move). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-leave 0.16s ease-in both;
}

::view-transition-new(root) {
  animation: vt-arrive 0.34s var(--ease-out) both;
}

@keyframes vt-leave {
  to { opacity: 0; }
}

@keyframes vt-arrive {
  from { opacity: 0; }
}

/* 2. Theme switch: the new theme opens out in a circle from the button,
   like a light being switched on (js/main.js sets --vt-x/--vt-y/--vt-r). */
html.is-theme-switching::view-transition-old(root) {
  animation: none;
}

html.is-theme-switching::view-transition-new(root) {
  animation: theme-reveal 0.55s var(--ease-out) both;
}

@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 100%) var(--vt-y, 0)); }
}

.theme-toggle svg {
  transition: transform 0.5s var(--ease-out);
}

html[data-theme="light"] .theme-toggle svg {
  transform: rotate(-90deg);
}

/* 3. Opening a photo: the viewer fades up and the photo grows out of the
   tile that was tapped (--lb-ox/--lb-oy, set by js/album.js). Closing
   reverses it. */
.lightbox.is-entering {
  animation: lb-fade-in 0.28s ease-out both;
}

.lightbox.is-entering .lightbox-figure {
  animation: lb-grow 0.45s var(--ease-out) both;
  transform-origin: var(--lb-ox, 50%) var(--lb-oy, 50%);
}

.lightbox.is-entering .lightbox-top,
.lightbox.is-entering .lightbox-controls {
  animation: lb-fade-in 0.4s 0.12s ease-out both;
}

.lightbox.is-leaving {
  animation: lb-fade-out 0.22s ease-in both;
}

.lightbox.is-leaving .lightbox-figure {
  animation: lb-shrink 0.22s ease-in both;
  transform-origin: var(--lb-ox, 50%) var(--lb-oy, 50%);
}

@keyframes lb-fade-in {
  from { opacity: 0; }
}

@keyframes lb-fade-out {
  to { opacity: 0; }
}

@keyframes lb-grow {
  from { opacity: 0; transform: scale(0.82); }
}

@keyframes lb-shrink {
  to { opacity: 0; transform: scale(0.86); }
}

/* 4. Next / previous: the photo leaves the way you're going and the next
   one comes in from the other side. Uses `translate`, which adds to the
   slow drift-zoom (`transform`) instead of replacing it. */
.lightbox-figure img {
  transition: opacity 0.3s ease, translate 0.42s var(--ease-out);
}

.lightbox-figure img.is-fading {
  transition: opacity 0.2s ease, translate 0.2s ease-in;
}

.lightbox-figure img.is-fading.go-next {
  translate: -36px 0;
}

.lightbox-figure img.is-fading.go-prev {
  translate: 36px 0;
}

.lightbox-figure img.from-next {
  translate: 36px 0;
  transition: none;
}

.lightbox-figure img.from-prev {
  translate: -36px 0;
  transition: none;
}

.lightbox-nav:active {
  transform: scale(0.9);
}

/* 5. Scrolling a gallery: each photo settles into its frame as it
   arrives (it starts slightly enlarged inside the tile). */
.photo-thumb.reveal img {
  transform: scale(1.08);
  transition: transform 1.1s var(--ease-out), opacity 0.3s ease;
}

.photo-thumb.reveal.is-visible img {
  transform: scale(1);
}

.photo-thumb.reveal.is-visible:hover img,
.photo-thumb.reveal.is-visible:focus-visible img {
  transform: scale(1.04);
  transition-duration: 0.6s;
}

/* Re-dealt lists (class filter, search): rows cascade in. */
.is-dealt {
  animation: deal 0.5s var(--ease-out) both;
  animation-delay: calc(var(--deal, 0) * 45ms);
}

@keyframes deal {
  from { opacity: 0; transform: translateY(14px); }
}

/* Footer tiles arrive in turn as the board scrolls into view. */
.footer-board.reveal-board > .ftile {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.7s var(--ease-out);
}

.footer-board.reveal-board.is-visible > .ftile {
  opacity: 1;
  transform: none;
}

.footer-board.reveal-board.is-visible > .ftile:nth-child(2) { transition-delay: 0.05s; }
.footer-board.reveal-board.is-visible > .ftile:nth-child(3) { transition-delay: 0.1s; }
.footer-board.reveal-board.is-visible > .ftile:nth-child(4) { transition-delay: 0.15s; }
.footer-board.reveal-board.is-visible > .ftile:nth-child(5) { transition-delay: 0.2s; }
.footer-board.reveal-board.is-visible > .ftile:nth-child(6) { transition-delay: 0.25s; }

/* The red "browse" tile's arrow leans in on hover. */
.ftile--cta svg {
  transition: transform 0.35s var(--ease-out);
}

.ftile--cta:hover svg {
  transform: translateX(8px);
}

/* 6. Download all: the button fills left to right as photos are packed
   (js/zip.js sets --progress from 0 to 1). */
.btn[data-progress] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn[data-progress]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0.16;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}

.btn.is-done {
  animation: done-pop 0.4s var(--ease-out);
}

@keyframes done-pop {
  40% { transform: scale(1.04); }
}

/* Small confirmations: a label that changes ("Link copied", "On"/"Off")
   rises into place, and "New" flags pop in. */
.is-swapped {
  animation: swap-in 0.32s var(--ease-out);
}

@keyframes swap-in {
  from { opacity: 0; transform: translateY(6px); }
}

.new-flag {
  animation: flag-pop 0.45s 0.25s var(--ease-out) both;
}

@keyframes flag-pop {
  from { opacity: 0; transform: scale(0.6); }
}

/* 7. Phone menu: the links arrive one after another as the drawer opens. */
@media (max-width: 860px) {
  .site-nav a::after {
    display: none;
  }

  .site-nav > * {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
  }

  .site-nav.is-open > * {
    opacity: 1;
    transform: none;
  }

  .site-nav.is-open > :nth-child(1) { transition-delay: 0.08s; }
  .site-nav.is-open > :nth-child(2) { transition-delay: 0.12s; }
  .site-nav.is-open > :nth-child(3) { transition-delay: 0.16s; }
  .site-nav.is-open > :nth-child(4) { transition-delay: 0.2s; }
  .site-nav.is-open > :nth-child(5) { transition-delay: 0.24s; }
  .site-nav.is-open > :nth-child(6) { transition-delay: 0.28s; }
  .site-nav.is-open > :nth-child(7) { transition-delay: 0.32s; }
}

/* 8. Cookie question leaves by sliding back down once answered. */
.consent.is-leaving {
  animation: consent-out 0.28s ease-in both;
}

@keyframes consent-out {
  to { transform: translateY(24px); opacity: 0; }
}

/* Reduced motion: no page or theme transitions, no entrance effects. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .photo-thumb.reveal img,
  .footer-board.reveal-board > .ftile,
  .site-nav > * {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (scripting: none) {
  .footer-board.reveal-board > .ftile {
    opacity: 1;
    transform: none;
  }
}