/* Mythfield Games v4, "the shelf in the woods".
 * Joe's palette words: earth tones, high fantasy, woodsy, burnt.
 * Two grounds with a reason the reader can name: the woods at both ends
 * (bark night), the shelf in between (parchment daylight). One accent hue,
 * burnt ember, at two lightnesses keyed to the ground. */

:root {
  --parch: #efe5d0;
  --parch-2: #e6d9bd;
  --paper: #f7efdf;
  --bark: #2a1d13;
  --bark-soft: #5e4938;
  --ember: #a5421c;
  --ember-hi: #e0773f;
  --moss: #46523e;
  --night: #1b140e;
  --night-2: #241a12;
  --bone: #f0e4cc;
  --bone-soft: #c2ae92;
  --gilt: #b98b45;

  --wp-canvas: var(--parch);
  --wp-surface: var(--paper);
  --wp-ink: var(--bark);
  --wp-ink-soft: var(--bark-soft);
  --wp-accent: var(--ember);
  --wp-accent-ink: #fff4e6;
  --wp-font-display: "Marcellus", "Trajan Pro", Georgia, serif;
  --wp-font-text: "Bitter", Georgia, serif;
  --wp-radius: 3px;
  --wp-max: 76rem;
  --wp-hairline: 1px solid color-mix(in oklab, var(--bark) 18%, transparent);
}

html { scroll-padding-top: 5.5rem; }
body { background: var(--parch); color: var(--bark); }
::selection { background: var(--ember); color: #fff4e6; }
input, textarea { caret-color: var(--ember); }
html { scrollbar-color: color-mix(in oklab, var(--bark) 45%, transparent) var(--parch); }

/* Grain: a lit room, not a flat document. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .wp-display { font-weight: 400; letter-spacing: 0; }
h2 { letter-spacing: .005em; }
em { font-style: italic; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------- buttons --
 * Stonemaier's stacked slab buttons: uppercase, tracked, solid. One radius. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4rem;
  font: 600 1rem/1 var(--wp-font-text); letter-spacing: .01em;
  text-decoration: none; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px -8px rgba(42,29,19,.55);
  transition: transform 140ms var(--wp-ease), background-color 160ms var(--wp-ease), border-color 160ms var(--wp-ease), box-shadow 160ms var(--wp-ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn--ember { background: var(--ember); color: #fff4e6; }
.btn--ember:hover { background: #8f3814; }
.btn--moss { background: transparent; color: var(--bark); border-color: color-mix(in oklab, var(--bark) 45%, transparent); box-shadow: none; }
.btn--moss:hover { border-color: var(--bark); background: rgba(42,29,19,.04); }
.btn--line { background: transparent; color: var(--bark); border-color: color-mix(in oklab, var(--bark) 40%, transparent); box-shadow: none; }
.btn--line:hover { border-color: var(--bark); }
.btn--ghost-light { background: rgba(20,14,9,.42); color: var(--bone); border-color: rgba(240,228,204,.55); box-shadow: none; }
.btn--ghost-light:hover { border-color: var(--bone); background: rgba(240,228,204,.16); }
.btn--sm { min-height: 44px; padding: 0 1.1rem; font-size: .92rem; }
.btn--block { display: flex; width: 100%; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: none; } }

/* -------------------------------------------------------------- chrome --
 * One dark masthead, bark and bone, with a gilt hairline under it: the woods
 * the page opens and closes in, carried into the chrome. No utility strip. */
.mast { position: sticky; top: 0; z-index: 60; background: var(--night); color: var(--bone); box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--gilt) 55%, transparent); }
.mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gilt) 35%, transparent) 20%, color-mix(in oklab, var(--gilt) 35%, transparent) 80%, transparent); pointer-events: none; }
.wp-scrolled .mast { box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--gilt) 55%, transparent), 0 10px 24px -16px rgba(0,0,0,.7); }
.mast__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; }
.mast__brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; min-height: 48px; }
/* The crest only (shield + wheat): the full mark carries its own lettering, illegible at this size.
   A thin bone halo traces the shield's dark rim so it separates from the bar. */
