/* Hallmark · shape: kept storybook, restacked · genre: playful · theme: brand (haylist-storybook) · redesign: full
 * paper: oklch(0.95 0.03 85) · accent: oklch(0.52 0.15 35) · display: Alfa Slab One · body: Nunito · hero: Stage (/) · nav: kept · footer: fence, stacked legal · signature: the barn cover as a framed plate under the headline
 * axes: warm paper/slab/barn red · posture: Stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: R, many inner pages still carry the old composition; shared tokens, controls and chrome were upgraded instead */
/* Hallmark · waive 44c · home hero · the barn plate under the headline is the hero picture and fills the first screen */
/* Hallmark · waive 79 · home hero · the same plate, so the gap measured is the picture */
/* Hallmark · waive 77 · catchphrase ribbon · a deliberate full-bleed tape strip between hero and cast, not a section */
/* ==========================================================
   The Hay-List — "storybook" theme
   Warm 2D storybook look: paper grain, brown ink, barn red, hay gold.
   ========================================================== */

:root {
  --paper: #f6eedc;
  --paper-2: #efe3c8;
  --card: #fbf6ea;
  --ink: #4a2c1a;
  --ink-soft: #6e5340;
  --barn: #b23f2c;
  --barn-dark: #8e2f20;
  --hay: #e0a93f;
  --hay-light: #f2d38c;
  --field: #6f8a3c;
  --sky: #a9cfe0;
  --accent: var(--barn);

  --font-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wobble: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --wobble-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --shadow: 4px 5px 0 var(--ink-85);
  --shadow-soft: 0 10px 30px -12px var(--ink-45);
  --maxw: 1180px;
  --ink-85: rgba(74, 44, 26, .85);
  --cream: #fffaf0;
  --white: #fffdf6;
  --paper-90: rgba(246, 238, 220, .9);
  --paper-92: rgba(246, 238, 220, .92);
  --black: #17110c;
  --ink-55: rgba(74, 44, 26, .55);
  --shade-35: rgba(0, 0, 0, .35);
  --shade-50: rgba(0, 0, 0, .5);
  --dark-82: rgba(40, 24, 12, .82);
  --white-08: rgba(255, 255, 255, .08);
  --paper-dim: #cdb99b;
  --card-85: rgba(251, 246, 234, .85);
  --ink-18: rgba(74, 44, 26, .18);
  --hay-pale: #fff3c4;
  --ink-25: rgba(74, 44, 26, .25);
  --hay-soft: #ffe9a8;
  --ink-45: rgba(74, 44, 26, .45);
  --ink-soft-text: #5d4433;
  --gap-section: clamp(4rem, 8vw, 7.5rem);
  --barn-25: rgba(178, 63, 44, .25);
  --mask-solid: #000; /* mask stop, never painted */
}

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

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip; /* safety net: never let one wide element make the whole page sideways-scroll on phones */
  color: var(--ink);
  background-color: var(--paper);
  /* paper grain */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .3  0 0 0 0 .17  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--barn); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--barn-dark); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }

.hand { font-family: var(--font-hand); }

.wrap { width: min(var(--maxw), 100% - 2rem); margin-inline: auto; }

.skip { position: absolute; left: 0; top: 0; transform: translateY(-200%); }
.skip:focus { transform: none; left: 1rem; top: 1rem; background: var(--card); padding: .5rem 1rem; z-index: 99; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand img { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); }
.brand span { font-family: var(--font-display); font-size: 1.45rem; }
.nav { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.nav a {
  font-family: var(--font-hand); font-size: 1.35rem; text-decoration: none; color: var(--ink);
  padding: .15rem .8rem; border-radius: var(--wobble); border: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--ink); background: var(--hay-light); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 2px solid var(--ink); border-radius: 10px; padding: .35rem .6rem; font: inherit; color: var(--ink); cursor: pointer; }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
         background: var(--paper); border-bottom: 3px solid var(--ink); padding: .75rem 1rem 1rem; }
  .nav.open { display: flex; }
  .nav a { text-align: center; }
}

/* ---------- buttons, chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em;
  color: var(--paper); background: var(--barn); text-decoration: none;
  padding: .7rem 1.4rem; border: 3px solid var(--ink); border-radius: var(--wobble);
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: var(--paper); transform: translate(-1px, -2px); box-shadow: 6px 7px 0 var(--ink-85); }
.btn.alt { background: var(--hay); color: var(--ink); }
.btn svg { width: 1.2em; height: 1.2em; }

.chip {
  display: inline-block; font-family: var(--font-hand); font-size: 1.1rem;
  padding: .05rem .7rem; border: 2px solid var(--ink); border-radius: var(--wobble-2); background: var(--card);
}

/* ---------- hero ---------- */
.hero { padding: 2.2rem 0 1rem; }
.hero-frame {
  position: relative; border: 4px solid var(--ink); border-radius: 28px 34px 22px 38px / 36px 22px 34px 26px;
  overflow: hidden; box-shadow: var(--shadow), var(--shadow-soft); background: var(--sky);
}
.hero-frame img { width: 100%; aspect-ratio: 1640 / 624; object-fit: cover; }
.hero-copy { text-align: center; padding: 2rem 0 .5rem; }
.hero-copy h1 { margin-bottom: .2em; }
.hero-copy .tagline { font-family: var(--font-hand); font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--ink-soft); margin: 0 0 1.4rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- sections ---------- */
section { padding: 3.2rem 0; }
.section-head { text-align: center; margin-bottom: 2rem; }
.section-head p { font-family: var(--font-hand); font-size: 1.4rem; color: var(--ink-soft); margin: 0; }
.prose { max-width: 720px; margin-inline: auto; font-size: 1.15rem; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.2rem; }

.divider { height: 26px; border: 0; margin: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'><path d='M0 13 C 20 3, 40 23, 60 13 S 100 3, 120 13' fill='none' stroke='%234a2c1a' stroke-width='2.5' stroke-linecap='round'/></svg>") repeat-x center; opacity: .55; }

/* ---------- cast grid ---------- */
.cast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .cast-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cast-grid { grid-template-columns: 1fr; } }
.cast-card {
  --c: var(--accent);
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.6rem 1.2rem 1.4rem; background: var(--card); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cast-card:nth-child(even) { border-radius: var(--wobble-2); }
.cast-card:hover { color: var(--ink); transform: rotate(-1deg) translateY(-4px); box-shadow: 7px 9px 0 var(--ink-85); }
.cast-card:nth-child(even):hover { transform: rotate(1deg) translateY(-4px); }
.cast-card .portrait { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; border: 4px solid var(--c); outline: 3px solid var(--ink); outline-offset: 2px; margin-bottom: 1rem; background: var(--paper-2); }
.cast-card .portrait img { width: 100%; height: 100%; object-fit: cover; }
.cast-card h3 { font-size: 1.45rem; margin: 0 0 .15rem; }
.cast-card .niche { font-weight: 800; color: var(--c); font-size: .95rem; }
.cast-card .quote { font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.25; margin: .6rem 0 0; }
.cast-card .handle { margin-top: .7rem; font-size: .9rem; color: var(--ink-soft); }

/* ---------- trailer ---------- */
.trailer { background: var(--paper-2); border-block: 3px solid var(--ink); }
.video-frame {
  position: relative; max-width: 960px; margin-inline: auto; aspect-ratio: 16/9;
  border: 4px solid var(--ink); border-radius: 22px 30px 20px 34px / 30px 20px 32px 24px; overflow: hidden;
  box-shadow: var(--shadow), var(--shadow-soft); background: var(--black);
}
.video-frame iframe, .video-frame img { width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-frame .play {
  position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none;
  background: linear-gradient(transparent 55%, var(--ink-55));
}
.video-frame .play span {
  width: 96px; height: 96px; border-radius: 50%; background: var(--barn); border: 4px solid var(--paper);
  display: grid; place-items: center; box-shadow: 0 8px 24px var(--shade-35); transition: transform .15s ease;
}
.video-frame .play:hover span { transform: scale(1.08); }
.video-frame .play svg { width: 40px; height: 40px; fill: var(--paper); margin-left: 8px; }
.video-frame .soon { position: absolute; left: 1rem; bottom: .9rem; color: var(--paper); font-family: var(--font-hand); font-size: 1.5rem; text-shadow: 0 2px 6px var(--shade-50); }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 960px; margin: 1.4rem auto 0; }
.thumbs img { border: 3px solid var(--ink); border-radius: 12px 16px 10px 18px; aspect-ratio: 16/9; object-fit: cover; }

/* ---------- rivalries ---------- */
.rivalries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1.4rem; }
.rivalry { display: flex; gap: 1rem; align-items: flex-start; background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble-2); padding: 1rem 1.1rem; }
.rivalry .faces { display: flex; flex-shrink: 0; }
.rivalry .faces img { width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--ink); object-fit: cover; background: var(--paper-2); }
.rivalry .faces img + img { margin-left: -16px; }
.rivalry h3 { font-size: 1.1rem; margin: 0 0 .2rem; }
.rivalry p { margin: 0; font-size: .98rem; }

