/* ============================================================================
   Sourdough front page (2026-10-28).

   The world: a bakery at dawn. Flour-dusted paper, a linen proofing couche, a
   cooling rack, a recipe card, the feeding schedule chalked above the bench,
   and the shop shelves. Built on WayneUI 2.0.8 (copied from its static path,
   see index.html): tokens, Lato, container, skip link, tabs. Every rule here
   is unlayered, so it wins over WayneUI's @layer rules without !important.

   Type: Caprasimo (display, SIL OFL 1.1) and Kalam (the baker's hand, SIL OFL
   1.1), self-hosted in assets/fonts/; body is Lato from WayneUI.

   Colours: WSU green #0C5449, gold #FFCC33 (the band, and nothing behind
   white text), cream #F4F1EA, crust #B69018 (accent only, never text), plus
   bread browns for the loaves.

   File map:
     1. fonts and tokens      5. loaves (cooling rack)
     2. frame and header      6. recipe card, chalkboard
     3. hero                  7. quick start, shelves, footer, toast
     4. the proof             8. responsive  9. motion (only under .motion)
   ========================================================================== */

/* ------------------------------------------------------- 1. fonts, tokens */

@font-face {
  font-family: "Caprasimo";
  src: url("fonts/caprasimo-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --sd-green: #0c5449;
  --sd-green-deep: #073a32;
  --sd-gold: #ffcc33;
  --sd-gold-chalk: #ffd866;
  --sd-cream: #f4f1ea;
  --sd-flour: #fffdf8;
  --sd-linen: #ebe3d1;
  --sd-crust: #b69018;          /* accent only, never text */
  --sd-bake: #8a4f1f;           /* dark crust, for big shapes */
  --sd-kraft: #e8d4ab;
  --sd-wood: #9a6a3c;
  --sd-wood-dark: #744c27;
  --sd-ink: #1d2925;            /* 13:1 on cream */
  --sd-muted: #4c5853;          /* 6.6:1 on cream */
  --sd-brown-ink: #5a3a1c;      /* 8.5:1 on cream, for the hand notes */
  --sd-slate: #1f2c28;
  --sd-chalk: #eeece4;
  --sd-chalk-dim: #b3bfb9;      /* 8:1 on slate */
  --sd-term: #16231f;
  --sd-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --sd-hand: "Kalam", "Comic Sans MS", cursive;
  --sd-ease-rise: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sd-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sd-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 16px 34px -20px rgba(74, 46, 18, 0.5);
  --wsu-size-gutter: 1rem;
}

/* ------------------------------------------------------- 2. frame, header */

/* Paper with a little flour in it: a faint grain plus scattered specks. */
body {
  background-color: var(--sd-cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 63% 41%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 81% 77%, rgba(255, 255, 255, 0.8) 0 1.4px, transparent 2px);
  background-size: 220px 220px, 97px 113px, 71px 89px, 131px 101px;
  color: var(--sd-ink);
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--sd-green);
  outline-offset: 3px;
}
.chalkboard :focus-visible,
.site-footer :focus-visible,
.os__panel:focus-visible {
  outline-color: var(--sd-gold);
}

code, pre, kbd {
  font-family: var(--wsu-font-family-mono);
}
:not(pre) > code {
  font-size: 0.88em;
  padding: 0.08em 0.36em;
  border-radius: 6px;
  background: rgba(12, 84, 73, 0.08);
  color: var(--sd-green-deep);
  overflow-wrap: anywhere;
}

h1, h2, h3 {
  font-family: var(--sd-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--sd-green);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.4rem;
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sd-brown-ink);
  background: linear-gradient(transparent 62%, rgba(255, 204, 51, 0.55) 62% 88%, transparent 88%);
  padding-inline: 0.15em;
  transform: rotate(-1.5deg);
}