.mast__brand img { width: auto; height: 52px; filter: drop-shadow(0 0 .6px rgba(240,228,204,.95)) drop-shadow(0 0 .6px rgba(240,228,204,.7)) drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.mast__word { font: 400 1.55rem/1 var(--wp-font-display); color: #fbf2e2; letter-spacing: .02em; }
.mast__word small { display: block; font: italic 400 .78rem/1 var(--wp-font-text); letter-spacing: .02em; color: var(--bone-soft); margin-top: .35rem; text-transform: none; }
.mast__nav { display: flex; align-items: center; gap: .25rem; }
.mast__link, .gmenu > summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .85rem; color: var(--bone); text-decoration: none; font-size: .95rem; cursor: pointer; border-radius: var(--wp-radius); }
.mast__link:hover, .gmenu > summary:hover { color: #fff; background: #2c2117; }
.mast__link[aria-current], .gmenu > summary.is-current { color: #fff; box-shadow: inset 0 -2px 0 var(--ember-hi); }
.mast__link { white-space: nowrap; }
/* Tablets: the full nav does not fit beside the brand, so drop the tagline and
 * About Joe (the close is one scroll away on every page) before anything wraps. */
@media (min-width: 761px) and (max-width: 1080px) {
  .mast__word small, .mast__link--about { display: none; }
  .mast__brand img { width: auto; height: 48px; }
  .mast__link, .gmenu > summary { padding: 0 .6rem; }
}
.mast :focus-visible { outline-color: var(--ember-hi); }

.gmenu { position: relative; }
.gmenu > summary { list-style: none; }
.gmenu > summary::-webkit-details-marker { display: none; }
.gmenu__caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--wp-ease); }
.gmenu[open] .gmenu__caret { transform: translateY(1px) rotate(-135deg); }
.gmenu__list { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 70; list-style: none; margin: 0; padding: .5rem; min-width: 17rem; background: var(--night-2); border: 1px solid color-mix(in oklab, var(--gilt) 45%, transparent); border-radius: var(--wp-radius); box-shadow: 0 24px 40px -18px rgba(0,0,0,.8); }
.gmenu__list a { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 .7rem; color: var(--bone); text-decoration: none; font-size: .95rem; border-radius: 2px; }
.gmenu__list a:hover, .gmenu__list a[aria-current] { background: #3a2c20; color: #fff; }
.gmenu__list svg { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--gilt); }

/* ---------------------------------------------------------------- hero -- */
.hero { height: clamp(34rem, 84svh, 58rem); background: #3a2414; color: var(--bone); display: flex; align-items: flex-start; }
.hero__far { z-index: 0; object-position: 62% 28%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(27,20,14,.7) 0%, rgba(27,20,14,.45) 34%, transparent 62%), linear-gradient(transparent 70%, rgba(27,20,14,.55));
}
.hero__copy { position: relative; z-index: 3; padding-top: clamp(4rem, 13svh, 9rem); }
.hero h1 { font-size: clamp(2.9rem, 6.4vw, 5.6rem); line-height: 1; max-width: 12ch; color: #fbf2e2; text-shadow: 0 2px 18px rgba(20,12,6,.45); }
.hero h1 span { display: block; color: #f3b27f; }
.hero__lead { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.55; max-width: 34ch; margin: 1.4rem 0 1.9rem; color: #f3e8d4; letter-spacing: .005em; text-shadow: 0 1px 10px rgba(20,12,6,.6); }
.hero__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
/* The hero's copy rises in with the first paint, from CSS, instead of waiting
   for premium.js to load and add .wp-in. Same distance, easing, length and
   stagger as the reveal, so it looks the same; it just starts sooner, which is
   what Speed Index and the visitor see. (Live check, 2026-10-15.) */
.hero [data-wp-reveal] { opacity: 1; transform: none; transition: none; animation: hero-in var(--wp-dur) var(--wp-ease) both; }
.hero [data-wp-delay="90"] { animation-delay: 90ms; }
.hero [data-wp-delay="170"] { animation-delay: 170ms; }
@keyframes hero-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@media (prefers-reduced-motion: reduce) { .hero [data-wp-reveal] { animation: none; } }
@media (max-width: 700px) {
  .hero { height: max(40rem, 92svh); }
  .hero__far { object-position: 50% 30%; }
  .hero__scrim { background: linear-gradient(to bottom, rgba(27,20,14,.6) 0%, rgba(27,20,14,.25) 55%, transparent 72%); }
  .hero__copy { padding-top: 2.6rem; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.3rem); }
}

/* -------------------------------------------------------------- studio -- */
.studio { padding-block: var(--wp-section-y); }
.studio__in { display: grid; gap: 2.5rem; }
.studio__h { font-size: clamp(1.8rem, 3.3vw, 2.8rem); line-height: 1.14; max-width: 22ch; color: var(--bark); }
.studio__body { max-width: 40rem; }
.studio__body .wp-link { color: var(--ember); font-weight: 600; }
@media (min-width: 60rem) {
  .studio__in { grid-template-columns: 1.05fr 1fr; align-items: start; gap: 4rem; }
  .studio__body { padding-top: .6rem; }
}

/* ------------------------------------------------------ plates (games) --
 * Every plate opens the Stonemaier way: the game's name, centred, burnt;
 * then a hairline with the game's emblem set into it. What sits under the
 * header changes plate to plate. */
.shelf { border-top: var(--wp-hairline); }
.plate { padding-block: var(--wp-section-y); }
.plate + .plate { padding-top: calc(var(--wp-section-y) * .7); }
.plate__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.plate__head h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); color: var(--bark); line-height: 1.05; }
.rule { display: flex; align-items: center; gap: 1rem; max-width: 46rem; margin: 1.1rem auto 0; }
.rule span { flex: 1; height: 1px; background: color-mix(in oklab, var(--bark) 26%, transparent); }
.rule svg { width: 30px; height: 30px; fill: var(--ember); overflow: visible; margin: 0 .55rem; }
.rule { position: relative; }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--gilt); box-shadow: 0 0 0 4px var(--parch), 0 0 0 5px color-mix(in oklab, var(--gilt) 40%, transparent); pointer-events: none; z-index: -1; background: var(--parch); }
.rule { isolation: isolate; }
.rule span { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gilt) 70%, transparent)); }
.rule span + svg + span { background: linear-gradient(90deg, color-mix(in oklab, var(--gilt) 70%, transparent), transparent); }
.plate__tag { font: 400 clamp(1.25rem, 1.8vw, 1.55rem)/1.35 var(--wp-font-display); color: var(--bark); margin-bottom: 1.2rem; max-width: 30ch; }
.plate__tag--c { margin: 1.4rem auto 0; text-align: center; max-width: none; }

.plate__split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) {
  .plate__split { grid-template-columns: 1fr 1.12fr; gap: clamp(3rem, 5vw, 5rem); }
  .plate__split--flip { grid-template-columns: 1fr 1fr; }
  .plate--more .plate__split { gap: clamp(3.5rem, 6vw, 6rem); }
  .plate--more .plate__text { max-width: 32rem; }
  .plate--more .frame { width: 100%; max-width: 32rem; justify-self: center; }
  .plate--more .frame img { padding: .85rem; background: var(--paper); }
}
.plate__text p:not(.plate__tag) { color: var(--bark); }
.plate__acts { display: grid; gap: .6rem; max-width: 22rem; margin-top: 1.8rem; }

.facts { display: grid; gap: 0; margin: 1.6rem 0 0; border-top: var(--wp-hairline); max-width: 34rem; }
.facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: var(--wp-hairline); }
.facts dt { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bark-soft); padding-top: .15rem; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; }

/* Stonemaier frames its art in a thin burnt border; here the frame is
 * lifted off the parchment by a real shadow, and the caption is part of it. */
