/* mishkan theme: the youth-camp palette as colour tokens (used by UnoCSS via uno.config.ts), the self-hosted
   fonts, and the few rules utilities can't express. Loaded after uno.css, so these win over its reset. The dark
   theme redefines the same tokens twice: for the OS preference and for data-theme="dark". */
@font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* field notebook by day */
  --c-paper: #edf0e8;
  --c-panel: #e2e7dc;
  --c-card: #f6f8f2;
  --c-ink: #1b241f;
  --c-muted: #56645b;
  --c-rule: #cbd4c7;
  --c-pine: #1e6a57;
  --c-pine-soft: #d3e5db;
  --c-ember: #c2410c;
  --c-warn: #8a3300;
  --c-warn-bg: #f6e3d2;
  --c-sky-day: #d1a22e;
  --c-sky-dusk: #d8672c;
  --c-sky-night: #34427e;
  --c-sky-dawn: #c07391;
  /* household colours: the example's Family 1–4 first, each checked against --c-card in both themes */
  --c-hh-0: #c2410c;
  --c-hh-1: #9b7100;
  --c-hh-2: #7b4a9f;
  --c-hh-3: #2b6390;
  --c-hh-4: #b0305c;
  --c-hh-5: #5c7a1a;
  --c-hh-6: #8a5a2b;
  --c-hh-7: #4b5563;

  --f-display: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper: #111714; --c-panel: #161e1a; --c-card: #1b2420; --c-ink: #e3eae4; --c-muted: #9aa8a0; --c-rule: #29342e;
    --c-pine: #6cc9ad; --c-pine-soft: #1d3a31; --c-ember: #ff8a4c; --c-warn: #ffb487; --c-warn-bg: #3a2417;
    --c-sky-day: #e2bf55; --c-sky-dusk: #f08a4f; --c-sky-night: #6474c4; --c-sky-dawn: #e39bb7;
    --c-hh-0: #ff8a4c; --c-hh-1: #e6bf45; --c-hh-2: #c49ce8; --c-hh-3: #7fb5e3;
    --c-hh-4: #f08bb0; --c-hh-5: #b5d36a; --c-hh-6: #d9a77a; --c-hh-7: #a7b1c2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-paper: #111714; --c-panel: #161e1a; --c-card: #1b2420; --c-ink: #e3eae4; --c-muted: #9aa8a0; --c-rule: #29342e;
  --c-pine: #6cc9ad; --c-pine-soft: #1d3a31; --c-ember: #ff8a4c; --c-warn: #ffb487; --c-warn-bg: #3a2417;
  --c-sky-day: #e2bf55; --c-sky-dusk: #f08a4f; --c-sky-night: #6474c4; --c-sky-dawn: #e39bb7;
  --c-hh-0: #ff8a4c; --c-hh-1: #e6bf45; --c-hh-2: #c49ce8; --c-hh-3: #7fb5e3;
  --c-hh-4: #f08bb0; --c-hh-5: #b5d36a; --c-hh-6: #d9a77a; --c-hh-7: #a7b1c2;
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font: 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--c-pine); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-pine); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }
img { max-width: 100%; }
code { font: 13px/1.4 var(--f-mono); background: var(--c-panel); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--c-pine); color: var(--c-card); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip-link:focus { left: 8px; }

.site-header { background: color-mix(in srgb, var(--c-card) 88%, transparent); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
.brand { font: 400 24px/1 var(--f-display); letter-spacing: .01em; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: var(--c-ink); text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 14px; }
.nav-link:hover, .nav-on { background: var(--c-pine-soft); }
.nav-on { font-weight: 600; }
.nav-who { color: var(--c-muted); font-size: 14px; padding: 0 6px; }

.flash { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--c-pine-soft); color: var(--c-ink); border: 1px solid color-mix(in srgb, var(--c-pine) 40%, transparent); }
.eyebrow { font: 500 12px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); }
.field-error { color: var(--c-warn); font-size: 14px; margin: 6px 0 0; }
.field[aria-invalid="true"] { border-color: var(--c-warn); }

.display { font: 400 clamp(38px, 7vw, 58px)/1.05 var(--f-display); letter-spacing: -.005em; text-wrap: balance; }
.page-h { font: 400 30px/1.15 var(--f-display); text-wrap: balance; }
.section-h { font: 400 26px/1.2 var(--f-display); margin-top: 0; margin-bottom: 12px; }
.subject-h { font: 400 20px/1.3 var(--f-display); }
.lede { font-size: 18px; color: var(--c-muted); max-width: 66ch; }
.hero { padding: 24px 0 8px; }
.verse { font: italic 15px/1.5 var(--f-display); }
.hint { font-weight: 400; color: var(--c-muted); font-size: 13px; }
.code-field { font: 500 22px/1 var(--f-mono); letter-spacing: .3em; text-align: center; }
.share-url { font: 13px/1.4 var(--f-mono); overflow-wrap: anywhere; }

.tbl { overflow-x: auto; border: 1px solid var(--c-rule); border-radius: 14px; background: var(--c-card); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-rule); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.field-sm { min-height: 34px !important; padding: 4px 8px !important; font-size: 14px !important; width: auto !important; max-width: 220px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }