/* Vatican Vigil — the colours are the game's own (UiKit): cream on night, typed paper, manila, label tape. */
:root {
  --night: #0e1013;
  --night-raised: #15181c;
  --rule: #2b2f35;
  --cream: #e8e0c9;
  --dim: #a39d8a;
  --amber: #ffb33d;
  --alert: #f2852e;
  --paper: #ede6d1;
  --paper-edge: #d9cfb3;
  --manila: #c9a669;
  --manila-dark: #a8874d;
  --ink: #241f1a;
  --ink-dim: #6e6659;
  --ink-red: #a32417;
  --tape: #161619;
  --tape-text: #f0f0e8;
  --key: #ed8733;

  --serif: Georgia, "Palatino Linotype", "Book Antiqua", Cambria, "Times New Roman", serif;
  --typewriter: "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace;
  --label: Bahnschrift, "DIN Alternate", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --measure: 1120px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 18px/1.6 var(--serif);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 10; background: var(--paper); color: var(--ink); padding: 8px 12px; }

/* ---------- The opening: the compound at night, the watch orders on top ---------- */
.hero { position: relative; min-height: min(100vh, 980px); display: grid; align-items: center; isolation: isolate; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; object-position: 50% 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(14, 16, 19, 0) 0%, rgba(14, 16, 19, 0.55) 70%),
    linear-gradient(180deg, rgba(14, 16, 19, 0.15) 0%, rgba(14, 16, 19, 0) 40%, var(--night) 100%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--measure); margin: 0 auto; padding: 72px var(--gutter); }

