/* Shared look for every page: warm paper, ink, terracotta. Phone first.
   Colours are tokens so dark mode is one block. */

/* Fraunces (SIL Open Font License, fonts/Fraunces-OFL.txt), Latin subset,
   weights 400-600 in one variable file. Served from this site: no font
   request ever leaves it. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light dark;
  --paper: #FBF6EE;
  --card: #FFFFFF;
  --ink: #2B2420;
  --muted: #85766A;
  --line: #EFE6D8;
  --line-strong: #E2D6C4;
  --accent: #B4532A;
  --accent-ink: #FFFFFF;
  --accent-soft: #F6E3D8;
  --btn: #2B2420;            /* the one dark button per screen */
  --btn-ink: #FBF6EE;
  --ok: #3F7D4E;
  --ok-bg: #E3F0E5;
  --warn-bg: #FBEFD9;
  --warn-ink: #7A4B0B;
  --danger: #B23A2E;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1C1814;
    --card: #26201B;
    --ink: #F1E8DC;
    --muted: #A8998A;
    --line: #3A322B;
    --line-strong: #4A4038;
    --accent: #E58A5E;
    --accent-ink: #1C1814;
    --accent-soft: #3D2A20;
    --btn: #F1E8DC;
    --btn-ink: #1C1814;
    --ok: #7FC08D;
    --ok-bg: #1F3324;
    --warn-bg: #3A2C14;
    --warn-ink: #F2C77A;
    --danger: #F08070;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.6rem; margin: 0 0 6px; }
h2 { font-size: 1.25rem; margin: 0 0 10px; }
h3 { font-size: 1.1rem; margin: 0 0 8px; }
a { color: var(--accent); }
[hidden] { display: none !important; }
/* Visually hidden but reachable by keyboard and screen readers (file inputs inside labels). */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }

.brand { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
p { margin: 8px 0; }

input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 9px 11px; min-height: 42px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-within {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; vertical-align: -3px; }
::placeholder { color: var(--muted); opacity: 0.8; }

button, .btn {
  font: inherit; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 8px 14px; min-height: 42px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .btn:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { filter: brightness(1.05); }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button[disabled] { opacity: 0.55; cursor: default; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 0.92rem; }

details > summary { cursor: pointer; color: var(--muted); font-size: 0.92rem; padding: 2px 0; }
details > summary:hover { color: var(--ink); }

dialog { width: min(520px, calc(100% - 24px)); border: 1px solid var(--line-strong); border-radius: 16px; padding: 18px;
         background: var(--card); color: var(--ink); }
dialog::backdrop { background: #1c18148c; }