/* Night drive layer. Loaded last; keeps the site's type, dock and layout, and adds the
   2 AM freeway: the hero road, a trip meter in the top bar, exit tags on section headings,
   and the "Off the clock" chapter (the San Diego drive and the car club). */

:root {
  --sodium: #ffb14e;
  --sodium-soft: rgba(255, 177, 78, 0.14);
  --tail: #ff3a48;
  --road-mono: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --road-sign: "Overpass", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ------------------------------------------------------------------ hero */

.hero-story #hero-story-canvas {
  opacity: 1;
}

.hero-story-sticky {
  background: #04060c;
}

.hero-story-grid,
.hero-story-object-label,
.hero-glow {
  display: none;
}

.hero-story-vignette {
  background:
    linear-gradient(90deg, rgba(4, 6, 12, 0.86) 0%, rgba(4, 6, 12, 0.5) 34%, rgba(4, 6, 12, 0) 58%),
    radial-gradient(ellipse at 75% 55%, transparent 40%, rgba(2, 3, 8, 0.5) 100%);
}

.hero-story-kicker {
  color: rgba(255, 196, 120, 0.82);
}

.hero-story-bottom strong {
  color: #ffd29a;
}

.hero-story-line::after {
  background: linear-gradient(90deg, var(--sodium), #ffd8a1);
}

/* ------------------------------------------------------------------ trip meter */

.trip {
  position: fixed;
  top: 22px;
  right: clamp(16px, 3.6vw, 50px);
  z-index: 60;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(10, 14, 24, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(140%);
  color: #dfe6f4;
  font-family: var(--road-mono);
  pointer-events: none;
}

.trip-cell {
  display: grid;
  min-width: 78px;
  padding: 9px 14px 8px;
  gap: 1px;
}

.trip-cell + .trip-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.trip-cell b {
  color: #ffcf8f;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 0 0 14px rgba(255, 177, 78, 0.45);
}

.trip-cell small {
  color: rgba(214, 222, 240, 0.48);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .trip-cell.trip-route {
    display: none;
  }
}

@media (max-width: 760px) {
  .trip {
    display: none;
  }
}

/* ------------------------------------------------------------------ exit tags */

.exit-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: rgba(214, 222, 240, 0.62);
  font: 600 12px/1 var(--road-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.exit-tag b {
  padding: 5px 8px 3px;
  border-radius: 4px;
  background: #ffd23f;
  color: #15130a;
  font: 800 11px/1 var(--road-sign);
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ section rail as mile markers */

.section-rail-fill {
  background: linear-gradient(180deg, #ffd8a1, var(--sodium));
}

.section-rail a[aria-current] span {
  color: var(--sodium);
}

/* ------------------------------------------------------------------ chapter: off the clock */

.drive {
  position: relative;
  height: 340vh;
  background: #04060c;
  color: #eef2fa;
}

.drive-sticky {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100dvh;
  overflow: hidden;
  align-items: center;
  isolation: isolate;
}

/* Passing streetlights wash over the whole chapter as it scrolls. */
.drive-sticky::before {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(ellipse 30% 55% at var(--lamp-x, 120%) 8%, rgba(255, 168, 70, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 70% 100%, rgba(255, 58, 72, 0.06), transparent 70%);
  content: "";
}

.drive-sticky::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #04060c 0%, transparent 22%, transparent 78%, #04060c 100%);
  content: "";
}

.drive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding-block: 96px 40px;
}

.drive-copy h2 {
  max-width: 9ch;
  margin: 0 0 22px;
  font-size: clamp(3rem, min(6.4vw, 10.5vh), 6.4rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.86;
}

.drive-copy h2 span {
  color: var(--sodium);
}

.drive-lede {
  max-width: 40ch;
  margin: 0 0 min(30px, 3vh);
  color: rgba(222, 231, 245, 0.72);
  font-size: 1.06rem;
  line-height: 1.65;
}

.drive-log {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
}

.drive-log::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  content: "";
}

.drive-log li {
  position: relative;
  padding: min(10px, 1.2vh) 0;
  color: rgba(222, 231, 245, 0.34);
  transition: color 500ms var(--ease, ease);
}

.drive-log li::before {
  position: absolute;
  top: calc(min(10px, 1.2vh) + 6px);
  left: -26px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: #04060c;
  content: "";
  transition: background 400ms, border-color 400ms, box-shadow 400ms;
}

.drive-log li.is-lit {
  color: #eef2fa;
}

.drive-log li.is-lit::before {
  border-color: var(--sodium);
  background: var(--sodium);
  box-shadow: 0 0 14px rgba(255, 177, 78, 0.7);
}

.drive-log small {
  display: block;
  margin-bottom: 3px;
  color: var(--sodium);
  font: 500 11px/1.3 var(--road-mono);
  letter-spacing: 0.14em;
  opacity: 0.5;
  text-transform: uppercase;
  transition: opacity 400ms;
}

.drive-log li.is-lit small {
  opacity: 1;
}

.drive-log p {
  max-width: 44ch;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}

.drive-log q {
  color: #ffd8a1;
  font-style: italic;
}

/* The instrument cluster: odometer plus the four air-suspension corners. */
.cluster {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 177, 78, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(17, 22, 36, 0.92), rgba(8, 11, 19, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 90px rgba(0, 0, 0, 0.5);
}

.cluster-top {
  display: flex;
  justify-content: space-between;
  color: rgba(214, 222, 240, 0.5);
  font: 500 10.5px/1.3 var(--road-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cluster-top b {
  color: #ffcf8f;
  font-weight: 500;
}

.odo {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: min(24px, 2.6vh) 0 6px;
}

.odo-digit {
  position: relative;
  width: clamp(44px, 5.4vw, 66px);
  height: clamp(64px, 7.6vw, 92px);
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #020306, #10141f 50%, #020306);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 10px 18px rgba(0, 0, 0, 0.8), inset 0 -10px 18px rgba(0, 0, 0, 0.8);
}

.odo-reel {
  display: grid;
  transform: translateY(calc(var(--d, 0) * -10%));
  transition: transform 260ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

.odo-reel span {
  display: grid;
  height: clamp(64px, 7.6vw, 92px);
  place-items: center;
  color: #f4f6fb;
  font: 500 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--road-mono);
}

.odo-unit {
  margin: 0 0 min(24px, 2.6vh);
  color: rgba(214, 222, 240, 0.48);
  font: 500 10.5px/1 var(--road-mono);
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.chassis {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px 18px;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.chassis svg {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: clamp(64px, 7vw, 86px);
  height: auto;
}

.corner {
  font-family: var(--road-mono);
}

.corner:nth-of-type(2n) {
  text-align: right;
}

.corner b {
  display: block;
  color: var(--tail);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.1;
  text-shadow: 0 0 16px rgba(255, 58, 72, 0.5);
}

.corner small {
  color: rgba(214, 222, 240, 0.48);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cluster-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: min(20px, 2.2vh) 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 58, 72, 0.08);
  color: #ffb3b9;
  font: 500 11px/1.4 var(--road-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cluster-warn i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tail);
  box-shadow: 0 0 10px var(--tail);
  animation: warn-blink 1.4s steps(2, jump-none) infinite;
}

@keyframes warn-blink {
  50% {
    opacity: 0.25;
  }
}

/* Car club */
.club {
  position: relative;
  padding-block: clamp(90px, 14vw, 170px);
  background: #04060c;
  color: #eef2fa;
}

.club-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.club h2 {
  margin: 0 0 22px;
  font-size: clamp(2.8rem, 5.6vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.club-count {
  display: block;
  margin: 0 0 18px;
  color: #f4f6fb;
  font-size: clamp(5rem, 12vw, 10.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.8;
}

.club-count em {
  color: var(--sodium);
  font-style: normal;
}

.club h2 {
  max-width: 21ch;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.club p {
  max-width: 42ch;
  color: rgba(222, 231, 245, 0.72);
  font-size: 1.06rem;
  line-height: 1.65;
}

.club p strong {
  color: #eef2fa;
  font-weight: 600;
}

.crowd {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: clamp(3px, 0.45vw, 6px);
}

.crowd i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  transform: scale(0.5);
  transition: background 400ms, box-shadow 400ms, transform 400ms, opacity 400ms;
}

/* Lit members read like headlights at a meet seen from above: warm, uneven, a few brighter. */
.crowd i.on {
  background: var(--sodium);
  opacity: var(--glow, 0.7);
  transform: scale(0.62);
}

.crowd i.on:nth-child(11n) {
  background: #fff1dc;
  box-shadow: 0 0 8px rgba(255, 226, 180, 0.7);
  transform: scale(0.72);
}

.crowd i.on:nth-child(23n + 5) {
  background: var(--tail);
  box-shadow: 0 0 6px rgba(255, 58, 72, 0.6);
}

.club .crowd-caption {
  max-width: none;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  color: rgba(214, 222, 240, 0.48);
  font: 500 10.5px/1.3 var(--road-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .drive {
    height: auto;
  }

  .drive-sticky {
    position: relative;
  }

  .drive-grid,
  .club-grid {
    grid-template-columns: 1fr;
  }

  .drive-log li {
    color: #eef2fa;
  }

  .drive-log li::before {
    border-color: var(--sodium);
    background: var(--sodium);
  }

  .drive-log small {
    opacity: 1;
  }

  .crowd {
    grid-template-columns: repeat(25, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drive {
    height: auto;
  }

  .drive-sticky {
    position: relative;
  }

  .drive-log li {
    color: #eef2fa;
  }

  .odo-reel,
  .crowd i,
  .drive-log li,
  .drive-log li::before {
    transition: none;
  }

  .cluster-warn i {
    animation: none;
  }
}

/* ================================================================== whole-site pass */

body {
  background: #04060c;
}

/* The old drifting colour blobs become a faint night sky: deep blue up top, city glow below. */
body .ambient .amb-a {
  opacity: 0.22;
}

body .ambient .amb-b {
  opacity: 0.1;
}

/* A streetlight sweeping through the cabin as you scroll (position set in night.js). */
.sweep {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent calc(var(--sweep, 0) * 160% - 40%), rgba(255, 170, 70, 0.05) calc(var(--sweep, 0) * 160% - 22%), rgba(255, 196, 120, 0.075) calc(var(--sweep, 0) * 160% - 18%), rgba(255, 170, 70, 0.05) calc(var(--sweep, 0) * 160% - 14%), transparent calc(var(--sweep, 0) * 160% + 4%));
  mix-blend-mode: screen;
}

/* Shared surface for panels: the same dark, warm-lit glass as the instrument cluster. */
body .lab-stage,
body .exp-card,
body .cap {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 177, 78, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(17, 22, 36, 0.9), rgba(8, 11, 19, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px rgba(0, 0, 0, 0.45);
}

body .exp-card::before {
  background: linear-gradient(90deg, transparent, var(--sodium), transparent);
}

/* ------------------------------------------------------------------ marquee reflectors */

body .marquee-set i {
  width: clamp(16px, 2.2vw, 30px);
  height: clamp(8px, 1vw, 13px);
  border-radius: 3px;
  background: linear-gradient(180deg, #fff2d6, var(--sodium));
  box-shadow: 0 0 18px rgba(255, 177, 78, 0.75), 0 0 2px #fff;
}

/* ------------------------------------------------------------------ manifesto: through the windshield */

body .manifesto-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bokeh {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 85%, transparent);
}

.bokeh span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, var(--c) 52%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: var(--o);
  filter: blur(var(--b));
  mix-blend-mode: screen;
  transform: translate3d(0, calc(var(--scene-progress, 0) * var(--drift) * -1px), 0);
  transition: transform 300ms linear;
}

/* ------------------------------------------------------------------ work: showroom lighting */

.pj-stage::before {
  position: absolute;
  top: -150px;
  left: 50%;
  z-index: -1;
  width: 120%;
  height: 150%;
  background: linear-gradient(180deg, rgba(255, 214, 160, 0.16), rgba(255, 190, 120, 0.04) 55%, transparent 80%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  content: "";
  filter: blur(14px);
  pointer-events: none;
  transform: translateX(-50%);
}

/* A glossy floor under the screen, with the screen reflected in it. */
.pj-stage::after {
  position: absolute;
  right: -6%;
  bottom: -90px;
  left: -6%;
  z-index: -1;
  height: 140px;
  background: radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255, 190, 120, 0.12), transparent 70%);
  content: "";
  pointer-events: none;
}

.pj-views {
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(255, 255, 255, 0.16));
}

body .pj-glow {
  opacity: 0.4;
}

body .pj-stats li {
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: linear-gradient(180deg, #020306, #0b0f19);
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.6);
}

body .pj-stats strong {
  font-family: var(--road-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-shadow: 0 0 16px color-mix(in srgb, var(--pc) 55%, transparent);
}

body .pj-num {
  font-family: var(--road-mono);
}

/* ------------------------------------------------------------------ about */

body .cap-tile.is-active {
  border-color: rgba(255, 177, 78, 0.55);
  background: linear-gradient(150deg, rgba(255, 177, 78, 0.16), rgba(255, 177, 78, 0.03));
  box-shadow: 0 14px 40px rgba(255, 140, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body .cap-tile.is-active .cap-icon {
  border-color: rgba(255, 177, 78, 0.5);
  background: rgba(255, 177, 78, 0.12);
}

body .cap-chip.is-active {
  border-color: rgba(255, 177, 78, 0.55);
}

/* ------------------------------------------------------------------ resume: window sticker */

.sticker-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  padding-block: clamp(100px, 12vw, 170px);
}

.sticker-heading {
  margin: 0 0 18px;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.sticker-copy p:not(.exit-tag) {
  max-width: 36ch;
  margin: 0 0 28px;
  color: rgba(222, 231, 245, 0.72);
  font-size: 1.04rem;
  line-height: 1.65;
}

.sticker {
  --paper: #f3f1ea;
  --ink-p: #15161a;
  --rule: #15161a;
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 210, 150, 0.35), transparent 55%),
    var(--paper);
  color: var(--ink-p);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 120px rgba(255, 170, 70, 0.12);
  transform: rotate(-1.2deg);
  transition: transform 600ms var(--ease, ease);
}

.sticker:hover {
  transform: rotate(0deg) translateY(-4px);
}

/* Sticker glare from the overhead light. */
.sticker::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 48%, transparent 56%);
  content: "";
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.sticker-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--rule);
}

.sticker-kicker {
  margin: 0 0 4px;
  font: 700 10.5px/1.3 var(--road-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sticker-head h3 {
  margin: 0;
  color: var(--ink-p);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sticker-id {
  display: grid;
  gap: 4px;
  margin: 0;
  text-align: right;
}

.sticker-id dt,
.sticker-list dt {
  font: 700 9.5px/1.3 var(--road-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.sticker-id dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.sticker-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 16px 0;
}

.sticker-col h4 {
  margin: 0 0 8px;
  padding: 4px 0 3px;
  border-top: 1.5px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 700 10.5px/1.3 var(--road-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sticker-col h4 + * {
  margin-bottom: 16px;
}

.sticker-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.sticker-list dd {
  margin: 1px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.sticker-options {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sticker-options li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px dotted rgba(21, 22, 26, 0.4);
  font-size: 13px;
}

.sticker-options span {
  font-weight: 700;
}

.sticker-options b {
  font-weight: 400;
  opacity: 0.7;
  text-align: right;
}

.sticker-epa {
  margin-bottom: 16px;
  padding: 12px;
  border: 2.5px solid var(--rule);
  border-radius: 10px;
  background: #fff;
}

.sticker-epa-title {
  margin: 0 0 6px;
  font: 800 11px/1 var(--road-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sticker-epa-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.sticker-epa-main strong {
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.sticker-epa-main small {
  margin-left: 2px;
  font-size: 0.4em;
  letter-spacing: 0;
}

.sticker-epa-main span,
.sticker-epa-row span {
  font-size: 11.5px;
  line-height: 1.3;
}

.sticker-epa-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 8px;
}

.sticker-epa-row div {
  display: grid;
}

.sticker-epa-row strong {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sticker-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 3px solid var(--rule);
  font-size: 10.5px;
  line-height: 1.4;
}

.sticker-barcode {
  flex: none;
  width: 120px;
  height: 34px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 2px, transparent 2px 3px, var(--rule) 3px 4px, transparent 4px 7px, var(--rule) 7px 10px, transparent 10px 11px, var(--rule) 11px 12px, transparent 12px 15px);
}

/* ------------------------------------------------------------------ contact: arriving at dawn */

body .footer-scene {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #04060c 0%, #0b1026 35%, #261d3d 62%, #5c3a4a 82%, #a8604a 100%);
}

.dawn {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 60%;
  pointer-events: none;
}

.dawn-sun {
  position: absolute;
  bottom: -18%;
  left: 50%;
  width: min(90vw, 1100px);
  aspect-ratio: 2.2;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 214, 160, 0.75), rgba(255, 150, 90, 0.35) 30%, transparent 65%);
  filter: blur(10px);
  transform: translateX(-50%);
}

.dawn-ridge {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 70px;
  background: #0b0a14;
  clip-path: polygon(0 60%, 8% 42%, 17% 55%, 28% 30%, 37% 48%, 48% 36%, 58% 52%, 69% 28%, 80% 46%, 90% 34%, 100% 50%, 100% 100%, 0 100%);
}

body .footer-scene .footer-heading h2 span:not(.sr-only) {
  color: #ffd29a;
}

body .footer-scene .footer-email {
  border-color: rgba(255, 210, 154, 0.5);
  color: #ffe3bd;
}

body .footer-scene .footer-bottom {
  position: relative;
  z-index: 1;
  color: rgba(255, 236, 214, 0.7);
}

@media (max-width: 900px) {
  .sticker-scene,
  .sticker-body {
    grid-template-columns: 1fr;
  }

  .sticker {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sweep {
    display: none;
  }

  .bokeh span,
  .sticker {
    transition: none;
  }
}

/* Experience: same instrument readouts as the projects, logos on a softer plate. */
body .exp-stats li {
  border-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, #020306, #0b0f19);
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.6);
}

body .exp-stats strong {
  color: #ffd29a;
  font-family: var(--road-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-shadow: 0 0 16px rgba(255, 177, 78, 0.4);
}

body .exp-dates {
  font-family: var(--road-mono);
}

body .exp-dates i {
  background: var(--sodium);
  box-shadow: 0 0 10px rgba(255, 177, 78, 0.7);
}

body .exp-logo {
  background: #f3f1ea;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body .cap-detail-kicker,
body .cap-kicker {
  color: var(--sodium);
}

body .cap-proof {
  border-left-color: var(--sodium);
  background: rgba(255, 177, 78, 0.06);
}

@media (max-width: 640px) {
  .sticker-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .sticker-id {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    text-align: left;
  }

  body .footer-scene .footer-bottom {
    padding-bottom: 96px;
  }
}

/* ================================================================== global theme
   Blue stays as the identity colour (the JJ, "(Leo)"). Light in the world is sodium amber,
   warnings are taillight red, and everything that was teal or pale blue follows that. */

:root {
  --signal: #ffb14e;
  --accent: #ffc88f;
  --accent-deep: #ffd9ad;
  --accent-soft: rgba(255, 177, 78, 0.14);
  --leo: #92b7ff;
  --mono: var(--road-mono);
}

::selection {
  background: rgba(255, 177, 78, 0.35);
  color: #fff;
}

/* Buttons: primary is a warm headlight, secondary is dark glass. */
body .button-primary,
body .hero-story .button-primary {
  background: #f4ecdc;
  color: #140f07;
  box-shadow: 0 10px 30px rgba(255, 177, 78, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

body .button-primary:hover,
body .button-primary:focus-visible,
body .hero-story .button-primary:hover,
body .hero-story .button-primary:focus-visible {
  background: #ffe2b8;
  color: #140f07;
  box-shadow: 0 14px 40px rgba(255, 177, 78, 0.32);
}

body .button-secondary:hover,
body .button-secondary:focus-visible,
body .hero-story .button-secondary:hover,
body .hero-story .button-secondary:focus-visible {
  border-color: rgba(255, 200, 143, 0.7);
  color: #fff;
}

/* Top chrome */
body .scroll-progress {
  background: linear-gradient(90deg, #ff3a48, var(--sodium) 45%, #fff1dc);
  box-shadow: 0 0 14px rgba(255, 177, 78, 0.55);
}

body .brand-tag {
  color: var(--leo);
}

body .brand-tag i {
  background: var(--sodium);
}

body .dock-pill {
  background: radial-gradient(circle at 30% 18%, rgba(255, 236, 210, 0.42), rgba(255, 177, 78, 0.18) 70%);
  box-shadow: 0 0 24px rgba(255, 160, 60, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Cursor: a small headlight with a warm ring. */
body .cursor-glow {
  background: radial-gradient(circle closest-side, rgba(255, 190, 120, 0.05), transparent 72%);
}

body .cursor-orb {
  background: #fff1dc;
  box-shadow: 0 0 0 5px rgba(255, 177, 78, 0.14), 0 0 20px rgba(255, 177, 78, 0.55);
}

body .cursor-ring {
  border-color: rgba(255, 214, 170, 0.6);
}

body .cursor-cross {
  color: rgba(255, 214, 170, 0.7);
}

body .cursor-hover .cursor-ring {
  background: rgba(255, 177, 78, 0.06);
  border-color: var(--sodium);
}

body .cursor-press .cursor-ring {
  background: rgba(255, 58, 72, 0.12);
}

/* Hero bottom strip reads as the trip computer. */
body .hero-story-bottom {
  color: rgba(255, 226, 190, 0.55);
}

body .hero-story-bottom strong {
  color: #ffd29a;
}

body .hero-story-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 14px, transparent 14px 26px);
}

/* ------------------------------------------------------------------ marquee painted on the road */

body .marquee {
  padding-block: clamp(24px, 3vw, 40px);
  border: 0;
  background:
    linear-gradient(180deg, transparent 0 7px, rgba(255, 210, 63, 0.75) 7px 10px, transparent 10px calc(100% - 10px), rgba(240, 240, 248, 0.6) calc(100% - 10px) calc(100% - 7px), transparent calc(100% - 7px)),
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(180deg, #0c0e14, #12141c 50%, #0c0e14);
  transform: perspective(900px) rotateX(48deg);
  transform-origin: 50% 60%;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* Road lettering is painted stretched so it reads correctly from a low angle. */
body .marquee-set span,
body .marquee-set span.is-solid {
  display: inline-block;
  color: rgba(242, 240, 232, 0.88);
  font-family: var(--road-sign);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: scaleY(1.7);
  -webkit-text-stroke: 0;
}

body .marquee-set span:not(.is-solid) {
  color: rgba(242, 240, 232, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  body .marquee {
    transform: none;
  }
}

/* A sheen of light passes over the project screen when it changes. */
.pj-view.is-active .pj-frame::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 210, 0.22) 47%, rgba(255, 255, 255, 0.3) 50%, transparent 62%);
  background-size: 260% 100%;
  content: "";
  pointer-events: none;
  animation: pj-glare 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes pj-glare {
  from {
    background-position: 130% 0;
  }

  to {
    background-position: -40% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pj-view.is-active .pj-frame::after {
    display: none;
  }
}

/* The tilted road marquee projects slightly past the viewport edges; clip, don't scroll.
   (clip rather than hidden so sticky sections keep working.) */
html,
body {
  overflow-x: clip;
}

/* ------------------------------------------------------------------ headlines: headlights pass over */

html.js [data-split].is-in .sc {
  animation: sc-headlight 1500ms ease-out both;
  animation-delay: calc(var(--i, 0) * 24ms + 250ms);
}

@keyframes sc-headlight {
  0% {
    text-shadow: none;
  }

  30% {
    color: #fff6e6;
    text-shadow: 0 0 22px rgba(255, 177, 78, 0.85), 0 0 2px rgba(255, 240, 220, 0.9);
  }

  100% {
    text-shadow: none;
  }
}

/* ------------------------------------------------------------------ section rail as a GPS route */

body .section-rail {
  grid-template-columns: auto;
}

body .section-rail-track {
  display: none;
}

body .section-rail ol {
  position: relative;
  gap: 14px;
  padding-left: 22px;
  --route: 0;
}

/* The road, then the stretch already driven. */
body .section-rail ol::before,
body .section-rail ol::after {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 2px;
  content: "";
}

body .section-rail ol::before {
  bottom: 8px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0 5px, transparent 5px 10px);
}

body .section-rail ol::after {
  height: calc((100% - 16px) * var(--route));
  background: linear-gradient(180deg, rgba(255, 177, 78, 0.35), var(--sodium));
  box-shadow: 0 0 10px rgba(255, 177, 78, 0.5);
}

body .section-rail a {
  position: relative;
}

/* Exit markers on the route */
body .section-rail a::before {
  position: absolute;
  top: 50%;
  left: -22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: #04060c;
  content: "";
  transition: border-color 300ms, background 300ms, box-shadow 300ms;
}

body .section-rail li.is-passed a::before {
  border-color: var(--sodium);
  background: var(--sodium);
}

body .section-rail a[aria-current]::before {
  box-shadow: 0 0 0 4px rgba(255, 177, 78, 0.18), 0 0 14px rgba(255, 177, 78, 0.7);
}

body .section-rail li.is-passed a span {
  color: rgba(255, 214, 170, 0.75);
}

/* The car: a small headlight arrow riding the route. */
.rail-car {
  position: absolute;
  top: calc(8px + (100% - 16px) * var(--route));
  left: 5px;
  z-index: 1;
  width: 14px;
  height: 18px;
  margin: -9px 0 0 -7px;
  background: linear-gradient(180deg, #fff6e6, var(--sodium));
  clip-path: polygon(50% 100%, 100% 20%, 78% 0, 50% 18%, 22% 0, 0 20%);
  filter: drop-shadow(0 0 6px rgba(255, 177, 78, 0.9));
  pointer-events: none;
}

/* ------------------------------------------------------------------ arrival */

.trip.is-arrived {
  border-color: rgba(255, 177, 78, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px rgba(255, 160, 60, 0.25);
}

.trip.is-arrived .trip-route b {
  color: #fff1dc;
}

/* ------------------------------------------------------------------ the GR86 in the cluster */

.profile {
  position: relative;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gr86 {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

.profile-note {
  position: absolute;
  top: 18px;
  left: 0;
  color: rgba(214, 222, 240, 0.48);
  font: 500 10px/1.3 var(--road-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.corners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.corners .corner {
  padding: 8px 10px 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, #020306, #0b0f19);
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.corners .corner:nth-of-type(2n) {
  text-align: center;
}

.corners .corner b {
  font-size: 1.15rem;
}

/* ------------------------------------------------------------------ experience: repair orders */

.ro-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(40px, 5vw, 64px);
}

.ro {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px 6px 22px 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 177, 78, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(17, 22, 36, 0.92), rgba(8, 11, 19, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px rgba(0, 0, 0, 0.45);
}

/* Tear-off perforation along the top, like a shop ticket. */
.ro::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: radial-gradient(circle at 6px 0, #04060c 3px, transparent 3.5px) 0 0 / 12px 6px repeat-x;
  content: "";
}

.ro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.ro-logo {
  display: grid;
  height: 54px;
  padding: 8px 12px;
  place-items: center;
  border-radius: 10px;
  background: #f3f1ea;
}

.ro-logo img {
  width: auto;
  max-width: 150px;
  max-height: 38px;
}

.ro-meta {
  display: flex;
  gap: 18px;
  margin: 0;
  text-align: right;
}

.ro-meta dt,
.ro-concern span {
  color: rgba(214, 222, 240, 0.45);
  font: 500 9.5px/1.3 var(--road-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ro-meta dd {
  margin: 3px 0 0;
  color: #ffd29a;
  font: 500 13px/1.2 var(--road-mono);
}

.ro-title h3 {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.ro-title p {
  margin: 0;
  color: rgba(222, 231, 245, 0.6);
  font-size: 0.95rem;
}

.ro-concern {
  margin: 0;
  color: rgba(222, 231, 245, 0.78);
  font-size: 0.98rem;
  line-height: 1.55;
}

.ro-concern span {
  display: block;
  margin-bottom: 4px;
}

.ro-lines {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ro-lines li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.94rem;
}

.ro-lines i {
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255, 177, 78, 0.7);
  border-radius: 3px;
  background:
    linear-gradient(45deg, transparent 45%, var(--sodium) 45% 58%, transparent 58%) 2px 4px / 5px 6px no-repeat,
    linear-gradient(-45deg, transparent 42%, var(--sodium) 42% 56%, transparent 56%) 5px 1px / 7px 10px no-repeat;
}

.ro-lines b {
  color: rgba(214, 222, 240, 0.45);
  font: 500 10px/1 var(--road-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ro-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ro-totals div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #020306, #0b0f19);
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.6);
}

.ro-totals strong {
  color: #ffd29a;
  font: 500 clamp(1.3rem, 2.2vw, 1.7rem)/1 var(--road-mono);
  text-shadow: 0 0 16px rgba(255, 177, 78, 0.4);
}

.ro-totals span {
  color: rgba(214, 222, 240, 0.5);
  font: 11px/1.3 var(--road-mono);
}

/* Rubber stamp */
.ro-stamp {
  position: absolute;
  top: 92px;
  right: 22px;
  padding: 5px 12px 3px;
  border: 2px solid rgba(255, 177, 78, 0.75);
  border-radius: 6px;
  color: rgba(255, 196, 120, 0.85);
  font: 800 13px/1 var(--road-sign);
  letter-spacing: 0.16em;
  opacity: 0.85;
  text-transform: uppercase;
  transform: rotate(-8deg);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------------ about: parts catalog */

body .cap-tile {
  border-radius: 6px 6px 16px 16px;
}

.cap-pn {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(214, 222, 240, 0.38);
  font: 500 9.5px/1 var(--road-mono);
  letter-spacing: 0.08em;
}

body .cap-tile.is-active .cap-pn {
  color: var(--sodium);
}

body .cap-group h4 span::before {
  margin-right: 8px;
  color: var(--sodium);
  content: attr(data-section) " ·";
}

body .cap-detail {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 18px 18px;
}

.cap-detail-pn {
  margin: 0 0 14px;
  color: rgba(214, 222, 240, 0.45);
  font: 500 10px/1.3 var(--road-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cap-detail-pn b {
  color: var(--sodium);
  font-weight: 500;
}

@media (max-width: 900px) {
  .ro-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .ro-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ro-meta {
    text-align: left;
  }

  .ro-stamp {
    top: 22px;
  }

  .ro-lines li {
    grid-template-columns: 18px 1fr;
  }

  .ro-lines b {
    display: none;
  }

  .corners {
    grid-template-columns: repeat(2, 1fr);
  }
}