/* ============================================================
   KIMO'S KORNER  ·  HOMEPAGE  ("Sunday Funnies — Welcome Edition")
   ------------------------------------------------------------
   A standalone cover/landing page. Reuses the LOCKED design system
   (base.css structure + funnies.css art direction + tokens). Every
   rule here is namespaced .home-* so it never collides with the quiz
   app's .masthead / .page / .notepad. Page is always data-theme=funnies,
   so --paper/--ink/--accent/--comic-blue/--sunny/--flip-ease etc. resolve.

   Motion contract (see js/home.js + the @media reduced-motion block):
   - The PNG never animates filter:drop-shadow — its static comic shadow
     stays put and a SEPARATE cast-shadow element sells the lift-off.
   - Hero float is a 5-layer parallax on deliberately mismatched clocks
     (6.5s bob / 9s wiggle / 60s halo / 11s disc / 6.5s cast) so it drifts
     organically instead of marching like a metronome.
   - Reveals/entrances are one-shot; only the CTA keeps a tiny resting loop.
   ============================================================ */

.home-body { /* paper + ben-day field already come from funnies.css body */ }

.home {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 26px) clamp(14px, 4vw, 40px) 0;
}
/* the whole cover sits inside a printer's-plate keyline with corner crosshairs */
.home::before {
  content: "";
  position: absolute;
  inset: clamp(6px, 1.4vw, 14px);
  border: 1px dashed rgba(58, 53, 43, 0.28);
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}
.home > * { position: relative; z-index: 1; }

/* ============================================================
   1 · FOLIO LINE + EDITION RIBBON
   ============================================================ */
.home-folio { text-align: center; padding-top: clamp(8px, 1.6vw, 16px); }

/* candy-stripe ribbon (red/yellow/blue), scrolled by transform on an
   over-wide inner rail inside an overflow-clipped frame */
.home-ribbon {
  position: relative;
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--rule-strong), 0 2px 0 0 rgba(0, 0, 0, 0.18);
  margin-bottom: 14px;
}
.home-ribbon__rail {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% + 60px);
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 14px,
    var(--sunny) 14px 28px,
    var(--comic-blue) 28px 42px
  );
  animation: kk-stripe 3.2s linear infinite;
  will-change: transform;
}
/* one full diagonal period at -45deg over a 42px band = 42/cos45 ≈ 59.4px */
@keyframes kk-stripe { to { transform: translateX(-59.4px); } }

.home-folio__eyebrow {
  font-family: "Rye", var(--font-masthead);
  font-size: clamp(0.74rem, 1.8vw, 0.96rem);
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 2px 0 4px;
}
.home-folio__line {
  font-family: var(--font-accent);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 auto 8px;
  max-width: 52ch;
  line-height: 1.5;
}
.home-folio__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.home-folio__pill {
  font-family: "Bungee", var(--font-headline);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  padding: 4px 12px;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 2px 2px 0 0 var(--rule-strong);
  transform: rotate(-2deg);
}
.home-folio__date {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--comic-blue);
}
/* type-itself-in once: clip an inline-block from 0→full with a blinking caret */
.home-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.home-type.is-typing {
  max-width: 0;
  border-right: 2px solid var(--accent);
  animation:
    kk-type 1.2s steps(26, end) 250ms both,
    kk-caret 700ms steps(1) 0s 4;
}
@keyframes kk-type { to { max-width: 26ch; } }
@keyframes kk-caret { 50% { border-color: transparent; } }

