@import url('./tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

a { color: inherit; }
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: var(--space-md); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- Nav ---------- */
/* Two independent floating capsules, not one bar: the brand+links capsule
   (left) and the lang/theme controls capsule (right) never compete for the
   same row, so neither can force the other to wrap the way a single
   shrinking bar did. Both still morph continuously off scroll position
   (--nav-scroll, 0->1, set every frame by motion.js) for surface intensity
   only — width is sized to content now, never scroll-driven, since that's
   what caused the wrap in the first place. Both also adopt whichever
   section is currently behind them (data-band, from motion.js's scroll
   position detection) via --nav-tint-rgb/--nav-text/--nav-active, set on
   the shared .nav-mast ancestor so both capsules stay in sync. */
.nav-mast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  pointer-events: none;
  --nav-tint-rgb: var(--color-surface-rgb);
  --nav-text: var(--color-on-surface);
  --nav-active: var(--color-accent);
}
.nav-mast[data-band="comic"] { --nav-tint-rgb: var(--color-coral-rgb); --nav-text: var(--color-paper); --nav-active: var(--color-paper); }
.nav-mast[data-band="poster"] { --nav-tint-rgb: var(--color-navy-rgb); --nav-text: var(--color-paper); --nav-active: var(--color-paper); }
.nav-mast[data-band="kids"] { --nav-tint-rgb: var(--color-yellow-rgb); --nav-text: var(--color-navy); --nav-active: var(--color-navy); }
.nav-mast[data-band="invitations"] { --nav-tint-rgb: var(--color-teal-rgb); --nav-text: var(--color-paper); --nav-active: var(--color-paper); }
.nav-mast[data-band="footer"] { --nav-tint-rgb: var(--color-ink-rgb); --nav-text: var(--color-paper); --nav-active: var(--color-paper); }
.nav-capsule {
  pointer-events: auto;
  display: flex; align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-chip);
  color: var(--nav-text);
  background: rgb(var(--nav-tint-rgb) / calc(.22 + var(--nav-scroll, 0) * .48));
  backdrop-filter: blur(calc(6px + var(--nav-scroll, 0) * 10px)) saturate(1.4);
  border: 1px solid rgb(var(--nav-tint-rgb) / calc(.12 + var(--nav-scroll, 0) * .18));
  box-shadow: 0 calc(var(--nav-scroll, 0) * 14px) calc(var(--nav-scroll, 0) * 34px) rgb(12 30 56 / calc(var(--nav-scroll, 0) * .18));
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.nav-capsule--main {
  gap: var(--space-md); flex-wrap: wrap;
  max-width: min(92vw, 58rem);
}
.nav-capsule--controls { flex-shrink: 0; }
.brand {
  display: flex; align-items: center; gap: var(--space-xs);
  text-decoration: none;
}
.brand svg { width: 34px; height: auto; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: -0.01em; }
.brand__tag {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-top: .2em;
}
.mast-nav { position: relative; }
.mast-nav ul { list-style: none; display: flex; gap: var(--space-lg); margin: 0; padding: 0; flex-wrap: wrap; position: relative; z-index: 1; }
.mast-nav a {
  text-decoration: none; font-weight: 500; font-size: var(--text-sm);
  position: relative; padding-block: .65rem; display: inline-block;
}
.mast-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--nav-active); transition: right var(--dur-short) var(--ease-out);
}
.mast-nav a:hover::after, .mast-nav a[aria-current]::after { right: 0; }
.mast-nav a[aria-current] { color: var(--nav-active); font-weight: 700; }
/* Sliding pill, settles onto the hovered link and back onto the current
   page's link on mouseleave — position set by motion.js via --ind-x/--ind-w. */
.mast-nav__indicator {
  position: absolute; top: 0; left: 0; height: 100%; z-index: 0;
  width: var(--ind-w, 0px); transform: translateX(var(--ind-x, 0px));
  background: color-mix(in oklch, currentColor 14%, transparent);
  border-radius: var(--radius-chip); opacity: 0; pointer-events: none;
  transition: transform var(--dur-short) var(--ease-spring), width var(--dur-short) var(--ease-spring),
    opacity var(--dur-micro) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .mast-nav__indicator { transition: opacity var(--dur-micro) var(--ease-out); }
}

/* Mobile disclosure for the link list — plain div/button + a .is-open class
   toggled by motion.js (a <details>/<summary> version looked native-only
   but Chromium's internal disclosure-animation wrapper for non-summary
   content ignores author display overrides on the host element, so the
   link list silently collapsed to zero width even on desktop). Same
   click-toggle pattern as .theme-toggle elsewhere in this file/motion.js. */
