/* Rockbridge 2026 — Version A
   Palette sampled from Calvin's own fly-fishing photographs, converted to OKLCH.
   Strategy: Committed. Teal-black carries the surface; brass is the only accent. */

:root {
  --ground:  oklch(0.20 0.030 188);
  --ground2: oklch(0.24 0.032 186);
  --surface: oklch(0.28 0.031 182);
  --raised:  oklch(0.34 0.026 178);
  --line:    oklch(0.42 0.024 180);   /* decorative hairlines between rows */
  --edge:    oklch(0.58 0.024 180);   /* interactive control borders. Measured 3.41:1
                                         worst case (on --surface), clearing WCAG 1.4.11 */
  --moss:    oklch(0.55 0.070 130);
  --brass:   oklch(0.78 0.130  95);
  --ink:     oklch(0.96 0.008 220);   /* measured 16.03:1 on --ground */
  --ink-2:   oklch(0.82 0.014 205);   /* measured 8.29:1 worst case (on --surface) */
  --ink-3:   oklch(0.70 0.018 200);   /* measured 5.43:1 worst case (on --surface) */

  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Chivo Mono', ui-monospace, 'SFMono-Regular', monospace;

  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.27rem, 1.19rem + 0.38vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.45rem + 0.75vw, 2.13rem);
  --step-3:  clamp(2.03rem, 1.75rem + 1.38vw, 2.92rem);
  --step-4:  clamp(2.65rem, 1.90rem + 3.90vw, 5.60rem);

  --gut: clamp(1.15rem, 0.8rem + 1.8vw, 2.5rem);
  --sec: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  --r: 3px;                                  /* signage, not app chrome */
  --out: oklch(0.78 0.130 95);

  --z-base: 1; --z-sticky: 10; --z-toast: 40;

  --e: cubic-bezier(0.16, 1, 0.3, 1);        /* ease-out-expo */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;                          /* light-on-dark needs the extra */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> must never become a grid/flex item of its own; it is a source selector,
   not a box. Without this it adds a phantom row to the hero grid. */
picture { display: contents; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--out);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: var(--z-toast);
  background: var(--brass); color: oklch(0.18 0.03 188);
  padding: 0.6rem 1rem; border-radius: var(--r); font-weight: 700;
  text-decoration: none; transition: top 0.18s var(--e);
}
.skip:focus { top: 0.5rem; }

.wrap { width: min(1180px, 100% - (var(--gut) * 2)); margin-inline: auto; }

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative; isolation: isolate;
  min-height: min(94svh, 900px);
  display: grid; grid-template-rows: 1fr auto;
  padding: var(--gut);
  padding-top: clamp(3rem, 8vh, 6rem);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 52%;
  z-index: -2;
}
/* On a phone the hero box is roughly 390x790, which is far taller than any frame in
   the shoot. Overlaying type on it buries the angler and crops the picture twice. So
   below 900px the hero STACKS: the photograph gets its own band at a sane aspect, and
   the copy sits under it on solid ground with no scrim and nothing competing. */
@media (max-width: 899px) {
  .hero { min-height: 0; display: block; padding: 0; }
  .hero__img { position: relative; inset: auto; height: min(56svh, 460px); object-position: 50% 46%; z-index: 0; }
  .hero__scrim { display: none; }
  .hero__body { max-width: none; padding: clamp(1.5rem, 5vw, 2rem) var(--gut) 0; }
  .hero__light { margin-top: 2rem; padding: 1.2rem var(--gut) clamp(1.5rem, 5vw, 2rem); }
}
/* Narrow screens put text across the full width, so the scrim has to be vertical
   and heavy. Wide screens keep the right side clear so the angler stays visible. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
      oklch(0.14 0.028 188 / 0.97) 0%,
      oklch(0.15 0.028 188 / 0.90) 34%,
      oklch(0.16 0.028 188 / 0.76) 60%,
      oklch(0.16 0.028 188 / 0.62) 82%,
      oklch(0.16 0.028 188 / 0.52) 100%);
}
/* The angler stands at roughly a third from the left, so the type moves RIGHT and the
   scrim comes in from the right. Subject clear on one side, copy legible on the other. */
