:root {
  --paper: #efece6;
  --ink: #231f20;
  --muted: #8a8580;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 3vw, 32px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.bar {
  display: flex;
  justify-content: space-between;
  padding: var(--gutter);
}

.bar a { color: inherit; text-decoration: none; }
.bar a:hover { text-decoration: underline; text-underline-offset: 3px; }

.stage {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding: 0 var(--gutter);
}

.logo { width: min(86vw, 900px); line-height: 0; }
.logo svg, .logo img { width: 100%; height: auto; display: block; }

.issue {
  display: flex;
  gap: 0.9em;
  align-items: baseline;
  text-transform: none;
}

.issue .num { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.issue em { font-family: var(--serif); font-size: clamp(22px, 3vw, 34px); letter-spacing: 0; }

.clock { color: var(--muted); font-variant-numeric: tabular-nums; }

/* invert on click (main.js) */
body.inverted { --paper: #231f20; --ink: #efece6; }
body { transition: background 0.4s, color 0.4s; }