:root {
  --paper: #eee4cf;
  --paper-light: #f8f1e3;
  --paper-deep: #d8c7a6;
  --ink: #211d18;
  --muted: #6b5e4d;
  --oxblood: #7e2e28;
  --teal: #315f5b;
  --mustard: #b58a35;
  --ingredient-1: #963f36;
  --ingredient-2: #28706a;
  --ingredient-3: #a36f16;
  --ingredient-4: #4d5988;
  --ingredient-5: #87552f;
  --ingredient-6: #52713b;
  --ingredient-7: #7b446c;
  --ingredient-8: #3f6678;
  --rule: rgba(47, 38, 28, .31);
  --shadow: rgba(40, 27, 16, .18);
  color-scheme: light;
  font-family: Georgia, "Times New Roman", serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #27231e; }

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(88, 65, 36, .05) 0 1px, transparent 1.5px) 0 0 / 13px 15px,
    radial-gradient(circle at 78% 63%, rgba(96, 70, 36, .045) 0 1px, transparent 1.5px) 0 0 / 19px 17px,
    linear-gradient(100deg, rgba(255,255,255,.12), transparent 20%, rgba(90,64,30,.03) 70%),
    var(--paper);
  min-height: 100vh;
}

button, input { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--oxblood); }
button, summary, a { touch-action: manipulation; }

:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: .5rem;
  transform: translateY(-180%);
  background: var(--ink);
  color: white;
  padding: .65rem .9rem;
}
.skip-link:focus { transform: translateY(0); }

#game-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3.4rem) 0 5rem;
}

.issue-heading {
  position: relative;
  text-align: center;
  border-top: 2px solid var(--ink);
  border-bottom: 7px double var(--ink);
  padding: .65rem 0 .85rem;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.issue-heading::before,
.issue-heading::after {
  content: "✦";
  position: absolute;
  bottom: .85rem;
  font-size: clamp(.7rem, 1.5vw, 1rem);
}
.issue-heading::before { left: 1rem; }
.issue-heading::after { right: 1rem; }

.issue-kicker,
.catalogue-label,
.recipe-meta,
.ledger-label,
.source-rule {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.issue-kicker { font-size: .68rem; }
.issue-heading h1 {
  margin: .1rem 0 0;
  font-size: clamp(3.1rem, 11vw, 8rem);
  letter-spacing: .035em;
  line-height: .84;
  font-weight: 600;
  text-shadow: 1px 1px 0 var(--paper-light);
}
.issue-heading h1 span { color: var(--oxblood); }
.issue-heading p {
  margin: .65rem 0 0;
  font-style: italic;
  font-size: clamp(.85rem, 2vw, 1.1rem);
}

.recipe-picker {
  margin: clamp(1.8rem, 4vw, 3rem) 0 0;
  padding: 1rem;
  border: 1px solid var(--ink);
  background: rgba(248, 241, 227, .55);
  box-shadow: 7px 8px 0 rgba(96, 74, 45, .08);
}
.recipe-picker-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .2rem .2rem .85rem;
  border-bottom: 1px solid var(--rule);
}
.recipe-picker-heading h2 { margin: .18rem 0 0; font-size: 1.45rem; font-weight: 500; }
.recipe-picker-heading p { max-width: 30rem; margin: 0; color: var(--muted); font-size: .8rem; font-style: italic; text-align: right; }
.recipe-picker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.recipe-choice {
  min-width: 0;
  display: grid;
  gap: .18rem;
  padding: .65rem .7rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: rgba(238, 228, 207, .45);
}
.recipe-choice span { color: var(--oxblood); font: 800 .56rem/1 Arial, sans-serif; letter-spacing: .12em; }
.recipe-choice b { overflow: hidden; font-size: .82rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.recipe-choice small { color: var(--muted); font: .58rem/1.2 Arial, sans-serif; text-transform: uppercase; }
.recipe-choice:hover { color: var(--paper-light); background: var(--oxblood); border-color: var(--oxblood); }
.recipe-choice:hover span, .recipe-choice:hover small { color: var(--paper-light); }
.recipe-choice[aria-current="page"] { color: var(--paper-light); background: var(--ink); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--mustard); }
.recipe-choice[aria-current="page"] span { color: #e1bd75; }
.recipe-choice[aria-current="page"] small { color: #d7c9af; }
.recipe-choice[data-availability="upcoming"]:not([aria-current="page"]) { opacity: .68; border-style: dashed; }

.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.recipe-sheet {
  position: relative;
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid var(--rule);
  background: rgba(248, 241, 227, .62);
  box-shadow: 10px 12px 0 rgba(96, 74, 45, .08), 0 16px 42px var(--shadow);
}
.recipe-sheet::before {
  content: "";
  position: absolute;
  inset: .42rem;
  border: 1px solid rgba(60, 44, 28, .16);
  pointer-events: none;
}

.recipe-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .64rem;
  color: var(--muted);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
}

.recipe-sheet h2 {
  margin: 1.35rem 0 1rem;
  font-size: clamp(1.65rem, 3.3vw, 2.4rem);
  line-height: 1.06;
  font-weight: 500;
}

.recipe-copy {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(1.06rem, 1.5vw, 1.21rem);
  line-height: 1.68;
  text-align: left;
  text-wrap: pretty;
}
.recipe-divider {
  height: 0;
  margin: 1rem 0 .8rem;
  border: 0;
  border-top: 1px solid var(--rule);
}
.recipe-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding: .8rem 0;
  border-top: 1px solid rgba(47,38,28,.17);
}
.recipe-step:first-child { border-top: 0; padding-top: .2rem; }
.step-number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: .08rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--paper-light);
  background: var(--ink);
  font: 800 .65rem/1 Arial, sans-serif;
}

