/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --parchment:      #F4E9CE;
  --parchment-deep: #ECDCB6;
  --parchment-card: #FBF4E2;
  --ink:            #2E2620;
  --ink-soft:       rgba(46, 38, 32, 0.74);
  --ink-muted:      rgba(46, 38, 32, 0.66);
  --ink-faint:      rgba(46, 38, 32, 0.30);
  --oxblood:        #8E3B2E;
  --oxblood-deep:   #743024;
  --teal:           #3C7A75;
  --teal-deep:      #2E5F5A;   /* AA-contrast teal for small badge/label text */
  --gold:           #C99A3F;
  --gold-deep:      #6E5214;   /* AA-contrast gold for small badge/label text */
  --gold-bright:    #E0B24F;
  --fawn:           #D8B98C;
  --line:           rgba(46, 38, 32, 0.16);

  --max-w:    1120px;
  --text-max: 660px;
  --section-py: 104px;
  --radius:    22px;   /* chibi: rounder everything */
  --radius-lg: 30px;
  --radius-sm: 14px;

  /* Rounded, playful display for headings; Nunito for body. */
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --sans:    'Nunito', system-ui, -apple-system, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--parchment);
  /* subtle paper grain + warm vignette */
  background-image:
    radial-gradient(ellipse at top, rgba(255,255,255,0.35), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(116, 48, 36, 0.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
em { font-style: italic; }

/* ── Accessibility: skip link + consistent keyboard focus ring ────────────────── */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--oxblood); color: #FBF4E2;
  padding: 10px 18px; border-radius: 999px; font-weight: 700;
  transition: top 160ms ease;
}
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
[tabindex="-1"]:focus { outline: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.14; color: var(--ink); letter-spacing: 0.005em; }
h2 { font-size: clamp(30px, 4.4vw, 46px); }
h3 { font-size: 22px; }

.accent-oxblood { color: var(--oxblood); }
.accent-teal    { color: var(--teal); }

/* ── Layout utility ──────────────────────────────────────────────────────────── */
.section-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-py) 32px;
}
section { position: relative; }

/* ── Scroll entrance ──────────────────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── CTA buttons ──────────────────────────────────────────────────────────────── */
.cta-button {
  display: inline-block;
  background: var(--oxblood);
  color: #FBF4E2;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2.5px solid var(--oxblood-deep);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1), background 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 4px 0 var(--oxblood-deep);
  white-space: nowrap;
}
.cta-button:hover { background: var(--oxblood-deep); transform: translateY(-3px); box-shadow: 0 7px 0 var(--oxblood-deep); }
.cta-button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--oxblood-deep); }
.cta-ghost {
  background: transparent;
  color: var(--oxblood);
  box-shadow: none;
  border: 2px solid var(--oxblood);
}
.cta-ghost:hover { background: rgba(142, 59, 46, 0.08); box-shadow: none; transform: translateY(-2px); }
.cta-link {
  align-self: center;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--oxblood);
  white-space: nowrap;
}
.cta-link:hover { color: var(--oxblood-deep); text-decoration: underline; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* ── Navigation ──────────────────────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: background 280ms ease, backdrop-filter 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
/* The bar stays visible at all times (logo + links + hamburger reachable at the
   top of the hero); it's transparent at the top and gains its frosted background
   once scrolled. On sub-pages script.js adds .visible immediately. */
#navbar.visible {
  background: rgba(244, 233, 206, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 18px rgba(46,38,32,0.06);
}
.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--oxblood); }
.nav-logo-paw { color: var(--oxblood); display: inline-flex; }
.nav-logo-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.nav-logo-word { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  transition: color 140ms ease;
}
.nav-links a:hover { color: var(--oxblood); }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; margin: 4px 0; transition: transform 200ms ease; }

