/* ===================================================================
   Ryan Kipke Racing — styles.css
   Minimalist • modern • clean  ·  Kanit (italic titles) + Inter (body)
   Monochrome with a single red accent, used sparingly.
   =================================================================== */

:root {
  --red: #E4032B;
  --red-2: #c40025;
  --bg: #ffffff;
  --bg-2: #f6f6f7;
  --panel: #ffffff;
  --ink: #0e0e10;
  --muted: #5c5c66;
  --muted-2: #9a9aa2;
  --line: rgba(14, 14, 16, 0.12);
  --line-2: rgba(14, 14, 16, 0.20);
  --shadow: 0 24px 60px -34px rgba(14, 14, 20, 0.22);
  --maxw: 1200px;
  --font-display: 'Kanit', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .68, .16, 1);
  /* Signature "speed-cut" chamfer (bottom-left corner) */
  --cut: polygon(0 0, 100% 0, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  --cut-sm: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* Slanted red slash — the recurring RKR accent (echoes the italic logo) */
.slash, .eyebrow::before, .results__season::before {
  content: ''; display: inline-block;
  width: 28px; height: 3px; background: var(--red);
  transform: skewX(-24deg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(90%, var(--maxw)); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.accent { color: var(--red); }

/* Micro-labels / eyebrows — quiet, uppercase, letterspaced */
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  font-size: .74rem;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.edit-note { color: var(--muted-2); font-size: .82em; font-style: italic; text-transform: none; letter-spacing: 0; }

/* ---------- Buttons ---------- */
.btn {
  --pad: 15px 30px;
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-style: italic;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  font-size: 1rem;
  padding: var(--pad);
  border-radius: 3px;
  clip-path: var(--cut);
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, color .2s;
}
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-2); transform: translateY(-2px); }
.btn--ghost { background: var(--ink); color: #fff; }
.btn--ghost:hover { background: #2a2a30; transform: translateY(-2px); }

/* ---------- Top utility bar ---------- */
.topbar { background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; gap: 16px; font-size: .8rem; color: var(--muted);
}
.topbar a { color: var(--muted); transition: color .2s; }
.topbar a:hover { color: var(--ink); }
.topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar__tag {
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted-2); font-size: .72rem;
}
.topbar__socials { display: flex; gap: 16px; }
.topbar__socials a { font-weight: 600; letter-spacing: .04em; }
.topbar__socials a:hover { color: var(--red); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand__logo { height: 38px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  font-size: .82rem; color: var(--muted); transition: color .2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__cta { color: #fff !important; --pad: 11px 22px; font-size: .9rem; }
.nav__toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px;
}
.nav__toggle span { width: 26px; height: 2px; background: var(--ink); transition: .3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: calc(100svh - 118px);
  display: flex; align-items: center;
  padding: 60px 0 80px;
  overflow: hidden;
  background: var(--bg);
}
.hero__glow {
  position: absolute; width: 620px; height: 620px; right: -120px; top: 4%;
  background: radial-gradient(circle, rgba(228, 3, 43, .07), transparent 65%);
  pointer-events: none;
}
/* Signature: giant faint "41" brand texture — red 4 / black 1, matching the livery */
.hero__watermark {
  position: absolute; z-index: 0; right: 2%; bottom: -6%;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 34vw; line-height: .8; color: transparent;
  pointer-events: none; user-select: none;
}
.hero__watermark .wm--red { -webkit-text-stroke: 3px rgba(228, 3, 43, 0.22); }
.hero__watermark .wm--ink { -webkit-text-stroke: 3px rgba(14, 14, 16, 0.16); }
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
}
.hero__text { max-width: 640px; }
.hero__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .2em; font-weight: 600;
  color: var(--muted); margin-bottom: 26px; font-size: .82rem;
}
.hero__title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(4rem, 13vw, 9.5rem);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
/* Hero nameplate as the Ryan Kipke wordmark logo */
.hero__title--logo { font-size: 0; line-height: 0; }
.hero__wordmark { display: block; width: min(100%, 560px); height: auto; }
.hero__lede {
  margin: 28px 0 34px; max-width: 540px;
  font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--muted); line-height: 1.7;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.nextrace {
  display: inline-flex; align-items: center; gap: 13px; margin-top: 34px;
  padding: 12px 20px; background: var(--bg-2); border-radius: 3px; clip-path: var(--cut);
  transition: transform .2s var(--ease), background .2s;
}
.nextrace:hover { background: #ececee; transform: translateY(-2px); }
.nextrace__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.nextrace__dot::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--red); animation: ping 1.8s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.nextrace__lbl {
  font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; font-size: .74rem; color: var(--red);
  padding-right: 13px; border-right: 1px solid var(--line-2);
}
.nextrace__val { font-size: .87rem; color: var(--ink); font-weight: 500; }
.nextrace__arw { color: var(--muted-2); transition: transform .2s var(--ease); }
.nextrace:hover .nextrace__arw { transform: translateX(3px); color: var(--red); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 24px; height: 40px; border: 1.5px solid var(--line-2);
  border-radius: 20px; z-index: 2;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  background: var(--red); border-radius: 2px; transform: translateX(-50%);
  animation: scroll 1.6s ease-in-out infinite;
}
@keyframes scroll { 0% { opacity: 0; top: 8px; } 50% { opacity: 1; } 100% { opacity: 0; top: 22px; } }

/* ---------- Hero portrait / number ---------- */
.hero__portrait { position: relative; justify-self: end; width: 100%; max-width: 400px; }
.portrait {
  position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__placeholder {
  position: absolute; inset: 0; display: none; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center; color: var(--muted-2);
}
.portrait__mark { width: 46px; height: 46px; opacity: .5; }
.portrait__placeholder small { font-size: .76rem; opacity: .8; }
.portrait.is-empty img { display: none; }
.portrait.is-empty .portrait__placeholder { display: flex; }
.numplate {
  position: absolute; right: -12px; bottom: -12px;
  min-width: 84px; height: 84px; padding: 0 12px; border-radius: 3px;
  clip-path: var(--cut); background: var(--red); color: #fff; display: grid; place-items: center;
}
.numplate span {
  font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 2.7rem;
  line-height: 1;
}

/* ---------- Stat bar ---------- */
.statbar { border-block: 1px solid var(--line); background: var(--bg); }
.statbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  text-align: center; padding: 46px 0;
}
.stat { position: relative; }
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: var(--line);
}
.stat__num {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); line-height: 1.15;
}
.stat__label {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted); font-size: .78rem; margin-top: 12px; display: block; font-weight: 500;
}

