/* ═══════════════════════════════════════════════════════════════════
   TOKENS — Carnival structure, GDC brand palette
   Roles preserved: paper=bg, ink=deep-text, accent=warm-highlight,
   accent-2=deep-contrast, rule=decorative-border
   ═══════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* — Type ---------------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Druk Wide", "Anton", ui-sans-serif, sans-serif;
  --font-body:    "DM Sans", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, monospace;

  /* — Type scale (Carnival runs LARGE on display) ------------------- */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.125rem;
  --text-lg:        1.375rem;
  --text-xl:        1.875rem;
  --text-2xl:       2.5rem;
  --text-3xl:       3.5rem;
  --text-marquee:   clamp(5rem, 16vw + 1rem, 16rem);
  --text-display:   clamp(3rem, 7vw + 1rem, 7rem);
  --text-display-s: clamp(2rem, 4vw + 0.5rem, 3.5rem);

  --display-weight:  800;
  --display-width:   110;
  --display-style:   normal;

  --lh-tight:   0.85;
  --lh-snug:    1.0;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;

  --tracking-display: 0.04em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.18em;

  /* — Colour (GDC palette mapped to Carnival roles) ----------------- */
  /* paper role (warm background) */
  --color-paper:      #F3EDE0;
  --color-paper-2:    #EDE4D3;
  --color-paper-3:    #DCD2BE;
  /* rule role (decorative borders — terracota takes oxblood's role) */
  --color-rule:       #C2562F;
  --color-rule-2:     #2B2119;
  /* muted/neutral */
  --color-muted:      #7C7363;
  --color-neutral:    #5C5040;
  --color-ink-2:      #3D3428;
  /* ink role (deep text — espresso) */
  --color-ink:        #2B2119;
  /* accent role (primary — o clube é VERDE; paper text on top) */
  --color-accent:     #2F6B47;
  --color-accent-fg:  #FBF7EE;
  /* accent-2 role (warm counterpoint — terracota, nosso --special) */
  --color-accent-2:   #C2562F;
  /* accent-3 (amarelo queimado — seasoning on DARK surfaces only) */
  --color-accent-3:   #D9A441;
  --color-accent-ink: #FBF7EE;
  /* focus ring */
  --color-focus:      #2F6B47;

  /* — Spacing ------------------------------------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --section-gap:      5rem;
  --section-head-gap: 1.25rem;

  --page-max:    78rem;
  --page-gutter: clamp(1rem, 3.5vw, 2.5rem);
  --measure:     58ch;

  --rule-hair:   0.5px;
  --rule-fine:   2px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --rule-card:   2px;
  --shadow-card: 4px 4px 0 #2B2119;

  /* — Motion -------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   240ms;
  --dur-long:    440ms;
  --dur-marquee: 32s;

  --z-base:       1;
  --z-raised:     10;
  --z-sticky-nav: 300;

  --banner-height: 48px;
}

/* ═══════════════════════════════════════════════════════════════════
   STYLES — Carnival-01 page styles (verbatim structure)
   ═══════════════════════════════════════════════════════════════════ */

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

html, body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only:focus-visible {
  position: fixed; top: var(--space-md); left: var(--space-md);
  width: auto; height: auto; clip: auto;
  padding: var(--space-xs) var(--space-md); background: var(--color-ink);
  color: var(--color-paper); border-radius: 4px; z-index: 999;
}

.shell {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* — Display helpers ----------------------------------------------- */
.dsp {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 110, "wght" 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

.mono {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
}

.orn {
  color: var(--color-accent-2);
  font-style: normal;
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────────
   NAV — N7 brutal slab
   ───────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  border-bottom: 2px solid var(--color-ink);
  z-index: var(--z-sticky-nav);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--banner-height);
  padding-block: 0.4rem;
}
.nav__wordmark { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-paper);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}
.nav__wordmark .orn { color: var(--color-accent-3); }

.nav__links {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: var(--space-lg);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
}
.nav__links a { color: #F3EDE0; transition: color var(--dur-micro); display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.nav__links a:hover { color: var(--color-accent-3); }
.nav__links a:focus-visible { outline: 2px solid var(--color-accent-3); outline-offset: 4px; }

.nav__cta {
  display: inline-flex; align-items: center; min-height: 40px;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-sm);
  padding: 0.45em 1em;
  border: 2px solid var(--color-ink);
  box-shadow: 3px 3px 0 var(--color-accent-2);
  transition: transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.nav__cta:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-accent-2); }