.ingredient-blank,
.ingredient-found { display: inline-block; white-space: nowrap; margin: 0 .12em; }
.ingredient-found {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid var(--ingredient-color);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ingredient-color) 19%, transparent) 0 .48em,
    transparent .48em);
  line-height: 1.22;
  animation: press-in .28s ease-out both;
}
.ingredient-found.revealed { border-bottom-style: dashed; }

.inline-guess-form { position: relative; vertical-align: -.18em; }
.blank-initial {
  position: absolute;
  z-index: 1;
  left: .35em;
  bottom: .28em;
  color: var(--oxblood);
  font-weight: 800;
  pointer-events: none;
}
.inline-guess-form:focus-within .blank-initial { opacity: 0; }
.ingredient-inline-input {
  width: 5.4em;
  min-width: 0;
  height: 1.45em;
  padding: 0 .2em .08em;
  border: 0;
  border-bottom: 2px solid var(--ingredient-color);
  border-radius: 0;
  outline: 0;
  color: var(--ink);
  background-color: transparent;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ingredient-color) 18%, transparent) 0 .42em,
    transparent .42em);
  font: 700 .92em/1 Georgia, "Times New Roman", serif;
  text-align: center;
}
.ingredient-inline-input:focus { outline: 2px solid color-mix(in srgb, var(--ingredient-color) 75%, var(--ink)); outline-offset: 2px; background-color: var(--paper-light); }
.blank-hint {
  display: block;
  color: var(--oxblood);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .51rem;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  margin-top: -.22rem;
}

.progress-panel { margin: 1.7rem 0 1.1rem; }
.progress-copy {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .42rem;
}
.progress-track { height: 7px; border: 1px solid var(--ink); padding: 1px; }
.progress-track span { display: block; height: 100%; background: var(--teal); transition: width .35s ease; }
.period-hint {
  margin: .75rem 0 0;
  padding: .55rem .7rem;
  color: var(--oxblood);
  border-left: 3px solid var(--oxblood);
  font-style: italic;
  background: rgba(126, 46, 40, .05);
}

