/* ==========================================================================
   theJaliya.com
   Implemented from the Claude Design handoff (jaliya-profile/Jaliya.html).

   Structure below is the design's own stylesheet, unchanged except where
   noted. Removed from the prototype: the Tweaks edit-mode panel, the unused
   .hero__nameplate rules, and a 'Smokum' fallback that never loaded.
   Added at the end: self-hosted fonts, mobile nav, focus states, and
   reduced-motion handling.
   ========================================================================== */

/* ---------- Self-hosted fonts ----------
   Latin subsets pulled from Google Fonts and served from this origin, so the
   page has no third-party runtime dependency. Space Grotesk and JetBrains
   Mono are variable fonts — one file each covers every weight, declared as a
   range rather than shipping the same bytes three times. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Rye';
  src: url('/fonts/rye.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   JALIYA — Personal site
   Monolithic B&W · Space Grotesk · Tech-editorial
   ========================================================================== */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --mid: #6b6b6b;
  --line: rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.4);
  --invert-bg: #000000;
  --invert-fg: #ffffff;

  --grain: 0.08;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --max: 1440px;
  --pad: clamp(24px, 4vw, 64px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The system cursor is hidden ONLY after script.js confirms it can draw a
   replacement (fine pointer, motion allowed). Unconditional `cursor: none`
   means any JS failure leaves the visitor with no pointer at all. */
body.custom-cursor { cursor: none; }

@media (max-width: 768px) {
  body.custom-cursor { cursor: auto; }
}

::selection { background: var(--fg); color: var(--bg); }

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

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
  animation: grainShift 1.6s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-5%,3%); }
  40%  { transform: translate(3%,-4%); }
  60%  { transform: translate(-2%,2%); }
  80%  { transform: translate(4%,-1%); }
  100% { transform: translate(0,0); }
}

/* ---------- Cursor ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  /* White, not var(--fg): difference blending inverts against the backdrop,
     so white reads black on the light page and white on the dark section.
     Black would compute to |255-0|=255 on white and |0-0|=0 on black —
     invisible in both places. Matches how .nav uses the same blend mode. */
  border: 1px solid #fff;
  background: transparent;
  display: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 200ms ease, height 200ms ease, background 200ms ease;
}
.cursor.lg { width: 56px; height: 56px; background: #fff; }
.cursor-crosshair {
  position: fixed;
  width: 18px; height: 18px;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  pointer-events: none;
  z-index: 9997;
  display: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  opacity: 0.6;
  transition: opacity 200ms ease;
}

body.custom-cursor .cursor,
body.custom-cursor .cursor-crosshair { display: block; }

@media (max-width: 768px) {
  body.custom-cursor .cursor,
  body.custom-cursor .cursor-crosshair { display: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  mix-blend-mode: difference;
  color: #fff;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: inherit;
  text-decoration: none;
}
.nav__brand .dot {
  width: 8px; height: 8px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.nav__links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.nav__links a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.nav__links a::before {
  content: '0' counter(navi) ' / ';
  opacity: 0.5;
  margin-right: 4px;
}
.nav__links { counter-reset: navi; }
.nav__links li { counter-increment: navi; }
.nav__links a:hover { opacity: 0.6; }

.nav__time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .nav__links { display: none; }
}

/* ---------- Edge frames ---------- */
.edges {
  position: fixed;
  inset: 14px;
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 50;
}
.edges::before, .edges::after {
  content: '';
  position: absolute;
  background: var(--fg);
}
.edges::before { top: -2px; left: 50%; width: 4px; height: 4px; transform: translateX(-50%); }
.edges::after { bottom: -2px; left: 50%; width: 4px; height: 4px; transform: translateX(-50%); }

/* corner ticks */
.tick {
  position: fixed;
  width: 10px; height: 10px;
  border-color: var(--fg);
  z-index: 51;
  pointer-events: none;
}
.tick.tl { top: 14px; left: 14px; border-top: 1px solid; border-left: 1px solid; }
.tick.tr { top: 14px; right: 14px; border-top: 1px solid; border-right: 1px solid; }
.tick.bl { bottom: 14px; left: 14px; border-bottom: 1px solid; border-left: 1px solid; }
.tick.br { bottom: 14px; right: 14px; border-bottom: 1px solid; border-right: 1px solid; }

/* side rails */
.rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mid);
  z-index: 51;
  pointer-events: none;
  white-space: nowrap;
}
.rail.left { left: 8px; transform-origin: left center; transform: translateY(-50%) rotate(-90deg) translateX(-50%); }
.rail.right { right: 8px; transform-origin: right center; transform: translateY(-50%) rotate(90deg) translateX(50%); }