/* ─────────────────────────────────────────────────────────────────
   HERO — H1 Marquee pattern carries GDC hero
   ───────────────────────────────────────────────────────────────── */

.hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-md);
  position: relative;
  overflow: hidden;
}
.hero__eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-md);
  color: var(--color-accent-2);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--color-accent-2);
  max-width: 14rem;
}

/* Hero title — transplanted from garden-01 (editorial serif statement) */
.hero__title {
  font-family: "Young Serif", ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw + 0.5rem, 3.75rem);
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 17ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}

.hero__sub {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-ink);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  max-width: var(--measure);
  overflow-wrap: break-word;
  word-break: break-word;
}
.hero__lede {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--color-ink-2);
  max-width: 46ch;
  margin: 0 0 var(--space-md);
}
.hero__note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}
.hero__note-mark {
  width: 9px; height: 9px;
  flex: none;
  background: var(--color-accent-2);
  border-radius: 2px;
  transform: rotate(45deg);
}
.hero__sub .bold-note {
  font-weight: 700;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  color: var(--color-accent-2);
  display: block;
  margin-top: var(--space-sm);
}

/* — Side-flip seam (ritual → garimpo): vira o disco ---------------- */
.side-flip {
  display: flex; align-items: center; justify-content: center; gap: var(--space-md);
  padding-block: var(--space-md);
  background: var(--color-paper-2);
  border-bottom: 2px solid var(--color-ink);
}
.side-flip::before, .side-flip::after {
  content: ""; flex: 1; height: 0;
  border-top: 2px solid var(--color-ink);
}
.side-flip__label {
  font-family: var(--font-label); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
}
.side-flip__label .orn { color: var(--color-accent-2); }
.side-flip__disc { font-size: 0.55rem; color: var(--color-ink); }

/* — Marquee strip below hero (signature #7) ----------------------- */
.marquee {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-top: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  overflow: hidden;
  padding-block: 0.65em;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.marquee__track {
  display: inline-flex;
  gap: var(--space-lg);
  animation: scroll-left var(--dur-marquee) linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
}
.marquee__track .orn {
  color: var(--color-accent-2);
  font-size: 0.7em;
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────
   RITUAL CAROUSEL — Tracklist section pattern carries it
   (paper-2 bg, bordered, 2-col grid heading + content)
   ───────────────────────────────────────────────────────────────── */

.ritual {
  padding-block: var(--space-3xl);
  border-top: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  background: var(--color-paper-2);
  position: relative;
}
.ritual__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}
@media (min-width: 820px) {
  .ritual__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-3xl); }
}

.ritual__head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 130, "wght" 800;
  font-size: var(--text-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.86;
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
}
.ritual__head .orn { color: var(--color-accent-2); font-size: 0.7em; vertical-align: middle; }
.ritual__head p {
  margin: 0;
  max-width: 30ch;
  font-size: var(--text-md);
  line-height: var(--lh-normal);
}

/* — Carousel chrome restyled with carnival vocab — */
.carousel { position: relative; }
.carousel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.pill-btn {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.45em 1em;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
  box-shadow: 3px 3px 0 var(--color-ink);
}
.pill-btn[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: 3px 3px 0 var(--color-accent-2);
}
.pill-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-accent-2); }

.carousel-viewport {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  box-shadow: 6px 6px 0 var(--color-ink);
  transition: height 0.4s ease;
}
.carousel-track { display: flex; align-items: center; height: 100%; transition: transform 0.45s var(--ease-out); }
.slide { min-width: 100%; padding: var(--space-xl); }

.carousel-arrows {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-md));
  right: calc(-1 * var(--space-md));
  transform: translateY(-50%);
  pointer-events: none;
}
.arrow-btn {
  pointer-events: auto;
  width: 44px; height: 44px;
  background: var(--color-accent);
  border: 2px solid var(--color-ink);
  color: var(--color-accent-fg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 0 var(--color-ink);
  cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.arrow-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-accent-2); }
.arrow-btn:disabled { opacity: 0.3; pointer-events: none; }