/* ---------- follow ---------- */
.follow { text-align: center; }
.socials { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.social {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink);
  background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble); padding: .55rem 1.1rem; box-shadow: var(--shadow);
  font-weight: 800;
}
.social:hover { color: var(--ink); background: var(--hay-light); }
.social svg { width: 26px; height: 26px; }
.social small { font-weight: 400; color: var(--ink-soft); }

/* ---------- character page ---------- */
.char-cover { border-bottom: 3px solid var(--ink); background: var(--sky); }
.char-cover img { width: 100%; max-height: 460px; object-fit: cover; }
.char-head { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: end; margin-top: -112px; position: relative; }
.char-head .portrait { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; border: 6px solid var(--c, var(--accent)); outline: 4px solid var(--ink); outline-offset: 2px; background: var(--paper-2); box-shadow: var(--shadow-soft); }
.char-head .portrait img { width: 100%; height: 100%; object-fit: cover; }
.char-head h1 { margin: 0; }
.char-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.char-bio { font-family: var(--font-hand); font-size: 1.55rem; line-height: 1.3; margin: 1.6rem 0 0; color: var(--ink-soft); }
.char-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 0; }
.char-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; margin-top: 2rem; }
.char-body .prose { max-width: none; margin: 0; }
.char-body .prose h2:first-child { margin-top: 0; }
.notes { display: flex; flex-direction: column; gap: 1.3rem; }
.note {
  background: var(--cream); border: 3px solid var(--ink); border-radius: var(--wobble); padding: 1.1rem 1.3rem; box-shadow: var(--shadow);
  transform: rotate(-.6deg);
}
.note:nth-child(even) { transform: rotate(.7deg); border-radius: var(--wobble-2); }
.note h3 { font-size: 1.1rem; margin-bottom: .4rem; color: var(--c, var(--accent)); }
.note ul { margin: 0; padding-left: 1.1rem; }
.note li { margin: .25rem 0; }
.note.quotes li { font-family: var(--font-hand); font-size: 1.3rem; list-style: none; margin-left: -1.1rem; }
.note.quotes li::before { content: "“"; font-family: var(--font-display); color: var(--c, var(--accent)); margin-right: .2rem; }
.note .socials { justify-content: flex-start; gap: .5rem; }
.note .social { padding: .35rem .7rem; box-shadow: none; font-size: .9rem; }
.note .social svg { width: 22px; height: 22px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.2rem; }
.gallery figure { margin: 0; background: var(--card); border: 3px solid var(--ink); border-radius: 10px; padding: .55rem .55rem .3rem; box-shadow: var(--shadow); transition: transform .15s ease; }
.gallery figure:nth-child(odd) { transform: rotate(-1.2deg); }
.gallery figure:nth-child(even) { transform: rotate(1deg); }
.gallery figure:hover { transform: rotate(0) scale(1.03); }
.gallery button { all: unset; cursor: zoom-in; display: block; }
.gallery img { width: 100%; aspect-ratio: 1856/2304; object-fit: cover; border-radius: 4px; }
.gallery figcaption { font-family: var(--font-hand); font-size: 1.2rem; text-align: center; padding: .3rem 0 0; }

.turnaround img { border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); background: var(--white); }

.char-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 820px); }
.lightbox::backdrop { background: var(--dark-82); }
.lightbox img { max-height: 86vh; width: auto; margin-inline: auto; border: 4px solid var(--paper); border-radius: 10px; }
.lightbox p { color: var(--paper); text-align: center; font-family: var(--font-hand); font-size: 1.5rem; margin: .5rem 0 0; }
.lightbox button { position: absolute; top: .4rem; right: .4rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; cursor: pointer; color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { margin-top: 3rem; border-top: 3px solid var(--ink); background: var(--ink); color: var(--paper-2); }
.site-footer .fence { height: 34px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='34' viewBox='0 0 90 34'><rect x='8' y='2' width='9' height='32' rx='2' fill='%23f6eedc'/><rect x='0' y='9' width='90' height='6' fill='%23f6eedc'/><rect x='0' y='21' width='90' height='6' fill='%23f6eedc'/></svg>") repeat-x bottom; background-color: var(--field); }
.site-footer .wrap { padding: 1.8rem 0 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.site-footer p { margin: 0; font-size: .95rem; }
.foot-about { flex: 1 1 340px; min-width: 0; }
.foot-follow { flex: 0 1 auto; min-width: 0; }
.foot-follow .socials { flex-wrap: wrap; gap: .5rem; }
.site-footer .social span { font-size: .9rem; }
.site-footer .social { padding: .3rem .7rem; gap: .45rem; }
.site-footer .social-icon { padding: .35rem .55rem; }
.site-footer a { color: var(--hay-light); }
.site-footer .socials { justify-content: flex-start; }
.site-footer .social { background: transparent; color: var(--paper); border-color: var(--paper-2); box-shadow: none; }
.site-footer .social:hover { background: var(--white-08); color: var(--paper); }
.site-footer small { display: block; color: var(--paper-dim); margin-top: .45rem; font-size: .85rem; }
.foot-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--paper); margin-bottom: .3rem; }

@media (max-width: 820px) {
  .char-head { grid-template-columns: 1fr; text-align: center; justify-items: center; margin-top: -88px; }
  .char-head .portrait { width: 180px; height: 180px; }
  .char-meta { justify-content: center; }
  .char-cta { justify-content: center; }
  .char-body { grid-template-columns: 1fr; }
  .foot-follow { flex: 1 1 100%; min-width: 0; }
  .foot-follow .socials { flex-wrap: wrap; }
  .thumbs { grid-template-columns: 1fr 1fr; }
}

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

/* ---------- cast page banner ---------- */
.cast-banner { position: relative; border-bottom: 4px solid var(--ink); background: var(--sky); overflow: hidden; }
.cast-banner img {
  width: 100%; aspect-ratio: 2560 / 1000; max-height: 780px;
  object-fit: cover;
  /* anchor to the bottom so the characters stay in view on ultrawide screens */
  object-position: center bottom -16vw;
}
.cast-banner-title {
  position: absolute; left: 0; right: 0; top: 6%;
  text-align: center; padding: 0 1rem;
}
.cast-banner-title h1 {
  margin: 0; color: var(--ink);
  text-shadow: 0 0 18px var(--paper-90), 0 0 4px var(--paper-90);
}
.cast-banner-title p {
  display: inline-block; margin: .5rem 0 0; padding: .1rem 1rem;
  font-family: var(--font-hand); font-size: clamp(1.15rem, 2vw, 1.5rem);
  background: var(--card-85); border: 2px solid var(--ink); border-radius: var(--wobble);
}
.cast-intro { text-align: center; margin-bottom: 2.2rem; }

@media (max-width: 760px) {
  .cast-banner img { aspect-ratio: 5 / 4; object-position: 58% 48%; }
  .cast-banner-title { position: static; padding: 1.4rem 1rem 1.2rem; background: var(--paper); border-top: 4px solid var(--ink); }
  .cast-banner-title h1 { text-shadow: none; }
}

/* ---------- merch ---------- */
.merch-intro { text-align: center; margin-bottom: 2.2rem; }
.merch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; max-width: 900px; margin-inline: auto; }
.merch-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  padding: 1.6rem 1.4rem; background: var(--card); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.merch-card:hover { color: var(--ink); transform: rotate(-1deg) translateY(-4px); box-shadow: 7px 9px 0 var(--ink-85); }
.merch-card.shop .btn { margin-top: .4rem; }
.merch-card.soon { border-style: dashed; box-shadow: none; opacity: .85; border-radius: var(--wobble-2); }
.merch-card h3 { margin: .4rem 0 0; font-size: 1.4rem; }
.merch-card p { margin: 0 0 .4rem; }
.merch-thumbs { display: grid; grid-template-columns: repeat(2, 110px); gap: .3rem; }
.merch-thumbs img { width: 110px; height: 110px; }
.merch-soon-art { width: 100%; max-width: 300px; height: auto; margin: .6rem 0 .4rem; }