@media (max-width: 900px) {
  .rail { display: none; }
}

/* ---------- Section base ---------- */
section {
  position: relative;
  padding: 0 var(--pad);
}

.section-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-tag::before {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  padding-top: 110px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 12) 120px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

/* Top headline */
.hero__top {
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto 40px;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: '';
  width: 36px; height: 1px;
  background: currentColor;
}

.hero__headline {
  font-size: clamp(40px, 7vw, 116px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__headline em {
  font-style: italic;
  font-weight: 400;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  padding: 0 0.05em;
}

/* Stage: stats — portrait — stats */
.hero__stage {
  position: relative;
  z-index: 3;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 30px 0;
}

.hero__stats {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: var(--font-mono);
}
.hero__stats--left { align-items: flex-end; text-align: right; }
.hero__stats--right { align-items: flex-start; }

.stat-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 110px;
}
.stat-cell__lbl {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}
.stat-cell__val {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.stat-cell__sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mid);
  max-width: 160px;
}

/* Portrait — central, framed, arched */
.hero__portrait-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hero__portrait {
  position: relative;
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 240px 240px 6px 6px;
  filter: grayscale(1) contrast(1.08);
  border: 1px solid var(--fg);
  will-change: transform;
}
.hero__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.05);
}
.portrait-tick {
  position: absolute;
  width: 14px; height: 14px;
}
.portrait-tick--tl { top: -7px; left: -7px; border-left: 1px solid var(--fg); border-top: 1px solid var(--fg); }
.portrait-tick--tr { top: -7px; right: -7px; border-right: 1px solid var(--fg); border-top: 1px solid var(--fg); }
.portrait-tick--bl { bottom: -7px; left: -7px; border-left: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }
.portrait-tick--br { bottom: -7px; right: -7px; border-right: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }

/* ---------- WILD WEST ELEMENTS ---------- */

/* Crossed revolvers */
.hero__revolvers {
  width: 320px;
  height: 130px;
  color: var(--fg);
  margin-top: 24px;
  margin-bottom: 4px;
}

/* Saloon name board */
.saloon-board {
  position: relative;
  margin-top: 6px;
  padding-top: 24px;
}
.saloon-rope {
  position: absolute;
  top: 0;
  width: 1px;
  height: 26px;
  background-image: linear-gradient(to bottom, var(--fg) 60%, transparent 60%);
  background-size: 1px 4px;
}
.saloon-rope--left { left: 24px; transform: rotate(-12deg); transform-origin: top center; }
.saloon-rope--right { right: 24px; transform: rotate(12deg); transform-origin: top center; }

.saloon-board__plank {
  position: relative;
  border: 2px solid var(--fg);
  background: var(--bg);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow:
    0 0 0 1px var(--bg),
    0 0 0 4px var(--fg);
}
/* Notched corners using pseudo elements */
.saloon-board__plank::before,
.saloon-board__plank::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--fg);
  transform: translateY(-50%) rotate(45deg);
}
.saloon-board__plank::before { left: -16px; }
.saloon-board__plank::after { right: -16px; }

.saloon-board__star {
  font-family: 'Rye', serif;
  font-size: 18px;
  line-height: 1;
}
.saloon-board__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
.saloon-board__top {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--fg);
}
.saloon-board__name {
  font-family: 'Rye', serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.saloon-board__sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 6px;
  color: var(--mid);
}

.bullet-hole {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--fg);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--bg),
    0 0 0 2px var(--fg);
}
.bullet-hole--1 { top: -3px; left: 14%; }
.bullet-hole--2 { bottom: -3px; right: 18%; }

