/* Grey on charcoal. Fonts follow the "Stoic Ranger Web" template. */

@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400; font-display: swap; src: url(fonts/barlow-semi-condensed-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-600.woff2) format("woff2"); }

/* ✎ EDIT: brand colors. Change a value here and it changes everywhere. */
:root {
  --bg: #1D1E1A;          /* charcoal, page background */
  --surface: #23241F;     /* footer */
  --fg: #9A9E94;          /* main text, name */
  --muted: #8A8E85;       /* subtext, footer */
  --hair: #3A3B34;        /* thin lines */
  --accent: #8A8E85;      /* grey: Login button */
  --accent-ink: #1D1E1A;  /* text on the button */
  --logo: #5D6159;        /* wolf grey of the emblem (set inside assets/logo.svg) */
  --f-disp: "Barlow Condensed", "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow Semi Condensed", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 var(--f-body);
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
}

.emblem { width: min(320px, 70vw); height: auto; }

.name {
  margin: 28px 0 12px;
  font: 700 clamp(2.2rem, 7vw, 3.6rem)/1 var(--f-disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tagline {
  margin: 0 0 32px;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.button {
  display: inline-block;
  padding: 13px 40px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font: 700 16px/1 var(--f-disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.button:hover { background: transparent; color: var(--accent); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid var(--hair);
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--muted);
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--fg); }

/* Legal pages */
.page { flex: 1; width: 100%; max-width: 44rem; margin: 0 auto; padding: 48px 16px; }
.page h1 { font: 700 2rem/1 var(--f-disp); letter-spacing: 0.1em; text-transform: uppercase; }
.page h2 { font: 700 1.2rem/1.2 var(--f-disp); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2em; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.page a { color: var(--accent); }
.todo { background: #a3201a; color: #fff; padding: 2px 6px; }
.back { display: inline-block; margin-bottom: 24px; }