/* ---------- Sections ---------- */
.section { padding: clamp(72px, 11vw, 128px) 0; position: relative; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section__head { max-width: 660px; margin-bottom: 58px; }
.section__head h2 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
.section__sub { color: var(--muted); margin-top: 18px; font-size: 1.06rem; line-height: 1.7; }

/* ---------- Results table ---------- */
.results { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.results__season {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  letter-spacing: .02em; font-weight: 700; font-size: 1.1rem; color: var(--ink);
  padding: 20px 26px; border-bottom: 1px solid var(--line);
}
.rtable-wrap { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; min-width: 520px; }
.rtable th {
  text-align: left; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600;
  color: var(--muted-2); padding: 14px 26px; border-bottom: 1px solid var(--line);
}
.rtable td {
  padding: 17px 26px; border-bottom: 1px solid var(--line);
  font-size: 1rem; color: var(--ink);
}
.rtable tbody tr:last-child td { border-bottom: 0; }
.rtable tbody tr:hover { background: var(--bg-2); }
.rtable td:first-child { font-weight: 600; }
.rtable__pos { text-align: right; }
.pos {
  display: inline-block; min-width: 46px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: .98rem;
  padding: 5px 12px; border-radius: 3px; color: var(--muted);
}
.pos--pod { color: var(--red); }
.pos--win { background: var(--red); color: #fff; clip-path: var(--cut-sm); }
.results__note {
  padding: 16px 26px; color: var(--muted); font-size: .9rem;
  border-top: 1px solid var(--line);
}

/* ---------- Career record (year-by-year) ---------- */
.career { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.cyear {
  display: grid; grid-template-columns: 118px 1fr; gap: 30px; align-items: start;
  padding: 26px 28px; border-bottom: 1px solid var(--line);
}
.cyear__head { display: grid; gap: 7px; }
.cyear__yr {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 2.1rem; line-height: 1; color: var(--ink);
}
.cyear__cat {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; font-weight: 700; color: var(--muted-2);
}
.cyear__list { list-style: none; display: grid; gap: 0; }
.cyear__list li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.cyear__list li:first-child { padding-top: 2px; }
.cyear__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cev { display: grid; gap: 3px; }
.cev__name { color: var(--ink); font-weight: 500; }
.cev__note { font-size: .84rem; color: var(--muted); }
.cres-wrap { display: grid; gap: 3px; justify-items: end; text-align: right; }
.cres {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: .92rem;
  color: var(--red); white-space: nowrap;
}
.cres--muted { color: var(--muted-2); }
.cres-sub {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; font-weight: 600; color: var(--muted-2); white-space: nowrap;
}
.career__note {
  padding: 16px 28px; color: var(--muted); font-size: .9rem;
  border-top: 1px solid var(--line); margin: 0;
}
.career__abbr {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
}

/* NOTE: .results / .rtable / .pos styles below are the race-by-race table —
   currently unused (swapped for the year-by-year .career list) but kept so it
   can be restored later. */

/* ---------- Schedule ---------- */
.schedule { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.sched {
  display: grid; grid-template-columns: 82px 1fr auto; gap: 26px; align-items: center;
  padding: 22px 28px; border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.sched:last-child { border-bottom: 0; }
.sched:hover { background: var(--bg-2); }
.sched__date {
  display: grid; place-items: center; text-align: center; line-height: 1;
  border-right: 1px solid var(--line); padding-right: 22px;
}
.sched__mon {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; font-size: .74rem; color: var(--red);
}
.sched__day {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 2rem; color: var(--ink); margin-top: 3px;
}
.sched__body h3 { font-size: 1.2rem; margin-bottom: 3px; }
.sched__body p { color: var(--muted); font-size: .92rem; }
.sched__status {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .12em; font-size: .68rem; font-weight: 700;
  padding: 6px 14px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.sched.is-next .sched__status { background: var(--red); border-color: var(--red); color: #fff; clip-path: var(--cut-sm); }
.sched.is-done { opacity: .5; }

/* ---------- Schedule: interactive map layout ---------- */
.sched-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: start; }
.racemap-wrap { position: relative; }
.racemap {
  height: 480px; border: 1px solid var(--line); border-radius: 3px;
  clip-path: var(--cut); overflow: hidden; background: var(--bg-2);
  position: relative; z-index: 0;
}
.racemap__note {
  margin-top: 12px; font-size: .78rem; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
}
.sched.is-active { background: #fff; box-shadow: inset 3px 0 0 var(--red); }
.section--alt .sched.is-active { background: #fff; }

/* Custom map pins */
.pinwrap { background: none; border: 0; }
.pin {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--red); color: #fff; border: 2px solid #fff;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 13px;
  box-shadow: 0 3px 8px rgba(14, 14, 20, .35);
}
.pin--done { background: var(--muted-2); }
.pin--next::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--red); animation: ping 1.8s ease-out infinite;
}
/* Leaflet popup — minimalist restyle */
.leaflet-popup-content-wrapper { border-radius: 4px; box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 14px 16px; }
.pinpop { display: grid; gap: 3px; font-family: var(--font-body); }
.pinpop span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--red); font-weight: 700;
}
.pinpop strong { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink); }
.pinpop em { font-style: normal; font-size: .82rem; color: var(--muted); }

/* ---------- About / Driver ---------- */
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 68px; align-items: center; }
.about__media { position: relative; }
.about__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__placeholder {
  position: absolute; inset: 0; display: none; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; color: var(--muted-2); text-align: center;
}
.about__placeholder small { font-size: .8rem; opacity: .8; }
.about__photo.is-empty img { display: none; }
.about__photo.is-empty .about__placeholder { display: flex; }
.about__badge {
  position: absolute; right: 20px; bottom: 24px;
  background: var(--red); color: #fff; padding: 18px 22px; border-radius: 10px;
  width: max-content; max-width: 176px;
}
.about__badge strong {
  display: block; font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 1.3rem; line-height: 1.15; letter-spacing: .02em;
}
.about__badge span {
  display: block; font-family: var(--font-body); font-size: .86rem; font-weight: 400;
  line-height: 1.55; margin-top: 7px; color: rgba(255, 255, 255, .8); text-wrap: pretty;
}
.about__body h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 24px; }
/* Italic display type leaves an uneven gap before a period — the slant of a
   letter like Y opens more space than a flat-sided one like E. Pull each dot
   back so both read the same distance from the word. */
.kdot { display: inline-block; margin-left: .03em; }
/* Curly apostrophe carries its own sidebearings, so it needs no extra
   margin — this keeps every gap in "LET'S TALK." identical. */
.kapos { display: inline-block; margin: 0; }
/* Push the T'S of "LET'S" right off the E, pulling the following word space
   back by the same amount so "TALK." keeps its position. */
.kts { display: inline-block; margin-left: .045em; margin-right: -.045em; }
/* Partners heading: the default 660px head is too narrow for "…with a" to
   fit on one line, so it broke into three. Widen it and force the break so
   "driver on the rise." always gets its own row on desktop. */
#partners .section__head { max-width: 780px; }
.kdot--wide { margin-left: -.12em; }
.about__body p { color: var(--muted); margin-bottom: 18px; line-height: 1.75; }
.checklist { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 30px; color: var(--ink); }
.checklist li::before {
  content: ''; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; background: var(--red);
}

/* ---------- Path ---------- */
.path { overflow: hidden; }
.path__bg { display: none; }
.path__inner { position: relative; z-index: 1; }
.path__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.goalcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 34px 30px; transition: transform .25s var(--ease), border-color .25s;
}
.goalcard:hover { transform: translateY(-5px); border-color: var(--line-2); }
.goalcard__k {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 1.5rem; color: var(--red); display: block; margin-bottom: 16px;
  text-transform: uppercase; letter-spacing: -.03em; font-kerning: normal;
  padding-right: .08em;
}
/* The italic X leaves a gap before the T — close it on that letter alone. */
.goalcard__k .kt { display: inline-block; margin-left: -.06em; }
.goalcard h3 {
  font-size: 1.35rem; margin-bottom: 12px; line-height: 1.22; text-wrap: balance;
}
.goalcard p { color: var(--muted); font-size: .98rem; line-height: 1.7; }