.site-header {
  position: relative;
  z-index: 5;
  border-bottom: 2px dashed rgba(138, 79, 31, 0.28);
  background: rgba(255, 253, 248, 0.6);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--sd-green);
}
.brand img { transition: transform 0.4s var(--sd-ease-rise); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.brand__name {
  font-family: var(--sd-display);
  font-size: 1.45rem;
}
.site-nav {
  display: flex;
  gap: 1.25rem;
  margin-inline-start: auto;
}
.site-nav a {
  color: var(--sd-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  background: linear-gradient(var(--sd-gold), var(--sd-gold)) left bottom / 0 3px no-repeat;
  transition: background-size 0.3s var(--sd-ease-out);
  padding-block: 0.25rem;
}
.site-nav a:hover { background-size: 100% 3px; }
.ticket {
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sd-ink);
  background: var(--sd-gold);
  padding: 0.15rem 0.7rem 0.1rem;
  border-radius: 4px;
  transform: rotate(3deg);
  /* a torn-ticket notch on each end */
  mask: radial-gradient(circle at 0 50%, transparent 5px, #000 5.5px) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent 5px, #000 5.5px) right / 51% 100% no-repeat;
}

.section {
  padding-block: clamp(4rem, 9vw, 7rem);
}
.section__head {
  max-width: 44rem;
  margin: 0 auto 2.75rem;
  text-align: center;
}
.section__head--left { text-align: start; margin-inline: 0; }
.section__head h2 {
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 0.75rem;
}
.section__head p:not(.eyebrow) {
  color: var(--sd-muted);
  font-size: 1.1rem;
  margin: 0;
}

/* ---------------------------------------------------------------- 3. hero */

.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6rem);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__title {
  margin: 0;
  font-size: clamp(3.6rem, 10vw, 7rem);
  line-height: 0.92;
  color: var(--sd-green);
}
.hero__letters { display: inline-flex; }
.hero__letters > span { display: inline-block; transform-origin: 50% 100%; }
.hero__tagline {
  margin: 0.6rem 0 1.25rem;
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--sd-brown-ink);
  line-height: 1.1;
}
.hero__blurb {
  max-width: 34rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--sd-ink);
  margin: 0 0 1.6rem;
}

.recipe-cmd {
  position: relative;
  max-width: 34rem;
  background: var(--sd-term);
  color: #e7ece9;
  border-radius: 14px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 14px 30px -18px rgba(7, 58, 50, 0.8);
}
.recipe-cmd__label {
  margin: 0 0 0.4rem;
  font-family: var(--sd-hand);
  font-size: 1rem;
  color: var(--sd-gold-chalk);
}
.recipe-cmd__code {
  margin: 0;
  padding-inline-end: 4.5rem;
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.recipe-cmd__code .p { color: #8fa8a1; }
.copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font: 700 0.85rem/1 var(--wsu-font-family-body);
  color: var(--sd-ink);
  background: var(--sd-gold);
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: transform 0.25s var(--sd-ease-rise);
}
.copy-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.copy-btn:active { transform: scale(0.95); }
.copy-btn--small { position: static; padding: 0.45rem 0.75rem; flex: none; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin: 1.6rem 0 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 2px solid var(--sd-green-deep);
  font: 700 1rem/1 var(--wsu-font-family-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s var(--sd-ease-rise), box-shadow 0.3s;
}
.btn--gold {
  background: var(--sd-gold);
  color: var(--sd-ink);
  box-shadow: 0 4px 0 var(--sd-green-deep);
}
.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--sd-green-deep); }
.btn--gold:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sd-green-deep); }
.hero__link {
  font-weight: 700;
  color: var(--sd-green);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
}

/* The art: a floured wooden board, the mark as a jar on it, and chalk notes. */
.hero__art {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: 1.5rem 0;
}
.board {
  position: absolute;
  inset: -9% -14% -12%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 40%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 55%),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(116, 76, 39, 0) 0 9px, rgba(116, 76, 39, 0.07) 9px 10px),
    radial-gradient(ellipse at 50% 50%, #d9b884, #c49a62 70%, #a97b46);
  box-shadow: 0 30px 50px -30px rgba(74, 46, 18, 0.6), inset 0 -8px 0 rgba(116, 76, 39, 0.25);
}
.jar {
  position: relative;
  width: min(330px, 70vw);
  margin-top: 1.5rem;
}
.jar__mark {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(7, 58, 50, 0.35));
  transform-origin: 50% 100%;
}
/* Bubbles rise out of the top of the tile, never across the mark. */
.jar__bubbles {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 100%;
  height: 90px;
  pointer-events: none;
}
.jar__bubbles i {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 2px solid rgba(12, 84, 73, 0.45);
  background: rgba(255, 253, 248, 0.85);
  opacity: 0;
}
.notes {
  position: absolute;
  left: -40%;
  top: -20%;
  width: 180%;
  height: 140%;
  max-width: none;
  pointer-events: none;
  overflow: visible;
}
.notes__arrow {
  fill: none;
  stroke: var(--sd-brown-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.note {
  position: absolute;
  margin: 0;
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--sd-brown-ink);
}
.note--risen { top: -19%; right: -36%; transform: rotate(8deg); }
.note--fed { top: 82%; left: -40%; transform: rotate(-7deg); }

.feed {
  position: relative;
  margin-top: 1.4rem;
  text-align: center;
}
.btn--feed {
  background: var(--sd-flour);
  color: var(--sd-green-deep);
  box-shadow: 0 4px 0 var(--sd-green-deep);
}
.btn--feed:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 7px 0 var(--sd-green-deep); }
.btn--feed:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sd-green-deep); }
.btn--feed__icon {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 35%, #fff, #e9dcc0);
  border: 2px solid var(--sd-green-deep);
}
.feed__count {
  margin: 0.6rem 0 0;
  font-family: var(--sd-hand);
  font-size: 1.1rem;
  color: var(--sd-brown-ink);
  min-height: 1.6em;
}