/* ── Mobile drawer ──────────────────────────────────────────────────────────── */
#nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(78vw, 320px);
  background: var(--parchment-card);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 280ms ease;
  padding: 76px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: -8px 0 30px rgba(46,38,32,0.18);
}
#nav-drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; top: 18px; right: 22px; background: none; border: none; font-size: 34px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.drawer-link { font-family: var(--display); font-weight: 600; font-size: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
#drawer-overlay {
  position: fixed; inset: 0; background: rgba(46,38,32,0.4);
  z-index: 150; opacity: 0; pointer-events: none; transition: opacity 280ms ease;
}
#drawer-overlay.visible { opacity: 1; pointer-events: auto; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 110px 32px 80px;
}
.hero-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-title { font-size: clamp(42px, 7vw, 76px); font-weight: 700; letter-spacing: -0.02em; }
.hero-tagline { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.6vw, 26px); color: var(--teal); margin-top: 18px; }
.hero-descriptor { font-size: 18px; color: var(--ink-soft); margin-top: 18px; max-width: 480px; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-art-img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 2.5px solid var(--line);
  box-shadow: 0 16px 34px rgba(46,38,32,0.14);
}

/* ── Video hero (16:9 embed, drop-in for .hero-art-img) ─────────────────────── */
.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2.5px solid var(--line);
  background: var(--parchment-card);
  box-shadow: 0 16px 34px rgba(46,38,32,0.14);
}
.hero-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-video-facade {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video-facade:focus-visible { outline: 3px solid var(--teal); outline-offset: -6px; }
.hero-video-play-btn {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--oxblood);
  box-shadow: 0 8px 20px rgba(46,38,32,0.25);
  transition: transform 0.2s ease;
}
.hero-video-play-btn::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--parchment);
}
.hero-video-facade:hover .hero-video-play-btn { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .hero-video-play-btn { transition: none; } }

/* ── Art placeholder frames ─────────────────────────────────────────────────── */
.art-frame {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(216,185,140,0.18) 0 12px, transparent 12px 24px),
    var(--parchment-card);
  border: 2px dashed var(--fawn);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-muted);
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.art-frame-mark { color: var(--gold); font-size: 40px; line-height: 1; }
.art-frame-label { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-muted); }
.art-frame-hero { aspect-ratio: 3 / 2; width: 100%; }
.art-frame-shot { aspect-ratio: 16 / 10; width: 100%; }

/* ── Playful paw-print divider ─────────────────────────────────────────────────── */
.divider {
  height: 34px;
  max-width: var(--max-w);
  margin: 0 auto;
  /* a row of little paw prints in warm gold */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='34' viewBox='0 0 48 34'%3E%3Cg fill='%23C99A3F'%3E%3Ccircle cx='19' cy='16' r='1.7'/%3E%3Ccircle cx='24' cy='14.5' r='1.9'/%3E%3Ccircle cx='29' cy='16' r='1.7'/%3E%3Cpath d='M24 18c-2.5 0-4.5 1.8-4.5 3.8 0 1.6 1.4 2.4 3 2.4.7 0 1-.25 1.5-.25s.8.25 1.5.25c1.6 0 3-.8 3-2.4 0-2-2-3.8-4.5-3.8z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 34px;
  background-position: center;
  background-repeat: repeat-x;
  opacity: 0.6;
}

/* ── About ──────────────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 56px;
  align-items: center;
}
.about-body { max-width: var(--text-max); }
.about-body p { color: var(--ink-soft); margin-top: 16px; }
.about-body p:first-child { font-size: 20px; color: var(--ink); }
.about-art-img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 2.5px solid var(--line);
  box-shadow: 0 14px 30px rgba(46,38,32,0.12);
}

/* ── Lead body (content & kit) ──────────────────────────────────────────────── */
.lead-body { max-width: var(--text-max); }
.lead-body p { font-size: 19px; color: var(--ink-soft); }

