/* ===========================================================================
   bestphotographersites.com — "The Print Index"
   A warm-paper, tonal print archive. Dramatic Didone display against a precise
   contact-sheet grid. Deliberately unlike bestdjsites (dark/lime) and unlike
   bestvideographersites (cool/cyan).
   Display: Bodoni Moda · Body: Spline Sans · Micro-labels: Spline Sans Mono
   =========================================================================== */

:root {
  --paper:  oklch(0.969 0.009 78);   /* warm gallery paper — page bg */
  --paper-2:oklch(0.945 0.011 76);   /* recessed / rule fills */
  --card:   oklch(0.988 0.006 84);   /* frames sit slightly above paper */
  --card-2: oklch(0.962 0.009 80);   /* card hover */
  --ink:    oklch(0.205 0.014 62);   /* warm near-black text */
  --ink-soft:oklch(0.305 0.014 62);
  --muted:  oklch(0.435 0.013 64);   /* secondary text (AA on paper) */
  --faint:  oklch(0.520 0.011 66);   /* labels / tertiary (AA on paper) */
  --line:   oklch(0.205 0.014 62 / 0.14);
  --line-2: oklch(0.205 0.014 62 / 0.26);
  --amber:  oklch(0.585 0.166 45);   /* darkroom safelight — the one accent */
  --amber-d:oklch(0.505 0.150 44);
  --gold:   oklch(0.660 0.130 70);   /* medal tone — top 3 only */
  --lime:   var(--amber);            /* alias: server.mjs 404 hardcodes var(--lime) */
  --r:      4px;                     /* tight, print-frame corners */
  --maxw:   1180px;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Spline Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmosphere: faint paper grain + a single soft safelight bloom up top.
   No gradients on UI surfaces — the drama is the type, not the background. */
body::before {
  content: "";
  position: fixed; inset: -10% -10% auto -10%; height: 52vh;
  background: radial-gradient(56% 70% at 78% 0%, oklch(0.585 0.166 45 / 0.07), transparent 65%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

h1, h2, h3 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.02;
  margin: 0;
}

/* Micro-labels read like a camera readout — mono, tracked, photographic. */
.eyebrow, .note, .frameno, .topstat, .crumbs, .foot .col h4, .tierpill,
.statecard .ct small, .cityrow .cc, .vrow .sub, .filmedge {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
}
.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--amber-d);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow .tick { color: var(--faint); font-size: 13px; line-height: 1; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.969 0.009 78 / 0.86);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.brandmark { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brandmark .lens { color: var(--amber); flex: none; }
.brandmark .wm { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; display: inline-flex; gap: 5px; }
.brandmark .wm b { font-weight: 800; }
.brandmark .wm span { color: var(--muted); }
.topstat { font-size: 11.5px; color: var(--faint); display: flex; align-items: center; gap: 11px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
.topstat .frameno { color: var(--amber-d); border: 1px solid var(--line-2); padding: 3px 7px; border-radius: 2px; letter-spacing: 0.1em; }
.topstat b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px){ .topstat .hide-sm { display: none; } }
/* Narrow phones: the Didone wordmark + readout overrun the bar — drop the
   frame 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 .frameno { 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: 26px 0 0; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.crumbs a:hover { color: var(--amber-d); }
.crumbs .sep { opacity: .55; }
.crumbs .here { color: var(--ink-soft); }

/* ── Hero (full content width — no ch caps, per Scott's Phase-1 rule) ─────── */
.hero { padding: 70px 0 34px; }
.hero-sub { padding-top: 34px; }
.hero h1 {
  font-size: clamp(46px, 9vw, 116px);
  font-weight: 900;
  line-height: 0.96;
  margin: 18px 0 0;
}
.hero h1 em { font-style: italic; font-weight: 800; color: var(--amber-d); }
.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: 8px;
  font-family: "Spline Sans Mono", monospace; font-size: 12px; letter-spacing: 0.03em;
  color: var(--muted); border: 1px solid var(--line-2); background: var(--card);
  padding: 8px 13px; border-radius: 2px;
}
.chip b { color: var(--ink); font-weight: 600; }

/* a literal contact-sheet sprocket strip under the home hero */
.filmedge { margin-top: 34px; display: flex; gap: 10px; opacity: .7; }
.filmedge span { width: 18px; height: 13px; border: 1px solid var(--line-2); border-radius: 1.5px; background: var(--paper-2); }

/* staggered, restrained entrance (opacity/transform only) */
.hero .eyebrow { animation: rise .7s both; }
.hero h1 { animation: rise .8s .06s both; }
.hero .deck { animation: rise .8s .15s both; }
.hero .meta-row { animation: rise .8s .24s both; }
.filmedge { animation: rise .8s .32s both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Section header — visible registration rule ──────────────────────────── */
.sec { padding: 34px 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; border-top: 1px solid var(--ink); padding-top: 14px; }
.sec-head h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; }
.sec-head .note { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

/* ── State grid — contact-sheet frames ───────────────────────────────────── */
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.statecard {
  display: block; position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 17px 17px 16px;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, background .22s, box-shadow .22s;
}
.statecard:hover { transform: translateY(-3px); border-color: var(--ink-soft); background: var(--card-2); box-shadow: 0 18px 34px -22px oklch(0.205 0.014 62 / 0.5); }
.statecard .nm { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 19px; letter-spacing: -0.005em; }
.statecard .ct { font-family: "Bodoni Moda", serif; font-weight: 900; font-size: 30px; letter-spacing: -0.01em; margin-top: 6px; color: var(--ink); line-height: 1; }
.statecard .ct small { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-top: 7px; }
.statecard .bar { margin-top: 13px; height: 5px; border-radius: 1px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
/* tonal "exposure" wedge — grayscale ramp, not the accent */
.statecard .bar i { display: block; height: 100%; background: linear-gradient(90deg, oklch(0.62 0.012 64), var(--ink)); }
.statecard .go { position: absolute; top: 14px; right: 15px; color: var(--faint); transition: color .2s, transform .2s; }
.statecard:hover .go { color: var(--amber-d); transform: translateX(2px); }
.statecard.empty { opacity: .5; }
.statecard.empty .ct { color: var(--faint); }

.states.feature { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); margin-bottom: 38px; }
.states.feature .statecard { padding: 21px; }
.states.feature .statecard .ct { font-size: 40px; }
/* the feature rank reads as a frame number on the sprocket edge */
.states.feature .statecard .rank { position: absolute; top: 17px; right: 17px; font-family: "Spline Sans Mono", monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; color: var(--faint); }

/* ── City list (state page) ──────────────────────────────────────────────── */
.citylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.cityrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 15px 18px; transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s;
}
.cityrow:hover { transform: translateY(-2px); border-color: var(--ink-soft); background: var(--card-2); }
.cityrow .cn { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 18px; }
.cityrow .cc { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 7px; }
.cityrow .cc b { color: var(--amber-d); font-family: "Spline Sans Mono", monospace; font-weight: 600; font-size: 14px; letter-spacing: 0; }

/* ── Ranked vendor list (city page) — the signature print catalog ────────── */
.ranklist { margin-top: 6px; display: flex; flex-direction: column; }
.vrow {
  display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 20px;
  background: transparent; border: 0; border-top: 1px solid var(--line);
  padding: 22px 6px; transition: background .18s, padding .18s;
}
.vrow:first-child { border-top: 0; }
.vrow:hover { background: var(--card); }
.vrow .rank {
  font-family: "Bodoni Moda", serif; font-weight: 900;
  font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--line-2);
  text-align: left; font-variant-numeric: tabular-nums;
}
.vrow.top .rank { color: var(--gold); }
.vrow.top1 .rank { color: var(--amber); }
.vrow.top1 { background: oklch(0.585 0.166 45 / 0.05); }
.vrow .body { min-width: 0; }
.vrow .vn { font-family: "Bodoni Moda", serif; font-weight: 800; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -0.01em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 9px; line-height: 1.08; }
.vrow .vn:hover { color: var(--amber-d); }
.vrow .vn .ext { color: var(--faint); font-size: 14px; transition: transform .18s, color .18s; }
.vrow .vn:hover .ext { color: var(--amber-d); transform: translate(2px,-2px); }
.vrow .sub { margin-top: 9px; font-size: 11.5px; letter-spacing: 0.03em; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; }
.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(--ink); font-weight: 600; }
.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: var(--line-2); }
.rev { color: var(--faint); }
.vrow .cta {
  white-space: nowrap; font-family: "Spline Sans Mono", monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: 9px 16px;
  transition: background .18s, color .18s;
}
.vrow .cta:hover { background: var(--ink); color: var(--paper); }
.tierpill { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; border: 1px solid transparent; }
.tierpill.gold   { color: var(--gold); border-color: oklch(0.660 0.130 70 / 0.5); }
.tierpill.silver { color: var(--ink-soft); border-color: var(--line-2); }
.tierpill.bronze { color: var(--amber-d); border-color: oklch(0.585 0.166 45 / 0.4); }