/* ============================================================
   2 · THE NAMEPLATE (floating hero)
   ============================================================ */
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;     /* bubble | logo | the vault */
  /* areas let the vault sit top-right on desktop yet stay LAST in the source order,
     so on phones it drops to the very bottom of the page (see the @media block). */
  grid-template-areas:
    "bubble logo  vault"
    "bubble tag   vault"
    "zig    zig   zig"
    "desk   desk  desk";
  align-items: center;
  column-gap: clamp(16px, 3vw, 48px);
  row-gap: 0;
  margin-top: 0;
  padding-top: clamp(0px, 0.6vw, 4px);    /* banner sits right above — keep it snug */
}
.home-hero__side--left  { grid-area: bubble; }
.home-hero__side--right { grid-area: vault; }
.home-hero__tagline     { grid-area: tag; }
/* explicit width: an empty grid item with margin:auto otherwise collapses to 0 wide */
.home-hero > .home-zig  { grid-area: zig; justify-self: center; width: 92%; }
.home-hero > .home-desk { grid-area: desk; }
.home-hero__center { grid-area: logo; display: flex; flex-direction: column; align-items: center; min-width: 0; margin-top: -8px; }

/* the two flanking columns — kept light + equal so the logo stays centered */
.home-hero__side {
  align-self: center;
  width: 100%;
  max-width: 250px;
}
.home-hero__side--left  {
  justify-self: end;                /* hug toward the logo, gutter on the outside */
  align-self: stretch;
  display: flex;
  align-items: flex-start;          /* bubble sits up near the boys' faces */
  justify-content: flex-end;
  padding-top: clamp(28px, 7vw, 88px);   /* nudged down the logo a little on desktop */
}
.home-hero__side--right { justify-self: start; text-align: center; }

.home-hero__sidehead {
  font-family: "Bungee", var(--font-headline);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
  background-color: var(--comic-blue);
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 0 1.6px, transparent 1.9px);
  background-size: 8px 8px;
  text-align: center;
  padding: 7px 10px;
  margin: 0 0 14px;
  border: 2.5px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow: 3px 3px 0 0 var(--rule-strong);
  text-shadow: 1.5px 1.5px 0 rgba(20,56,97,0.9);
  transform: rotate(-1.5deg);
}
.home-hero__side--right .home-hero__sidehead {
  background-color: var(--accent);
  text-shadow: 1.5px 1.5px 0 rgba(120,28,22,0.9);
  transform: rotate(1.5deg);
}

/* LEFT — how-to-play steps */
.home-steps { list-style: none; margin: 0; padding: 0; }
.home-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.32;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
}
.home-step:last-child { border-bottom: 0; }
.home-step__n {
  flex: 0 0 auto;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  font-family: "Bungee", var(--font-headline);
  font-size: 0.7rem;
  color: var(--paper);
  background: var(--accent);
  border: 2px solid var(--rule-strong);
  border-radius: 50%;
  box-shadow: 1.5px 1.5px 0 0 var(--rule-strong);
}

/* RIGHT — the vault stat */
.home-hero__stat {
  font-family: "Bungee", var(--font-headline);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 0.9;
  color: var(--accent);
  margin: 2px 0 0;
  text-shadow: 2px 2px 0 rgba(120,28,22,0.18);
}
.home-hero__statsub {
  font-family: var(--font-accent);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comic-blue);
  margin: 2px 0 10px;
}
.home-hero__statnote {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 12px;
}
.home-hero__browse {
  display: inline-block;
  font-family: "Bungee", var(--font-accent);
  font-size: 0.66rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--sunny);
  padding: 7px 14px;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 2px 2px 0 0 var(--rule-strong);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.12s ease, color 0.12s ease;
}
.home-hero__browse:hover { background: var(--accent); color: var(--paper); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 0 var(--rule-strong); }
.home-hero__browse:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 0 var(--rule-strong); }
.home-hero__browse:focus-visible { outline: 3px solid var(--comic-blue); outline-offset: 3px; }
/* the BOB wrapper — transform-only vertical float, its own compositor layer */
.home-hero__logo {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;          /* room for the cast shadow */
  animation: kk-bob 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes kk-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}