/* Falling flour: a few soft specks drifting through the hero. */
.flour {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.6px, transparent 2.2px) 0 0 / 120px 140px,
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1.1px, transparent 1.6px) 40px 60px / 90px 110px;
  opacity: 0.6;
}

/* ----------------------------------------------------------- 4. the proof */

.proof {
  position: relative;
  background-color: var(--sd-linen);
  background-image:
    repeating-linear-gradient(0deg, rgba(116, 76, 39, 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(116, 76, 39, 0.045) 0 1px, transparent 1px 5px);
  border-block: 2px dashed rgba(138, 79, 31, 0.3);
}
.proof__pin {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head stage" "log stage";
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.proof__head { grid-area: head; }
.proof__head h2 {
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  margin: 0 0 0.5rem;
  line-height: 1;
}
.proof__lede { margin: 0 0 1.5rem; color: var(--sd-muted); font-size: 1.1rem; }
.proof__stage {
  grid-area: stage;
  align-self: center;
  min-width: 0;
}
.stage {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.stage .bench { fill: #b98a55; stroke: var(--sd-wood-dark); stroke-width: 2; }
.stage .bench__flour ellipse { fill: rgba(255, 255, 255, 0.75); }
.stage .tub { opacity: 0; }
.stage .tub__back { fill: rgba(255, 255, 255, 0.38); }
.stage .tub__glass { fill: none; stroke: #6f8f87; stroke-width: 4; }
.stage .tub__shine { fill: rgba(255, 255, 255, 0.6); }
.stage .band { fill: var(--sd-gold); stroke: #c79d14; stroke-width: 1; }
.stage .ticks line { stroke: var(--sd-green); stroke-width: 3; stroke-linecap: round; }
.stage .ticks text, .stage .pinch, .stage .sloaf text {
  font-family: var(--sd-hand);
  font-weight: 700;
}
.stage .ticks text { fill: var(--sd-green); font-size: 20px; }
.stage .pinch { fill: var(--sd-brown-ink); font-size: 24px; }
.stage .dough, .stage .turned { stroke: #cfae73; stroke-width: 2.5; }
.stage .turned { opacity: 0; }
.stage .bubble { fill: #fffaf0; stroke: #d2b98d; stroke-width: 1.5; }
.stage .scraper { opacity: 0; }
.stage .scraper rect { fill: #cfd8d5; stroke: #51635e; stroke-width: 2; }
.stage .scraper .scraper__grip { fill: var(--sd-green); stroke: var(--sd-green-deep); }
.stage .sloaf text { fill: var(--sd-brown-ink); font-size: 17px; }
.score {
  fill: none;
  stroke: #f8e9c8;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}
.seeds ellipse { fill: #f4e6c4; stroke: rgba(90, 58, 28, 0.35); stroke-width: 0.6; }
.tin { fill: #33433f; stroke: #1d2925; stroke-width: 2; }

.log {
  grid-area: log;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.log__entry {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(138, 79, 31, 0.18);
  transition: opacity 0.4s, transform 0.4s var(--sd-ease-out), background-color 0.4s;
}
.log__time {
  font-family: var(--sd-hand);
  font-weight: 700;
  color: var(--sd-brown-ink);
}
.log__what { font-size: 0.98rem; line-height: 1.45; }
.log__what strong { color: var(--sd-green-deep); }

/* -------------------------------------------------- 5. loaves, cooling rack */

.loaves-section {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(76, 88, 83, 0.12) 46px 48px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(76, 88, 83, 0.12) 46px 48px);
}
.rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.loaf {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sd-flour);
  border: 1px solid rgba(138, 79, 31, 0.22);
  border-radius: 20px;
  box-shadow: var(--sd-shadow);
  overflow: hidden;
  transition: transform 0.35s var(--sd-ease-rise);
}
.loaf:hover { transform: translateY(-4px) rotate(-0.4deg); }
.loaf--baked {
  grid-column: span 2;
  flex-direction: row;
  border: 2px solid var(--sd-green);
}
.loaf__score {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 1.2rem 1rem 0.8rem;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(255, 255, 255, 0.95) 0 30%, rgba(255, 255, 255, 0) 62%),
    var(--sd-kraft);
  cursor: pointer;
  color: var(--sd-brown-ink);
}
.loaf--baked .loaf__score { width: 44%; flex: none; border-right: 2px dashed rgba(138, 79, 31, 0.3); }
.loaf__score svg { width: min(100%, 220px); height: auto; overflow: visible; }
.loaf--baked .loaf__score svg { width: min(100%, 300px); }
.loaf__score svg > path:first-of-type,
.loaf__score svg > path:nth-of-type(1) { transition: transform 0.5s var(--sd-ease-rise); transform-origin: 50% 80%; transform-box: fill-box; }
.loaf__score:hover svg > path:nth-of-type(1) { transform: scale(1.04, 1.07); }
.loaf__shadow { fill: rgba(74, 46, 18, 0.25); }
.dust { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 10; stroke-linecap: round; }
.loaf__hint {
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.1rem;
}
.loaf__hint::before { content: "✎ "; }
.loaf.is-scored .loaf__hint::before { content: "✓ "; }
.loaf__body { padding: 1rem 1.25rem 1.35rem; min-width: 0; flex: 1; }
.loaf__kind {
  margin: 0;
  font-family: var(--sd-hand);
  font-weight: 700;
  color: var(--sd-brown-ink);
}
.loaf h3 { margin: 0.1rem 0 0.4rem; font-size: 1.5rem; line-height: 1.1; }
.loaf--baked h3 { font-size: 2.2rem; }
.loaf__label { margin: 0 0 0.6rem; color: var(--sd-muted); }
.tag {
  display: inline-block;
  font: 700 0.82rem/1 var(--wsu-font-family-body);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
}
.tag--baked { background: var(--sd-green); color: #fff; }
.tag--soon { background: transparent; color: var(--sd-brown-ink); border: 2px dashed rgba(90, 58, 28, 0.55); }
.cmd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.6rem 0.6rem 0.9rem;
  background: var(--sd-term);
  border-radius: 12px;
}
.cmd code {
  flex: 1;
  min-width: 0;
  background: none;
  color: #e7ece9;
  padding: 0;
  font-size: 0.9rem;
}
.cmd code::before { content: "$ "; color: #8fa8a1; }
.crumb {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s var(--sd-ease-out), opacity 0.4s;
}
.crumb > * { min-height: 0; }
.crumb__title {
  margin: 1rem 0 0.35rem;
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sd-brown-ink);
}
.crumb p:not(.crumb__title) { margin: 0; color: var(--sd-ink); }
.crumb__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.crumb__list li {
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.45;
}
/* a little air pocket for a bullet */
.crumb__list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 0.6rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 2px solid var(--sd-crust);
}
.crumb__list code { margin-right: 0.25rem; }
/* Collapsed until scored (only once the script has wired the buttons). */
.loaf.is-closed .crumb { grid-template-rows: 0fr; opacity: 0; }
.loaf.is-closed .crumb > * { overflow: hidden; }
.loaf.is-closed .score { stroke-dashoffset: 1; }
.loaf:not(.loaf--baked) .loaf__score svg { max-height: 120px; }

.rack__note {
  max-width: 46rem;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--sd-ink);
}
.rack__note-hand {
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sd-brown-ink);
  margin-right: 0.25rem;
}

/* -------------------------------------------- 6. recipe card, chalkboard */

.recipe-card {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background-color: #fffefa;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(12, 84, 73, 0.09) 31px 32px);
  background-position: 0 6.5rem;
  border-top: 6px solid var(--sd-gold);
  border-radius: 6px;
  box-shadow: 0 24px 40px -28px rgba(74, 46, 18, 0.6), 0 2px 0 rgba(138, 79, 31, 0.12);
  transform: rotate(-0.6deg);
}
/* tape on two corners */
.recipe-card::before,
.recipe-card::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 110px;
  height: 30px;
  background: rgba(232, 212, 171, 0.75);
  border: 1px solid rgba(138, 79, 31, 0.12);
}
.recipe-card::before { left: 6%; transform: rotate(-5deg); }
.recipe-card::after { right: 6%; transform: rotate(4deg); }
.recipe-card__head h2 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0 0 0.5rem; line-height: 1.05; }
.recipe-card__head p:not(.eyebrow) { margin: 0 0 1.5rem; color: var(--sd-muted); max-width: 40rem; }
.recipe-card__table { overflow-x: auto; border: 0; border-radius: 0; background: none; }
.recipe {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.recipe th, .recipe td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 0.75rem;
  border-bottom: 2px dashed rgba(138, 79, 31, 0.2);
}
.recipe thead th {
  font-family: var(--sd-hand);
  font-weight: 700;
  color: var(--sd-brown-ink);
  font-size: 1.05rem;
  border-bottom-style: solid;
}
.recipe tbody th { white-space: nowrap; font-weight: 700; color: var(--sd-green-deep); }
.pct {
  display: inline-block;
  min-width: 3.3rem;
  font-family: var(--sd-hand);
  font-size: 1.15rem;
  color: var(--sd-brown-ink);
}
.part {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 900;
  white-space: nowrap;
}
.part img { border-radius: 9px; flex: none; }
.part__tile {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #065a4e;
  flex: none;
}
.part__glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--sd-kraft);
  color: var(--sd-brown-ink);
  font-weight: 900;
}
.recipe-card__foot {
  margin: 1.25rem 0 0;
  font-family: var(--sd-hand);
  font-size: 1.2rem;
  color: var(--sd-brown-ink);
}

.chalk-section { padding-block-start: 0; }
.chalkboard {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4.5vw, 3.25rem);
  background:
    radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.07), transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.05), transparent 50%),
    var(--sd-slate);
  color: var(--sd-chalk);
  border: 14px solid var(--sd-wood);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--sd-wood-dark), inset 0 0 40px rgba(0, 0, 0, 0.35), 0 26px 40px -26px rgba(74, 46, 18, 0.75);
}
.chalk-eyebrow {
  margin: 0;
  font-family: var(--sd-hand);
  font-weight: 700;
  color: var(--sd-gold-chalk);
  font-size: 1.15rem;
}
.chalkboard h2 {
  color: var(--sd-chalk);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  margin: 0.2rem 0 0.6rem;
  line-height: 1.05;
  text-shadow: 0 0 1px rgba(238, 236, 228, 0.6);
}
.chalkboard__head p:not(.chalk-eyebrow) { max-width: 46rem; color: var(--sd-chalk); margin: 0 0 2rem; font-size: 1.05rem; }
.chalkboard :not(pre) > code { background: rgba(238, 236, 228, 0.1); color: var(--sd-chalk); }
.schedule {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.schedule__row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.15rem;
  border-top: 2px dashed rgba(238, 236, 228, 0.22);
}
.schedule__when {
  margin: 0;
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--sd-gold-chalk);
  line-height: 1.2;
}
.schedule__what p { margin: 0.35rem 0 0; color: var(--sd-chalk-dim); }
.chalk-cmd {
  display: inline-block;
  font-size: 1.05rem;
  color: var(--sd-chalk);
  background: none !important;
  padding: 0 !important;
  border-bottom: 2px solid rgba(255, 216, 102, 0.6);
}
.chalk-cmd::before { content: "$ "; color: var(--sd-chalk-dim); }
.chalk-soon {
  font-family: var(--wsu-font-family-mono);
  font-size: 1.05rem;
  color: var(--sd-chalk-dim) !important;
  margin: 0 !important;
}
.tag--chalk { margin-left: 0.5rem; font-family: var(--sd-hand); border: 2px dashed var(--sd-chalk-dim); color: var(--sd-chalk); font-size: 0.95rem; }
.exits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}
.exits div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  border: 2px solid rgba(238, 236, 228, 0.3);
  border-radius: 999px;
}
.exits dt { font-family: var(--wsu-font-family-mono); font-weight: 700; color: var(--sd-gold-chalk); }
.exits dd { margin: 0; color: var(--sd-chalk); font-size: 0.92rem; }
.jars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px dashed rgba(238, 236, 228, 0.22);
}
.jars__col h3 {
  margin: 0 0 0.6rem;
  color: var(--sd-chalk);
  font-size: 1.5rem;
}
.jars__col h3 span {
  display: block;
  font-family: var(--sd-hand);
  font-size: 1.05rem;
  color: var(--sd-gold-chalk);
}
.jars__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.jars__aside { margin: 0.8rem 0 0; color: var(--sd-chalk-dim); font-family: var(--sd-hand); font-size: 1.1rem; }
.chalk-smudge {
  position: absolute;
  right: 4%;
  bottom: -10px;
  width: 140px;
  height: 18px;
  background: var(--sd-wood-dark);
  border-radius: 4px;
  box-shadow: 0 -6px 0 rgba(255, 255, 255, 0.85) inset;
  opacity: 0.9;
}

