@font-face {
  font-family: 'Lora';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/lora-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Lora';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/lora-700.woff2") format("woff2");
}
/* Workshop — the site's tokens. Change one here and the whole
   site follows; nothing below sets a value of its own. */
:root {
  --paper: #f4f4f0;
  --ink: #1a1a1a;
  --muted: #66665e;
  --accent: #0e7490;
  --accent-ink: #ffffff;
  --wash: color-mix(in srgb, var(--accent) 9%, var(--paper));
  /* Over a photograph: white words, a dark wash — the one pair
     that reads on any picture, declared here like every colour. */
  --over-picture-ink: #ffffff;
  --over-picture-mark-ink: #111111;
  --over-picture-wash: rgb(0 0 0 / var(--dark, 0.45));
  --line: color-mix(in srgb, var(--ink) 18%, var(--paper));
  --heading-font: 'Lora', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --body-font: 'Lora', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --radius: 12px;
  --radius-small: 6px;
  --gap: clamp(0.66rem, 2.5vw, 1.00rem);
  --band: clamp(1.33rem, 5vw, 2.00rem);
  --page: 68rem;
  --measure: 66ch;
}

/* The machine is set to dark, so the site is dark. Nothing to
   switch on, nothing for the child to maintain. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161614;
    --ink: #ecece6;
    --muted: #98988e;
    --accent: #22d3ee;
    --accent-ink: #111111;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.1rem);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  line-height: 1.15;
  text-wrap: balance;
}

h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); }

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

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* Every band is the same centred column, so the page reads as one
   thing however many bands are stacked in it. */
.site-head, main, footer {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* THE HEADER, three ways — the theme picks one by class. */
.site-head {
  padding-block: var(--gap);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--gap);
}

.site-name {
  font-family: var(--heading-font);
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.tagline { margin: 0; color: var(--muted); }

.site-head nav {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) * 0.75);
}

.site-head nav a {
  text-decoration: none;
  color: var(--muted);
  /* Tap room: these are the links every iPhone visitor uses most. */
  padding-block: 0.55rem;
}

.site-head nav a:hover,
.site-head nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.head-centered .site-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.head-centered .site-head nav {
  margin-inline-start: 0;
  justify-content: center;
}

.head-minimal .site-head { padding-block: calc(var(--gap) * 0.5); }
.head-minimal .site-name { font-size: 1.05rem; }
.head-minimal .site-head nav a { font-size: 0.92rem; }

main { padding-block: var(--band); padding-top: calc(var(--band) * 0.5); }

.page-title { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-block: 0 var(--band); }

/* BANDS. The wrapper owns spacing and tone; the kinds only lay
   their own content out. */
.band { margin-block-end: var(--band); position: relative; }

/* STICKERS — the fridge magnets. Pinned in % of their band on the
   logical axes, so they ride to any screen and mirror with
   Hebrew. Above every background and wash (z 3), never catching
   the reader's text-selection. */
.sticker {
  position: absolute;
  translate: -50% -50%;
  rotate: var(--tilt, 0deg);
  z-index: 3;
  line-height: 1.15;
  white-space: nowrap;
  font-family: var(--heading-font);
  font-weight: 700;
  user-select: none;
  text-shadow: 0 1px 0 var(--paper);
  transition: rotate 0.2s ease, transform 0.2s ease;
}

.sticker:hover { rotate: 0deg; transform: scale(1.12); }

/* H7 — THE WRITER'S HAND: a piece's own letters. The colour,
   size and alignment ride inline on the piece; only the family
   needs a rule, because a stack is too long to inline well. */
