/* ===========================================================================
   Timestamp Daily — "Archival Darkroom", the paid product's own palette.
   Deliberately NOT linked against the site's main.css: that sheet is navy/cyan
   and its tokens would fight brass at every turn. This page is self-contained.
   =========================================================================== */
:root {
  --ink:        #0C0A09;
  --ink-2:      #17130F;
  --ink-3:      #241D17;
  --paper:      #f0e6d2;
  --paper-dim:  #d9cdb6;
  --sepia:      #c9b892;
  --brass:      #b08d3f;
  --brass-lit:  #d8bb6a;
  --silver:     #c8c8d0;
  --crimson:    #8c2f2f;
  --ledger-lit: #9db87f;
  --daylight:     #7FB2C4;
  --daylight-dim: #46707E;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-data:    'IBM Plex Mono', 'Courier New', monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --edge: 1px solid rgba(200, 200, 208, 0.14);
  --lift: 0 18px 44px rgba(0, 0, 0, .55);
  --gut: clamp(16px, 4vw, 44px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Wallpaper. Self-hosted, so a district filter cannot substitute a tile for it.
   Opacity stays in the mandated 0.18-0.28 band; the recession is done by the filter. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .22;
  background-image: url('assets/wallpaper-cardfiles.webp');
  background-size: cover;
  background-position: center;
  filter: grayscale(1) sepia(.18) contrast(.95) brightness(.34);
}

main, .masthead, .foot { position: relative; z-index: 1; }

a { color: var(--brass-lit); }
img { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--brass); color: #1a1408; padding: 10px 16px; font-family: var(--font-data);
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--daylight); outline-offset: 2px; }

/* --- masthead ------------------------------------------------------------ */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gut);
  border-bottom: var(--edge);
  background: rgba(12, 10, 9, .72);
  backdrop-filter: blur(10px);
}
.mast-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--paper-dim); text-decoration: none;
  font-family: var(--font-data); font-size: .82rem; letter-spacing: .06em;
}
.mast-brand:hover { color: var(--paper); }
.mast-mark {
  margin: 0; font-family: var(--font-data); font-size: .7rem;
  letter-spacing: .22em; color: var(--brass); text-transform: uppercase;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding: .95em 1.6em; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--brass {
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  color: #1c1608; border-color: #8d6f2d; font-weight: 500;
}
.btn--brass:hover:not(:disabled) { background: var(--brass-lit); }
.btn--brass:disabled { background: var(--ink-3); color: rgba(217, 205, 182, .45); border-color: rgba(200,200,208,.14); cursor: default; }
.btn--ghost { background: transparent; color: var(--paper-dim); border-color: rgba(200, 200, 208, .28); }
.btn--ghost:hover { color: var(--paper); border-color: var(--daylight); }
.btn--block { width: 100%; }

.kicker {
  margin: 0 0 10px; font-family: var(--font-data); font-size: .7rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass);
}
.kicker__date { color: var(--paper-dim); letter-spacing: .12em; }

/* --- entry --------------------------------------------------------------- */
.screen[hidden] { display: none; }

.hero { position: relative; min-height: min(74vh, 640px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) sepia(.22) brightness(.72); }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,9,.35) 0%, rgba(12,10,9,.72) 48%, rgba(12,10,9,.97) 100%);
}
.hero__body { position: relative; padding: clamp(28px, 6vw, 68px) var(--gut) clamp(24px, 4vw, 44px); max-width: 720px; }
.wordmark {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: .98; letter-spacing: -.02em;
  margin: 0 0 14px; color: var(--paper);
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.hero__lede { margin: 0 0 26px; font-size: clamp(1rem, 2.2vw, 1.12rem); color: var(--paper-dim); max-width: 54ch; }
.hero__lede strong { color: var(--paper); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__note { margin: 18px 0 0; font-family: var(--font-data); font-size: .74rem; letter-spacing: .05em; color: rgba(217,205,182,.6); }
.hero__credit {
  position: absolute; right: var(--gut); bottom: 10px; margin: 0; max-width: 44ch; text-align: right;
  font-family: var(--font-data); font-size: .62rem; line-height: 1.5; color: rgba(217,205,182,.42);
}
@media (max-width: 900px) { .hero__credit { position: static; text-align: left; padding: 0 var(--gut) 18px; max-width: none; } }

.entry-rail {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(200,200,208,.14); border-block: var(--edge);
}
.rail-card { background: var(--ink-2); padding: clamp(20px, 3vw, 30px) var(--gut); }
.rail-num { display: block; font-family: var(--font-data); font-size: .74rem; letter-spacing: .18em; color: var(--brass); margin-bottom: 10px; }
.rail-card p { margin: 0; font-size: .95rem; color: var(--paper-dim); }
@media (max-width: 780px) { .entry-rail { grid-template-columns: 1fr; } }

/* --- progress ------------------------------------------------------------ */
.progress-strip { display: flex; gap: 4px; padding: 12px var(--gut) 0; }
.pip { flex: 1; height: 4px; border-radius: 2px; background: var(--ink-3); }
.pip--done { background: var(--brass); }
.pip--now { background: var(--daylight); }

/* --- stage --------------------------------------------------------------- */
.stage {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr);
  gap: clamp(16px, 2.4vw, 30px);
  padding: 16px var(--gut) clamp(24px, 4vw, 40px);
  align-items: start;
}
@media (max-width: 1040px) { .stage { grid-template-columns: 1fr; } }

.plate { margin: 0; }
.plate__frame {
  position: relative; background: #000;
  border: 1px solid rgba(200,200,208,.18); border-radius: var(--r-md);
  box-shadow: var(--lift); overflow: hidden;
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.plate__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.plate__loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); background: var(--ink-2);
}
.plate__loading[hidden] { display: none; }
.plate__meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 10px; font-family: var(--font-data); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sepia);
}
.plate__hint { color: rgba(217,205,182,.45); text-transform: none; letter-spacing: .03em; }