.nav-drawer { display: contents; }
.nav-drawer > ul { display: flex; }
.nav-drawer__toggle {
  display: none; cursor: pointer; border: none; padding: 0; background: transparent; color: currentColor;
  width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.nav-drawer__toggle svg { width: 20px; height: 20px; }
.nav-drawer__toggle .icon-close { display: none; }
.nav-drawer.is-open .icon-menu { display: none; }
.nav-drawer.is-open .icon-close { display: block; }

.nav-controls { display: flex; align-items: center; gap: var(--space-2xs); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: none; padding: 0;
  background: transparent; color: currentColor; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-spring);
}
.theme-toggle:hover { background: color-mix(in oklch, currentColor 10%, transparent); transform: scale(1.05); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  html:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: block; }

.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 .65rem; box-sizing: border-box;
  border-radius: var(--radius-chip); text-decoration: none; color: currentColor;
  border: 1px solid color-mix(in oklch, currentColor 25%, transparent);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-spring);
}
.lang-switch:hover { background: color-mix(in oklch, currentColor 10%, transparent); transform: scale(1.05); }

/* ---------- Hero ---------- */
/* Full-bleed and full-screen — sits behind the (initially transparent) nav
   so the color backdrop reads edge-to-edge instead of being boxed in by
   .wrap like a regular content section. */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-block: var(--space-2xl) var(--space-xl); text-align: center;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -25% -15% auto -15%; height: 150%; z-index: 0;
  background:
    radial-gradient(38% 38% at 18% 22%, rgb(var(--color-coral-rgb) / .6) 0%, rgb(var(--color-coral-rgb) / 0) 70%),
    radial-gradient(34% 34% at 82% 12%, rgb(var(--color-teal-rgb) / .6) 0%, rgb(var(--color-teal-rgb) / 0) 70%),
    radial-gradient(30% 30% at 72% 78%, rgb(var(--color-yellow-rgb) / .65) 0%, rgb(var(--color-yellow-rgb) / 0) 70%),
    radial-gradient(30% 30% at 12% 80%, rgb(var(--color-navy-rgb) / .45) 0%, rgb(var(--color-navy-rgb) / 0) 70%);
  filter: blur(70px); opacity: .55; pointer-events: none;
  animation: aura-drift 16s var(--ease-in-out) infinite alternate;
}
@keyframes aura-drift { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-16px) rotate(2.5deg); } }
.hero > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.hero-mark { width: min(260px, 60vw); margin-inline: auto var(--space-lg); }
.hero-mark svg { width: 100%; height: auto; display: block; }
.hero-mark path {
  opacity: 0; transform-origin: center;
  transform: scale(.85) rotate(-6deg);
  animation: markSettle var(--dur-long) var(--ease-spring) forwards;
  animation-delay: calc(var(--i) * 110ms + 120ms);
}
@keyframes markSettle { to { opacity: 1; transform: scale(1) rotate(0deg); } }
.hero-mark.breathe path { animation: markSettle var(--dur-long) var(--ease-spring) forwards, breathe 7s var(--ease-in-out) 1.2s infinite; }
@keyframes breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.hero h1 {
  font-family: var(--font-display); font-size: var(--text-display);
  line-height: 1.02; margin: 0 0 var(--space-md); letter-spacing: -0.01em;
}
.hero h1 .accent { color: var(--color-accent); }
.hero p.lede { max-width: 42rem; margin-inline: auto; font-size: var(--text-md); color: var(--color-on-surface-2); }

.scroll-cue {
  display: inline-flex; margin-top: var(--space-xl); color: var(--color-surface-muted);
  animation: bob 2.2s var(--ease-in-out) infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- Scroll-scrubbed motion ---------- */
/* Base/no-JS state is fully visible — motion.js drives opacity/transform
   directly, in lockstep with scroll position, once it runs. A short
   transition just smooths between animation frames, it doesn't delay
   anything (the scroll position IS the timeline here). */
[data-scrub] { opacity: 1; transition: transform 90ms linear, opacity 120ms linear; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  [data-scrub] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-mark path { animation: none; opacity: 1; transform: none; }
  .scroll-cue { animation: none; }
}

/* ---------- CTA chip (shared) — one consistent house action color across
   every band background, so it reads regardless of which product's color
   surrounds it. Comic gets a hard-shadow "print registration" press. ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: .9em 1.7em; border-radius: var(--radius-chip);
  background: var(--color-ink); color: var(--color-paper);
  text-decoration: none; font-weight: 700; font-size: var(--text-sm);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-short) var(--ease-out);
}
.chip:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-card-hover); }
.chip:active { transform: translateY(-1px) scale(.99); }
.chip--light { background: var(--color-paper); color: var(--color-ink); }
.chip--hard {
  box-shadow: 6px 6px 0 #0c1e38;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.chip--hard:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #0c1e38; }
.chip--hard:active { transform: translate(6px, 6px); box-shadow: 0 0 0 #0c1e38; }

/* ---------- Product bands ---------- */
.band { position: relative; padding-block: var(--space-3xl); overflow: hidden; }
.band__inner {
  position: relative; z-index: 2; display: grid; gap: var(--space-xl);
  align-items: center;
}
.band__index {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; opacity: .65; display: block;
  margin-bottom: var(--space-sm);
}
.band__title {
  font-family: var(--font-display); font-size: clamp(2.25rem, 3vw + 1.5rem, var(--text-2xl)); line-height: 1;
  margin: 0 0 var(--space-sm); letter-spacing: -0.01em;
}
.band__tagline { font-size: var(--text-md); max-width: 32rem; margin: 0 0 var(--space-lg); opacity: .92; }
.compare-list { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-lg); max-width: 32rem; }
.compare-list dt {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .7;
}
.compare-list dd { margin: 0 0 var(--space-sm); font-size: var(--text-sm); opacity: .92; }
.band .status {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .4em .9em; border-radius: var(--radius-chip);
  background: rgba(246,241,231,.92); color: var(--color-ink); margin-bottom: var(--space-md);
}
@media (min-width: 56rem) {
  .band__inner { grid-template-columns: 1.1fr 0.9fr; }
  .band--reverse .band__inner { direction: rtl; }
  .band--reverse .band__inner > * { direction: ltr; }
}

/* -- Comic band: coral, diagonal-cut (parchment peeks through the notch,
   same motif used at every band seam below), halftone, punchy -- */
.band-comic {
  background: var(--color-coral); color: var(--color-paper);
  clip-path: polygon(0 3.5rem, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
  padding-block: calc(var(--space-3xl) + 3.5rem);
  /* Above Poster (a plain rectangle with no shape of its own) so Comic's
     own diagonal clip — not Poster's flat top edge — is what's visible at
     the seam below; otherwise Poster paints over and erases the diagonal. */
  z-index: 2;
}
/* Interlock, homepage only: pulls Comic up into Hero's bottom padding so
   Hero's own surface shows through Comic's top-left clip notch instead of
   raw page background. #comic only exists on index.html — the same
   .band-comic styling is reused as comic.html's own page-hero, which has
   no preceding sibling to interlock with, so it's untouched by this rule. */
#comic { margin-top: -3.5rem; }
.band-comic::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(20,48,86,.16) 1.4px, transparent 1.4px);
  background-size: 14px 14px; opacity: .5; z-index: 1;
}
.band-comic .band__title { font-weight: 900; }
.comic-mock { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); transform: translateY(var(--px, 0px)); }
.comic-mock span {
  aspect-ratio: 4/3; border-radius: 10px; background: rgba(20,48,86,.14);
  border: 2px solid rgba(20,48,86,.3);
}
.comic-mock span:first-child { grid-column: 1 / -1; aspect-ratio: 8/3; }
.band-note { font-size: var(--text-xs); opacity: .8; margin-top: var(--space-sm); }

/* -- Poster band: navy, cinematic, slow -- */
.band-poster { background: var(--color-navy); color: var(--color-paper); text-align: center; z-index: 1; }
/* Interlock, homepage only: pulls Poster up into Comic's bottom padding so
   Poster's navy fills Comic's bottom-right clip notch instead of exposing
   page background. See #comic above for why this is ID-scoped. */
#poster { margin-top: -3.5rem; }
.band-poster .band__inner { grid-template-columns: 1fr !important; justify-items: center; }
.band-poster .band__tagline { margin-inline: auto; }
.band-poster::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 20%, rgb(var(--color-coral-rgb) / .3), rgb(var(--color-coral-rgb) / 0) 70%);
  z-index: 0;
}
.band-poster .band__title { font-size: clamp(2.75rem, 6vw, 4.75rem); text-transform: uppercase; letter-spacing: -0.01em; }
.poster-mock {
  width: min(220px, 60vw); aspect-ratio: 2/3; margin-inline: auto; border-radius: 14px;
  background: linear-gradient(160deg, rgba(249,110,90,.5), rgba(75,172,165,.4));
  border: 1px solid rgba(246,241,231,.35); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
  transform: translateY(var(--px, 0px));
}