/* WANTED badge */
.wanted-badge {
  position: absolute;
  top: 180px;
  right: 4%;
  z-index: 4;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  transform: rotate(-8deg);
  will-change: transform;
  animation: wantedSway 6s ease-in-out infinite;
}
@keyframes wantedSway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(-4deg); }
}
.wanted-badge__star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wanted-badge__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 60px;
  line-height: 1.15;
}
.wanted-badge__top {
  font-family: 'Rye', serif;
  font-size: 8px;
  letter-spacing: 0.05em;
  color: var(--fg);
}
.wanted-badge__mid {
  font-family: 'Rye', serif;
  font-size: 8px;
  margin: 4px 0;
  color: var(--fg);
}
.wanted-badge__bot {
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  max-width: 60px;
}

@media (max-width: 1200px) {
  .wanted-badge { width: 110px; height: 110px; top: 220px; right: 3%; }
  .wanted-badge__top, .wanted-badge__mid { font-size: 6px; }
  .wanted-badge__bot { font-size: 5px; }
}
@media (max-width: 820px) {
  .wanted-badge { display: none; }
}

/* Horseshoes */
.horseshoe {
  position: absolute;
  width: 36px;
  height: 36px;
  color: var(--fg);
  opacity: 0.85;
  z-index: 3;
}
.horseshoe--left {
  top: 200px;
  left: 6%;
  transform: rotate(-30deg);
}
.horseshoe--right {
  bottom: 100px;
  left: 8%;
  transform: rotate(20deg);
}
@media (max-width: 1100px) {
  .horseshoe { display: none; }
}

/* Brand cards row */
.hero__brands {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  margin: 60px auto 0;
}

.hero__amp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hero__amp-line {
  width: 1px;
  flex: 1;
  background: var(--fg);
  min-height: 30px;
}
.hero__amp-char {
  font-family: 'Instrument Serif', serif;
  font-size: 48px;
  font-style: italic;
  line-height: 1;
}

.brand-card {
  position: relative;
  z-index: 4;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 22px 26px;
  text-decoration: none;
  font-family: var(--font-display);
  will-change: transform;
  display: flex;
  flex-direction: column;
  transition: background 240ms ease, color 240ms ease;
}
/* Scoped to the anchor: the Vexpo card is a <div> with no destination yet. */
a.brand-card:hover { background: var(--fg); color: var(--bg); }
a.brand-card:hover .brand-card__head,
a.brand-card:hover .brand-card__desc,
a.brand-card:hover .brand-card__footer { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
.brand-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  transition: color 240ms ease, border-color 240ms ease;
}
.brand-card__head .stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.brand-card__name {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin-bottom: 14px;
  font-feature-settings: "ss01" on;
}
.brand-card__name sup {
  font-size: 0.35em;
  vertical-align: super;
  margin-left: 4px;
  font-weight: 400;
}
.brand-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mid);
  font-family: var(--font-mono);
  flex: 1;
  transition: color 240ms ease;
}
.brand-card__footer {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 240ms ease, color 240ms ease;
}
.brand-card__footer .arrow {
  transition: transform 300ms ease;
}
a.brand-card:hover .brand-card__footer .arrow {
  transform: translateX(6px);
}

@media (max-width: 820px) {
  .hero__stage { grid-template-columns: 1fr; gap: 40px; }
  .hero__stats { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 30px 50px; }
  .hero__stats--left, .hero__stats--right { align-items: center; text-align: center; }
  .stat-cell { align-items: center; }
}

@media (max-width: 768px) {
  .hero__brands { grid-template-columns: 1fr; gap: 14px; }
  .hero__amp { flex-direction: row; padding: 6px 0; }
  .hero__amp-line { width: auto; height: 1px; flex: 1; min-height: 0; }
  .hero__amp-char { font-size: 32px; }
}

/* Hero coordinate markers */
.coord {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  z-index: 4;
}
.coord.tl { top: 88px; left: var(--pad); }
.coord.tr { top: 88px; right: var(--pad); text-align: right; }

.coord .lbl { display: block; opacity: 0.6; margin-bottom: 4px; }
.coord .val { display: block; color: var(--fg); font-size: 12px; line-height: 1.3; }