.guess { display: flex; flex-direction: column; gap: 18px; }
.guess__block {
  background: var(--ink-2); border: var(--edge); border-radius: var(--r-md);
  padding: 18px 20px;
}
.guess__block--map { padding: 18px 18px 14px; }
.guess__label {
  display: block; font-family: var(--font-data); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sepia); margin-bottom: 8px;
}
.year-readout {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.2rem); line-height: 1; color: var(--brass-lit);
  margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.year-slider { width: 100%; accent-color: var(--brass); height: 26px; }
.year-scale {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-family: var(--font-data); font-size: .66rem; color: rgba(217,205,182,.45);
}

.map { height: clamp(240px, 34vh, 340px); border-radius: var(--r-sm); background: var(--ink-3); }
.map__status { margin: 10px 0 0; font-family: var(--font-data); font-size: .72rem; color: var(--sepia); }
.leaflet-container { background: #10161a; font-family: var(--font-data); }
.region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; height: 100%; padding: 8px; }
.region-grid button {
  background: var(--ink-3); color: var(--paper-dim); border: var(--edge);
  border-radius: var(--r-sm); font-family: var(--font-data); font-size: .74rem; cursor: pointer;
}
.region-grid button[aria-pressed="true"] { border-color: var(--brass); color: var(--brass-lit); }

/* --- reveal -------------------------------------------------------------- */
/* z-index must clear LEAFLET, not just the page. Leaflet's own panes run to 400 and its
   controls to 800-1000, so an overlay at 30 gets punched straight through by the round map —
   which is exactly what happened: the map painted on top of the reveal card's context text.
   `align-items` is deliberately NOT center: centre-alignment plus a card taller than the
   viewport clips the top of the card beyond reach. `margin:auto` centres when there is room
   and lets it scroll when there is not. */
.reveal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(6, 5, 4, .88); padding: var(--gut); overflow-y: auto;
}
.reveal[hidden] { display: none; }
.reveal__card {
  background: var(--ink-2); border: 1px solid rgba(176, 141, 63, .38);
  border-radius: var(--r-lg); box-shadow: var(--lift);
  max-width: 640px; width: 100%; padding: clamp(22px, 4vw, 34px);
  /* Horizontal centring only. Vertical `margin:auto` centres a SHORT card but makes a card
     taller than the viewport overflow in both directions, putting its top out of reach — the
     score cells, which are the entire point of the reveal, scrolled off above the fold at
     720px. The card now always starts at the top of the overlay and scrolls down. */
  margin-inline: auto;
}
.score-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(200,200,208,.14); border: var(--edge); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 20px; }
.cell { background: var(--ink-3); padding: 12px 14px; }
.cell--total { background: #2b2318; }
.cell__k { display: block; font-family: var(--font-data); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sepia); }
.cell__v { display: block; font-family: var(--font-data); font-size: .96rem; color: var(--paper); margin-top: 5px; font-variant-numeric: tabular-nums; }
.cell__n { display: block; font-family: var(--font-data); font-size: .72rem; color: var(--brass-lit); margin-top: 3px; }

.answer {
  border-left: 3px solid var(--brass); background: rgba(176,141,63,.09);
  padding: 12px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 18px;
}
.answer__year { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--brass-lit); line-height: 1.15; }
.answer__place { margin: 4px 0 0; font-family: var(--font-data); font-size: .84rem; letter-spacing: .06em; color: var(--paper-dim); text-transform: uppercase; }

.reveal__title { font-family: var(--font-display); font-size: 1.32rem; margin: 0 0 10px; color: var(--paper); }
.reveal__context, .reveal__why { margin: 0 0 12px; font-size: .95rem; color: var(--paper-dim); }
.reveal__why { color: var(--sepia); font-style: italic; }
.reveal__depiction {
  margin: 0 0 12px; padding: 9px 12px; border: 1px dashed rgba(200,200,208,.2); border-radius: var(--r-sm);
  font-family: var(--font-data); font-size: .74rem; color: var(--daylight);
}
/* The card is taller than a 720px laptop viewport on any round with a long context note, so a
   button at the natural end of the card lands below the fold — measured at y=744-775 on rounds
   1-3. A test driver auto-scrolls and never notices; a person sees a card with no way forward.
   The action bar sticks to the bottom of the scroll area instead, and bleeds to the card edges
   so the text scrolls UNDER it rather than beside it. */
