/* SoSmarty shared look: fonts, ink and cream, headings, buttons. Every page links this first; design rules live in CLAUDE.md. */
@font-face { font-family: Bungee; src: url(fonts/bungee.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url(fonts/atkinson-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url(fonts/atkinson-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --ink: #1a1612; --cream: #fff4dc; --mustard: #f2c14e;
  --display: Bungee, Impact, 'Arial Black', sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { background: var(--cream); color: var(--ink); font: 18px/1.4 var(--body); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
h2 { font-size: 32px; line-height: 1.1; }

/* Buttons: ink rectangles, cream Bungee, 4px radius */
.btn {
  font: 20px/1 var(--display); background: var(--ink); color: var(--cream); border: 3px solid var(--ink);
  border-radius: 4px; padding: 12px 18px; min-height: 48px; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.line { background: transparent; color: var(--ink); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.panel-head { flex-wrap: wrap; }   /* level selects: the buttons drop under the heading on phones */