/* reuse the LOCKED halo: .masthead__logo::before (POW rays) + ::after (ben-day disc) */
.home-hero .masthead__logo {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  /* hug the actual artwork so the POW-starburst halo (sized as a % of this box)
     stays centered + proportional to the logo instead of bleeding into the paper */
  width: -moz-fit-content;
  width: fit-content;
  max-width: 96%;
}
/* a little bigger than the funnies 196px cap (needs the prefix to beat it) */
html[data-theme="funnies"] .home-hero .masthead__logo img {
  max-height: clamp(215px, 19vw, 244px);
  /* keep the PNG's static hard comic drop-shadow (funnies.css) — never animate it.
     this img gets the counter-phase wiggle so bob × wiggle compound into drift */
  animation: kk-wiggle 9s ease-in-out infinite alternate;
  will-change: transform;
}
/* BIG ray-of-sunshine starburst behind the logo (funnies default is 132%/168%);
   the ben-day disc behind the faces stays modest */
html[data-theme="funnies"] .home-hero .masthead__logo::before { width: 188%; height: 232%; }
html[data-theme="funnies"] .home-hero .masthead__logo::after  { width: 96%;  height: 126%; }
@keyframes kk-wiggle {
  0%   { transform: rotate(-0.6deg); }
  100% { transform: rotate(0.6deg); }
}
/* spin the existing POW starburst rays (its radial mask feathers the edge → no strobe) */
.home-hero .masthead__logo::before {
  animation: kk-halo 60s linear infinite;
}
@keyframes kk-halo { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* the blue ben-day disc breathes on a third off-period clock → real depth */
.home-hero .masthead__logo::after {
  animation: kk-disc 11s ease-in-out infinite alternate;
}
@keyframes kk-disc {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
}
/* the real lift-off: a separate soft cast shadow, counter-phase to the bob (same 6.5s) */
.home-hero__cast {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 50%;
  height: 26px;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(ellipse at center,
    rgba(35, 32, 26, 0.30) 0%,
    rgba(35, 32, 26, 0.12) 46%,
    transparent 72%);
  filter: blur(3px);                 /* static blur — only transform/opacity animate */
  z-index: 0;
  pointer-events: none;
  animation: kk-cast 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes kk-cast {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.30; }
  50%      { transform: translateX(-50%) scale(0.92); opacity: 0.16; }
}
/* a red comic speech-bubble popping off the left face */
/* lifted up into the blank space at the top-LEFT, clear of the faces; the tail points
   down-and-right, back toward the boys, so it still reads as them hollerin' at you. */
.home-hero__bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  text-align: center;
  font-family: "Bungee", var(--font-headline);
  font-size: clamp(0.74rem, 1.55vw, 1rem);
  line-height: 1.22;
  color: var(--paper);
  background: var(--accent);
  padding: 14px 20px;
  border: 3px solid var(--rule-strong);
  border-radius: 22px;               /* rounded dialogue box */
  box-shadow: 4px 4px 0 0 var(--rule-strong);
  transform: rotate(-2deg);
  transform-origin: center right;
  z-index: 3;
  animation: kk-pop 420ms var(--flip-ease) 600ms both;
}
/* a proper tapered comic tail pointing RIGHT at the boys:
   ::before = the dark outline triangle, ::after = the red fill triangle on top of it */
.home-hero__bubble::before {
  content: "";
  position: absolute;
  top: 50%; right: -21px;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 24px solid var(--rule-strong);
}
.home-hero__bubble::after {
  content: "";
  position: absolute;
  top: 50%; right: -14px;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid var(--accent);
}
@keyframes kk-pop {
  0%   { transform: scale(0) rotate(-4deg);   opacity: 0; }
  100% { transform: scale(1) rotate(-2deg);   opacity: 1; }
}

.home-hero__tagline {
  font-family: "Bitter", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.9rem, 2.2vw, 1.16rem);
  color: var(--ink);
  text-align: center;
  margin: 10px 0 0;
}
.home-hero__tagline strong {
  font-style: normal;
  font-weight: 600;
  font-size: 1.4em;
  color: var(--accent);
  text-shadow: 1.5px 1.5px 0 rgba(35, 32, 26, 0.18);
}