.reveal__actions {
  position: sticky; bottom: calc(-1 * clamp(22px, 4vw, 34px));
  margin: 0 calc(-1 * clamp(22px, 4vw, 34px)) calc(-1 * clamp(22px, 4vw, 34px));
  padding: 14px clamp(22px, 4vw, 34px) clamp(22px, 4vw, 34px);
  background: linear-gradient(180deg, rgba(23,19,15,0) 0%, var(--ink-2) 38%);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.reveal__credit { margin: 0 0 20px; font-family: var(--font-data); font-size: .66rem; line-height: 1.6; color: rgba(217,205,182,.45); }

/* --- results ------------------------------------------------------------- */
.results { max-width: 940px; margin: 0 auto; padding: clamp(24px, 5vw, 52px) var(--gut) 60px; }
.results__head { text-align: center; margin-bottom: 26px; }
.results__score { font-family: var(--font-display); font-size: clamp(2.8rem, 9vw, 4.4rem); margin: 0; line-height: 1; color: var(--brass-lit); font-variant-numeric: tabular-nums; }
.results__score small { display: block; font-family: var(--font-data); font-size: .78rem; letter-spacing: .16em; color: var(--sepia); margin-top: 8px; }
.results__verdict { margin: 14px 0 16px; font-family: var(--font-display); font-size: 1.2rem; color: var(--paper); }
.meter { display: flex; gap: 4px; max-width: 420px; margin: 0 auto; }
.meter span { flex: 1; height: 8px; border-radius: 2px; background: var(--ink-3); overflow: hidden; }
.meter span i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-lit)); }

.results__map { height: clamp(280px, 42vh, 420px); border-radius: var(--r-md); border: var(--edge); margin-bottom: 26px; background: var(--ink-3); }

.rows { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 10px; }
.row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 130px;
  gap: 14px; align-items: center;
  background: var(--ink-2); border: var(--edge); border-radius: var(--r-md); padding: 10px 14px;
}
.row__thumb { width: 84px; height: 62px; object-fit: cover; border-radius: var(--r-sm); background: #000; display: block; }
.row__title { margin: 0 0 4px; font-family: var(--font-display); font-size: 1rem; color: var(--paper); }
.row__facts { margin: 0; font-family: var(--font-data); font-size: .72rem; color: var(--sepia); }
.row__facts b { color: var(--paper-dim); font-weight: 500; }
.row__pts { text-align: right; font-family: var(--font-data); }
.row__pts strong { display: block; font-size: 1.15rem; color: var(--brass-lit); font-variant-numeric: tabular-nums; }
.row__pts span { font-size: .68rem; color: var(--sepia); }
@media (max-width: 640px) {
  .row { grid-template-columns: 64px minmax(0, 1fr); }
  .row__thumb { width: 64px; height: 48px; }
  .row__pts { grid-column: 1 / -1; text-align: left; }
}

.conversion {
  background: linear-gradient(180deg, rgba(176,141,63,.12), rgba(176,141,63,.04));
  border: 1px solid rgba(176,141,63,.32); border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 34px); text-align: center;
}
.conversion h3 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 12px; color: var(--paper); }
.conversion p { margin: 0 auto 22px; max-width: 58ch; color: var(--paper-dim); }
.conversion__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.results__lock { margin: 24px 0 0; text-align: center; font-family: var(--font-data); font-size: .74rem; color: var(--sepia); }

/* --- footer -------------------------------------------------------------- */
.foot {
  border-top: var(--edge); padding: 26px var(--gut) 40px; text-align: center;
  font-family: var(--font-data); font-size: .7rem; line-height: 1.8; color: rgba(217,205,182,.45);
}
.foot p { margin: 0 0 6px; }
.foot a { color: rgba(217,205,182,.7); }

/* --- reveal + results juice, 2026-08-31 (Josh review: "no dopamine") ------ */
/* Toggling [hidden] restarts a CSS animation, so the card pops in on every reveal. */
.reveal__card { animation: cardIn .34s cubic-bezier(.2, .9, .3, 1.04) both; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.reveal__hero { text-align: center; margin-bottom: 20px; }
.reveal__heroTier {
  display: block; margin-bottom: 8px;
  font-family: var(--font-data); font-size: .7rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--daylight);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.reveal__heroTier.is-in { opacity: 1; transform: none; }
.reveal__heroPts {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1;
  color: var(--brass-lit); font-variant-numeric: tabular-nums;
}
.reveal__heroPts small {
  display: block; margin-top: 8px;
  font-family: var(--font-data); font-size: .66rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sepia);
}
.reveal__heroBar {
  height: 6px; margin-top: 14px; border-radius: 3px;
  background: var(--ink-3); overflow: hidden;
}
.reveal__heroBar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
}

.rows .row { animation: rowIn .5s ease both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}