/* ─────────────────────────────────────────────────────────────
   ANJA WATCH
   Written mobile-first: the base rules are the phone layout,
   and the media queries add the bigger stuff on top.

   Fonts are self-hosted (SIL Open Font Licence — see
   assets/fonts/OFL-*.txt). No third-party requests from this page.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Bebas Neue';
  src: url('/assets/fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('/assets/fonts/cinzel-decorative-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/caveat.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --ink: #0c0a10;
  --ink-2: #14111b;
  --bone: #e8e2d6;
  --bone-dim: #a49c8d;
  --bone-faint: #6d6659;

  /* One loud colour, two muted ones. Restraint reads as deliberate. */
  --here: #ff2d6f;
  --nearby: #b98c34;
  --gone: #6f8189;
  --unknown: #4a4554;

  --hair: #2a2434;

  --display: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --title: 'Cinzel Decorative', Georgia, 'Times New Roman', serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
  --body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Paper grain over the whole page. One cheap inline SVG, no image files. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A soft burn-in at the edges, like a photocopy. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55));
}

.sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 18px 56px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* ── Masthead ─────────────────────────────────────────────── */

.head { padding: 30px 0 18px; }

.dateline {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin: 0 0 12px;
}

.dateline .blip {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gone);
  margin-right: 6px;
  vertical-align: 1px;
}
.dateline[data-state='stale'] .blip { background: var(--nearby); }
.dateline[data-state='error'] .blip { background: var(--here); }

.head h1 {
  font-family: var(--title);
  font-weight: 700;
  font-size: clamp(2.5rem, 15vw, 5.5rem);
  line-height: 0.92;
  margin: 0;
  color: var(--bone);
  letter-spacing: 0.01em;
}

.scrawl {
  font-family: var(--hand);
  font-size: clamp(1.25rem, 6vw, 1.9rem);
  line-height: 1;
  color: var(--here);
  margin: 6px 0 0 4px;
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

.head hr {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 22px 0 0;
}

/* ── The report: portrait + national level ────────────────── */

.report {
  display: grid;
  gap: 26px;
  padding: 26px 0 8px;
  justify-items: center;
  text-align: center;
}

/* Taped-on photo. Deliberately squint. */
.portrait {
  position: relative;
  margin: 0;
  width: min(210px, 56vw);
  transform: rotate(-2.4deg);
}

.portrait .frame {
  position: relative;
  background: #1a1620;
  padding: 9px 9px 0;
  border: 1px solid #2f2839;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.8);
  transition: filter 0.6s ease, opacity 0.6s ease;
}

/* The joke: she develops into view as the country gets wetter. */
.portrait[data-state='gone'] img { filter: grayscale(1) contrast(0.9) brightness(0.5); opacity: 0.22; }
.portrait[data-state='nearby'] img { filter: grayscale(0.55) contrast(1.05) brightness(0.85); opacity: 0.66; }
.portrait[data-state='here'] img { filter: none; opacity: 1; }

.portrait .nophoto {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(45deg, #171320, #171320 7px, #1c1826 7px, #1c1826 14px);
  color: var(--bone-faint);
}
.portrait .nophoto span { font-family: var(--display); font-size: 3rem; line-height: 1; }
.portrait .nophoto p {
  font-family: var(--mono); font-size: 0.6rem; margin: 6px 0 0;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 0 8px;
}

.portrait figcaption {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: 9px 4px 11px;
  background: #1a1620;
  border: 1px solid #2f2839;
  border-top: 0;
  text-align: center;
}

.portrait[data-state='here'] figcaption { color: var(--here); }

/* Two bits of tape */
.tape {
  position: absolute;
  width: 62px; height: 21px;
  background: rgba(232, 226, 214, 0.12);
  border-left: 1px solid rgba(232, 226, 214, 0.1);
  border-right: 1px solid rgba(232, 226, 214, 0.1);
  z-index: 2;
}
.tape-a { top: -10px; left: -14px; transform: rotate(-26deg); }
.tape-b { bottom: 16px; right: -18px; transform: rotate(-21deg); }

/* National level */
.level-block { width: 100%; }

.label,
.sectionhead {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin: 0;
}

.level {
  font-family: var(--display);
  font-size: clamp(3rem, 17vw, 6.5rem);
  line-height: 0.86;
  margin: 6px 0 0;
  color: var(--tone, var(--bone));
  letter-spacing: 0.01em;
  word-break: break-word;
}

.blurb {
  font-family: var(--hand);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1.15;
  color: var(--bone-dim);
  margin: 10px auto 0;
  max-width: 24ch;
}

.tally {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--bone-faint);
  margin: 14px 0 0;
}

.pips {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 8px 0 0;
}

.pip {
  width: 9px; height: 9px;
  border: 1px solid var(--hair);
  background: transparent;
}
.pip.is-wet { background: var(--here); border-color: var(--here); }

/* ── Campsie line ─────────────────────────────────────────── */

.campsie {
  margin: 30px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  text-align: center;
}

.campsie h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 6.5vw, 2rem);
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--bone);
}