[data-say="clean"] { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
[data-say="bookish"] { font-family: 'Lora', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; }
[data-say="friendly"] { font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Comic Sans MS', system-ui, sans-serif; }
[data-say="grand"] { font-family: 'Playfair Display', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; }
[data-say="typewriter"] { font-family: 'Courier Prime', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace; }

/* H6 — THE STAGE. A band where a hand has put pieces asks its
   OWN width — never the window's — whether there is room to
   honour that. Wide: exactly where the hand left them. Narrow: a
   plain stack in reading order, which is the whole phone promise
   kept in the one place free placement could have broken it.

   This is the first query in the whole stylesheet, and it is a
   CONTAINER query on purpose: a viewport breakpoint can be got
   wrong by a sidebar, a preview pane or a printed page, and this
   one cannot — it asks the band itself. */
.band.stage {
  container-type: inline-size;
  position: relative;
}

@container (min-width: 34rem) {
  [data-placed] {
    position: absolute;
    inset-inline-start: var(--spot-x, 50%);
    inset-block-start: var(--spot-y, 50%);
    inline-size: var(--spot-w, auto);
    max-inline-size: 90%;
    margin: 0;
    rotate: var(--spot-turn, 0deg);
    z-index: 3;
  }
}

/* A stage keeps room for what floats above it, so pieces do not
   hang off the bottom of a band that has nothing else in it. */
.band.stage { min-block-size: 16rem; }

/* G7 — THE PICTURE STUDIO. A crop is a FRAME, not a knife: the
   child's file is never rewritten, so every choice here can be
   undone tomorrow. object-fit keeps the picture undistorted and
   object-position decides which part survives the frame. */
.cut-square, .cut-wide, .cut-tall, .cut-circle {
  inline-size: 100%;
  object-fit: cover;
}

.cut-square { aspect-ratio: 1; }
.cut-wide { aspect-ratio: 16 / 9; }
.cut-tall { aspect-ratio: 4 / 5; }
.cut-circle { aspect-ratio: 1; border-radius: 50%; }

.look-bright { filter: brightness(1.15) saturate(1.05); }
.look-warm { filter: sepia(0.35) saturate(1.3) hue-rotate(-12deg); }
.look-cool { filter: saturate(1.1) hue-rotate(14deg) brightness(1.03); }
.look-grey { filter: grayscale(1) contrast(1.08); }
.look-faded { filter: saturate(0.7) brightness(1.08) contrast(0.88); }
.look-punchy { filter: saturate(1.5) contrast(1.15); }

/* H4 — THE TRICKS. The checkbox is the state; these rules are the
   two sides of it. Adjacent selectors only (+), so one sticker's
   trick never reaches the next one's. */
.trick {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  margin: 0;
}

.sticker[for] { cursor: pointer; }
.trick:focus-visible + .sticker { outline: 3px solid var(--accent); outline-offset: 4px; }

.trick:checked + .do-grow { transform: scale(1.8); }
.trick:checked + .do-spin { rotate: calc(var(--tilt, 0deg) + 360deg); }
.trick:checked + .do-vanish { transform: scale(0); opacity: 0; }
.trick:checked + .do-reveal { transform: scale(1.15); }

.secret {
  position: absolute;
  translate: -50% 1.6em;
  z-index: 4;
  max-inline-size: min(60%, 22rem);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-small);
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  text-align: center;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.trick:checked + .sticker + .secret { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: no-preference) {
  .sticker[for] { transition: transform 0.25s ease, rotate 0.5s ease, opacity 0.25s ease; }
  .secret { transition: opacity 0.2s ease, transform 0.2s ease; }
  .trick:checked + .do-wobble { animation: xol-wobble 0.5s ease; }
}

@keyframes xol-wobble {
  0%, 100% { rotate: var(--tilt, 0deg); }
  25% { rotate: calc(var(--tilt, 0deg) - 14deg); }
  75% { rotate: calc(var(--tilt, 0deg) + 14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sticker { transition: none; }
  .sticker:hover { rotate: var(--tilt, 0deg); transform: none; }
  /* The trick still WORKS without motion — it just arrives at
     once. A press must always do something. */
  .trick:checked + .do-grow:hover { transform: scale(1.8); }
}

.band.tone-tinted, .band.tone-accent {
  border-radius: var(--radius);
  padding: var(--band) var(--gap);
}

.band.tone-tinted { background: var(--wash); }

.band.tone-accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.band.tone-accent a,
.band.tone-accent h2, .band.tone-accent h3,
.band.tone-accent figcaption, .band.tone-accent cite {
  color: var(--accent-ink);
}

/* THE BIG OPENING, as a card or edge to edge — the theme's call.
   Edge to edge escapes the column with the margin trick, so it
   needs no markup of its own. */
.hero {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  padding: clamp(2rem, 9vw, 5rem) clamp(1.25rem, 5vw, 3rem);
  position: relative;
  overflow: hidden;
}

.hero-full .hero {
  border-radius: 0;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gap), calc(50vw - var(--page) / 2));
}

.hero h1 { margin: 0; font-size: clamp(2.1rem, 7vw, 4.2rem); }

.hero .lead {
  margin-block-end: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  max-width: var(--measure);
}

/* A photograph behind the words, and a wash over it so the words
   survive any picture a child chooses. */
.hero .hero-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.hero.has-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.hero .hero-front { position: relative; z-index: 1; }
.hero.has-picture .hero-front { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

.words p, .quote blockquote, .picture-words .beside p { max-width: var(--measure); }

/* PICTURE AND WORDS: side by side where both fit, stacked where
   they cannot — min(100%, 18rem) is the whole phone story. */
.picture-words {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--gap);
  align-items: center;
}

.picture-words figure { margin: 0; }
.picture-words.flipped figure { order: 1; }
.picture-words figcaption {
  margin-block-start: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* THE GALLERY: as many columns as fit, never narrower than 14rem,
   one on a phone — no media query anywhere. */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--gap);
}

.gallery figure { margin: 0; }

.gallery figcaption {
  margin-block-start: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* CARDS: the same grid idea, dressed as tiles. */
.cardgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap);
}

