/* The look every page shares. A page adds its own styles only for what is
   its alone (see CLAUDE.md). */

@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --ink: #f1f3f5;
  --ink-soft: #ced4da;
  --ground: #1e344c;
  --gold: #d9b45b;
  --heading: "Oswald", "Arial Narrow", sans-serif;
  --text: "Times New Roman", Times, Georgia, serif;
}

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

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

/* The site's one background, on every page, defined here only: the app's
   backdrop. Black, a faint gold glow rising from the foot, and the runes in
   faint rows turned 12 degrees, as the app draws them. */
body {
  margin: 0;
  color: var(--ink);
  background: #000 radial-gradient(120% 55% at 50% 100%, #0e0a04, #070503 50%, #000) fixed;
  font: 17px/1.45 var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
  transform: rotate(-12deg);
  background: url("/images/backdrops/runes.webp") 0 0 / 840px 480px;
}

/* Everything on a page stands in front of its backdrop. */
body > * { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* The default button, the links page's own: at least 56px tall, the full
   width of its column. A page sets only its colours and what it holds. */
.button {
  position: relative;
  display: block;
  margin: 0 0 14px;
  padding: 14px 24px;
  min-height: 56px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s, filter 0.15s;
}

.button:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* An inner page's header: a round back button on the left, the page's name
   in the middle, kept centred by an empty cell on the right. */
.page-head {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  margin: 0 0 26px;
}

.page-head h1 {
  margin: 0;
  text-align: center;
  font: 400 32px/1.2 var(--heading);
  text-transform: uppercase;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(241, 243, 245, 0.25);
  transition: transform 0.15s, filter 0.15s;
}

.back-button:hover { transform: translateY(-1px); filter: brightness(1.15); }

/* A phone flashes a square over whatever is tapped; every button here draws
   its own press instead, in its own shape. */
a, button { -webkit-tap-highlight-color: transparent; }
.back-button:active,
.button:active,
.store:active { filter: brightness(1.4); }
.back-button svg { width: 26px; height: 26px; }

/* The cookie question (js/consent.js): pinned to the foot of the window,
   above a phone's own bar, until the visitor answers it. */
.consent {
  position: fixed;
  z-index: 20;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid rgba(217, 180, 91, 0.55);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  font-size: 16px;
  line-height: 1.4;
}

.consent p { flex: 1 1 300px; margin: 0; }
.consent a { color: var(--gold); }
.consent-actions { display: flex; gap: 10px; margin-left: auto; }

.consent button {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  font: 400 17px var(--heading);
  text-transform: uppercase;
  cursor: pointer;
}

.consent-decline {
  border: 1px solid rgba(241, 243, 245, 0.35);
  background: none;
  color: var(--ink-soft);
}

.consent-accept {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #000;
}

@media (max-width: 520px) {
  .consent-actions { width: 100%; }
  .consent button { flex: 1; }
}

/* A quiet row of links at a page's foot, above its version. */
.foot-links { margin: 0 0 10px; font-size: 14px; }
.foot-links a { color: rgba(241, 243, 245, 0.7); }

/* The site's version, at the foot of every page. */
.site-foot {
  text-align: center;
  font: 12px var(--text);
  color: rgba(241, 243, 245, 0.45);
  padding: 32px 16px 24px;
}

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