/* ------------------------------------ 7. quick start, shelves, footer */

.start-section { padding-block-start: 0; }
.start {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.start .section__head { margin-bottom: 0; }
.os__list {
  border-bottom: 2px solid rgba(138, 79, 31, 0.25);
}
.os .wsu-tabs__tab {
  font-family: var(--sd-hand);
  font-size: 1.2rem;
  color: var(--sd-muted);
  background: none;
  border: 0;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.os .wsu-tabs__tab[aria-selected="true"] {
  color: var(--sd-green-deep);
  background: rgba(255, 204, 51, 0.35);
  box-shadow: inset 0 -4px 0 var(--sd-green);
}
.os__panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem 1.25rem;
  background: var(--sd-term);
  color: #e7ece9;
  border-radius: 16px;
}
.os__shell { margin: 0 0 0.5rem; font-family: var(--sd-hand); color: var(--sd-gold-chalk); }
.steps {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.steps .c { color: #9bb3ac; }
.os__tip { margin: 1rem 0 0; color: var(--sd-ink); }

.shop-section { padding-block-start: 1rem; }
.shelves { display: grid; gap: 2.25rem; }
.shelf__sign {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.85rem 0.2rem;
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--sd-chalk);
  background: var(--sd-slate);
  border: 3px solid var(--sd-wood);
  border-radius: 6px;
  transform: rotate(-1.5deg);
}
.shelf__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0;
}
.good {
  position: relative;
  display: grid;
  justify-items: center;
  width: 9.25rem;
  padding-top: 0.4rem;
  /* the plank: neighbours touch, so a row reads as one shelf */
  background: linear-gradient(to bottom, transparent 4.5rem, var(--sd-wood) 4.5rem, var(--sd-wood-dark) 5.3rem, transparent 5.3rem);
}
.good__mark {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  transition: transform 0.4s var(--sd-ease-rise);
}
.good__tile {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #065a4e;
  transition: transform 0.4s var(--sd-ease-rise);
}
.good:hover .good__mark, .good:hover .good__tile { transform: translateY(-6px) rotate(-4deg); }
.good__tag {
  position: relative;
  margin-top: 1.35rem;
  padding: 0.45rem 0.6rem 0.4rem;
  min-width: 7.5rem;
  max-width: 8.75rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--sd-muted);
  background: var(--sd-kraft);
  border-radius: 4px 4px 8px 8px;
  transform-origin: 50% -0.9rem;
  transform: rotate(-2deg);
  transition: transform 0.6s var(--sd-ease-rise);
}
.good:nth-child(even) .good__tag { transform: rotate(2.5deg); }
.good__tag::before {
  /* the string */
  content: "";
  position: absolute;
  left: 50%;
  top: -0.95rem;
  width: 2px;
  height: 0.95rem;
  background: var(--sd-wood-dark);
}
.good__tag b { display: block; color: var(--sd-ink); font-size: 0.95rem; }
.good--here .good__tag { background: var(--sd-gold); color: var(--sd-ink); }
.good--soon .good__mark { opacity: 0.92; }
.good--soon .good__tag { background: #f3ead6; border: 2px dashed rgba(90, 58, 28, 0.4); }

.site-footer {
  position: relative;
  overflow: clip;
  background: var(--sd-green-deep);
  color: var(--sd-cream);
  padding-block: 3rem;
  text-align: center;
}
.flour--footer { opacity: 0.18; }
.site-footer__inner { position: relative; display: grid; justify-items: center; gap: 0.5rem; }
.site-footer__joke { margin: 0.4rem 0 0; font-family: var(--sd-hand); font-weight: 700; font-size: 1.3rem; color: var(--sd-gold); }
.site-footer__org { margin: 0; font-size: 0.95rem; }
.site-footer a { color: var(--sd-cream); text-underline-offset: 0.25em; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 20;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1.1rem;
  font-family: var(--sd-hand);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sd-ink);
  background: var(--sd-gold);
  border: 2px solid var(--sd-green-deep);
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--sd-green-deep);
  transform: translate(-50%, 160%);
  transition: transform 0.45s var(--sd-ease-rise);
  pointer-events: none;
}
.toast.is-up { transform: translate(-50%, 0); }
.toast:empty { visibility: hidden; }