/* Scroll cue */
.scroll-cue {
  position: relative;
  margin: 40px auto 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
  color: var(--mid);
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--fg), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@media (max-width: 900px) {
  .coord { display: none; }
}
@keyframes scrollLine {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.3; transform: scaleY(0.6); }
}

/* ---------- Ticker ---------- */
.ticker {
  position: relative;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
  overflow: hidden;
  background: var(--bg);
  margin-top: -1px;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
  padding: 18px 0;
}
.ticker__item {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 60px;
}
.ticker__item::after {
  content: '✦';
  font-size: 14px;
  color: var(--mid);
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ---------- ABOUT ---------- */
.about {
  padding-top: 200px;
  padding-bottom: 200px;
  position: relative;
}

.about__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

.about__lead {
  position: sticky;
  top: 120px;
}

.about__lead h2 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin-top: 28px;
  margin-bottom: 30px;
}
.about__lead h2 em {
  font-style: italic;
  font-weight: 400;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
}

.about__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.about__meta .row { display: flex; flex-direction: column; gap: 4px; }
.about__meta .lbl { color: var(--mid); }
.about__meta .val { color: var(--fg); font-size: 13px; letter-spacing: 0.04em; }

.about__copy {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.about__copy p { margin-bottom: 32px; }
.about__copy p:first-child::first-letter {
  font-size: 1.6em;
  line-height: 1;
  margin-right: 2px;
  font-weight: 500;
}

.about__tags {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.about__tags .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--fg);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .about__inner { grid-template-columns: 1fr; gap: 50px; }
  .about__lead { position: static; }
}

/* ---------- TIMELINE (pinned) ---------- */
.timeline {
  position: relative;
  height: 300vh;
}

.timeline__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad);
}

.timeline__head {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}

.timeline__title {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.timeline__progress {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}
.timeline__progress strong {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--fg);
  display: block;
}

.timeline__track {
  position: relative;
  max-width: var(--max);
  margin: 30px auto 0;
  width: 100%;
  height: 320px;
}

.timeline__line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--fg);
}
.timeline__line::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px; height: 7px;
  background: var(--fg);
  border-radius: 50%;
}
.timeline__line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px; height: 7px;
  border: 1px solid var(--fg);
  border-radius: 50%;
}

.timeline__items {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  will-change: transform;
}

.tl-item {
  flex: 0 0 auto;
  width: 360px;
  margin-right: 80px;
  position: relative;
  padding-top: 200px;
}
.tl-item:nth-child(even) {
  padding-top: 0;
  padding-bottom: 200px;
  align-self: flex-start;
}

.tl-item__dot {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--bg);
  border: 1px solid var(--fg);
  border-radius: 50%;
}
.tl-item:nth-child(even) .tl-item__dot { top: auto; bottom: 50%; transform: translateY(50%); }

.tl-item__year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  color: var(--mid);
}
.tl-item__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.tl-item__desc {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mid);
  max-width: 280px;
}

@media (max-width: 768px) {
  .timeline__pin { height: auto; position: static; padding-top: 100px; padding-bottom: 100px; }
  .timeline__track { height: auto; }
  .timeline__items { position: static; flex-direction: column; gap: 50px; }
  .tl-item { width: 100%; padding: 0 0 0 30px; margin: 0; }
  .tl-item:nth-child(even) { padding: 0 0 0 30px; }
  .tl-item__dot { top: 8px; transform: none; }
  .tl-item:nth-child(even) .tl-item__dot { top: 8px; bottom: auto; transform: none; }
  .timeline__line {
    left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
  }
  .timeline__line::before { left: -3px; top: 0; }
  .timeline__line::after { left: -3px; top: auto; bottom: 0; right: auto; }
}

/* ---------- CONTACT ---------- */
.contact {
  padding-top: 160px;
  padding-bottom: 80px;
  position: relative;
}

.contact__inner {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}

.contact__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.contact__eyebrow::before, .contact__eyebrow::after {
  content: '';
  width: 30px; height: 1px;
  background: currentColor;
}