/* zig-zag comic divider (triangular gradients), echoing the masthead rule */
.home-zig {
  height: 13px;
  margin: clamp(18px, 3vw, 28px) auto clamp(10px, 2vw, 18px);
  max-width: 92%;
  background:
    linear-gradient(135deg, var(--rule-strong) 25%, transparent 25%) -7px 0,
    linear-gradient(225deg, var(--rule-strong) 25%, transparent 25%) -7px 0,
    linear-gradient(315deg, var(--rule-strong) 25%, transparent 25%),
    linear-gradient( 45deg, var(--rule-strong) 25%, transparent 25%);
  background-size: 14px 14px;
}

/* ============================================================
   SECTION BANNER  (Bungee on a halftone bar — mirrors .page__kicker)
   ============================================================ */
.home-banner {
  font-family: "Bungee", var(--font-headline);
  font-size: clamp(0.92rem, 2.4vw, 1.26rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
  padding: 12px 16px;
  margin: 0 auto 20px;
  width: fit-content;
  max-width: 100%;
  border: 2.5px solid var(--rule-strong);
  border-radius: 6px;
  background-color: var(--comic-blue);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 2px, transparent 2.3px);
  background-size: 9px 9px;
  box-shadow: 4px 4px 0 0 var(--rule-strong);
  text-shadow: 2px 2px 0 rgba(20, 56, 97, 0.9);
  transform: rotate(-1deg);
}
.home-banner--red {
  background-color: var(--accent);
  text-shadow: 2px 2px 0 rgba(120, 28, 22, 0.9);
  transform: rotate(1deg);
}
/* "From Kimo's Desk" — left-aligned and slanted */
.home-banner--desk {
  display: inline-block;
  width: auto;
  margin: 0 0 18px -4px;
  transform: rotate(-3deg);
  transform-origin: left center;
}
/* ...pinned to the very TOP-LEFT of the page (above the hero), snug to it */
.home-deskhead { margin: clamp(2px, 1vw, 8px) 0 0 -4px; }

/* ============================================================
   3 · FROM KIMO'S DESK  +  4 · MARGIN NOTES
   ============================================================ */
.home-desk { margin: clamp(20px, 4vw, 36px) 0 0; }

/* solo variant: centered single column (no margin-notes grid) */
.home-desk--solo { max-width: 66ch; margin: clamp(20px, 4vw, 36px) auto 0; }
.home-desk--solo .home-desk__lead { border-right: 0; padding-right: 0; }

/* the Admit One coupon: under the welcome paragraph on desktop, below the how-to on mobile */
.home-desk__coupon { justify-content: flex-start; margin: clamp(18px, 3vw, 30px) 0 0; }
.home-desk__coupon .home-cta { min-width: 0; width: 100%; }
.home-desk__grid {
  display: grid;
  grid-template-columns: minmax(0, 62ch) 1fr;
  /* areas keep the coupon under the welcome on desktop, yet let it drop BELOW the
     margin-notes (the "how-to") on mobile — see the @media block. */
  grid-template-areas:
    "lead   notes"
    "coupon notes";
  column-gap: clamp(20px, 3vw, 44px);
  row-gap: 0;
  align-items: start;
}
.home-desk__lead   { grid-area: lead; }
.home-notes        { grid-area: notes; }
.home-desk__coupon { grid-area: coupon; }

.home-desk__lead {
  position: relative;
  padding-right: clamp(0px, 1.6vw, 22px);
  border-right: 1px solid var(--rule);
}
.home-desk__byline {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--comic-blue);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--rule);
}
.home-desk__body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.66;
  color: var(--ink);
  margin: 0 0 14px;
}
.home-desk__body em { font-style: italic; }
.home-desk__body strong { color: var(--accent); font-weight: 600; }
/* Rye drop-cap on the lead paragraph */
.home-desk__body--lead::first-letter {
  font-family: "Rye", var(--font-masthead);
  font-size: 3.4em;
  line-height: 0.78;
  float: left;
  margin: 6px 8px 0 0;
  color: var(--accent);
  text-shadow: 2px 2px 0 rgba(35, 32, 26, 0.18);
}
.home-desk__sign {
  font-family: "Rye", var(--font-masthead);
  font-size: 1.3rem;
  color: var(--comic-blue);
  margin: 4px 0 0;
}