/* -- Kids band: yellow, soft, bouncy, rounded corners (parchment peeks
   through the corner notches, same seam motif as Comic's diagonal) -- */
.band-kids {
  background: var(--color-yellow); color: var(--color-navy);
  border-radius: 3rem 3rem 0 0; padding-block: calc(var(--space-3xl) + 1.5rem);
  /* Above Poster (see .band-comic above for why) so Kids's own rounded-
     corner clip is what's visible at the seam, not Poster's flat edge. */
  z-index: 2;
}
/* Interlock, homepage only: pulls Kids up into Poster's bottom padding so
   Poster's navy fills the rounded top-corner notches instead of exposing
   page background. See #comic above for why this is ID-scoped. */
#childrens-book { margin-top: -3rem; }
.blob {
  position: absolute; border-radius: 62% 38% 55% 45% / 45% 55% 42% 58%;
  background: rgba(20,48,86,.08); z-index: 0;
  animation: blob-bob 9s var(--ease-in-out) infinite alternate;
}
.blob--a { width: 9rem; height: 9rem; top: 8%; right: 8%; }
.blob--b { width: 5.5rem; height: 5.5rem; bottom: 10%; left: 4%; animation-delay: -3s; }
@keyframes blob-bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-14px) rotate(6deg); } }
.sparkle {
  position: absolute; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--color-navy); opacity: .35; z-index: 0;
  animation: blob-bob 5s var(--ease-in-out) infinite alternate;
}
.sparkle--a { top: 4%; left: 18%; }
.sparkle--b { top: 60%; right: 12%; animation-delay: -1.5s; }
.sparkle--c { bottom: 8%; left: 42%; width: .4rem; height: .4rem; animation-delay: -3.2s; }
.book-mock {
  display: flex; width: min(280px, 78vw); margin-inline: auto;
  filter: drop-shadow(0 22px 34px rgba(20,48,86,.22));
  transform: translateY(var(--px, 0px)) rotate(-2deg);
}
.book-mock .page {
  flex: 1; background: rgba(246,241,231,.8); border: 2px solid rgba(20,48,86,.28);
  padding: var(--space-md) var(--space-sm);
}
.book-mock .page:first-child { border-radius: 12px 2px 2px 12px; border-right-width: 1px; }
.book-mock .page:last-child { border-radius: 2px 12px 12px 2px; border-left-width: 1px; }
.book-mock .page span { display: block; height: 6px; border-radius: 3px; background: rgba(20,48,86,.22); margin-bottom: .55rem; }
.book-mock .page span:nth-child(1) { width: 85%; }
.book-mock .page span:nth-child(2) { width: 55%; }
.book-mock .page span:nth-child(3) { width: 70%; margin-bottom: 0; }

.cta-row { text-align: center; padding-block: var(--space-lg) var(--space-2xl); }

/* ---------- Long-document prose (About/FAQ/Privacy/Terms) ---------- */
/* Calmest family on the site, deliberately: no reveal animation, no
   enrichment — correct for legal/informational content. Extra top padding
   because these pages have no full-bleed hero band to clear the fixed nav
   the way product pages do. */
.prose { max-width: 42rem; margin: 0 auto; padding: calc(var(--space-3xl) + 3rem) var(--space-md) var(--space-3xl); }
.prose h1 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-xs); }
.prose .updated { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-muted); margin: 0 0 var(--space-lg); }
.prose .lede { font-size: var(--text-md); color: var(--color-on-surface-2); margin: 0 0 var(--space-xl); }
.prose h2 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-2xs); }
.prose p { margin: 0 0 var(--space-md); color: var(--color-on-surface-2); }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Product-page body content (shared by every product page) ---------- */
.page-body { padding-block: var(--space-3xl); }
.page-body__intro { max-width: 40rem; margin: 0 auto var(--space-2xl); text-align: center; }
.page-body__intro h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-sm); }
.page-body__intro p { color: var(--color-on-surface-2); font-size: var(--text-md); }

.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; gap: var(--space-xl); max-width: 46rem; margin-inline: auto;
}
.steps li { counter-increment: step; position: relative; padding-left: 3.25rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);
}
.steps h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-3xs); }
.steps p { margin: 0; color: var(--color-on-surface-2); }
@media (min-width: 48rem) {
  .steps { grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-lg); }
}

/* -- Invitations band: teal, quiet, stationery card. Top edge is a stamp-
   perforation scallop (echoes .letter-mock's deckle edge below) instead of
   a plain rectangle, so it has its own signature shape like every other
   band. -- */