.contact__title {
  font-size: clamp(56px, 12vw, 200px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin-bottom: 50px;
}
.contact__title em {
  font-style: italic;
  font-weight: 400;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
}

.contact__email {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 500;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
  padding-bottom: 6px;
  display: inline-block;
  margin-bottom: 70px;
  transition: padding 200ms ease;
}
.contact__email:hover { padding-bottom: 12px; }

.contact__socials {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.contact__socials a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 14px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 200ms ease, color 200ms ease;
}
.contact__socials a:hover {
  background: var(--fg);
  color: var(--bg);
}
.contact__socials a .arrow { font-size: 14px; }

/* Footer */
.foot {
  padding: 40px var(--pad) 30px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 100px;
}

/* ---------- Reveal animations ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.js .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
html.js .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
html.js .reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
html.js .reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
html.js .reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
html.js .reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
html.js .reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }

/* ==========================================================================
   PRODUCTION ADDITIONS
   Everything below is additive — no rule above this line was restyled.
   ========================================================================== */

/* ---------- Skip link ----------
   First tab stop on the page. Sits above the grain and cursor layers. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 14px;
  z-index: 10000;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 20px;
  transition: top 160ms ease;
}
.skip-link:focus { top: 14px; }

/* ---------- Focus states ----------
   The design hides the system cursor, which makes a visible focus ring the
   only way a keyboard user can tell where they are. */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}
.nav-panel :focus-visible {
  outline-color: var(--invert-fg);
}
/* The nav blends against whatever is behind it, so its ring needs to as well. */
.nav :focus-visible { outline-color: currentColor; }

/* ---------- Mobile navigation ----------
   The design drops .nav__links entirely under 768px, which leaves phone
   visitors on a six-screen page with no way to jump. This adds a toggle in
   the same mono/difference-blend language, desktop untouched. */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 16px;
  height: 1px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 240ms ease, opacity 240ms ease;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--invert-bg);
  color: var(--invert-fg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--pad) 40px;
  /* Sits outside the nav's difference blend so it stays solid black. */
  isolation: isolate;
}
.nav-panel[hidden] { display: none; }

.nav-panel__list {
  list-style: none;
  counter-reset: mnavi;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.nav-panel__list li { counter-increment: mnavi; }
.nav-panel__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--invert-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-panel__list a::before {
  content: '0' counter(mnavi);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}
.nav-panel__foot {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 768px) {
  .nav__toggle { display: flex; }
  /* The panel is open — stop the page behind it from scrolling. */
  body.nav-open { overflow: hidden; }
}
@media (min-width: 769px) {
  /* Never leave the overlay mounted when the viewport grows past the toggle. */
  .nav-panel { display: none; }
}

/* ---------- Contact email ----------
   .contact__email was already styled in the design but had no element in the
   markup; the anchor is now present, so the rules finally apply. */

/* ---------- Timeline: mobile ----------
   The pinned horizontal scroll needs a real height on desktop, but that same
   height would leave ~2 empty screens once the track stacks vertically. */
@media (max-width: 768px) {
  .timeline { height: auto; }
}

/* ---------- Reduced motion ----------
   The design animates constantly: film grain, the marquee, the badge sway,
   the pulsing dot, parallax. Honour the OS setting and hold all of it still.
   Parallax and the horizontal timeline are additionally disabled in script.js,
   since those are driven by inline transforms CSS can't override. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .grain { animation: none; }
  .ticker__track { animation: none; transform: none; }
  .wanted-badge { animation: none; }
  .nav__brand .dot { animation: none; }
  .scroll-cue::after { animation: none; }

  /* Reveal-on-scroll must not be able to leave content invisible. */
  .reveal,
  .reveal-stagger > * { opacity: 1 !important; transform: none !important; }

}