.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 980px; margin-inline: auto; }
.platform {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: .9rem; row-gap: .25rem; align-items: center;
  padding: 1rem 1.2rem; background: var(--card); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: var(--wobble-2); box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.platform:hover { color: var(--ink); background: var(--cream); transform: translate(-1px, -2px); box-shadow: 6px 7px 0 var(--ink-85); }
.platform-icon { grid-row: span 2; width: 56px; height: 56px; }
.platform-icon svg { width: 56px; height: 56px; }
.platform-text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; display: block; line-height: 1.2; }
.platform-text small { color: var(--ink-soft); font-weight: 700; }
.platform-how { font-size: .95rem; color: var(--ink-soft); line-height: 1.4; }

.sticker-section { background: var(--paper-2); border-block: 3px solid var(--ink); }
.sticker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.sticker { all: unset; cursor: zoom-in; display: block; border-radius: 16px; transition: transform .15s ease; }
.sticker:hover, .sticker:focus-visible { transform: scale(1.08) rotate(-2deg); }
.sticker:focus-visible { outline: 3px solid var(--barn); outline-offset: 2px; }
.sticker img { width: 100%; height: auto; }
.lightbox img[src$=".webp"] { background: transparent; }

@media (max-width: 900px) {
  .sticker-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .merch-grid, .platforms { grid-template-columns: 1fr; }
  .sticker-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- call backgrounds ---------- */
.merch-thumbs.wide { grid-template-columns: repeat(2, 170px); }
.merch-thumbs.wide img { width: 170px; height: 96px; object-fit: cover; border: 2px solid var(--ink); border-radius: 8px; }
.platform-wide { grid-column: 1 / -1; max-width: 640px; width: 100%; justify-self: center; }
.bg-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 980px; margin: 1.6rem auto 0; }
.bg-app { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem; background: var(--card); border: 2px dashed var(--ink); border-radius: var(--wobble-2); font-size: .95rem; color: var(--ink-soft); }
.bg-app strong { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.bg-note { text-align: center; color: var(--ink-soft); font-size: .95rem; margin: 1rem auto 0; max-width: 640px; }
.bg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.bg-card { margin: 0; background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow); overflow: hidden; }
.bg-thumb { all: unset; display: block; cursor: zoom-in; }
.bg-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 3px solid var(--ink); transition: filter .15s ease; }
.bg-thumb:hover img, .bg-thumb:focus-visible img { filter: brightness(1.06); }
.bg-thumb:focus-visible { outline: 3px solid var(--barn); outline-offset: -3px; }
.bg-card figcaption { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; padding: .8rem 1rem 1rem; }
.bg-card figcaption strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }
.bg-card figcaption > span:not(.bg-dl) { grid-column: 1; font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-soft); }
.bg-dl { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .4rem; }
.bg-dl .chip { text-decoration: none; cursor: pointer; }
.lightbox-wide { max-width: min(94vw, 1400px); }
.lightbox-wide img { width: 100%; height: auto; }
@media (max-width: 760px) {
  .bg-grid, .bg-apps { grid-template-columns: 1fr; }
  .merch-thumbs.wide { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .merch-thumbs.wide img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- creator (about page) ---------- */
.creator { display: flex; align-items: center; gap: .8rem; }
.creator-link { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 50%; background: var(--card); box-shadow: var(--shadow); transition: transform .12s ease; }
.creator-link:hover { transform: rotate(-8deg) scale(1.06); }
.creator-link svg { width: 30px; height: 30px; }

/* ---------- link-in-bio page (/links/) ---------- */
.links-page { min-height: 100vh; }
.lk section { padding: 0; }
.lk { width: min(520px, 100% - 2rem); margin: 0 auto; padding: 2rem 0 2.5rem; text-align: center; }
.lk-logo { width: 132px; height: 132px; object-fit: cover; margin: 0 auto .8rem; border-radius: 50%; border: 3px solid var(--ink); box-shadow: var(--shadow); background: var(--card); }
.lk-head h1 { font-size: clamp(2rem, 8vw, 2.6rem); margin: 0 0 .2rem; }
.lk-tag { font-size: 1.25rem; line-height: 1.3; color: var(--ink-soft); margin: 0 0 1.6rem; }
.lk-buttons { display: grid; gap: .95rem; }
.lk-btn {
  display: flex; align-items: center; gap: .85rem; text-align: left; text-decoration: none; color: var(--ink);
  background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow);
  padding: .75rem 1.1rem; transition: transform .12s ease, background .12s ease;
}
.lk-btn:nth-child(even) { border-radius: var(--wobble-2); }
.lk-btn:hover, .lk-btn:focus-visible { color: var(--ink); background: var(--hay-light); transform: translate(-1px, -2px); box-shadow: 6px 7px 0 var(--ink-85); }
.lk-btn.lk-barn { background: var(--barn); color: var(--paper); }
.lk-btn.lk-barn:hover { background: var(--barn-dark); color: var(--paper); }
.lk-btn.lk-barn small { color: var(--hay-light); }
.lk-drop { min-width: 0; }
.lk-drop > summary { list-style: none; cursor: pointer; }
.lk-drop > summary::-webkit-details-marker { display: none; }
.lk-drop:nth-child(even) > summary { border-radius: var(--wobble-2); }
.lk-drop .lk-arrow { transition: transform .15s ease; }
.lk-drop[open] .lk-arrow { transform: rotate(180deg); }
.lk-sub { list-style: none; margin: .6rem 0 0; padding: .4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble-2); }
.lk-sub a { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; text-align: left; text-decoration: none; color: var(--ink); border-radius: 12px; border-left: 5px solid var(--c); min-width: 0; }
.lk-sub a:hover, .lk-sub a:focus-visible { background: var(--hay-light); color: var(--ink); }
.lk-sub svg { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; }
.lk-sub span { display: flex; flex-direction: column; min-width: 0; }
.lk-sub strong { font-family: var(--font-display); font-weight: 400; font-size: 1rem; line-height: 1.15; }
.lk-sub small { font-size: .75rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-ico { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; }
.lk-ico svg { width: 2rem; height: 2rem; fill: currentColor; }
.lk-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lk-txt strong { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; letter-spacing: .02em; line-height: 1.2; }
.lk-txt small { font-size: .9rem; color: var(--ink-soft); }
.lk-arrow { font-family: var(--font-display); font-size: 1.2rem; }
.lk-cast { margin-top: 2.3rem; }
.lk-cast h2 { font-size: 1.5rem; margin-bottom: .9rem; }
.lk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem .6rem; }
.lk-char { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); }
.lk-char img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 0 0 4px var(--c), var(--shadow); background: var(--card); transition: transform .12s ease; }
.lk-char:hover img { transform: translateY(-3px) rotate(-3deg); }
.lk-char span { font-family: var(--font-display); font-size: 1rem; margin-top: .55rem; line-height: 1.15; }
.lk-char small { font-size: .78rem; color: var(--ink-soft); line-height: 1.25; }
.lk-follow { margin-top: 2.2rem; }
.lk-icons { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.lk-icons a { width: 50px; height: 50px; display: grid; place-items: center; background: var(--card); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 4px 0 var(--ink-85); }
.lk-icons a:hover { background: var(--hay-light); }
.lk-icons svg { width: 26px; height: 26px; }
.lk-foot { font-size: .82rem; color: var(--ink-soft); margin-top: 1.4rem; }

/* ---------- 2026-10 additions: latest videos, farm teaser, product strip, 404 ---------- */
.center-cta, .center { text-align: center; }
.center-cta { margin: 1.4rem 0 0; }
.small-note { font-size: .92rem; color: var(--ink-soft); }
.latest .video-frame { max-width: 960px; margin-inline: auto; }

.farm-teaser { background: var(--paper-2); border-block: 3px solid var(--ink); }
.farm-teaser-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.2rem; align-items: center; }
.farm-teaser-art img { border: 4px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow); transition: transform .2s; }
.farm-teaser-art:hover img { transform: rotate(-1deg) scale(1.01); }
.farm-teaser h2 { margin-bottom: .3em; }
@media (max-width: 820px) { .farm-teaser-inner { grid-template-columns: 1fr; } }