/* ── Content columns ──────────────────────────────────────────────────────────── */
.content-cols {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.content-col-heading { color: var(--oxblood); }
.content-col-sub { font-size: 15px; color: var(--ink-muted); margin: 4px 0 16px; }
.product-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.product-list li {
  display: flex; flex-direction: column;
  padding: 14px 18px;
  background: var(--parchment-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
}
.product-name { font-family: var(--display); font-weight: 600; font-size: 17px; }
.product-desc { font-size: 14.5px; color: var(--ink-muted); }
.fine-print { margin-top: 20px; font-size: 13.5px; color: var(--ink-muted); }
.fine-print a { color: var(--oxblood); text-decoration: underline; font-weight: 600; }

/* ── Company commitments (about + hire) ───────────────────────────────────────── */
.commitments-intro { margin-top: 64px; }
.commitments {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.commitment {
  background: var(--parchment-card);
  border: 2.5px solid var(--line);
  border-top: 7px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px 26px 26px;
}
.commitment:nth-child(2) { border-top-color: var(--teal); }
.commitment:nth-child(3) { border-top-color: var(--oxblood); }
.commitment-num {
  display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}
.commitment:nth-child(2) .commitment-num { color: var(--teal-deep); }
.commitment:nth-child(3) .commitment-num { color: var(--oxblood); }
.commitment-title {
  font-family: var(--display); font-weight: 600; font-size: 21px;
  color: var(--ink); margin-top: 2px;
}
.commitment-desc { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* ── Kit showcase ──────────────────────────────────────────────────────────── */
.showcase-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.showcase-card figcaption { font-size: 14.5px; color: var(--ink-soft); margin-top: 12px; }
.zoom-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--radius); overflow: hidden;
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease;
}
.zoom-btn:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(46,38,32,0.14); }
.zoom-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.showcase-img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius); border: 2.5px solid var(--line);
}

/* ── Craft-proof gallery (landing "show the work" band) ────────────────────────── */
.proof-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.proof-tile img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 2.5px solid var(--line);
  background: var(--parchment-card);
}

/* ── Click-to-zoom lightbox (injected by scripts/script.js) ────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; background: rgba(30,24,20,0.88); cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 96vw; max-height: 92vh;
  border-radius: var(--radius); border: 3px solid var(--parchment-card);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.lightbox-close {
  position: absolute; top: 18px; right: 26px;
  font-size: 44px; line-height: 1; color: var(--parchment-card);
  background: none; border: 0; cursor: pointer;
}
.lightbox-close:hover { color: #fff; }

/* ── Coming soon ──────────────────────────────────────────────────────────────── */
.soon-card {
  margin-top: 28px;
  max-width: var(--text-max);
  background: var(--parchment-card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 32px;
}
.soon-pill {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal);
  background: rgba(60, 122, 117, 0.12);
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.soon-title { font-size: 28px; }
.soon-desc { color: var(--ink-soft); margin-top: 12px; }

/* ── Support / link hub ──────────────────────────────────────────────────────── */
.support-inner { text-align: center; }
.support-body { max-width: 540px; margin: 14px auto 0; color: var(--ink-soft); }
.link-hub {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.link-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--parchment-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 18px;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.link-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(46,38,32,0.10); }
.link-card-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  font-size: 26px; margin-bottom: 4px;
}
/* Each support destination carries its own brand accent, so the row reads as three
   deliberate cards rather than one repeated tile. */
.link-card--kofi   .link-card-icon { background: rgba(142,59,46,0.14); }
.link-card--kofi:hover   { border-color: var(--oxblood); }
.link-card--itch   .link-card-icon { background: rgba(60,122,117,0.16); }
.link-card--itch:hover   { border-color: var(--teal); }
.link-card--github .link-card-icon { background: rgba(201,154,63,0.18); }
.link-card--github:hover { border-color: var(--gold); }
.link-card-title { font-family: var(--display); font-weight: 600; font-size: 19px; }
.link-card-sub { font-size: 13.5px; color: var(--ink-muted); }