.caption {
  text-align: center;
  margin-top: var(--space-md);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* === Slide 1: Crate === */
.crate { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 180px; padding-bottom: 12px; }
.spine {
  width: 12px; border-radius: 2px 2px 0 0; position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spine.green { background: var(--color-accent); width: 14px; }
.spine-pill {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border: 2px solid var(--color-ink);
  padding: 1px 6px;
  white-space: nowrap; opacity: 0; transition: opacity 0.4s 0.3s;
}
.slide-active .spine.green { transform: rotate(var(--tilt, 0deg)) translateY(-28px); }
.slide-active .spine-pill { opacity: 1; }

/* === Slide 2: Sleeve flip === */
.flip-wrapper { perspective: 800px; width: 280px; max-width: 100%; margin: 0 auto; container-type: inline-size; }
.flipper {
  position: relative; width: 100%; aspect-ratio: 1; transition: transform 0.7s ease;
  transform-style: preserve-3d;
}
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 2px solid var(--color-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-xl);
}
.flip-front { background: var(--color-accent-2); color: var(--color-paper); }
.flip-back {
  background: var(--color-accent-2); color: var(--color-paper);
  transform: rotateY(180deg);
  justify-content: flex-start; padding: var(--space-md); overflow: hidden;
  padding: clamp(0.5rem, 5cqi, 1rem);
}
.flipper.flipped { transform: rotateY(180deg); }
/* Front content */
.flip-front .logo-mark-lg { width: 72px; height: 72px; margin-bottom: var(--space-md); }
.flip-front .flip-wordmark {
  font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110;
  font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.02em;
}
.flip-front .flip-sub {
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: var(--text-xs);
}
.flip-front .flip-pill {
  font-family: var(--font-label); font-size: var(--text-xs);
  margin-top: var(--space-md); opacity: 0.8;
  letter-spacing: var(--tracking-label);
}
/* Back content */
.lado-title {
  font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110;
  font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase;
  font-size: clamp(0.6rem, 4.6cqi, 0.875rem);
  margin: var(--space-xs) 0 var(--space-3xs); text-align: left; width: 100%;
  color: var(--color-accent-3);
}
.lado-title:first-child { margin-top: 0; }
.track-row {
  display: flex; align-items: baseline; gap: 4px; width: 100%; min-width: 0;
  font-family: var(--font-label); font-size: var(--text-xs); line-height: 1.55;
  font-size: clamp(0.55rem, 4.1cqi, 0.75rem);
  letter-spacing: 0.02em;
}
.track-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; flex-shrink: 1; }
.track-dots { flex: 1; overflow: hidden; white-space: nowrap; color: rgba(243,237,224,0.3); }
.track-dur { white-space: nowrap; font-weight: 700; }
.track-dur.highlight { color: var(--color-accent-3); }
.verso-barcode { display: flex; gap: 2px; margin-top: auto; padding-top: clamp(0.4rem, 3cqi, 1rem); align-items: flex-end; }
.verso-barcode span { display: block; width: 2px; background: rgba(243,237,224,0.5); border-radius: 1px; }
.verso-eyebrow { font-family: var(--font-label); font-weight: 700; font-size: clamp(0.5rem, 3.4cqi, 0.62rem); letter-spacing: 0.18em; opacity: 0.65; margin: 0 0 clamp(0.3rem, 2.5cqi, 0.6rem); }
.verso-prose { font-size: clamp(0.62rem, 4.6cqi, 0.85rem); line-height: 1.45; margin: 0; }
.verso-wink { font-family: var(--font-mono); font-size: clamp(0.55rem, 3.8cqi, 0.7rem); opacity: 0.75; margin: clamp(0.35rem, 2.5cqi, 0.7rem) 0 0; }
.verso-pill { font-family: var(--font-label); font-size: var(--text-xs); font-size: clamp(0.55rem, 4.1cqi, 0.75rem); opacity: 0.7; margin-top: var(--space-xs); text-align: center; width: 100%; letter-spacing: var(--tracking-label); }
/* Virar toggle */
.virar-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 1em; margin: var(--space-md) auto 0;
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-ink); background: var(--color-paper);
  border: 2px solid var(--color-ink); padding: 0.4em 1em;
  box-shadow: 3px 3px 0 var(--color-ink);
  cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.virar-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-accent-2); }