@media (max-width: 560px){
  .vrow { grid-template-columns: 46px 1fr; gap: 14px; padding: 18px 4px; }
  .vrow .rank { font-size: 28px; }
  .vrow .cta { grid-column: 2; justify-self: start; margin-top: 10px; }
}

/* ── Big city CTA ────────────────────────────────────────────────────────── */
.bigcta {
  margin: 36px 0 8px; padding: 30px 32px;
  background: var(--ink); color: var(--paper); border-radius: var(--r);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.bigcta .t { font-family: "Bodoni Moda", serif; font-weight: 800; font-size: clamp(20px, 2.8vw, 29px); letter-spacing: -0.01em; }
.bigcta .d { color: oklch(0.969 0.009 78 / 0.7); font-size: 14px; margin-top: 6px; font-family: "Spline Sans", sans-serif; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Spline Sans Mono", monospace; font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--amber); color: oklch(0.18 0.02 60); padding: 13px 22px; border-radius: 2px;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), background .18s;
}
.btn:hover { transform: translateY(-2px); background: oklch(0.64 0.176 46); }

/* ── 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(--ink); font-weight: 600; }
.prose a { color: var(--amber-d); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

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

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { margin-top: 70px; border-top: 1px solid var(--ink); background: var(--paper-2); }
.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: 600; }
.foot .col a { display: block; color: var(--muted); font-size: 14.5px; padding: 4px 0; }
.foot .col a:hover { color: var(--amber-d); }
.foot .blurb { color: var(--muted); font-size: 14.5px; max-width: 42ch; }
.foot .blurb .lead { color: var(--ink); font-family: "Bodoni Moda", serif; font-weight: 800; font-size: 19px; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.foot .blurb .lead svg { color: var(--amber); }
.foot .blurb a { color: var(--amber-d); 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: "Spline Sans 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(--amber-d); }
@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; }
}