/* the margin notes — red-pen scrawls pulled out of the letter */
.home-notes { position: relative; }
.home-notes__head {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.home-note {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px 12px 12px;
  margin: 0 0 12px;
  background: #fffdf2;                       /* legal-pad note stock */
  border: 2px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: 3px 3px 0 0 rgba(58, 53, 43, 0.22);
  transform: rotate(-0.6deg);
}
.home-note:nth-child(even) { transform: rotate(0.6deg); }
.home-note__n {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: "Bungee", var(--font-headline);
  font-size: 0.82rem;
  color: var(--paper);
  background: var(--comic-blue);
  border: 2px solid var(--rule-strong);
  border-radius: 50%;
  box-shadow: 1.5px 1.5px 0 0 var(--rule-strong);
}
.home-note:nth-child(odd) .home-note__n { background: var(--accent); }
.home-note__txt {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}
.home-note__txt b {
  font-family: var(--font-accent);
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* the live FLIP micro-demo tile inside note 3 */
.home-note--flip { padding-bottom: 14px; }
.home-demo {
  position: relative;
  width: 96px; height: 64px;
  margin: 12px 0 2px;
  perspective: 900px;
}
.home-demo__leaf {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* base flip ease (NOT the funnies overshoot) so it won't bounce at 180° */
  animation: kk-demo 7s cubic-bezier(0.62, 0.04, 0.30, 1) infinite;
  will-change: transform;
}
@keyframes kk-demo {
  0%, 38%  { transform: rotateY(0deg); }
  50%, 88% { transform: rotateY(180deg); }
  100%     { transform: rotateY(0deg); }
}
/* (no hover-to-flip — it yanked the tile to the answer side mid-animation; let it just loop) */
.home-demo__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Bungee", var(--font-headline);
  font-size: 0.74rem;
  text-align: center;
  border: 2px solid var(--rule-strong);
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 2px 2px 0 0 rgba(58, 53, 43, 0.3);
}
.home-demo__face span { display: block; font-size: 1.3rem; line-height: 1; }
.home-demo__face--quiz { background: var(--paper); color: var(--comic-blue); }
.home-demo__face--ans  { background: var(--sunny); color: var(--accent); transform: rotateY(180deg); }
.home-demo__tab {
  position: absolute;
  right: -6px; bottom: -8px;
  font-family: "Bungee", var(--font-accent);
  font-size: 0.5rem;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sunny);
  padding: 3px 8px;
  border: 2px solid var(--rule-strong);
  border-radius: 8px 8px 8px 0;
  box-shadow: 1.5px 1.5px 0 0 var(--rule-strong);
}

/* ============================================================
   5 · "ADMIT ONE" CLIP-OUT COUPON  (primary CTA → index.html)
   ============================================================ */