/* --------------------------------------------------------- 8. responsive */

@media (max-width: 1000px) {
  .rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loaf--baked { grid-column: 1 / -1; grid-row: auto; }
  .site-nav { gap: 0.9rem; }
}

@media (max-width: 860px) {
  .site-nav { display: none; }
  .ticket { margin-inline-start: auto; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__art { padding-block-start: 2.5rem; }
  .jar { width: min(240px, 52vw); }
  .proof__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "stage" "log";
    grid-template-rows: auto;
  }
  .start { grid-template-columns: minmax(0, 1fr); }
  .schedule__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

@media (max-width: 640px) {
  .rack { grid-template-columns: minmax(0, 1fr); }
  .loaf--baked { flex-direction: column; }
  .loaf--baked .loaf__score { width: 100%; border-right: 0; border-bottom: 2px dashed rgba(138, 79, 31, 0.3); }
  .jars { grid-template-columns: minmax(0, 1fr); }
  .recipe thead { display: none; }
  .recipe, .recipe tbody, .recipe tr, .recipe th, .recipe td { display: block; }
  .recipe tr { padding-block: 0.8rem; border-bottom: 2px dashed rgba(138, 79, 31, 0.2); }
  .recipe th, .recipe td { border: 0; padding: 0.15rem 0; }
  .recipe tbody th { white-space: normal; }
  .chalkboard { border-width: 10px; }
  .good { width: 33.33%; min-width: 0; }
  .good__tag { min-width: 0; width: 94%; padding-inline: 0.25rem; font-size: 0.8rem; }
  .good__tag b { font-size: 0.82rem; }
  .recipe-card { transform: none; }
  .note { font-size: 1.1rem; }
}

@media (max-width: 360px) {
  .hero__title { font-size: 3.1rem; }
  .good { width: 50%; }
  .recipe-cmd__code { padding-inline-end: 0; padding-top: 2.2rem; }
}

/* ------------------------------------------------------------- 9. motion */
/* Everything below runs only for people who said yes to motion. */

.motion .hero__letters > span {
  animation: rise-letter 1.1s var(--sd-ease-rise) both;
  animation-delay: calc(0.15s + var(--i) * 0.06s);
}
@keyframes rise-letter {
  0% { transform: translateY(0.35em) scale(1.25, 0.45); opacity: 0; }
  60% { transform: translateY(-0.06em) scale(0.94, 1.08); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.motion .hero__tagline,
.motion .hero__blurb,
.motion .recipe-cmd,
.motion .hero__cta,
.motion .eyebrow {
  animation: fade-up 0.8s var(--sd-ease-out) both;
}
.motion .hero__tagline { animation-delay: 0.65s; }
.motion .hero__blurb { animation-delay: 0.8s; }
.motion .recipe-cmd { animation-delay: 0.95s; }
.motion .hero__cta { animation-delay: 1.1s; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.motion .hero .eyebrow { animation-name: fade-up-tilt; }
@keyframes fade-up-tilt {
  from { opacity: 0; transform: translateY(16px) rotate(-1.5deg); }
  to { opacity: 1; transform: rotate(-1.5deg); }
}

/* The mark proofs: it rises out of the board, then breathes slowly, the
   way a starter rises and settles. Uniform scale only, never a distortion. */
.motion .jar__mark {
  animation: jar-in 1.2s var(--sd-ease-rise) 0.2s both, proofing 7s ease-in-out 1.6s infinite;
}
@keyframes jar-in {
  from { opacity: 0; transform: translateY(40px) scale(0.8); }
  to { opacity: 1; transform: none; }
}
@keyframes proofing {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px) scale(1.03); }
}
.motion .jar__bubbles i {
  animation: bubble 4.2s ease-in var(--d) infinite;
}
@keyframes bubble {
  0% { opacity: 0; transform: translateY(10px) scale(0.4); }
  20% { opacity: 1; }
  80% { opacity: 0.9; transform: translateY(-62px) scale(1); }
  100% { opacity: 0; transform: translateY(-74px) scale(1.5); }
}
.motion .jar.is-fed .jar__mark { animation: jar-in 1.2s var(--sd-ease-rise) 0.2s both, fed 0.9s var(--sd-ease-rise) both; }
@keyframes fed {
  0% { transform: none; }
  30% { transform: translateY(4px) scale(0.97); }
  65% { transform: translateY(-10px) scale(1.07); }
  100% { transform: none; }
}
.motion .notes__arrow {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: draw 0.9s ease-out 1.5s forwards;
}
.motion .notes__arrow:nth-child(2), .motion .notes__arrow:nth-child(4) { animation-delay: 2.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.motion .note { animation: fade-in 0.6s ease-out 2.1s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.motion .flour { animation: flour-fall 30s linear infinite; }
@keyframes flour-fall {
  from { background-position: 0 0, 40px 60px; }
  to { background-position: 30px 840px, 10px 1160px; }
}
.burst {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sd-flour);
  border: 2px solid rgba(12, 84, 73, 0.5);
  pointer-events: none;
  animation: burst 1s var(--sd-ease-out) forwards;
}
@keyframes burst {
  from { transform: translate(0, 0) scale(0.4); opacity: 1; }
  to { transform: translate(var(--bx), var(--by)) scale(1.2); opacity: 0; }
}

/* The proof: scroll is the clock. The pin holds the stage while the
   section scrolls past; the script sets every frame from the progress. */
.motion .proof { height: 420vh; }
.motion .proof__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: 2rem;
}
.motion .proof__pin > .wsu-container { width: 100%; }
.motion .stage { max-height: 74vh; }
.motion .log__entry { opacity: 0.62; }
.motion .log__entry.is-done { opacity: 0.85; }
.motion .log__entry.is-now {
  opacity: 1;
  background: var(--sd-flour);
  border-color: var(--sd-gold);
  box-shadow: inset 4px 0 0 var(--sd-gold);
  transform: translateX(6px);
}
.motion .stage .pinch.is-dropping { animation: pinch 1.1s var(--sd-ease-out) both; }
@keyframes pinch {
  0% { opacity: 0; transform: translateY(-10px); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* On a phone the log shows one entry at a time, under the stage. Every
   entry stays in the page (opacity only), so a screen reader hears all. */
@media (max-width: 860px) {
  .motion .stage { max-height: 46vh; }
  .motion .proof__head h2 { font-size: 2.2rem; }
  .motion .proof__lede { margin-bottom: 0.5rem; }
  .motion .log { position: relative; min-height: 6.5rem; margin-top: 0.75rem; }
  .motion .log__entry { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(8px); }
  .motion .log__entry.is-done { opacity: 0; }
  .motion .log__entry.is-now { opacity: 1; transform: none; }
}

/* Scoring a loaf: the blade opens the crust, the loaf springs. */
.motion .loaf .score { transition: stroke-dashoffset 0.7s var(--sd-ease-out) 0.05s; }
.motion .loaf.is-scored .loaf__score svg > path:nth-of-type(1) { animation: spring 0.7s var(--sd-ease-rise); }
@keyframes spring {
  0% { transform: none; }
  35% { transform: scale(1.06, 0.92); }
  70% { transform: scale(0.98, 1.08); }
  100% { transform: none; }
}

/* Chalk writes itself on, left to right, as each row comes into view. */
.motion [data-reveal] { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--sd-ease-out); }
.motion [data-reveal].is-in { clip-path: inset(0 0 0 0); }
.motion .good:hover .good__tag { animation: swing 1.2s var(--sd-ease-out); }
@keyframes swing {
  0% { transform: rotate(-2deg); }
  20% { transform: rotate(9deg); }
  45% { transform: rotate(-6deg); }
  70% { transform: rotate(3deg); }
  100% { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* A part's mark and name are one link: the name's link stretches over its
   whole entry, so the mark is clickable too and the entry takes the focus
   ring. No underline on these; the mark brightens (and, with motion allowed,
   lifts) on hover instead. Prose links elsewhere keep their underline. */
.recipe td { position: relative; }
.recipe td .part-link { color: inherit; text-decoration: none; }
.recipe td .part-link::after { content: ""; position: absolute; inset: 0; }
.recipe td .part-link:focus-visible { outline: none; box-shadow: none; }
.recipe td:has(.part-link:focus-visible) { outline: 3px solid currentColor; outline-offset: -3px; }
.recipe td:has(.part-link:hover) img { filter: brightness(1.12) saturate(1.1); }
@media (prefers-reduced-motion: no-preference) {
.recipe td img { transition: transform 160ms ease, filter 160ms ease; }
.recipe td:has(.part-link:hover) img { transform: translateY(-2px); }
}

/* On the shelf the tag's string hangs from the tag itself, so the link wraps
   the whole good (jar and tag) and repeats the good's centred grid. */
.good__link { display: grid; justify-items: center; color: inherit; text-decoration: none; }
.good__link:focus-visible { outline: none; box-shadow: none; }
li.good:has(.good__link:focus-visible) { outline: 3px solid var(--sd-ink); outline-offset: 2px; border-radius: 14px; }
li.good:has(.good__link:hover) :is(.good__mark, .good__tile) { filter: brightness(1.12) saturate(1.1); }