/* Warm — the default theme (spec 01 §3.2).
   Bases: ink #2E2218 · paper #FAF5EE · accent (terracotta) #96421F.
   Literal colours appear only here: theme files are where tokens are defined. */
:root {
  /* colour — derived from ink #2E2218, paper #FAF5EE, accent #96421F */
  --c-bg:         #FAF5EE;
  --c-surface:    #FFFFFF;
  --c-ink:        #2E2218;
  --c-ink-soft:   #675D54;  /* ink mixed 28% toward paper */
  --c-accent:     #96421F;
  --c-accent-ink: #FAF5EE;
  --c-band-bg:    #2E2218;
  --c-band-ink:   #FAF5EE;
  --c-line:       #D5CFC7;  /* ink mixed 82% toward paper */

  /* type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.25rem;
  --fs-lg:   clamp(1.5rem, 1.1rem + 1.8vw, 1.875rem);
  --fs-xl:   clamp(2rem, 1.4rem + 2.7vw, 2.75rem);
  --lh-tight: 1.2;
  --lh-base:  1.6;

  /* space, radius, shadow, measure */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 1rem;
  --sp-4: 1.5rem;   --sp-5: 2.75rem; --sp-6: 4.5rem;
  --radius: 0.5rem;
  --shadow: 0 1px 3px rgb(46 34 24 / 0.08), 0 4px 16px rgb(46 34 24 / 0.06);
  --measure: 42rem;
  --content-max: 70rem;
}

/* Base element styles — spec 01 §4.4.
   The second layer of styles.css: theme tokens → this → shapes → shell →
   each used section's scoped CSS. Tokens first so everything below can read
   them; sections last so a section rule wins any tie at equal specificity.

   This file is ours and is not governed by the section property allowlist
   (spec 01 §1.5) — the allowlist governs sections, because sections are the
   surface that grows. */

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

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  overflow-wrap: break-word;
}

p, ul, ol, dl { margin: 0; }

a { color: var(--c-accent); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* the one button style */
.btn {
  display: inline-block;
  background-color: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 600;
  text-decoration: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
}
.btn:hover { text-decoration: underline; }

/* rhythm inside sanitised richtext (about body, faq answers) */
.rich > * + * { margin-top: var(--sp-3); }
.rich ul, .rich ol { padding-left: var(--sp-4); }

/* The four layout shapes — spec 01 §2.3, shipped verbatim.
   `stack` · `split` · `card-grid` · `band`, and nothing else may be invented.
   The shapes live once, here; a section never redefines its shape's layout,
   only what sits inside the slots the shape provides. Themes never touch this
   CSS — they act on it only through tokens. */

/* ---- shared frame -------------------------------------------------- */
.shape-stack, .shape-split, .shape-card-grid, .shape-band {
  padding-block: var(--sp-5);
  padding-inline: var(--sp-3);
}
.shape-stack > .inner,
.shape-split > .inner,
.shape-card-grid > .inner,
.shape-band > .inner {
  margin-inline: auto;
  max-width: var(--content-max);
}

/* ---- stack: one centred prose column ------------------------------- */
.shape-stack > .inner {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---- split: text beside media -------------------------------------- */
.shape-split > .inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
}
.shape-split .text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}
@media (min-width: 40em) {
  .shape-split > .inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }
  /* media pane elided (media_slot: collapse)? text takes the full row */
  .shape-split > .inner > :only-child {
    grid-column: 1 / -1;
    max-width: var(--measure);
  }
}

/* media_slot: required — the photo's stand-in, not a placeholder.
   The renderer emits <div class="media panel"></div> in place of the
   <img> when the image region is empty; the box is the same 4:3 as a
   photograph, so the layout does not move when one is added later. */
.shape-split .media.panel {
  aspect-ratio: 4 / 3;
  background: var(--c-band-bg);
  border-radius: var(--radius);
}

/* ---- card-grid: heading plus a grid of cards ------------------------ */
.shape-card-grid > .inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.shape-card-grid .cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.shape-card-grid .card {
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
@media (min-width: 40em) {
  .shape-card-grid .cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60em) {
  .shape-card-grid .cards { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- band: full-bleed strip ----------------------------------------- */
.shape-band {
  background-color: var(--c-band-bg);
  color: var(--c-band-ink);
  padding-block: var(--sp-6);
}
.shape-band a { color: var(--c-band-ink); }
.shape-band :focus-visible { outline-color: var(--c-band-ink); }
.shape-band > .inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* The image belt-and-braces rule — spec 01 §6.3. The fourth layer of styles.css
   (spec 03 §1.2 step 4). Load-bearing, not decoration: the v0.1 pipeline stores
   uncropped pixels (§6.2), and this rule is what holds every photo to the
   section's declared 4:3 box — centre-covered, never distorted, zero layout
   shift. It lives with the shapes so section CSS stays token-and-slot only. */

.shape-split .media img,
.shape-card-grid .card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Shell CSS — spec 01 §4.3, complete. The fifth layer of styles.css
   (spec 03 §1.2 step 4): tokens → base → shapes → image rule → this → sections.
   Renderer-owned, never a section's to restyle. */

/* ---- skip link ------------------------------------------------------ */
.skip {
  position: absolute;
  top: -100%;
  left: var(--sp-3);
  background-color: var(--c-surface);
  color: var(--c-ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
}
.skip:focus { top: var(--sp-2); }

/* ---- header ---------------------------------------------------------- */
.shell-header {
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-3);
}
.shell-header .inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}
.brand {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
}
.shell-header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.shell-header nav a {
  color: var(--c-ink);
  text-decoration: none;
  padding-block: var(--sp-1);
}
.shell-header nav a:hover { text-decoration: underline; }
.shell-header nav a[aria-current="page"] {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ---- footer ----------------------------------------------------------- */
.shell-footer {
  background-color: var(--c-band-bg);
  color: var(--c-band-ink);
  padding: var(--sp-5) var(--sp-3);
  margin-top: var(--sp-6);
}
.shell-footer .inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.shell-footer a { color: var(--c-band-ink); }
.shell-footer :focus-visible { outline-color: var(--c-band-ink); }
.foot-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0;
}
.foot-contact, .foot-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.foot-addr { font-style: normal; font-size: var(--fs-sm); }
.foot-addr span { display: block; }
.foot-socials { font-size: var(--fs-sm); }

.s-hero { padding-block: var(--sp-6); }
.s-hero .heading { font-size: var(--fs-xl); }
.s-hero .lede {
  font-size: var(--fs-md);
  color: var(--c-ink-soft);
  max-width: var(--measure);
}
.s-hero img { border-radius: var(--radius); }