.frame { margin: 0; }
.frame img { width: 100%; height: auto; border: 1px solid var(--ember); border-radius: var(--wp-radius); box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 22px 40px -24px rgba(42,29,19,.7), 0 6px 12px -8px rgba(42,29,19,.4); }
.frame figcaption { margin-top: .8rem; font-size: .88rem; color: var(--bark-soft); font-style: italic; max-width: 50ch; }
.frame--hand { transform: rotate(.6deg); }
.frame--cover { transform: rotate(-.6deg); }
@media (prefers-reduced-motion: reduce) { .frame--hand, .frame--cover { transform: none; } }

/* ----------------------------------------------------------- the fan ---
 * The signature. The deck becomes a hand. Cards pivot from a point well
 * below them, like cards off a thumb. State lives in data-state:
 *   open  : fanned (the no-JS default, so the page is complete without JS)
 *   deck  : squared, back on top
 *   drawn : one card up at reading size, the rest fanned wider behind it */
.fan { --cw: clamp(150px, 17vw, 236px); --step: 15deg; --spread: 1; position: relative; display: grid; justify-items: center; }
.fan__cards { position: relative; list-style: none; margin: 0; padding: 0; width: min(100%, calc(var(--cw) * 2.4)); height: calc(var(--cw) * 1.62); }
.fan__card {
  --a: calc((var(--i) - (var(--n) - 1) / 2) * var(--step) * var(--spread));
  position: absolute; left: 50%; bottom: 0; width: var(--cw); margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 175%;
  transform: rotate(var(--a)) translateY(var(--lift, 0px));
  z-index: calc(var(--n) - var(--i));
  transition: transform 460ms var(--wp-ease), filter 300ms var(--wp-ease), z-index 0s linear 140ms;
}
.fan__card img { width: 100%; height: auto; border-radius: calc(var(--cw) * .052); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 18px 28px -16px rgba(42,29,19,.75), 0 3px 6px -3px rgba(42,29,19,.5); }
.fan__hit { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: calc(var(--cw) * .052); }
.fan__hit:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; }

.fan[data-state="deck"] { --spread: 0; }
.fan[data-state="deck"] .fan__card { transform: rotate(calc((var(--i) - 1) * 1.2deg)) translate(calc(var(--i) * -1.5px), calc(var(--i) * 1.5px)); z-index: calc(var(--n) - var(--i)); transition-delay: 0s; }
.fan[data-state="open"] .fan__card, .fan[data-state="drawn"] .fan__card { z-index: calc(var(--i) + 1); }
.fan .fan__card.is-hot { --lift: -16px; }
.fan[data-state="drawn"] { --spread: 1.35; }
.fan[data-state="drawn"] .fan__card:not(.is-drawn) { filter: brightness(.82) saturate(.8); }
.fan .fan__card.is-drawn { z-index: 20; transform: rotate(0deg) translateY(18%) scale(1.3); transition-delay: 0s; }

.fan__deck {
  order: 2; margin-top: 1.6rem; min-height: 44px; padding: 0 1.1rem;
  font: 600 .92rem/1 var(--wp-font-text);
  color: var(--bark); background: transparent; border: 1px solid color-mix(in oklab, var(--bark) 35%, transparent); border-radius: 999px; cursor: pointer;
}
.fan__deck:hover { border-color: var(--bark); }
.fan__hint--open { display: none; }
.fan[data-state="open"] .fan__hint--open, .fan[data-state="drawn"] .fan__hint--open { display: inline; }
.fan[data-state="open"] .fan__hint--closed, .fan[data-state="drawn"] .fan__hint--closed { display: none; }
.fan__caption { order: 3; margin: .9rem 0 0; min-height: 1.6em; text-align: center; font: italic .95rem/1.5 var(--wp-font-text); color: var(--bark-soft); }
html:not(.js) .fan__deck { display: none; }
@media (prefers-reduced-motion: reduce) { .fan__card { transition: none; } }

/* ----------------------------------------------------------- feature ---
 * Home's peak: Etchinstone's own cards, fanned. */
.feature { padding-block: calc(var(--wp-section-y) * .7) var(--wp-section-y); background: linear-gradient(var(--parch), var(--paper) 30%, var(--paper) 70%, var(--parch)); }
.feature__in { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .feature__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4.5rem); } }
.fan--etch { --cw: clamp(170px, 18.5vw, 262px); --step: 15deg; padding-top: 6.5rem; }
.fan--etch .fan__cards { width: min(100%, calc(var(--cw) * 2.8)); }
.feature__quote { margin: 1.5rem 0; padding-left: 1.1rem; border-left: 2px solid var(--gilt); }
.feature__quote p { font: 400 clamp(1.45rem, 2.1vw, 1.9rem)/1.2 var(--wp-font-display); color: var(--bark); margin: 0; max-width: none; text-wrap: balance; }
.feature__quote cite { display: block; margin-top: .45rem; font-style: normal; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bark-soft); }
.feature__facts { font-size: .9rem; letter-spacing: .06em; color: var(--bark-soft); border-top: var(--wp-hairline); border-bottom: var(--wp-hairline); padding: .7rem 0; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- tiles ---
 * The rest of the shelf. One frame shape (4:3, cover), one text stack, the
 * "More info" pinned to the bottom, so every cell in a row lines up. */
.shelf-grid { padding-block: var(--wp-section-y); background: var(--parch-2); border-block: var(--wp-hairline); }
.shelf-grid__h { text-align: center; font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--bark); margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.tile { display: flex; }
.tile__link { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: var(--bark); background: var(--paper); border: var(--wp-hairline); border-radius: var(--wp-radius); padding: 1rem 1rem 1.3rem; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 30px -26px rgba(42,29,19,.6); transition: translate 180ms var(--wp-ease), box-shadow 180ms var(--wp-ease); }
@media (hover: hover) and (pointer: fine) { .tile__link:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 26px 36px -24px rgba(42,29,19,.7); } }
.tile__art { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--parch); }
.tile__art img, .tile__art picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__rule { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .7rem; }
.tile__rule::before, .tile__rule::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--gilt) 60%, transparent); }
.tile__rule svg { width: 22px; height: 22px; fill: var(--ember); margin: 0 .5rem; }
.tile__rule { position: relative; isolation: isolate; }
.tile__rule::marker { content: none; }
.tile__name { font: 400 clamp(1.4rem, 1.9vw, 1.65rem)/1.15 var(--wp-font-display); color: var(--bark); text-align: center; }
.tile__line { display: block; margin: .6rem 0 1.1rem; text-align: center; font-size: .95rem; color: var(--bark); line-height: 1.55; }
.tile__more { margin-top: auto; align-self: center; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; color: var(--ember); }
.tile__more::after { content: "\2192"; transition: transform 160ms var(--wp-ease); }
.tile__link:hover .tile__more::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .tile__link, .tile__link:hover { transform: none; transition: none; } }