.band-invitations {
  background: var(--color-teal); color: var(--color-paper);
  padding-block: calc(var(--space-3xl) + 14px) var(--space-3xl);
  clip-path: polygon(0% 14px, 4.167% 0px, 8.333% 14px, 12.5% 0px, 16.667% 14px, 20.833% 0px,
    25% 14px, 29.167% 0px, 33.333% 14px, 37.5% 0px, 41.667% 14px, 45.833% 0px,
    50% 14px, 54.167% 0px, 58.333% 14px, 62.5% 0px, 66.667% 14px, 70.833% 0px,
    75% 14px, 79.167% 0px, 83.333% 14px, 87.5% 0px, 91.667% 14px, 95.833% 0px,
    100% 14px, 100% 100%, 0 100%);
  /* Above Kids so this scalloped top notch — not Kids's flat bottom edge —
     is what's visible at the seam. See .band-comic above for the pattern. */
  z-index: 3;
}
/* Interlock, homepage only: pulls Invitations up into Kids's bottom padding
   so Kids's yellow fills the perforation notches instead of exposing raw
   page background. #invitations only exists on index.html — see #comic
   above for why this is ID-scoped. */
#invitations { margin-top: -14px; }
.letter-mock {
  width: min(320px, 85vw); background: var(--color-paper); color: var(--color-ink);
  padding: var(--space-lg); margin-inline: auto; box-shadow: var(--shadow-card-hover);
  text-align: left; position: relative; transform: translateY(var(--px, 0px)) rotate(1.5deg);
  clip-path: polygon(0 6px, 8% 0, 17% 6px, 25% 0, 33% 6px, 42% 0, 50% 6px, 58% 0,
    67% 6px, 75% 0, 83% 6px, 92% 0, 100% 6px, 100% 100%, 0 100%);
}
.letter-mock .seal {
  position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-teal);
  display: grid; place-items: center; box-shadow: var(--shadow-card);
}
.letter-mock .seal svg { width: 60%; }
.letter-mock p { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }

@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* ---------- Footer ---------- */
.foot {
  background: var(--color-ink); color: var(--color-paper);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding-block: var(--space-xl);
  /* Above every band (see .band-comic above for why) so its own rounded-
     corner clip is what's visible at the seam, never a neighbor's flat edge. */
  z-index: 4;
  /* Interlock: pulls the footer up into whatever precedes it (band,
     page-body, or prose — all have >= 8rem of bottom padding to spare) so
     that section's own color fills the footer's rounded top-corner
     notches instead of exposing raw page background. Safe on every page —
     the footer is never a page's first element. */
  margin-top: calc(-1 * var(--radius-card));
}
.foot p { margin: 0 0 var(--space-sm); font-size: var(--text-md); font-family: var(--font-display); max-width: 34rem; }
.foot .sign { display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); opacity: .7; }
.foot .legal { font-size: var(--text-sm); opacity: .75; }
.foot .legal a { text-decoration: underline; text-underline-offset: 3px; }
.foot .legal a:hover { opacity: 1; }

@media (max-width: 34rem) {
  /* Collapse the link list into a dropdown off the hamburger instead of
     wrapping the pill onto 2-3 lines — both capsules now stay on one slim
     row exactly like desktop, so the base .hero/.band/.prose top padding
     already clears it and doesn't need a mobile-specific bump. */
  /* Brand text (not just the tagline) drops too — logo-only, since the
     controls pill (lang + theme) sitting on the same row leaves too little
     width for "Nuvem Creative" as text once the link list is gone but the
     brand name isn't. Padding trims for the same reason: freeing enough
     width that both pills fit one row down to a 320px-wide phone. */
  .brand__text { display: none; }
  .nav-mast { padding-inline: var(--space-sm); }
  .nav-capsule { padding-inline: var(--space-sm); }
  .nav-drawer { display: block; position: relative; }
  .nav-drawer__toggle { display: inline-flex; }
  .nav-drawer:not(.is-open) > ul { display: none; }
  .nav-drawer.is-open > ul {
    display: flex; flex-direction: column; gap: var(--space-2xs);
    position: absolute; top: calc(100% + var(--space-sm)); left: 50%;
    transform: translateX(-50%); min-width: 11rem;
    background: rgb(var(--nav-tint-rgb) / .94); backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgb(var(--nav-tint-rgb) / .2); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover); padding: var(--space-sm) var(--space-md);
  }
  .mast-nav__indicator { display: none; }
}

/* View Transitions API — native, progressive enhancement only */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-short); }
}