.table-talk {
  margin: .9rem 0 1.35rem;
  padding: .75rem .9rem .8rem;
  border-left: 3px double var(--oxblood);
  background: rgba(126,46,40,.045);
}
.table-talk-slot:empty { display: none; }
#mobile-table-talk-slot > .table-talk {
  width: min(100%, 30rem);
  margin-right: auto;
  margin-left: auto;
}
.table-talk-heading { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.table-talk-heading > span { color: var(--oxblood); font: 800 .54rem/1 Arial, sans-serif; letter-spacing: .12em; }
.table-talk-heading > small { color: var(--muted); font: italic .52rem/1 Georgia, serif; }
.carousel { min-width: 0; }
.carousel-stage { position: relative; min-width: 0; }
.carousel-rail {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-rail::-webkit-scrollbar { display: none; }
.carousel-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  color: var(--paper-light);
  border: 1px solid rgba(248,241,227,.82);
  border-radius: 50%;
  background: rgba(41,34,25,.82);
  box-shadow: 0 2px 8px rgba(30,24,17,.24);
  font: 700 1.15rem/1 Georgia, serif;
  transform: translateY(-50%);
  cursor: pointer;
}
.carousel-prev { left: .62rem; }
.carousel-next { right: .62rem; }
.carousel-arrow:hover:not(:disabled), .carousel-arrow:focus-visible { color: #fff8e7; background: var(--oxblood); }
.carousel-arrow:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
.carousel-arrow:disabled { opacity: .2; cursor: default; }
.carousel.single-card .carousel-arrow { display: none; }
.carousel-meta { display: flex; align-items: baseline; justify-content: center; gap: .55rem; margin-top: .42rem; color: var(--muted); }
.carousel-position { font: 800 .52rem/1 Arial, sans-serif; letter-spacing: .1em; }
.carousel-meta small { font: italic .57rem/1 Georgia, serif; }
.table-talk > .carousel, .table-talk > div > .carousel { margin-top: .65rem; }
.gossip-rail {
  display: flex;
  gap: .68rem;
  padding: .08rem;
}
.gossip-scene {
  display: grid;
  grid-template-columns: minmax(7.25rem, 42%) minmax(0, 1fr);
  flex: 0 0 calc(100% - .16rem);
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border: 1px solid rgba(126,46,40,.24);
  background: rgba(248,241,227,.58);
  box-shadow: 3px 4px 0 rgba(96,74,45,.08);
}
.gossip-vignette {
  width: 100%;
  aspect-ratio: 1;
  border-right: 1px solid rgba(63,52,38,.3);
  background-image: var(--gossip-atlas, url('/images/gossip-scenes-v1.jpg'));
  background-repeat: no-repeat;
  /* The generated sheets retain a narrow paper gutter around every plate.
     A square card crop stays inside one engraving and never reaches its neighbour. */
  background-size: auto 304.8%;
  filter: sepia(.25) contrast(1.02);
}
.gossip-vignette.scene-0 { background-position: 4.1% 14.3%; }
.gossip-vignette.scene-1 { background-position: 34.7% 14.3%; }
.gossip-vignette.scene-2 { background-position: 65.3% 14.3%; }
.gossip-vignette.scene-3 { background-position: 95.9% 14.3%; }
.gossip-vignette.scene-4 { background-position: 4.1% 83.9%; }
.gossip-vignette.scene-5 { background-position: 34.7% 83.9%; }
.gossip-vignette.scene-6 { background-position: 65.3% 83.9%; }
.gossip-vignette.scene-7 { background-position: 95.9% 83.9%; }
.gossip-copy { align-self: center; padding: .72rem 2.9rem .82rem .78rem; }
.gossip-copy blockquote { margin: 0; }
.gossip-scene p { margin: .3rem 0 0; color: #594d3d; font-size: .78rem; font-style: italic; line-height: 1.38; }
.gossip-scene b { color: var(--ink); font-style: normal; }
.gossip-scene small {
  display: block;
  color: var(--oxblood);
  font: 800 .5rem/1 Arial, sans-serif;
  letter-spacing: .1em;
}
.gossip-scene.table-hint { animation: press-in .28s ease both; }

.inline-guess-help { color: var(--muted); font-size: .78rem; font-style: italic; margin: 1rem 0 0; }
.guess-tools { display: contents; }
.guess-dock-stack { display: contents; }
.mobile-guess-dock { display: none; }
.ingredient-suggestions {
  position: fixed;
  z-index: 100;
  overflow: auto;
  overscroll-behavior: contain;
  max-height: min(22rem, calc(100dvh - 2rem));
  padding: .35rem;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 7px 9px 0 rgba(49,42,31,.24), 0 12px 40px rgba(49,42,31,.2);
}
.ingredient-suggestions[hidden] { display: none; }
.suggestion-heading { padding: .5rem .55rem .4rem; color: var(--oxblood); font: 800 .57rem/1 Arial, sans-serif; letter-spacing: .11em; }
.ingredient-suggestion {
  display: block;
  width: 100%;
  min-height: 2.45rem;
  padding: .58rem .65rem;
  border: 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  background: transparent;
  font: 700 .9rem/1.2 Georgia, "Times New Roman", serif;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.ingredient-suggestion:hover, .ingredient-suggestion:focus { color: white; background: var(--teal); outline: 0; }
.guess-button,
.reveal-form button,
.share-button {
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper-light);
  padding: .72rem 1rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}
.guess-button:hover, .share-button:hover { background: var(--oxblood); }

.guess-result { border-left: 4px solid; padding: .5rem .65rem; font-weight: 700; }
.guess-result.correct, .guess-result.revealed { color: var(--teal); background: rgba(49,95,91,.07); }
.guess-result.incorrect, .guess-result.invalid { color: var(--oxblood); background: rgba(126,46,40,.06); }
.cook-comment { border-left: 3px solid var(--oxblood); padding: .48rem .62rem; background: rgba(126,46,40,.055); }
.cook-comment-title { display: block; margin-bottom: .2rem; color: var(--oxblood); font: 800 .54rem/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cook-comment p { margin: 0; font-size: .76rem; line-height: 1.35; }
.cook-comment-loading { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-style: italic; }
.cook-loading-dots { display: inline-flex; gap: .16rem; align-items: center; min-width: 1.15rem; }
.cook-loading-dots i { width: .22rem; height: .22rem; border-radius: 50%; background: var(--oxblood); animation: cook-considering 1s ease-in-out infinite; }
.cook-loading-dots i:nth-child(2) { animation-delay: .14s; }
.cook-loading-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes cook-considering { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-.14rem); } }
@media (prefers-reduced-motion: reduce) { .cook-loading-dots i { animation: none; opacity: .65; } }

.ledger { border-top: 1px solid var(--rule); margin-top: 1.4rem; padding-top: 1rem; }
.ledger-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ledger-heading small { color: var(--muted); font-size: .65rem; }
.ledger-group { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .45rem 0; }
.ledger-label { font-size: .58rem; min-width: 4rem; }
.ledger-chip { border: 1px solid; padding: .22rem .42rem; font-size: .72rem; }
.ledger-chip.good { color: var(--teal); }
.ledger-chip.helped { color: var(--oxblood); }
.pantry-family-groups { display: grid; gap: .62rem; margin: .65rem 0; }
.pantry-family { min-width: 0; }
.pantry-family-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .26rem; padding-bottom: .2rem; border-bottom: 1px dotted var(--rule); }
.pantry-family-heading b { color: var(--oxblood); font: 800 .56rem/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.pantry-family-heading small { color: var(--muted); font-size: .55rem; }
.guess-trail { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .3rem; }
.guess-trail li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; align-items: center; border: 1px solid var(--rule); padding: .34rem .42rem; font-size: .72rem; background: rgba(63,52,38,.04); }
.guess-trail li b { font: 800 .59rem/1 Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.guess-entry { display: grid; line-height: 1.2; }
.guess-entry small { margin-top: .15rem; color: var(--muted); font: italic .64rem/1.2 Georgia, serif; }
.guess-entry .pantry-note { color: inherit; max-width: 52ch; }
.guess-trail .warm { color: #7e2e28; border-color: #a95143; background: rgba(169,81,67,.12); }
.guess-trail .tepid { color: #815d18; border-color: #b58a35; background: rgba(181,138,53,.13); }
.guess-trail .cold { color: #315f75; border-color: #5a8395; background: rgba(64,109,129,.10); }
.pantry-shelf { margin-top: .72rem; border: 1px solid rgba(126,46,40,.62); background: rgba(248,241,227,.62); padding: .55rem .65rem; box-shadow: 3px 4px 0 rgba(126,46,40,.08); }
.pantry-shelf > summary { display: flex; align-items: center; min-height: 2.15rem; color: var(--oxblood); cursor: pointer; font-size: .78rem; font-weight: 700; }
.pantry-shelf > summary::before { content: "?"; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: .48rem; flex: 0 0 auto; color: var(--paper-light); border-radius: 50%; background: var(--oxblood); font: 800 .7rem/1 Arial, sans-serif; }
.pantry-shelf > summary:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; }
.pantry-shelf > p { margin: .45rem 0 .55rem; color: var(--muted); font-size: .68rem; font-style: italic; }
.pantry-shelf-families { display: grid; gap: .38rem; }
.pantry-family-drawer { border-top: 1px dotted var(--rule); padding-top: .35rem; }
.pantry-family-drawer > summary { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; min-height: 1.65rem; color: var(--ink); cursor: pointer; font-size: .7rem; font-weight: 700; }
.pantry-family-drawer > summary small { color: var(--muted); font-size: .55rem; font-weight: 400; }
.pantry-family-drawer[open] > summary { color: var(--oxblood); }
.pantry-shelf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .3rem; }
.pantry-shelf-choice { width: 100%; min-height: 2rem; border: 1px solid var(--rule); border-radius: 0; background: rgba(255,255,255,.42); color: var(--ink); padding: .3rem .4rem; font: 700 .66rem/1.15 Georgia, serif; cursor: pointer; }
.pantry-shelf-choice:hover { border-color: var(--oxblood); color: var(--oxblood); background: rgba(126,46,40,.06); }

.reveal-form {
  display: flex;
  gap: .85rem;
  align-items: center;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.reveal-form button { background: var(--oxblood); }
.reveal-form span { color: var(--muted); font-size: .74rem; }

.hint-column { position: sticky; top: 1rem; min-width: 0; }
#desktop-table-talk-slot > .table-talk { margin-top: 0; }
.hint-column > .ledger {
  margin: 0 0 .85rem;
  padding: 0 0 .85rem;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
}

.print-drawer {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--ink);
  background: rgba(248, 241, 227, .58);
  box-shadow: 6px 7px 0 rgba(96, 74, 45, .09);
}
.print-drawer-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.print-drawer-heading h3 { margin: .22rem 0 0; font-size: 1.15rem; font-weight: 500; }
.print-drawer-heading small { color: var(--muted); font: italic .68rem/1.2 Georgia, serif; }
.print-drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.drawer-print { min-width: 0; margin: 0; padding: .42rem; color: var(--paper-light); background: var(--ink); }
.drawer-print > a { display: block; border: 1px solid #5a5146; background: #e7dcc3; }
.drawer-print img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: sepia(.72) contrast(1.06) saturate(.72);
  transition: filter .25s ease;
}
.drawer-print img.contain { object-fit: contain; background: #e7dcc3; }
.drawer-print a:hover img { filter: sepia(.3) contrast(1.04) saturate(.88); }
.drawer-print figcaption { display: grid; gap: .25rem; margin-top: .45rem; color: #d7c9af; font-size: .58rem; line-height: 1.3; }
.drawer-print figcaption b { color: var(--paper-light); font: 800 .55rem/1 Arial, sans-serif; letter-spacing: .08em; }
.drawer-print figcaption span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.locked-print {
  min-height: 9.5rem;
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: .8rem;
  text-align: center;
  color: #bcae94;
  border: 1px solid #5a5146;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
    var(--ink);
}
.locked-print span { font: 800 .58rem/1 Arial, sans-serif; letter-spacing: .09em; }
.locked-print b { color: #d7c9af; font: italic .68rem/1.3 Georgia, serif; }
.how-to { margin-top: 1.15rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .7rem 0; }
.how-to summary { cursor: pointer; font-weight: 700; }
.how-to p { color: var(--muted); line-height: 1.5; font-size: .88rem; }
.how-to ol { margin: .75rem 0 .2rem; padding-left: 1.35rem; color: var(--muted); font-size: .88rem; }
.how-to li { padding-left: .15rem; line-height: 1.5; }
.how-to li + li { margin-top: .55rem; }

.museum-card {
  margin: 0 auto clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.4rem, 4vw, 3.4rem);
  max-width: 960px;
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -9px;
  background: rgba(248, 241, 227, .74);
  box-shadow: 14px 16px 0 rgba(49, 95, 91, .16);
}
.reveal-heading { text-align: center; border-bottom: 4px double var(--ink); padding-bottom: 1.3rem; }
.catalogue-label { font-size: .62rem; color: var(--oxblood); }
.reveal-heading h2 { font-size: clamp(2rem, 6vw, 4.5rem); line-height: .96; margin: .4rem 0 .6rem; font-weight: 500; }
.reveal-heading p { margin: 0; font-style: italic; }
.context { max-width: 710px; margin: 1.7rem auto; text-align: center; font-size: 1.08rem; line-height: 1.55; }
.completed-print-gallery { margin: 2rem 0; padding: 1.15rem; color: var(--paper-light); background: var(--ink); }
.collection-gallery-heading { text-align: center; padding: .5rem .5rem 1.2rem; border-bottom: 1px solid #665c4f; }
.collection-gallery-heading .catalogue-label { color: #d0aa62; }
.collection-gallery-heading h3 { margin: .35rem 0; color: var(--paper-light); font-size: clamp(1.55rem, 4vw, 2.35rem); font-weight: 500; }
.collection-gallery-heading p { max-width: 620px; margin: 0 auto; color: #d7c9af; font-size: .78rem; font-style: italic; }
.completed-print-gallery > .carousel { margin-top: 1rem; }
.completed-print-gallery .carousel-meta { color: #cdbfa6; }
.completed-print-gallery .carousel-arrow { color: #211b14; border-color: #d0aa62; background: rgba(238,225,196,.92); }
.completed-print-gallery .carousel-arrow:hover:not(:disabled), .completed-print-gallery .carousel-arrow:focus-visible { color: #fff8e7; background: var(--oxblood); }
.collection-gallery-grid { display: flex; gap: .8rem; padding: 0; }
.collection-plate {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(11rem, .55fr);
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: .6rem;
  gap: .7rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border: 1px solid #665c4f;
  background: #171410;
}
.collection-plate > a { display: block; background: #e7dcc3; }
.collection-plate img { display: block; width: 100%; height: auto; object-fit: contain; filter: sepia(.55) contrast(1.06) saturate(.78); transition: filter .25s; }
.collection-plate img.contain { object-fit: contain; background: #e7dcc3; }
.collection-plate > a:hover img { filter: sepia(.18) contrast(1.03) saturate(.95); }
.collection-plate figcaption { display: grid; align-content: center; gap: .45rem; padding: .65rem .35rem; color: #cdbfa6; font-size: .68rem; line-height: 1.42; }
.collection-plate figcaption b { color: var(--paper-light); font: 800 .57rem/1 Arial, sans-serif; letter-spacing: .09em; }
.collection-plate figcaption a { color: #e1bd75; font-style: normal; }
.source-card { margin: 1.5rem 0; padding: 1.2rem; border: 1px solid var(--rule); background: rgba(216,199,166,.24); }
.source-rule { font-size: .58rem; color: var(--muted); }
.source-card h3 { margin: .45rem 0 .25rem; font-size: 1.4rem; }
.source-card p { color: var(--muted); margin: 0 0 .6rem; }
.safety-note { border-left: 4px solid var(--mustard); padding: .8rem 1rem; background: rgba(181,138,53,.09); line-height: 1.45; }

.verdict { display: grid; grid-template-columns: auto auto 1fr; gap: 1.25rem; align-items: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.4rem 0; margin-top: 1.8rem; }
.verdict h3 { margin: .2rem 0 0; font-size: 1.4rem; }
.vote-buttons { display: flex; gap: .45rem; }
.vote-buttons button {
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  cursor: pointer;
  transform: rotate(-3deg);
}
.vote-buttons button + button { transform: rotate(4deg); }
.yum-button:hover, .yum-button[aria-pressed="true"] { background: var(--teal); color: white; }
.yuck-button:hover, .yuck-button[aria-pressed="true"] { background: var(--oxblood); color: white; }
.vote-results { min-width: 0; }
.vote-bar { display: flex; height: 1.8rem; color: white; font: 700 .66rem/1.8rem Arial, sans-serif; text-transform: uppercase; overflow: hidden; }
.vote-bar span { min-width: 3.2rem; padding: 0 .45rem; white-space: nowrap; }
.vote-bar .yum { background: var(--teal); }
.vote-bar .yuck { background: var(--oxblood); text-align: right; }
.vote-results p, .vote-prompt, .vote-error { color: var(--muted); font-size: .76rem; margin: .4rem 0 0; }

.completion-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.3rem; align-items: center; margin-top: 1.5rem; }
.completion-score { width: 100%; border-block: 1px solid var(--rule); padding: .75rem 0; }
.score-breakdown { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; margin-top: .35rem; }
.score-breakdown span { display: flex; align-items: baseline; gap: .3rem; font-size: .76rem; }
.score-breakdown b { font-size: 1.3rem; }
.score-straight b { color: var(--teal); }
.score-pantry b { color: #315f75; }
.score-curator b { color: #815d18; }
.share-button { background: var(--teal); }
#share-status { font-size: .8rem; color: var(--teal); }
.mini-stats { margin-left: auto; display: flex; gap: 1rem; font-size: .72rem; color: var(--muted); }
.mini-stats span { display: grid; text-align: center; }
.mini-stats b { color: var(--ink); font-size: 1.2rem; }

.site-footer {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.1rem 0 2.5rem;
  border-top: 3px double var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: .75rem;
}
.site-footer nav { display: flex; gap: 1rem; }

.sources-page, .waiting { width: min(920px, calc(100% - 2rem)); margin: 0 auto; padding: 4rem 0 6rem; }
.sources-page > header { margin: 2.2rem 0; border-top: 2px solid; border-bottom: 5px double; padding: 1.5rem 0; }
.sources-page h1, .waiting h1 { font-size: clamp(3rem, 10vw, 7rem); font-weight: 500; line-height: .9; margin: .4rem 0; }
.source-principles { max-width: 680px; font-size: 1.05rem; line-height: 1.55; }
.source-list { margin-top: 3rem; border-top: 2px solid; }
.source-entry { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.source-number { color: var(--oxblood); font-size: 1.5rem; }
.source-entry h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
.source-entry p { margin: .22rem 0; color: var(--muted); }
.source-links { display: flex; gap: 1rem; margin-top: .5rem; font-size: .82rem; }
.waiting { min-height: 85vh; display: grid; place-content: center; text-align: center; }
.printer-mark { margin: 2rem auto; display: grid; place-items: center; width: 5rem; height: 5rem; border: 4px double; border-radius: 50%; color: var(--oxblood); font-size: 3rem; }

@keyframes press-in {
  from { opacity: 0; transform: translateY(-.2em) rotate(-1deg); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 800px) {
  #game-shell { width: min(680px, calc(100% - 1.2rem)); }
  .game-grid { grid-template-columns: 1fr; }
  .hint-column { position: static; }
  .recipe-sheet { box-shadow: 6px 8px 0 rgba(96,74,45,.08); }
  .verdict { grid-template-columns: 1fr auto; }
  .vote-results, .vote-prompt, .vote-error { grid-column: 1 / -1; }
  .recipe-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-plate { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(10rem, .75fr); gap: .5rem; }
  .collection-plate figcaption { align-content: center; }
}

@media (max-width: 520px) {
  #game-shell {
    width: calc(100% - .6rem);
    padding: .35rem 0 2rem;
  }
  .issue-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
    padding: .5rem .25rem .55rem;
    border-bottom-width: 3px;
    text-align: left;
  }
  .issue-heading::before, .issue-heading::after { display: none; }
  .issue-heading h1 {
    order: 1;
    margin: 0;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: .02em;
  }
  .issue-kicker { order: 2; font-size: .52rem; letter-spacing: .1em; }
  .issue-heading p { display: none; }
  .recipe-sheet {
    padding: .82rem .72rem 1rem;
    box-shadow: 3px 4px 0 rgba(96,74,45,.07);
  }
  .recipe-sheet::before { inset: .25rem; }
  .recipe-meta { padding-bottom: .48rem; font-size: .53rem; letter-spacing: .1em; }
  .recipe-sheet h2 { margin: .72rem 0 .55rem; font-size: 1.22rem; }
  #guess-tools-region {
    position: sticky;
    z-index: 30;
    top: calc(var(--visual-viewport-top, 0px) + max(.35rem, env(safe-area-inset-top)));
  }
  .guess-dock-stack {
    display: grid;
    gap: .38rem;
    margin: .45rem -.2rem .6rem;
    padding: .48rem .52rem .42rem;
    border: 1px solid var(--ink);
    background: color-mix(in srgb, var(--paper-light) 94%, transparent);
    box-shadow: 3px 4px 0 rgba(49,42,31,.16);
    backdrop-filter: blur(8px);
  }
  .mobile-guess-dock {
    display: grid;
    gap: .3rem;
    margin: 0;
  }
  .guess-dock-stack #pantry-help-region:empty { display: none; }
  .guess-dock-stack .pantry-shelf {
    margin-top: 0;
    background: rgba(248,241,227,.82);
    box-shadow: none;
  }
  .mobile-guess-dock > label {
    color: var(--oxblood);
    font: 800 .5rem/1 Arial, sans-serif;
    letter-spacing: .13em;
  }
  .mobile-guess-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
  .mobile-guess-input {
    width: 100%;
    height: 2.25rem;
    padding: .25rem .55rem;
    border: 1px solid var(--ink);
    background: var(--paper-light);
    font-size: 1rem;
    text-align: left;
  }
  .mobile-guess-button {
    min-width: 3.7rem;
    border: 1px solid var(--ink);
    color: var(--paper-light);
    background: var(--ink);
    font: 800 .65rem/1 Arial, sans-serif;
    letter-spacing: .08em;
  }
  .mobile-guess-dock > small { color: var(--muted); font-size: .6rem; line-height: 1.2; }
  .progress-panel { margin: .65rem 0 .7rem; }
  .progress-copy { display: flex; gap: .5rem; font-size: .64rem; }
  .recipe-copy { font-size: .98rem; line-height: 1.55; }
  .recipe-step {
    grid-template-columns: 1.45rem minmax(0, 1fr);
    gap: .42rem;
    padding: .52rem 0;
  }
  .step-number { width: 1.35rem; height: 1.35rem; font-size: .56rem; }
  .recipe-copy .ingredient-blank {
    width: 3.25em;
    height: 1em;
    margin: 0 .08em;
    border-bottom: 2px solid var(--ingredient-color);
    background: linear-gradient(to top,
      color-mix(in srgb, var(--ingredient-color) 18%, transparent) 0 .38em,
      transparent .38em);
    vertical-align: -.08em;
    cursor: text;
    touch-action: manipulation;
  }
  .recipe-copy .ingredient-inline-input { display: none; }
  .inline-guess-help { display: none; }
  .table-talk {
    margin: .75rem 0 .4rem;
    padding: .58rem .64rem .62rem;
  }
  .table-talk > .carousel, .table-talk > div > .carousel { margin-top: .48rem; }
  .gossip-rail { gap: .55rem; padding: .05rem; }
  .gossip-scene { grid-template-columns: minmax(6.7rem, 40%) minmax(0, 1fr); flex-basis: calc(100% - .1rem); }
  .gossip-copy { padding: .55rem 2.55rem .65rem .58rem; }
  .gossip-scene p { font-size: .74rem; line-height: 1.3; }
  .gossip-scene small { font-size: .46rem; }
  .table-talk-heading > small { font-size: .47rem; }
  .carousel-arrow { width: 2.05rem; height: 2.05rem; font-size: 1rem; }
  .carousel-prev { left: .38rem; }
  .carousel-next { right: .38rem; }
  .carousel-meta { margin-top: .32rem; }
  .ledger { margin-top: .8rem; padding-top: .7rem; }
  .ledger-heading { display: grid; gap: .18rem; }
  .pantry-family-groups { gap: .48rem; margin-top: .5rem; }
  .guess-trail { grid-template-columns: 1fr; gap: .25rem; }
  .guess-trail li { grid-template-columns: minmax(0, 1fr) auto; gap: .38rem; padding: .32rem .38rem; }
  .guess-trail li > b { font-size: .5rem; }
  .pantry-shelf { margin-top: .45rem; padding: .48rem .52rem; }
  .pantry-shelf > summary { min-height: 2.35rem; font-size: .76rem; line-height: 1.2; }
  .pantry-family-drawer > summary { min-height: 2.1rem; font-size: .72rem; }
  .pantry-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .28rem; }
  .pantry-shelf-choice button { min-height: 2.15rem; font-size: .63rem; }
  .hint-column { margin-top: .7rem; }
  .how-to { margin-top: .55rem; padding: .5rem 0; font-size: .8rem; }
  .ingredient-suggestions {
    left: .6rem !important;
    right: .6rem !important;
    bottom: auto !important;
    width: auto !important;
    padding: .45rem;
    border-width: 2px;
    box-shadow: 0 8px 35px rgba(49,42,31,.32);
  }
  .ingredient-suggestion { min-height: 3.15rem; padding: .78rem .8rem; font-size: 1rem; }
  .print-drawer-grid { grid-template-columns: 1fr; }
  .completed-print-gallery { padding: .72rem; }
  .collection-plate { display: block; }
  .collection-plate figcaption { padding: .62rem .2rem .25rem; }
  .reveal-form { align-items: stretch; flex-direction: column; }
  .museum-card { margin: 1rem 0 0; padding: 1rem .82rem; outline-offset: -6px; }
  .verdict { grid-template-columns: 1fr; }
  .vote-buttons { justify-content: start; }
  .mini-stats { width: 100%; margin-left: 0; justify-content: space-around; }
  .site-footer { display: grid; }
  .recipe-picker { margin-top: 1rem; padding: .62rem; box-shadow: 3px 4px 0 rgba(96,74,45,.07); }
  .recipe-picker-heading { padding: 0 0 .5rem; }
  .recipe-picker-heading h2 { margin-top: .1rem; font-size: 1rem; }
  .recipe-picker-heading p { display: none; }
  .recipe-picker-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: .38rem;
    margin-top: .5rem;
  }
  .recipe-choice { display: block; padding: .48rem .3rem; text-align: center; }
  .recipe-choice span { display: none; }
  .recipe-choice small { display: none; }
}

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