/* -------------------------------------------------------- game pages ---*/
.gpage { padding-top: calc(var(--wp-section-y) * .6); }
.gpage__head h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--bark); line-height: 1.05; letter-spacing: 0; }
.gal { display: grid; gap: 1rem; }
.gal figure { margin: 0; }
.gal img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp-radius); border: 1px solid var(--ember); box-shadow: 0 22px 40px -26px rgba(42,29,19,.7); }
.gal picture { display: block; height: 100%; }
@media (min-width: 48rem) {
  .gal--tall { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(28rem, 44vw, 40rem); }
  .gal--tall .gal__big { grid-row: 1 / 3; }
  .gal--tall figure { min-height: 0; }
  .gal--wide { grid-template-columns: 1fr 1fr; }
  .gal--wide .gal__big { grid-column: 1 / 3; }
  .gal--wide .gal__small { justify-self: center; width: min(100%, 17rem); }
}
.gal--wide .gal__small img { object-fit: contain; border: 0; box-shadow: 0 18px 30px -18px rgba(42,29,19,.7); border-radius: 12px; }
.gal__credit { margin-top: .7rem; font-size: .82rem; font-style: italic; color: var(--bark-soft); }
.gabout { padding-block: calc(var(--wp-section-y) * .7); }
.gabout__in { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .gabout__in { grid-template-columns: 1.3fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
.gabout__text p:first-child { font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.55; }
.gabout__side .facts { margin-top: 0; }
.gfan { padding-block: calc(var(--wp-section-y) * .6) var(--wp-section-y); background: linear-gradient(var(--parch), var(--paper) 40%, var(--parch)); border-top: var(--wp-hairline); }
.gfan__h { text-align: center; font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--bark); }
.gfan .fan { --cw: clamp(170px, 17vw, 240px); --step: 18deg; padding-top: 6rem; }
.gfan .fan--roll { --step: 10deg; }
.gfan .fan__cards { width: min(100%, calc(var(--cw) * 3.2)); }
.more-head { padding-bottom: 0; }
.more-head .plate__head { margin-bottom: 0; }
.plate--more { padding-block: calc(var(--wp-section-y) * .6); }
.plate--more + .plate--more { border-top: var(--wp-hairline); }
.more__h { display: flex; align-items: center; gap: .8rem; font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--ember); margin-bottom: 1rem; line-height: 1.1; }

/* ---------------------------------------------------------- path ---
 * Find your game, from Joe's map. Each fork is one lane per road, side by side,
 * each lane its own piece of art; every lane after the first overlaps the one
 * before it and fades in across the overlap, so neighboring art blends.
 * Choosing a lane widens it across the stage. Signposts are wooden boards in
 * markup, never baked into the art. */