@media (min-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(to top, oklch(0.14 0.028 188 / 0.92) 0%, oklch(0.16 0.028 188 / 0.55) 40%, oklch(0.18 0.03 188 / 0.18) 72%, transparent 94%),
      linear-gradient(258deg, oklch(0.13 0.028 188 / 0.95) 0%, oklch(0.14 0.028 188 / 0.84) 28%, oklch(0.16 0.03 188 / 0.38) 56%, transparent 82%);
  }
}

.hero__body { align-self: end; max-width: 47ch; }
@media (min-width: 900px) { .hero__body { justify-self: end; } }

.hero__where {
  margin: 0 0 1.1rem; font-family: var(--mono);
  font-size: var(--step--1); letter-spacing: 0.02em;
  color: var(--brass); display: flex; align-items: flex-start; gap: 0.55rem;
  text-wrap: balance;
}
.pin { width: 7px; height: 7px; background: var(--brass); border-radius: 50%; flex: none; margin-top: 0.62em; }

.hero__title {
  margin: 0; font-size: var(--step-4); font-weight: 900;
  letter-spacing: -0.035em; line-height: 0.88; text-wrap: balance;
}
.hero__dates {
  margin: 0.7rem 0 0; font-size: var(--step-1); font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
}
.hero__lede {
  margin: 1.1rem 0 0; color: var(--ink-2);
  max-width: 46ch; text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }
/* Cold hands in a 5am parking lot: full-width targets on a phone. */
@media (max-width: 559px) { .hero__cta .btn { flex: 1 1 100%; } }

.hero__light {
  margin: 3rem 0 0; padding-top: 1.2rem;
  justify-content: flex-start;
  border-top: 1px solid oklch(0.96 0.008 220 / 0.16);
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem);
}
.hero__light div { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__light dt {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero__light dd {
  margin: 0; font-family: var(--mono); font-size: var(--step-1);
  font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; min-height: 50px; padding: 0.75rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--sans); font-size: var(--step-0); font-weight: 700;
  letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e),
              color 0.2s var(--e), transform 0.14s var(--e);
}
.btn--go { background: var(--brass); color: oklch(0.17 0.03 188); }
.btn--ghost { background: transparent; color: var(--ink); border-color: oklch(0.96 0.008 220 / 0.4); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--go:hover { background: oklch(0.86 0.135 95); }
  .btn--ghost:hover { border-color: var(--ink); background: oklch(0.96 0.008 220 / 0.07); }
}
.btn--wide { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ── Sections ──────────────────────────────────────────────── */

.sec { padding-block: var(--sec); }
.sec--water { background: var(--ground2); }
.sec--rsvp  { background: var(--ground); }
.sec--bring { background: var(--ground2); }
.sec--gear  { background: var(--ground); }
.sec--kit   { background: var(--ground2); }

.h2 {
  margin: 0 0 0.6rem; font-size: var(--step-3); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance;
}
.sub { margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* ── The water: one frame per fact ─────────────────────────── */

.water { display: grid; gap: clamp(1.4rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); align-items: start; }
.wfact { display: flex; flex-direction: column; gap: 0.9rem; }
.wfact__fig { margin: 0; overflow: hidden; border-radius: var(--r); }
.wfact__fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.5s var(--e);
}
@media (hover: hover) and (pointer: fine) { .wfact:hover .wfact__fig img { transform: scale(1.03); } }
.wfact h3 {
  margin: 0; font-size: var(--step-1); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); text-wrap: balance;
}
.wfact p { margin: 0; color: var(--ink-2); font-size: var(--step--1); text-wrap: pretty; }

/* ── Full-bleed frames between sections ────────────────────── */