a.rivalry { color: var(--ink); text-decoration: none; transition: transform .15s; }
a.rivalry:hover { color: var(--ink); transform: translateY(-3px); }

/* merch products: each one stands on its own coloured stage (sun rays + spotlight) so it pops */
.product-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; max-width: 1080px; margin: 0 auto 1.6rem; }
.product { --stage: var(--hay); display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .7rem 1rem; background: var(--card); border: 3px solid var(--ink); border-radius: 22px 30px 20px 34px / 30px 20px 34px 22px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; text-align: center; transition: transform .15s, box-shadow .15s; }
.product:hover { color: var(--ink); transform: rotate(-1deg) translateY(-4px); box-shadow: 7px 9px 0 var(--ink-85); }
.product:nth-child(even):hover { transform: rotate(1deg) translateY(-4px); }
.product-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: .35rem; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 16px 22px 14px 24px / 22px 14px 24px 16px;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 253, 246, .75) 0 28%, transparent 62%),
    repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 253, 246, .2) 0 7.5deg, transparent 7.5deg 15deg),
    var(--stage); }
.product img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(74, 44, 26, .38)); }
.product-name { font-weight: 800; line-height: 1.25; font-size: 1.02rem; }
.product-price { position: absolute; top: .5rem; right: .5rem; z-index: 1; font-family: var(--font-display); font-size: 1.05rem; color: var(--paper);
  background: var(--barn); border: 2.5px solid var(--ink); border-radius: 999px; padding: .2rem .65rem; rotate: 6deg; box-shadow: 2px 3px 0 var(--ink-85); }
.product-go { font-family: var(--font-hand); font-size: 1.05rem; color: var(--barn); }
.product:hover .product-go { text-decoration: underline; }

/* instant downloads: the shop covers, framed like prints, with a download tag */
.digital-row { max-width: 1080px; margin: 3rem auto 1.4rem; text-align: center; }
.digital-row h2 { margin: 0; }
.digital-row > p { margin: .3rem 0 1.4rem; font-family: var(--font-hand); font-size: 1.2rem; color: var(--ink-soft); }
.digital-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.digital { display: flex; flex-direction: column; align-items: center; gap: .45rem; color: var(--ink); text-decoration: none; text-align: center; transition: transform .15s; }
.digital:hover { color: var(--ink); transform: translateY(-4px) rotate(-1deg); }
.digital-cover { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2);
  border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow); transition: box-shadow .15s; }
.digital:hover .digital-cover { box-shadow: 7px 9px 0 var(--ink-85); }
.digital-cover img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s var(--ease-out-expo, ease); }
.digital:hover .digital-cover img { scale: 1.05; }
.digital-tag { position: absolute; left: -.2rem; top: 42%; font-family: var(--font-display); font-size: .85rem; letter-spacing: .03em; color: var(--ink);
  background: var(--hay); border: 2.5px solid var(--ink); border-left: 0; border-radius: 0 999px 999px 0; padding: .2rem .8rem .2rem .9rem; }
.digital-tag::before { content: "\2193\00a0"; }
.digital .chip { background: var(--hay-light); }
.merch-grid { margin-top: 2.4rem; }
@media (max-width: 860px) { .product-strip, .digital-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

.notfound { display: flex; gap: 2rem; align-items: center; justify-content: center; text-align: left; }
.notfound img { width: 180px; flex-shrink: 0; }
.notfound-links { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 640px) { .notfound { flex-direction: column; text-align: center; } .notfound-links { justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  .farm-teaser-art:hover img, a.rivalry:hover, .product:hover, .digital:hover, .btn:hover, a.merch-card:hover { transform: none !important; }
  .digital-cover img { transition: none !important; scale: none !important; }
}
.email-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; vertical-align: middle; background: var(--card); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 var(--ink-85); }
.email-icon:hover { background: var(--hay-light); }
.email-icon svg { width: 1.4rem; height: 1.4rem; }
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 560px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble-2); box-shadow: var(--shadow); padding: .9rem 1.1rem; }
.consent[hidden] { display: none; }
.consent p { margin: 0; font-size: .95rem; flex: 1 1 260px; }
.consent .btn { padding: .35rem .9rem; font-size: .95rem; }

/* ---------- merch grid: one big shop tile (2x2) + small tiles (1x1) ---------- */
.merch-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; max-width: 1040px; grid-auto-flow: dense; }
.merch-card.shop { grid-column: span 2; grid-row: span 2; justify-content: center; }
.merch-card:not(.shop) { padding: .9rem .8rem 1rem; gap: .3rem; border-radius: var(--wobble-2); justify-content: center; }
.merch-card:not(.shop) h3 { font-size: 1.02rem; margin-top: .2rem; }
.merch-card:not(.shop) p { display: none; }
.merch-card:not(.shop) .chip { font-size: .8rem; padding: .05rem .5rem; }
.merch-card:not(.shop) .merch-thumbs,
.merch-card:not(.shop) .merch-thumbs.wide { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 160px; gap: .25rem; }
.merch-card:not(.shop) .merch-thumbs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.merch-card:not(.shop) .merch-thumbs.wide img { aspect-ratio: 16 / 9; object-fit: cover; border-width: 1.5px; border-radius: 5px; }
@media (max-width: 760px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); }
  .merch-card.shop { grid-column: 1 / -1; grid-row: auto; }
}

/* small merch tiles: same height as the shop tile (span both rows), same width as before */
.merch-card:not(.shop) { grid-row: span 2; justify-content: center; gap: .5rem; }
.merch-card:not(.shop) p { display: block; font-size: .92rem; line-height: 1.4; margin: 0 0 .3rem; }
.merch-card:not(.shop) .merch-thumbs,
.merch-card:not(.shop) .merch-thumbs.wide { max-width: 180px; }
@media (max-width: 760px) { .merch-card:not(.shop) { grid-row: auto; } }

/* Press page (2026-10) */
.prose p > img { display: block; width: 100%; height: auto; border-radius: 14px; margin: 1.4em 0; box-shadow: 0 8px 24px var(--ink-18); }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: 1rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .55em .6em; border-bottom: 1px solid var(--paper-2); }
.prose th { font-weight: 700; border-bottom: 2px solid var(--hay); }
.prose td:first-child { font-size: 1.3rem; }
.prose hr { border: 0; border-top: 2px dashed var(--paper-2); margin: 2.4em 0 1.2em; }