.mast__link--path { color: #f3b27f; }
.gmenu__path a { color: #f3b27f; border-bottom: 1px solid rgba(185,139,69,.35); margin-bottom: .3rem; }
.shelf-grid__path { text-align: center; margin: -1.6rem auto clamp(2rem, 3.5vw, 3rem); max-width: none; color: var(--bark); }
.shelf-grid__path a { color: #8a3512; font-weight: 600; text-underline-offset: .2em; }

.path { --blend: 7vw; background: var(--night); color: var(--bone); }
.path__stage { position: relative; overflow: clip; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; min-height: max(34rem, calc(100svh - 72px)); }

.path__lanes { position: absolute; inset: 0; z-index: 0; display: flex; background: var(--night); }
.lane { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center;
  transition: flex-grow 760ms cubic-bezier(.45, 0, .2, 1), opacity 420ms ease; }
.lane + .lane { margin-left: calc(var(--blend) * -1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--blend)); mask-image: linear-gradient(90deg, transparent, #000 var(--blend)); }
.lane__art { position: absolute; inset: 0; overflow: hidden; transition: filter 600ms ease, transform 900ms cubic-bezier(.45, 0, .2, 1); }
.lane__art img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* The middle road at the first fork carries a two-figure piece: give it more of the
 * screen and aim the crop between the two faces so neither is lost under a blend. */
.path__lanes[style*="--lanes: 3"] .lane--straight { flex-grow: 1.8; }
.path__lanes[style*="--lanes: 3"] .lane--straight .lane__art img { object-position: 52% 30%; }

/* Art placeholder: a tinted ground per road, a dashed frame, and the piece Joe asked for. */
.lane__ph { position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem; padding: 4rem 2rem 6rem; }
.lane--left .lane__ph { background: radial-gradient(ellipse 70% 60% at 50% 55%, #3e4c35, #1f2619 75%); }
.lane--straight .lane__ph { background: radial-gradient(ellipse 70% 60% at 50% 55%, #5b3b25, #2a1b11 75%); }
.lane--right .lane__ph { background: radial-gradient(ellipse 70% 60% at 50% 55%, #4a4e57, #212329 75%); }
.lane__ph::before { content: ""; position: absolute; inset: 12.5rem 1.6rem calc(clamp(5.5rem, 13svh, 8rem) + 7.5rem); border: 2px dashed rgba(240,228,204,.3); border-radius: 6px; }
.lane + .lane .lane__ph { padding-left: calc(var(--blend) + 2rem); }
.lane + .lane .lane__ph::before { left: calc(var(--blend) + 1.6rem); }
.lane__ph-k { font: 600 .75rem/1 var(--wp-font-text); letter-spacing: .18em; text-transform: uppercase; color: rgba(240,228,204,.6); }
.lane__ph-t { font: italic 400 clamp(1rem, 1.5vw, 1.25rem)/1.3 var(--wp-font-text); color: rgba(251,242,226,.85); max-width: 20ch; margin-inline: auto; }

/* signposts: one wooden board per road, pointing the way it goes */
.lane__post { position: absolute; z-index: 1; left: 50%; bottom: clamp(5.5rem, 13svh, 8rem); transform: translateX(-50%); display: grid; justify-items: center; gap: .2rem; width: max-content; max-width: min(21rem, 90%); padding: .85rem 2.4rem; color: #fbf2e2;
  background: linear-gradient(180deg, rgba(255,235,200,.08), transparent 40%), repeating-linear-gradient(176deg, #33200f 0 9px, #2a1a0d 9px 15px, #301d0f 15px 23px);
  box-shadow: 0 0 0 2px rgba(243,178,127,.8) inset, 0 0 0 4px rgba(20,12,6,.9) inset, 0 18px 30px -14px rgba(0,0,0,.85);
  transition: transform 180ms var(--wp-ease), filter 180ms var(--wp-ease), opacity 300ms ease; }
.lane--left .lane__post { clip-path: polygon(9% 0, 100% 0, 100% 100%, 9% 100%, 0 50%); }
.lane--right .lane__post { clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%); }
.lane--straight .lane__post { clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 100%, 0 100%); padding-top: 1.2rem; }
.lane + .lane .lane__post { margin-left: calc(var(--blend) / 2); }
.lane__arrow { width: 11px; height: 11px; border-left: 2px solid #f3b27f; border-bottom: 2px solid #f3b27f; margin-bottom: .25rem; }
.lane--left .lane__arrow { transform: rotate(45deg); }
.lane--straight .lane__arrow { transform: rotate(135deg); }
.lane--right .lane__arrow { transform: rotate(-135deg); }
.lane__label { font: 400 clamp(1.2rem, 1.8vw, 1.55rem)/1.15 var(--wp-font-display); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.lane__sub { font-size: .95rem; font-weight: 600; color: #f6e2bb; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.lane:focus-visible { outline: none; }
.lane:focus-visible .lane__post { outline: 3px solid #f3b27f; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .lane:hover .lane__art { filter: brightness(1.14); }
  .lane:hover .lane__post { filter: brightness(1.15); transform: translateX(-50%) translateY(-3px); }
}

/* entering a fork, walking down a road, and the road held behind an ending */
.path__lanes.is-enter .lane { animation: lane-in 620ms var(--wp-ease) both; }
.path__lanes.is-enter .lane:nth-child(2) { animation-delay: 70ms; }
.path__lanes.is-enter .lane:nth-child(3) { animation-delay: 140ms; }
@keyframes lane-in { from { opacity: 0; } to { opacity: 1; } }
.path[data-walking] .lane, .path[data-state="end"] .lane { pointer-events: none; }
.path[data-walking] .lane:not(.is-chosen), .path[data-state="end"] .lane:not(.is-chosen) { flex-grow: .0001; opacity: 0; }
.path[data-walking] .lane.is-chosen .lane__art { transform: scale(1.06); }
.path[data-walking] .lane__post, .path[data-state="end"] .lane__post { opacity: 0; }
.path[data-state="end"] .lane__art { filter: brightness(.42) blur(2px); }
.path[data-state="end"] .lane__ph::before, .path[data-state="end"] .lane__ph > span { opacity: 0; }

.path__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(rgba(20,14,9,.88), rgba(20,14,9,.5) 30%, transparent 48%),
  linear-gradient(transparent 55%, rgba(20,14,9,.72) 100%); }

.path__hud { position: relative; z-index: 2; pointer-events: none; padding-top: clamp(1.4rem, 4svh, 3rem); text-align: center; }
.path__trail { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 .6rem; padding: 0; min-height: 1.6rem; }
.path__trail li { font-size: .88rem; font-weight: 600; color: #fbf2e2; padding: .28rem .85rem; border: 1px solid rgba(243,178,127,.7); border-radius: 999px; background: rgba(20,14,9,.86); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.path__trail-sub { font-weight: 400; color: #f0d6aa; }
.path__trail-sub::before { content: "·"; margin-inline: .35rem .2rem; color: #f3b27f; }
.path__trail li + li::before { content: none; }
.path__step { display: table; margin: 0 auto .6rem; padding: .22rem .9rem; font: 600 .95rem/1.3 var(--wp-font-text); letter-spacing: .04em; color: #ffd9b0; max-width: none; background: rgba(20,14,9,.86); border-radius: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.path__q { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.1; color: #fbf2e2; max-width: 22ch; margin: 0 auto; text-shadow: 0 1px 3px rgba(10,6,3,.9), 0 2px 22px rgba(10,6,3,.95), 0 0 48px rgba(10,6,3,.8); outline: none; }

.path__tools { grid-row: 3; align-items: end; position: relative; z-index: 3; pointer-events: none; display: flex; justify-content: center; gap: .6rem; padding-bottom: 1.2rem; }
.path__tool { pointer-events: auto; min-height: 44px; padding: 0 1.1rem; font: 600 .9rem/1 var(--wp-font-text); color: var(--bone); background: rgba(27,20,14,.7); border: 1px solid rgba(240,228,204,.35); border-radius: 999px; cursor: pointer; backdrop-filter: blur(4px); }
.path__tool:hover { border-color: var(--bone); }
.path__tool[hidden] { display: none; }

/* the ending: every game on that road, held up in front of it */
.path__result { grid-row: 2; position: relative; z-index: 2; display: grid; place-items: center; padding: 1.6rem 1rem 2rem; }
.path__result[hidden] { display: none; }
.finds { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 15rem)); justify-content: center; gap: 1.2rem; width: min(100%, 66rem); list-style: none; margin: 0; padding: 0; }
.find { display: flex; flex-direction: column; background: var(--paper); color: var(--bark); border: 1px solid var(--gilt); border-radius: var(--wp-radius); overflow: hidden; box-shadow: 0 0 0 5px rgba(27,20,14,.5), 0 34px 60px -28px rgba(0,0,0,.95); animation: omen-rise 600ms var(--wp-ease) both; }
.find:nth-child(2) { animation-delay: 80ms; }
.find:nth-child(3) { animation-delay: 160ms; }
.find:nth-child(4) { animation-delay: 240ms; }
@keyframes omen-rise { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.find__art { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--parch); border-bottom: 1px solid color-mix(in oklab, var(--gilt) 45%, transparent); }
.find__art img { width: 100%; height: 100%; object-fit: cover; }
.find__plate { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 45%, var(--paper), var(--parch) 70%), var(--parch); }
.find__plate svg { width: 34%; height: auto; aspect-ratio: 1; fill: var(--ember); opacity: .85; }
.find__body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: .9rem 1rem 1rem; text-align: left; }
.find__pub { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bark-soft); }
.find__name { font-size: 1.35rem; line-height: 1.15; color: var(--bark); margin: 0; }
.find__line { font-size: .92rem; line-height: 1.45; }
.find__more { margin-top: auto; padding-top: .3rem; min-height: 44px; display: inline-flex; align-items: center; color: var(--ember); font-weight: 600; text-underline-offset: .2em; }
/* Whole card is the link: the one real <a> stretches over the card (no nested anchors,
 * one tab stop, screen readers still hear a single "Buy a copy" style link). Cards with
 * no link (Mitty Rogue) stay plain. */
.find { position: relative; }
.find__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.find:has(.find__more) { cursor: pointer; transition: translate 180ms var(--wp-ease), box-shadow 180ms var(--wp-ease); }
.find:has(.find__more:focus-visible) { outline: 3px solid var(--ember); outline-offset: 4px; }
.find__more:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .find:has(.find__more):hover { translate: 0 -4px; box-shadow: 0 0 0 5px rgba(27,20,14,.5), 0 40px 60px -26px rgba(0,0,0,.95); }
  .find:has(.find__more):hover .find__more { text-decoration: underline; }
}
.path__nojs { padding-block: 2rem; }
.path__nojs a { color: #f3b27f; }

@media (prefers-reduced-motion: reduce) {
  .lane, .lane__art, .lane__post { transition: opacity 200ms linear; }
  .path[data-walking] .lane.is-chosen .lane__art { transform: none; }
  .find { animation: none; }
}

@media (max-width: 760px) {
  /* Phones: the question on dark ground, then the roads stacked, each lane
   * fading into the one above it, then the tools. */
  .path { --blend: 2.5rem; }
  .path__stage { display: flex; flex-direction: column; min-height: 0; }
  .path__hud { order: 1; padding: .9rem 1rem 1.1rem; }
  .path__q { font-size: 1.65rem; }
  .path__shade { display: none; }
  .path__lanes { position: relative; inset: auto; order: 2; flex-direction: column; }
  /* path.js fills the lanes after load; hold the first fork's three lanes'
   * height so the page below does not jump when they arrive. */
  .path__lanes:empty { min-height: 39rem; }
  .lane { flex: none; min-height: 13rem; }
  .lane + .lane { margin-left: 0; margin-top: calc(var(--blend) * -1); min-height: calc(13rem + var(--blend));
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--blend)); mask-image: linear-gradient(180deg, transparent, #000 var(--blend)); }
  .lane__ph { place-content: start center; padding: 1.3rem 1.2rem 0; }
  .lane + .lane .lane__ph { padding-left: 1.2rem; padding-top: calc(var(--blend) + 1.3rem); }
  .lane__ph::before { inset: .7rem .7rem 6rem; }
  .lane + .lane .lane__ph::before { left: .7rem; top: calc(var(--blend) + .7rem); }
  .lane__post { bottom: .9rem; padding: .65rem 2rem; max-width: 92%; }
  .lane--straight .lane__post { padding-top: .95rem; }
  .lane + .lane .lane__post { margin-left: 0; }
  .lane__label { font-size: 1.15rem; }
  .lane__sub { font-size: .78rem; }
  .path[data-walking] .lane:not(.is-chosen) { opacity: .25; }
  .path[data-state="end"] .path__lanes { display: none; }
  .path__result { order: 3; padding: 0 1rem 1.4rem; }
  .finds { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .8rem; }
  .find__name { font-size: 1.15rem; }
  .find__body { padding: .7rem .8rem .8rem; }
  .path__tools { order: 4; padding: .4rem 1rem 1.4rem; }
}

/* ------------------------------------------------------------ ledger --- */
.shrinks { padding-block: calc(var(--wp-section-y) * .8); }
.shrinks__in { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .shrinks__in { grid-template-columns: 1fr 2.1fr; gap: 4rem; align-items: start; } }
.shrinks h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--ember); margin-bottom: 1rem; display: flex; align-items: center; gap: .7rem; }
.shrinks h2 svg, .more__h svg { width: 30px; height: 30px; flex: 0 0 auto; fill: var(--ember); }
.shrinks__art { margin: 1.6rem 0 0; max-width: 15rem; }
.shrinks__art img { width: 100%; height: auto; border-radius: var(--wp-radius); border: 1px solid var(--ember); box-shadow: 0 20px 36px -24px rgba(42,29,19,.7); }
.shrinks__intro p { color: var(--bark); }
/* the intro band over the per-shrink sections: centred, one column */
.shrinks { border-top: var(--wp-hairline); }
.shrinks__in--band { display: block; text-align: center; }
.shrinks__in--band .shrinks__intro { max-width: 44rem; margin-inline: auto; }
.shrinks__in--band h2 { justify-content: center; }
.shrinks + .plate--more { border-top: var(--wp-hairline); }
.ledger { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: .85rem .9rem .85rem 0; border-bottom: var(--wp-hairline); }
.ledger thead th { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bark-soft); border-bottom-color: color-mix(in oklab, var(--bark) 40%, transparent); }
.ledger tbody th { font: 400 1.15rem/1.3 var(--wp-font-display); white-space: nowrap; }
.ledger tbody th a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in oklab, var(--ember) 45%, transparent); display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.ledger tbody td:nth-child(2) { color: var(--bark-soft); white-space: nowrap; }
.ledger td { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  .ledger thead { display: none; }
  .ledger tr { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; padding: .9rem 0; border-bottom: var(--wp-hairline); }
  .ledger th, .ledger td { border: 0; padding: 0; }
  .ledger td:last-child { grid-column: 1 / -1; margin-top: .3rem; }
  .ledger tbody td:nth-child(2) { align-self: end; font-size: .85rem; }
}

/* ------------------------------------------------------------- close --- */
.close { position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--bone); padding-block: clamp(13rem, 21vw, 18rem) var(--wp-section-y); --wp-ink: var(--bone); --wp-ink-soft: var(--bone-soft); --horizon: clamp(15rem, 25vw, 21rem); }
/* Back into the woods, the right way up: a band of the same dusk sky, the
 * treeline standing on its horizon, and night below where Joe and the form sit. */
.close__far { position: absolute; z-index: -3; left: 0; top: 0; width: 100%; max-width: none; height: calc(var(--horizon) + 4rem); object-fit: cover; object-position: 50% 20%; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(transparent calc(var(--horizon) - 2rem), var(--night) calc(var(--horizon) + 3rem)); }
.close__in { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .close__in { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
.close__portrait { margin: 0 0 1.4rem; width: 132px; }
.close__portrait img { border-radius: 50%; border: 2px solid var(--ember-hi); box-shadow: 0 0 0 6px rgba(27,20,14,.9), 0 20px 36px -18px rgba(0,0,0,.8); }
.close h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); color: #fbf2e2; margin-bottom: 1.2rem; }
.close p { color: var(--bone); }
.close .wp-lead { color: #f5ead6; }
.close__find { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid rgba(240,228,204,.2); }
.close__find a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(240,228,204,.2); }
.close__find a::after { content: "\2197"; color: var(--ember-hi); }
.close__find a:hover { color: #fff; }
.close :focus-visible { outline-color: var(--ember-hi); }

.letter { background: var(--paper); color: var(--bark); border-radius: var(--wp-radius); padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid var(--ember); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 40px 70px -40px rgba(0,0,0,.9); position: relative; }
.letter::before { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in oklab, var(--ember) 35%, transparent); border-radius: 2px; pointer-events: none; }
.letter__h { font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--ember); text-align: center; margin-bottom: 1.4rem; }
.letter__hp { display: none; }
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bark); }
.field label span { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--bark-soft); }
.field input, .field textarea { font: inherit; font-size: 1rem; color: var(--bark); background: #fffaf0; border: 1px solid color-mix(in oklab, var(--bark) 30%, transparent); border-radius: var(--wp-radius); padding: .75rem .85rem; min-height: 48px; width: 100%; transition: border-color 160ms var(--wp-ease), box-shadow 160ms var(--wp-ease); }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ember) 30%, transparent); }
.field input:user-invalid { border-color: #9b2c16; }
.letter .btn { margin-top: .6rem; }
.letter .btn[disabled] { opacity: .6; cursor: progress; }
.close .letter__note { font-size: .82rem; color: var(--bark-soft); margin: .9rem 0 0; text-align: center; max-width: none; }
.close .letter__status { color: var(--bark); margin: .6rem 0 0; text-align: center; font-weight: 600; max-width: none; min-height: 1.4em; }
.close .letter__status[data-tone="ok"] { color: var(--moss); }
.close .letter__status[data-tone="err"] { color: #8f2f12; }
.letter.is-sent .field, .letter.is-sent .btn, .letter.is-sent .letter__note { display: none; }
.close .letter.is-sent .letter__status { font: 400 1.35rem/1.4 var(--wp-font-display); color: var(--bark); padding: 1.5rem 0; }

.foot { background: var(--night); color: var(--bone-soft); border-top: 1px solid rgba(240,228,204,.12); font-size: .85rem; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.4rem; }
.foot p { margin: 0; }
.foot a { color: var(--bone); display: inline-block; min-height: 24px; }
.foot__built a { display: inline-flex; align-items: center; gap: .45rem; }
.foot__mark { flex: none; }

/* ------------------------------------------------------------ phones --- */
@media (max-width: 760px) {
  .mast__in { min-height: 62px; gap: .5rem; }
  .mast__brand { gap: .45rem; flex-shrink: 0; }
  .mast__brand img { width: auto; height: 32px; }
  .mast__word { font-size: 1.25rem; }
  .mast__word small { display: none; }
  .mast__link { display: none; }
  .gmenu > summary { padding: 0 .6rem; }
  .gmenu__list { position: fixed; top: 70px; left: 12px; right: 12px; transform: none; min-width: 0; }
  .btn--sm { padding: 0 .9rem; }
  .fan { --cw: 38vw; --step: 12deg; }
  .fan--etch, .gfan .fan { --cw: 34vw; --step: 16deg; padding-top: 4.2rem; }
  .gfan .fan--roll { --cw: 30vw; --step: 9deg; }
  .close { --horizon: 13rem; padding-top: 12rem; }
    .facts div { grid-template-columns: 7rem 1fr; }
  .plate__acts { max-width: none; }
}

/* ===================================================================
   2026-10-01: every game on Joe's list, in his popularity order.
   =================================================================== */

/* No. 1: Gloomhaven: Buttons & Bugs leads the shelf */
.top { padding-block: calc(var(--wp-section-y) * .15) var(--wp-section-y); }
.top__kicker { text-align: center; font: 400 clamp(1.9rem, 3.4vw, 2.7rem)/1.1 var(--wp-font-display); color: var(--bark); margin: 0 auto clamp(2rem, 4vw, 3.2rem); max-width: none; }
.top__in { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .top__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 5vw, 5rem); } }
.top__art { max-width: 36rem; justify-self: center; }
.top__text h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.05; color: var(--bark); }
.top__text p:not(.top__rank) { color: var(--bark); }
.top__rank { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bark-soft); max-width: none; }
.top__rank span { display: inline-block; padding: .28rem .6rem; border: 1px solid var(--ember); border-radius: 2px; color: #8a3512; letter-spacing: .1em; }
.top__rank--c { justify-content: center; }
.rule--l { margin: 1rem 0 1.5rem; max-width: 22rem; }

/* The ranked shelf: four across, so sixteen tiles land as four even rows */
.shelf-grid__sub { text-align: center; margin: -1.6rem auto 1.4rem; max-width: none; color: var(--bark-soft); font-style: italic; }
.shelf-grid__sub + .shelf-grid__path { margin-top: 0; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: 1.3rem; }
.tile__art { position: relative; }
.tile__name { font-size: clamp(1.25rem, 1.6vw, 1.45rem); }
.tile__pub { display: block; margin-top: .35rem; text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--bark-soft); }
.tile__line { margin-top: .55rem; font-size: .92rem; }
.tile__badge { position: absolute; left: .55rem; bottom: .55rem; padding: .3rem .55rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: #fff4e6; background: rgba(42, 29, 19, .86); border: 1px solid color-mix(in oklab, var(--gilt) 70%, transparent); border-radius: 2px; }
.tile__plate { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 45%, var(--paper), var(--parch) 70%), var(--parch); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) 45%, transparent), inset 0 0 0 7px var(--paper), inset 0 0 0 8px color-mix(in oklab, var(--gilt) 30%, transparent); }
.tile__plate svg { width: 34%; height: auto; aspect-ratio: 1; fill: var(--ember); opacity: .85; }

