/* ============================================================
   NEWSPRINT — the look every page of The Puzzle Times shares
   Paper, ink, rules and type, the paper's grain and the house button. The
   front page (times/) loads it today; the games are to load it too, so the
   paper reads as one publication from its front page to its last puzzle.

   For now the tokens and the paper are copied from the top of styles.css,
   which the Word Search still uses on its own. Keep the two in step until
   styles.css imports this file instead.
   ============================================================ */
/* The fonts, in two requests. The first is the game's own (the @import at the
   top of styles.css), character for character: the browser caches Google's
   reply per address, so the front page fetches the game's fonts for it and
   the game starts without waiting on Google. Keep it identical to
   styles.css's. The second adds what only the front page sets: Spectral's
   italics and the blackletter nameplate. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Spectral:wght@400;500;600;700&family=Zilla+Slab:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@1,400;1,500&family=UnifrakturMaguntia&display=swap');

:root {
  --paper:   #f0ede2;   /* newsprint cream */
  --paper-2: #e9e5d7;   /* slightly darker panel wash */
  --ink:     #1a1712;   /* near-black text */
  --ink-dim: #6b6459;   /* muted labels */
  --rule:    #211d16;   /* hairline rules / borders */
  --rule-soft:#bdb6a4;  /* lighter grid rules */
  --accent:  #9c2b2b;   /* newsprint red (used sparingly) */

  --font-flag:    'UnifrakturMaguntia', 'Old English Text MT', serif;  /* the paper's nameplate only */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif:   'Spectral', Georgia, 'Times New Roman', serif;
  --font-mono:    'Zilla Slab', Georgia, serif;   /* utility/small-caps labels */
}

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

html, body {
  min-height: 100dvh;
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

/* paper grain + a warm vignette, so the cream reads as printed newsprint */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 999;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(112% 72% at 50% 42%, transparent 46%, #6b2f1f2b 80%, #4e1e1250 100%),
    radial-gradient(145% 115% at 50% 50%, transparent 55%, #7a352026 100%);
  z-index: 998;
}

/* the triple rule across the top of a sheet */
.masthead-rule {
  height: 5px;
  border: none;
  background:
    linear-gradient(var(--rule),var(--rule)) top/100% 2px no-repeat,
    linear-gradient(var(--rule),var(--rule)) center/100% 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) bottom/100% 2px no-repeat;
}

/* small capitals in the slab: labels, kickers, datelines */
.smallcaps {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-dim);
}

/* the house action: solid ink, inverts on hover */
.btn {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; text-align: center;
  color: var(--paper); background: var(--ink);
  border: 2px solid var(--rule); border-radius: 0;
  padding: 12px 32px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:active { transform: translateY(1px); }

/* one focus treatment: an offset red proof-mark */
a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}