.band { margin: 0; display: block; }
.band img { width: 100%; height: clamp(220px, 40vw, 500px); object-fit: cover; display: block; }

/* ── The strip ─────────────────────────────────────────────── */

.sec--strip { background: var(--ground); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.strip {
  display: flex; gap: 0.85rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 1.2rem;
  /* Start on the same left edge as the section heading, bleed off the right. */
  padding-left: max(var(--gut), calc((100vw - 1180px) / 2));
  padding-right: var(--gut);
  scrollbar-color: var(--edge) transparent;
}
.strip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; width: clamp(230px, 40vw, 400px); }
.strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); display: block; }
.strip:focus-visible { outline: 2px solid var(--out); outline-offset: 4px; }

/* ── RSVP ──────────────────────────────────────────────────── */

.rsvp { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .rsvp { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); } }

.form { display: flex; flex-direction: column; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); padding: 0;
}
/* No opacity here. It multiplies against --ink-3 and drops this string under
   4.5:1, which axe-core caught. The token already carries the right value. */
.opt { text-transform: none; letter-spacing: 0.01em; }

input[type=text], textarea {
  width: 100%; padding: 0.85rem 1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--r);
  font-family: var(--sans); font-size: var(--step-0); line-height: 1.5;
  transition: border-color 0.18s var(--e), background-color 0.18s var(--e);
}
input[type=text]:hover, textarea:hover { border-color: oklch(0.68 0.026 180); }
input[type=text]:focus, textarea:focus { border-color: var(--brass); background: var(--ground2); }
::placeholder { color: var(--ink-3); opacity: 1; }
textarea { resize: vertical; min-height: 68px; }

/* segmented in / out */
.seg { display: flex; gap: 0.5rem; }
.seg__opt { flex: 1; }
.seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg__opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0.6rem 1rem;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r);
  font-weight: 600; cursor: pointer; text-align: center;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e);
}
.seg__opt input:checked + span { background: var(--brass); border-color: var(--brass); color: oklch(0.17 0.03 188); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--out); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .seg__opt:hover span { border-color: oklch(0.70 0.026 180); } }
.seg__opt:active span { transform: scale(0.97); }
.seg__opt span { transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e), transform 0.14s var(--e); }

/* permit picker */
.permits { display: grid; gap: 0.6rem; }
.permit { position: relative; }
.permit input { position: absolute; opacity: 0; width: 0; height: 0; }
.permit__box {
  display: block; padding: 0.95rem 1.1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r);
  transition: border-color 0.2s var(--e), background-color 0.2s var(--e);
}
.permit input:checked + .permit__box { border-color: var(--brass); background: var(--ground2); }
.permit input:focus-visible + .permit__box { outline: 2px solid var(--out); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .permit__box:hover { border-color: oklch(0.70 0.026 180); } }
.permit__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.permit__name { font-weight: 700; letter-spacing: -0.01em; }
.permit__tackle { font-family: var(--mono); font-size: 0.74rem; color: var(--brass); letter-spacing: 0.03em; }
.permit__rules { margin: 0.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.permit__rules li { color: var(--ink-2); font-size: var(--step--1); padding-left: 1rem; position: relative; }
.permit__rules li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--moss); border-radius: 50%; }

.formmsg { margin: 0; min-height: 1.4em; font-size: var(--step--1); color: var(--ink-2); }
.formmsg[data-tone=ok]  { color: var(--brass); font-weight: 600; }
.formmsg[data-tone=bad] { color: oklch(0.78 0.14 32); font-weight: 600; }