/* === Slide 3: Turntable === */
.turntable { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.platter {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, #1a1a1a 0%, #222 45%, #1a1a1a 46%, #282828 100%);
  box-shadow: 0 4px 20px rgba(43,33,25,0.3);
  position: relative; overflow: hidden;
}
.disc {
  position: absolute; inset: 12px; border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 18%, #1a1a1a 19%, #111 40%, #1a1a1a 41%, #111 60%, #1a1a1a 61%, #111 80%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.slide-active .disc { opacity: 1; transform: translateY(0); }
.disc-spinner { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.slide-active .disc-spinner.spinning { animation: spin 3.5s linear infinite; }
.label-svg { width: 40%; height: 40%; }
/* Tonearm */
.tonearm {
  position: absolute; top: 10px; right: 20px; width: 8px; height: 110px;
  transform-origin: top center; transform: rotate(-18deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-active .tonearm.dropped { transform: rotate(0deg); }
.arm-pivot { width: 16px; height: 16px; border-radius: 50%; background: #555; position: absolute; top: -4px; left: -4px; }
.arm-rod { width: 3px; height: 82px; background: linear-gradient(#888, #666); margin: 8px auto 0; border-radius: 2px; }
.arm-headshell { width: 10px; height: 14px; background: #777; border-radius: 2px; margin: 0 auto; }
/* Closer content */
.closer {
  text-align: center; margin-top: var(--space-lg); opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
.slide-active .closer.visible { opacity: 1; }
.ritual__closer { margin-top: var(--space-lg); text-align: center; }
.ritual__closer .closer { opacity: 1 !important; }
.runout { border-top: 2px solid var(--color-ink); width: 60%; margin: 0 auto var(--space-xs); }
.runout-label {
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: var(--text-xs);
  color: var(--color-muted); margin-bottom: var(--space-xs);
}
.closer h2 {
  font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110;
  font-size: var(--text-2xl); text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 0.9; margin: 0 0 var(--space-xs);
}
.closer .closer-line { font-size: var(--text-base); color: var(--color-muted); margin-bottom: var(--space-md); }

/* === CTA Buttons (format__btn pattern) === */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-base);
  background: var(--color-ink); color: var(--color-paper);
  padding: 0.7em 1.2em; border: 2px solid var(--color-ink);
  box-shadow: 4px 4px 0 var(--color-accent-2);
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.btn-primary:hover {
  background: var(--color-accent); color: var(--color-accent-fg);
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-accent-2);
}
.btn-primary:focus-visible { outline: 3px solid var(--color-accent-2); outline-offset: 3px; }
.quiet-link { display: inline-flex; align-items: center; min-height: 44px;
  display: block; margin-top: var(--space-sm);
  font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-muted);
  transition: color var(--dur-micro);
}
.quiet-link:hover { color: var(--color-accent-2); }

/* ─────────────────────────────────────────────────────────────────
   LINER NOTES — Format card pattern (single card)
   ───────────────────────────────────────────────────────────────── */

.liner {
  padding-block: var(--space-3xl);
}
.liner-card {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  box-shadow: 6px 6px 0 var(--color-ink);
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--color-ink-2);
  max-width: 42rem;
  margin: 0 auto;
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.liner-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--color-accent-2); }
.liner-card a { color: var(--color-accent-2); font-weight: 700; }
.liner-card a:hover { color: var(--color-rule); }

/* ─────────────────────────────────────────────────────────────────
   CONVERSION — Manifesto pattern (loud block)
   ───────────────────────────────────────────────────────────────── */

.conversion {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-3xl);
  position: relative;
}
.conversion__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}
.conversion__tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 130;
  font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.86;
  margin: 0;
  text-wrap: balance;
  max-width: min(18ch, 100%);
  overflow-wrap: break-word;
  word-break: break-word;
}
.conversion__tagline .word--accent { color: var(--color-accent-3); }
.conversion__ornaments {
  color: var(--color-accent-3);
  font-size: 1.3rem;
  letter-spacing: 1em;
  margin-top: var(--space-sm);
  user-select: none;
}
.conversion .btn-primary {
  background: var(--color-accent); color: var(--color-accent-fg);
  box-shadow: 4px 4px 0 var(--color-accent-3);
}
.conversion .btn-primary:hover {
  background: var(--color-paper); color: var(--color-ink);
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-accent-2);
}
.conversion .quiet-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent-3); }

.conversion__liner {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--color-paper);
  max-width: 34rem;
  margin: 0;
  text-wrap: balance;
}
.carteirinha {
  width: min(340px, 88vw);
  background: var(--color-paper);
  color: var(--color-ink);
  border: 3px solid var(--color-ink);
  box-shadow: 7px 7px 0 var(--color-accent-2);
  transform: rotate(-1.2deg);
  text-align: left;
  margin-block: var(--space-sm);
}
.carteirinha__head {
  display: flex; justify-content: space-between; gap: var(--space-sm);
  font-family: var(--font-label); font-weight: 700; font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-accent-fg);
  padding: 6px 10px;
}
.carteirinha__head .orn, .carteirinha__foot .orn { font-style: normal; color: var(--color-accent-3); }
.carteirinha__body { padding: 14px 12px 10px; display: grid; gap: 12px; }
.carteirinha__field {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-ink-2);
}
.carteirinha__field i { flex: 1; border-bottom: 2px dotted var(--color-ink-2); min-height: 1em; }
.carteirinha__foot {
  font-family: var(--font-label); font-weight: 700; font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  border-top: 2px solid var(--color-ink); padding: 5px 10px;
  color: var(--color-ink-2);
}
.conversion .quiet-link:hover { color: var(--color-paper); }

