/* ===========================================================================
   bestvideographersites.com — "Color Suite"
   A cool, near-black grading room. Condensed poster type, an RGB-split signal
   palette (cyan + coral), timecode and viewfinder motifs. Deliberately unlike
   bestdjsites (warm-dark/lime) and bestphotographersites (warm paper/Didone).
   Display: Anton · Sub + body: Archivo · Timecode/labels: JetBrains Mono
   =========================================================================== */

:root {
  --ink:    oklch(0.165 0.018 252);  /* cool near-black — page bg */
  --ink-2:  oklch(0.205 0.020 252);  /* raised surface */
  --ink-3:  oklch(0.238 0.022 252);  /* cards */
  --ink-4:  oklch(0.285 0.024 252);  /* card hover */
  --line:   oklch(0.92 0.02 230 / 0.10);
  --line-2: oklch(0.92 0.02 230 / 0.20);
  --paper:  oklch(0.955 0.008 232);  /* primary text, cool white */
  --muted:  oklch(0.715 0.018 236);  /* secondary text */
  --faint:  oklch(0.605 0.018 240);  /* labels (AA on --ink) */
  --cyan:   oklch(0.812 0.135 205);  /* primary signal */
  --cyan-d: oklch(0.700 0.130 206);
  --coral:  oklch(0.705 0.175 24);   /* RGB-split partner / heat */
  --gold:   oklch(0.805 0.135 80);   /* star + medal warm — tertiary only */
  --lime:   var(--cyan);             /* alias: server.mjs 404 hardcodes var(--lime) */
  --r:      8px;
  --maxw:   1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;            /* +breathing room for light-on-dark */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmosphere: a cool projector wash + faint scanline grain. No UI gradients. */
body::before {
  content: ""; position: fixed; inset: -20% -20% auto -20%; height: 72vh;
  background:
    radial-gradient(54% 76% at 28% 0%, oklch(0.812 0.135 205 / 0.10), transparent 62%),
    radial-gradient(46% 64% at 86% 4%, oklch(0.705 0.175 24 / 0.06), transparent 70%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image:
    repeating-linear-gradient(0deg, oklch(0.92 0.02 230 / 0.5) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 160px;
}

/* viewfinder frame — a faint title-safe rectangle drawn over the whole viewport */
.bars { position: fixed; inset: 13px; z-index: 1; pointer-events: none; border: 1px solid var(--line); }
.bars::before, .bars::after { content: ""; position: absolute; background: var(--cyan); opacity: .5; }
.bars::before { top: -1px; left: 50%; transform: translateX(-50%); width: 26px; height: 1px; }
.bars::after  { bottom: -1px; left: 50%; transform: translateX(-50%); width: 26px; height: 1px; }
@media (max-width: 640px){ .bars { inset: 8px; } }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.wrap { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

h1, h2 {
  font-family: "Anton", "Archivo", sans-serif;
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.005em; line-height: 0.96; margin: 0;
}
h3 { font-family: "Archivo", sans-serif; font-weight: 800; margin: 0; }

/* Mono labels read as a deck/scope readout. */
.eyebrow, .note, .tc, .topstat, .crumbs, .foot .col h4, .tierpill,
.statecard .ct small, .cityrow .cc, .vrow .sub, .chip { font-family: "JetBrains Mono", ui-monospace, monospace; }
.eyebrow {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .rec { color: var(--coral); font-weight: 700; letter-spacing: 0.1em; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.165 0.018 252 / 0.84);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brandmark { display: inline-flex; align-items: center; gap: 11px; }
.brandmark .wm { font-family: "Anton", sans-serif; font-size: 19px; letter-spacing: 0.02em; display: inline-flex; gap: 6px; text-transform: uppercase; }
.brandmark .wm b { color: var(--paper); font-weight: 400; }
.brandmark .wm span { color: var(--cyan); font-weight: 400; }
.recdot { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); position: relative; flex: none; box-shadow: 0 0 0 0 oklch(0.705 0.175 24 / 0.6); animation: rec 2s infinite; }
@keyframes rec { 0%{ box-shadow: 0 0 0 0 oklch(0.705 0.175 24 / 0.55) } 70%{ box-shadow: 0 0 0 8px oklch(0.705 0.175 24 / 0) } 100%{ box-shadow: 0 0 0 0 oklch(0.705 0.175 24 / 0) } }
.topstat { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 12px; white-space: nowrap; letter-spacing: 0.04em; }
.topstat .tc { color: var(--cyan); border: 1px solid var(--line-2); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.08em; }
.topstat b { color: var(--paper); font-weight: 700; }
@media (max-width: 640px){ .topstat .hide-sm { display: none; } }
/* Narrow phones: the Anton wordmark + timecode readout overrun the bar — drop
   the timecode badge, then the whole readout, so the header never forces
   h-scroll. (The live count still appears in the hero.) */
@media (max-width: 600px){ .topstat .tc { display: none; } }
@media (max-width: 480px){ .topstat { display: none; } }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.crumbs { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.crumbs a:hover { color: var(--cyan); }
.crumbs .sep { opacity: .5; }
.crumbs .here { color: var(--muted); }

/* ── Hero (full content width — no ch caps, per Scott's Phase-1 rule) ─────── */
.hero { padding: 66px 0 32px; }
.hero-sub { padding-top: 32px; }
.hero h1 {
  font-size: clamp(48px, 9.6vw, 128px);
  margin: 16px 0 0;
  /* subtle RGB chromatic split — the signature */
  text-shadow: -0.014em 0 0 oklch(0.705 0.175 24 / 0.55), 0.014em 0 0 oklch(0.812 0.135 205 / 0.55);
}
.hero h1 em { font-style: normal; color: var(--cyan); text-shadow: 0.014em 0 0 oklch(0.705 0.175 24 / 0.5); }
.hero .deck { margin: 26px 0 0; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5; color: var(--muted); }
.hero .meta-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.03em; color: var(--muted);
  border: 1px solid var(--line-2); background: var(--ink-2);
  padding: 8px 14px; border-radius: 4px;
}
.chip b { color: var(--paper); font-weight: 700; }
.chip .led { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px oklch(0.812 0.135 205 / 0.8); }

.hero .eyebrow { animation: rise .7s both; }
.hero h1 { animation: rise .8s .05s both; }
.hero .deck { animation: rise .8s .15s both; }
.hero .meta-row { animation: rise .8s .25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

/* ── Section header ──────────────────────────────────────────────────────── */
.sec { padding: 32px 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; border-top: 1px solid var(--line); padding-top: 22px; }
.sec-head h2 { font-size: clamp(26px, 4vw, 44px); }
.sec-head .note { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

/* ── State grid — clip frames ────────────────────────────────────────────── */
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; }
.statecard {
  display: block; position: relative; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 16px 15px;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s;
}
.statecard:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--ink-3); }
.statecard .nm { font-weight: 700; font-size: 16px; }
.statecard .ct { font-family: "Anton", sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 0.01em; margin-top: 8px; color: var(--paper); line-height: 1; }
.statecard .ct small { display: inline-block; font-family: "JetBrains Mono", monospace; font-weight: 400; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-left: 6px; }
.statecard .bar { margin-top: 12px; height: 4px; border-radius: 4px; background: oklch(0.92 0.02 230 / 0.08); overflow: hidden; }
.statecard .bar i { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 8px oklch(0.812 0.135 205 / 0.6); }
.statecard .go { position: absolute; top: 14px; right: 14px; color: var(--faint); transition: color .2s, transform .2s; }
.statecard:hover .go { color: var(--cyan); transform: translateX(2px); }
.statecard.empty { opacity: .5; }
.statecard.empty .ct { color: var(--faint); }

.states.feature { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); margin-bottom: 36px; }
.states.feature .statecard { padding: 20px; }
.states.feature .statecard .ct { font-size: 40px; }
.states.feature .statecard .rank { position: absolute; top: 16px; right: 16px; font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--faint); }

/* ── City list (state page) ──────────────────────────────────────────────── */
.citylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 10px; }
.cityrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 17px; transition: transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s, background .18s;
}
.cityrow:hover { transform: translateY(-2px); border-color: var(--line-2); background: var(--ink-3); }
.cityrow .cn { font-weight: 700; font-size: 16px; }
.cityrow .cc { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 7px; }
.cityrow .cc b { color: var(--cyan); font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 14px; letter-spacing: 0; }