/* roster */
.roster { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
@media (min-width: 900px) { .roster { position: sticky; top: 2rem; } }
.roster__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.roster__head h3 { margin: 0; font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; }
.count { font-family: var(--mono); font-size: var(--step-1); font-weight: 700; color: var(--brass); font-variant-numeric: tabular-nums; }
.roster__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rperson { display: flex; align-items: center; gap: 0.7rem; padding-block: 0.62rem; border-top: 1px solid var(--line); }
.rperson:first-child { border-top: 0; }
.rperson__name { font-weight: 600; }
.rperson__tag { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rperson--out .rperson__name { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); flex: none; }
.rperson--out .dot { background: var(--line); }
.roster__empty { margin: 0; color: var(--ink-3); font-size: var(--step--1); }

/* ── Bring board ───────────────────────────────────────────── */

.bring { display: grid; gap: 1.2rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); }
.cat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; }
.cat h3 { margin: 0 0 0.25rem; font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.cat__note { margin: 0 0 1rem; font-size: var(--step--1); color: var(--ink-3); text-wrap: pretty; }
.cat__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }

.claim {
  width: 100%; display: flex; align-items: center; gap: 0.7rem; text-align: left;
  min-height: 48px; padding: 0.6rem 0.8rem;
  background: var(--ground2); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--r);
  font-family: var(--sans); font-size: var(--step--1); cursor: pointer;
  transition: border-color 0.2s var(--e), background-color 0.2s var(--e), transform 0.12s var(--e);
}
@media (hover: hover) and (pointer: fine) { .claim:hover { border-color: oklch(0.70 0.026 180); } }
.claim:not([data-state=taken]):active { transform: scale(0.97); }
.claim__box {
  width: 17px; height: 17px; flex: none; border-radius: 2px;
  border: 1.5px solid var(--edge); display: grid; place-items: center;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e);
}
.claim__box svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.5); transition: opacity 0.2s var(--e), transform 0.2s var(--e); }
.claim__who { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; letter-spacing: 0.02em; }

.claim[data-state=mine]  { border-color: var(--brass); background: oklch(0.78 0.13 95 / 0.10); }
.claim[data-state=mine] .claim__box { background: var(--brass); border-color: var(--brass); }
.claim[data-state=mine] .claim__box svg { opacity: 1; transform: scale(1); stroke: oklch(0.17 0.03 188); }
.claim[data-state=mine] .claim__who { color: var(--brass); }
.claim[data-state=taken] { opacity: 0.62; cursor: not-allowed; }
.claim[data-state=taken] .claim__box { background: var(--line); border-color: var(--line); }
.claim[data-state=taken] .claim__box svg { opacity: 1; transform: scale(1); stroke: var(--ink); }
.claim[data-state=taken]:active { transform: none; }
.claim[data-busy] { opacity: 0.55; cursor: progress; filter: blur(1.5px); }
.claim { transition: border-color 0.2s var(--e), background-color 0.2s var(--e), transform 0.14s var(--e), filter 0.2s var(--e), opacity 0.2s var(--e); }

/* ── Gear ──────────────────────────────────────────────────── */

.controls { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.5rem); margin-bottom: 1.8rem; }
.ctl { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 1 1 260px; }
.ctl__lab { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.tabs--two { grid-template-columns: repeat(2, 1fr); }
.tab {
  min-height: 50px; padding: 0.5rem 0.6rem;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--edge); border-radius: var(--r);
  font-family: var(--sans); font-size: var(--step--1); font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e);
}
.tab small { font-family: var(--mono); font-weight: 400; font-size: 0.66rem; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) { .tab:hover { border-color: oklch(0.70 0.026 180); color: var(--ink); } }
.tab:active { transform: scale(0.97); }
.tab { transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e), transform 0.14s var(--e); }
.tab[aria-selected=true] { background: var(--brass); border-color: var(--brass); color: oklch(0.17 0.03 188); }

.daybrief {
  margin: 0 0 1.3rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-2); max-width: 78ch; text-wrap: pretty;
}
/* Aligned to the same 160px column the time rail below uses, so the permit rules
   and the first time block share a left edge. */