/* ─────────────────────────────────────────────────────────────────
   FOOTER — Ft8 marquee scroll + info
   ───────────────────────────────────────────────────────────────── */

.foot {
  background: var(--color-paper);
  border-top: 2px solid var(--color-ink);
}
.foot__marquee {
  background: var(--color-accent-2);
  color: var(--color-paper);
  border-bottom: 2px solid var(--color-ink);
  overflow: hidden;
  padding-block: 0.55em;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.foot__marquee .marquee__track .orn { color: var(--color-accent-3); }

.foot__body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.foot__body a { color: var(--color-ink); font-weight: 700; transition: color var(--dur-micro); }
.foot__body a:hover { color: var(--color-accent-2); }

/* === Spin keyframe === */
@keyframes spin { to { transform: rotate(360deg); } }

/* === Transition flourish 1→2 === */
.spine.green.picked {
  transform: rotate(var(--tilt, 0deg)) translateY(-80px) scale(1.6) !important;
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.35s ease 0.1s;
}

/* ─────────────────────────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .foot__marquee .marquee__track {
    animation: none;
    transform: translateX(0);
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .slide-active .spine.green { transform: rotate(var(--tilt, 0deg)) translateY(-28px); }
  .slide-active .disc { opacity: 1; transform: translateY(0); }
  .slide-active .tonearm.dropped { transform: rotate(0deg); }
  .slide-active .closer.visible { opacity: 1; }
.ritual__closer { margin-top: var(--space-lg); text-align: center; }
.ritual__closer .closer { opacity: 1 !important; }
  .flipper.flipped { transform: rotateY(180deg); }
  .disc-spinner.spinning { animation: none !important; }
}

/* === No-JS fallback === */
.no-js .carousel-pills, .no-js .carousel-arrows { display: none; }
.no-js .carousel-track { flex-direction: column; }
.no-js .slide { min-width: auto; }
.no-js .carousel-viewport { overflow: visible; height: auto !important; box-shadow: none; border: none; }
.no-js .spine.green { transform: rotate(var(--tilt, 0deg)) translateY(-28px); }
.no-js .spine-pill { opacity: 1; }
.no-js .flipper { transform: rotateY(180deg); }
.no-js .disc { opacity: 1; transform: translateY(0); }
.no-js .tonearm { transform: rotate(0deg); }
.no-js .closer { opacity: 1; }
.cta-note {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-paper); opacity: 0.55; margin: var(--space-xs) 0 var(--space-sm);
}
/* === O Scanner — merged into hero as its figure === */
.hero > .shell { display: flex; flex-direction: column; gap: var(--space-xl); }
@media (min-width: 820px) {
  .hero > .shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "copy figure" "sub figure";
    column-gap: var(--space-2xl); row-gap: var(--space-lg);
    align-items: center;
  }
  .hero__copy { grid-area: copy; align-self: end; }
  .hero__sub { grid-area: sub; align-self: start; }
  .hero__figure { grid-area: figure; }
}
.hero__figure { display: flex; flex-direction: column; gap: var(--space-xs); }
.reward-deck { position: relative; display: grid; place-items: center; }
.reward-deck .reward-cover { grid-area: 1 / 1; }
.deck-1 { transform: rotate(-4deg) translate(-10px, -6px); z-index: -1; opacity: 0.9; }
.deck-2 { transform: rotate(3deg) translate(12px, -10px); z-index: -2; opacity: 0.75; }
.deck-0 { position: relative; z-index: 1; transition: transform 0.5s var(--ease-out), opacity 0.5s ease; }
.reward.exiting .deck-0 { transform: translateX(56%) rotate(9deg); opacity: 0; }
.ph { position: absolute; inset: 0; display: block; }
.ph-a { background: linear-gradient(160deg, var(--color-accent-2) 0 45%, var(--color-ink) 45%); }
.ph-b { background: linear-gradient(15deg, var(--color-accent-3) 0 60%, var(--color-ink-2) 60%); }
.reward .scn-corners b { transition: transform 0.45s var(--ease-out), opacity 0.3s ease; opacity: 0.45; }
.reward .scn-corners b:nth-child(1) { transform: translate(-7px, -7px); }
.reward .scn-corners b:nth-child(2) { transform: translate(7px, -7px); }
.reward .scn-corners b:nth-child(3) { transform: translate(-7px, 7px); }
.reward .scn-corners b:nth-child(4) { transform: translate(7px, 7px); }
.reward.acquired .scn-corners b { transform: translate(0, 0); opacity: 1; }
.reward .reward-stamp { opacity: 0; transform: rotate(-8deg) scale(1.5); }
.reward.stamped .reward-stamp { opacity: 1; transform: rotate(-8deg) scale(1); transition: transform 0.28s cubic-bezier(0.2, 2.2, 0.4, 1), opacity 0.15s ease; }
.reward.no-anim .rm-title, .reward.no-anim .rm-credit, .reward.no-anim .rm-badge,
.reward.no-anim .reward-stamp, .reward.no-anim .scn-corners b { transition: none !important; }
.reward .reward-meta .rm-title, .reward .reward-meta .rm-credit, .reward .reward-meta .rm-badge { transition: opacity 0.35s ease 0.45s; opacity: 0; }
.reward.acquired .reward-meta .rm-title, .reward.acquired .reward-meta .rm-credit, .reward.acquired .reward-meta .rm-badge { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reward .scn-corners b { transform: none !important; opacity: 1 !important; }
  .reward .reward-stamp { opacity: 1 !important; transform: rotate(-8deg) scale(1) !important; }
  .reward-meta .rm-title, .reward-meta .rm-credit, .reward-meta .rm-badge { opacity: 1 !important; }
}
.no-js .reward .scn-corners b { transform: none; opacity: 1; }
.no-js .reward .reward-stamp { opacity: 1; transform: rotate(-8deg) scale(1); }
.no-js .reward-meta .rm-title, .no-js .reward-meta .rm-credit, .no-js .reward-meta .rm-badge { opacity: 1; }
.reward { position: relative; width: fit-content; margin-inline: auto; margin-block: var(--space-2xs); display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); }
.reward-cover { position: relative; width: clamp(190px, 60vw, 260px); aspect-ratio: 1; background: linear-gradient(135deg, var(--color-accent) 0 55%, var(--color-ink) 55%); border: 2.5px solid var(--color-ink); display: block; box-shadow: 5px 5px 0 rgba(43,33,25,0.14); }
.reward-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reward-cover .scn-corners { position: absolute; inset: 0; z-index: 2; }
.reward-cover .scn-corners b { position: absolute; width: 15px; height: 15px; border: 3px solid var(--color-accent-2); filter: drop-shadow(0 0 2px rgba(251,247,238,0.95)); }
.reward-cover .scn-corners b:nth-child(1) { left: 5px; top: 5px; border-right: 0; border-bottom: 0; }
.reward-cover .scn-corners b:nth-child(2) { right: 5px; top: 5px; border-left: 0; border-bottom: 0; }
.reward-cover .scn-corners b:nth-child(3) { left: 5px; bottom: 5px; border-right: 0; border-top: 0; }
.reward-cover .scn-corners b:nth-child(4) { right: 5px; bottom: 5px; border-left: 0; border-top: 0; }
.reward-stamp { position: absolute; z-index: 3; top: 4px; right: -6px; font-family: var(--font-display); font-weight: 800; font-style: normal; font-size: var(--text-md); color: var(--color-accent); border: 3px solid var(--color-accent); border-radius: 4px; padding: 0.12em 0.4em; transform: rotate(-8deg); background: var(--color-paper); box-shadow: 2px 2px 0 rgba(43,33,25,0.15); }
.reward-meta { display: grid; gap: 1px; justify-items: center; text-align: center; margin-top: var(--space-2xs); }
.rm-title { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110; font-size: var(--text-md); letter-spacing: 0.01em; color: var(--color-ink); line-height: 1.15; }
.rm-credit { font-family: var(--font-label); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.03em; }
.rm-badge { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-2); margin-top: 3px; }
.reward-meta b { font-weight: 700; color: var(--color-accent-2); }
.reward-cad { color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6rem; }
@media (min-width: 820px) {
  .reward { transform: rotate(1.2deg); }
  .reward-cover { width: clamp(180px, 24vw, 240px); border-width: 3px; }
  .reward-stamp { font-size: var(--text-xl); top: 10px; right: -14px; }
  .reward-meta { font-size: var(--text-sm); }
}