/* ---------- farm games (/games/) ---------- */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.game-card {
  --c: var(--accent);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
  padding: 1.4rem 1.2rem 1.4rem; background: var(--card); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.game-card:nth-child(even) { border-radius: var(--wobble-2); }
a.game-card:hover { color: var(--ink); transform: rotate(-1deg) translateY(-4px); box-shadow: 7px 9px 0 var(--ink-85); }
.game-card .portrait { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 4px solid var(--c); outline: 3px solid var(--ink); outline-offset: 2px; margin-bottom: .6rem; background: var(--paper-2); }
.game-card .portrait img { width: 100%; height: 100%; object-fit: cover; }
.game-card .portrait.whole img { object-fit: contain; padding: 12px 12px 0; object-position: 50% 100%; background: var(--hay-light); }
.game-card .who { font-weight: 800; color: var(--c); font-size: .95rem; }
.game-card h3 { font-size: 1.45rem; margin: 0; }
.game-card p { font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.25; margin: .1rem 0 .7rem; flex: 1; }
.game-card.soon { opacity: .82; }
.game-card.soon .portrait { filter: saturate(.75); }
.center { text-align: center; }
.game-card .mini-board { width: 100%; margin: -.2rem 0 .9rem; padding: .45rem .7rem; background: var(--paper); border: 2px dashed var(--ink); border-radius: 12px; text-align: left; }
.game-card .mini-board .mb-title { font-family: var(--font-display); font-size: .85rem; text-align: center; margin-bottom: .2rem; }
.game-card .mini-board ol { list-style: none; margin: 0; padding: 0; font-family: var(--font-hand); font-size: 1.1rem; }
.game-card .mini-board li { display: flex; gap: .5rem; }
.game-card .mini-board .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-card .mini-board .sc { font-weight: 800; font-family: var(--font-body); font-size: .95rem; }

/* ---------- scoreboards (/games/scores/) ---------- */
.record { max-width: 640px; margin: 0 auto 2.4rem; padding: 1.4rem 1.4rem 1.6rem; background: var(--white)3c4; border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow); }
.record h2 { text-align: center; margin: 0 0 .2rem; font-size: clamp(1.5rem, 4vw, 2rem); }
.record .hand { text-align: center; font-size: 1.25rem; margin: 0 0 1rem; color: var(--ink-soft); }
.record-rows { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.rec-row { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; background: var(--card); color: var(--ink); text-decoration: none; border: 2px solid var(--ink); border-radius: 14px; }
.rec-row:hover { color: var(--ink); background: var(--cream); }
.rec-row.hl { outline: 3px solid var(--barn); outline-offset: 2px; }
.rec-row.none { opacity: .65; }
.rec-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); background: var(--hay-light); }
.rec-mid { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.rec-mid strong { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.rec-score { font-family: var(--font-display); font-size: 1.35rem; white-space: nowrap; }
.muted { color: var(--ink-soft); font-family: var(--font-hand); font-size: 1.1rem; }
.boards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 380px)); justify-content: center; gap: 1.6rem; }
.board-card { --c: var(--accent); display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem; background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow); }
.board-card:nth-child(even) { border-radius: var(--wobble-2); }
.bc-head { display: flex; align-items: center; gap: .8rem; }
.bc-head .portrait { width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid var(--c); outline: 2px solid var(--ink); outline-offset: 1px; background: var(--paper-2); }
.bc-head .portrait img { width: 100%; height: 100%; object-fit: cover; }
.bc-head .portrait.whole img { object-fit: contain; padding: 4px 4px 0; object-position: 50% 100%; background: var(--hay-light); }
.bc-head .who { font-weight: 800; color: var(--c); font-size: .9rem; }
.bc-head h3 { margin: 0; font-size: 1.35rem; }
.bc-tabs { display: flex; gap: .4rem; }
.bc-tabs button { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink); background: none; border: 2px solid transparent; border-radius: 8px; padding: 0 .6rem; cursor: pointer; }
.bc-tabs button[aria-pressed="true"] { border-color: var(--ink); background: var(--hay-light); }
.bc-list { list-style: none; margin: 0; padding: 0; flex: 1; font-family: var(--font-hand); font-size: 1.15rem; }
.bc-list li { display: flex; gap: .6rem; padding: .1rem .3rem; border-bottom: 1px dashed var(--ink-25); }
.bc-list li:last-child { border-bottom: 0; }
.bc-list li.me { background: var(--hay-soft); border-radius: 6px; font-weight: 700; }
.bc-list .n { width: 1.8rem; opacity: .7; }
.bc-list .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-list .sc { font-family: var(--font-body); font-weight: 800; font-size: 1rem; }
.board-card .btn { align-self: center; }
.games-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
/* home page "Farm Games" strip */
.home-games { background: var(--paper-2); border-block: 3px solid var(--ink); }
.home-games .games-grid { margin-top: 0; }

/* ---------- home: watch row + explore tiles ---------- */
.watch-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.explore { background: var(--paper-2); border-block: 3px solid var(--ink); }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.explore-card {
  --c: var(--accent);
  display: flex; flex-direction: column; background: var(--card); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.explore-card:nth-child(even) { border-radius: var(--wobble-2); }
.explore-card:hover { color: var(--ink); transform: rotate(-1deg) translateY(-4px); box-shadow: 7px 9px 0 var(--ink-85); }
.explore-card:nth-child(even):hover { transform: rotate(1deg) translateY(-4px); }
.explore-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 3px solid var(--ink); background: var(--sky); }
.explore-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.explore-body h3 { font-size: 1.35rem; margin: 0; }
.explore-body p { margin: 0; font-size: 1rem; flex: 1; }
.explore-body .chip { margin-top: .3rem; border-color: var(--c); }
@media (max-width: 900px) { .explore-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .explore-card:hover { transform: none !important; } }

/* shop card (merch page) and Merch tile (home): the shop's product photos on a barn-red sun-ray stage, same look as the product cards */
.merch-card.shop { padding: .9rem .9rem 1.4rem; }
.shop-stage {
  position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; margin-bottom: .3rem;
  border: 3px solid var(--ink); border-radius: 18px 26px 16px 28px / 26px 16px 28px 18px;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 253, 246, .55) 0 22%, transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 58%, rgba(255, 253, 246, .16) 0 6deg, transparent 6deg 12deg),
    radial-gradient(ellipse at 50% 58%, #d4553c, var(--barn) 55%, var(--barn-dark));
}
.explore-card .shop-stage { aspect-ratio: 4 / 3; margin: 0; border: 0; border-bottom: 3px solid var(--ink); border-radius: 0; }
.shop-stage img {
  position: absolute; width: auto; aspect-ratio: auto; object-fit: contain; border: 0; background: none;
  filter: drop-shadow(0 12px 10px rgba(40, 18, 8, .45));
  transition: translate .35s var(--ease-out-expo, ease), rotate .35s var(--ease-out-expo, ease);
}
.shop-stage .ss-tote     { height: 54%; left: 2%;  bottom: 9%;  rotate: -10deg; }
.shop-stage .ss-tee      { height: 56%; right: 2%; bottom: 10%; rotate: 9deg; }
.shop-stage .ss-hoodie   { height: 74%; left: 50%; bottom: 6%;  translate: -50% 0; z-index: 1; }
.shop-stage .ss-mug      { height: 31%; right: 11%; bottom: 3%; z-index: 2; rotate: -4deg; }
.shop-stage .ss-stickers { height: 33%; left: 10%; bottom: 2%;  z-index: 2; rotate: -7deg; }
.shop-badge {
  position: absolute; top: .7rem; right: .7rem; z-index: 3; display: grid; place-items: center; align-content: center; width: 4.6rem; height: 4.6rem;
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--ink);
  background: var(--hay); border: 3px solid var(--ink); border-radius: 50%; rotate: 10deg; box-shadow: 2px 3px 0 var(--ink-85);
}
.shop-badge small { display: block; font-family: var(--font-hand); font-size: .95rem; }
.merch-card.shop h3 { font-size: 1.7rem; }
.merch-card.shop .btn { font-size: 1.1rem; }
:is(.explore-card, .merch-card.shop):hover .ss-tote     { rotate: -15deg; translate: -5% -3%; }
:is(.explore-card, .merch-card.shop):hover .ss-tee      { rotate: 14deg; translate: 5% -3%; }
:is(.explore-card, .merch-card.shop):hover .ss-hoodie   { translate: -50% -4%; }
:is(.explore-card, .merch-card.shop):hover .ss-mug      { rotate: 6deg; translate: 4% 0; }
:is(.explore-card, .merch-card.shop):hover .ss-stickers { rotate: -12deg; translate: -4% 0; }
@media (prefers-reduced-motion: reduce) { .shop-stage img { transition: none; } }