.home-cta-wrap {
  display: flex;
  justify-content: center;
  margin: clamp(28px, 5vw, 48px) 0 clamp(8px, 2vw, 16px);
}
.home-cta {
  position: relative;
  display: block;
  text-decoration: none;
  text-align: center;
  min-width: min(420px, 88vw);
  padding: 22px 30px 18px;
  color: var(--ink);
  /* faint ben-day so it reads like newsprint coupon stock */
  background:
    radial-gradient(circle, rgba(31, 78, 140, 0.10) 0 1.2px, transparent 1.4px) 0 0 / 7px 7px,
    var(--paper);
  border: 3px dashed var(--rule-strong);
  border-radius: 6px;
  box-shadow: 6px 7px 0 0 var(--rule-strong);
  transform: rotate(-1deg);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.14s ease;
}
.home-cta.is-stamped { animation: kk-slam 420ms var(--flip-ease) both, kk-breathe 2.6s ease-in-out 520ms infinite; }
@keyframes kk-slam {
  0%   { transform: scale(1.5) rotate(-5deg);  opacity: 0; }
  55%  { transform: scale(0.96) rotate(1.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(-1deg);    opacity: 1; }
}
@keyframes kk-breathe {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  50%      { transform: scale(1.02) rotate(-1deg); }
}
/* scissors riding the dashed "cut here" line */
.home-cta::before {
  content: "\2701";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rule-strong);
  transition: transform 0.18s var(--flip-ease);
}
.home-cta__stamp {
  position: absolute;
  top: -12px; right: -10px;
  font-family: "Bungee", var(--font-headline);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--sunny);
  padding: 5px 10px;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  transform: rotate(8deg);
  box-shadow: 1.5px 1.5px 0 0 var(--rule-strong);
}
.home-cta__big {
  display: block;
  font-family: "Bungee", var(--font-headline);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 2px 2px 0 rgba(120, 28, 22, 0.2);
}
.home-cta__sub {
  display: block;
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  font-size: clamp(0.92rem, 2.2vw, 1.08rem);
  color: var(--ink);
  margin-top: 4px;
}
.home-cta__arrow { display: inline-block; transition: transform 0.12s ease; }
.home-cta__fine {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin-top: 10px;
}
.home-cta:hover {
  transform: translate(-1px, -2px) rotate(-1deg);
  box-shadow: 8px 9px 0 0 var(--rule-strong);
  background:
    radial-gradient(circle, rgba(31, 78, 140, 0.10) 0 1.2px, transparent 1.4px) 0 0 / 7px 7px,
    #fffdf3;
}
.home-cta:hover::before { transform: translateY(-50%) rotate(-14deg) translateX(3px); }  /* snip! */
.home-cta:hover .home-cta__arrow { transform: translateX(5px); }
.home-cta:active { transform: translate(2px, 2px) rotate(-1deg); box-shadow: 2px 2px 0 0 var(--rule-strong); }
.home-cta:focus-visible { outline: 3px solid var(--comic-blue); outline-offset: 4px; }

/* ============================================================
   6 · WHAT'S INSIDE — THE BACK-ISSUE MORGUE
   ============================================================ */
.home-index {
  margin: clamp(28px, 5vw, 48px) auto 0;
  max-width: 760px;
  padding: 0 0 4px;
}
.home-index__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 22px;
  align-items: center;
  padding: 20px 22px;
  background: var(--paper);
  border: 3px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: 6px 7px 0 0 var(--rule-strong);
}
.home-index__stat {
  grid-row: span 2;
  text-align: center;
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-size: 0.7rem;
  align-self: center;
  padding-right: 20px;
  border-right: 2px dashed var(--rule);
}
.home-index__stat b {
  display: block;
  font-family: "Bungee", var(--font-headline);
  font-size: clamp(2.2rem, 7vw, 3rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0;
}
.home-index__years { display: block; color: var(--comic-blue); margin-top: 4px; }
.home-index__note {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.home-index__phone {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--comic-blue);
  margin: 0;
}
.home-index__phone b { font-style: normal; color: var(--accent); }
.home-index__mini {
  grid-column: 2;
  justify-self: start;
  margin-top: 4px;
  font-family: "Bungee", var(--font-accent);
  font-size: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--sunny);
  padding: 7px 14px;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 2px 2px 0 0 var(--rule-strong);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.12s ease, color 0.12s ease;
}
.home-index__mini:hover { background: var(--accent); color: var(--paper); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--rule-strong); }
.home-index__mini:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--rule-strong); }
.home-index__mini:focus-visible { outline: 3px solid var(--comic-blue); outline-offset: 3px; }

/* ============================================================
   7 · COLOPHON / SIGN-OFF   (.colophon__rule = candy stripe from funnies.css)
   ============================================================ */
