/*
 * Tabletop — the page behind the QR code.
 *
 * Every value here comes from the approved sections of the project's style
 * guide (Styling → Standards in the DIY Platform). Where a rule and a
 * temptation disagreed, the rule won; that is the point of having approved it.
 *
 *   Colour  — ink on paper, accent reserved for one thing
 *   Type    — Bricolage Grotesque display, Inter body, 16px minimum
 *   Spacing — 4px base, one radius
 *   States  — hover, focus-visible, active; focus never removed
 *   Motion  — 150ms on colour and opacity only; honours reduced-motion
 */

:root {
  --ink: #12100e;
  --paper: #faf7f2;
  --accent: #e2571e;
  --muted: #8c857b;

  /* One radius everywhere something is a surface. Two radii on one screen
     reads as two design systems. */
  --r: 14px;

  /* 4px base, and nothing between the steps. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  padding: var(--s6) var(--s4);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--paper);
  color: var(--ink);
  /* 16px minimum: this is read on phones, outdoors. */
  font: 400 16px/1.5 var(--body);
}

.card {
  width: 100%;
  max-width: 420px;
}

/* ── identity ─────────────────────────────────────────────────────────── */

.head { text-align: center; }

.mark {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--paper);
  font: 800 32px/64px var(--display);
}

h1 {
  /* Space belongs to the thing above it — margin-top only — so removing an
     element never leaves a hole. */
  margin: var(--s4) 0 0;
  font: 800 30px/1.15 var(--display);
  letter-spacing: -0.02em;
}

.tagline {
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* ── links ────────────────────────────────────────────────────────────── */

.links {
  margin-top: var(--s8);
  display: grid;
  gap: var(--s3);
}

.link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);

  border: 1px solid rgb(18 16 14 / 0.12);
  border-radius: var(--r);
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-weight: 500;

  /* Colour and opacity only. A transition on layout means a button that moves
     while you are aiming at it. */
  transition: background-color 150ms, border-color 150ms, color 150ms;
}

.link:hover { background: rgb(18 16 14 / 0.04); border-color: rgb(18 16 14 / 0.28); }

/* Focus is never removed — it is the only way some people navigate — and it is
   an outline, not a colour change, so it survives a background that happens to
   match. */
.link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.link:active { background: rgb(18 16 14 / 0.08); }

.icon {
  width: 24px;
  text-align: center;
  color: var(--accent);
  font-size: 18px;
  flex: none;
}

.label { flex: 1; min-width: 0; }

.chev {
  color: var(--muted);
  transition: color 150ms;
  flex: none;
}
.link:hover .chev { color: var(--accent); }

/* ── footer ───────────────────────────────────────────────────────────── */

.foot {
  margin-top: var(--s8);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.foot p { margin: var(--s2) 0 0; }
.quiet { font-size: 13px; opacity: 0.8; }

/* ── the rules that are not decoration ────────────────────────────────── */

/* Not a nicety: for some people motion causes nausea. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* The palette inverted, not a different design. Someone scanning this at a
   table in the evening gets the same page, legibly. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #faf7f2;
    --paper: #12100e;
  }
  .link { border-color: rgb(250 247 242 / 0.16); }
  .link:hover { background: rgb(250 247 242 / 0.06); border-color: rgb(250 247 242 / 0.32); }
  .link:active { background: rgb(250 247 242 / 0.1); }
}