/* ---------- Print ---------- */
@media print {
  .grain, .edges, .tick, .rail, .cursor, .cursor-crosshair,
  .nav, .nav-panel, .scroll-cue, .ticker, .skip-link { display: none !important; }
  body { background: #fff; color: #000; cursor: auto; }
  .timeline { height: auto; }
  .timeline__pin { position: static; height: auto; }
  .timeline__items { position: static; flex-direction: column; transform: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Reduced motion, continued ----------
   These pair with script.js, which never starts the parallax or the pinned
   horizontal scrub when the setting is on. Without unpinning the timeline
   here, that would leave three screens of dead scroll showing only the first
   two stations. Kept in its own block, after the mobile rules, so it wins. */
@media (prefers-reduced-motion: reduce) {
  /* The smoothed follow-cursor is gone, so give the real one back. */
  body.custom-cursor { cursor: auto; }
  .cursor, .cursor-crosshair { display: none; }

  .timeline { height: auto; }
  .timeline__pin {
    position: static;
    height: auto;
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .timeline__track { height: auto; }
  .timeline__items {
    position: static;
    flex-direction: column;
    gap: 50px;
    transform: none !important;
  }
  .tl-item,
  .tl-item:nth-child(even) { width: 100%; padding: 0 0 0 30px; margin: 0; }
  .tl-item__dot,
  .tl-item:nth-child(even) .tl-item__dot { top: 8px; bottom: auto; transform: none; }
  .timeline__line { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline__line::before { left: -3px; top: 0; }
  .timeline__line::after { left: -3px; top: auto; bottom: 0; right: auto; }
  /* The scrub readout can't move, so it has nothing to report. */
  .timeline__progress { display: none; }
}

/* ==========================================================================
   MOTION
   Everything here is scoped to html.js and gated on prefers-reduced-motion,
   so a page without JavaScript — or a visitor who asked for less movement —
   renders complete and still.
   ========================================================================== */

/* The timeline has seven stations; the design only defined six delays. */
html.js .reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; }
html.js .reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms; }

/* ---------- Hero entrance ----------
   fill-mode is `backwards`, deliberately: the keyframes apply before the
   animation starts, but once it finishes the element falls back to its own
   inline style. That matters because script.js writes transform (parallax)
   and opacity (hero fade) to these same elements every frame — a `forwards`
   fill would win the cascade permanently and freeze both effects. */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

html.js .hero__eyebrow,
html.js .hero__headline,
html.js .hero__portrait-wrap,
html.js .hero__stats--left,
html.js .hero__stats--right,
html.js .hero__brands,
html.js .scroll-cue {
  animation: heroIn 900ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
html.js .hero__eyebrow      { animation-delay:  80ms; }
html.js .hero__headline     { animation-delay: 160ms; }
html.js .hero__portrait-wrap{ animation-delay: 260ms; }
html.js .hero__stats--left  { animation-delay: 340ms; }
html.js .hero__stats--right { animation-delay: 400ms; }
html.js .hero__brands       { animation-delay: 480ms; }
html.js .scroll-cue         { animation-delay: 600ms; }

/* The decorative western pieces settle in a touch later. */
html.js .horseshoe,
html.js .hero__revolvers,
html.js .saloon-board,
html.js .coord {
  animation: fadeIn 1000ms ease 700ms backwards;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* The badge already animates (wantedSway). `animation` replaces rather than
   appends, so both are listed here or the sway would be lost. */
html.js .wanted-badge {
  animation: fadeIn 1000ms ease 700ms backwards,
             wantedSway 6s ease-in-out 1700ms infinite;
}

/* ---------- Eyebrow + section-tag rules draw themselves ----------
   These are the little horizontal strokes flanking each label. */
html.js .section-tag::before,
html.js .hero__eyebrow::before,
html.js .hero__eyebrow::after,
html.js .contact__eyebrow::before,
html.js .contact__eyebrow::after {
  width: 0;
  transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms;
}
html.js .section-tag.in::before { width: 28px; }
html.js .hero__eyebrow.in::before,
html.js .hero__eyebrow.in::after { width: 36px; }
html.js .contact__eyebrow.in::before,
html.js .contact__eyebrow.in::after { width: 30px; }

/* ---------- Hover polish ---------- */

/* Nav links get an underline that draws from the left. */
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }

/* Skill tags invert on hover, echoing the brand cards. */
.about__tags .tag {
  transition: background 240ms ease, color 240ms ease;
}
.about__tags .tag:hover {
  background: var(--fg);
  color: var(--bg);
}

/* Social buttons lift as they invert. */
.contact__socials a {
  transition: background 200ms ease, color 200ms ease, transform 240ms ease;
}
.contact__socials a:hover { transform: translateY(-3px); }
.contact__socials a .arrow { transition: transform 240ms ease; }
.contact__socials a:hover .arrow { transform: translate(2px, -2px); }

/* The email underline already thickens on hover; add the colour sweep. */
.contact__email { transition: padding 200ms ease, opacity 200ms ease; }
.contact__email:hover { opacity: 0.65; }

/* ---------- Reduced motion: hold all of the above still ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .hero__eyebrow,
  html.js .hero__headline,
  html.js .hero__portrait-wrap,
  html.js .hero__stats--left,
  html.js .hero__stats--right,
  html.js .hero__brands,
  html.js .scroll-cue,
  html.js .wanted-badge,
  html.js .horseshoe,
  html.js .hero__revolvers,
  html.js .saloon-board,
  html.js .coord { animation: none; }

  /* Draw the rules at full length rather than animating them open. */
  html.js .section-tag::before { width: 28px; transition: none; }
  html.js .hero__eyebrow::before,
  html.js .hero__eyebrow::after { width: 36px; transition: none; }
  html.js .contact__eyebrow::before,
  html.js .contact__eyebrow::after { width: 30px; transition: none; }

  .nav__links a::after { display: none; }
  .contact__socials a:hover { transform: none; }
}

/* ==========================================================================
   MOBILE CORRECTIONS

   The prototype was composed at desktop width. Several pieces carry fixed
   widths, `white-space: nowrap`, or clamp() minimums larger than a phone's
   content box (~327px on a 375px screen), so they overflowed and were
   silently clipped by `.hero { overflow: hidden }`. Measured and corrected
   below. Parallax is switched off in script.js at this same breakpoint.
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- Headlines: the hard <br> forced single lines of ~514px and ~475px.
          Dropping the break lets them wrap naturally, which keeps the type
          large instead of shrinking it to fit an arbitrary line. ---- */
  .hero__headline br,
  .contact__title br,
  .timeline__title br { display: none; }

  .hero__headline  { font-size: clamp(34px, 9.5vw, 56px); }
  .contact__title  { font-size: clamp(40px, 13vw, 72px); }
  .timeline__title { font-size: clamp(32px, 8.5vw, 48px); }

  /* ---- Saloon board: 26px Rye + nowrap + 64px padding ran to ~444px. ---- */
  .saloon-board { max-width: 100%; }
  .saloon-board__plank {
    max-width: 100%;
    padding: 12px 16px;
    gap: 10px;
  }
  .saloon-board__name {
    white-space: normal;
    text-align: center;
    font-size: clamp(15px, 5.4vw, 26px);
  }
  .saloon-board__sub { font-size: 8px; letter-spacing: 0.16em; }
  .saloon-board__top { font-size: 8px; letter-spacing: 0.25em; }
  .saloon-board__star { font-size: 13px; }
  /* The notch diamonds sit at -16px and would poke past the screen edge. */
  .saloon-board__plank::before,
  .saloon-board__plank::after { display: none; }

  /* ---- Revolvers were a fixed 320px. ---- */
  .hero__revolvers {
    width: min(320px, 76vw);
    height: auto;
    margin-top: 18px;
  }

  /* ---- Eyebrow: 0.28em tracking over 34 characters is ~322px, right on the
          edge. Tighten it and let it wrap rather than clip. ---- */
  .hero__eyebrow {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 9px;
    letter-spacing: 0.18em;
    gap: 10px;
    margin-bottom: 24px;
  }
  .hero__eyebrow::before,
  .hero__eyebrow::after { width: 20px; }

  /* ---- Stat cells: 3 x 110px + 100px of gaps can't sit on one row. ---- */
  .hero__stats { gap: 22px 26px; }
  .stat-cell { min-width: 88px; }
  .stat-cell__val { font-size: clamp(30px, 8vw, 40px); }
  .stat-cell__sub { font-size: 10px; }

  /* ---- Footer: three tracked-out spans on one row overflowed. ---- */
  .foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-top: 60px;
    padding-bottom: 40px;
  }

  /* ---- Timeline head had no wrap, and the scrub readout is meaningless
          here because the horizontal scrub doesn't run at this width. ---- */
  .timeline__head { flex-wrap: wrap; gap: 22px; padding-top: 40px; }
  .timeline__progress { display: none; }

  /* ---- Section rhythm: 200px of padding is most of a phone screen. ---- */
  .about { padding-top: 90px; padding-bottom: 90px; }
  .about__inner { gap: 40px; }
  .contact { padding-top: 90px; }
  .hero { padding-top: 96px; }

  /* ---- Long unbroken strings (emails, URLs) must not push the page wide. ---- */
  .contact__email { word-break: break-word; }
}

/* Very narrow phones: the clock crowds the brand and the menu button. */
@media (max-width: 380px) {
  .nav__time { display: none; }
  .brand-card { padding: 18px 18px; }
  .brand-card__name { font-size: clamp(34px, 11vw, 44px); }
}

/* ---------- Hero stage: small-screen composition ----------
   The desktop stage is a 3-column grid (stats | portrait | stats) that is
   also `flex: 1`, so it stretches to fill the hero. Collapsed to one column
   that stretch has nowhere useful to go: the auto rows absorb the slack and
   `align-items: center` floats each block in the middle of its own row,
   opening large empty bands between them.

   Below 820px this becomes a plain flex column with explicit gaps, the
   portrait leads (identity first on a phone), and the two stat groups sit
   underneath as tidy 3-up grids instead of wrapping 2-then-1. */
@media (max-width: 820px) {
  .hero__stage {
    flex: none;                /* stop absorbing the hero's spare height */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    padding: 20px 0 10px;
  }

  .hero__portrait-wrap { order: -1; }

  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 16px 10px;
    width: 100%;
    max-width: 460px;
  }
  .hero__stats--left,
  .hero__stats--right { text-align: center; }

  .stat-cell {
    align-items: center;
    min-width: 0;              /* let the cells share the row evenly */
    gap: 4px;
  }
  .stat-cell__lbl { font-size: 9px; letter-spacing: 0.14em; }
  .stat-cell__sub { max-width: 100%; }

  /* The board sits directly under the portrait now — tighten the stack. */
  .saloon-board { margin-top: 0; }
}