.permrules { margin-bottom: 2rem; }
.prule { display: grid; gap: 0.55rem 2rem; grid-template-columns: 1fr; font-size: var(--step--1); color: var(--ink-2); }
@media (min-width: 820px) { .prule { grid-template-columns: 160px minmax(0, 1fr); align-items: start; } }
.prule strong { color: var(--brass); font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; padding-top: 0.15em; }
.prule__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; max-width: 70ch; }
.prule__list li { padding-left: 1rem; position: relative; text-wrap: pretty; }
.prule__list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--moss); }

/* time rail */
.rail { display: flex; flex-direction: column; }
.blk { display: grid; gap: 0.4rem 2rem; padding-block: 1.9rem; border-top: 1px solid var(--line); grid-template-columns: 1fr; }
.blk:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .blk { grid-template-columns: 160px 250px minmax(0, 1fr); } }
@media (min-width: 820px) and (max-width: 1040px) { .blk { grid-template-columns: 140px 200px minmax(0, 1fr); } }
.blk__fig { margin: 0; overflow: hidden; border-radius: var(--r); }
.blk__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 819px) { .blk__fig { margin-bottom: 1.1rem; } .blk__fig img { aspect-ratio: 16 / 9; } }

.blk__when { display: flex; flex-direction: column; gap: 0.2rem; }
.blk__time { font-family: var(--mono); font-size: 0.78rem; color: var(--brass); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.blk__label { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.blk__read { margin: 0 0 1.1rem; color: var(--ink-2); max-width: 68ch; text-wrap: pretty; }

.gitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.gitem { display: grid; gap: 0.15rem; padding-left: 1.15rem; position: relative; }
.gitem::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--moss); border-radius: 50%; }
.gitem__t { font-weight: 700; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.gitem__d { color: var(--ink-2); font-size: var(--step--1); max-width: 66ch; text-wrap: pretty; }

.local {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--brass); border: 1px solid oklch(0.78 0.13 95 / 0.45);
  padding: 0.12rem 0.42rem; border-radius: 2px; white-space: nowrap; font-weight: 500;
}

/* ── Kit ───────────────────────────────────────────────────── */

.kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.kitem { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.kit > .kitem:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 700px) {
  .kit { column-gap: 3rem; }
  .kit > .kitem:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
}
.kitem__t { font-weight: 700; letter-spacing: -0.015em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-bottom: 0.15rem; }
.kitem__d { color: var(--ink-2); font-size: var(--step--1); max-width: 56ch; text-wrap: pretty; }

/* ── Footer ────────────────────────────────────────────────── */

.foot { background: oklch(0.16 0.028 190); padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.foot h3 { margin: 0 0 0.8rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); font-weight: 500; }
.foot p { margin: 0 0 0.4rem; color: var(--ink-2); font-size: var(--step--1); }
.foot__addr { line-height: 1.55; }
.foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: oklch(0.96 0.008 220 / 0.35); }
.foot a:hover { text-decoration-color: var(--brass); color: var(--brass); }

.lighttab { border-collapse: collapse; font-family: var(--mono); font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lighttab th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 0.22rem 0.9rem 0.22rem 0; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.lighttab td { padding: 0.22rem 0.9rem 0.22rem 0; }
.lighttab td:first-child { color: var(--ink); font-weight: 700; }

.foot__open { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.foot__open li { color: var(--ink-2); font-size: var(--step--1); padding-left: 1rem; position: relative; text-wrap: pretty; }
.foot__open li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--brass); border-radius: 50%; }

.foot__fine { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid oklch(0.96 0.008 220 / 0.12); color: var(--ink-3); font-size: 0.78rem; max-width: 78ch; }
.foot__fine em { font-style: normal; color: var(--brass); }

/* ── Motion ────────────────────────────────────────────────── */

/* Transform only, and no fill mode. A reveal must ENHANCE an already-visible
   default: fading opacity from 0 gates the content on the animation firing, which
   leaves text unreadable in a headless render, a hidden tab, or mid-flight. axe-core
   caught exactly that, measuring blended colours at 2.23:1. */
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
.reveal { animation: rise 0.5s var(--e); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { animation: none; transform: none; }
}