/* ---------- Season photos (collapsible, under the career record) ---------- */
.seasons-wrap { margin-top: 26px; }
.seasons-toggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  list-style: none; width: fit-content;
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; font-size: .95rem; color: var(--ink);
  padding: 13px 22px; border-radius: 3px; clip-path: var(--cut); background: var(--bg-2);
  transition: background .2s;
}
.seasons-toggle::-webkit-details-marker { display: none; }
.seasons-toggle:hover { background: #ececee; }
.seasons-toggle__hide {
  font-family: var(--font-body); font-style: normal; font-weight: 600;
  text-transform: none; letter-spacing: .04em; font-size: .8rem; color: var(--muted-2);
}
.seasons-toggle__chev {
  width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease);
}
.seasons-wrap[open] .seasons-toggle__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.seasons-wrap[open] .seasons-toggle { background: #ececee; }
.seasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.seasons .gtile { margin-bottom: 0; height: 330px; }
/* uniform strip: crop biased upward so helmets/drivers stay in frame */
.seasons .gtile img { height: 100%; object-fit: cover; object-position: center 32%; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 20px; }
/* Feature photo — sized to its own aspect ratio so the whole subject shows (no crop) */
.gfeature {
  position: relative; overflow: hidden; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  aspect-ratio: 1200 / 766; width: 100%; max-width: 570px;
}
.gfeature img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gfeature:hover img { transform: scale(1.04); }
/* Masonry — each photo keeps its own shape, portrait or landscape, never cropped */
.gmosaic { column-count: 3; column-gap: 16px; }
/* Split layout: feature on the left, two smaller shots stacked and
   staggered on the right. The right stack is capped to the feature's
   height so the whole block stays a tight, balanced band. */
.gallery--split { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.gallery--split .gfeature { max-width: none; width: 100%; aspect-ratio: 1200 / 766; }
.gside { display: flex; flex-direction: column; gap: 18px; }
.gside .gtile { flex: 1 1 0; min-height: 0; width: auto; max-width: none; margin-bottom: 0; overflow: hidden; }
.gside .gtile img { width: 100%; height: 100%; object-fit: cover; }
.gtile {
  position: relative; overflow: hidden; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  break-inside: avoid; margin-bottom: 16px;
}
.gtile img { width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }

/* Caption — white panel over the photo */
.gcap {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px;
  background: rgba(255, 255, 255, .93);
  opacity: 0; transition: opacity .28s var(--ease);
}
.gcap__yr {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 2rem; line-height: 1; color: var(--ink);
}
.gcap__txt { font-family: var(--font-body); font-size: .84rem; line-height: 1.45; color: var(--muted); max-width: 30ch; }
.seasons .gcap { padding: 16px; }
.seasons .gcap__yr { font-size: 1.7rem; margin-bottom: 2px; }
.gfeature .gcap__yr { font-size: 2.6rem; }

@media (hover: hover) {
  .gtile:hover .gcap, .gfeature:hover .gcap { opacity: 1; }
  .gtile:hover img, .gfeature:hover img { transform: scale(1.03); }
}
/* Touch devices can't hover — show the caption as a bar so it's never hidden */
@media (hover: none) {
  .gcap {
    opacity: 1; inset: auto 0 0 0; flex-direction: row; align-items: baseline;
    justify-content: flex-start; gap: 10px; padding: 12px 14px; text-align: left;
    background: rgba(255, 255, 255, .95);
  }
  .gcap__yr, .gfeature .gcap__yr { font-size: 1.15rem; }
  .gcap__txt { font-size: .8rem; }
}
.gtile__ph {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  color: var(--muted-2); font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .14em; font-size: .78rem; font-weight: 500;
}
.gtile.is-empty img { display: none; }
.gtile.is-empty .gtile__ph { display: flex; }

/* ---------- Partnership ---------- */
.partners__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 50px; }
.pcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 36px 32px; transition: transform .25s var(--ease), border-color .25s;
}
.pcard:hover { transform: translateY(-5px); border-color: var(--line-2); }
.pcard h3 { font-size: 1.3rem; margin-bottom: 12px; word-spacing: .1em; }
.pcard p { color: var(--muted); font-size: .98rem; line-height: 1.7; }
.partners__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 14px; padding: 40px 44px; background: var(--panel);
}
.partners__cta h3 { font-size: 1.7rem; }
.partners__cta p { color: var(--muted); margin-top: 8px; }