/* ── Panoramic sign-off band ───────────────────────────────────────────────────── */
.panorama-band { width: 100%; margin-top: 48px; overflow: hidden; }
.panorama-band-img { width: 100%; display: block; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
#footer {
  background: var(--parchment-deep);
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.footer-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px 32px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.6fr;
  gap: 40px;
}
.footer-logo { display: flex; align-items: center; gap: 14px; color: var(--oxblood); }
.footer-logo-img { width: 136px; height: 136px; border-radius: 50%; object-fit: cover; }
.footer-wordmark { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); }
.footer-tagline { font-family: var(--display); font-weight: 500; color: var(--teal); margin-top: 16px; }
.footer-legal { font-size: 13.5px; color: var(--ink-muted); margin-top: 14px; }
.footer-col-heading { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-content: start; }
.footer-links .footer-col-heading { grid-column: 1 / -1; }
.footer-links a { display: block; padding: 5px 0; color: var(--ink-soft); font-weight: 600; transition: color 140ms ease; }
.footer-links a:hover { color: var(--oxblood); }
.footer-disclosure p { font-size: 13.5px; color: var(--ink-muted); margin-bottom: 12px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 18px 32px;
}
.footer-bottom-text { font-size: 13px; color: var(--ink-faint); }
.footer-bottom-links { font-size: 13px; margin-left: 12px; white-space: nowrap; }
.footer-bottom-links a { color: var(--ink-faint); font-weight: 600; transition: color 140ms ease; }
.footer-bottom-links a:hover { color: var(--oxblood); }

/* ── Scroll indicator ──────────────────────────────────────────────────────────── */
.scroll-indicator {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity 280ms ease;
}
.scroll-indicator.hidden { opacity: 0; }
.scroll-line { width: 1.5px; height: 34px; background: linear-gradient(var(--gold), transparent); }

/* ── "Get the original" credit callout ─────────────────────────────────────────── */
.origin-card {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  background: var(--parchment-card);
  border: 2.5px solid var(--line);
  border-left: 7px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
.origin-card-text { max-width: 640px; }
.origin-card-title { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); }
.origin-card-desc { color: var(--ink-soft); font-size: 15.5px; margin-top: 4px; }
.origin-card-desc a { color: var(--oxblood); font-weight: 700; text-decoration: underline; }
.origin-card .cta-button { flex-shrink: 0; }

/* ── Compact page hero (sub-pages) ─────────────────────────────────────────────── */
.page-hero {
  padding: 132px 32px 40px;
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.page-hero h1 { font-family: var(--display); font-size: clamp(38px, 6vw, 62px); font-weight: 700; letter-spacing: -0.01em; }
.page-hero .page-lead { max-width: 620px; margin: 16px auto 0; color: var(--ink-soft); font-size: 19px; }
.page-hero .cta-row { justify-content: center; }
.back-link { display: inline-block; margin-top: 22px; font-weight: 700; color: var(--teal); }
.back-link:hover { color: var(--oxblood); }
.page-hero-banner { max-width: var(--max-w); margin: 10px auto 0; padding: 0 32px; }
.page-hero-banner-img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 2.5px solid var(--line);
  box-shadow: 0 16px 34px rgba(46,38,32,0.14);
}

/* ── Product-line hero (sub-page, image to the side) ───────────────────────────── */
.line-hero { padding: 124px 32px 48px; }
.line-hero .hero-grid { align-items: center; }
/* Video heroes (sleddog, kit) on desktop: widen past --max-w and give the video the
   bigger column. At half of 1120px YouTube's title bar and controls crowd the frame. */
@media (min-width: 1200px) {
  .line-hero .hero-grid:has(.hero-video) {
    max-width: 1360px;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 48px;
  }
}

/* ── "Are you GM-ing?" callout (Stonetop → Tools) ──────────────────────────────── */
.gm-callout {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  background: var(--parchment-card);
  border: 2.5px solid var(--line);
  border-left: 7px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
.gm-callout-img { width: 100%; border-radius: var(--radius); }
.gm-callout-eyebrow {
  font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px;
}
.gm-callout-title { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3vw, 30px); color: var(--ink); }
.gm-callout-desc { color: var(--ink-soft); margin: 10px 0 20px; }

