/* Magazine cover site.
 *
 * One image on a screen. Almost all of the CSS here is about making a portrait
 * cover sit correctly in a viewport of unknown shape without ever
 * overflowing it, which is the only real layout problem the page has.
 *
 * The three brand colours (--bg, --ink, --accent) and --cover-ratio are
 * injected by the template
 * from site.config.json and are deliberately NOT defined here, so there is
 * exactly one place to change them. The fallbacks in var() are only there so
 * this stylesheet still renders something sane if opened on its own.
 */

:root {
  --font-title: "Anton", "Liberation Sans Narrow", Impact, sans-serif;
  --font-body:  "Archivo", "Lato", system-ui, -apple-system, sans-serif;

  /* How much of the viewport the cover is allowed to claim. Kept as tokens
     because the share card reuses them for its thumbnail. */
  --cover-max-h: 88dvh;
  --cover-max-w: 92vw;
}

@font-face {
  font-family: "Anton";
  src: url("/fonts/anton-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: block; /* block, not swap: a fallback flash wrecks a masthead */
}

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

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg, #111014);
  color: var(--ink, #f6f3ec);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ stage */

.stage {
  min-height: 100dvh;
  display: grid;
  /* minmax(0, ...) so the column can never be forced wider than the viewport
     by its own contents. Without it an over-wide child grows the column, and
     centred content then centres inside the *column* and slides off screen. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(0.75rem, 3vmin, 2.5rem);
}

/* --------------------------------------------------------------- the cover */

/* Block, and no line height, so the link is exactly the cover's box: an inline
   <a> around an image adds a strip of dead clickable space under it. */
.cover-link {
  display: block;
  line-height: 0;
  border-radius: 2px;
}

/* Keyboard users need to see where they are; mouse clicks do not show it. */
.cover-link:focus-visible {
  outline: 3px solid var(--accent, #e0223c);
  outline-offset: 6px;
}

.cover {
  display: block;
  line-height: 0;
  filter: drop-shadow(0 1.5rem 3rem rgb(0 0 0 / 0.55));
}

/* Both axes are constrained, so both maxima are set and neither dimension is
   pinned. The browser honours whichever limit binds first and keeps the
   cover's ratio itself. Setting height alone leaves the width uncontrollable on a
   short, narrow screen. */
.cover__img {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--cover-max-h);
  max-width: var(--cover-max-w);
  aspect-ratio: var(--cover-ratio, auto);
  object-fit: contain;
  background: var(--bg, #111014);
  border-radius: 2px;
  /* A hairline, so a cover whose own ground matches the page still reads as a
     physical object rather than dissolving into the background. */
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

/* ------------------------------------------------------------------- 404 */

.stage--404 { gap: 0.5rem; text-align: center; }

.lost {
  font-family: var(--font-title);
  font-size: clamp(4rem, 22vw, 12rem);
  line-height: 0.9;
  margin: 0;
  color: var(--accent, #e0223c);
}

.lost__sub { margin: 0; font-size: clamp(0.95rem, 2.5vw, 1.2rem); }
.lost__sub a { color: var(--ink, #f6f3ec); text-underline-offset: 0.2em; }

/* ----------------------------------------------------------------- a11y */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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