/* ---------- Contact ---------- */
.contact__head { max-width: 580px; margin-bottom: 48px; }
.contact__head h2 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
.contact__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 52px; align-items: start; }
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label {
  display: grid; gap: 9px; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; color: var(--muted); font-weight: 600;
}
.form input, .form select, .form textarea {
  font-family: var(--font-body); font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; transition: border-color .2s;
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted-2); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--ink);
}
.form textarea { resize: vertical; }
.form__note { font-family: var(--font-body); text-transform: none; letter-spacing: 0; color: var(--red); font-weight: 500; }
.form__note.is-ok { color: #0f9d58; }
/* Honeypot — never shown to people, left in the DOM for bots to trip on */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__side { display: grid; gap: 20px; align-content: start; }
.contact__block { border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.contact__label {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .14em; font-size: .72rem; color: var(--muted-2); display: block; margin-bottom: 10px; font-weight: 600;
}
.contact__block a { color: var(--ink); font-weight: 500; }
.contact__block a:hover { color: var(--red); }
.socials { display: flex; gap: 18px; flex-wrap: wrap; }
.socials a { color: var(--muted); font-weight: 500; }
.socials a:hover { color: var(--red); }
.contact__block--card p { font-style: italic; font-size: 1.02rem; color: var(--ink); }
.contact__block--card span { color: var(--muted-2); font-size: .84rem; display: block; margin-top: 12px; }

/* ---------- Footer ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding: 48px 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__logo { height: 34px; }
.footer__links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__links a {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); font-size: .78rem; font-weight: 600;
}
.footer__links a:hover { color: var(--ink); }
.footer__copy { color: var(--muted-2); font-size: .84rem; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(255, 255, 255, .98); backdrop-filter: blur(14px);
    padding: 10px 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-140%); transition: transform .35s var(--ease); pointer-events: none;
  }
  .nav__links.is-open { transform: none; pointer-events: auto; }
  .nav__links a { padding: 16px 24px; width: 100%; font-size: 1rem; }
  .nav__cta { margin: 10px 24px; justify-content: center; }
  .topbar { display: none; }
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__portrait { justify-self: start; max-width: 340px; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; gap: 44px; }
  .about__media { max-width: 420px; }
  .path__cards, .partners__grid { grid-template-columns: 1fr; }
  .sched-layout { grid-template-columns: 1fr; gap: 20px; }
  .racemap { height: 340px; }
  .statbar__grid { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .stat:nth-child(3)::before, .stat:nth-child(odd)::before { display: none; }
  .gfeature { max-width: 100%; }
  .gmosaic { column-count: 2; }
  #partners h2 .brk { display: none; }
  .gallery--split { grid-template-columns: 1fr; }
  .gallery--split .gfeature { aspect-ratio: 1200 / 766; }
  .gside { flex-direction: row; height: auto; }
  .gside .gtile { width: auto; max-width: none; flex: 1; aspect-ratio: 3 / 2; }
  .seasons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .partners__cta { padding: 30px 26px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; text-align: center; }
  .cyear { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .cyear__head { display: flex; align-items: baseline; gap: 12px; }
  .cyear__list li { flex-wrap: wrap; gap: 6px 16px; }
  .cres-wrap { justify-items: start; text-align: left; }
  .sched { grid-template-columns: 64px 1fr; gap: 18px; row-gap: 8px; }
  .sched__status { grid-column: 2; justify-self: start; }
  .gmosaic { column-count: 1; }
  .gside { flex-direction: column; }
  /* Give the small text links a comfortable touch target (>=24px) without
     changing how they look on desktop. */
  .footer__links a, .socials a, .contact__block > a { display: inline-block; padding: 7px 0; }
  .footer__links { gap: 10px 26px; }
  .seasons { grid-template-columns: 1fr; }
  .nextrace { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}