/* ── Router grid (landing → products) ──────────────────────────────────────────── */
.router-grid {
  margin-top: 44px;
  display: grid;
  /* auto-fill (not auto-fit) keeps empty tracks, so a single filtered card
     stays the same width as when the whole grid is shown. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--parchment-card);
  border: 2.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0 0 26px;
  overflow: hidden;
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), border-color 180ms ease, box-shadow 180ms ease;
}
a.product-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(46,38,32,0.12);
}
.product-card .art-frame { border-radius: 0; border-width: 0 0 2.5px; border-color: var(--line); }
.product-card-art { aspect-ratio: 792 / 612; width: 100%; }
.product-card-img { object-fit: cover; border-bottom: 2.5px solid var(--line); background: var(--parchment-card); }
.product-card-body { padding: 22px 24px 0; }
.product-badge {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.badge-live { color: var(--teal-deep); background: rgba(60,122,117,0.14); }
.badge-shop { color: var(--oxblood); background: rgba(142,59,46,0.12); }
.badge-soon { color: var(--gold-deep); background: rgba(201,154,63,0.16); }
.product-card-title { font-family: var(--display); font-weight: 600; font-size: 25px; color: var(--ink); }
.product-card-desc { color: var(--ink-soft); font-size: 16px; margin-top: 8px; }
.product-card-go { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--oxblood); }
a.product-card:hover .product-card-go { text-decoration: underline; }

/* Featured router card — gives Sled Dog (the #1 conversion) visual primacy */
.product-card--featured {
  flex-direction: row;
  align-items: stretch;
  margin-top: 44px;
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(46,38,32,0.10);
}
.product-card--featured .product-card-art {
  width: 46%;
  align-self: stretch;
  aspect-ratio: auto;
  object-fit: cover;
  border-bottom: 0;
  border-right: 2.5px solid var(--line);
}
.product-card--featured .product-card-body {
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; padding: 30px 40px;
}
.product-card--featured .product-card-title { font-size: clamp(28px, 3.4vw, 36px); }
.product-card--featured .product-card-desc { font-size: 17px; max-width: 54ch; }
a.product-card--featured:hover { transform: translateY(-6px) rotate(-0.4deg); }
@media (max-width: 720px) {
  .product-card--featured { flex-direction: column; }
  .product-card--featured .product-card-art {
    width: 100%; aspect-ratio: 792 / 612;
    border-right: 0; border-bottom: 2.5px solid var(--line);
  }
  .product-card--featured .product-card-body { padding: 24px; }
}

/* ── Shop / shirts ─────────────────────────────────────────────────────────────── */
.shirt-note {
  max-width: var(--text-max);
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 18px;
}
.shirt-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.shirt-card {
  display: flex;
  flex-direction: column;
  background: var(--parchment-card);
  border: 2.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease, border-color 180ms ease;
}
.shirt-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(46,38,32,0.12); border-color: var(--fawn); }
.shirt-card .art-frame { border-radius: 0; border-width: 0 0 2.5px; }
.shirt-card-art { aspect-ratio: 1 / 1; width: 100%; }
.shirt-card-art.has-img { padding: 0; border-style: solid; }
.shirt-card-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shirt-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.shirt-card-title { font-family: var(--display); font-weight: 600; font-size: 20px; }
.shirt-card-desc { font-size: 14.5px; color: var(--ink-muted); flex: 1; }
.shirt-cta {
  display: inline-block; align-self: flex-start;
  margin-top: 8px;
  font-size: 14px; font-weight: 700;
  padding: 10px 20px; border-radius: 999px;
  border: 2px dashed var(--fawn);
  color: var(--ink-muted);
  background: transparent;
  cursor: not-allowed;
}
.shirt-cta.live { border-style: solid; border-color: var(--oxblood-deep); background: var(--oxblood); color: #FBF4E2; box-shadow: 0 4px 0 var(--oxblood-deep); cursor: pointer; }

/* ── Type filter bar (content.html) ──────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.filter-chip {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--parchment-card);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.34,1.56,.64,1), border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.filter-chip:hover:not(.disabled):not(.active) { border-color: var(--gold); transform: translateY(-2px); }
.filter-chip.active { color: #FBF4E2; background: var(--oxblood); border-color: var(--oxblood-deep); }
.filter-chip.disabled { opacity: 0.42; cursor: not-allowed; border-style: dashed; }
.filter-count { font-size: 12px; opacity: 0.7; margin-left: 2px; }

/* System tabs — the top-level "choose a game system" facet above the type
   filter. Empty (single-system) until a second system ships products. */
.system-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.system-bar:empty { display: none; }
.system-tab {
  font-family: var(--display, var(--sans));
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--parchment-card);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 9px 22px;
  transition: transform 160ms cubic-bezier(.34,1.56,.64,1), border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.system-tab:hover:not(.active) { border-color: var(--gold); transform: translateY(-2px); }
.system-tab.active { color: #FBF4E2; background: var(--oxblood); border-color: var(--oxblood-deep); }
/* "soon" marker on a system that has no products yet. */
.system-tab-soon {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: 1px;
}
.system-tab.active .system-tab-soon { color: rgba(251, 244, 226, 0.82); }
.product-card.is-hidden { display: none; }

/* Coming-soon panel for a defined-but-empty system (e.g. Forged today).
   It lives inside the grid (#product-grid), so span all columns. */
.catalog-empty {
  grid-column: 1 / -1;
  text-align: center;
  border: 2.5px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--parchment-card);
  padding: clamp(36px, 6vw, 56px) 28px;
}
.catalog-empty-title {
  font-family: var(--display, var(--sans));
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  color: var(--ink);
  margin: 0;
}
.catalog-empty-body {
  max-width: 48ch;
  margin: 12px auto 0;
  color: var(--ink-soft);
}
.catalog-empty .cta-row { justify-content: center; margin-top: 24px; }

/* ── Card badges: type + season + level + players ──────────────────────────────── */
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.badge-row .product-badge { margin-bottom: 0; }
.badge-type    { color: var(--teal);      background: rgba(60,122,117,0.14); }
.badge-season  { color: #6a4a7a;          background: rgba(106,74,122,0.14); }
.badge-level   { color: var(--gold);      background: rgba(201,154,63,0.18); }
.badge-players { color: var(--ink-muted); background: rgba(46,38,32,0.08); }

/* ── Item detail template (item.html) ──────────────────────────────────────────── */
.line-hero .item-hero { padding-top: 0; padding-bottom: 0; }
.item-hero .hero-descriptor { max-width: var(--text-max); }
.item-hero .back-link { margin-top: 0; margin-bottom: 18px; }

.item-gallery {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* mixed tile heights (a 2:3 cover beside two landscape pages) — don't stretch
     the short tiles to match the tall one. */
  align-items: start;
}
.item-gallery-tile {
  margin: 0;
  background: var(--parchment-card);
  border: 2.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.item-gallery-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--parchment);
  border-bottom: 2.5px solid var(--line);
}
.item-gallery-tile .art-frame {
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 0;
  border-bottom: 2.5px solid var(--line);
  border-radius: 0;
}
/* All three tiles are US-Letter landscape (792:612) — the thumbnail is sized to
   match the SVG page previews. Set on both the image and its placeholder. */
.item-gallery-tile--landscape .item-gallery-img,
.item-gallery-tile--landscape .art-frame { aspect-ratio: 792 / 612; }
.item-gallery-tile figcaption { padding: 14px 18px; font-weight: 700; font-size: 14px; color: var(--ink-soft); }

/* Tighten the standalone "New to Stonetop?" block (kit.html) — it doesn't need
   a full section's vertical padding sitting just above the panorama band. The
   negative margin trims the preceding section's bottom padding too. */
.origin-section { margin-top: -64px; }
.origin-section .section-container { padding-top: 8px; padding-bottom: 32px; }

.why-inner { max-width: var(--text-max); }
.item-why { margin-top: 24px; list-style: none; display: grid; gap: 16px; }
.item-why li { position: relative; padding-left: 34px; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
.item-why li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 18px; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .item-gallery { grid-template-columns: 1fr; max-width: 480px; }
  .nav-links { display: none; }
  .hamburger { display: block; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { order: -1; max-width: 420px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-art { max-width: 380px; }
  .content-cols, .showcase-grid, .commitments { grid-template-columns: 1fr; }
  .gm-callout { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .gm-callout .cta-button { width: auto; }
  .footer-container { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  :root { --section-py: 72px; }
  body { font-size: 17px; }
  .link-hub { grid-template-columns: 1fr; }
  .cta-button { width: 100%; text-align: center; }
  .hero-cta-row .cta-button, .cta-row .cta-button { width: 100%; }
}

/* ── Kit (ConvertKit) newsletter form — brand skin ───────────────────────────
   Skins the embedded "Clare" signup form (.formkit-form) to match the site:
   parchment card, Fredoka headings, teal focus, and the oxblood "pressed pill"
   submit. !important beats the inline styles Kit's embed script injects onto its
   own elements. Mirrors the Sled Dog app's form skin (sleddog/globals.css). */
.newsletter-embed { margin-top: 44px; }

/* Prompt shown above the embedded signup form. */
.newsletter-cta {
  max-width: 480px;
  margin: 0 auto 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  text-align: center;
}

.formkit-form {
  background-color: var(--parchment-card) !important;
  border: 2.5px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  max-width: 480px;
  margin-inline: auto;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  box-shadow: 0 10px 30px rgba(46, 38, 32, 0.10) !important;
}

.formkit-form .formkit-header,
.formkit-form h1, .formkit-form h2, .formkit-form h3 {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.14 !important;
}

.formkit-form .formkit-subheader,
.formkit-form .formkit-subheader p {
  color: var(--ink-soft) !important;
  line-height: 1.6 !important;
}

.formkit-form .formkit-input,
.formkit-form input[type="text"],
.formkit-form input[type="email"] {
  background-color: var(--parchment-card) !important;
  border: 2.5px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 16px !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 16px !important;
  transition: border-color 150ms ease !important;
}
.formkit-form .formkit-input::placeholder { color: var(--ink-faint) !important; }
.formkit-form .formkit-input:focus {
  border-color: var(--teal) !important;
  outline: none !important;
  box-shadow: none !important;
}

.formkit-form .formkit-submit,
.formkit-form button[type="submit"] {
  background-color: var(--oxblood) !important;
  color: var(--parchment-card) !important;
  border: 2.5px solid var(--oxblood-deep) !important;
  border-radius: 9999px !important;
  padding: 13px 26px !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 0 var(--oxblood-deep) !important;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 150ms, box-shadow 150ms !important;
}
.formkit-form .formkit-submit span { color: var(--parchment-card) !important; }
.formkit-form .formkit-submit:hover {
  background-color: var(--oxblood-deep) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 7px 0 var(--oxblood-deep) !important;
}
.formkit-form .formkit-submit:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--oxblood-deep) !important;
}

.formkit-form .formkit-alert-error {
  background-color: color-mix(in srgb, var(--oxblood) 10%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--oxblood) 40%, transparent) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--oxblood-deep) !important;
}
.formkit-form .formkit-alert-success {
  background-color: color-mix(in srgb, var(--teal) 12%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--teal) 40%, transparent) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

.formkit-form .formkit-guarantee,
.formkit-form .formkit-guarantee p,
.formkit-form .formkit-disclaimer {
  color: var(--ink-muted) !important;
  font-size: 13px !important;
}

.formkit-form .formkit-powered-by-convertkit-container { opacity: 0.5 !important; }