/* Games menu: the whole catalogue, two columns on wide screens */
.gmenu__list { max-height: min(78vh, 40rem); overflow-y: auto; }
@media (min-width: 60rem) {
  .gmenu__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: .3rem; min-width: 34rem; }
  .gmenu__list .gmenu__path { grid-column: 1 / -1; }
}
.gmenu__list a { min-height: 40px; }

/* More from Joe: an index, then one plate per game */
.more-index { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.more-index ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 60rem; }
.more-index a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .85rem; border: var(--wp-hairline); border-radius: 999px; background: var(--paper); color: var(--bark); text-decoration: none; font-size: .9rem; }
.more-index a:hover { border-color: var(--ember); color: #8a3512; }
.more-index svg { width: 18px; height: 18px; fill: var(--ember); }
.plate--more { scroll-margin-top: 6rem; }
.more__pub { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bark-soft) !important; }
.more__badge { display: inline-block; margin: -.3rem 0 1rem; padding: .3rem .6rem; font-size: .78rem; font-weight: 600; color: #fff4e6 !important; background: var(--bark); border-radius: 2px; }
.plate__solo { display: grid; gap: 1.5rem; align-items: start; max-width: 52rem; }
@media (min-width: 48rem) { .plate__solo { grid-template-columns: 8rem 1fr; gap: 2.5rem; } }
.plate__emblem { display: grid; place-items: center; width: 8rem; aspect-ratio: 1; border-radius: var(--wp-radius); background: radial-gradient(ellipse at 50% 45%, var(--paper), var(--parch) 75%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) 50%, transparent), inset 0 0 0 6px var(--paper), inset 0 0 0 7px color-mix(in oklab, var(--gilt) 30%, transparent); }
.plate__emblem svg { width: 52%; height: 52%; fill: var(--ember); }
.plate--solo .plate__tag { max-width: 40ch; }

