/* ==========================================================================
   MAUJr — em breve
   One page, no JavaScript. Colours are taken from artboard 9 and nowhere else.

   Everything lives in this file rather than a <style> block because the CSP in
   /_headers sets `style-src 'self'` with no 'unsafe-inline' — inline styles and
   style="" attributes would be blocked.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────
   Self-hosted woff2, subset to latin + latin-ext. Built from the upstream
   google/fonts TTFs; see tools/build-fonts.py. All three are SIL OFL 1.1 and
   the licences ship alongside them in assets/fonts/.

   Jost 300 is declared but unused by this page. An unreferenced @font-face is
   never fetched, so it costs nothing until something asks for it. */

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/prata-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --bg: #0D100E;
  --slogan: #F7F4ED;
  --body: #B9C0BA;
  --stamp: #7C8781;
  --gold: #C6A560;
  --link-hover: #F2EEE6;

  --font-display: 'Prata', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

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

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--gold);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
}

a:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* ── Layout ───────────────────────────────────────────────────────────────
   The stack takes `margin-block: auto`, which absorbs the free space evenly
   above and below it. That centres it at any viewport height and drops the
   stamp to the bottom, and when the content is taller than the viewport it
   simply scrolls instead of colliding with the stamp — which an absolutely
   positioned footer would do in landscape on a phone. */

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 32px 40px;
}

.stack {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  max-width: 620px;
}

/* ── Marks ──────────────────────────────────────────────────────────────── */

.wordmark {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}

.rule {
  width: 44px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

/* ── Type ─────────────────────────────────────────────────────────────────
   The artboard sets the slogan at a flat 46px. That is the desktop size and it
   is the clamp ceiling here; below ~541px it scales down so `receção` never has
   to break mid-word at 390px. */

.slogan {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 8.5vw, 46px);
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--slogan);
  text-align: center;
  text-wrap: pretty;
}

.lede {
  margin: 0;
  max-width: 520px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--body);
  text-align: center;
  text-wrap: pretty;
}

.stamp {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stamp);
  text-align: center;
}

/* ── 404 ──────────────────────────────────────────────────────────────────
   Same furniture, quieter. The line sits at the lede's size, not the slogan's:
   an error is not the headline. */

.notice {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.3;
  color: var(--slogan);
  text-align: center;
  text-wrap: pretty;
}

.back {
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}