/* === Ritual v2: marquee promotion, liturgy === */
.marquee--big { border-block: 3px solid var(--color-ink); }
.marquee--big .marquee__track { font-size: var(--text-2xl); padding-block: 0.5em; letter-spacing: 0.01em; }
.mq-verb { font-weight: inherit; cursor: pointer; text-decoration: underline 2px rgba(251,247,238,0.35); text-underline-offset: 4px; }
.mq-verb:hover { text-decoration-color: var(--color-accent-3); }

.liturgia { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: 2px; }
.lit-row {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-sm); text-align: left;
  background: none; border: 0; border-left: 3px solid var(--color-paper-3);
  padding: 0.35em var(--space-sm); cursor: pointer; color: var(--color-ink);
}
.lit-row { padding-block: 0.55em; }
.lit-row:hover, .lit-row:focus-visible { border-left-color: var(--color-accent-2); background: rgba(43,33,25,0.03); }
.lit-row b { font-family: var(--font-display); font-variation-settings: "wdth" 110; font-size: var(--text-sm); letter-spacing: 0.05em; min-width: 6.2em; }
.lit-row span { font-size: var(--text-sm); color: var(--color-ink-2); }

.autoplaying .pill-btn[aria-pressed="true"] { position: relative; overflow: hidden; }
.autoplaying .pill-btn[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--color-accent-2); transform-origin: left;
  animation: pillprog 8s linear forwards;
}
@keyframes pillprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.no-js .liturgia .lit-row { pointer-events: none; }