/* games tile: our own game sprites on the Send It! farm backdrop */
.games-scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--sky); }
.games-scene img {
  position: absolute; width: auto; aspect-ratio: auto; object-fit: contain; border: 0; background: none;
  filter: drop-shadow(3px 4px 0 rgba(74, 44, 26, .3));
  transition: translate .4s var(--ease-out-expo, ease), rotate .4s var(--ease-out-expo, ease);
}
.games-scene .gs-bg       { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: none; }
.games-scene .gs-cluckson { height: 50%; left: 3%;  bottom: 6%; }
.games-scene .gs-dottie   { height: 54%; left: 27%; bottom: 4%; z-index: 1; }
.games-scene .gs-torque   { height: 33%; right: 3%; bottom: 3%; z-index: 2; }
.games-scene .gs-turbo    { height: 37%; right: 7%; top: 8%; rotate: -6deg; }
.games-scene .gs-acorn    { height: 11%; left: 22%; top: 16%; rotate: 14deg; }
.games-scene .gs-donut    { height: 12%; left: 40%; top: 6%; rotate: -12deg; }
.explore-card:hover .gs-turbo    { translate: -6% -10%; rotate: -12deg; }
.explore-card:hover .gs-torque   { translate: -10% 0; }
.explore-card:hover .gs-dottie   { translate: 0 -4%; }
.explore-card:hover .gs-cluckson { rotate: -4deg; }
.explore-card:hover .gs-acorn    { translate: 8% -12%; rotate: 40deg; }
.explore-card:hover .gs-donut    { translate: -8% -10%; rotate: -40deg; }
@media (prefers-reduced-motion: reduce) { .games-scene img { transition: none; } }

/* ---------- latest Threads posts (home + character pages), filled by js/threads.js ---------- */
.feed[hidden] { display: none; }
.feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.feed-card {
  --c: var(--accent);
  display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.2rem 1.2rem; min-width: 0;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-top: 8px solid var(--c); border-radius: var(--wobble); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feed-card:nth-child(even) { border-radius: var(--wobble-2); }
.feed-card:hover { color: var(--ink); transform: rotate(-1deg) translateY(-4px); box-shadow: 7px 9px 0 var(--ink-85); }
.feed-card:nth-child(even):hover { transform: rotate(1deg) translateY(-4px); }
.feed-who { display: flex; align-items: center; gap: .7rem; }
.feed-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: var(--paper-2); flex: none; }
.feed-names { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.feed-names strong { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-names span { font-size: .85rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-icon svg { width: 26px; height: 26px; display: block; }
.feed-text { margin: 0; font-size: 1.02rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
  height: 6em; /* always 4 lines, so every card is the same size */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.feed-media { position: relative; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.feed-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.feed-media.is-portrait { aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 18%, var(--paper-2)); }
.feed-media.is-portrait img { width: 62%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--c); background: var(--card); }
.feed-media.is-video::after { content: "\25B6"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-85); color: var(--white); font-size: 1.3rem; }
.feed-more { font-weight: 800; color: var(--c); font-size: .9rem; margin-top: auto; }
@media (max-width: 900px) { .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: one swipeable row, so the home page doesn't get much longer */
@media (max-width: 560px) {
  .feed-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: .3rem .3rem 1.2rem; margin-inline: -.3rem; }
  .feed-card { flex: 0 0 84%; scroll-snap-align: center; }
  .feed-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .feed-card:hover { transform: none !important; } }

/* ---------- 2026-10 Hallmark redesign layer ---------- */

/* contrast: soft ink and link colours that clear 4.5:1 on paper and card */
.cast-card .niche, .game-card .who, .bc-head .who { color: var(--barn-dark); }
.feed-more { color: var(--barn-dark); }

/* focus, active and disabled states on every control */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--barn-dark); outline-offset: 3px; border-radius: 6px;
}
.site-footer a:focus-visible, .site-footer button:focus-visible { outline-color: var(--hay-light); }
.btn:active, .cast-card:active, .game-card:active, .explore-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-85); }
.btn:disabled, .btn[aria-disabled="true"], button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* controls: 48px marketing height, comfortable tap targets */
.btn { min-height: 48px; padding: .5rem 1.4rem; line-height: 1.1; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; }
.chip { padding: .45rem .9rem; line-height: 1.2; }

/* rhythm: sections breathe, heads step up */
section { padding: var(--gap-section) 0 calc(var(--gap-section) * .5); }
.hero { padding: 1.5rem 0 0; }
.trailer, .explore { padding-bottom: var(--gap-section); }
.section-head { text-align: left; max-width: 44rem; margin-bottom: 2.6rem; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); text-wrap: balance; }
.section-head p { text-wrap: pretty; color: var(--ink-soft-text); }
h1, h2, h3 { text-wrap: balance; }
.site-footer { margin-top: var(--gap-section); }

/* hero: headline and actions sit above the barn plate */
.hero-grid { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
.hero-copy { text-align: left; padding: 0; display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
.hero-side { display: grid; gap: 1.2rem; min-width: 0; }
.hero-copy h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); margin: 0; min-width: 0; overflow-wrap: break-word; }
.hero-copy .tagline { margin: 0; color: var(--ink-soft-text); }
.hero-copy .hero-actions { justify-content: flex-start; }
.hero-frame img { aspect-ratio: 1640 / 624; }
@media (max-width: 860px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); }
}

/* cast: bigger portraits, quiet cards, one column gap */
.cast-grid { gap: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cast-grid { grid-template-columns: minmax(0, 1fr); } }
.cast-card .quote { text-wrap: balance; }

/* explore: tiles lead with the picture, copy trimmed */
.explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.explore-body .chip { align-self: flex-start; }
@media (max-width: 900px) { .explore-grid { grid-template-columns: minmax(0, 1fr); } }

/* footer: legal lines stacked, no dot strings */
.site-footer .legal { display: block; }
.foot-links { display: flex; gap: 1.4rem; margin-top: .6rem; }
.foot-links a { display: inline-flex; min-height: 44px; align-items: center; }

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

/* lint fixes: note headings keep AA contrast on the card; narrow-screen buttons stay on one line; hero capped on tall/wide screens */
.note h3 { color: var(--ink); }
.hero-frame img { max-height: 56vh; }
@media (max-width: 400px) {
  .btn { font-size: .85rem; padding: .5rem .7rem; white-space: nowrap; }
}
@media (min-width: 1500px) {
  .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
  .game-card .portrait { width: 110px; height: 110px; }
}

/* ---------- 2026-10 MotionSites layer (spec: content/work/motionsites-redesign/spec.md on the NAS) ----------
   Motion uses the translate / scale / rotate properties, never transform, so the storybook
   hover tilts and button lifts above keep working. Rest state is always visible. */
:root { --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-reveal: cubic-bezier(.25, .1, .25, 1); }
::selection { background: var(--barn-25); }

/* entrance: one verb per element, delay from --d */
.appear { animation: var(--anim, in-soft) var(--dur, .9s) var(--ease-out-expo) var(--d, .08s) both; }
.appear.is-in { animation: none; }
@keyframes in-soft { from { opacity: 0; translate: 0 22px; } }
@keyframes in-mask { from { opacity: 0; translate: 0 60%; } }
@keyframes in-down { from { opacity: 0; translate: 0 -14px; } }
@keyframes in-settle { from { opacity: 0; scale: 1.06; } }
@keyframes in-pop { 0% { opacity: 0; scale: .9; } 70% { opacity: 1; scale: 1.03; } 100% { opacity: 1; scale: 1; } }
@keyframes in-card { 0% { opacity: 0; translate: 0 40px; rotate: -6deg; } 70% { opacity: 1; rotate: 4.5deg; } 100% { opacity: 1; } }
.site-header { animation: in-down .5s var(--ease-out-expo) both; }