.home-foot {
  text-align: center;
  margin: clamp(28px, 5vw, 50px) auto clamp(28px, 6vw, 56px);
  padding-top: 4px;
}
.home-foot__line {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.home-foot__line strong { color: var(--accent); }
.home-foot__fine {
  font-family: var(--font-accent);
  font-size: 0.92rem;
  color: var(--comic-blue);
  margin: 0;
}

/* ============================================================
   SCROLL-IN REVEALS  (one-shot; JS toggles .is-in, then unobserves)
   ============================================================ */
.home-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0) rotate(0.5deg);
  transition:
    transform 520ms cubic-bezier(0.2, 0.8, 0.25, 1.05),
    opacity 520ms ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.home-reveal.is-in { opacity: 1; transform: none; }
/* the desk lead has a column rule we keep; reveals shouldn't clip it */
.home-desk__lead.home-reveal.is-in { transform: none; }

/* ============================================================
   RESPONSIVE  —  collapse to a single column on phones
   ============================================================ */
@media (max-width: 860px) {
  /* one column, re-ordered by area: logo, then the bubble tucked under it, the divider,
     the welcome letter, and finally THE VAULT as a closing band at the very bottom. */
  .home-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "bubble"
      "tag"
      "zig"
      "desk"
      "vault";
    column-gap: 0;
    row-gap: clamp(6px, 1.8vw, 12px);
    justify-items: center;
  }
  .home-hero__center { margin-top: 0; }
  .home-hero__side { max-width: 460px; width: 100%; justify-self: center; }
  .home-hero__side--left { justify-content: center; align-items: center; padding-top: 0; }
  .home-hero__side--right { justify-self: center; text-align: center; margin-top: clamp(12px, 3vw, 24px); }
  .home-hero > .home-zig, .home-hero > .home-desk { width: 100%; }

  /* the bubble now reads as the boys hollerin': centered under the logo, tail pointing UP */
  .home-hero__bubble {
    transform: rotate(-1deg);
    transform-origin: center;
    max-width: min(330px, 88%);
    margin-top: 6px;
  }
  .home-hero__bubble::before {
    top: -22px; left: 50%; right: auto;
    transform: translateX(-50%);
    border-top: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 24px solid var(--rule-strong);
  }
  .home-hero__bubble::after {
    top: -14px; left: 50%; right: auto;
    transform: translateX(-50%);
    border-top: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 17px solid var(--accent);
  }

  /* rein the sunshine in so it doesn't sprawl above/below the logo on a phone */
  html[data-theme="funnies"] .home-hero .masthead__logo::before { width: 158%; height: 178%; }
  .home-hero__logo { padding-bottom: 8px; }
}
@media (max-width: 760px) {
  /* one column: welcome paragraph → the how-to (margin notes) → the Admit One coupon */
  .home-desk__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "notes"
      "coupon";
    row-gap: 22px;
  }
  .home-desk__lead { border-right: 0; padding-right: 0; }
}

/* ============================================================
   REDUCED MOTION  —  everything rests in its final, lifted state.
   (js/home.js also reveals immediately + types the dateline fully.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .home-ribbon__rail,
  .home-hero__logo,
  .home-hero .masthead__logo img,
  .home-hero .masthead__logo::before,
  .home-hero .masthead__logo::after,
  .home-hero__bubble,
  .home-demo__leaf,
  .home-cta.is-stamped {
    animation: none !important;
  }
  .home-hero__cast {
    animation: none !important;
    transform: translateX(-50%) scale(0.96);   /* rest in the lifted pose */
    opacity: 0.22;
  }
  .home-hero__bubble { transform: rotate(-2deg); opacity: 1; }
  .home-type.is-typing { max-width: none; border-right: 0; animation: none !important; }
  .home-reveal { opacity: 1; transform: none; transition: none; }
  .home-cta:hover { transform: rotate(-1deg); }       /* calm, no scissor swing */
  .home-cta:hover::before { transform: translateY(-50%); }
}