/* === O Garimpo — interactive: you dig, the hero only performs === */
.garimpo { padding: var(--space-2xl) 0; background: var(--color-paper-2); }
.garimpo__inner { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; text-align: center; }
.garimpo h2 { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110; font-size: var(--text-2xl); text-transform: uppercase; margin: 0; letter-spacing: 0.02em; }
.garimpo h2 span { color: var(--color-accent); }
.garimpo__lede { margin: 0; font-size: var(--text-md); line-height: var(--lh-normal); color: var(--color-ink-2); max-width: 34ch; }
.garimpo__note { margin: 0; font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-muted); text-transform: uppercase; }
.garimpo__toy { display: grid; gap: var(--space-sm); justify-items: center; }
.gdeck { position: relative; width: min(200px, 56vw); aspect-ratio: 1; touch-action: pan-y; }
.gcard { position: absolute; inset: 0; border: 3px solid var(--color-ink); box-shadow: 5px 5px 0 rgba(43,33,25,0.14); cursor: grab; }
.gcard.is-gone { transition: transform 0.4s var(--ease-out), opacity 0.4s ease; opacity: 0; }
.gcard[data-i="1"] { transform: rotate(-3deg) translate(-7px, -4px); }
.gcard[data-i="2"] { transform: rotate(4deg) translate(8px, -7px); }
.gart { position: absolute; inset: 0; }
.ga0 { background: linear-gradient(150deg, var(--color-accent) 0 48%, var(--color-ink) 48%); }
.ga1 { background: radial-gradient(circle at 62% 38%, var(--color-accent-3) 0 26%, var(--color-ink-2) 27%); }
.ga2 { background: repeating-linear-gradient(38deg, var(--color-accent-2) 0 14px, var(--color-paper-2) 14px 26px); }
.ga3 { background: linear-gradient(0deg, var(--color-ink) 0 42%, var(--color-accent-3) 42%); }
.ga4 { background: repeating-radial-gradient(circle at 50% 50%, var(--color-ink-2) 0 5px, var(--color-neutral) 5px 11px); }
.ga5 { background: linear-gradient(115deg, var(--color-neutral) 0 55%, var(--color-accent) 55%); }
.gcaixa { margin: 0; font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); }
.gcaixa { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-sm); }
.gcaixa label { color: var(--color-muted); }
.gcaixa-sel {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink);
  background: var(--color-paper); border: 2px solid var(--color-ink); border-radius: 0;
  padding: 6px 26px 6px 8px; min-height: 36px; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-accent-2) 50%), linear-gradient(135deg, var(--color-accent-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  box-shadow: 3px 3px 0 rgba(43,33,25,0.16);
}
.gcaixa-sel:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.gsleeve-txt { position: absolute; inset: auto 0 0 0; display: grid; gap: 1px; padding: var(--space-xs) var(--space-sm) var(--space-sm); background: linear-gradient(transparent, rgba(43,33,25,0.82) 42%); color: var(--color-paper); text-align: left; }
.gsleeve-txt b { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110; font-size: var(--text-sm); line-height: 1.1; }
.gsleeve-txt em { font-style: normal; font-family: var(--font-label); font-size: 0.62rem; opacity: 0.92; }
.gsleeve-txt s { text-decoration: none; font-family: var(--font-label); font-size: 0.58rem; opacity: 0.7; }
.glist { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; min-height: 26px; max-width: 300px; }
.gchip { font-style: normal; font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-paper); background: var(--color-accent-2); border: 2px solid var(--color-ink); padding: 2px 6px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gchip--more { background: var(--color-ink); }
.gchip--empty { background: none; color: var(--color-muted); border-color: var(--color-paper-3); font-weight: 400; }
.gcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.gmark { position: absolute; top: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; font-style: normal; border: 3px solid; border-radius: 4px; padding: 0 0.3em; opacity: 0; transition: opacity 0.15s ease; }
.gmark--no { left: 9px; color: var(--color-paper); border-color: var(--color-paper); transform: rotate(-12deg); }
.gmark--yes { right: 9px; color: var(--color-paper); border-color: var(--color-paper); transform: rotate(12deg); }
.gcard.lean-no .gmark--no, .gcard.lean-yes .gmark--yes { opacity: 1; }
.gcard.is-demo { transition: transform 0.55s var(--ease-out); }
.gactions { display: flex; gap: var(--space-sm); }
.gbtn { min-height: 44px; padding: 0 1em; font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--color-ink); background: var(--color-paper); cursor: pointer; box-shadow: 3px 3px 0 rgba(43,33,25,0.18); }
.gbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(43,33,25,0.18); }
.gbtn--yes { background: var(--color-accent-2); color: var(--color-paper); }
.gbtn--cta { background: var(--color-accent-2); color: var(--color-paper); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.glist { margin: 0; font-family: var(--font-label); font-size: var(--text-xs); color: var(--color-ink-2); letter-spacing: 0.03em; min-height: 1.4em; }
.glist__label { color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; width: 100%; }
.glist__items b { font-weight: 700; color: var(--color-accent-2); }
.gdone { font-family: var(--font-label); font-size: var(--text-xs); text-align: center; display: grid; gap: var(--space-xs); place-items: center; padding: var(--space-sm); }
.gdone b { font-family: var(--font-display); font-size: var(--text-md); }
@media (min-width: 820px) {
  .garimpo__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; gap: var(--space-2xl); }
  .garimpo__copy { display: grid; gap: var(--space-md); }
  .garimpo h2 { font-size: var(--text-3xl); }
  .gdeck { width: 240px; }
}