/* scroll reveal (main.js adds data-reveal only to blocks below the fold, then removes it) */
.js [data-reveal] { opacity: 0; translate: 0 var(--y, 28px);
  transition: opacity .7s var(--ease-reveal) var(--d, 0s), translate .7s var(--ease-reveal) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; translate: none; }

/* hero headline: each line rises out of its own slot */
.hero-copy h1 .h1-line { display: block; overflow: clip; padding-bottom: .06em; }
.hero-copy h1 .h1-line > span { display: inline-block; }
.hero-copy h1 .h1-line + .h1-line { color: var(--barn); }

/* hero stage: framed barn plate, Torque sitting on its bottom-right corner */
.hero-frame { isolation: isolate; }
.hero { padding-bottom: 0; }
.hero-stage { position: relative; }
@media (max-width: 760px) {
  .hero-frame img { aspect-ratio: 2 / 1; object-position: 50% 75%; max-height: none; }
}

/* Torque: tail, body and head are the same picture under three masks (source 213 x 300).
   Head pivots on the collar, tail on its root behind the front paw. */
.torque {
  position: absolute; z-index: 2; right: -1.5%; bottom: -7%; width: clamp(80px, 14%, 180px); aspect-ratio: 213 / 300;
  filter: drop-shadow(0 6px 6px rgb(40 22 10 / .28)); border-radius: 40%;
}
.torque:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.t-rig { position: absolute; inset: 0; transform-origin: 50% 100%; }
.t-rig img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.t-head {
  transform-origin: 58.7% 38.7%;
  -webkit-mask-image: linear-gradient(to bottom, #000 36.7%, transparent 40%);
          mask-image: linear-gradient(to bottom, #000 36.7%, transparent 40%);
}
.t-body {
  -webkit-mask-image: linear-gradient(to bottom, transparent 34.7%, #000 37.3%), linear-gradient(to right, transparent 20.7%, #000 23.5%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 34.7%, #000 37.3%), linear-gradient(to right, transparent 20.7%, #000 23.5%);
          mask-composite: intersect;
}
.t-tail {
  transform-origin: 25.4% 94.7%;
  -webkit-mask-image: linear-gradient(to right, #000 22.5%, transparent 26%), linear-gradient(to bottom, transparent 76%, #000 79%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, #000 22.5%, transparent 26%), linear-gradient(to bottom, transparent 76%, #000 79%);
          mask-composite: intersect;
}
@media (max-width: 760px) { .torque { right: -2%; bottom: -10%; width: clamp(72px, 21%, 120px); } }

/* catchphrase ribbon under the hero */
.ribbon {
  margin: clamp(3rem, 6vw, 4.5rem) -2vw 0; rotate: -1deg; overflow: hidden;
  background: var(--barn); color: var(--paper); border-block: 3px solid var(--ink); padding: .8rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 8%, var(--mask-solid) 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 8%, var(--mask-solid) 92%, transparent);
}
.ribbon-track { display: flex; width: max-content; }
.ribbon.is-running .ribbon-track { animation: ribbon var(--dur, 40s) linear infinite; }
.ribbon:hover .ribbon-track, .ribbon:focus-within .ribbon-track { animation-play-state: paused; }
.ribbon-group { display: flex; flex: none; align-items: baseline; gap: 2.6rem; padding: 0 2.6rem 0 0; margin: 0; list-style: none; white-space: nowrap; }
.ribbon-group li { display: flex; align-items: baseline; gap: .6rem; }
.ribbon-group li::after { content: "\2726"; color: var(--hay); margin-left: 2rem; font-size: 1rem; }
.ribbon q { font-family: var(--font-hand); font-size: clamp(1.2rem, 2vw, 1.5rem); quotes: "\201C" "\201D"; }
.ribbon span { font-family: var(--font-display); font-size: .95rem; color: var(--hay-pale); }
.ribbon span::before { content: "\2014\00a0"; }
@keyframes ribbon { to { translate: -50% 0; } }
@media (max-width: 760px) { .ribbon { rotate: none; margin-inline: 0; } }
.ribbon + section { padding-top: calc(var(--gap-section) * .8); }
/* every other page: the same ribbon right under the header */
.ribbon.ribbon-top { margin-top: 1.2rem; }
/* the tilted ribbon stays in front of the banner picture under it (cast pages) */
.ribbon { position: relative; z-index: 3; }
/* Games and Merch: title and intro centred over the centred copy */
.section-head.centered { text-align: center; margin-inline: auto; }
.ribbon-top + section { padding-top: calc(var(--gap-section) * .6); }

/* small, physical hovers */
.cast-card .portrait img, .game-card .portrait img { transition: scale .3s var(--ease-out-expo); }
.cast-card:hover .portrait img, .game-card:hover .portrait img { scale: 1.05; }

@media (prefers-reduced-motion: reduce) {
  .appear, .site-header { animation: none !important; }
  .js [data-reveal] { opacity: 1; translate: none; transition: none; }
  .ribbon-track { animation: none !important; width: auto; }
  .ribbon { -webkit-mask-image: none; mask-image: none; }
  .ribbon-group { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: .4rem; padding: 0 1rem; }
  .cp-live i, .cp-text.is-typing::after { animation: none !important; }
}

/* on-screen cards: a small settle on load (cards further down use the scroll reveal) */
.settle { animation: in-soft .8s var(--ease-out-expo) var(--d, 0s) both; }
.settle.is-in { animation: none; }

/* ---------- The Cast + their latest Threads posts (home), filled by js/threads.js ---------- */
.cast-live .cast-card { padding-bottom: 1.2rem; }
.cast-intro { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; width: 100%; }
.cast-intro:hover { color: inherit; }
.cast-post { position: relative; width: 100%; margin-top: 1.3rem; padding: .75rem .9rem .8rem; text-align: left;
  background: color-mix(in srgb, var(--c) 10%, var(--paper)); border: 2px solid var(--ink); border-radius: 16px 18px 14px 20px / 18px 14px 20px 16px; }
.cast-post[hidden] { display: none; }
.cast-post::before { content: ""; position: absolute; top: -10px; left: 50%; width: 16px; height: 16px; translate: -50% 0; rotate: 45deg;
  background: inherit; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); }
.cp-head { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-soft-text); }
.cp-live { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink); }
.cp-live i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--barn); flex: none; }
.cp-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--barn); animation: cp-ping 1.8s var(--ease-out-expo) infinite; }
@keyframes cp-ping { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 2.8; } }
.cp-when::before { content: "\00b7\00a0"; }
.cp-when:empty { display: none; }
.cp-dots { margin-left: auto; display: inline-flex; gap: 4px; }
.cp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .25; transition: opacity .3s, scale .3s; }
.cp-dots i.on { opacity: .9; scale: 1.25; }
.cp-dots:has(i:only-child) { display: none; }
.cp-link { display: block; color: var(--ink); text-decoration: none; margin-top: .35rem; }
.cp-link:hover { color: var(--ink); }
.cp-link:hover .cp-more { text-decoration: underline; }
.cp-text { margin: 0; font-size: .98rem; line-height: 1.45; height: 4.35em; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cp-text.is-typing { display: block; }
.cp-text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--barn); animation: cp-caret .7s steps(1) infinite; }
@keyframes cp-caret { 50% { opacity: 0; } }
.cp-more { display: block; margin-top: .35rem; font-weight: 800; font-size: .85rem; color: var(--barn-dark); }
.cast-post.is-swap .cp-head time, .cast-post.is-swap .cp-text { animation: in-soft .5s var(--ease-out-expo) both; }

/* character pages: Threads cards rise in one by one, then their text types in */
.js .feed-card.is-new { opacity: 0; translate: 0 26px; transition: opacity .6s var(--ease-reveal) var(--d, 0s), translate .6s var(--ease-reveal) var(--d, 0s); }
.js .feed-card.is-new.is-in { opacity: 1; translate: none; }
.feed-text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--barn); animation: cp-caret .7s steps(1) infinite; }