/* ── Ranked vendor list (city page) — the signature edit list ────────────── */
.ranklist { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.vrow {
  display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 18px;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 17px 20px;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), border-color .16s, background .16s;
}
.vrow:hover { transform: translateY(-2px); border-color: var(--line-2); background: var(--ink-3); }
.vrow .rank {
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: 34px; line-height: 1; letter-spacing: 0.01em; color: var(--faint);
  text-align: center; font-variant-numeric: tabular-nums;
}
.vrow.top .rank { color: var(--gold); }
.vrow.top1 .rank { color: var(--cyan); text-shadow: 0 0 14px oklch(0.812 0.135 205 / 0.5); }
.vrow.top1 { border-color: oklch(0.812 0.135 205 / 0.32); }
.vrow .body { min-width: 0; }
.vrow .vn { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(18px, 2.2vw, 23px); letter-spacing: -0.01em; color: var(--paper); display: inline-flex; align-items: center; gap: 10px; }
.vrow .vn:hover { color: var(--cyan); }
.vrow .vn .ext { color: var(--faint); font-size: 14px; transition: transform .16s, color .16s; }
.vrow .vn:hover .ext { color: var(--cyan); transform: translate(2px,-2px); }
.vrow .sub { margin-top: 7px; font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 13px; }
.vrow .loc { color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }
.rating { display: inline-flex; align-items: center; gap: 7px; }
.rating .num { color: var(--paper); font-weight: 700; }
.stars { display: inline-flex; gap: 1px; font-size: 12px; line-height: 1; }
.stars .s.f { color: var(--gold); }
.stars .s.h { color: var(--gold); opacity: .5; }
.stars .s.e { color: oklch(0.92 0.02 230 / 0.22); }
.rev { color: var(--faint); }
.vrow .cta {
  white-space: nowrap; font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--paper); border: 1px solid var(--line-2); border-radius: 5px; padding: 9px 16px;
  transition: background .16s, color .16s, border-color .16s;
}
.vrow .cta:hover { background: var(--cyan); color: oklch(0.17 0.03 252); border-color: var(--cyan); }
.tierpill { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.tierpill.gold   { color: var(--gold); background: oklch(0.805 0.135 80 / 0.12); }
.tierpill.silver { color: oklch(0.86 0.012 230); background: oklch(0.86 0.012 230 / 0.10); }
.tierpill.bronze { color: var(--coral); background: oklch(0.705 0.175 24 / 0.12); }

@media (max-width: 560px){
  .vrow { grid-template-columns: 44px 1fr; gap: 13px; padding: 15px 16px; }
  .vrow .rank { font-size: 26px; }
  .vrow .cta { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* ── Big city CTA ────────────────────────────────────────────────────────── */
.bigcta {
  margin: 36px 0 8px; padding: 30px 32px;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.bigcta .t { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 3vw, 32px); letter-spacing: 0.01em; }
.bigcta .d { color: var(--muted); font-size: 14px; margin-top: 6px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500;
  letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--cyan); color: oklch(0.17 0.03 252); padding: 14px 22px; border-radius: 6px;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s;
  box-shadow: 0 10px 30px -12px oklch(0.812 0.135 205 / 0.6);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px oklch(0.812 0.135 205 / 0.7); }

/* ── Editorial prose (lower sections keep a reading measure) ──────────────── */
.prose { max-width: 66ch; color: var(--muted); font-size: 16px; }
.prose p { margin: 0 0 14px; }
.prose b, .prose strong { color: var(--paper); font-weight: 600; }
.prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-note { background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 32px; color: var(--muted); text-align: center; }
.empty-note a { color: var(--cyan); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { margin-top: 70px; border-top: 1px solid var(--line); background: oklch(0.13 0.018 252); }
.foot .wrap { padding: 46px 26px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
.foot .col h4 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0 0 15px; font-weight: 500; }
.foot .col a { display: block; color: var(--muted); font-size: 14.5px; padding: 4px 0; }
.foot .col a:hover { color: var(--cyan); }
.foot .blurb { color: var(--muted); font-size: 14.5px; max-width: 42ch; }
.foot .blurb .lead { color: var(--paper); font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 19px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.foot .blurb a { color: var(--cyan); text-decoration: underline; }
.foot .legal { border-top: 1px solid var(--line); }
.foot .legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 26px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--faint); }
.foot .legal a { color: var(--muted); text-decoration: underline; }
.foot .legal a:hover { color: var(--cyan); }
@media (max-width: 720px){ .foot .wrap { grid-template-columns: 1fr; gap: 26px; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .recdot { animation: none !important; }
}