/* ---------- Timeline: don't stack two reveals ----------
   `.timeline__items` carries `reveal-stagger`, which is right on mobile where
   the stations are a plain vertical list. On desktop the pinned horizontal
   scrub already *is* the reveal, so the staggered fade ran at the same time as
   the scrub — items surfacing mid-slide, which reads as jitter. Above the
   breakpoint the stations are simply present and the scrub does the work. */
@media (min-width: 769px) {
  html.js .timeline__items > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Mobile menu motion ----------
   The panel toggles the `hidden` attribute, so display flips none <-> flex and
   a transition has nothing to interpolate. Animations do run on that flip, so
   opening is pure CSS. Closing can't be — display:none would apply instantly —
   so script.js holds the panel in the layout via .is-closing until the
   animation ends, then hides it. */
@keyframes navPanelIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes navPanelOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes navItemIn   { from { opacity: 0; transform: translateY(26px); }
                         to   { opacity: 1; transform: none; } }
@keyframes navRuleIn   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

html.js .nav-panel { animation: navPanelIn 240ms ease both; }
html.js .nav-panel.is-closing { animation: navPanelOut 200ms ease both; }

html.js .nav-panel__list {
  transform-origin: left;
  animation: navRuleIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
}
html.js .nav-panel__list li {
  animation: navItemIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.js .nav-panel__list li:nth-child(1) { animation-delay: 120ms; }
html.js .nav-panel__list li:nth-child(2) { animation-delay: 185ms; }
html.js .nav-panel__list li:nth-child(3) { animation-delay: 250ms; }
html.js .nav-panel__list li:nth-child(4) { animation-delay: 315ms; }
html.js .nav-panel__foot {
  animation: navItemIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) 400ms both;
}

/* On the way out the panel leaves as one piece — the children holding their
   own staggered animations would keep firing animationend and stall the close. */
html.js .nav-panel.is-closing .nav-panel__list,
html.js .nav-panel.is-closing .nav-panel__list li,
html.js .nav-panel.is-closing .nav-panel__foot { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .nav-panel,
  html.js .nav-panel.is-closing,
  html.js .nav-panel__list,
  html.js .nav-panel__list li,
  html.js .nav-panel__foot { animation: none; }
}