/* Etchinstone's page: the two expansions */
.gexp { padding-block: calc(var(--wp-section-y) * .6); border-top: var(--wp-hairline); }
.gexp__h { text-align: center; font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--bark); margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.xps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 60rem) { .xps { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.xp { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 1.4rem; align-items: start; }
.xp__art { margin: 0; }
.xp__art img { width: 100%; height: auto; border-radius: var(--wp-radius); border: var(--wp-hairline); background: #fff; }
.xp__text h3 { font: 400 1.6rem/1.15 var(--wp-font-display); color: var(--bark); margin-bottom: .5rem; }
.xp__text p { color: var(--bark); margin-bottom: 1rem; }
@media (max-width: 40rem) { .xp { grid-template-columns: 1fr; } .xp__art { max-width: 14rem; } }

/* Narrowest phones: crest, wordmark, Games and Write to Joe all have to fit in 360px. */
@media (max-width: 380px) {
  .mast__brand img { height: 26px; }
  .mast__word { font-size: 1.1rem; }
  .mast__nav { gap: .2rem; }
  .gmenu > summary { padding: 0 .4rem; }
  .mast__nav .btn--sm { padding-inline: .85rem; }
}


/* 320px: the crest alone carries the brand. */
@media (max-width: 340px) { .mast__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ------------------------------------------------------- privacy, 404 --- */
.legal { max-width: 40rem; margin-inline: auto; padding-bottom: calc(var(--wp-section-y) * .8); }
.legal h2 { font: 400 1.45rem/1.2 var(--wp-font-display); color: var(--bark); margin: 2rem 0 .5rem; letter-spacing: 0; }
.legal p { margin: 0 0 1rem; }
.legal--actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }