/* ─────────────────────────────────────────────────────────────
   Days Since the Last Incident

   A sign hung on a wall. The room's lights change with the colour
   scheme; the sign does not — it's a physical object.
   ───────────────────────────────────────────────────────────── */

:root {
  /* The sign. Constant across schemes, save for a little less glare
     when the lights are off. */
  --panel: #103a2c;
  --ink: #f2f5ee;
  --ink-dim: #9db4a7;
  --ink-faint: #8fa79a;
  --hair: rgba(242, 245, 238, 0.15);
  --keyline: rgba(242, 245, 238, 0.22);
  --bolt: rgba(242, 245, 238, 0.26);
  --accent: #dfa044;
  --gloss: linear-gradient(
    177deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.14) 100%
  );

  /* The room. */
  --wall: #d9d6cc;
  --wall-lit: #e4e1d8;
  --shadow:
    0 0 0 1px rgba(11, 33, 25, 0.32), 0 1.8rem 3.4rem -1.2rem rgba(31, 38, 28, 0.4),
    0 0.25rem 0.7rem -0.2rem rgba(31, 38, 28, 0.14);

  /* The sign keeps its proportions and is bounded on both axes, so a
     short or sideways viewport shrinks it rather than cutting it off. */
  --panel-w: min(94vw, 56rem, 100svh);
  --pad-x: clamp(1.35rem, 5vw, 4rem);
  --pad-y: clamp(2.75rem, 8.5vw, 4.5rem);
  --inset: clamp(0.45rem, 1.2vw, 0.85rem);
  --count-scale: 1;

  --font: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --panel: #0d3226;
    --ink: #eef2ea;
    --ink-dim: #94ac9e;
    --ink-faint: #8aa294;
    --hair: rgba(238, 242, 234, 0.13);
    --keyline: rgba(238, 242, 234, 0.18);
    --bolt: rgba(238, 242, 234, 0.22);
    --accent: #d6973f;
    --gloss: linear-gradient(
      177deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.2) 100%
    );

    --wall: #080908;
    --wall-lit: #101210;
    --shadow: 0 0 0 1px rgba(238, 242, 234, 0.09), 0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.95);
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--wall);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ── The room ────────────────────────────────────────────────── */

.room {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3.5svh, 4rem) 0;
  background: radial-gradient(120% 80% at 50% 0%, var(--wall-lit) 0%, var(--wall) 68%), var(--wall);
}

/* ── The sign ────────────────────────────────────────────────── */

.board {
  container-type: inline-size;
  position: relative;
  width: var(--panel-w);
  padding: var(--pad-y) var(--pad-x);
  background-color: var(--panel);
  background-image: var(--gloss);
  box-shadow: var(--shadow);
  text-align: center;
  opacity: 0;
  animation: board-set 640ms cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}

/* The printed keyline and the four bolts holding it to the wall. */
.board::before {
  content: '';
  position: absolute;
  inset: var(--inset);
  border: 1px solid var(--keyline);
  background-image:
    radial-gradient(circle, var(--bolt) 45%, transparent 47%),
    radial-gradient(circle, var(--bolt) 45%, transparent 47%),
    radial-gradient(circle, var(--bolt) 45%, transparent 47%),
    radial-gradient(circle, var(--bolt) 45%, transparent 47%);
  background-repeat: no-repeat;
  background-size: 6px 6px;
  background-position:
    9px 9px,
    calc(100% - 9px) 9px,
    9px calc(100% - 9px),
    calc(100% - 9px) calc(100% - 9px);
  pointer-events: none;
}

/* ── Type ────────────────────────────────────────────────────── */

.board__eyebrow,
.board__lead,
.board__caption,
.board__noscript,
.board__footer {
  margin: 0;
  text-transform: uppercase;
}

.board__eyebrow {
  font-variation-settings:
    'wdth' 118,
    'wght' 600;
  font-size: clamp(0.58rem, 1.35cqw, 0.7rem);
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  color: var(--ink-faint);
  margin-bottom: clamp(2.25rem, 8cqw, 4.25rem);
}

.board__lead {
  font-variation-settings:
    'wdth' 102,
    'wght' 500;
  font-size: clamp(0.75rem, 1.85cqw, 0.95rem);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--ink-dim);
  margin-bottom: clamp(0.4rem, 1.4cqw, 0.9rem);
  transition: opacity 300ms ease;
}

.board[data-state='none'] .board__lead,
.board[data-state='error'] .board__lead,
.board[data-state='loading'] .board__lead {
  opacity: 0;
}

/* The count rests on a hairline that runs the width of the sign. The
   ochre segment under the figures is exactly as wide as the number, so
   the rule grows with the record. It is the one loud thing here. */
/* Fixed height, digits bottom-aligned: the rule is a datum line that
   never moves, whether the count is 1 digit or 4, loading or blank. */
.board__count {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: calc(44.5cqw * var(--count-scale)); /* clears the tallest case, 1 digit at 46cqw */
}

.board__count::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
}

.count {
  display: inline-block;
  vertical-align: bottom;
  font-variation-settings:
    'wdth' 84,
    'wght' 800;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.9;
  letter-spacing: -0.012em;
  color: var(--ink);
  padding-bottom: 0.02em;
  border-bottom: 0.035em solid var(--accent);
  min-width: 0.6em;
  min-height: 0.92em;
  transition: border-color 400ms ease;

  /* Sized against the sign, not the viewport, so the number keeps the
     same presence at every width. */
  --count-size: 42cqw;
  font-size: calc(var(--count-size) * var(--count-scale));
}

.count[data-len='1'] {
  --count-size: 46cqw;
}
.count[data-len='3'] {
  --count-size: 30cqw;
}
.count[data-len='4'] {
  --count-size: 23cqw;
}
.count[data-len='5'] {
  --count-size: 18cqw;
}
.count[data-len='6'] {
  --count-size: 15cqw;
}
.count[data-len='7'] {
  --count-size: 12cqw;
}
.count[data-mark] {
  --count-size: 26cqw;
}

/* Loading keeps the full-size box, so nothing shifts when the number
   lands. */
.board[data-state='loading'] .count {
  border-bottom-color: var(--hair);
}

/* Nothing on record, or nothing reachable: the plate stays blank. The
   sign collapses around a short rule rather than holding open a
   number-shaped hole. */
.board[data-state='none'],
.board[data-state='error'] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(52vw, 26rem);
}

.board[data-state='none'] .board__lead,
.board[data-state='error'] .board__lead {
  display: none;
}

.board[data-state='none'] .board__eyebrow,
.board[data-state='error'] .board__eyebrow {
  margin-bottom: clamp(2.5rem, 10cqw, 5rem);
}

.board[data-state='none'] .board__count,
.board[data-state='error'] .board__count {
  min-height: 0;
}

.board[data-state='none'] .count,
.board[data-state='error'] .count {
  --count-size: 1rem;
  width: min(13rem, 55%);
  min-width: 0;
  min-height: 0;
  padding-bottom: 0;
  border-bottom-width: 4px;
}

.board[data-state='error'] .count {
  border-bottom-color: var(--hair);
}

.board[data-state='none'] .board__caption,
.board[data-state='error'] .board__caption {
  margin-top: clamp(1.6rem, 5cqw, 2.6rem);
}

.count__digits {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.digit {
  position: relative;
  display: block;
  flex: none; /* never let flex shrink a slot into clipping its glyph */
  overflow: hidden;
  overflow-clip-margin: 0;
}

.digit--mark {
  color: var(--ink-dim);
  font-variation-settings:
    'wdth' 84,
    'wght' 400;
}

.digit__face {
  display: block;
}

.digit__face--out {
  position: absolute;
  inset: 0;
}

.board__caption {
  font-variation-settings:
    'wdth' 112,
    'wght' 600;
  font-size: clamp(0.76rem, 2.15cqw, 1.1rem);
  letter-spacing: 0.19em;
  text-indent: 0.19em;
  line-height: 1.5;
  color: var(--ink);
  margin-top: clamp(0.9rem, 3cqw, 1.7rem);
  min-height: 1.5em;
  text-wrap: balance;
  transition:
    opacity 320ms ease,
    color 320ms ease;
}

/* The easter egg: five taps on the count and the caption names names. */
.board[data-reveal] .board__caption {
  color: var(--accent);
}

.board[data-state='loading'] .board__caption {
  opacity: 0;
}

.board[data-state='error'] .board__caption {
  color: var(--ink-dim);
}

/* Small print along the bottom edge of the sign. The number is a link to
   a vCard, so a phone offers to file the hotline under Contacts. */
.board__footer {
  font-variation-settings:
    'wdth' 112,
    'wght' 600;
  font-size: clamp(0.58rem, 1.45cqw, 0.72rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  line-height: 1.8;
  color: var(--ink-faint);
  margin-top: clamp(2rem, 7cqw, 3.5rem);
  text-wrap: balance;
}

.board__tel {
  color: var(--ink-dim);
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 200ms ease;
}

.board__tel:hover,
.board__tel:focus-visible {
  color: var(--ink);
}

.board__noscript {
  display: none;
  font-variation-settings:
    'wdth' 106,
    'wght' 600;
  font-size: clamp(0.8rem, 2.4cqw, 1rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1.6;
  color: var(--ink);
  padding-block: clamp(2rem, 9cqw, 4.5rem);
  text-wrap: balance;
}

/* ── Motion ──────────────────────────────────────────────────── */

@keyframes board-set {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.995);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes face-in {
  from {
    opacity: 0;
    transform: translateY(0.8em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes face-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-0.8em);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.digit.is-swapping .digit__face {
  animation: face-in 560ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.digit.is-swapping .digit__face--out {
  animation: face-out 460ms cubic-bezier(0.5, 0, 0.75, 0.35) both;
}

@media (prefers-reduced-motion: reduce) {
  .board {
    animation: fade-in 300ms ease forwards;
  }

  .digit.is-swapping .digit__face {
    animation: fade-in 340ms ease both;
  }

  .digit.is-swapping .digit__face--out {
    animation: fade-out 260ms ease both;
  }
}

/* ── Narrow screens ──────────────────────────────────────────── */

@media (max-width: 26rem) {
  :root {
    --panel-w: min(95vw, 56rem);
    --pad-y: clamp(2.5rem, 11vw, 4rem);
  }

  .board__eyebrow {
    letter-spacing: 0.26em;
    text-indent: 0.26em;
  }

  .board__caption {
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
}

/* Short and wide — a phone turned sideways. The width cap above already
   shrinks the sign; these just stop the fixed-rem padding and type from
   eating the remaining room. */
@media (max-height: 34rem) {
  :root {
    --pad-y: clamp(1.25rem, 6svh, 2.25rem);
  }

  .board__eyebrow {
    margin-bottom: clamp(1rem, 4cqw, 1.75rem);
  }

  .board__lead {
    margin-bottom: 0.25rem;
  }

  .board__caption {
    margin-top: clamp(0.6rem, 2cqw, 1.1rem);
  }
}