/* footer: hens around the fence (HyperFrames loop; the poster is its first frame) */
.site-footer .fence { position: relative; height: clamp(110px, calc(100vw / 9.6), 200px); background: #6f8a3c; overflow: hidden; }
.fence-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .settle, .cast-post.is-swap .cp-text, .cast-post.is-swap .cp-head time { animation: none !important; }
  .js .feed-card.is-new { opacity: 1; translate: none; }
}
@media (max-width: 560px) {
  .cast-live .cast-card { padding: 1.1rem 1rem 1rem; }
  .cast-live .cast-card .portrait { width: 112px; height: 112px; margin-bottom: .7rem; }
}

/* footer, desktop: about left, follow right, legal on one left-aligned row (keeps the footer short) */
.foot-legal { flex: 1 1 100%; border-top: 1px solid var(--white-08); padding-top: .4rem; }
@media (min-width: 821px) {
  .site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: start; gap: 1.2rem 3rem; padding: 1.6rem 0 1rem; }
  .foot-follow .socials { justify-content: flex-end; max-width: 560px; }
  .foot-follow .foot-title { text-align: right; }
  .foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.6rem; }
  .foot-legal small { margin-top: 0; }
  .foot-legal .foot-links { margin: 0 0 0 auto; }
}
@media (min-width: 1100px) { .foot-follow .socials { max-width: none; flex-wrap: nowrap; } }

/* ---------- sitemap page ---------- */
.sitemap-page h1 { margin: 0; }
.sitemap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
@media (max-width: 1000px) { .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sitemap-grid { grid-template-columns: minmax(0, 1fr); } }
.sitemap-group { background: var(--card); border: 3px solid var(--ink); border-radius: var(--wobble); box-shadow: var(--shadow); padding: 1.1rem 1.3rem 1.2rem; }
.sitemap-group:nth-child(even) { border-radius: var(--wobble-2); }
.sitemap-group h2 { font-size: 1.3rem; margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 2px solid var(--hay); }
.sitemap-group h2 a { color: var(--ink); text-decoration: none; }
.sitemap-group h2 a:hover { color: var(--barn); }
.sitemap-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sitemap-group small { display: block; color: var(--ink-soft); font-size: .85rem; }

/* ---------- card hovers everywhere: the same layered motion as the Merch and Farm Games tiles ---------- */
/* cast, game and scoreboard cards: two of the character's own props peek out from behind the portrait */
.pop { position: relative; display: inline-block; }
.pop .portrait { position: relative; z-index: 1; transition: rotate .45s var(--ease-out-expo, ease); }
.props img {
  position: absolute; top: 16%; height: 46%; width: auto; z-index: 0; pointer-events: none;
  opacity: 0; scale: .5; filter: drop-shadow(2px 3px 0 rgba(74, 44, 26, .3));
  transition: translate .5s var(--ease-out-expo, ease), rotate .5s var(--ease-out-expo, ease), scale .5s var(--ease-out-expo, ease), opacity .25s ease;
}
.props .pp-a { left: 0;  translate: 40% 20%; }
.props .pp-b { right: 0; translate: -40% 20%; transition-delay: .06s; }
:is(.cast-card, a.game-card, .board-card):is(:hover, :focus-within) .props img { opacity: 1; scale: 1; }
:is(.cast-card, a.game-card, .board-card):is(:hover, :focus-within) .pp-a { translate: -62% -18%; rotate: -14deg; }
:is(.cast-card, a.game-card, .board-card):is(:hover, :focus-within) .pp-b { translate: 62% -18%; rotate: 12deg; }
:is(.cast-card, a.game-card, .board-card):hover .pop .portrait { rotate: -4deg; }
.cast-card:nth-child(even):hover .pop .portrait, .game-card:nth-child(even):hover .pop .portrait { rotate: 4deg; }
.bc-head .pop .portrait { margin: 0; }
.bc-head .props img { height: 50%; top: 10%; }
.board-card.board-card:is(:hover, :focus-within) .pp-a { translate: -15% -85%; }
.board-card.board-card:is(:hover, :focus-within) .pp-b { translate: 15% -85%; }

/* home "Walk the Farm" tile: the map drifts in, Torque chases a hen across it */
.farm-scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--sky); }
.farm-scene img { position: absolute; width: auto; aspect-ratio: auto; object-fit: contain; border: 0; background: none; }
.farm-scene .fs-map { inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease-out-expo, ease); }
.farm-scene .fs-dog { height: 20%; left: 4%; bottom: 4%; filter: drop-shadow(3px 4px 0 rgba(74, 44, 26, .3)); transition: translate 1s cubic-bezier(.3, .7, .3, 1); }
.farm-scene .fs-hen { height: 14%; right: 30%; bottom: 6%; filter: drop-shadow(2px 3px 0 rgba(74, 44, 26, .3)); transition: translate .7s var(--ease-out-expo, ease) .15s, rotate .7s var(--ease-out-expo, ease) .15s; }
.explore-card:hover .fs-map { scale: 1.07; }
.explore-card:hover .fs-dog { translate: 210% 0; animation: gallop .32s ease-in-out infinite alternate; }
.explore-card:hover .fs-hen { translate: 190% -70%; rotate: 16deg; }
@keyframes gallop { from { transform: translateY(0) rotate(0); } to { transform: translateY(-9%) rotate(-3deg); } }

/* Merch page: sticker packs and backgrounds fan out like a hand of cards */
.merch-thumbs img { transition: translate .45s var(--ease-out-expo, ease), rotate .45s var(--ease-out-expo, ease); }
a.merch-card:hover .merch-thumbs img:nth-child(1) { translate: -10% -8%; rotate: -8deg; }
a.merch-card:hover .merch-thumbs img:nth-child(2) { translate: 10% -8%;  rotate: 8deg; }
a.merch-card:hover .merch-thumbs img:nth-child(3) { translate: -10% 6%;  rotate: 6deg; }
a.merch-card:hover .merch-thumbs img:nth-child(4) { translate: 10% 6%;   rotate: -6deg; }

/* shop products: the item lifts off the card, the price pops */
.product img { transition: translate .45s var(--ease-out-expo, ease), rotate .45s var(--ease-out-expo, ease), scale .45s var(--ease-out-expo, ease); }
.product-price { display: inline-block; transition: scale .3s var(--ease-out-expo, ease); }
.product:hover img { translate: 0 -6%; rotate: -5deg; scale: 1.07; }
.product:nth-child(even):hover img { rotate: 5deg; }
.product:hover .product-price { scale: 1.18; }

/* call backgrounds: a slow camera push into the picture */
.bg-thumb { overflow: hidden; border-bottom: 3px solid var(--ink); }
.bg-thumb img { border-bottom: 0; transition: filter .15s ease, scale 1.2s var(--ease-out-expo, ease); }
.bg-card:hover .bg-thumb img, .bg-thumb:focus-visible img { scale: 1.08; }

/* farm feuds: the two faces square up */
.rivalry .faces img { transition: translate .4s var(--ease-out-expo, ease), rotate .4s var(--ease-out-expo, ease); }
.rivalry:hover .faces img:first-child { translate: 5px 0; rotate: 10deg; }
.rivalry:hover .faces img + img { translate: -5px 0; rotate: -10deg; }
a.rivalry:hover .faces img:only-child { rotate: -10deg; scale: 1.08; }

/* Threads post cards: the poster leans in */
.feed-avatar { transition: rotate .4s var(--ease-out-expo, ease), scale .4s var(--ease-out-expo, ease); }
.feed-card:hover .feed-avatar { rotate: -10deg; scale: 1.12; }

@media (prefers-reduced-motion: reduce) {
  .pop .portrait, .props img, .farm-scene img, .merch-thumbs img, .product img, .product-price, .bg-thumb img, .rivalry .faces img, .feed-avatar { transition: none !important; }
  .explore-card:hover .fs-dog { animation: none; }
  .pop .portrait, .farm-scene img, .merch-thumbs img, .product img, .bg-thumb img, .rivalry .faces img, .feed-avatar { translate: none !important; rotate: none !important; scale: none !important; }
}