.folder { max-width: 780px; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6)); }
.folder-tab {
  display: inline-block; background: var(--manila); color: var(--ink);
  font: 700 15px/1 var(--typewriter); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 56px 10px 28px; border-radius: 3px 10px 0 0; margin-left: 24px;
}
.paper {
  background: var(--paper); color: var(--ink);
  border: 12px solid var(--manila); border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--paper-edge), inset 0 0 60px rgba(160, 130, 80, 0.18);
  padding: clamp(20px, 4vw, 40px);
}
.paper a:not(.key):not(.keylabel) { color: var(--ink-red); }
.stamp { margin: 0 0 18px; max-width: 560px; }
.stamp img { width: 100%; }
.lede { font: 17px/1.65 var(--typewriter); margin: 0; }
.paper hr { border: 0; border-top: 1px solid #c8bd9f; margin: 22px 0 16px; }
.checks { list-style: none; margin: 0; padding: 0; font: 700 15px/1.5 var(--typewriter); text-transform: uppercase; letter-spacing: 0.02em; }
.checks li { display: flex; gap: 12px; padding: 4px 6px; }
.checks li:first-child { background: rgba(255, 217, 71, 0.45); }
.checks .box { white-space: nowrap; }
.checks .note { font-weight: 400; color: var(--ink-dim); text-transform: none; }
.keys { margin: 22px 0 0; display: flex; align-items: center; gap: 12px; font: 16px var(--typewriter); }
.key {
  display: inline-block; font: 700 14px/1 var(--label); text-decoration: none;
  color: var(--ink); background: #e9e1cc; padding: 8px 12px 7px; border-radius: 5px;
  border: 1px solid #8e8670; box-shadow: 0 3px 0 #8e8670;
}
.key-orange { background: var(--key); border-color: #8f4a14; box-shadow: 0 3px 0 #8f4a14; color: #1b120a; }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #8f4a14; }
.keylabel { color: var(--ink); text-decoration: none; }
.keylabel:hover { text-decoration: underline; }

/* ---------- Sections ---------- */
.section { max-width: var(--measure); margin: 0 auto; padding: 88px var(--gutter) 24px; }
.tape {
  display: inline-block; margin: 0 0 32px; transform: rotate(-1deg);
  background: var(--tape); color: var(--tape-text);
  font: 700 18px/1 var(--label); letter-spacing: 0.32em; text-transform: uppercase;
  padding: 11px 16px 10px 20px; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.intro { color: var(--dim); max-width: 640px; margin: -12px 0 32px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.prose p { margin: 0 0 1em; max-width: 60ch; }
.label { font: 700 14px/1 var(--typewriter); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }

.roster {
  list-style: none; margin: 0; padding: 22px 26px; counter-reset: line;
  background: var(--paper); color: var(--ink); border-radius: 2px;
  font: 15px/1.5 var(--typewriter);
  box-shadow: inset 0 0 0 1px var(--paper-edge), 0 10px 30px rgba(0, 0, 0, 0.45);
  transform: rotate(0.6deg);
}
.roster li { display: grid; grid-template-columns: 2.2em 1fr; padding: 6px 0 8px; }
.roster li::before { counter-increment: line; content: counter(line) "."; color: var(--ink-red); font-weight: 700; grid-row: span 2; }
.roster b { text-transform: uppercase; letter-spacing: 0.06em; }
.roster span { color: #3d362d; }

/* The night's alerts, as the watch's panel shows them */
.alerts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.alerts li {
  background: var(--night-raised); border: 1px solid var(--rule); border-radius: 3px;
  padding: 18px 20px 6px;
}
.alerts p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: #cfc8b2; }
.alerts .alert { font: 700 15px/1.4 var(--label); color: var(--alert); letter-spacing: 0.01em; }
.alert .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 1px;
  background: var(--alert); box-shadow: 0 0 8px rgba(242, 133, 46, 0.8);
}
.alert .when { display: block; margin: 3px 0 0 18px; font: 400 13px var(--typewriter); color: var(--dim); }

/* Screenshots */
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.shots a { display: block; border: 1px solid var(--rule); background: #000; }
.shots img { aspect-ratio: 16 / 9; object-fit: cover; transition: opacity 0.2s; }
.shots a:hover img { opacity: 0.85; }
.shots p { margin: 10px 0 0; font: 14px/1.4 var(--typewriter); color: var(--dim); }

/* The demo, not yet issued */
.demo { position: relative; max-width: 760px; border-width: 10px; }
.demo h2 { font: 700 24px/1.3 var(--typewriter); text-transform: uppercase; margin: 0 0 12px; letter-spacing: 0.04em; }
.demo p { font: 16px/1.65 var(--typewriter); margin: 0; }
.demo-stamp {
  float: right; margin: -6px 0 12px 18px !important; transform: rotate(-4deg);
  border: 3px double var(--ink-red); color: var(--ink-red); padding: 6px 12px;
  font: 700 15px/1 var(--typewriter) !important; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85;
}

.footer {
  max-width: var(--measure); margin: 88px auto 0; padding: 28px var(--gutter) 48px;
  border-top: 1px solid var(--rule); color: var(--dim); font: 14px/1.6 var(--typewriter);
}
.footer p { margin: 0 0 10px; max-width: 90ch; }
.footer b { color: var(--cream); }

/* Screenshot viewer */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1920px); width: 100%; color: var(--cream); }
.viewer::backdrop { background: rgba(5, 6, 8, 0.92); }
.viewer figure { margin: 0; }
.viewer img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: #000; }
.viewer figcaption { font: 15px var(--typewriter); color: var(--dim); padding: 10px 2px 0; }
.viewer-bar { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.viewer-bar button {
  font: 700 14px/1 var(--label); color: var(--ink); background: #e9e1cc; cursor: pointer;
  border: 1px solid #8e8670; border-radius: 5px; box-shadow: 0 3px 0 #8e8670; padding: 9px 14px 8px;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 960px) {
  .alerts, .shots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .hero { min-height: 0; }
  .hero-inner { padding: 40px 16px 56px; }
  .folder-tab { margin-left: 12px; padding: 10px 36px 8px 18px; font-size: 13px; }
  .paper { border-width: 8px; }
  .lede { font-size: 15px; }
  .checks { font-size: 13px; }
  .checks li { gap: 8px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .alerts, .shots { grid-template-columns: 1fr; }
  .section { padding: 64px 16px 16px; }
  .tape { font-size: 15px; letter-spacing: 0.24em; }
  .roster { font-size: 14px; padding: 18px 16px; transform: none; }
  .demo-stamp { float: none; display: inline-block; margin: 0 0 14px !important; }
  .footer { padding: 24px 16px 40px; font-size: 13px; }
}