.card {
  background: var(--wash);
  border-radius: var(--radius);
  padding: var(--gap);
  height: 100%;
}

.tone-tinted .card, .tone-accent .card { background: var(--paper); color: var(--ink); }
.tone-accent .card a { color: var(--accent); }
.tone-accent .card h3 { color: var(--ink); }

.card img { margin-block-end: calc(var(--gap) * 0.75); border-radius: var(--radius-small); }
.card h3 { margin-block: 0 0.4rem; }
.card p { margin-block: 0; font-size: 0.95rem; }
.card p + p { margin-block-start: 0.5rem; }

/* A BIG QUOTE. */
.quote blockquote {
  margin: 0;
  border-inline-start: 4px solid var(--accent);
  padding-inline-start: var(--gap);
}

.quote p {
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  line-height: 1.35;
  margin-block: 0;
}

.quote cite {
  display: block;
  margin-block-start: 0.75rem;
  color: var(--muted);
  font-style: normal;
  font-size: 1rem;
}

/* LINKS as buttons — tall enough for fingers. */
.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.linklist a {
  display: inline-block;
  padding: 0.65rem 1.15rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius-small);
  text-decoration: none;
}

.linklist a:hover { background: var(--accent); color: var(--accent-ink); }

/* G2 — THE DRESS: each rule exists only on bands a hand dressed.
   A band's OWN colour: same box as the toned bands, its ink
   measured, its links and marks made readable on it. */
.band.tone-own {
  border-radius: var(--radius);
  padding: var(--band) var(--gap);
  background: var(--own-bg);
  color: var(--own-ink);
}

.band.tone-own a, .band.tone-own h1, .band.tone-own h2,
.band.tone-own h3, .band.tone-own summary::after,
.band.tone-own .figures strong, .band.tone-own .quote p {
  color: inherit;
}

.band.tone-own.grad {
  background: linear-gradient(135deg, var(--own-bg), var(--own-bg2));
}

/* G5 — QUIET PATTERNS, drawn from the band's own ink. Pure CSS:
   nothing to load, and they re-ink themselves when the colour
   changes. */
.band.pat-dots { background-image:
  radial-gradient(color-mix(in srgb, currentColor 16%, transparent) 1.5px,
    transparent 1.5px);
  background-size: 18px 18px; }
.band.pat-lines { background-image:
  repeating-linear-gradient(45deg,
    color-mix(in srgb, currentColor 10%, transparent) 0 2px,
    transparent 2px 14px); }
.band.pat-grid { background-image:
  linear-gradient(color-mix(in srgb, currentColor 10%, transparent) 1px,
    transparent 1px),
  linear-gradient(90deg,
    color-mix(in srgb, currentColor 10%, transparent) 1px,
    transparent 1px);
  background-size: 22px 22px; }
.band.pat-checks { background-image:
  repeating-conic-gradient(
    color-mix(in srgb, currentColor 8%, transparent) 0 25%,
    transparent 0 50%);
  background-size: 26px 26px; }
.band[class*="pat-"]:not(.tone-own):not(.tone-tinted):not(.tone-accent) {
  border-radius: var(--radius);
  padding: var(--band) var(--gap);
}
.band.tone-own.grad[class*="pat-"] { background-blend-mode: normal; }

