/* ============================================================
   Central State RV Mobile Repair - design tokens
   Every value measured. See DESIGN.md for the reason behind each one.

   Short version: the logo is entirely achromatic (a white knockout with a
   brushed steel gradient, plus a solid black colorway). The only color the
   business owns is the red thread on their embroidered polos, measured at
   #C53239 over 16,209 pixels. So: black, steel, one red.
   ============================================================ */

:root {
  /* surfaces, dark */
  --ink: #141414;          /* page base. Sits just above the logo plate #161616. */
  --ink-deep: #0C0C0C;     /* wells, image backdrops */
  --panel: #1E1E1F;        /* measured polo black #211F1E, nudged for separation */
  --panel-2: #262627;      /* hover / inset */
  --hairline: #2C2C2D;
  --hairline-hi: #3A3A3B;

  /* surfaces, light */
  --paper: #F6F4F1;        /* warm off-white. #FDFDFD is the logo knockout, reserved. */
  --paper-2: #EDEAE5;
  --sand: #EFE7DB;         /* direction 03 only */
  --sand-2: #E4D9C9;
  --rule: #D9D4CC;

  /* text on dark */
  --text: #EFEFEF;
  --muted: #9C9C9C;        /* largest chrome cluster, 6.9% of the mark */
  --dim: #7C7C7C;          /* second chrome cluster, 4.2%. Metadata only. */

  /* text on light */
  --text-d: #17171A;
  --muted-d: #5A5A5E;
  --dim-d: #85858B;

  /* chrome ramp, straight off the monogram */
  --steel-1: #C3C3C3;
  --steel-2: #9C9C9C;
  --steel-3: #7C7C7C;
  --steel-4: #474647;

  /* the one color. Measured off his uniform, not chosen. */
  --red: #C53239;
  --red-hi: #DF3640;       /* same thread under the gallery lights */
  --red-deep: #8A1F25;
  --red-glow: 197, 50, 57;

  /* type */
  --f-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: .18s;
  --slow: .5s;

  --r-sm: 5px;
  --r: 9px;
  --r-lg: 16px;

  --wrap: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.display { font-family: var(--f-display); font-weight: 800; letter-spacing: -.015em; }
.caps { text-transform: uppercase; letter-spacing: .08em; }

.eyebrow {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--red); font-weight: 700;
}

/* ---- photo frames ---- */
.ph { position: relative; overflow: hidden; background: var(--ink-deep); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 10; }
.ph--square { aspect-ratio: 1; }

/* ---- buttons. 48px minimum height everywhere, this is a phone-first job ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 14px 26px;
  background: var(--red); color: #fff; border: none; border-radius: var(--r-sm);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(var(--red-glow), .8);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast);
}
.btn:hover { background: var(--red-hi); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--hairline-hi); box-shadow: none;
}
.btn--ghost:hover { background: rgba(255,255,255,.04); border-color: var(--steel-3); }

.btn--ghost-d {
  background: transparent; color: var(--text-d);
  border: 1px solid var(--rule); box-shadow: none;
}
.btn--ghost-d:hover { background: rgba(0,0,0,.04); border-color: var(--muted-d); }

.chip {
  display: inline-block;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 5px 9px; white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; border-radius: 3px; }

/* ---- the disclaimer that appears on every page ---- */
.disclaim {
  font-size: 12px; line-height: 1.6; color: var(--dim);
}

/* ---- direction flag + link back to the chooser ---- */
.mockup-flag {
  position: fixed; left: 0; bottom: 0; z-index: 999;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,10,10,.92); backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); border-left: none; border-bottom: none;
  border-radius: 0 var(--r) 0 0; padding: 10px 14px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.mockup-flag b { color: var(--red-hi); font-weight: 700; }
.mockup-flag a {
  color: var(--steel-2); border-left: 1px solid var(--hairline);
  padding-left: 12px; min-height: 44px; display: inline-flex; align-items: center;
}

/* ---- skip link. Sized so it is a real tap target once focused. ---- */
.skip {
  position: absolute; left: -9999px; top: 0;
  min-height: 48px; display: flex; align-items: center;
  padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--red); color: #fff; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; z-index: 1000; }
.mockup-flag a:hover { color: #fff; }
@media (max-width: 460px) { .mockup-flag { font-size: 12px; padding: 9px 11px; gap: 8px; } }

/* ---- review rail, shared behaviour, restyled per direction ---- */
.rail { display: flex; gap: 16px; width: max-content; }
.rail-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rail-track { display: flex; gap: 16px; animation: rail 60s linear infinite; }
.rail-mask:hover .rail-track { animation-play-state: paused; }
@keyframes rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rail-track { animation: none; }
  .rail-mask { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}