/* === Mobile proportions pass (≤480px) === */
@media (max-width: 480px) {
  .nav__inner { gap: var(--space-sm); flex-wrap: wrap; }
  .nav__wordmark { font-size: var(--text-sm); }
  .nav__links { gap: var(--space-sm); }
  .nav__cta { white-space: nowrap; font-size: var(--text-xs); padding: 0.45em 0.7em; }
  .slide { padding: var(--space-md) var(--space-sm) var(--space-lg); }
  /* liturgy IS the navigation on mobile — pills were a third redundant nav */
  .carousel-pills { display: none; }
  /* level the slides: the OUVIR flip card was 2.4x the crate slide, so
     auto-advance resized the whole page between beats */
  .carousel-viewport { min-height: 340px; }
  .slide { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; }
  .flip-wrapper { width: min(210px, 58vw); }
  .track-row { line-height: 1.4; }
  .closer h2 { font-size: var(--text-md); }
  .closer .closer-line { font-size: var(--text-xs); }
  .marquee--big .marquee__track { font-size: var(--text-xl); }
  .lit-row b { min-width: 5.2em; font-size: var(--text-xs); }
  .lit-row span { font-size: var(--text-xs); }

  .flip-wrapper { max-width: min(280px, 78vw); }
  .conversion__tagline { font-size: clamp(1.75rem, 8.5vw, 2.5rem); }
  .conversion { padding-block: var(--space-2xl); }
  .ritual__head h2 { font-size: clamp(1.35rem, 6.5vw, 1.9rem); }
  .ritual__head p { font-size: var(--text-sm); }
  .ritual__inner { gap: var(--space-lg); }
  .hero { padding-top: var(--space-lg); padding-bottom: var(--space-md); }
  .hero > .shell { gap: var(--space-md); }
  .hero__title { margin-bottom: 0; }
  .hero__sub { margin-top: var(--space-sm); padding-top: var(--space-sm); }
  .hero__lede { margin-bottom: var(--space-xs); }
  .reward { margin-block: 0; padding-block: var(--space-2xs); }
  .liner-card { box-shadow: 5px 5px 0 var(--color-accent-2); }
}