/* G5 — AN ITEM'S EMOJI, worn big above its words. */
.item-icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1.2;
  margin-block-end: 0.35rem;
}
.align-center .item-icon { margin-inline: auto; }
summary .item-icon {
  display: inline;
  font-size: 1.2em;
  margin-inline-end: 0.4rem;
}

/* A step's emoji sits smaller, over its heading, on the left with
   everything else. */
.steplist .item-icon { font-size: 1.6rem; margin-block-end: 0.1rem; }

.band.tone-own mark { background: var(--paper); color: var(--ink); }
.band.tone-own .card, .band.tone-own .face img { background: var(--paper); color: var(--ink); }
.band.tone-own .bigbutton { background: var(--own-ink); color: var(--own-bg); }
.band.tone-own .steplist li::before { background: var(--own-ink); color: var(--own-bg); }
.band.tone-own .moments { border-inline-start-color: currentColor; }
.band.tone-own .moments li::before { background: currentColor; }
.band.tone-own blockquote { border-inline-start-color: currentColor; }

/* A PICTURE BEHIND THE BAND, washed dark enough to read on — the
   hero's trick, for everyone. */
.band.has-back {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: var(--band) var(--gap);
  color: var(--over-picture-ink);
}

.band.has-back > .band-back {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  z-index: 0;
}

.band.has-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--over-picture-wash);
  z-index: 1;
}

.band.has-back > *:not(.band-back) { position: relative; z-index: 2; }
.band.has-back h1, .band.has-back h2, .band.has-back h3,
.band.has-back a, .band.has-back .figures strong { color: inherit; }
.band.has-back .moments { border-inline-start-color: currentColor; }
.band.has-back .moments li::before,
.band.has-back .steplist li::before {
  background: var(--over-picture-ink);
  color: var(--over-picture-mark-ink);
}
.band.has-back .card {
  background: color-mix(in srgb, var(--over-picture-ink) 92%, transparent);
  color: var(--ink);
}

/* WORDS DOWN THE MIDDLE. Center takes no side, so the Hebrew
   mirror is untouched. */
.band.align-center { text-align: center; }
.band.align-center .steplist li { text-align: start; }
.band.align-center .moments { text-align: start; }
.band.align-center .linklist, .band.align-center .buttonrow { justify-content: center; }
.band.align-center .quote blockquote { border-inline-start: 0; padding-inline-start: 0; }

/* THIS BAND'S OWN AIR. */
.band.air-snug { padding-block: calc(var(--gap) * 0.5); margin-block-end: calc(var(--band) * 0.5); }
.band.air-airy { padding-block: calc(var(--band) * 1.6); margin-block-end: calc(var(--band) * 1.4); }

/* THE BACKGROUND RUNS EDGE TO EDGE, the words stay in the column —
   the hero-full trick, offered to any dressed band. */
.band.edge {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gap), calc(50vw - 50%));
  border-radius: 0;
}

/* THE SHAPE OF THIS BAND'S PICTURES. */
.band.pics-rounded img { border-radius: calc(var(--radius-small) + 14px); }
.band.pics-circle .gallery img,
.band.pics-circle .card img,
.band.pics-circle figure img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* WORDS IN COLUMNS: the browser's own columns, so they become one
   column on a phone with no media query asked. */
.columned { columns: min(100%, 20rem) 3; column-gap: var(--gap); }
.columned p { margin-block: 0 0.9rem; break-inside: avoid; }

/* PEOPLE: round faces, names under them. */
.facegrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--gap);
  text-align: center;
}

.face img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  max-inline-size: 8rem;
  margin-inline: auto;
  margin-block-end: 0.6rem;
}

.face h3 { margin-block: 0 0.2rem; font-size: 1.05rem; }
.face p { margin-block: 0; color: var(--muted); font-size: 0.9rem; }
.tone-accent .face p { color: inherit; opacity: 0.85; }

/* STEPS: the numbers are the list's own, so deleting one in the
   middle renumbers the rest by itself. */
.steplist {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--gap);
}

.steplist li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  align-items: start;
}

/* Every child in the words column, the number alone in its own —
   said explicitly, because auto-placement with an emoji present
   was measured putting the heading IN the number column. */