.campsie .answer {
  font-family: var(--display);
  font-size: clamp(3.2rem, 20vw, 5.5rem);
  line-height: 0.82;
  margin: 8px 0 0;
  color: var(--tone, var(--bone));
}

.campsie .fineprint {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin: 12px 0 0;
}

/* ── Map ──────────────────────────────────────────────────── */

.sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 34px 0 14px;
}
.sectionhead span { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--bone-faint); }

.map { display: block; width: 100%; height: auto; }

/* Risograph misregistration: a pink plate printed a hair off. */
.map .misprint {
  fill: var(--here);
  opacity: 0.16;
  transform: translate(3px, -3px);
}

.map .land {
  fill: #161320;
  stroke: #463a5c;
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map .inset-box {
  fill: none;
  stroke: var(--hair);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.map .inset-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  fill: var(--bone-faint);
}

.map .pin-hit { fill: transparent; cursor: pointer; }

.map .dot {
  fill: var(--dot, var(--unknown));
  stroke: var(--ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.map .label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: var(--bone);
  paint-order: stroke;
  stroke: var(--ink);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.map .sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--dot, var(--bone-dim));
  paint-order: stroke;
  stroke: var(--ink);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.map g[data-state='here']   { --dot: var(--here); }
.map g[data-state='nearby'] { --dot: var(--nearby); }
.map g[data-state='gone']   { --dot: var(--gone); }

/* Her face takes over the pin wherever it is raining. */
.map .face,
.map .face-ring { display: none; }

.has-face .map g[data-state='here'] .face,
.has-face .map g[data-state='here'] .face-ring { display: block; }
.has-face .map g[data-state='here'] .dot { display: none; }

.map .face-ring {
  fill: none;
  stroke: var(--here);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.map g.is-active .label { fill: #fff; }
.map g.is-active .dot { stroke: var(--bone); }

/* ── Station ledger ───────────────────────────────────────── */

.ledger { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: 0 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.row:first-child { border-top: 1px solid var(--hair); }

.row .mark { grid-row: 1 / -1; align-self: stretch; background: var(--tone, var(--unknown)); }
.row .place { grid-column: 2; grid-row: 1; }
.row .deg { grid-column: 3; grid-row: 1; }
.row .rowbody { grid-column: 2 / 4; grid-row: 2; min-width: 0; }

.row .place {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: block;
}

.row .verdict {
  font-family: var(--display);
  font-size: clamp(1.5rem, 7vw, 2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--tone, var(--unknown));
  display: block;
  margin: 3px 0 0;
}

.row .rowsub {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  color: var(--bone-faint);
  margin: 6px 0 0;
}

.row .rowquip {
  font-family: var(--hand);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--bone-dim);
  margin: 3px 0 0;
}

.row .deg {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bone-faint);
  padding-top: 2px;
}

.row.is-active .place { color: var(--bone); }

/* ── Footer ───────────────────────────────────────────────── */

.foot { margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--hair); }

.foot .story {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.75;
  color: var(--bone-dim);
  margin: 0;
  max-width: 58ch;
}
.foot .story em { color: var(--here); font-style: normal; }

.actions { display: flex; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; }

.btn {
  appearance: none;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  min-height: 44px;              /* comfortable thumb target */
  padding: 0 20px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn:hover { border-color: var(--here); color: var(--here); }
.btn:focus-visible { outline: 2px solid var(--here); outline-offset: 2px; }
.btn[data-done='1'] { border-color: var(--here); color: var(--here); }

.colophon {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--bone-faint);
  margin: 26px 0 0;
}
.colophon a { color: var(--bone-dim); }

.errorbox {
  margin: 24px 0 0;
  padding: 16px 0;
  border-top: 2px solid var(--here);
  border-bottom: 1px solid var(--hair);
}
.errorbox h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.3rem;
  letter-spacing: 0.08em; margin: 0 0 4px; color: var(--here);
}
.errorbox p { font-family: var(--mono); font-size: 0.72rem; color: var(--bone-dim); margin: 0; }

/* ── Wider screens ────────────────────────────────────────── */

@media (min-width: 620px) {
  .sheet { padding: 0 32px 72px; }
  .report {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    align-items: center;
    gap: 34px;
  }
  .blurb { margin-left: 0; max-width: 30ch; }
  .pips { justify-content: flex-start; }
  .campsie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
  }
  .campsie .answer { margin: 0; }
  .campsie .fineprint { margin: 8px 0 0; }
  .campsie .ask { flex: 1 1 auto; }
  .row { grid-template-columns: 3px 11rem 1fr auto; align-items: start; }
  .row .place { grid-column: 2; grid-row: 1; padding-top: 6px; }
  .row .rowbody { grid-column: 3; grid-row: 1; }
  .row .deg { grid-column: 4; grid-row: 1; }
  .row .verdict { margin: 0; }
}

/* Single column all the way up — the map is a plate on a poster, not a
   panel in a dashboard. Deliberately constrained so it doesn't become
   enormous on a wide screen. */
@media (min-width: 620px) {
  .map { max-width: 470px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}