.steplist li > * { grid-column: 2; }

.steplist li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 3;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--heading-font);
  font-weight: 700;
}

.tone-accent .steplist li::before { background: var(--paper); color: var(--ink); }
.steplist h3 { margin-block: 0.3rem 0.2rem; }
.steplist p { margin-block: 0; }

/* A TIMELINE: one line down the side, a dot at every moment. */
.moments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  border-inline-start: 2px solid var(--line);
  padding-inline-start: var(--gap);
}

.moments li { position: relative; }

.moments li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--gap) * -1 - 6px);
  inset-block-start: 0.5rem;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.tone-accent .moments { border-inline-start-color: currentColor; }
.tone-accent .moments li::before { background: currentColor; }
.moments h3 { margin-block: 0 0.2rem; font-size: 1rem; color: var(--muted); }
.tone-accent .moments h3 { color: inherit; opacity: 0.8; }
.moments p { margin-block: 0; }

/* BIG NUMBERS: the facts worth shouting. */
.figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--gap);
  text-align: center;
}

.figures strong {
  display: block;
  font-family: var(--heading-font);
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1;
  color: var(--accent);
}

.tone-accent .figures strong { color: inherit; }
.figures span { display: block; margin-block-start: 0.3rem; color: var(--muted); }
.tone-accent .figures span { color: inherit; opacity: 0.85; }

/* QUESTIONS: <details> opens and shuts with no script at all. */
details {
  border-block-end: 1px solid var(--line);
  padding-block: 0.9rem;
}

summary {
  cursor: pointer;
  font-family: var(--heading-font);
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
details[open] summary::after { content: "−"; }
.tone-accent summary::after { color: inherit; }
details p { margin-block: 0.7rem 0; }

/* A STRIP: one loud thing, thin. */
.banner {
  padding-block: calc(var(--gap) * 1.2);
  text-align: center;
}

.banner strong {
  display: block;
  font-family: var(--heading-font);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
}

.banner p { margin-block: 0.4rem 0; }

/* BUTTONS: the same links, thumb-sized. */
.buttonrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

.bigbutton {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--radius-small);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-family: var(--heading-font);
  font-size: 1.1rem;
}

.bigbutton:hover { filter: brightness(1.1); }
.tone-accent .bigbutton { background: var(--paper); color: var(--ink); }

/* A HIGHLIGHTED WORD: the site's own colour, washed light enough
   to write on. On the colour itself, flip to paper so it stays a
   highlight instead of vanishing. */
mark {
  background: color-mix(in srgb, var(--accent) 26%, var(--paper));
  color: var(--ink);
  border-radius: 0.2em;
  padding-inline: 0.15em;
}

.tone-accent mark { background: var(--paper); color: var(--ink); }

p a { color: var(--accent); text-underline-offset: 0.15em; }
.tone-accent p a { color: inherit; text-decoration-thickness: 2px; }

hr { border: 0; border-top: 2px solid var(--line); margin-block: var(--band); }

footer {
  padding-block: var(--band);
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* Some children, and some grown-ups, get sick from movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* THE FEEL — gentle. All of it CSS; none of it for
   people who asked their machine for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .card, .face, .figures li, .bigbutton, .linklist a {
    transition: translate 0.16s ease, box-shadow 0.16s ease,
      rotate 0.16s ease;
  }

  .card:hover, .face:hover {
    translate: 0 -3px;
    
    box-shadow: 0 12px 26px color-mix(in srgb, var(--ink) 14%, transparent);
  }

  .figures li:hover { translate: 0 -3px; }
  .bigbutton:hover, .linklist a:hover { translate: 0 -2px; }

  .sticker:active { transform: scale(1.25); }
  summary { transition: color 0.15s ease; }

  /* Bands arrive as the reader reaches them — the scroll is the
     timeline, no script anywhere. A browser without view()
     simply shows the page standing still. */
  @supports (animation-timeline: view()) {
    main > .band {
      animation-name: xol-arrive;
      /* Scroll drives the clock; the duration is a formality some
         engines still insist on parsing. Longhands on purpose —
         the shorthand resets the timeline it is declared after. */
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes xol-arrive {
  from { opacity: 0.01; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

/* Walking between pages cross-fades instead of blinking. */
@view-transition { navigation: auto; }