/* =========================================================================
   Anima Visual · Hand-drawn Immersive (v3)
   Ink displacement filters · aged paper · typewriter labels · bird in a cage
   Forced horizontal scroll on film · glowing runes · smoky drift
   ========================================================================= */

:root {
  --void:       #0A0D0A;
  --forest:     #1B2519;
  --moss:       #2E3A29;
  --moss-warm:  #3D4C34;
  --sage:       #6B7355;
  --sage-warm:  #A9AF8C;
  --paper:      #EFE3C4;
  --paper-warm: #E6D5A6;
  --paper-deep: #C8B689;
  --sepia:      #6B4F2A;
  --cream:      #F0E7CE;
  --blush:      #E8CDB8;
  --rose:       #8B3A3A;
  --rose-deep:  #5C1A1A;
  --terracotta: #9C5F4A;
  --clay:       #7B4838;
  --gold:       #B89660;
  --gold-hot:   #D9B679;
  --wine:       #5B1414;
  --ink:        #141812;

  --serif:  "Fraunces", Georgia, serif;
  --book:   "IM Fell English", Georgia, serif;
  --caps:   "Cormorant Garamond", serif;
  --type:   "Special Elite", "Courier New", monospace;
  --hand:   "Homemade Apple", cursive;
  --sans:   "Inter", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
*::selection { background: var(--sage); color: var(--cream); }
/* overflow-x: clip (NOT hidden) — hidden turns body into a scroll container and breaks position: sticky */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; background: #0A0D0A; }
body {
  font-family: var(--book);
  color: var(--cream);
  /* ONE subtle body gradient — no bands, just breathing gently darker at the very top and very bottom */
  background:
    linear-gradient(180deg,
      #0A0D0A  0%,
      #12181f  30%,
      #1a1a1c  55%,
      #14121a  80%,
      #0A0605  100%
    );
  background-attachment: fixed;
  font-size: 18px;
  line-height: 1.6;
  cursor: none;
}
/* All sections go transparent so the body gradient carries through */
.stats, .rite-web, .rite-photo, .hscroll, .rite-weddings, .rite-design,
.grimoire, .whispers, .keeper, .care, .gram, .territories, .invocation,
.chapter, .cover {
  background: transparent !important;
}
/* Weddings section keeps its aged-parchment surface for the album to feel warm — but no hard color break */
.rite-weddings.aged-paper {
  background:
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(239, 227, 196, .08), transparent 70%) !important;
  color: var(--paper) !important;
}
.rite-weddings.aged-paper .chapter__title,
.rite-weddings.aged-paper .chapter__lede,
.rite-weddings.aged-paper .chapter__prose p { color: var(--paper) !important; }
@media (hover: none), (pointer: coarse) { body { cursor: auto; } .cursor { display: none !important; } }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: none; }

/* ===================== CURSOR ===================== */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream);
  mix-blend-mode: difference;
  pointer-events: none; z-index: 9999;
  transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1);
  transform: translate(-50%, -50%);
}
.cursor.is-hover { width: 44px; height: 44px; }
.cursor.is-open { width: 90px; height: 90px; background: transparent; border: 1px solid var(--cream); mix-blend-mode: normal; opacity: .55; }
.cursor.is-eye  { width: 66px; height: 66px; background: radial-gradient(circle, var(--sage-warm) 0 5px, transparent 5px, transparent 22px, var(--cream) 22px, var(--cream) 23px, transparent 23px); mix-blend-mode: normal; opacity: .8; }

/* ===================== AMBIENT: grain, smoke, dust ===================== */
.grain {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none; opacity: .15; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
  animation: grain 8s steps(8) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-5%,-4%); } 20% { transform: translate(-8%,3%); }
  30% { transform: translate(4%,-6%); }  40% { transform: translate(-3%,7%); }
  50% { transform: translate(-8%,3%); }  60% { transform: translate(6%,0%); }
  70% { transform: translate(0%,4%); }   80% { transform: translate(-6%,-6%); }
  90% { transform: translate(4%,3%); }
}

/* smoky drifting background layer (subtle) */
.smoke {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(ellipse 40% 30% at 20% 30%, rgba(107, 115, 85, 0.25), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(46, 58, 41, 0.35), transparent 60%),
    radial-gradient(ellipse 40% 30% at 60% 20%, rgba(139, 58, 58, 0.14), transparent 55%);
  animation: smokeDrift 30s ease-in-out infinite alternate;
}
@keyframes smokeDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-6%, 4%) scale(1.08); }
  100% { transform: translate(4%, -3%) scale(1.04); }
}

#particles { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

/* Butterfly */
.butterfly {
  position: fixed; top: 40vh; left: -80px;
  width: 60px; height: 60px; z-index: 8;
  pointer-events: none; opacity: 0;
  color: var(--terracotta);
  will-change: transform, opacity;
}
.butterfly svg .wing { transform-origin: center; animation: flap .18s ease-in-out infinite alternate; }
.butterfly svg .wing.r { animation-delay: -.09s; }
@keyframes flap { from { transform: scaleX(1) rotate(0); } to { transform: scaleX(.55) rotate(-6deg); } }
.butterfly.is-flying { animation: flyAcross 12s linear forwards; }
@keyframes flyAcross {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-6deg); }
  8%   { opacity: 1; }
  25%  { transform: translate(28vw, -8vh) rotate(4deg); }
  50%  { transform: translate(56vw, 6vh) rotate(-3deg); }
  75%  { transform: translate(80vw, -4vh) rotate(5deg); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translate(110vw, 8vh) rotate(-2deg); }
}

/* ===================== THRESHOLD ===================== */
.threshold {
  position: fixed; inset: 0; background: var(--void); z-index: 500;
  display: grid; place-items: center;
  transition: opacity 1.2s, transform 1.4s cubic-bezier(.2,.9,.2,1);
}
.threshold.is-gone { opacity: 0; transform: scale(1.06); pointer-events: none; }
.threshold__circle {
  position: absolute; left: 50%; top: 50%;
  width: min(92vh, 92vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0;
  animation: fadeInCircle 2.4s .2s ease forwards;
}
.threshold__circle img { display: block; width: 100%; height: 100%; animation: ncSpin 120s linear infinite; will-change: transform; }
@keyframes fadeInCircle { to { opacity: .16; } }
/* soft dark pool behind the title so it reads over the circle */
.threshold__inner { position: relative; z-index: 1; }
.threshold__inner::before {
  content: ""; position: absolute; inset: -30% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,13,10,.85) 30%, rgba(10,13,10,0) 70%);
}
@media (prefers-reduced-motion: reduce) { .threshold__circle img { animation: none; } }
.threshold__inner { text-align: center; padding: 2rem; }
.threshold__sigil { width: 200px; height: 200px; margin: 0 auto 2rem; color: var(--sage-warm); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe {
  0%,100% { transform: scale(1); opacity: .85; filter: drop-shadow(0 0 12px rgba(169,175,140,.35)); }
  50%     { transform: scale(1.05); opacity: 1;  filter: drop-shadow(0 0 32px rgba(217,182,121,.55)); }
}
.threshold__title { font-family: var(--serif); font-style: italic; font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1; line-height: 1; opacity: 0; animation: fadeIn 2s .4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.threshold__whisper { margin-top: 1.5rem; font-family: var(--hand); font-size: 1.1rem; color: var(--sage-warm); opacity: 0; animation: fadeIn 1.6s 1.4s forwards; }
.threshold__cta {
  margin-top: 3rem; padding: .9rem 1.8rem;
  border: 1px solid var(--sage-warm); color: var(--sage-warm);
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  border-radius: 999px;
  opacity: 0; animation: fadeIn 1.6s 2.4s forwards;
  transition: background .4s, color .4s, letter-spacing .4s;
}
.threshold__cta:hover { background: var(--sage-warm); color: var(--void); letter-spacing: .04em; }

/* ===================== FIXED CHROME ===================== */
.chrome-logo {
  position: fixed; top: .8rem; left: 1rem; z-index: 100;
  display: inline-flex; align-items: center; gap: .6rem;
  transition: filter .4s;
  width: 88px; height: 88px;
}
.chrome-logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .6s;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(0,0,0,.35));
}
.chrome-logo .logo-dark { opacity: 0; filter: drop-shadow(0 2px 6px rgba(255,255,255,.45)) drop-shadow(0 0 12px rgba(255,255,255,.25)); }
.chrome-logo.is-on-light .logo-light { opacity: 0; }
.chrome-logo.is-on-light .logo-dark  { opacity: 1; }
.chrome-logo:hover { filter: brightness(1.1); }
@media (max-width: 700px) { .chrome-logo { width: 68px; height: 68px; } }
.burger {
  position: fixed; top: 1.4rem; right: 1.6rem; z-index: 130;
  width: 72px; height: 72px; display: grid; place-items: center;
  background: transparent; border: none;
  transition: transform .4s;
  color: var(--gold-hot);
  filter: drop-shadow(0 0 12px rgba(217, 182, 121, 0.65));
  animation: burgerBreath 3s ease-in-out infinite;
}
@keyframes burgerBreath {
  0%,100% { filter: drop-shadow(0 0 10px rgba(217, 182, 121, 0.5)); }
  50%     { filter: drop-shadow(0 0 24px rgba(217, 182, 121, 0.95)) drop-shadow(0 0 40px rgba(217, 182, 121, 0.4)); }
}
.burger:hover { transform: rotate(-8deg) scale(1.15); animation-play-state: paused; filter: drop-shadow(0 0 32px rgba(217, 182, 121, 1)); }
.burger svg { width: 100%; height: 100%; overflow: visible; }
.burger svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; transition: transform .4s, opacity .3s; transform-origin: center; }
/* open state: the three lines fade out, a hand-drawn ring + X (like a target) inks itself in */
.burger svg .xmark path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s cubic-bezier(.6,0,.3,1); }
.burger svg .xmark .xm-ring { stroke-width: 2.4; }
.burger.is-open svg .l1, .burger.is-open svg .l2, .burger.is-open svg .l3 { opacity: 0; transform: scaleX(.2); }
.burger.is-open svg .xmark path { stroke-dashoffset: 0; }
.burger.is-open svg .xmark .xm-a { transition-delay: .25s; }
.burger.is-open svg .xmark .xm-b { transition-delay: .4s; }
.nav-overlay__close { display: none !important; }

.enquire-fab {
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 120;
  padding: 1.05rem 1.6rem;
  background: var(--terracotta); color: var(--cream);
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  border-radius: 999px;
  box-shadow: 0 8px 32px -6px rgba(156,95,74,.55);
  transition: transform .35s, background .35s, letter-spacing .3s;
  display: inline-flex; align-items: center; gap: .55rem;
}
.enquire-fab::before { content: "◈"; color: var(--gold-hot); }
.enquire-fab:hover { transform: translateY(-3px); background: var(--clay); letter-spacing: .03em; }
@media (max-width: 600px) { .enquire-fab { bottom: 1rem; right: 1rem; padding: .8rem 1.2rem; font-size: .9rem; } }

/* ===================== NAV OVERLAY ===================== */
.nav-overlay {
  position: fixed; inset: 0; z-index: 125;
  background: linear-gradient(160deg, var(--forest) 0%, var(--void) 100%);
  color: var(--cream);
  opacity: 0; visibility: hidden; transform: scale(1.02);
  transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.2,1), visibility 0s .5s;
  overflow-y: auto;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }
.nav-overlay__inner { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 2rem clamp(1.5rem, 6vw, 5rem); position: relative; }
.nav-overlay__head { display: flex; justify-content: space-between; align-items: baseline; }
.nav-overlay__head .lbl { font-family: var(--caps); font-variant: small-caps; letter-spacing: .3em; font-size: .78rem; color: var(--sage-warm); }
.nav-overlay ul { list-style: none; display: flex; flex-direction: column; gap: clamp(.6rem, 1.6vw, 1.2rem); align-self: center; margin: 3rem 0; }
.nav-overlay li {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 1; color: var(--cream);
  transition: color .3s, transform .5s cubic-bezier(.2,.9,.2,1), opacity .5s;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  opacity: 0; transform: translateX(-30px);
}
.nav-overlay.is-open li { opacity: 1; transform: none; }
.nav-overlay.is-open li:nth-child(1) { transition-delay: .12s; }
.nav-overlay.is-open li:nth-child(2) { transition-delay: .18s; }
.nav-overlay.is-open li:nth-child(3) { transition-delay: .24s; }
.nav-overlay.is-open li:nth-child(4) { transition-delay: .30s; }
.nav-overlay.is-open li:nth-child(5) { transition-delay: .36s; }
.nav-overlay.is-open li:nth-child(6) { transition-delay: .42s; }
.nav-overlay.is-open li:nth-child(7) { transition-delay: .48s; }
.nav-overlay.is-open li:nth-child(8) { transition-delay: .54s; }
.nav-overlay li a { display: inline-flex; align-items: baseline; gap: 1.2rem; padding: .25rem 0; }
.nav-overlay li a::before { content: attr(data-num); font-family: var(--caps); font-variant: small-caps; font-size: .3em; letter-spacing: .3em; color: var(--sage-warm); transform: translateY(-.6em); }
.nav-overlay li a:hover { color: var(--gold-hot); }
.nav-overlay__foot { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid rgba(240,231,206,.14); font-family: var(--book); font-size: .92rem; color: rgba(240,231,206,.7); }
.gold-stars { color: var(--gold-hot); letter-spacing: .12em; margin-right: .35rem; text-shadow: 0 0 10px rgba(217,182,121,.55); filter: url(#ink-rough); display: inline-block; }
.nav-overlay__foot em { color: var(--sage-warm); font-family: var(--serif); font-style: italic; }
.nav-overlay__close { position: absolute; top: 1.4rem; right: 1.6rem; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--sage-warm); color: var(--cream); display: grid; place-items: center; }
.nav-overlay__close::before { content: "×"; font-family: var(--serif); font-size: 2rem; line-height: 1; margin-top: -4px; }

/* ===================== MENU — tarot reading ===================== */
.nav-overlay { background: radial-gradient(ellipse at 70% 40%, rgba(91,20,20,.22), transparent 60%), linear-gradient(160deg, #141812 0%, #0A0D0A 100%); }
.nav-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.nav-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nav-deco .nd {
  position: absolute; border-radius: 3px;
  filter: sepia(.4) contrast(1.05) brightness(.7);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.9);
  -webkit-mask-image: radial-gradient(ellipse 96% 96% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 96% 96% at 50% 50%, #000 62%, transparent 100%);
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: driftSlow 18s ease-in-out infinite alternate;
}
.nav-overlay.is-open .nav-deco .nd { opacity: .45; }
.nav-deco .nd-1 { top: 4%;  left: 42%; width: 220px; --r: -6deg; transition-delay: .2s; }
.nav-deco .nd-2 { bottom: 8%; left: 26%; width: 300px; --r: 4deg; transition-delay: .35s; }
.nav-deco .nd-3 { top: 30%; left: -2%; width: 200px; --r: 8deg; transition-delay: .5s; }
.nav-deco .nd-4 { bottom: 4%; right: 2%; width: 200px; --r: -9deg; transition-delay: .65s; }
.nav-deco .nd-5 { top: 3%;  right: 3%; width: 280px; --r: 5deg; transition-delay: .8s; }
.nav-deco .nd-6 { top: 55%; left: 48%; width: 190px; --r: -4deg; transition-delay: .95s; }
.nav-deco__runes { position: absolute; left: 0; right: 0; top: 5.5rem; display: flex; justify-content: space-between; padding: 0 5vw; }
.nav-deco__runes svg { width: 18px; height: 28px; color: var(--sage-warm); opacity: .22; animation: runeGlowSubtle 22s ease-in-out infinite; }
.nav-deco__runes svg:nth-child(2n) { animation-delay: -6s; } .nav-deco__runes svg:nth-child(3n) { animation-delay: -12s; } .nav-deco__runes svg:nth-child(5n) { animation-delay: -17s; }
.nav-deco__grass { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; color: var(--moss); opacity: .8; }
.nav-deco__grass svg { width: 100%; height: 100%; }
.nav-deco__grass .blade { animation: bladeSway 4s ease-in-out infinite alternate; }
.nav-overlay__inner { z-index: 2; }
.nav-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; align-self: center; }
.nav-body .nav-list { margin: 2rem 0; }
.nav-overlay li a { transition: color .3s, transform .4s; }
.nav-overlay li a:hover, .nav-overlay li a:focus-visible { color: var(--gold-hot); transform: translateX(10px); }
.nav-overlay li { text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.nav-reading { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.nav-reading__spread { position: relative; width: 240px; height: 400px; }
.nav-reading__spread img {
  position: absolute; left: 0; top: 0; width: 240px; border-radius: 8px;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(217,182,121,.3);
  transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .5s, filter .5s;
  filter: sepia(.2) contrast(1.05);
  transform: translateY(40px) rotate(0) scale(.9); opacity: 0;
}
.nav-overlay.is-open .nr-b1 { opacity: .75; transform: translateX(-110px) rotate(-16deg); transition-delay: .25s; filter: sepia(.4) brightness(.6); }
.nav-overlay.is-open .nr-b2 { opacity: .75; transform: translateX(110px) rotate(16deg); transition-delay: .4s; filter: sepia(.4) brightness(.6); }
.nav-overlay.is-open .nr-card { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); transition-delay: .55s; z-index: 2; }
.nr-card.is-flipping { transform: rotateY(90deg) scale(.95) !important; transition-duration: .22s !important; transition-delay: 0s !important; }
.nav-reading__cap { text-align: center; }
/* summoning circle — huge, mostly off-screen top-left, faint gold, slowly turning */
.nav-circle {
  position: absolute; z-index: 1; pointer-events: none;
  width: min(135vh, 115vw); aspect-ratio: 1;
  left: calc(min(135vh, 115vw) * -0.42); top: calc(min(135vh, 115vw) * -0.4);
  color: var(--gold-hot); opacity: 0;
  transition: opacity 1.6s ease .3s;
}
.nav-overlay.is-open .nav-circle { opacity: .09; }
.nav-circle img { display: block; width: 100%; height: 100%; animation: ncSpin 200s linear infinite; will-change: transform; }
@keyframes ncSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nav-circle img { animation: none; } }
@media (max-width: 900px) { .nav-overlay.is-open .nav-circle { opacity: .06; } }

/* ===== MENU v2 — fits one screen, left shade for legibility, Latin sub-names ===== */
.nav-overlay { overflow: hidden; }
.nav-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,8,6,.94) 0%, rgba(6,8,6,.82) 28%, rgba(6,8,6,.45) 48%, rgba(6,8,6,0) 66%);
}
.nav-overlay__inner { height: 100vh; height: 100dvh; min-height: 0; padding: clamp(1rem, 3vh, 2rem) clamp(1.5rem, 6vw, 5rem); }
.nav-body { min-height: 0; }
.nav-body .nav-list, .nav-overlay ul { margin: 0; gap: clamp(.35rem, 1.6vh, 1rem); }
.nav-overlay li { font-size: clamp(1.6rem, min(5.2vh, 6vw), 3.6rem); }
.nav-overlay li a { display: grid; grid-template-columns: 2.6em auto; column-gap: .5em; align-items: baseline; padding: .1rem 0; }
.nav-overlay li a::before { grid-row: 1 / span 2; font-size: .3em; transform: translateY(-.2em); }
.nl-main { display: block; }
.nl-latin {
  display: block; grid-column: 2;
  font-family: var(--type); font-style: normal; font-size: clamp(.6rem, 1.2vh, .74rem);
  letter-spacing: .22em; text-transform: uppercase; color: var(--sage-warm);
  margin-top: .3em; text-shadow: 0 1px 6px rgba(0,0,0,.9);
  font-variation-settings: normal;
}
.nav-overlay li a:hover .nl-latin, .nav-overlay li a:focus-visible .nl-latin { color: var(--cream); }
.nav-reading__spread { height: min(400px, 44vh); width: min(240px, 26vh); }
.nav-overlay__foot { padding-top: clamp(.8rem, 2vh, 2rem); }
@media (max-width: 900px) {
  .nav-overlay::before { background: rgba(6,8,6,.6); }
  .nav-overlay__foot { font-size: .78rem; gap: .4rem 1.5rem; }
}

.nr-name { display: block; font-family: var(--type); font-size: 1.1rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hot); }
.nr-meaning { display: block; font-family: var(--hand); font-size: 1rem; color: rgba(240,231,206,.8); margin-top: .4rem; }
@media (max-width: 900px) { .nav-body { grid-template-columns: 1fr; } .nav-reading { display: none; } }

/* ===================== INQUIRY MODAL ===================== */
.modal { position: fixed; inset: 0; z-index: 400; background: rgba(10, 13, 10, 0.86); backdrop-filter: blur(10px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; padding: 2rem 1rem; }
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
/* ===== PORTFOLIO POP-UP ===== */
.folio-open { display: inline-block; margin-top: 1.1rem; margin-left: 0; background: none; border: 1px dashed rgba(217,182,121,.55); color: var(--gold-hot); font-family: var(--type); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding: .7rem 1.1rem; border-radius: 2px; transition: background .3s, color .3s; }
.folio-open:hover { background: var(--gold-hot); color: var(--void); }
.rite-web__screens .screen { cursor: pointer; }
.folio { position: fixed; inset: 0; z-index: 410; background: rgba(6,8,6,.9); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 2vh 2vw; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.folio.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.folio__card { position: relative; width: min(1200px, 100%); max-height: 94vh; overflow-y: auto; background: linear-gradient(160deg, var(--forest), #0c100b); border: 1px solid rgba(169,175,140,.3); border-radius: 6px; padding: clamp(1.4rem, 3vw, 2.6rem); color: var(--cream); transform: translateY(24px); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.folio.is-open .folio__card { transform: none; }
.folio__close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(217,182,121,.5); color: var(--gold-hot); display: grid; place-items: center; background: none; z-index: 2; }
.folio__close::before { content: "×"; font-family: var(--serif); font-size: 1.7rem; line-height: 1; margin-top: -3px; }
.folio__lbl { font-family: var(--type); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sage-warm); }
.folio__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin: .4rem 0 1.6rem; }
.folio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.4rem); }
.folio__tile { background: none; border: 1px solid rgba(169,175,140,.22); border-radius: 4px; padding: 0; text-align: left; color: inherit; overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.folio__tile:hover, .folio__tile:focus-visible { transform: translateY(-4px) rotate(-.4deg); border-color: var(--gold-hot); }
.folio__tile img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top center; filter: saturate(.9); transition: filter .4s; }
.folio__tile:hover img { filter: saturate(1.05); }
.folio__tile span { display: block; padding: .7rem .9rem .8rem; }
.folio__tile b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1rem; }
.folio__tile small { display: block; margin-top: .2rem; font-family: var(--type); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-warm); }
/* detail panel opens inside the grid, directly under the chosen row */
.folio__detail { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; margin: -0.5rem 0; transition: grid-template-rows .55s cubic-bezier(.2,.9,.2,1), opacity .4s, margin .4s; }
.folio__detail.is-open { grid-template-rows: 1fr; opacity: 1; margin: .2rem 0 .6rem; }
.folio__detail > .folio__detail-inner { min-height: 0; overflow: hidden; }
.folio__detail.is-open > .folio__detail-inner { padding: clamp(1rem, 2vw, 1.6rem); border: 1px solid rgba(217,182,121,.45); border-radius: 6px; background: rgba(6,8,6,.55); position: relative; }
.folio__collapse { position: absolute; top: .7rem; right: .9rem; background: none; border: none; color: var(--sage-warm); font-family: var(--type); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.folio__collapse:hover { color: var(--gold-hot); }
.folio__tile.is-active { border-color: var(--gold-hot); box-shadow: 0 0 0 1px var(--gold-hot), 0 14px 30px -12px rgba(217,182,121,.45); transform: translateY(-4px); }
.folio__tile.is-active::after { content: ""; display: block; height: 0; }
.folio__back { background: none; border: none; color: var(--sage-warm); font-family: var(--type); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; padding: 0; }
.folio__back:hover { color: var(--gold-hot); }
.folio__detail-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; }
.folio__shot { border-radius: 6px; overflow: hidden; border: 1px solid rgba(169,175,140,.25); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); background: #111; }
.folio__bar { height: 24px; display: flex; gap: 6px; align-items: center; padding-left: 10px; background: rgba(240,231,206,.06); border-bottom: 1px solid rgba(169,175,140,.15); }
.folio__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(240,231,206,.18); }
.folio__shot img { display: block; width: 100%; height: auto; }
.folio__meta { font-family: var(--type); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-warm); }
.folio__info h4 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: .4rem 0 .9rem; color: var(--cream); }
.folio__info p { font-family: var(--book); font-size: 1.02rem; line-height: 1.65; color: rgba(240,231,206,.85); }
.folio__built { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.folio__built li { font-family: var(--type); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(217,182,121,.4); color: var(--gold-hot); padding: .35rem .6rem; border-radius: 2px; }
.folio__visit { display: inline-block; margin-top: 1.4rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--gold-hot); border-bottom: 1px solid currentColor; }
.folio__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed rgba(169,175,140,.3); font-family: var(--type); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-warm); }
.folio__nav button { background: none; border: none; color: var(--cream); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.folio__nav button:hover { color: var(--gold-hot); }
@media (max-width: 900px) { .folio__grid { grid-template-columns: repeat(2, 1fr); } .folio__detail-inner { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .folio__grid { grid-template-columns: 1fr; } }

.modal__card { width: 100%; max-width: 560px; background: var(--forest); border: 1px solid rgba(169,175,140,.3); border-radius: 6px; padding: 3rem clamp(1.6rem, 3vw, 3rem); color: var(--cream); position: relative; transform: translateY(30px); transition: transform .5s cubic-bezier(.2,.9,.2,1); max-height: 90vh; overflow-y: auto; }
.modal.is-open .modal__card { transform: none; }
.modal__close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; color: var(--sage-warm); border: 1px solid rgba(169,175,140,.4); display: grid; place-items: center; }
.modal__close::before { content: "×"; font-family: var(--serif); font-size: 1.5rem; margin-top: -2px; }
.modal__lbl { font-family: var(--caps); font-variant: small-caps; letter-spacing: .3em; font-size: .74rem; color: var(--sage-warm); display: block; margin-bottom: 1rem; }
.modal__title { font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.05; margin-bottom: 1.2rem; font-variation-settings: "opsz" 144, "SOFT" 70; }
.modal__intro { font-family: var(--book); font-size: 1rem; color: rgba(240,231,206,.75); margin-bottom: 2rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--caps); font-variant: small-caps; letter-spacing: .16em; font-size: .74rem; color: var(--sage-warm); margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem;
  background: var(--void); border: 1px solid rgba(169,175,140,.3); color: var(--cream);
  font-family: var(--book); font-size: 1rem; border-radius: 3px;
  transition: border-color .3s, background .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sage-warm); background: rgba(46,58,41,.4); }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23A9AF8C' stroke-width='1'/></svg>"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.modal__submit { width: 100%; padding: 1.1rem 1.6rem; background: var(--terracotta); color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 1.15rem; border-radius: 999px; transition: background .3s, letter-spacing .3s; margin-top: .5rem; }
.modal__submit:hover { background: var(--clay); letter-spacing: .03em; }
.modal__whisper { text-align: center; margin-top: 1.2rem; font-family: var(--hand); color: var(--sage-warm); font-size: .95rem; }

/* ===================== HAND-DRAWN INK STYLES ===================== */
.ink { filter: url(#ink-rough); }
.ink-heavy { filter: url(#ink-heavy); }

/* an ink splotch backdrop behind a heading */
.splotch-wrap { position: relative; display: inline-block; }
.splotch-wrap::before {
  content: ""; position: absolute; inset: -30% -10%; z-index: -1;
  background: radial-gradient(ellipse, var(--ink) 20%, transparent 65%);
  filter: url(#ink-blob);
  opacity: .5;
}
.splotch-wrap--rose::before { background: radial-gradient(ellipse, var(--wine) 15%, transparent 60%); opacity: .35; }
.splotch-wrap--sage::before { background: radial-gradient(ellipse, var(--moss) 15%, transparent 60%); opacity: .55; }

/* handdrawn line box */
.hd-box {
  position: relative; padding: 2rem;
}
.hd-box::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid currentColor;
  filter: url(#ink-rough);
  opacity: .6;
  pointer-events: none;
}

/* Aged paper */
.aged-paper {
  background:
    radial-gradient(ellipse 20% 15% at 15% 20%, rgba(139, 89, 43, .18), transparent 70%),
    radial-gradient(ellipse 15% 10% at 80% 30%, rgba(139, 89, 43, .12), transparent 65%),
    radial-gradient(ellipse 20% 15% at 40% 80%, rgba(155, 100, 55, .10), transparent 70%),
    radial-gradient(ellipse 15% 12% at 90% 90%, rgba(120, 80, 40, .14), transparent 65%),
    radial-gradient(ellipse 12% 8% at 65% 12%, rgba(107, 79, 42, .10), transparent 70%),
    linear-gradient(120deg, var(--paper) 0%, var(--paper-warm) 60%, var(--paper-deep) 100%);
  color: var(--ink);
  position: relative;
  isolation: isolate;
}
.aged-paper::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.22  0 0 0 0 0.12  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  background-size: 400px 400px;
  mix-blend-mode: multiply;
  opacity: .3;
  pointer-events: none;
  z-index: 1;
}
.aged-paper > * { position: relative; z-index: 2; }
.rite-weddings.aged-paper::after { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 360px, #000 calc(100% - 360px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 360px, #000 calc(100% - 360px), transparent 100%); }

/* Torn edge — top */
.torn-top { position: relative; }
.torn-top::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 24px;
  background: inherit;
  clip-path: polygon(0 60%, 3% 40%, 7% 70%, 12% 30%, 17% 60%, 22% 45%, 28% 70%, 34% 35%, 40% 65%, 46% 40%, 52% 70%, 58% 45%, 64% 65%, 70% 30%, 76% 60%, 82% 40%, 88% 70%, 94% 45%, 100% 60%, 100% 100%, 0 100%);
}

/* ===================== SHARED ===================== */
.container { width: min(1220px, 92vw); margin: 0 auto; position: relative; z-index: 4; }
.container--narrow { max-width: 780px; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.2s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.eyebrow { font-family: var(--caps); font-variant: small-caps; letter-spacing: .3em; font-size: .74rem; color: var(--sage-warm); }
.hand { font-family: var(--hand); }
.type { font-family: var(--type); }

/* ===================== COVER ===================== */
.cover {
  min-height: 100vh; min-height: 100svh;
  position: relative;
  padding: 8rem 0 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(107,115,85,.22), transparent 60%),
    linear-gradient(180deg, var(--forest) 0%, var(--void) 100%);
}
.cover__scatter { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cover__scatter svg { position: absolute; color: var(--sage-warm); opacity: .55; }
.cover__scatter .s1 { top: 12%; left: 5%;  width: 78px; height: 78px; transform: rotate(-8deg); }
.cover__scatter .s2 { top: 8%;  right: 8%; width: 90px; height: 90px; transform: rotate(6deg); opacity: .45; }
.cover__scatter .s3 { bottom: 26%; left: 7%; width: 58px; height: 58px; transform: rotate(15deg); }
.cover__scatter .s4 { bottom: 20%; right: 10%; width: 74px; height: 74px; transform: rotate(-12deg); opacity: .5; }
.cover__scatter .s5 { top: 42%; left: 3%; width: 42px; height: 42px; opacity: .35; }
.cover__scatter .s6 { top: 38%; right: 4%; width: 56px; height: 56px; opacity: .4; transform: rotate(30deg); }
@media (max-width: 600px) { .cover__scatter .s2, .cover__scatter .s5, .cover__scatter .s6 { display: none; } }

/* HERO redesign — single floating glass-parchment container, centered, burnt edges */
.cover__inner {
  position: absolute; inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 6rem 4vw 6rem;
  pointer-events: none;
}
.cover__inner > * { pointer-events: auto; }
.cover__eyebrow { display: none; }
.cover__title-card { display: none; }

/* ONE glass-parchment card, centered — no more jagged separate cards */
.cover__glass {
  position: relative;
  width: min(38rem, 88vw);
  padding: 3rem clamp(2rem, 4vw, 3rem) 2.6rem;
  color: var(--paper);
  /* Glass: transparent warm parchment tint + blur backdrop */
  background:
    /* warm parchment tint (semi-transparent) */
    linear-gradient(135deg, rgba(240, 224, 176, 0.14) 0%, rgba(217, 192, 136, 0.10) 100%),
    /* burnt darkening at edges */
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(48, 24, 8, 0.45) 92%);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(217, 192, 136, 0.18);
  border-radius: 2px;
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.85),
    0 0 60px -20px rgba(139, 89, 43, 0.35),
    inset 0 0 80px rgba(48, 24, 8, 0.35);
  /* Burnt/scorched edges via SVG mask filter */
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, rgba(0,0,0,.85) 75%, rgba(0,0,0,.4) 92%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, rgba(0,0,0,.85) 75%, rgba(0,0,0,.4) 92%, transparent 100%);
  filter: url(#burnt-edge);
  animation: glassFloat 8s ease-in-out infinite alternate;
}
@keyframes glassFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
/* Extra subtle noise overlay so the glass reads as parchment-textured, not sterile */
.cover__glass::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='pg'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.28  0 0 0 0 0.14  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23pg)'/></svg>");
  background-size: 300px 300px;
  mix-blend-mode: overlay;
  opacity: .5;
  pointer-events: none;
  border-radius: inherit;
}
/* Glow ring around the card so it lifts off the video */
.cover__glass::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(217, 182, 121, 0.25);
  pointer-events: none;
}
.cover__glass > * { position: relative; z-index: 2; }

/* ================= HERO COMPOSITION — editorial spread, not a box ================= */
.cover__inner.hero-comp {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 8rem 5vw 7rem;
  place-items: initial;
}
.hero-comp__title { position: relative; align-self: center; }
/* ink splotch behind the H1 — gives legibility over the video without a container */
.hero-comp__title::before {
  content: ""; position: absolute; inset: -18% -14% -22% -18%;
  background:
    radial-gradient(ellipse 55% 50% at 45% 50%, rgba(8,10,8,.82) 25%, rgba(8,10,8,.5) 55%, transparent 75%);
  filter: url(#ink-blob);
  z-index: -1;
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--type); font-size: .82rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-hot);
  margin-bottom: 1.4rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.hero-eyebrow img { width: 38px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.hero-eyebrow::after { content: ""; width: 3.5rem; height: 1px; background: var(--gold-hot); opacity: .6; }
.hero-h1 {
  font-family: var(--type);
  font-weight: 400;
  color: var(--paper);
  font-size: clamp(2.4rem, 5.4vw, 5.2rem);
  line-height: .98;
  letter-spacing: -0.02em;
  margin: 0 0 1.8rem;
  text-shadow: 0 3px 18px rgba(0,0,0,.75);
}
.hero-h1__line { display: block; }
.hero-h1 em { font-style: normal; color: var(--gold-hot); position: relative; }
.hero-h1 em::after {
  /* hand-drawn underline under Tamborine Mountain */
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .16em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 8 Q 60 2 120 7 T 298 5' fill='none' stroke='%23D9B679' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  opacity: .8;
}
.hero-h1__sub {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--type); font-style: normal; font-weight: 400;
  font-size: clamp(.58rem, .8vw, .8rem);
  letter-spacing: .04em; line-height: 1.5; text-transform: none;
  color: rgba(240, 231, 206, .92);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
/* second line: plain-language SEO sentence under the H1 */
.hero-seo {
  margin: -1.3rem 0 1.8rem;
  font-family: var(--type);
  font-size: clamp(.55rem, .72vw, .74rem);
  letter-spacing: .03em; line-height: 1.6;
  color: rgba(217, 182, 121, .85);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
@media (max-width: 900px) { .hero-h1__sub, .hero-seo { white-space: normal; font-size: .8rem; } }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero-cta {
  font-family: var(--type); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper); padding: 1rem 1.5rem;
  border: 1px solid rgba(240,231,206,.4);
  background: rgba(10,13,10,.35); backdrop-filter: blur(6px);
  transition: background .3s, border-color .3s, transform .3s;
}
.hero-cta:hover { background: rgba(217,182,121,.18); border-color: var(--gold-hot); transform: translateY(-2px); }
.hero-cta--primary { background: var(--gold-hot); color: var(--ink); border-color: var(--gold-hot); }
.hero-cta--primary:hover { background: var(--paper); color: var(--ink); }

/* RIGHT — tarot spread + dictionary card */
.hero-comp__spread { position: relative; min-height: 560px; display: grid; place-items: center; }
.tarot-fan { position: absolute; inset: 0; pointer-events: none; }
.tarot-fan .tc {
  position: absolute; top: 4%; left: 50%;
  width: clamp(120px, 12vw, 180px); height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(217,182,121,.25);
  filter: sepia(.25) contrast(1.05) brightness(.95);
  transform-origin: 50% 120%;
  animation: fanSway 9s ease-in-out infinite alternate;
  opacity: 0;
  transition: opacity 1s;
}
.tarot-fan .tc.is-in { opacity: 1; }
.tarot-fan .tc-1 { --r: -34deg; --x: -150%; animation-delay: -1s; }
.tarot-fan .tc-2 { --r: -17deg; --x: -110%; animation-delay: -2.5s; }
.tarot-fan .tc-3 { --r:   0deg; --x:  -50%; animation-delay: -4s; }
.tarot-fan .tc-4 { --r:  17deg; --x:   10%; animation-delay: -5.5s; }
.tarot-fan .tc-5 { --r:  34deg; --x:   50%; animation-delay: -7s; }
@keyframes fanSway {
  from { transform: translateX(var(--x)) rotate(var(--r)); }
  to   { transform: translateX(var(--x)) rotate(calc(var(--r) + 3deg)) translateY(-6px); }
}
/* Dictionary pulled from the deck — sits in front, lower half */
.cover__glass.hero-dict {
  position: relative;
  width: min(30rem, 100%);
  margin-top: 13rem;
  transform: rotate(-1.5deg);
  filter: none;
  -webkit-mask-image: none; mask-image: none;
  background:
    linear-gradient(135deg, rgba(20, 16, 10, 0.72) 0%, rgba(30, 22, 12, 0.62) 100%);
  border: 1px solid rgba(217, 182, 121, .35);
  box-shadow: 0 40px 80px -25px rgba(0,0,0,.9), inset 0 0 60px rgba(48, 24, 8, .4);
  padding: 2rem 2.2rem 1.8rem;
  z-index: 3;
}
.cover__glass.hero-dict .cover__glass-seal { display: none; }
@media (max-width: 1000px) {
  .cover__inner.hero-comp { grid-template-columns: 1fr; padding-top: 7rem; position: relative; }
  .hero-comp__spread { min-height: 520px; }
}
@media (max-width: 600px) {
  .tarot-fan .tc { width: 96px; }
  .cover__glass.hero-dict { margin-top: 9rem; }
}

/* Slow drift for any layered vintage image */
.drift-slow { animation: driftSlow 16s ease-in-out infinite alternate; }
@keyframes driftSlow {
  from { transform: translate(0,0) rotate(var(--r, 0deg)); }
  to   { transform: translate(10px,-12px) rotate(calc(var(--r, 0deg) + 2.5deg)); }
}

/* Floating real tarot cards scattered through the page */
.tarot-float {
  position: absolute; z-index: 3; pointer-events: none;
  width: 150px; border-radius: 6px;
  box-shadow: 0 24px 40px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(217,182,121,.22);
  filter: sepia(.28) contrast(1.05) brightness(.92);
  animation: tarotFloat 11s ease-in-out infinite alternate;
}
.tarot-float.lg { width: 200px; }
.tarot-float.sm { width: 110px; }
@keyframes tarotFloat {
  from { transform: translateY(0) rotate(var(--r, 0deg)); }
  to   { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 3deg)); }
}
@media (max-width: 700px) { .tarot-float { width: 90px; } .tarot-float.lg { width: 120px; } }

/* Small "n° I" chip above the glass card — subtle */
.cover__glass-seal {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: .35rem .8rem;
  color: var(--gold-hot);
  border: 1px solid var(--gold-hot);
  display: inline-block;
  font-family: var(--type);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  background: rgba(10, 13, 10, .5);
}

/* ================ THE WAX SEAL — hero-centered logo medallion ================ */
.hero-seal {
  position: fixed;
  top: 6rem;
  left: 50%;
  transform: translate(-50%, 0) scale(1);
  z-index: 95;
  width: 220px;
  height: 220px;
  pointer-events: none;
  will-change: transform, opacity;
  transition: none;
}
.hero-seal__medallion {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  /* wax gradient with subtle red-brown tones */
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 220, 190, .35) 0%, transparent 30%),
    radial-gradient(circle at 65% 70%, rgba(0, 0, 0, .35) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #8b3a2a 0%, #6b2318 55%, #3a0f08 100%);
  box-shadow:
    0 18px 40px -10px rgba(60, 20, 10, .75),
    0 4px 12px rgba(0, 0, 0, .5),
    inset 0 4px 12px rgba(255, 200, 170, .3),
    inset 0 -8px 20px rgba(0, 0, 0, .55),
    inset 0 0 40px rgba(90, 30, 20, .5);
  display: grid; place-items: center;
  /* wax edge deformation via SVG filter */
  filter: url(#burnt-edge);
}
/* wax texture noise overlay */
.hero-seal__medallion::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='wax'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' seed='9'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.05  0 0 0 0 0.02  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23wax)'/></svg>");
  background-size: 300px 300px;
  mix-blend-mode: multiply;
  opacity: .55;
  pointer-events: none;
}
/* wax drip on the bottom */
.hero-seal__medallion::after {
  content: ""; position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 32px;
  background: radial-gradient(ellipse at 50% 30%, #8b3a2a 0%, #6b2318 55%, #3a0f08 100%);
  border-radius: 45% 45% 55% 55% / 30% 30% 70% 70%;
  box-shadow: 0 6px 12px -3px rgba(60, 20, 10, .6);
  filter: url(#burnt-edge);
}
/* logo pressed into wax — imprinted feel via filter/blend */
.hero-seal__logo {
  width: 62%; height: 62%;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(2px 2px 0 rgba(0, 0, 0, .5))
    drop-shadow(-1px -1px 0 rgba(255, 200, 170, .35));
  mix-blend-mode: overlay;
  opacity: .95;
}
/* outer ring engraving */
.hero-seal__ring {
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 200, 170, .25);
  pointer-events: none;
}
.hero-seal__ring--inner {
  inset: 12px;
  border-color: rgba(0, 0, 0, .35);
}

/* Sparkle burst container */
.hero-seal__sparks {
  position: absolute; inset: -20%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.hero-seal__sparks::before,
.hero-seal__sparks::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 2px at 10% 15%, var(--gold-hot) 0, transparent 3px),
    radial-gradient(circle 1.5px at 78% 22%, var(--gold-hot) 0, transparent 2px),
    radial-gradient(circle 2.5px at 20% 78%, var(--gold-hot) 0, transparent 3px),
    radial-gradient(circle 1.5px at 85% 82%, var(--gold-hot) 0, transparent 2px),
    radial-gradient(circle 2px at 45% 5%, var(--gold-hot) 0, transparent 3px),
    radial-gradient(circle 1px at 55% 92%, var(--gold-hot) 0, transparent 2px),
    radial-gradient(circle 2px at 5% 50%, var(--gold-hot) 0, transparent 3px),
    radial-gradient(circle 1.5px at 95% 50%, var(--gold-hot) 0, transparent 2px),
    radial-gradient(circle 2px at 30% 40%, var(--gold-hot) 0, transparent 3px),
    radial-gradient(circle 1.5px at 70% 60%, var(--gold-hot) 0, transparent 2px);
  animation: sparkleTwinkle 1.2s ease-out infinite;
}
.hero-seal__sparks::after { animation-delay: .6s; transform: rotate(45deg); }
@keyframes sparkleTwinkle {
  0%,100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%     { opacity: 1; transform: scale(1.4) rotate(15deg); }
}

/* State: dissolving — sparkles fade in as seal crumbles */
.hero-seal.is-dissolving .hero-seal__sparks { opacity: 1; }
.hero-seal.is-gone { opacity: 0; transform: translate(-50%, -20px) scale(0.4) rotate(-20deg); pointer-events: none; }

/* When seal is present, hide the chrome logo */
.chrome-logo { transition: opacity .8s ease, transform .8s ease; }
.chrome-logo.is-hidden { opacity: 0; transform: translate(-20px, -10px) scale(.6); pointer-events: none; }

@media (max-width: 700px) {
  .hero-seal { width: 140px; height: 140px; top: 5rem; }
}

.cover__title {
  font-family: var(--type);
  font-style: normal;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: .95;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
  position: relative;
  display: inline-block;
}
.cover__title-splotch {
  position: absolute; inset: -12% -20% -12% -20%;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(20,24,18,.15) 30%, transparent 70%);
  filter: url(#ink-blob);
}
.cover__title .amp { display: none; }
.cover__title .splash {
  position: absolute;
  color: var(--ink);
  filter: url(#ink-blob);
}
.cover__title .splash.s-a { top: -10px; right: -25px; width: 30px; height: 30px; background: currentColor; border-radius: 50%; opacity: .5; }
.cover__title .splash.s-b { bottom: -5px; left: -20px; width: 45px; height: 18px; background: currentColor; border-radius: 50%; opacity: .4; }
.cover__title .splash.s-c { top: 60%; right: -18px; width: 14px; height: 14px; background: currentColor; border-radius: 50%; opacity: .35; }

.cover__stamp {
  display: inline-block;
  font-family: var(--type);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sepia);
  border: 1px solid var(--sepia);
  padding: .3rem .8rem;
  margin-bottom: 1.2rem;
  transform: rotate(-1deg);
}

/* DICTIONARY definition — now inside the glass card */
.cover__def-card { display: none; }
.dict__inside {
  font-family: "IM Fell English", Georgia, serif;
  line-height: 1.5;
  color: var(--paper);
}
.dict__inside .dict__head {
  border-bottom: 1px solid rgba(217, 182, 121, .4);
}
.dict__inside .dict__word { color: var(--paper); font-family: "Fraunces", serif; font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 60; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.dict__inside .dict__num { color: var(--gold-hot); }
.dict__inside .dict__meta { color: rgba(240, 224, 176, .8); }
.dict__inside .dict__meta .ipa { color: var(--paper); }
.dict__inside .dict__defs { color: var(--paper); }
.dict__inside .dict__defs li::before { color: var(--gold-hot); }
.dict__inside .dict__defs em { color: var(--gold-hot); font-style: italic; }
.dict__inside .dict__etym { color: rgba(240, 224, 176, .75); border-color: rgba(217, 182, 121, .3); }
.dict__inside .dict__etym strong { color: var(--paper); }
.dict__inside .dict__quote { color: var(--gold-hot); border-color: rgba(217, 182, 121, .35); font-family: "Fraunces", serif; font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 90; }

.dict__head {
  display: flex; align-items: baseline; gap: .6rem;
  border-bottom: 1px solid var(--sepia);
  padding-bottom: .3rem;
  margin-bottom: .6rem;
}
.dict__word { font-family: "Fraunces", "IM Fell English", serif; font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 60; font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--ink); line-height: 1; margin: 0; font-weight: 500; }
.dict__num { font-family: var(--type); font-size: .68rem; letter-spacing: .18em; color: var(--sepia); text-transform: uppercase; margin-left: auto; }
.dict__meta {
  font-family: var(--type);
  font-size: .82rem;
  color: var(--sepia);
  margin-bottom: 1rem;
  letter-spacing: .01em;
}
.dict__meta .ipa { color: var(--ink); font-family: "IM Fell English", serif; font-style: italic; }
.dict__meta .pos { font-style: italic; }
.dict__meta .lang { color: var(--sepia); }
.dict__defs {
  list-style: none; padding: 0; margin: 0 0 1rem;
  counter-reset: dict;
  color: var(--ink);
  font-size: .95rem;
}
.dict__defs li {
  counter-increment: dict;
  position: relative;
  padding: .35rem 0 .35rem 1.6rem;
  line-height: 1.5;
}
.dict__defs li::before {
  content: counter(dict) ".";
  position: absolute; left: 0; top: .35rem;
  font-family: "Fraunces", serif; font-style: italic;
  color: var(--sepia);
  font-weight: 500;
}
.dict__etym {
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: .8rem;
  color: var(--sepia);
  border-top: 1px dashed rgba(107,79,42,.5);
  padding-top: .6rem;
  margin-top: .6rem;
}
.dict__etym strong { font-weight: 400; color: var(--ink); font-family: "Fraunces", serif; }
.dict__quote {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin-top: .8rem;
  padding-top: .6rem;
  border-top: 1px solid var(--sepia);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  text-align: center;
}
.dict__quote::before, .dict__quote::after { color: var(--sepia); }

@media (max-width: 900px) {
  .cover__title-card { position: relative; top: auto; left: auto; margin: 6rem auto 2rem; max-width: 90vw; transform: rotate(-1deg); }
  .cover__def-card { position: relative; bottom: auto; right: auto; margin: 0 auto 2rem; width: 90vw; transform: rotate(1deg); }
  .cover__inner { position: relative; padding: 4rem 1rem; }
}
.cover__def {
  max-width: 46rem; margin: 2.5rem auto 0;
  font-family: var(--type);
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--cream);
  letter-spacing: .02em;
  text-align: left;
  position: relative;
  padding: 2rem 2.5rem;
  background: rgba(10,13,10,.35);
  backdrop-filter: blur(2px);
  border: 1px dashed rgba(169,175,140,.35);
}
.cover__def::before {
  content: "n° I · a definition";
  position: absolute; top: -12px; left: 2rem;
  padding: 0 .8rem; background: var(--ink);
  font-family: var(--type); font-size: .68rem;
  letter-spacing: .22em; color: var(--sage-warm);
  text-transform: uppercase;
}
.cover__def em { color: var(--sage-warm); font-style: normal; font-weight: 500; }
.cover__def .glow { color: var(--gold-hot); }
.cover__def .b { display: block; margin-top: .8em; }
.cover__def .redact { background: var(--cream); color: var(--ink); padding: 0 .3em; }

/* row of glowing runes at bottom of cover */
.runes-row {
  position: absolute; bottom: 5rem; left: 0; right: 0;
  display: flex; justify-content: center; gap: 3rem;
  z-index: 3;
  opacity: .35;
}
.runes-row svg { width: 26px; height: 40px; color: var(--sage-warm); animation: runeGlow 14s ease-in-out infinite; }
.runes-row svg:nth-child(1) { animation-delay:  0s; }
.runes-row svg:nth-child(2) { animation-delay: 1.4s; }
.runes-row svg:nth-child(3) { animation-delay: 2.8s; }
.runes-row svg:nth-child(4) { animation-delay: 4.2s; }
.runes-row svg:nth-child(5) { animation-delay: 5.6s; }
.runes-row svg:nth-child(6) { animation-delay: 7.0s; }
.runes-row svg:nth-child(7) { animation-delay: 8.4s; }
.runes-row svg:nth-child(8) { animation-delay: 9.8s; }
@keyframes runeGlow {
  0%, 90%, 100% { opacity: .3; filter: drop-shadow(0 0 0 transparent); color: var(--sage-warm); }
  45% { opacity: 1; filter: drop-shadow(0 0 10px var(--gold-hot)); color: var(--gold-hot); }
}
@media (max-width: 600px) { .runes-row { gap: 1.4rem; bottom: 2rem; } .runes-row svg { width: 18px; height: 28px; } }

.cover__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 5; font-family: var(--type); letter-spacing: .3em; font-size: .7rem; color: rgba(240,231,206,.5); text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cover__scroll span { width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--sage-warm), transparent); animation: pulseDown 2.4s ease-in-out infinite; }
@keyframes pulseDown { 0%,100% { opacity: 0; transform: translateY(-20px); } 50% { opacity: 1; transform: translateY(20px); } }
@media (max-width: 700px) { .cover__scroll { display: none; } }

/* ===================== TRUST STATS — chaotic collage (readable) ===================== */
.stats {
  padding: 5rem 0 6rem;
  background: var(--ink);
  position: relative;
  z-index: 4;
  overflow: hidden;
  border-block: none;
}
.stats::before, .stats::after {
  content: ""; position: absolute; left: 0; right: 0; height: 24px;
  background: inherit;
  clip-path: polygon(0 60%, 3% 40%, 7% 70%, 12% 30%, 17% 60%, 22% 45%, 28% 70%, 34% 35%, 40% 65%, 46% 40%, 52% 70%, 58% 45%, 64% 65%, 70% 30%, 76% 60%, 82% 40%, 88% 70%, 94% 45%, 100% 60%, 100% 100%, 0 100%);
  z-index: 5;
}
.stats::before { top: -12px; }
.stats::after { bottom: -12px; transform: scaleY(-1); }
.stats__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  z-index: 2;
}
.stat {
  padding: 1rem;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
  position: relative;
}
.stat:nth-child(1) { transform: rotate(-2deg); }
.stat:nth-child(2) { transform: rotate(2deg) translateY(-1rem); }
.stat:nth-child(3) { transform: rotate(-1deg) translateY(.5rem); }
.stat:nth-child(4) { transform: rotate(3deg); }
.stat:nth-child(5) { transform: rotate(-3deg) translateY(-.5rem); }
.stat:hover { transform: scale(1.08) rotate(0) translateY(0); z-index: 5; }
.stat__val {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: .95;
  color: var(--sage-warm);
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  filter: url(#ink-rough);
  text-align: center;
}
.stat__val small { font-family: var(--type); font-size: .3em; color: var(--gold-hot); vertical-align: super; font-style: normal; margin-left: .1rem; }
.stat__val .stars { color: var(--gold-hot); letter-spacing: .02em; font-size: .7em; font-style: normal; }
.stat__val--type {
  font-family: var(--type);
  font-style: normal;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cream);
  padding: .4em .6em;
  background: var(--cream);
  color: var(--ink);
  transform: rotate(-2deg);
  display: inline-block;
}
.stat__lbl {
  display: block;
  font-family: var(--hand);
  font-size: .95rem;
  color: var(--cream);
  margin-top: .8rem;
  max-width: 16ch;
  line-height: 1.3;
  text-transform: none; letter-spacing: 0;
}
/* Mix the lettering: some labels in the typewriter caps used by the chapter labels
   (e.g. "i · ars interneta · the making of websites"), the rest stay handwritten */
.stats__row--seven .stat:nth-child(2) .stat__lbl,
.stats__row--seven .stat:nth-child(5) .stat__lbl,
.stats__row--seven .stat:nth-child(7) .stat__lbl {
  font-family: var(--type);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7rem;
  line-height: 1.6;
  color: var(--sage-warm);
  max-width: 18ch;
}
.stat:nth-child(1) .stat__val { color: var(--sage-warm); }
.stat:nth-child(2) .stat__val { color: var(--gold-hot); }
.stat:nth-child(3) .stat__val { color: var(--terracotta); }
.stat:nth-child(4) .stat__val { color: var(--gold-hot); }
.stat:nth-child(5) .stat__val { color: var(--rose); }
/* stamped seal behind each stat */
.stat::before {
  content: attr(data-num);
  position: absolute; top: -1rem; left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-family: var(--caps); font-variant: small-caps;
  font-size: 4rem; line-height: 1;
  color: rgba(169, 175, 140, 0.08);
  filter: url(#ink-blob);
  pointer-events: none;
}
/* seven across — container widened so the far-left/far-right stats reach the edges */
.stats .container { max-width: 1480px; width: 96vw; }
.stats__row--seven { grid-template-columns: repeat(7, 1fr); gap: clamp(.8rem, 1.8vw, 2rem); }
.stats__row--seven .stat__val { font-size: clamp(1.8rem, 3.2vw, 3rem); }
.stats__row--seven .stat__val--type { font-size: clamp(.9rem, 1.3vw, 1.2rem); }
.stats__row--seven .stat:nth-child(6) { transform: rotate(2deg) translateY(-.6rem); }
.stats__row--seven .stat:nth-child(7) { transform: rotate(-2.5deg) translateY(.4rem); }
.stats__row--seven .stat:nth-child(7) .stat__val { color: var(--sage-warm); }
@media (max-width: 1100px) { .stats__row--seven { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .stats__row { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .stat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .stats__row { grid-template-columns: 1fr; }
  .stat:last-child { grid-column: auto; }
  .stat { transform: rotate(0) !important; }
}

/* ===================== CHAPTER BASE ===================== */
.chapter { position: relative; padding: 10rem 0; overflow: hidden; }
.chapter__num-huge { position: absolute; top: 5rem; right: 4rem; font-family: var(--serif); font-style: italic; font-size: clamp(6rem, 14vw, 14rem); line-height: .8; color: var(--cream); opacity: .06; z-index: 1; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; pointer-events: none; }
.chapter__label { font-family: var(--type); letter-spacing: .22em; font-size: .8rem; color: var(--sage-warm); display: block; margin-bottom: 1.4rem; text-transform: uppercase; }
.chapter__title { font-family: var(--serif); font-style: italic; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .95; letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; color: var(--cream); margin-bottom: 1.5rem; position: relative; display: inline-block; }
.chapter__title em { color: var(--sage-warm); font-family: var(--book); font-style: italic; }
.chapter__title .clay { color: var(--terracotta); font-family: var(--book); }
/* exactly two lines, each held together — shrinks to fit rather than wrapping */
.chapter__title--twoline { display: block; font-size: clamp(1.6rem, 3.9vw, 3.6rem); line-height: 1.05; max-width: none; }
.chapter__title--twoline > span { display: block; white-space: nowrap; }
@media (max-width: 560px) { .chapter__title--twoline > span { white-space: normal; } }
/* typewriter variant — for sections that want the stamped feel */
.chapter__title--type {
  font-family: var(--type);
  font-style: normal;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--cream);
}
.chapter__title--type em { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1; color: var(--gold-hot); }
.chapter__title--type .stamp { display: inline-block; position: relative; isolation: isolate; color: var(--ink); padding: .12em .45em .08em; margin: 0 .1em; transform: rotate(-1.6deg); font-size: .8em; }
/* hand-torn highlight: an uneven cream swatch with inky, wobbly edges */
.chapter__title--type .stamp::before {
  content: ""; position: absolute; z-index: -1; inset: -.06em -.12em -.1em -.08em;
  background: var(--cream);
  border-radius: 46% 12% 38% 9% / 22% 48% 14% 40%;
  clip-path: polygon(1% 12%, 9% 3%, 23% 7%, 38% 1%, 55% 5%, 71% 0%, 88% 6%, 99% 2%, 97% 30%, 100% 58%, 96% 86%, 99% 99%, 80% 94%, 62% 100%, 44% 95%, 27% 99%, 12% 93%, 2% 98%, 3% 70%, 0% 44%);
  filter: url(#ink-rough);
  transform: rotate(.8deg) skewX(-3deg);
  box-shadow: 0 0 0 1px rgba(240,231,206,.4);
}
.chapter__title--type .strike { text-decoration: line-through; text-decoration-color: var(--terracotta); text-decoration-thickness: 3px; opacity: .7; }
.chapter__lede { font-family: var(--book); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.55; color: rgba(240,231,206,.9); max-width: 54ch; margin-bottom: 1.5rem; }
.chapter__prose p { font-family: var(--book); font-size: 1.05rem; line-height: 1.75; color: rgba(240,231,206,.82); margin-bottom: 1.1em; max-width: 58ch; }
.chapter__prose em { color: var(--sage-warm); font-style: italic; }
.chapter__prose strong { color: var(--gold-hot); font-weight: 400; font-style: italic; font-family: var(--serif); }
.chapter__cta { display: inline-block; margin-top: 1.5rem; font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--gold-hot); padding-bottom: .3rem; border-bottom: 1px solid var(--gold-hot); transition: color .3s, letter-spacing .3s, padding-right .3s; }
.chapter__cta:hover { letter-spacing: .02em; padding-right: 1.5rem; }
.chapter__seals { margin-top: 2rem; display: flex; gap: 1.4rem; flex-wrap: wrap; padding-top: 1.4rem; border-top: 1px dashed rgba(169,175,140,.25); font-family: var(--type); letter-spacing: .12em; font-size: .74rem; color: rgba(240,231,206,.65); text-transform: uppercase; }
.chapter__seals span::before { content: "◈ "; color: var(--sage-warm); }

/* ===== RITE I — WEB (forest, splotched heading, screens) ===== */
.rite-web { background: linear-gradient(180deg, var(--void) 0%, var(--forest) 100%); }
.rite-web__grid { display: grid; grid-template-columns: 4fr 6fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 800px) { .rite-web__grid { grid-template-columns: 1fr; } }
.rite-web__screens { position: relative; min-height: 620px; }

.screen { position: absolute; border-radius: 6px; overflow: hidden; background: var(--ink); border: 1px solid rgba(169,175,140,.2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.screen__frame { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: rgba(240,231,206,.06); border-bottom: 1px solid rgba(169,175,140,.15); display: flex; align-items: center; gap: 4px; padding-left: 8px; }
.screen__frame::before, .screen__frame::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(240,231,206,.15); }
.screen__frame::after { box-shadow: 12px 0 0 rgba(240,231,206,.15), 24px 0 0 rgba(240,231,206,.15); }
.screen__body { padding: 22px 0 0; min-height: 100%; background: radial-gradient(ellipse at 30% 20%, rgba(169,175,140,.15), transparent 55%), linear-gradient(160deg, var(--moss), var(--ink)); display: grid; place-items: center; color: rgba(240,231,206,.4); font-family: var(--hand); font-size: .85rem; text-align: center; padding: 40px 20px 20px; }
.screen.s1 { width: 62%; top: 0; left: 0; aspect-ratio: 4/3; z-index: 2; transform: rotate(-3deg); }
.screen.s2 { width: 54%; top: 26%; right: 0; aspect-ratio: 3/4; z-index: 3; transform: rotate(4deg); }
.screen.s3 { width: 48%; bottom: 4%; left: 10%; aspect-ratio: 16/10; z-index: 2; transform: rotate(-2deg); }
.screen.s4 { width: 32%; bottom: 22%; right: 8%; aspect-ratio: 9/16; z-index: 4; transform: rotate(6deg); }
.screen__body--shot { display: block; position: relative; height: 100%; background: #111; }
.screen__body--shot img { position: absolute; left: 0; right: 0; bottom: 0; top: 22px; width: 100%; height: calc(100% - 22px); object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.screen__body--shot img.is-on { opacity: 1; }
.screen:hover { transform: translateY(-6px) rotate(0); z-index: 10; }

/* ===== RITE II — PHOTO (editorial with SPECIMEN LABELS on stills) — terracotta warm shift ===== */
.rite-photo {
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(232, 205, 184, .18), transparent 55%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(155, 100, 55, .35), transparent 55%),
    linear-gradient(180deg, var(--moss-warm) 0%, var(--clay) 60%, #3d1e14 100%);
}
.rite-photo .chapter__label { color: var(--gold-hot); }
.rite-photo__spread { margin-top: 5rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; }
.rite-photo__hero { aspect-ratio: 4/5; background: radial-gradient(ellipse at 30% 30%, rgba(232,205,184,.15), transparent 60%), linear-gradient(160deg, var(--clay), var(--terracotta) 60%, #4a2a1e); position: relative; overflow: hidden; border-radius: 3px; }
.rite-photo__hero .cap { position: absolute; inset: auto 0 0; padding: 1.4rem 1.6rem; background: linear-gradient(0deg, rgba(10,13,10,.85), transparent); color: var(--cream); font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 60; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.rite-photo__hero .tag { font-family: var(--type); letter-spacing: .2em; font-size: .7rem; color: var(--gold-hot); display: block; margin-bottom: .3rem; text-transform: uppercase; }
.rite-photo__hero .placeholder-note { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-family: var(--hand); color: rgba(240,231,206,.55); font-size: .82rem; }

/* SPECIMEN LABEL — like a witch's bottle label */
.specimen-label {
  position: absolute; top: 1rem; right: 1rem;
  z-index: 3;
  padding: .6rem .8rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--sepia);
  font-family: var(--type);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(3deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  max-width: 140px;
  line-height: 1.3;
}
.specimen-label::before { content: "N°"; font-family: var(--serif); font-style: italic; text-transform: none; font-size: 1.1em; margin-right: .3em; color: var(--sepia); }
.specimen-label .hd-line { display: block; font-family: var(--hand); text-transform: none; letter-spacing: 0; margin-top: .2rem; font-size: .85rem; color: var(--sepia); }

.rite-photo__side { display: flex; flex-direction: column; gap: 2rem; }
.photo-still { aspect-ratio: 3/4; position: relative; overflow: hidden; border-radius: 3px; }
.photo-still.a { transform: translateY(3rem); background: linear-gradient(160deg, #d0c19b, #8a7a55); }
.photo-still.b { transform: translateY(-2rem); background: linear-gradient(160deg, var(--sage-warm), var(--moss)); }
.photo-still .cap { position: absolute; inset: auto 0 0; padding: 1rem 1.2rem; background: linear-gradient(0deg, rgba(10,13,10,.75), transparent); color: var(--cream); font-family: var(--caps); font-variant: small-caps; letter-spacing: .16em; font-size: .78rem; }
.photo-still .placeholder-note { position: absolute; top: .8rem; left: .8rem; font-family: var(--hand); color: rgba(240,231,206,.5); font-size: .78rem; }

/* ===== PHOTOGRAPHY BENTO: one print per category + a door to the whole collection ===== */
.bento { margin-top: 5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 13vw, 220px); gap: clamp(.7rem, 1.3vw, 1.1rem);
  grid-template-areas: "a a b c" "a a b d" "e f f d" "e g h i" "j j h i"; }
.bento__tile { position: relative; margin: 0; padding: 0; border: none; overflow: hidden; border-radius: 4px; cursor: none; text-align: left;
  background: linear-gradient(160deg, var(--moss), var(--ink)); box-shadow: 0 26px 50px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(240,231,206,.12);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.bento__tile:hover, .bento__tile:focus-visible { transform: translateY(-4px); box-shadow: 0 34px 60px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(217,182,121,.6); outline: none; }
.t-a { grid-area: a; } .t-b { grid-area: b; } .t-c { grid-area: c; } .t-d { grid-area: d; } .t-e { grid-area: e; } .t-f { grid-area: f; } .t-g { grid-area: g; } .t-h { grid-area: h; } .t-i { grid-area: i; } .bento__more { grid-area: j; }
.bento__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) contrast(1.02); transition: transform 1.4s cubic-bezier(.2,.8,.2,1), filter .6s; }
.bento__tile:hover img { transform: scale(1.06); filter: none; }
.bento__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.42) 0%, transparent 38%), radial-gradient(ellipse at 50% 45%, transparent 62%, rgba(0,0,0,.3) 100%); }
/* a little paper specimen tag with the category */
.bento__label { position: absolute; left: .9rem; bottom: .9rem; z-index: 3; display: flex; flex-direction: column; gap: .1rem; padding: .45rem .7rem .5rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--sepia); box-shadow: 0 3px 10px rgba(0,0,0,.45); transform: rotate(-2deg); transition: transform .45s cubic-bezier(.2,.9,.2,1.3); }
.bento__tile:nth-child(even) .bento__label { transform: rotate(1.8deg); }
.bento__tile:hover .bento__label { transform: rotate(0) translateY(-3px); }
.bl-cat { font-family: var(--type); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.bl-cat::before { content: "N° "; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--sepia); }
.bl-count { font-family: var(--hand); font-size: .82rem; color: var(--sepia); }
.bento__more { position: relative; border: none; border-radius: 4px; padding: 1rem 1.2rem; cursor: none; overflow: hidden; color: var(--cream);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 1.4rem; align-items: center; align-content: center; text-align: left;
  background: linear-gradient(160deg, rgba(20,26,19,.72), rgba(8,11,8,.84)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(217,182,121,.4), 0 26px 50px -26px rgba(0,0,0,.85); transition: box-shadow .4s, transform .4s; }
.bento__more:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(217,182,121,.85), 0 0 30px -6px rgba(217,182,121,.35), 0 34px 60px -26px rgba(0,0,0,.9); }
.bento__stack { grid-row: 1 / span 3; position: relative; width: 96px; height: 76px; }
.bento__stack i { position: absolute; left: 50%; top: 50%; width: 48px; height: 62px; margin: -31px 0 0 -24px; border-radius: 2px; background: #cdbd99 center / cover no-repeat; border: 3px solid #efe6d2; box-shadow: 0 6px 12px rgba(0,0,0,.45); transition: transform .5s cubic-bezier(.2,.9,.2,1.2); }
.bento__stack i:nth-child(1) { transform: translateX(-22px) rotate(-12deg); }
.bento__stack i:nth-child(2) { transform: translateX(22px) rotate(10deg); }
.bento__stack i:nth-child(3) { transform: rotate(-2deg); }
.bento__more:hover .bento__stack i:nth-child(1) { transform: translateX(-32px) rotate(-18deg); }
.bento__more:hover .bento__stack i:nth-child(2) { transform: translateX(32px) rotate(16deg); }
.bento__more-lbl { font-family: var(--type); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hot); }
.bento__more-count { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--cream); margin: .15rem 0; }
.bento__more-sub { font-family: var(--hand); font-size: .9rem; color: rgba(240,231,206,.7); }
@media (max-width: 800px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 40vw; grid-template-areas: "a a" "a a" "b c" "b g" "d e" "d e" "f f" "h i" "h i" "j j"; }
  .bento__more { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bento__stack { grid-row: auto; margin-bottom: .4rem; }
}

/* ===== ALBUM: every photo, laid out like prints on a light table ===== */
.lighttable { position: fixed; inset: 0; z-index: 415; background: rgba(6,8,6,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.lighttable.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lighttable__inner { width: min(1320px, 94vw); margin: 0 auto; padding: 5rem 0 6rem; transform: translateY(24px); transition: transform .6s cubic-bezier(.2,.9,.2,1); }
.lighttable.is-open .lighttable__inner { transform: none; }
.lighttable__close { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(217,182,121,.55); background: rgba(12,16,11,.8); color: var(--gold-hot); display: grid; place-items: center; cursor: none; }
.lighttable__close::before { content: "×"; font-family: var(--serif); font-size: 1.9rem; line-height: 1; margin-top: -3px; }
.lighttable__head { text-align: center; margin-bottom: 3rem; }
.lighttable__lbl { font-family: var(--type); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage-warm); }
.lighttable__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--cream); margin: .5rem 0 .4rem; font-variation-settings: "opsz" 144, "SOFT" 80; }
.lighttable__note { font-family: var(--hand); color: var(--sage-warm); font-size: 1.05rem; }
.lighttable__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; margin-top: 1.6rem; }
.lighttable__chip { background: none; border: 1px solid rgba(217,182,121,.35); color: rgba(240,231,206,.8); font-family: var(--type); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; padding: .5rem .85rem; border-radius: 999px; cursor: none; transition: background .3s, color .3s, border-color .3s; }
.lighttable__chip small { font-family: var(--hand); font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--sage-warm); margin-left: .35rem; }
.lighttable__chip:hover { border-color: var(--gold-hot); color: var(--cream); }
.lighttable__chip[aria-selected="true"] { background: var(--gold-hot); border-color: var(--gold-hot); color: var(--ink); }
.lighttable__chip[aria-selected="true"] small { color: var(--ink); }
.lighttable__grid { columns: 4 240px; column-gap: 1.2rem; }
.lighttable__print { display: block; width: 100%; margin: 0 0 1.2rem; padding: 8px 8px 10px; background: #efe6d2; border: none; cursor: none; break-inside: avoid; transform: rotate(var(--r, 0deg)); box-shadow: 0 16px 30px -14px rgba(0,0,0,.85); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.lighttable__print img { display: block; width: 100%; height: auto; }
.lighttable__print:hover, .lighttable__print:focus-visible { transform: rotate(0) scale(1.03); box-shadow: 0 26px 44px -14px rgba(0,0,0,.95), 0 0 0 2px rgba(217,182,121,.6); z-index: 2; position: relative; }
.rite-photo__pullquote { margin-top: 5rem; max-width: 720px; font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80; border-left: 3px solid var(--terracotta); padding-left: 2rem; position: relative; }
.rite-photo__pullquote strong { color: var(--gold-hot); font-family: var(--serif); font-weight: 400; }
@media (max-width: 800px) { .rite-photo__spread { grid-template-columns: 1fr; } .photo-still.a, .photo-still.b { transform: none; } }

/* ===== RITE III — FILM · FORCED HORIZONTAL SCROLL — deep cinema wine ===== */
.hscroll {
  /* Height is set by JS to exactly match the track length (fallback below) */
  height: 300vh; position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(91, 20, 20, .3), transparent 55%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(107, 79, 42, .18), transparent 55%),
    linear-gradient(180deg, #3d1e14 0%, #1a0c08 50%, var(--void) 100%);
}
.hscroll__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hscroll__pin::before {
  content: ""; position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 60%, transparent 100%);
  background:
    radial-gradient(ellipse at 20% 30%, rgba(184,150,96,.08), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(91,20,20,.15), transparent 60%);
  z-index: 1;
}
/* ambient decor pinned inside the film section — keeps it alive while scrolling */
.hscroll__pin .hscroll__ambient {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.hscroll__pin .hscroll__ambient .rune-drift {
  position: absolute; opacity: .35;
  animation: driftFloat 12s ease-in-out infinite alternate;
}
.hscroll__pin .hscroll__ambient .rune-drift.r1 { top: 10%; left: 4%; color: var(--gold-hot); }
.hscroll__pin .hscroll__ambient .rune-drift.r2 { top: 20%; right: 6%; color: var(--gold-hot); animation-delay: -4s; }
.hscroll__pin .hscroll__ambient .rune-drift.r3 { bottom: 15%; left: 8%; color: var(--sage-warm); animation-delay: -8s; }
.hscroll__pin .hscroll__ambient .rune-drift.r4 { bottom: 12%; right: 10%; color: var(--sage-warm); animation-delay: -2s; }
@keyframes driftFloat {
  from { transform: translate(0,0); }
  to   { transform: translate(20px, -14px); }
}

/* ============ TRANSITION BAND — replaces rune-sep with grass, flowers, paper scraps ============ */
.tband {
  position: relative;
  z-index: 6;
  pointer-events: none;
  margin: -6rem 0;
  padding: 4rem 0;
  overflow: visible;
  height: 220px;
  background: transparent !important;
}
/* ===== SECTION BREAKS: layered rows of runes drifting, glowing and fading, no hard line ===== */
.tband--layered { position: relative; z-index: 6; pointer-events: none; height: 190px; margin: -5.5rem 0; padding: 0; overflow: visible; background: transparent !important; }
.tband--layered .tband__runes { position: absolute; left: -8%; right: -8%; top: var(--t, 50%); display: flex; justify-content: space-between; align-items: center; padding: 0; transform: translate(0, -50%); animation: runeDrift var(--dur, 40s) ease-in-out infinite alternate; }
.tband--layered .r1 { --t: 26%; --dur: 46s; opacity: .55; }
.tband--layered .r2 { --t: 50%; --dur: 34s; opacity: .9; animation-direction: alternate-reverse; }
.tband--layered .r3 { --t: 76%; --dur: 58s; opacity: .45; }
.tband--layered .r1 svg { width: 12px; height: 19px; }
.tband--layered .r2 svg { width: 18px; height: 28px; }
.tband--layered .r3 svg { width: 10px; height: 16px; }
.tband--layered .tband__runes svg { animation: runeGlowSubtle 16s ease-in-out infinite; }
.tband--layered .tband__runes svg:nth-child(3n)   { animation-delay: -4s;  animation-duration: 19s; }
.tband--layered .tband__runes svg:nth-child(4n+1) { animation-delay: -9s;  animation-duration: 13s; }
.tband--layered .tband__runes svg:nth-child(5n+2) { animation-delay: -13s; animation-duration: 22s; }
.tband--layered .tband__runes svg:nth-child(7n)   { animation-delay: -6s;  animation-duration: 11s; }
.tband--layered .r1 svg:nth-child(odd) { transform: translateY(-9px); }
.tband--layered .r3 svg:nth-child(even) { transform: translateY(7px); }
@keyframes runeDrift { from { transform: translate(-2.5%, -50%); } to { transform: translate(2.5%, -50%); } }
@media (prefers-reduced-motion: reduce) { .tband--layered .tband__runes, .tband--layered .tband__runes svg { animation: none; } }
/* grass base — silhouette across the bottom edge, blades sway individually */
.tband__grass {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 90px;
  color: var(--moss);
  opacity: .7;
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.tband__grass svg { width: 100%; height: 100%; display: block; }
.tband__grass .blade { animation: bladeSway 4s ease-in-out infinite alternate; }
@keyframes bladeSway {
  from { transform: rotate(-4deg) scaleY(1); }
  to   { transform: rotate(5deg) scaleY(1.03); }
}
/* flowers dotting the transition — appear/bloom on scroll into view */
.tband__flower {
  position: absolute;
  color: var(--terracotta);
  opacity: 0;
  transform: translateY(20px) scale(.6);
  transition: opacity 1.2s cubic-bezier(.2,.9,.2,1), transform 1.2s cubic-bezier(.2,.9,.2,1);
  z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.tband.is-in .tband__flower { opacity: .85; transform: translateY(0) scale(1); }
.tband.is-in .tband__flower.f-a { transition-delay: .1s; }
.tband.is-in .tband__flower.f-b { transition-delay: .3s; }
.tband.is-in .tband__flower.f-c { transition-delay: .5s; }
.tband.is-in .tband__flower.f-d { transition-delay: .7s; }
.tband.is-in .tband__flower.f-e { transition-delay: .9s; }
.tband.is-in .tband__flower.f-f { transition-delay: 1.1s; }
.tband__flower .rose-petals { animation: rosePulse 6s ease-in-out infinite; }
@keyframes rosePulse { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06) rotate(2deg); } }
/* paper scraps drifting */
@keyframes paperDrift {
  from { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  to   { transform: translate(8px, -6px) rotate(calc(var(--r, 0deg) + 3deg)); }
}
/* small tuck of runes glowing at the top edge for the mystical thread */
/* runes-only divider: the rune line sits in the middle of the band as the section break */
.tband--runes-only { height: 160px; }
.tband--runes-only .tband__runes { top: 50%; transform: translateY(-50%); }
.tband--runes-only .tband__runes svg { opacity: .35; }
.tband__runes {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(1rem, 5vw, 4rem);
  z-index: 5;
}
.tband__runes svg {
  width: 18px; height: 28px;
  color: var(--sage-warm);
  opacity: .22;
  animation: runeGlowSubtle 22s ease-in-out infinite;
}
.tband__runes svg:nth-child(1)  { animation-delay:  0s; }
.tband__runes svg:nth-child(2)  { animation-delay: 1.4s; }
.tband__runes svg:nth-child(3)  { animation-delay: 2.8s; }
.tband__runes svg:nth-child(4)  { animation-delay: 4.2s; }
.tband__runes svg:nth-child(5)  { animation-delay: 5.6s; }
.tband__runes svg:nth-child(6)  { animation-delay: 7s; }
.tband__runes svg:nth-child(7)  { animation-delay: 8.4s; }
.tband__runes svg:nth-child(8)  { animation-delay: 9.8s; }
.tband__runes svg:nth-child(9)  { animation-delay: 11.2s; }
.tband__runes svg:nth-child(10) { animation-delay: 12.6s; }
.tband__runes svg:nth-child(11) { animation-delay: 14s; }
.tband__runes svg:nth-child(12) { animation-delay: 15.4s; }

/* ============ RUNE SEPARATOR — invisible container, just runes stretched full-width ============ */
.rune-sep {
  padding: 3rem 0;         /* space that lets sections breathe past each other */
  margin: -4rem 0;          /* pulls surrounding sections into each other */
  z-index: 6;
  pointer-events: none;
  background: transparent !important;
  border: none !important;
  display: block;
  position: relative;
}
.rune-sep__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem clamp(1.5rem, 5vw, 4rem);
  width: 100%;
  background: transparent;
}
.rune-sep__row + .rune-sep__row { display: none; }  /* only one row per separator */
.rune-sep--triple .rune-sep__row + .rune-sep__row { display: none; }
.rune-sep__row svg {
  width: 20px; height: 30px;
  color: var(--sage-warm);
  opacity: .25;
  animation: runeGlowSubtle 22s ease-in-out infinite;
  flex-shrink: 0;
  filter: drop-shadow(0 0 0 transparent);
}
@keyframes runeGlowSubtle {
  0%, 90%, 100% { opacity: .18; filter: drop-shadow(0 0 0 transparent); color: var(--sage-warm); }
  45% { opacity: .85; filter: drop-shadow(0 0 12px var(--gold-hot)); color: var(--gold-hot); }
}
.rune-sep__row svg:nth-child(1)  { animation-delay:  0s; }
.rune-sep__row svg:nth-child(2)  { animation-delay: 1.4s; }
.rune-sep__row svg:nth-child(3)  { animation-delay: 2.8s; }
.rune-sep__row svg:nth-child(4)  { animation-delay: 4.2s; }
.rune-sep__row svg:nth-child(5)  { animation-delay: 5.6s; }
.rune-sep__row svg:nth-child(6)  { animation-delay: 7.0s; }
.rune-sep__row svg:nth-child(7)  { animation-delay: 8.4s; }
.rune-sep__row svg:nth-child(8)  { animation-delay: 9.8s; }
.rune-sep__row svg:nth-child(9)  { animation-delay: 11.2s; }
.rune-sep__row svg:nth-child(10) { animation-delay: 12.6s; }
.rune-sep__row svg:nth-child(11) { animation-delay: 14.0s; }
.rune-sep__row svg:nth-child(12) { animation-delay: 15.4s; }
.rune-sep__row svg:nth-child(13) { animation-delay: 16.8s; }
.rune-sep__row svg:nth-child(14) { animation-delay: 18.2s; }
.rune-sep__row svg:nth-child(15) { animation-delay: 19.6s; }
.rune-sep__row svg:nth-child(16) { animation-delay: 21.0s; }
.hscroll__track { display: flex; align-items: center; gap: 3rem; padding: 0 8vw; will-change: transform; position: relative; z-index: 2; }
.hscroll__intro { flex: 0 0 auto; width: min(560px, 80vw); }
.hscroll__intro .chapter__label { color: var(--sage-warm); }
.hscroll__intro h2 { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -0.02em; color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; margin-bottom: 1.5rem; position: relative; display: inline-block; }
.hscroll__intro h2 em { color: var(--sage-warm); font-family: var(--book); font-style: italic; }
.hscroll__intro p { font-family: var(--book); font-size: 1.1rem; color: rgba(240,231,206,.85); line-height: 1.7; max-width: 44ch; }

.frame {
  flex: 0 0 auto;
  width: clamp(320px, 40vw, 520px); aspect-ratio: 16/9;
  background: linear-gradient(160deg, var(--forest), var(--ink));
  border: 1px solid rgba(169,175,140,.2);
  position: relative; overflow: hidden;
  border-radius: 3px;
  cursor: none;
  transition: transform .4s;
}
.frame:hover { transform: scale(1.02); }
.frame::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(10,13,10,.85) 8px 12px, transparent 12px 20px); z-index: 2; }
.frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(10,13,10,.85) 8px 12px, transparent 12px 20px); z-index: 2; }
.frame__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(240,231,206,.9); color: var(--void); display: grid; place-items: center; opacity: 0; transition: opacity .35s; z-index: 3; }
.frame:hover .frame__play { opacity: 1; }
.frame__play::before { content: ""; width: 0; height: 0; border-left: 14px solid var(--void); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.frame__cap { position: absolute; inset: auto 0 0; z-index: 4; padding: 1.5rem 1.4rem .8rem; background: linear-gradient(0deg, rgba(10,13,10,.85), transparent); color: var(--cream); }
.frame__cap .tag { font-family: var(--type); letter-spacing: .16em; font-size: .68rem; color: var(--gold-hot); display: block; margin-bottom: .3rem; text-transform: uppercase; }
.frame__cap h3, .frame__cap h4 { font-family: var(--serif); font-style: italic; font-size: 1.1rem; font-variation-settings: "opsz" 144, "SOFT" 60; }
.frame__note { position: absolute; top: 22px; left: 12px; z-index: 3; font-family: var(--hand); color: rgba(240,231,206,.55); font-size: .78rem; }
/* Real YouTube films */
.frame.yt {
  width: clamp(340px, 46vw, 640px);
  background-size: cover; background-position: center;
  filter: sepia(.18) contrast(1.05);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.frame.yt:nth-child(odd)  { transform: rotate(-1.2deg); }
.frame.yt:nth-child(even) { transform: rotate(1deg) translateY(14px); }
.frame.yt:hover { transform: rotate(0) scale(1.03); filter: none; }
.frame.yt .frame__play { opacity: .9; }
.frame.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 6; }
.frame.yt.is-playing .frame__play, .frame.yt.is-playing .frame__cap { display: none; }
.frame.yt.is-playing { filter: none; transform: none; }

.hscroll__outro { flex: 0 0 auto; width: min(440px, 80vw); text-align: center; }
.hscroll__outro .chapter__cta { color: var(--gold-hot); border-color: var(--gold-hot); }
.hscroll__hint { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); z-index: 5; font-family: var(--type); letter-spacing: .3em; font-size: .68rem; color: rgba(240,231,206,.4); text-transform: uppercase; }

/* fallback for mobile — no hscroll */
@media (max-width: 800px) {
  .hscroll { height: auto; padding: 6rem 0; }
  .hscroll__pin { position: static; height: auto; display: block; }
  .hscroll__track { flex-direction: column; gap: 2rem; padding: 0 1rem; transform: none !important; }
  .frame { width: 100%; }
  .hscroll__intro, .hscroll__outro { width: 100%; text-align: left; }
  .hscroll__hint { display: none; }
}

/* ===== RITE IV — WEDDINGS · AGED PAPER · TYPEWRITER · ROSES ===== */
.rite-weddings {
  color: var(--ink);
  padding: 10rem 0 12rem;
  position: relative;
  overflow: hidden;
}
.rite-weddings .chapter__label { color: var(--rose); font-family: var(--type); }
.rite-weddings .chapter__title { color: var(--ink); }
.rite-weddings .chapter__title em { color: var(--rose); }
.rite-weddings .chapter__num-huge { color: var(--rose); opacity: .1; }
.rite-weddings .chapter__lede { color: var(--ink); }
.rite-weddings .chapter__lede strong { color: var(--rose); font-family: var(--serif); font-style: italic; }
.rite-weddings .chapter__cta { color: var(--rose); border-color: var(--rose); }
.rite-weddings .chapter__seals { color: rgba(20,24,18,.6); border-color: rgba(139,58,58,.28); }
.rite-weddings .chapter__seals span::before { color: var(--rose); }

.rose-decor { position: absolute; color: var(--rose); opacity: .5; z-index: 1; pointer-events: none; }
.rose-decor.rd-tl { top: 3rem; left: -2rem; width: 220px; transform: rotate(-15deg); }
.rose-decor.rd-tr { top: 8rem; right: -2rem; width: 200px; transform: rotate(20deg); opacity: .4; }
.rose-decor.rd-bl { bottom: 3rem; left: -3rem; width: 240px; transform: rotate(200deg); opacity: .42; }
.rose-decor.rd-br { bottom: 8rem; right: -1rem; width: 200px; transform: rotate(160deg); opacity: .36; }
@media (max-width: 700px) { .rose-decor { width: 150px !important; opacity: .3 !important; } }

.sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.spark { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, var(--gold-hot) 0%, transparent 60%); border-radius: 50%; opacity: 0; animation: sparkle 4s ease-in-out infinite; }
@keyframes sparkle { 0%,100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.3); } }

/* ===== WEDDING PILE: polaroids you can push around ===== */
.pile__hint { text-align: center; margin: 3.5rem 0 0; font-family: var(--type); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-warm); }
.pile { position: relative; height: clamp(620px, 78vh, 860px); margin-top: 1.2rem; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pile .polaroid { position: absolute; top: 0; left: 0; width: var(--w, 240px); cursor: grab; touch-action: none; will-change: transform; transition: box-shadow .3s; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.pile .polaroid:hover { transform: translate(var(--x), var(--y)) rotate(var(--r)) !important; box-shadow: 0 25px 60px -15px rgba(139,58,58,.45); }
.pile .polaroid.is-dragging { cursor: grabbing; box-shadow: 0 40px 70px -18px rgba(0,0,0,.45); transition: none; }
.pile .polaroid.is-dropping { transition: transform .8s cubic-bezier(.2,.9,.2,1), box-shadow .3s; }
.pile .polaroid__img { background: #d9ccb4; }
.pile .polaroid__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.pile .polaroid__cap { font-size: .78rem; }
.polaroid__open { position: absolute; right: .55rem; bottom: .55rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(20,24,18,.35); background: #FBF4E3; color: rgba(20,24,18,.75); font-size: 1rem; line-height: 1; display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s, background .25s; cursor: pointer; }
.pile .polaroid:hover .polaroid__open, .pile .polaroid.is-picked .polaroid__open, .polaroid__open:focus-visible { opacity: 1; transform: scale(1); }
.polaroid__open:hover { background: var(--gold-hot); color: var(--ink); }
@media (hover: none) { .polaroid__open { opacity: .9; transform: scale(1); } }
@media (max-width: 700px) { .pile { height: 980px; } }

/* ===== TINCTURE: the chosen bottle comes to centre stage ===== */
.tincture { position: fixed; inset: 0; z-index: 430; display: grid; place-items: center; padding: 3vh 4vw; background: rgba(4,3,2,.84); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.tincture.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.tincture__panel { position: relative; display: grid; grid-template-columns: auto minmax(260px, 360px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-height: 94vh; transform: translateY(30px) scale(.94); transition: transform .6s cubic-bezier(.2,.9,.2,1.15); }
.tincture.is-open .tincture__panel { transform: none; }
.tincture__bottle img { display: block; height: min(72vh, 620px); width: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(217,182,121,.35)); animation: tinctureFloat 5s ease-in-out infinite; }
@keyframes tinctureFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.tincture__info { padding: 1.6rem 1.7rem 1.5rem; background: linear-gradient(160deg, rgba(27,37,25,.96), rgba(12,16,11,.96)); border: 1px solid rgba(217,182,121,.5); border-radius: 4px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.8); position: relative; }
.tincture__info .bottle__badge { position: absolute; top: -.8rem; left: 1.4rem; }
.tincture__info .shelf__name { font-size: .78rem; }
.tincture__info .price { display: block; font-family: var(--serif); font-style: italic; font-size: 1.7rem; color: var(--gold-hot); margin-bottom: .4rem; }
.tincture__info .bottle__list { margin: .8rem 0 1.2rem; text-align: left; }
.tincture__info .bottle__note { margin: -.3rem 0 1.2rem; }
.tincture__cta { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold-hot); border-bottom: 1px solid currentColor; background: none; }
.tincture__close { position: absolute; top: -.5rem; right: -.5rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(217,182,121,.5); color: var(--gold-hot); display: grid; place-items: center; z-index: 2; background: rgba(12,16,11,.9); }
.tincture__close::before { content: "×"; font-family: var(--serif); font-size: 1.7rem; line-height: 1; margin-top: -3px; }
@media (max-width: 760px) {
  .tincture__panel { grid-template-columns: 1fr; justify-items: center; overflow-y: auto; gap: 1rem; }
  .tincture__bottle img { height: 34vh; }
  .tincture__close { top: 0; right: 0; }
}
.lightbox { position: fixed; inset: 0; z-index: 420; background: rgba(6,8,6,.94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.lightbox__fig img { max-width: 100%; max-height: 84vh; object-fit: contain; background: #FBF4E3; padding: 10px 10px 10px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.8); }
.lightbox__fig figcaption { font-family: var(--type); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-warm); }
.lightbox__nav { background: none; border: none; color: var(--cream); font-family: var(--serif); font-size: 3rem; line-height: 1; opacity: .7; }
.lightbox__nav:hover { opacity: 1; color: var(--gold-hot); }
.lightbox__close { position: absolute; top: 1.2rem; right: 1.2rem; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(217,182,121,.5); background: none; color: var(--gold-hot); display: grid; place-items: center; }
.lightbox__close::before { content: "×"; font-family: var(--serif); font-size: 1.8rem; line-height: 1; margin-top: -3px; }

.polaroid { position: absolute; padding: .8rem .8rem 3rem; background: #FBF4E3; box-shadow: 0 15px 40px -10px rgba(139, 58, 58, .28), 0 0 0 1px rgba(20,24,18,.06); transition: transform .5s cubic-bezier(.2,.9,.2,1); cursor: none; }
.polaroid:hover { transform: rotate(0) scale(1.03) !important; z-index: 20; box-shadow: 0 25px 60px -15px rgba(139, 58, 58, .4); }
.polaroid__img { aspect-ratio: 3/4; background: linear-gradient(160deg, #d3c1a7, #a08867); position: relative; overflow: hidden; }
.polaroid.landscape .polaroid__img { aspect-ratio: 3/2; }
.polaroid__img .placeholder-note { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(20,24,18,.4); font-family: var(--hand); font-size: .82rem; padding: 1rem; text-align: center; }
.polaroid__cap { position: absolute; inset: auto 1rem 1rem; font-family: var(--type); font-size: .85rem; color: rgba(20,24,18,.7); text-align: center; letter-spacing: .04em; }
.polaroid__tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 90px; height: 22px; background: rgba(255, 240, 200, 0.55); box-shadow: 0 2px 6px rgba(0,0,0,.08); border: 1px solid rgba(20,24,18,.05); }

/* Wedding "typewriter" heading block */
.tw-heading {
  display: inline-block;
  padding: .6rem 1.2rem;
  background: rgba(255,255,255,.4);
  border: 1px dashed var(--rose);
  font-family: var(--type);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
  transform: rotate(-1deg);
  margin-bottom: 2rem;
}

/* ===== RITE V — DESIGN · GREENHOUSE + BIRD IN CAGE ===== */
.rite-design {
  background:
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(107,115,85,.35), transparent 55%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(46,58,41,.5), transparent 55%),
    linear-gradient(180deg, var(--sage) 0%, var(--moss) 100%);
  color: var(--cream);
  position: relative;
}
.rite-design__vines-top { position: absolute; top: 0; left: 0; right: 0; height: 200px; overflow: hidden; pointer-events: none; color: var(--forest); opacity: .6; z-index: 2; }
.rite-design__vines-top svg { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; }

/* The bird in the cage — the crown jewel of this section */
.birdcage {
  position: absolute;
  top: 8rem; right: 4rem;
  width: 180px; height: 260px;
  z-index: 3;
  pointer-events: none;
  color: var(--cream);
}
.birdcage__cage { width: 100%; height: 100%; opacity: .55; }
.bird {
  position: absolute; top: 40%; left: 30%;
  width: 40px; height: 40px;
  color: var(--gold-hot);
  animation: birdMove 12s ease-in-out infinite;
}
.bird svg { width: 100%; height: 100%; }
.bird .wing { transform-origin: center; animation: birdFlap .28s ease-in-out infinite alternate; }
.bird .wing.r { animation-delay: -.14s; }
@keyframes birdFlap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.35); }
}
@keyframes birdMove {
  0%   { top: 40%; left: 30%; transform: rotate(0); }
  15%  { top: 25%; left: 55%; transform: rotate(15deg); }
  35%  { top: 45%; left: 60%; transform: rotate(-8deg); }
  55%  { top: 55%; left: 25%; transform: rotate(5deg); }
  75%  { top: 30%; left: 40%; transform: rotate(-12deg); }
  100% { top: 40%; left: 30%; transform: rotate(0); }
}
@media (max-width: 900px) { .birdcage { width: 120px; height: 180px; top: 4rem; right: 1rem; } }

.rite-design__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2rem); margin-top: 5rem; }
.design-card { padding: 2rem 1.8rem 2rem; background: rgba(10, 13, 10, 0.28); border: 1px solid rgba(240,231,206,.18); border-radius: 3px; position: relative; transition: transform .4s, background .4s, border-color .4s; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.design-card:hover { transform: translateY(-4px); background: rgba(10,13,10,.4); border-color: var(--gold-hot); }
.design-card--wide { grid-column: 1 / -1; min-height: 300px; background: rgba(10,13,10,.4); }
.design-card--tall { grid-row: span 2; }
.design-card__num { font-family: var(--serif); font-style: italic; font-size: 3rem; line-height: .9; color: var(--sage-warm); font-variation-settings: "opsz" 144, "SOFT" 80; margin-bottom: 1rem; }
.design-card h3 { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 70; margin-bottom: .8rem; }
.design-card p { font-family: var(--book); color: rgba(240,231,206,.75); font-size: .95rem; line-height: 1.55; }
.design-card__mark { position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; color: var(--sage-warm); opacity: .55; }
.design-card__tag { font-family: var(--type); letter-spacing: .14em; font-size: .74rem; color: var(--sage-warm); text-transform: uppercase; }
.design-card__handdrawn { background: radial-gradient(circle at 30% 30%, rgba(232,205,184,.15), transparent 55%), linear-gradient(140deg, var(--clay), var(--terracotta) 60%, #4a2a1e); border-color: transparent; color: var(--cream); }
.design-card__handdrawn h3 { color: var(--cream); }
.design-card__handdrawn p { color: rgba(240,231,206,.9); }
/* ===== DESIGN CARDS: frosted glass so the plates behind soften right down ===== */
.rite-design .design-card { background: linear-gradient(160deg, rgba(20,26,19,.62), rgba(8,11,8,.72)); border: 1px solid rgba(240,231,206,.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.02); z-index: 5; }
.rite-design .design-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%); }
.rite-design .design-card:hover { background: linear-gradient(160deg, rgba(24,32,22,.72), rgba(8,11,8,.8)); }
.rite-design .design-card__handdrawn { background: radial-gradient(circle at 30% 30%, rgba(232,205,184,.18), transparent 55%), linear-gradient(140deg, rgba(122,74,50,.78), rgba(139,58,42,.72) 60%, rgba(74,42,30,.82)); border-color: rgba(232,205,184,.22); }
.rite-design .design-card--wide { background: linear-gradient(160deg, rgba(20,26,19,.66), rgba(8,11,8,.76)); }
/* hand drawing a mark, inside the hand-drawn logos card */
.hd-draw { display: block; width: 100%; max-width: 290px; height: auto; margin: 1.6rem auto 0; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .hd-hand { display: none; } }
/* hover (or tap) a design card: the details slide up over it */
.rite-design .design-card { cursor: none; outline: none; min-height: 320px; }
.dc-more { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: safe center; overflow: hidden auto; scrollbar-width: none; padding: 1.3rem 1.7rem;
  background: linear-gradient(160deg, rgba(14,19,13,.94), rgba(6,8,6,.96)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(217,182,121,.55); transform: translateY(101%); transition: transform .55s cubic-bezier(.2,.9,.2,1); }
.rite-design .design-card:hover .dc-more, .rite-design .design-card:focus-visible .dc-more, .rite-design .design-card:focus-within .dc-more, .rite-design .design-card.is-open .dc-more { transform: none; }
.dc-more__lbl { font-family: var(--type); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-warm); margin-bottom: .6rem; }
.dc-more__from { font-family: var(--hand); font-size: 1rem; color: rgba(240,231,206,.7); }
.dc-more__price { font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; color: var(--gold-hot); font-variation-settings: "opsz" 144, "SOFT" 80; margin-bottom: .6rem; }
.dc-more__price--ask { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.dc-more ul { list-style: none; padding: 0; margin: 0 0 .7rem; }
.dc-more li { position: relative; padding: .26rem 0 .26rem 1.3rem; font-family: var(--book); font-size: .92rem; color: rgba(240,231,206,.9); border-top: 1px dashed rgba(240,231,206,.12); }
.dc-more li:first-child { border-top: none; }
.dc-more li::before { content: "✧"; position: absolute; left: 0; top: .3rem; color: var(--gold-hot); font-size: .8rem; }
.dc-more__note { font-family: var(--type); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-warm); opacity: .8; }
.dc-more__cta { align-self: flex-start; margin-top: .7rem; background: none; border: none; padding: 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold-hot); border-bottom: 1px solid currentColor; cursor: none; }
.design-card--wide .dc-more { padding-left: clamp(1.8rem, 6vw, 5rem); }
.design-card__handdrawn::after { content: "hand-drawn"; position: absolute; top: 1rem; right: -2rem; transform: rotate(45deg); background: var(--wine); color: var(--cream); font-family: var(--type); letter-spacing: .16em; font-size: .7rem; padding: .3rem 3rem; text-transform: uppercase; }
@media (max-width: 700px) { .rite-design__grid { grid-template-columns: 1fr; } .design-card--tall { grid-row: auto; } }

/* ===== GRIMOIRE (bundle) with pentagram ===== */
.grimoire { padding: 12rem 0; text-align: center; position: relative; background: radial-gradient(ellipse at center, rgba(139, 58, 58, .16), transparent 60%), linear-gradient(180deg, var(--moss) 0%, var(--void) 100%); }
.grimoire__circle { width: min(680px, 82vw); aspect-ratio: 1; margin: 0 auto 3rem; position: relative; color: var(--sage-warm); }
.grimoire__circle svg { width: 100%; height: 100%; animation: slowspin 90s linear infinite; }
@keyframes slowspin { to { transform: rotate(360deg); } }
.grimoire__inner { position: absolute; inset: 0; display: grid; place-items: center; padding: 4rem; }
.grimoire h2 { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 5vw, 4rem); line-height: .95; color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; max-width: 14ch; }
.grimoire h2 em { color: var(--gold-hot); font-family: var(--book); }
.grimoire p { max-width: 42ch; margin: 1.5rem auto 2rem; color: rgba(240,231,206,.78); font-family: var(--book); font-style: italic; font-size: 1.05rem; }
.grimoire__cta { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.8rem; background: var(--terracotta); color: var(--cream); border-radius: 999px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; transition: background .3s, letter-spacing .3s; }
.grimoire__cta:hover { background: var(--clay); letter-spacing: .03em; }

/* ===== WHISPERS (reviews) ===== */
.whispers { padding: 10rem 0; background: radial-gradient(ellipse 50% 40% at 20% 30%, rgba(139, 58, 58, .28), transparent 60%), radial-gradient(ellipse 40% 40% at 80% 70%, rgba(184, 150, 96, .12), transparent 60%), linear-gradient(180deg, #241a0b 0%, #1a1420 50%, #14101a 100%); position: relative; }
.whispers__head { text-align: center; margin-bottom: 5rem; position: relative; z-index: 3; }
@media (max-width: 1400px) { .whisper-tarot { opacity: .35 !important; width: 90px !important; } }
@media (max-width: 1100px) { .whisper-tarot { display: none; } }
.whispers__head .lbl { display: block; margin-bottom: 1rem; }
.whispers__head h2 { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 4rem); color: var(--cream); max-width: 18ch; margin: 0 auto; font-variation-settings: "opsz" 144, "SOFT" 80; }
.whispers__viewport { position: relative; z-index: 3; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; padding: 2.5rem 0 1.5rem; touch-action: pan-y; }
.whispers__grid { display: flex; align-items: flex-start; gap: clamp(1.5rem, 3vw, 3rem); will-change: transform; margin-left: calc(-1 * clamp(130px, 13vw, 220px)); }
.whispers__grid .whisper { flex: 0 0 clamp(270px, 24vw, 380px); }
@media (max-width: 700px) { .whispers__grid .whisper { flex-basis: 82%; } }
.whispers__grid.is-sliding { transition: transform .7s cubic-bezier(.45,.05,.2,1); }
.whispers__controls { position: relative; z-index: 6; width: 100vw; margin: 1.5rem 0 0 calc(50% - 50vw); padding: 0 clamp(1.5rem, 5vw, 5rem); display: flex; justify-content: center; gap: 1.4rem; }
.whispers__btn { width: 62px; height: 62px; padding: 0; background: none; border: none; color: var(--gold-hot); transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s, filter .3s; filter: drop-shadow(0 0 6px rgba(217,182,121,.25)); }
.whispers__btn svg { width: 100%; height: 100%; overflow: visible; }
.whispers__btn:hover { color: var(--cream); filter: drop-shadow(0 0 14px rgba(217,182,121,.6)); }
#whispersPrev:hover { transform: rotate(-8deg) translateX(-3px); }
#whispersNext:hover { transform: rotate(8deg) translateX(3px); }
.whisper { position: relative; cursor: none; transition: transform .6s, filter .6s; padding: 1.4rem 1.5rem 1.3rem; border-left: 1px dashed rgba(217,182,121,.28); }
.whisper__stars { color: var(--gold-hot); letter-spacing: .18em; font-size: .8rem; margin-bottom: .5rem; font-family: var(--sans); }
.whisper__body { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.55; color: var(--cream); opacity: .32; transition: opacity .5s; font-variation-settings: "opsz" 60, "SOFT" 80; }
.whisper__body::before { content: "\201C "; color: var(--sage-warm); }
.whisper__body::after { content: " \201D"; color: var(--sage-warm); }
.whisper__name { margin-top: .8rem; font-family: var(--caps); font-variant: small-caps; letter-spacing: .18em; font-size: .74rem; color: var(--sage-warm); }
.whisper:hover .whisper__body { opacity: 1; }
.whisper:hover { transform: translateY(-6px) rotate(0) !important; z-index: 5; }
.whisper.w1 { transform: rotate(-1.5deg); }
.whisper.w2 { transform: rotate(1deg); margin-top: 1.6rem; }
.whisper.w3 { transform: rotate(-.6deg); margin-top: .8rem; }
.whisper.w4 { transform: rotate(1.4deg); }
.whisper.w5 { transform: rotate(-1.2deg); margin-top: 1.4rem; }
.whisper.w6 { transform: rotate(.8deg); margin-top: .6rem; }
.whispers .whisper__body { opacity: .7; }
.whispers .whisper:hover .whisper__body { opacity: 1; }
@media (max-width: 1100px) { .whisper.w2, .whisper.w3, .whisper.w5, .whisper.w6 { margin-top: 0; } }
@media (max-width: 900px) { .whispers__grid { min-height: auto; } .whisper { max-width: none; } .whisper__body { opacity: 1; } }

/* ===== KEEPER ===== */
.keeper { padding: 10rem 0; background: radial-gradient(ellipse 60% 40% at 30% 20%, rgba(232, 205, 184, .3), transparent 55%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(184, 150, 96, .25), transparent 55%), linear-gradient(180deg, #14101a 0%, #4a3a2e 50%, #6b5f47 100%); color: var(--cream); }
.keeper__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.keeper__portrait { aspect-ratio: 4/5; position: relative; overflow: hidden; border-radius: 3px; background: linear-gradient(160deg, var(--forest), var(--void)); transform: rotate(-2deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5), 0 0 0 8px var(--paper-warm), 0 0 0 9px rgba(20,24,18,.15); }
.keeper__portrait-img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; mix-blend-mode: normal; }
.summon-circle {
  position: absolute; inset: 5%;
  z-index: 1;
  width: 90%; height: 90%;
  animation: summonSpin 200s linear infinite;
  filter: drop-shadow(0 0 20px rgba(217, 182, 121, .5));
}
@keyframes summonSpin { to { transform: rotate(360deg); } }
.keeper__portrait::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10, 13, 10, .6) 80%);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.keeper__portrait .placeholder-note { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(20,24,18,.6); font-family: var(--hand); font-size: 1rem; padding: 2rem; text-align: center; }
.keeper__body h2 { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 4rem); color: var(--cream); margin-bottom: 1.5rem; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; }
.keeper__body p { font-family: var(--book); font-size: 1.06rem; color: rgba(240,231,206,.9); margin-bottom: 1.1em; max-width: 52ch; line-height: 1.7; }
.keeper__body em { color: var(--gold-hot); font-style: italic; }
/* hand-drawn tree reaching in from the right, with the birdcage hanging off a branch */
.keeper { position: relative; }
.keeper > .container { position: relative; z-index: 1; }
/* shift Josh's portrait + text left, and stop it short of the tree, so the branch and cage have room to breathe */
@media (min-width: 901px) {
  .keeper > .container { width: min(1180px, calc(100vw - clamp(1.5rem, 5vw, 6rem) - min(30vw, 420px))); margin: 0 auto 0 clamp(1.5rem, 5vw, 6rem); }
  .keeper__grid { gap: clamp(2rem, 4vw, 4.5rem); }
}
.keeper__tree { position: absolute; right: 0; top: 5.5rem; z-index: 0; width: min(34vw, 560px); color: var(--paper-warm); pointer-events: none; }
.keeper__tree svg { display: block; width: 100%; height: auto; overflow: visible; opacity: .75; }
.keeper__tree .tree__branch-a { transform-box: view-box; transform-origin: 566px 190px; animation: branchSway 8s ease-in-out infinite; }
.keeper__tree .tree__branch-b { transform-box: view-box; transform-origin: 560px 650px; animation: branchSway 9.5s ease-in-out infinite reverse; }
@keyframes branchSway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-.8deg); } }
.keeper__hang { position: absolute; left: 63.3%; top: 18.7%; width: 0; height: 0; transform-origin: 0 0; animation: cageSway 6s ease-in-out infinite; }
.keeper__string { position: absolute; left: 0; top: 0; width: 1.5px; height: 56px; transform: translateX(-50%); background: rgba(240,231,206,.6); }
.keeper__hang .birdcage { position: absolute; top: 54px; left: 0; right: auto; width: 236px; height: 340px; transform: translateX(-50%); color: var(--paper-warm); z-index: 1; }
.keeper__hang .birdcage__cage { overflow: visible; opacity: .8; }
/* a bigger bird that hops about on its perch inside the bars (bars drawn in front of it) */
.keeper__hang .birdcage__cage { position: relative; z-index: 2; }
.keeper__hang .bird { width: 34%; height: auto; aspect-ratio: 1; z-index: 1; animation: birdPerch 11s ease-in-out infinite; }
@keyframes birdPerch {
  0%   { top: 34%; left: 33%; transform: scaleX(1) rotate(0); }
  10%  { top: 34%; left: 33%; transform: scaleX(1) rotate(-4deg); }
  18%  { top: 18%; left: 36%; transform: scaleX(1) rotate(10deg); }
  28%  { top: 22%; left: 30%; transform: scaleX(-1) rotate(-6deg); }
  38%  { top: 34%; left: 31%; transform: scaleX(-1) rotate(0); }
  55%  { top: 34%; left: 31%; transform: scaleX(-1) rotate(3deg); }
  63%  { top: 16%; left: 34%; transform: scaleX(-1) rotate(-10deg); }
  73%  { top: 24%; left: 36%; transform: scaleX(1) rotate(6deg); }
  84%, 100% { top: 34%; left: 33%; transform: scaleX(1) rotate(0); }
}
@keyframes cageSway { 0%,100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }
@media (max-width: 1100px) { .keeper__tree { width: 34vw; top: 3rem; } .keeper__hang .birdcage { width: 160px; height: 230px; top: 44px; } .keeper__string { height: 46px; } }
@media (max-width: 900px) { .keeper__tree { display: none; } }
@media (prefers-reduced-motion: reduce) { .keeper__hang, .keeper__tree g { animation: none; } }
.keeper__sig { display: block; margin-top: 2rem; font-family: var(--hand); font-size: 1.8rem; color: var(--paper-warm); transform: rotate(-4deg); }
.keeper__lbl { display: block; margin-bottom: 1rem; color: var(--paper-warm); }
@media (max-width: 800px) { .keeper__grid { grid-template-columns: 1fr; } .keeper__portrait { max-width: 380px; transform: none; } }

/* ===== CARE — WITCH'S CUPBOARD — amber apothecary shift ===== */
.care {
  padding: 10rem 0 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(184, 150, 96, .35), transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(107, 79, 42, .25), transparent 55%),
    linear-gradient(180deg, #3b2d16 0%, #241a0b 100%);
  position: relative;
}
/* summoning circle behind the care heading, peeking out above the cabinet */
.care__circle { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 120px, #000 420px); mask-image: linear-gradient(180deg, transparent 0, transparent 120px, #000 420px); }
.care__circle img { position: absolute; left: 50%; top: clamp(10rem, 16vw, 16rem); width: min(1150px, 96vw); height: auto; max-width: none; opacity: .06;
  transform: translateX(-50%); animation: careCircleSpin 220s linear infinite; filter: drop-shadow(0 0 18px rgba(217,182,121,.25)); }
@keyframes careCircleSpin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .care__circle img { animation: none; } }
.care > .container { position: relative; z-index: 1; }
.care__head { text-align: center; margin-bottom: 5rem; }
.care__head .lbl { display: block; margin-bottom: 1rem; }
.care__head h2 { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 4rem); color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80; }
.care__head p { color: rgba(240,231,206,.78); max-width: 46ch; margin: 1.5rem auto 0; font-family: var(--book); }

/* ===== THE APOTHECARY SHELF (care plans) ===== */
/* keep the little hand-drawn candles, jars and moth floating over the bottom of the shelf */
.care > .decor, .care > .eng { z-index: 7; }
.shelf__hint { text-align: center; margin: 1rem 0 0; font-family: var(--type); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-warm); }
.shelf { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 2rem; }
.shelf__scene { position: relative; width: 100%; aspect-ratio: 2400 / 950; container-type: inline-size; }
.shelf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  }
.shelf__dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(8,6,4,.55); opacity: 0; transition: opacity .5s;
  }

.shelf__spot { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 0; height: 0; }
.shelf__spot:hover, .shelf__spot.is-open { z-index: 6; }
.shelf__bottle { position: absolute; left: 0; bottom: -2px; height: 6.2cqw; padding: 0; background: none; border: none; transform: translateX(-50%); transform-origin: 50% 100%; cursor: none; transition: transform .6s cubic-bezier(.2,.9,.25,1.2); }
.shelf__bottle img { display: block; height: 100%; width: auto; max-width: none; transform-origin: 50% 100%;
  animation: bottleWiggle 5.5s ease-in-out infinite, bottleGlowPulse 3.2s ease-in-out infinite; animation-delay: var(--d), var(--d); }
.shelf__spot:hover .shelf__bottle { transform: translateX(-50%) scale(1.15); }
.shelf__spot:hover .shelf__bottle img, .shelf__spot.is-open .shelf__bottle img { animation: none; filter: drop-shadow(0 12px 12px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(217,182,121,.55)); }
@keyframes bottleWiggle {
  0%, 62%, 100% { transform: rotate(0); }
  66% { transform: rotate(-5deg); } 70% { transform: rotate(4deg); } 74% { transform: rotate(-3deg); } 78% { transform: rotate(2deg); } 82% { transform: rotate(0); }
}
@keyframes bottleGlowPulse {
  0%, 100% { filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)) drop-shadow(0 0 4px rgba(217,182,121,.35)); }
  50% { filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,214,140,.95)) drop-shadow(0 0 28px rgba(217,182,121,.55)); }
}
.shelf__card { position: absolute; bottom: 0; width: min(300px, 70vw); padding: 1.3rem 1.4rem 1.2rem; background: linear-gradient(160deg, rgba(27,37,25,.97), rgba(12,16,11,.97)); border: 1px solid rgba(217,182,121,.5); border-radius: 4px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.8); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s .1s, transform .45s .1s cubic-bezier(.2,.9,.2,1), visibility 0s .5s; pointer-events: none; }
.shelf__spot.is-right .shelf__card { left: max(60px, 6cqw); }
.shelf__spot.is-left .shelf__card { right: max(60px, 6cqw); }
.shelf__card { display: none !important; }
.shelf__spot.never-show .shelf__card { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; pointer-events: auto; }
.shelf__card .bottle__badge { position: absolute; top: -.8rem; left: 1.2rem; }
.shelf__name { font-family: var(--type); font-weight: 400; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-warm); margin: 0 0 .35rem; }
.shelf__card .price { display: block; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--gold-hot); }
.shelf__card .bottle__list { margin: .8rem 0 0; text-align: left; }
@media (max-width: 800px) {
  .shelf__spot:hover .shelf__bottle, .shelf__spot.is-open .shelf__bottle { transform: translateX(-50%) scale(2.2); }
  .shelf__card { position: fixed; left: 50% !important; right: auto !important; top: auto; bottom: 1rem; transform: translate(-50%, 10px); width: min(340px, 90vw); z-index: 50; }
  .shelf__spot.is-open .shelf__card { transform: translate(-50%, 0); }
  .shelf__spot:hover:not(.is-open) .shelf__card { opacity: 0; visibility: hidden; }
}
.cupboard {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  padding: 2rem 2rem 0;
  position: relative;
}
.cupboard::after {
  /* the wooden shelf */
  content: ""; position: absolute; bottom: -30px; left: -2%; right: -2%;
  height: 40px;
  background: linear-gradient(180deg, #4b3620 0%, #2c1e10 100%);
  box-shadow: 0 4px 0 #1a1108, 0 12px 20px rgba(0,0,0,.4);
  z-index: 1;
}
.bottle {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 2rem;
  cursor: none;
  z-index: 2;
  transition: transform .5s;
}
.bottle:hover { transform: translateY(-6px); }
.bottle__glass {
  width: 180px; height: 320px;
  position: relative;
}
.bottle__glass svg { width: 100%; height: 100%; }
.bottle__glass .glow {
  position: absolute; inset: 20% 20%;
  background: radial-gradient(ellipse, currentColor 0%, transparent 60%);
  filter: blur(20px);
  opacity: .4;
  animation: bottleGlow 5s ease-in-out infinite alternate;
}
@keyframes bottleGlow { from { opacity: .3; transform: scale(.9); } to { opacity: .6; transform: scale(1.05); } }
.bottle__glass { width: 250px; height: 332px; }
.bottle__photo {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 58%, transparent 100%);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s;
}
.bottle:hover .bottle__photo { transform: rotate(-2deg) scale(1.03); filter: brightness(1.12); }
@media (max-width: 700px) { .bottle__glass { width: 210px; height: 280px; } }
.bottle.b-eye { color: var(--sage-warm); }
.bottle.b-hand { color: var(--gold-hot); }
.bottle.b-grimoire { color: var(--terracotta); }
.bottle__label {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-2deg);
  padding: .6rem .5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  width: 88%;
  text-align: center;
  border: 1px solid rgba(107, 79, 42, .5);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  z-index: 3;
}
.bottle__label h3 {
  font-family: var(--serif); font-style: italic;
  font-size: 1.1rem; color: var(--sepia);
  text-transform: none; letter-spacing: -.02em;
  margin: .3rem 0;
  font-variation-settings: "opsz" 144, "SOFT" 70;
}
.bottle__label .price {
  display: block;
  font-family: var(--hand);
  color: var(--rose); font-size: .85rem;
  text-transform: none; letter-spacing: 0;
  margin-top: .2rem;
}
.bottle__list {
  list-style: none;
  margin-top: 1.5rem;
  padding: 0;
  color: rgba(240,231,206,.8);
  font-family: var(--book); font-size: .9rem;
  max-width: 200px;
  text-align: center;
}
.bottle__list li { padding: .3rem 0; border-top: 1px dashed rgba(240,231,206,.15); }
.bottle__list li:first-child { border: none; }
.bottle__badge {
  position: absolute; top: -1rem; z-index: 5;
  background: var(--rose); color: var(--paper);
  font-family: var(--type); letter-spacing: .14em;
  font-size: .68rem; padding: .3rem .8rem;
  text-transform: uppercase;
}
@media (max-width: 900px) { .cupboard { grid-template-columns: 1fr; gap: 3rem; padding: 2rem; } .cupboard::after { display: none; } }

/* ===== INSTAGRAM ===== */
.gram { padding: 10rem 0 4rem; background: radial-gradient(ellipse 50% 40% at 20% 30%, rgba(107, 115, 85, .3), transparent 55%), radial-gradient(ellipse 40% 40% at 80% 70%, rgba(46, 58, 41, .5), transparent 55%), linear-gradient(180deg, #6b5f47 0%, var(--sage) 30%, var(--forest) 100%); }
.gram__head { text-align: center; margin-bottom: 4rem; }
.gram__head .lbl { display: block; margin-bottom: 1rem; }
.gram__head h2 { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80; margin-bottom: 1rem; }
.gram__handle { font-family: var(--type); letter-spacing: .16em; font-size: .9rem; color: var(--sage-warm); border-bottom: 1px solid var(--sage-warm); padding-bottom: .2rem; text-transform: uppercase; }
.gram__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; gap: 3px; }
.gram__tile { position: relative; overflow: hidden; background: var(--moss); cursor: none; transition: transform .4s; }
/* live Instagram posts from the worker */
.gram__tile.has-img { background-size: cover !important; background-position: center !important; filter: sepia(.12) contrast(1.03); }
.gram__tile.has-img .placeholder-note { display: none; }
.gram__tile.is-video::before { content: "▶"; position: absolute; top: .6rem; right: .7rem; z-index: 3; color: var(--paper); font-size: .8rem; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.gram__tile:hover { transform: scale(.98); z-index: 2; }
.gram__tile .placeholder-note { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--hand); color: rgba(240,231,206,.4); font-size: .78rem; text-align: center; padding: .5rem; }
.gram__tile:hover::after { content: "@ view"; position: absolute; inset: 0; background: rgba(10,13,10,.6); display: grid; place-items: center; font-family: var(--type); letter-spacing: .18em; font-size: .8rem; color: var(--gold-hot); z-index: 2; text-transform: uppercase; }
.gram__tile.t1 { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, var(--terracotta), var(--clay)); }
.gram__tile.t2 { background: linear-gradient(160deg, var(--sage), var(--moss)); }
.gram__tile.t3 { grid-row: span 2; background: linear-gradient(160deg, var(--blush), #c4926f); }
.gram__tile.t4 { grid-column: span 2; background: linear-gradient(160deg, var(--forest), var(--moss)); }
.gram__tile.t5 { background: linear-gradient(160deg, var(--rose), #4a0f0f); }
.gram__tile.t6 { background: linear-gradient(160deg, var(--sage-warm), var(--sage)); }
.gram__tile.t7 { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, var(--gold-hot), var(--gold)); }
.gram__tile.t8 { background: linear-gradient(160deg, var(--paper-deep), #8a8064); }
.gram__tile.t9 { background: linear-gradient(160deg, var(--ink), var(--forest)); }
.gram__tile.t10 { grid-column: span 2; background: linear-gradient(160deg, var(--wine), #2a0808); }
.gram__tile.t11 { background: linear-gradient(160deg, var(--moss-warm), var(--ink)); }
.gram__tile.t12 { background: linear-gradient(160deg, var(--terracotta), var(--rose)); }
@media (max-width: 900px) { .gram__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .gram__grid { grid-template-columns: repeat(2, 1fr); } .gram__tile.t1, .gram__tile.t7, .gram__tile.t4, .gram__tile.t10 { grid-column: span 2; grid-row: auto; } }

/* ===== JOURNAL: recent posts, pinned like pages torn from a field notebook ===== */
.journal { position: relative; padding: 8rem 0 9rem; }
.journal__head { text-align: center; margin-bottom: 4.5rem; }
.journal__head .lbl { display: block; margin-bottom: 1rem; }
.journal__head h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80; }
.journal__head h2 em { color: var(--gold-hot); }
.journal__note { font-family: var(--hand); color: var(--sage-warm); font-size: 1.1rem; margin-top: .6rem; }
.journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.journal__entry { position: relative; transform: rotate(var(--r)) translateY(30px); transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity 1s; }
.journal__entry.is-in { transform: rotate(var(--r)); }
.journal__entry:hover { transform: rotate(0) translateY(-8px); }
.journal__entry:nth-child(2) { margin-top: 2.5rem; }
.journal__link { display: block; color: #2e2215; background: #efe3c6; padding: 12px 12px 1.4rem; box-shadow: 0 25px 45px -20px rgba(0,0,0,.75);
  background-image: repeating-linear-gradient(0deg, transparent 0 25px, rgba(90,120,160,.16) 25px 26px), radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.5), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(140,90,40,.25), transparent 55%);
  clip-path: polygon(0 1%, 6% 0, 18% 1.2%, 33% .2%, 50% 1%, 67% 0, 84% 1%, 100% .3%, 99.4% 30%, 100% 62%, 99.2% 100%, 80% 99%, 62% 100%, 44% 98.8%, 26% 100%, 10% 99.1%, 0 100%, .6% 66%, 0 33%); }
.journal__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #cbb893; }
.journal__img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.45) saturate(.8) contrast(.95); transition: filter .6s, transform .8s cubic-bezier(.2,.8,.2,1); }
.journal__link:hover .journal__img img { filter: sepia(.05); transform: scale(1.04); }
.journal__postmark { position: absolute; right: .7rem; bottom: .7rem; width: 82px; height: 82px; border-radius: 50%; border: 2px solid rgba(150,30,28,.85); display: grid; place-items: center; text-align: center; font-family: var(--type); font-size: .6rem; letter-spacing: .12em; line-height: 1.3; color: rgba(150,30,28,.9); text-transform: uppercase; background: rgba(239,227,198,.55); transform: rotate(-12deg); padding: 0 10px; filter: url(#ink-rough); box-shadow: inset 0 0 0 4px rgba(239,227,198,.5), inset 0 0 0 5px rgba(150,30,28,.5); }
.journal__body { padding: 1.1rem .5rem 0; }
.journal__meta { font-family: var(--type); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #8a5a2b; }
.journal__body h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.4rem; line-height: 1.2; margin: .5rem 0 .6rem; color: #2a1d10; }
.journal__body p { font-family: var(--book); font-size: .98rem; line-height: 1.6; color: #4a3a26; }
.journal__more { display: inline-block; margin-top: .9rem; font-family: var(--hand); font-size: 1.05rem; color: #1f3b6b; border-bottom: 1px solid rgba(31,59,107,.4); }
.journal__pin { position: absolute; top: -10px; left: 50%; z-index: 3; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #f5c9a4, #a3372c 55%, #5c1712); box-shadow: 0 4px 6px rgba(0,0,0,.5); }
.journal__all { text-align: center; margin-top: 4rem; }
.journal__all a { font-family: var(--type); letter-spacing: .18em; font-size: .8rem; color: var(--sage-warm); border-bottom: 1px solid currentColor; padding-bottom: .2rem; text-transform: uppercase; }
@media (max-width: 900px) { .journal__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .journal__entry:nth-child(2) { margin-top: 0; } }
.gram__cta { text-align: center; margin-top: 3rem; }

/* ===== INSTAGRAM as a darkroom love letter: warm dark band that tucks behind the film ===== */
.gram.gram { position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 35% at 50% 55%, rgba(255,160,70,.08), transparent 70%),
    linear-gradient(180deg, rgba(20,15,8,0) 0, #140f08 240px, #140f08 var(--dark-h, 100%), transparent var(--dark-h, 100%)) !important; }
.promise-strip { isolation: isolate; }
.gram::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px); mask-image: linear-gradient(180deg, transparent 0, #000 240px); }
.promise-strip::before { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 220px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 220px), transparent 100%); }
.promise-strip::before { --dark-h: 100%; }
.promise-strip::before, .gram::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--dark-h, 100%); z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: screen; bottom: auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 .9  0 0 0 0 .75  0 0 0 0 .55  0 0 0 .22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.gram__head { position: relative; }
.gram__envelope { position: absolute; z-index: 8; left: clamp(1rem, 4vw, 4.5rem); top: -1.2rem; width: 250px; padding: .9rem 1rem 1.1rem; background: #efe2c3; color: #3a2a16; transform: rotate(-6deg); box-shadow: 0 18px 30px -12px rgba(0,0,0,.7); font-family: var(--type); font-size: .62rem; letter-spacing: .12em; text-align: left; display: flex; flex-direction: column; gap: .5rem;
  background-image: repeating-linear-gradient(0deg, transparent 0 17px, rgba(120,80,40,.18) 17px 18px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%); }
.gram__envelope::before { content: ""; position: absolute; top: -9px; left: 50%; width: 80px; height: 18px; transform: translateX(-50%) rotate(3deg); background: rgba(255,240,200,.55); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.gram__env-top { font-size: .56rem; letter-spacing: .2em; border-bottom: 1.5px solid #3a2a16; padding-bottom: .4rem; }
.gram__env-row b { font-weight: 400; opacity: .55; margin-right: .3rem; }
.gram__env-row i { font-family: var(--hand); font-style: normal; font-size: .95rem; letter-spacing: 0; color: #1f3b6b; }
.gram__stamp { align-self: flex-end; margin-top: .2rem; padding: .25rem .5rem; border: 2px solid rgba(160,35,30,.8); color: rgba(160,35,30,.85); font-size: .6rem; letter-spacing: .18em; transform: rotate(-9deg); border-radius: 3px; filter: url(#ink-rough); }
.gram__note { font-family: var(--hand); color: var(--sage-warm); font-size: 1.15rem; margin: -.2rem 0 1.2rem; }
/* "follow along": an unfilled, hand-drawn ticket outline */
.gram__cta .gram__ticket { position: relative; display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.9rem; background: none; border: none; color: var(--gold-hot);
  font-family: var(--type); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-1.5deg); transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s; }
.gram__ticket-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gram__ticket-line path { fill: none; stroke: rgba(217,182,121,.9); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gram__ticket-line .t2 { stroke-width: 1; opacity: .45; }
.gram__ticket-stub { position: relative; font-size: .6rem; letter-spacing: .2em; color: var(--sage-warm); padding: .15rem .9rem .15rem 0; border-right: 1.5px dashed rgba(217,182,121,.5); }
.gram__ticket-stub:last-child { padding: .15rem 0 .15rem .9rem; border-right: none; border-left: 1.5px dashed rgba(217,182,121,.5); }
.gram__ticket-main { position: relative; }
.gram__cta .gram__ticket:hover { transform: rotate(0) scale(1.04); color: var(--cream); }
.gram__ticket:hover .gram__ticket-line { filter: url(#ink-rough) drop-shadow(0 0 8px rgba(217,182,121,.45)); }
.gram__ticket:hover .gram__ticket-line .t1 { animation: ticketRedraw .9s cubic-bezier(.6,0,.3,1); stroke: var(--cream); }
@keyframes ticketRedraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 560px) { .gram__ticket-stub { display: none; } .gram__cta .gram__ticket { padding: 1rem 1.6rem; } }
@media (max-width: 900px) { .gram__envelope { left: .6rem; top: -1rem; transform: rotate(-6deg) scale(.72); transform-origin: 0 0; } }
/* ===== INSTAGRAM: two strips of old colour-negative film drifting across the page ===== */
.gram__reel { position: relative; width: 100%; overflow: hidden; overflow: clip visible; padding: 2rem 0 3rem; }
.gram__strip { position: relative; margin: 0 -4vw; padding: 48px 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .15  0 0 0 0 .05  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") 0 0 / 240px 240px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='440'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='3' seed='14'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .07  0 0 0 0 .01  0 0 0 1.5 -.55'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>") 0 0 / 700px 100%,
    radial-gradient(ellipse 30% 120% at 8% 50%, rgba(255,170,60,.28), transparent 70%),
    radial-gradient(ellipse 25% 140% at 92% 40%, rgba(90,30,0,.5), transparent 70%),
    radial-gradient(ellipse 12% 90% at 57% 0%, rgba(60,18,0,.55), transparent 70%),
    linear-gradient(180deg, #6f3510 0%, #9c5019 16%, #b0662a 50%, #985019 84%, #6b3310 100%);
  box-shadow: 0 30px 50px -25px rgba(0,0,0,.85), inset 0 0 70px rgba(35,10,0,.75), inset 0 0 0 1px rgba(20,6,0,.55); }
/* scratches, dust, fibres, burn marks, water stains and chipped edges across the whole strip */
.gram__strip::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: url("film/film-rim.svg") repeat-x 0 0 / 1200px 100%; }
.gram__strip.s2::after { transform: scaleX(-1); background-position: 430px 0; }
/* sprocket holes: rounded rectangles punched through along both edges */
.gram__strip::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    url("film/film-sprockets.svg") repeat-x 0 7px / 300px 13px,
    url("film/film-sprockets.svg") repeat-x 137px calc(100% - 7px) / 300px 13px; }
.gram__strip.s1 { transform: rotate(-2deg); z-index: 2; }
.gram__strip.s2 { transform: rotate(1.4deg); margin-top: -1rem; }
/* frames sit above the grain layer so a hovered photo shows its true colours */
.gram__track { position: relative; z-index: 5; }
.gram__track { display: flex; gap: 0; width: max-content; animation: gramDrift 95s linear infinite; }
.gram__strip.s2 .gram__track { animation-direction: reverse; animation-duration: 115s; }
.gram__reel:hover .gram__track { animation-play-state: paused; }
@keyframes gramDrift { to { transform: translateX(-50%); } }
.gram__frame { position: relative; flex: 0 0 auto; padding: 0 12px; }
/* edge printing: stock name along the top, frame numbers + arrows along the bottom */
.gram__edge { position: absolute; left: 12px; right: 12px; font-family: var(--type); font-size: .58rem; letter-spacing: .22em; color: #e9ad58; opacity: .7; text-shadow: 0 0 2px rgba(255,170,80,.45); white-space: nowrap; display: flex; justify-content: space-between; z-index: 5; }
.gram__edge.top { top: -21px; }
.gram__edge.bot { bottom: -21px; }
.gram__post { position: relative; display: block; width: clamp(190px, 17vw, 270px); aspect-ratio: 4 / 5; overflow: hidden; cursor: none; border-radius: 3px; background: #3b2210;
  box-shadow: 0 0 0 2px rgba(70,25,0,.55), inset 0 0 18px rgba(0,0,0,.4); }
.gram__post img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(.55) saturate(.8) contrast(.92) brightness(.93) hue-rotate(-8deg); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s; }
.gram__post::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .6s;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(60,20,0,.55) 100%), linear-gradient(115deg, rgba(255,150,60,.22), transparent 40%); mix-blend-mode: multiply; }
.gram__post:hover img { transform: scale(1.06); filter: none; }
.gram__post:hover::before { opacity: 0; }
.gram__age { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("film/film-frame.svg") 0 0 / 300px 380px; opacity: .9; transition: opacity .6s; }
.gram__post:hover .gram__age { opacity: 0; }
.gram__post::after { content: attr(data-caption); position: absolute; inset: auto 0 0 0; z-index: 2; padding: 2.2rem .9rem .8rem; background: linear-gradient(0deg, rgba(20,8,0,.92), transparent); color: #f6e3c2; font-family: var(--type); font-size: .66rem; letter-spacing: .06em; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gram__post:hover::after { opacity: 1; transform: none; }
.gram__post.is-video .gram__play { position: absolute; top: .6rem; right: .7rem; z-index: 3; color: #f6e3c2; font-size: .8rem; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.gram__post.is-empty { background: linear-gradient(160deg, #5a2c0e, #2a1407); }
@media (prefers-reduced-motion: reduce) { .gram__track { animation: none; } .gram__reel { overflow-x: auto; } }

.gram__cta a { font-family: var(--type); letter-spacing: .18em; font-size: .8rem; color: var(--sage-warm); border-bottom: 1px solid currentColor; padding-bottom: .2rem; text-transform: uppercase; }

/* ===== TERRITORIES ===== */
.territories { padding: 10rem 0; background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(169, 175, 140, .2), transparent 60%), linear-gradient(180deg, var(--forest) 0%, #1a2028 50%, #12181f 100%); }
.territories { position: relative; overflow: clip; }
.territories > .container { position: relative; z-index: 2; }
@media (max-width: 900px) { .territories > .vintage-img { opacity: .3 !important; width: 150px !important; height: 210px !important; } }
.territories__head { text-align: center; margin-bottom: 4rem; }
.territories__head .lbl { display: block; margin-bottom: 1rem; }
.territories__head h2 { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80; max-width: 20ch; margin: 0 auto; }
.territories__head p { color: rgba(240,231,206,.78); max-width: 46ch; margin: 1.5rem auto 0; font-family: var(--book); }
.territories__head strong { color: var(--gold-hot); font-family: var(--serif); font-style: italic; font-weight: 400; }
.compass { max-width: 900px; margin: 3rem auto 0; position: relative; padding: 3rem 2rem; border-top: 1px solid rgba(169,175,140,.25); border-bottom: 1px solid rgba(169,175,140,.25); overflow: hidden; }
.compass__rose { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; aspect-ratio: 1; color: rgba(169,175,140,.14); animation: slowspin 200s linear infinite; }
.compass__list { position: relative; z-index: 2; columns: 3; column-gap: 3rem; list-style: none; padding: 0; }
.compass__list li { padding: .5rem 0 .5rem 1.4rem; font-family: var(--book); font-size: 1rem; color: var(--cream); border-bottom: 1px dashed rgba(169,175,140,.2); position: relative; break-inside: avoid; }
.compass__list li::before { content: "☩"; position: absolute; left: 0; top: .5rem; color: var(--sage-warm); font-size: .9rem; }
.compass__remote { text-align: center; margin-top: 2.5rem; font-family: var(--hand); color: var(--sage-warm); font-size: 1.2rem; }
@media (max-width: 700px) { .compass__list { columns: 2; } }
@media (max-width: 460px) { .compass__list { columns: 1; } }

/* ===== INVOCATION ===== */
.invocation {
  min-height: 100vh; padding: 10rem 0;
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(180deg, #12181f 0%, #2a0808 50%, #0a0505 100%);
  position: relative; overflow: hidden;
}
.invocation__video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 280px); mask-image: linear-gradient(180deg, transparent 0, #000 280px); }
.invocation__video-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,5,5,.55) 20%, rgba(10,5,5,.9) 100%), linear-gradient(180deg, rgba(10,5,5,.35), rgba(10,5,5,.8));
  z-index: 3;
}
.triptych--closing { position: absolute; inset: 0; opacity: .45; filter: saturate(.85) contrast(1.05); }
.triptych--closing .triptych__col:nth-child(1) .triptych__video { filter: hue-rotate(-15deg) brightness(0.65); }
.triptych--closing .triptych__col:nth-child(2) .triptych__video { filter: brightness(0.75) contrast(1.1); }
.triptych--closing .triptych__col:nth-child(3) .triptych__video { filter: hue-rotate(15deg) brightness(0.65); }
.invocation__inner { position: relative; z-index: 6; }
.invocation__inner { max-width: 44rem; padding: 0 2rem; }
.invocation .lbl { display: block; margin-bottom: 2rem; }
.invocation h2 { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 6vw, 5.5rem); color: var(--cream); line-height: 1; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; max-width: 15ch; margin: 0 auto 2rem; letter-spacing: -0.02em; }
.invocation p { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: rgba(240,231,206,.85); max-width: 46ch; margin: 0 auto 3rem; }
.invocation em { color: var(--sage-warm); font-style: italic; }
.seal { position: relative; display: inline-grid; place-items: center; width: 220px; height: 220px; border-radius: 50%; color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 1.2rem; background: radial-gradient(circle at 40% 40%, var(--rose) 0%, var(--wine) 55%, #2a0808 100%); box-shadow: 0 12px 40px -8px rgba(91,20,20,.7), inset 0 0 30px rgba(184,150,96,.15), inset 0 -6px 20px rgba(0,0,0,.5); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.seal:hover { transform: scale(1.05) rotate(3deg); }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold-hot); opacity: .55; }
.seal svg path, .seal svg circle, .seal svg line { stroke: currentColor; fill: none; stroke-width: 1; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.6s ease-out; }
.seal:hover svg path, .seal:hover svg circle, .seal:hover svg line { stroke-dashoffset: 0; }
.seal span { position: relative; z-index: 2; padding: 0 1rem; text-align: center; line-height: 1.2; }
.invocation__email { margin-top: 3rem; font-family: var(--serif); font-style: italic; color: var(--sage-warm); font-size: 1.1rem; }
.invocation__email a { color: var(--sage-warm); border-bottom: 1px solid rgba(169,175,140,.5); }
.invocation__whisper { margin-top: 1rem; font-family: var(--hand); color: rgba(240,231,206,.5); font-size: 1rem; }

/* ===== COLOPHON ===== */
/* ===== FAREWELL: Promo #2 three times over above the footer, with a parting reading ===== */
.farewell { position: relative; min-height: 94vh; display: grid; place-items: center; text-align: center; padding: 9rem 1.5rem 8rem; overflow: hidden;
  background: linear-gradient(180deg, transparent 0, rgba(10,13,10,.5) 45%, #0A0D0A 100%); }
.farewell__video { position: absolute; inset: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.farewell__video::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,13,10,0) 28%, rgba(10,13,10,.38) 46%, rgba(10,13,10,.72) 64%, rgba(10,13,10,.92) 82%, #0A0D0A 100%),
    radial-gradient(ellipse 48% 42% at 50% 54%, rgba(8,6,4,.6) 0%, rgba(8,6,4,.3) 55%, rgba(8,6,4,0) 100%); }
.triptych--farewell { opacity: 0; transition: opacity 2.4s ease; }
.triptych--farewell.is-live { opacity: .95; }
.farewell__inner { position: relative; z-index: 4; max-width: 50rem; }
.farewell__spread { display: flex; justify-content: center; align-items: flex-end; gap: clamp(.4rem, 1.5vw, 1.2rem); margin-bottom: 2.4rem; }
.fw-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; opacity: 0; transform: translateY(24px) rotate(var(--r, 0deg)); transition: opacity 1s, transform 1.1s cubic-bezier(.2,.9,.2,1.1); }
.fw-card img { width: clamp(64px, 6.5vw, 96px); height: auto; border-radius: 4px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(240,231,206,.25); filter: sepia(.2) saturate(.95); animation: fwFloat 6s ease-in-out infinite; }
.fw-card figcaption { font-family: var(--hand); font-size: .95rem; color: rgba(240,231,206,.8); white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.fw-1 { --r: -9deg; } .fw-2 { --r: 0deg; margin-bottom: 1rem; } .fw-3 { --r: 9deg; }
.fw-2 img { animation-delay: -2s; } .fw-3 img { animation-delay: -4s; }
.farewell.is-in .fw-card { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
.farewell.is-in .fw-2 { transition-delay: .25s; } .farewell.is-in .fw-3 { transition-delay: .5s; }
@keyframes fwFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.farewell__lbl { display: block; font-family: var(--type); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-hot); margin-bottom: 1.2rem; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.farewell__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.02; color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0,0,0,.85); max-width: 16ch; margin: 0 auto; }
.farewell__title em { color: var(--gold-hot); }
.farewell__note { font-family: var(--hand); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(240,231,206,.88); margin: 1.4rem auto 2.4rem; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.farewell__cta { position: relative; display: inline-flex; align-items: center; padding: 1.05rem 2.4rem; background: none; border: none; color: var(--gold-hot); font-family: var(--type); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; cursor: none; transform: rotate(-1deg); transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s; }
.farewell__cta span { position: relative; }
.farewell__cta-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.farewell__cta-line path { fill: none; stroke: rgba(217,182,121,.95); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.farewell__cta-line .t2 { stroke-width: 1; opacity: .45; }
.farewell__cta:hover { transform: rotate(0) scale(1.05); color: var(--cream); }
.farewell__cta:hover .farewell__cta-line { filter: url(#ink-rough) drop-shadow(0 0 10px rgba(217,182,121,.5)); }
.farewell__cta:hover .farewell__cta-line .t1 { animation: ticketRedraw .9s cubic-bezier(.6,0,.3,1); stroke: var(--cream); }
@media (max-width: 700px) { .farewell { min-height: 80vh; padding: 7rem 1.2rem 6rem; } }
.colophon { padding: 4rem 0 2.5rem; border-top: none; font-family: var(--book); color: rgba(240,231,206,.5); font-size: .88rem; background: var(--void); }
.colophon__row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; }
.colophon__brand h3 { font-family: var(--serif); font-style: italic; color: var(--cream); font-size: 1.4rem; margin-bottom: .6rem; font-variation-settings: "opsz" 144, "SOFT" 70; }
.colophon__brand em { color: var(--sage-warm); font-style: italic; }
.colophon h4, .colophon .colophon__h { font-variant: small-caps; letter-spacing: .2em; color: var(--cream); font-size: .72rem; margin-bottom: .8rem; font-weight: 400; font-family: var(--caps); }
.colophon ul { list-style: none; padding: 0; }
.colophon ul li { padding: .2rem 0; }
.colophon ul a { color: rgba(240,231,206,.6); border-bottom: 1px dotted rgba(169,175,140,.3); font-size: .92rem; }
.colophon ul a:hover { color: var(--gold-hot); }
.colophon__bottom { padding-top: 1.5rem; border-top: none; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; font-size: .78rem; font-style: italic; color: rgba(240,231,206,.4); }
@media (max-width: 700px) { .colophon__row { grid-template-columns: 1fr 1fr; } .colophon__brand { grid-column: 1 / -1; } }

/* ===================== MAXIMALIST DECOR ===================== */

/* Hero YouTube video */
.hero-video-wrap {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(107,115,85,.35), transparent 60%),
    radial-gradient(ellipse 40% 40% at 70% 70%, rgba(184,150,96,.18), transparent 55%),
    linear-gradient(180deg, var(--forest) 0%, var(--void) 100%);
}
.hero-video-fallback {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .16  0 0 0 0 .12  0 0 0 .25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-size: 400px 400px;
  mix-blend-mode: overlay;
  opacity: .6;
  z-index: 1;
}
/* Triptych: three columns of the same video */
.triptych {
  position: absolute; inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px;
  opacity: 0;
  transition: opacity 2.2s ease;
}
.triptych.is-live { opacity: 1; }
.triptych__col {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.7);
}
.triptych__col::after {
  /* per-column vignette so text stays legible + adds edge grain */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,10,.35) 0%, transparent 30%, transparent 65%, rgba(10,13,10,.65) 100%);
  z-index: 2; pointer-events: none;
}
.triptych__col:nth-child(1)::after { background: linear-gradient(180deg, rgba(10,13,10,.4) 0%, transparent 30%, transparent 65%, rgba(10,13,10,.65) 100%), linear-gradient(90deg, rgba(10,13,10,.25) 0%, transparent 40%); }
.triptych__col:nth-child(3)::after { background: linear-gradient(180deg, rgba(10,13,10,.4) 0%, transparent 30%, transparent 65%, rgba(10,13,10,.65) 100%), linear-gradient(270deg, rgba(10,13,10,.25) 0%, transparent 40%); }
/* subtle colour cast per column — trichrome feel */
.triptych__col:nth-child(1) .triptych__video { filter: saturate(0.85) hue-rotate(-8deg) brightness(0.92); }
.triptych__col:nth-child(2) .triptych__video { filter: saturate(1.05) contrast(1.05); }
.triptych__col:nth-child(3) .triptych__video { filter: saturate(0.85) hue-rotate(8deg) brightness(0.9); }
.triptych__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hero-video-wrap iframe { display: none; }

/* On phones, keep only the centre column (the other two clip badly at small width) */
@media (max-width: 700px) {
  .triptych { grid-template-columns: 1fr; }
  .triptych__col:nth-child(1), .triptych__col:nth-child(3) { display: none; }
}
.hero-video-wrap::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* left-side shade: sits on the video only (graphics stay above it) so the hero text reads clearly */
    linear-gradient(90deg, rgba(6,8,6,.88) 0%, rgba(6,8,6,.72) 22%, rgba(6,8,6,.4) 42%, rgba(6,8,6,0) 62%),
    radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(10,13,10,.5) 80%),
    linear-gradient(180deg, rgba(10,13,10,.25), rgba(10,13,10,.4) 60%, rgba(10,13,10,.9));
  z-index: 3;
}
@media (max-width: 900px) {
  .hero-video-wrap::after {
    background:
      linear-gradient(180deg, rgba(6,8,6,.55) 0%, rgba(6,8,6,.75) 45%, rgba(6,8,6,.9) 100%),
      radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(10,13,10,.5) 80%);
  }
}

/* THE CAT — stalks you as you scroll (no cursor follow) */
.cat {
  position: fixed;
  z-index: 90;
  color: var(--gold-hot);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease, top 1.2s cubic-bezier(.5,.2,.2,1), left 1.2s cubic-bezier(.5,.2,.2,1), right 1.2s cubic-bezier(.5,.2,.2,1), bottom 1.2s cubic-bezier(.5,.2,.2,1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(217,182,121,.4));
  width: 160px; height: 130px;
}
.cat.is-visible { opacity: .92; }
.cat[data-pos="bl"] { bottom: 2rem; left: 2rem; top: auto; right: auto; }
.cat[data-pos="br"] { bottom: 2rem; right: 6.5rem; top: auto; left: auto; }
.cat[data-pos="tl"] { top: 6rem; left: 2rem; bottom: auto; right: auto; }
.cat[data-pos="tr"] { top: 6rem; right: 6.5rem; bottom: auto; left: auto; }
.cat[data-facing="left"] { transform: scaleX(-1); }
.cat-pose { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; display: grid; place-items: center; }
.cat-pose svg { width: 100%; height: 100%; color: var(--ink); }
.cat-pose.is-active { opacity: 1; }
/* solid black cat shape - clearer to read */
.cat-pose svg use { fill: var(--ink); }
.cat-pose svg { fill: var(--ink); }
.cat-pose svg path { fill: var(--ink); stroke: var(--ink); }
@media (max-width: 700px) { .cat { display: none; } }

/* Positioned decor helpers */
.decor {
  position: absolute;
  pointer-events: none;
  color: currentColor;
  z-index: 2;
}
.decor--herb {
  top: -60px; z-index: 4;
  width: 100px; height: 240px;
  color: var(--sage);
  opacity: .8;
}
.decor--herb.dh-1 { left: 6%; transform: rotate(-8deg); }
.decor--herb.dh-2 { left: 32%; transform: rotate(4deg); animation: herbSway 8s ease-in-out infinite alternate; }
.decor--herb.dh-3 { right: 24%; transform: rotate(-6deg); animation: herbSway 10s ease-in-out infinite alternate-reverse; }
.decor--herb.dh-4 { right: 6%; transform: rotate(10deg); }
@keyframes herbSway { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(0) rotate(calc(var(--r, 0deg) + 3deg)); } }
.decor--herb.dh-2 { --r: 4deg; }
.decor--herb.dh-3 { --r: -6deg; }

.decor--jar { width: 70px; height: 120px; color: var(--sage-warm); opacity: .7; }
.decor--jar.dj-tl { top: 6rem; left: 3%; transform: rotate(-4deg); }
.decor--jar.dj-tr { top: 6rem; right: 3%; transform: rotate(3deg); }
.decor--jar.dj-bl { bottom: 3rem; left: 3%; transform: rotate(2deg); }
.decor--jar.dj-br { bottom: 3rem; right: 3%; transform: rotate(-3deg); }
.decor--jar.dj-1 { bottom: 6rem; left: 8%; transform: rotate(-3deg); width: 80px; height: 140px; }
.decor--jar.dj-2 { bottom: 4rem; right: 12%; transform: rotate(4deg); width: 90px; height: 160px; }

.decor--mushroom { width: 60px; height: 80px; color: var(--terracotta); opacity: .85; }
.decor--mushroom.dm-bl-1 { bottom: 1rem; left: 4%; transform: rotate(-4deg); }
.decor--mushroom.dm-bl-2 { bottom: .5rem; left: 12%; width: 44px; height: 60px; transform: rotate(6deg); }
.decor--mushroom.dm-bl-3 { bottom: 2rem; left: 20%; width: 34px; height: 46px; transform: rotate(-2deg); }
.decor--mushroom.dm-br-1 { bottom: 1rem; right: 6%; transform: rotate(4deg); }
.decor--mushroom.dm-br-2 { bottom: 3rem; right: 14%; width: 44px; height: 60px; transform: rotate(-3deg); }

.decor--snake { width: 140px; height: 90px; color: var(--gold-hot); opacity: .75; }
.decor--teacup { width: 90px; height: 90px; color: var(--paper); opacity: .8; }
.decor--tarot { width: 80px; height: 130px; color: var(--gold-hot); opacity: .7; }
.decor--tarot.dt-1 { top: 20%; left: -2rem; transform: rotate(-14deg); }
.decor--tarot.dt-2 { bottom: 20%; right: -1.5rem; transform: rotate(18deg); }
.decor--tarot.dt-3 { top: 40%; right: 3%; transform: rotate(6deg); width: 60px; height: 100px; }

.decor--candle { width: 44px; height: 110px; color: var(--gold-hot); opacity: .8; }
.decor--candle .flame { filter: drop-shadow(0 0 12px rgba(217, 182, 121, 0.9)); animation: flicker 3s ease-in-out infinite alternate; }
@keyframes flicker { 0%,100% { opacity: .8; transform: scale(1); } 45% { opacity: 1; transform: scale(1.05) skewX(2deg); } 65% { opacity: .9; transform: scale(.98) skewX(-2deg); } }

.decor--feather { width: 30px; height: 120px; color: var(--sage-warm); opacity: .6; animation: featherFall 12s ease-in-out infinite; }
@keyframes featherFall { 0%,100% { transform: translateY(0) rotate(var(--r, 8deg)); } 50% { transform: translateY(20px) rotate(calc(var(--r, 8deg) + 12deg)); } }

.decor--moth-fly {
  width: 40px; height: 30px; color: var(--sage);
  animation: mothFly 20s linear infinite;
}
@keyframes mothFly {
  0% { transform: translate(0, 0) rotate(-5deg); }
  25% { transform: translate(60px, -30px) rotate(8deg); }
  50% { transform: translate(30px, 40px) rotate(-3deg); }
  75% { transform: translate(-30px, 20px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(-5deg); }
}

.decor--ribbon { width: 200px; height: 40px; color: var(--rose); opacity: .6; }

/* Section can allow decor to overflow */
.chapter, .cover, .care, .grimoire, .whispers, .keeper, .gram, .territories, .invocation {
  overflow: visible;
}

/* Real vintage images loaded from Wikimedia Commons (Special:FilePath is a stable redirect) */
.vintage-img {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  filter:
    sepia(.35) contrast(1.05) brightness(.95)
    drop-shadow(0 12px 24px rgba(0,0,0,.55));
  mix-blend-mode: normal;
}
.vintage-img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Hide vintage-img wrapper entirely if the img inside failed to load — so no broken icons show */
.vintage-img img[data-broken="true"] { display: none; }
.vintage-img:has(img[data-broken="true"]) { display: none; }
.vintage-img::after {
  /* aged tattered overlay + burned edges */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(48, 24, 8, .35) 92%),
    linear-gradient(180deg, rgba(48, 24, 8, .12), transparent 20%, transparent 80%, rgba(48, 24, 8, .15));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.vintage-img.tattered {
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 60%, rgba(0,0,0,.85) 78%, rgba(0,0,0,.4) 93%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 60%, rgba(0,0,0,.85) 78%, rgba(0,0,0,.4) 93%, transparent 100%);
  filter:
    sepia(.4) contrast(1.05) brightness(.9)
    drop-shadow(0 8px 20px rgba(0,0,0,.55))
    url(#burnt-edge);
}

/* Vintage engraving positioning */
.eng {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.eng svg { display: block; width: 100%; height: 100%; }

.eng-bird { width: 140px; height: 140px; }
.eng-botanical { width: 110px; height: 170px; }
.eng-crystal { width: 130px; height: 150px; }
.eng-key { width: 180px; height: 70px; }
.eng-planet { width: 200px; height: 160px; }
.eng-zodiac { width: 170px; height: 170px; }
.eng-owl { width: 110px; height: 140px; }
.eng-constellation { width: 200px; height: 160px; }
.eng-hand { width: 120px; height: 170px; }
.eng-moth-big { width: 180px; height: 140px; }
.eng-scarab { width: 130px; height: 150px; }
.eng-tarot-face { width: 100px; height: 160px; }
.eng-eye { width: 200px; height: 140px; }
.eng-ouroboros { width: 160px; height: 160px; }

/* Engravings floating in the between-sections gaps */
.between-eng {
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 10;
}
.between-eng .drift {
  position: absolute;
  animation: drift 20s ease-in-out infinite alternate;
}
.between-eng .drift.d2 { animation-duration: 26s; animation-delay: -8s; }
.between-eng .drift.d3 { animation-duration: 22s; animation-delay: -14s; }
@keyframes drift {
  from { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  to   { transform: translate(15px, -10px) rotate(calc(var(--r, 0deg) + 4deg)); }
}

/* But viewport itself doesn't overflow horizontally */
body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  body { cursor: auto; } .cursor { display: none; }
  .butterfly, .smoke, .cat { display: none; }
  .hscroll { height: auto; }
  .hscroll__pin { position: static; height: auto; display: block; }
  .hscroll__track { flex-direction: column; transform: none !important; }
}

/* ===== Hand-drawn close (ringed X, same ink as the menu) for every pop-up ===== */
.lighttable__close, .lightbox__close, .folio__close, .tincture__close, .modal__close, .familiars__close, .theatre__close, .pkgs__close {
  border: none !important; background: none !important; color: var(--gold-hot) !important; padding: 0;
  width: 60px !important; height: 60px !important; transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s;
  filter: drop-shadow(0 0 10px rgba(217,182,121,.45));
}
.tincture__close { top: -1rem !important; right: -1rem !important; }
.lighttable__close::before, .lightbox__close::before, .folio__close::before, .tincture__close::before, .modal__close::before { content: none !important; }
.hx { width: 100%; height: 100%; overflow: visible; filter: url(#ink-heavy); }
.hx path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.hx .xm-ring { stroke-width: 2.4; }
.is-open .hx path { animation: hxDraw .55s cubic-bezier(.6,0,.3,1) both; }
.is-open .hx .xm-ring { animation-delay: .15s; }
.is-open .hx .xm-a { animation-delay: .4s; }
.is-open .hx .xm-b { animation-delay: .55s; }
@keyframes hxDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.lighttable__close:hover, .lightbox__close:hover, .folio__close:hover, .tincture__close:hover, .modal__close:hover, .familiars__close:hover, .theatre__close:hover, .pkgs__close:hover { transform: rotate(-8deg) scale(1.12); filter: drop-shadow(0 0 22px rgba(217,182,121,.95)); }
/* hand-drawn arrow inline with text */
.harrow { display: inline-block; width: 1.7em; height: .8em; vertical-align: -.02em; margin-left: .25em; overflow: visible; filter: url(#ink-rough); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.harrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bento__more:hover .harrow { transform: translateX(6px); }

/* photography outro: right-aligned (the left side is busy enough) */
.rite-photo__pullquote { margin-left: auto; text-align: right; border-left: none; padding-left: 0; border-right: 3px solid var(--terracotta); padding-right: 2rem; }
.rite-photo__outro { text-align: right; }
.rite-photo__outro .chapter__seals { justify-content: flex-end; }
.rite-photo__outro .chapter__cta:hover { padding-right: 0; padding-left: 1.5rem; }
.chapter__cta:hover .harrow { transform: translateX(6px); }
@media (max-width: 700px) { .rite-photo__pullquote { padding-right: 1.2rem; } }

/* ===== ENQUIRY POP-UP: a midnight grimoire page (web-section palette: ink, cream, gold) ===== */
.modal { background: radial-gradient(ellipse at 50% 40%, rgba(27,31,38,.9), rgba(8,9,12,.95)); overflow-y: auto; align-items: start; padding: 4rem 1rem; }
.modal__stage { position: relative; width: 100%; max-width: 640px; margin: auto; }
.modal__circle { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: .14; z-index: 0; }
.modal__circle img { width: 100%; height: 100%; max-width: none; animation: modalSpin 120s linear infinite; }
@keyframes modalSpin { to { transform: rotate(360deg); } }
.modal__tarot { position: absolute; z-index: 0; width: 150px; max-width: none; border-radius: 8px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(217,182,121,.25); opacity: 0; transition: opacity .6s .2s, transform .9s cubic-bezier(.2,.8,.2,1) .2s; filter: sepia(.15) saturate(.9); }
.modal__tarot.mt-1 { top: 2rem; left: -110px; transform: rotate(-4deg) translateX(60px); }
.modal__tarot.mt-2 { top: 11rem; left: -140px; transform: rotate(-4deg) translateX(80px); width: 160px; }
.modal__tarot.mt-3 { bottom: 5rem; right: -120px; transform: rotate(4deg) translateX(-70px); width: 160px; }
.modal.is-open .modal__tarot { opacity: .95; }
.modal.is-open .modal__tarot.mt-1 { transform: rotate(-16deg); animation: tarotBob 7s ease-in-out 1.2s infinite; }
.modal.is-open .modal__tarot.mt-2 { transform: rotate(-6deg); animation: tarotBob 8s ease-in-out 1.6s infinite reverse; }
.modal.is-open .modal__tarot.mt-3 { transform: rotate(12deg); animation: tarotBob 9s ease-in-out 1.4s infinite; }
@keyframes tarotBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.modal__card { position: relative; z-index: 1; max-width: none; max-height: none; overflow: visible; border-radius: 4px; border: 1px solid rgba(217,182,121,.55);
  background: radial-gradient(ellipse at 30% 0%, rgba(217,182,121,.08), transparent 55%), linear-gradient(180deg, #1B1F26 0%, #121419 100%);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.95), 0 0 60px -20px rgba(217,182,121,.25); padding: 3.4rem clamp(1.6rem, 4vw, 3.4rem) 2.6rem; }
.modal__card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217,182,121,.22); border-radius: 2px; pointer-events: none; }
.modal__corner { position: absolute; width: 22px; height: 22px; color: var(--gold-hot); opacity: .7; }
.modal__corner svg { width: 100%; height: 100%; }
.c-tl { top: 18px; left: 18px; } .c-tr { top: 18px; right: 18px; transform: scaleX(-1); } .c-bl { bottom: 18px; left: 18px; transform: scaleY(-1); } .c-br { bottom: 18px; right: 18px; transform: scale(-1); }
.modal__card .modal__close { top: 1.4rem; right: 1.4rem; width: 52px !important; height: 52px !important; z-index: 3; }
.modal__moth { position: absolute; top: -34px; left: 50%; width: 76px; height: 60px; translate: -50% 0; color: var(--gold-hot); opacity: .85; animation: mothFlutter 5s ease-in-out infinite; }
@keyframes mothFlutter { 0%,100% { transform: rotate(-4deg) scaleX(1); } 50% { transform: rotate(3deg) scaleX(.9); } }
.modal__lbl { font-family: var(--type); font-variant: normal; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hot); text-align: center; margin: .6rem 0 1rem; }
.modal__title { text-align: center; color: var(--cream); margin-bottom: .3rem; }
.modal__title em { color: var(--gold-hot); }
.modal__swash { display: block; width: 200px; height: 16px; margin: 0 auto 1.2rem; overflow: visible; }
.modal__swash path { fill: none; stroke: var(--gold-hot); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; }
.modal__swash path + path { stroke-width: 1; opacity: .5; }
.modal.is-open .modal__swash path { animation: swashDraw 1.1s cubic-bezier(.6,0,.3,1) .45s forwards; }
.modal.is-open .modal__swash path + path { animation-delay: .75s; }
@keyframes swashDraw { to { stroke-dashoffset: 0; } }
.modal__intro { text-align: center; font-family: var(--book); color: rgba(240,231,206,.72); max-width: 440px; margin: 0 auto 2.2rem; }
.field__num { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--gold-hot); margin-right: .35rem; font-size: 1rem; }
.modal .field label, .omens legend { font-family: var(--type); font-variant: normal; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,231,206,.7); margin-bottom: .45rem; display: block; }
.modal .field label small, .omens legend small { letter-spacing: .08em; text-transform: none; font-family: var(--hand); font-size: .78rem; color: rgba(217,182,121,.7); margin-left: .5rem; }
.modal .field input, .modal .field textarea { background: rgba(8,9,12,.45); border: none; border-bottom: 1px solid rgba(217,182,121,.4); border-radius: 2px 2px 0 0; color: var(--cream); padding: .85rem .9rem; font-family: var(--book); font-size: 1.05rem; transition: border-color .3s, background .3s, box-shadow .3s; }
.modal .field input:focus, .modal .field textarea:focus { background: rgba(217,182,121,.06); border-bottom-color: var(--gold-hot); box-shadow: 0 10px 22px -16px rgba(217,182,121,.8); }
.modal .field textarea::placeholder { color: rgba(240,231,206,.35); font-style: italic; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.omens { border: none; padding: 0; margin: 0 0 1.6rem; }
.omens__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; padding-top: .35rem; }
.omen { position: relative; cursor: none; }
.omen input { position: absolute; opacity: 0; pointer-events: none; }
.omen__face { display: flex; flex-direction: column; align-items: center; justify-content: space-between; aspect-ratio: 5 / 8; padding: .45rem .25rem .5rem; border-radius: 5px; text-align: center;
  background: linear-gradient(180deg, #EFE3C4 0%, #E0CFA3 100%); color: #2A241A; box-shadow: inset 0 0 0 3px #EFE3C4, inset 0 0 0 4px rgba(107,79,42,.55), 0 10px 18px -10px rgba(0,0,0,.9);
  transform: rotate(var(--r, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s, filter .35s; filter: saturate(.6) brightness(.82); }
.omen:nth-child(odd) .omen__face { --r: -2deg; } .omen:nth-child(even) .omen__face { --r: 2deg; }
.omen__num { font-family: var(--serif); font-size: .62rem; letter-spacing: .1em; color: #6B4F2A; }
.omen__sym { width: 62%; aspect-ratio: 1; height: auto; color: #3A2E1E; }
.omen__name { font-family: var(--caps); font-weight: 600; font-size: .64rem; overflow-wrap: anywhere; line-height: 1.05; text-transform: uppercase; letter-spacing: .06em; }
.omen:hover .omen__face { transform: translateY(-6px) rotate(0); filter: saturate(.85) brightness(.95); }
.omen input:checked + .omen__face { transform: translateY(-10px) rotate(0) scale(1.04); filter: none; box-shadow: inset 0 0 0 3px #EFE3C4, inset 0 0 0 4px #9C5F4A, 0 0 0 2px var(--gold-hot), 0 0 26px -2px rgba(217,182,121,.75), 0 18px 26px -12px rgba(0,0,0,.9); }
.omen input:checked + .omen__face .omen__sym { color: #9C5F4A; }
.omen input:focus-visible + .omen__face { outline: 2px dashed var(--gold-hot); outline-offset: 3px; }
.modal__submit { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 1rem; padding: 1.15rem 1.6rem; background: rgba(217,182,121,.08) !important; border: none; border-radius: 0; color: var(--gold-hot); font-family: var(--serif); font-style: italic; font-size: 1.3rem; letter-spacing: .01em; cursor: none; transition: background .35s, color .35s, transform .35s; transform: rotate(-.6deg); }
.modal__submit span { position: relative; display: inline-flex; align-items: center; }
.modal__submit:hover { background: rgba(217,182,121,.16) !important; color: var(--cream); letter-spacing: .01em; transform: rotate(0) scale(1.02); }
.modal__submit-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.modal__submit-line path { fill: none; stroke: rgba(217,182,121,.95); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modal__submit-line .t2 { stroke-width: 1; opacity: .45; }
.modal__submit:hover .harrow { transform: translateX(6px); }
.modal__whisper { color: rgba(217,182,121,.7); }
@media (max-width: 980px) { .modal__tarot { display: none; } }
@media (max-width: 620px) {
  .modal { padding: 2.6rem .6rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .omens__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem .5rem; }
  .modal__card .modal__close { top: .9rem; right: .9rem; width: 44px !important; height: 44px !important; }
}

/* ===== THE ORACLE — tabbed FAQs (midnight page, gold ink, tarot tabs) ===== */
.faq { position: relative; padding: 8rem 0 9rem; min-height: calc(min(900px, 94vw) + 6rem); overflow: hidden; background: transparent !important; }
.faq .container { position: relative; z-index: 2; }
.faq__circle { position: absolute; left: 50%; top: 50%; width: min(900px, 94vw); aspect-ratio: 1; translate: -50% -50%; opacity: .07; pointer-events: none; }
.faq__circle img { width: 100%; height: 100%; max-width: none; animation: modalSpin 160s linear infinite; }
.faq__tarot { position: absolute; width: 150px; max-width: none; border-radius: 8px; opacity: .8; box-shadow: 0 24px 50px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(217,182,121,.25); filter: sepia(.15) saturate(.85); z-index: 1; animation: tarotBob 9s ease-in-out infinite; }
.faq__tarot.ft-1 { top: 7rem; left: 3%; rotate: -12deg; }
.faq__tarot.ft-2 { bottom: 6rem; right: 3%; rotate: 10deg; animation-delay: -4s; }
.faq__deco { position: absolute; color: var(--gold-hot); opacity: .45; z-index: 1; pointer-events: none; }
.fd-candle { width: 70px; height: 110px; left: 6%; bottom: 8rem; }
.fd-moth { width: 90px; height: 68px; right: 9%; top: 8rem; animation: mothFlutter 6s ease-in-out infinite; }
.fd-key { width: 110px; height: 60px; left: 12%; top: 46%; rotate: -20deg; opacity: .3; }
.faq__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.faq__head .chapter__label { display: block; margin-bottom: 1rem; }
.faq__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 80; margin-bottom: 1.2rem; }
.faq__title em { color: var(--gold-hot); }
.faq__lede { font-family: var(--book); font-size: 1.12rem; color: rgba(240,231,206,.75); }
.faq__link { color: var(--gold-hot); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: color .3s; }
.faq__link:hover { color: var(--cream); }
.faq__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin: 0 auto 2.4rem; max-width: 1040px; }
.faq__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 128px; padding: .8rem .5rem 1rem; border: none; border-radius: 6px; cursor: none; text-align: center;
  background: linear-gradient(180deg, #EFE3C4 0%, #E0CFA3 100%); color: #2A241A; box-shadow: inset 0 0 0 3px #EFE3C4, inset 0 0 0 4px rgba(107,79,42,.55), 0 14px 24px -14px rgba(0,0,0,.95);
  transform: rotate(var(--r, 0deg)); filter: saturate(.55) brightness(.72); transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s, box-shadow .35s; }
.faq__tab:nth-child(odd) { --r: -2deg; } .faq__tab:nth-child(even) { --r: 1.8deg; }
.faq__tab-num { font-family: var(--serif); font-size: .72rem; letter-spacing: .12em; color: #6B4F2A; }
.faq__tab-sym { width: 40px; height: 40px; color: #3A2E1E; }
.faq__tab-name { font-family: var(--caps); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; line-height: 1.05; }
.faq__tab-line { position: absolute; left: 12%; right: 12%; bottom: -12px; width: 76%; height: 10px; overflow: visible; }
.faq__tab-line path { fill: none; stroke: var(--gold-hot); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset .6s cubic-bezier(.6,0,.3,1); }
.faq__tab:hover { transform: translateY(-5px) rotate(0); filter: saturate(.8) brightness(.9); }
.faq__tab[aria-selected="true"] { transform: translateY(-10px) rotate(0) scale(1.05); filter: none; box-shadow: inset 0 0 0 3px #EFE3C4, inset 0 0 0 4px #9C5F4A, 0 0 0 2px var(--gold-hot), 0 0 30px -4px rgba(217,182,121,.7), 0 20px 30px -14px rgba(0,0,0,.95); }
.faq__tab[aria-selected="true"] .faq__tab-sym { color: #9C5F4A; }
.faq__tab[aria-selected="true"] .faq__tab-line path { stroke-dashoffset: 0; }
.faq__tab:focus-visible { outline: 2px dashed var(--gold-hot); outline-offset: 4px; }
.faq__book { position: relative; max-width: 880px; margin: 0 auto; padding: 2.6rem clamp(1.4rem, 4vw, 3.4rem); border: 1px solid rgba(217,182,121,.5); border-radius: 4px;
  background: radial-gradient(ellipse at 30% 0%, rgba(217,182,121,.07), transparent 55%), linear-gradient(180deg, rgba(27,31,38,.94) 0%, rgba(18,20,25,.96) 100%);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 60px -24px rgba(217,182,121,.22); }
.faq__book::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217,182,121,.2); border-radius: 2px; pointer-events: none; }
.faq__corner { position: absolute; width: 22px; height: 22px; color: var(--gold-hot); opacity: .7; }
.faq__corner svg { width: 100%; height: 100%; }
.faq__panel { position: relative; z-index: 1; animation: faqIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes faqIn { from { opacity: 0; transform: translateY(10px); } }
.faq__item { border-bottom: 1px dashed rgba(217,182,121,.22); }
.faq__item:last-child { border-bottom: none; }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.25rem .2rem; cursor: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.3; color: var(--cream); transition: color .3s, transform .3s; }
.faq__item summary:hover .faq__q { color: var(--gold-hot); transform: translateX(4px); }
.faq__item[open] .faq__q { color: var(--gold-hot); }
.faq__plus { flex: none; width: 28px; height: 28px; color: var(--gold-hot); overflow: visible; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.faq__plus path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: opacity .3s; }
.faq__item[open] .faq__plus { transform: rotate(135deg); }
.faq__a { padding: 0 3rem 1.5rem .2rem; }
.faq__a p { font-family: var(--book); font-size: 1.06rem; line-height: 1.65; color: rgba(240,231,206,.8); }
.faq__a strong { color: var(--cream); font-weight: 400; font-style: italic; font-family: var(--serif); }
.faq__item[open] .faq__a { animation: faqIn .45s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 1100px) { .faq__tarot, .fd-key { display: none; } }
@media (max-width: 700px) {
  .faq { padding: 5rem 0 6rem; }
  .faq__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem .5rem; }
  .faq__tab { width: auto; padding: .6rem .3rem .8rem; }
  .faq__tab-sym { width: 30px; height: 30px; }
  .faq__tab-name { font-size: .7rem; }
  .faq__a { padding-right: .2rem; }
  .fd-candle, .fd-moth { display: none; }
}

/* FAQ: two columns, wider book, slightly smaller type */
.faq__book { max-width: 1180px; padding: 2.4rem clamp(1.4rem, 3.4vw, 3rem); }
.faq__panel:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.2rem; align-items: start; }
.faq__col { min-width: 0; }
.faq__col .faq__item:last-child { border-bottom: none; }
.faq__q { font-size: clamp(1rem, 1.25vw, 1.14rem); }
.faq__item summary { padding: 1.05rem .1rem; gap: 1rem; }
.faq__plus { width: 22px; height: 22px; }
.faq__a { padding: 0 1.6rem 1.3rem .1rem; }
.faq__a p { font-size: .98rem; line-height: 1.6; }
@media (max-width: 860px) {
  .faq__panel:not([hidden]) { grid-template-columns: 1fr; }
  .faq__col:first-child .faq__item:last-child { border-bottom: 1px dashed rgba(217,182,121,.22); }
}

/* care intro: two short paragraphs, a touch wider */
.care__head p { max-width: min(1080px, 92vw); }
.care__head p + p { max-width: min(900px, 92vw); }
.care__head p + p { margin-top: 1rem; }
.care__head p em { color: var(--gold-hot); font-style: italic; }
/* n° IV sits a little slimmer (clear flask) */
.shelf__bottle.b-unbinding { height: 6.6cqw; }

.bottle__note { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px dashed rgba(217,182,121,.3); font-family: var(--book); font-style: italic; font-size: .82rem; line-height: 1.45; color: rgba(240,231,206,.62); text-align: left; }

/* shelf bottles: no browser focus box after a click; a soft gold ring only for keyboard users */
.shelf__bottle:focus { outline: none; }
.shelf__bottle:focus-visible { outline: 1px dashed rgba(217,182,121,.8); outline-offset: 6px; border-radius: 4px; }
/* "Everything in …" peek */
.incl-link { display: inline; padding: 0; border: none; background: none; cursor: none; font: inherit; color: var(--gold-hot); text-decoration: underline dotted rgba(217,182,121,.7); text-underline-offset: 3px; transition: color .25s; }
.incl-link:hover, .incl-link:focus-visible { color: var(--cream); outline: none; }
.incl-peek { display: block; position: relative; list-style: none; margin: .5rem 0 .7rem; padding: .9rem 1rem .8rem; border: 1px solid rgba(217,182,121,.45); border-radius: 4px; background: rgba(8,9,12,.55); box-shadow: inset 0 0 0 3px rgba(12,16,11,.8), 0 14px 30px -18px rgba(0,0,0,.9); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.incl-peek.is-in { opacity: 1; transform: none; }
.incl-peek__lbl { display: block; font-family: var(--type); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-warm); padding-right: 1.6rem; }
.incl-peek__price { display: block; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--gold-hot); margin-top: .2rem; }
.incl-peek .bottle__list { margin: .5rem 0 0 !important; font-size: .92em; }
.incl-peek .bottle__list li::marker { color: rgba(217,182,121,.6); }
.incl-peek__x { position: absolute; top: .35rem; right: .5rem; border: none; background: none; color: var(--gold-hot); font-family: var(--serif); font-size: 1.3rem; line-height: 1; cursor: none; padding: .2rem; }
.incl-peek__x:hover { color: var(--cream); }

.whisper__name { margin-top: .9rem; }
.whisper__biz { margin-top: .15rem; font-family: var(--hand); font-size: .92rem; color: var(--gold-hot); opacity: .85; }

/* ===== WEB SECTION: two slow reels of real builds ===== */
.rite-web .container { pointer-events: none; }
.rite-web .container .reveal { pointer-events: auto; }
.rite-web__grid { grid-template-columns: minmax(0, 480px) 1fr; }
.rite-web .container { width: min(1340px, 94vw); }
.webreel { position: absolute; left: 0; right: 0; top: 19rem; display: flex; flex-direction: column; gap: clamp(1.4rem, 2.4vw, 2.4rem); pointer-events: none; }
.webreel__row { position: relative; overflow: visible; padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 58%); mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 58%); clip-path: inset(-40px 0 -40px 38%); }
.webreel__row.r-a { z-index: 2; }
.webreel__row.r-b { z-index: 3; }
.webreel__track { display: flex; gap: clamp(1.2rem, 2vw, 2rem); width: max-content; animation: reelLeft var(--dur, 90s) linear infinite; }
.webreel__row.r-b .webreel__track { animation-name: reelRight; --dur: 104s; margin-left: clamp(-110px, -5vw, -50px); }
.webreel:hover .webreel__track { animation-play-state: paused; }
@keyframes reelLeft { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
@keyframes reelRight { from { transform: translateX(calc(-100% / 3)); } to { transform: translateX(0); } }
.webreel__card { flex: none; width: clamp(175px, 15.4vw, 255px); padding: 0; border: none; background: #0f1116; border-radius: 7px; overflow: hidden; cursor: none; pointer-events: auto;
  box-shadow: 0 30px 50px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(217,182,121,.28); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.webreel__row.r-a .webreel__card:nth-child(odd) { transform: rotate(-1.2deg); } .webreel__row.r-a .webreel__card:nth-child(even) { transform: rotate(.9deg) translateY(10px); }
.webreel__row.r-b .webreel__card:nth-child(odd) { transform: rotate(1deg) translateY(8px); } .webreel__row.r-b .webreel__card:nth-child(even) { transform: rotate(-.8deg); }
.webreel__card:hover { transform: translateY(-8px) rotate(0) scale(1.03) !important; box-shadow: 0 40px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(217,182,121,.8), 0 0 30px -6px rgba(217,182,121,.4); }
.webreel__bar { display: flex; align-items: center; gap: 4px; height: 15px; padding: 0 8px; background: #1b1f26; border-bottom: 1px solid rgba(217,182,121,.18); }
.webreel__bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(217,182,121,.45); }
.webreel__bar b { margin-left: 6px; font: 400 .5rem/1 var(--type); letter-spacing: .12em; color: rgba(240,231,206,.55); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webreel__card img { display: block; width: 100%; aspect-ratio: 1400 / 877; height: auto; object-fit: cover; object-position: top center; max-width: none; }
@media (prefers-reduced-motion: reduce) { .webreel__track { animation: none; } }
@media (max-width: 800px) {
  .rite-web__grid { grid-template-columns: 1fr; }
  .webreel { position: relative; top: auto; margin-top: 3rem; }
  .webreel__row { -webkit-mask-image: none; mask-image: none; clip-path: none; }
  .webreel__card { width: 72vw; }
}

/* web section v3: tarot frames the copy on the left, reels own the right */
.rite-web { padding-bottom: 14rem; }
.rite-web .container { width: min(1220px, 92vw); padding-left: clamp(0px, 13vw, 210px); }
.webreel__row { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 55%, #000 68%) !important; mask-image: linear-gradient(90deg, transparent 0%, transparent 55%, #000 68%) !important; clip-path: inset(-40px 0 -40px 55%) !important; }
@media (max-width: 1100px) { .web-tarot { display: none; } .rite-web .container { padding-left: 0; } }

/* candles: no clipped glow box */
.decor--candle { overflow: visible; filter: drop-shadow(0 0 10px rgba(217,182,121,.75)); }
.decor--candle .flame { filter: none; }
/* photography intro runs wider */
.rite-photo .photo-intro { max-width: min(1040px, 100%) !important; }
.rite-photo .photo-intro .chapter__lede { max-width: none; }

/* photography outro: wider pull-quote, dotted rule only as long as the tags */
.rite-photo__pullquote { max-width: min(1040px, 100%); }
.rite-photo__outro .chapter__seals { width: fit-content; max-width: 100%; margin-left: auto; }

/* enquiry: optional file upload, styled as a scrap of parchment clipped to the page */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.field__lbl { display: block; font-family: var(--type); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,231,206,.7); margin-bottom: .45rem; }
.field__lbl small { letter-spacing: .08em; text-transform: none; font-family: var(--hand); font-size: .78rem; color: rgba(217,182,121,.7); margin-left: .5rem; }
.scrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.1rem 1rem 1rem 2.6rem; border: 1.5px dashed rgba(217,182,121,.45); border-radius: 3px; background: rgba(239,227,196,.04); cursor: none; text-align: center; transition: border-color .3s, background .3s, transform .3s; }
.scrap:hover, .scrap.is-over { border-color: var(--gold-hot); background: rgba(217,182,121,.09); transform: rotate(-.4deg); }
.scrap input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: none; }
.scrap:focus-within { outline: 2px dashed var(--gold-hot); outline-offset: 3px; }
.scrap__clip { position: absolute; left: .9rem; top: -.6rem; width: 18px; height: 46px; fill: none; stroke: var(--gold-hot); stroke-width: 2.2; stroke-linecap: round; transform: rotate(-8deg); }
.scrap__txt { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--cream); }
.scrap__txt b { font-weight: 400; color: var(--gold-hot); }
.scrap__txt u { text-decoration-style: dotted; text-underline-offset: 3px; }
.scrap__hint { font-family: var(--hand); font-size: .8rem; color: rgba(240,231,206,.5); }
.scrap__list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.scrap__list li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .55rem .35rem .75rem; background: #EFE3C4; color: #2A241A; border-radius: 2px; font-family: var(--type); font-size: .66rem; letter-spacing: .04em; box-shadow: 0 6px 12px -8px rgba(0,0,0,.9); transform: rotate(var(--r, -1deg)); max-width: 100%; }
.scrap__list li:nth-child(even) { --r: 1.2deg; }
.scrap__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.scrap__list li small { color: #6B4F2A; }
.scrap__list button { border: none; background: none; padding: 0 .1rem; font-family: var(--serif); font-size: 1rem; line-height: 1; color: #9C5F4A; cursor: none; }
.scrap__err { color: #E8A48C !important; background: rgba(156,95,74,.18) !important; }
.modal__submit.is-sending { opacity: .65; pointer-events: none; }
.modal__sent { text-align: center; padding: 1rem 0 .5rem; }
.modal__sent-seal { width: 64px; height: 64px; color: var(--gold-hot); margin: 0 auto .8rem; display: block; }
.modal__sent h4 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.8rem; color: var(--cream); margin-bottom: .4rem; }
.modal__sent p { font-family: var(--book); color: rgba(240,231,206,.75); }

/* ===== TERRITORIES: hand-drawn coast map on the left, the sea (and the words) on the right ===== */
.terr { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; width: min(1280px, 94vw); }
.terr__map { position: relative; margin-left: clamp(-4rem, -3vw, -1rem); }
.tmap__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tmap__land { fill: rgba(33,40,50,.92); }
.tmap__land-hatch { fill: url(#tmapHatch); }
.tmap__island { fill: rgba(33,40,50,.92); stroke: rgba(217,182,121,.75); stroke-width: 1.1; }
.tmap__coast { fill: none; stroke: var(--gold-hot); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 3.5s cubic-bezier(.6,0,.3,1); }
.terr__map.is-in .tmap__coast { stroke-dashoffset: 0; }
.tmap__coast2 { fill: none; stroke: rgba(217,182,121,.35); stroke-width: .6; }
.tmap__rivers path { fill: none; stroke: rgba(150,185,200,.55); stroke-width: 1; stroke-linecap: round; }
.tmap__border { fill: none; stroke: rgba(169,175,140,.55); stroke-width: 1; stroke-dasharray: 2 5; }
.tmap__peaks path { fill: none; stroke: rgba(169,175,140,.75); stroke-width: 1.1; stroke-linecap: round; }
.tmap__peaks .hatch { stroke-width: .7; opacity: .6; }
.tmap__waves path { fill: none; stroke: rgba(150,185,200,.45); stroke-width: 1; stroke-linecap: round; animation: tmapWave 6s ease-in-out infinite alternate; }
.tmap__waves path:nth-child(3n) { animation-delay: -2s; } .tmap__waves path:nth-child(3n+1) { animation-delay: -4s; }
@keyframes tmapWave { to { transform: translateX(5px); } }
.tmap__compass circle, .tmap__compass path { fill: none; stroke: rgba(217,182,121,.7); stroke-width: .8; }
.tmap__compass .fill { fill: rgba(217,182,121,.35); }
.tmap__compass text { fill: var(--gold-hot); font-family: var(--serif); font-size: 12px; }
.tmap__lbl { font-family: var(--serif); font-style: italic; font-size: 12px; fill: rgba(169,175,140,.85); letter-spacing: .02em; }
.tmap__lbl.sea { fill: rgba(150,185,200,.7); } .tmap__lbl.big { font-size: 17px; letter-spacing: .12em; }
.tmap__lbl.region { fill: rgba(217,182,121,.55); font-size: 13px; }
.tmap__lbl.state { font-family: var(--type); font-style: normal; font-size: 9px; letter-spacing: .3em; fill: rgba(169,175,140,.6); }
/* pins: a faint dot for every place; the ringed X draws itself in when its name is hovered */
.tmap__pin .pin-dot { fill: rgba(217,182,121,.55); transition: fill .3s; }
.tmap__pin .pin-mark { opacity: 0; transition: opacity .25s; }
.tmap__pin .pin-ring, .tmap__pin .pin-x { fill: none; stroke: var(--gold-hot); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s cubic-bezier(.6,0,.3,1); }
.tmap__pin .pin-x { transition-delay: .18s; }
.tmap__pin text { font-family: var(--serif); font-style: italic; font-size: 13px; fill: var(--cream); opacity: 0; transition: opacity .3s .15s; paint-order: stroke; stroke: rgba(14,17,22,.9); stroke-width: 3px; }
.tmap__pin.is-on .pin-mark { opacity: 1; filter: drop-shadow(0 0 6px rgba(217,182,121,.9)); }
.tmap__pin.is-on .pin-ring, .tmap__pin.is-on .pin-x { stroke-dashoffset: 0; }
.tmap__pin.is-on text { opacity: 1; }
.tmap__pin.is-on .pin-dot { fill: var(--gold-hot); }
/* home base: a little cottage with smoke from the chimney and a slow pulse */
.tmap__home .home-house { fill: rgba(217,182,121,.18); stroke: var(--gold-hot); stroke-width: 1.5; stroke-linejoin: round; }
.tmap__home .home-smoke { fill: none; stroke: rgba(240,231,206,.55); stroke-width: 1; stroke-linecap: round; animation: tmapSmoke 3.2s ease-in-out infinite; }
.tmap__home .home-ring { fill: none; stroke: var(--gold-hot); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: tmapPulse 3.4s ease-out infinite; }
.tmap__home .home-ring.r2 { animation-delay: 1.7s; }
.tmap__home-lbl { font-family: var(--hand); font-size: 12px; fill: var(--gold-hot); paint-order: stroke; stroke: rgba(14,17,22,.9); stroke-width: 3px; }
.tmap__home.is-on .home-ring { animation-duration: 1.4s; }
.tmap__home.is-on .home-house { fill: rgba(217,182,121,.45); filter: drop-shadow(0 0 8px rgba(217,182,121,.9)); }
@keyframes tmapPulse { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes tmapSmoke { 0%,100% { opacity: .2; transform: translateY(0); } 50% { opacity: .75; transform: translateY(-2px); } }
/* the words, out over the sea */
.terr__copy .territories__head { text-align: left; margin-bottom: 2.4rem; }
.terr__copy .territories__head h2, .terr__copy .territories__head p { margin-left: 0; margin-right: 0; }
.terr__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.4rem; max-width: 560px; }
.terr__list li { break-inside: avoid; display: flex; align-items: center; gap: .7rem; padding: .62rem 0; border-bottom: 1px dashed rgba(217,182,121,.18); font-family: var(--serif); font-size: 1.05rem; color: rgba(240,231,206,.82); cursor: none; transition: color .25s, transform .25s; outline: none; }
.terr__list li::before { content: "+"; font-family: var(--serif); color: rgba(217,182,121,.6); transition: transform .35s, color .25s; }
.terr__list li.is-home::before { content: "⌂"; color: var(--gold-hot); }
.terr__list li:hover, .terr__list li:focus-visible, .terr__list li.is-on { color: var(--gold-hot); transform: translateX(4px); }
.terr__list li:hover::before, .terr__list li:focus-visible::before, .terr__list li.is-on::before { transform: rotate(45deg); color: var(--gold-hot); }
.terr__list li.is-home:hover::before, .terr__list li.is-home.is-on::before { transform: none; }
.terr__hint { margin-top: 1.1rem; font-family: var(--type); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(169,175,140,.6); }
.terr__copy .compass__remote { text-align: left; margin-top: 1.6rem; }
.territories > .terr { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .terr { grid-template-columns: 1fr; }
  .terr__map { max-width: 420px; margin: 0 auto; }
  .terr__raven { display: none; }
}

/* the map's land bleeds out softly to the west, north and south, like an old chart */
.terr__map .tmap__svg { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-composite: intersect; }

/* ===== FLOATING SPELL: music (Sympathy Magic) + a hand-drawn enquiry ticket, bottom right ===== */
.enquire-fab { display: none !important; }
.spell { position: fixed; right: 1.4rem; bottom: 1.3rem; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; pointer-events: none; }
.spell > * { pointer-events: auto; }
.spell__bar { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem .45rem .45rem; border-radius: 40px 10px 10px 40px; background: linear-gradient(160deg, rgba(27,31,38,.94), rgba(14,16,20,.96)); border: 1px solid rgba(217,182,121,.45); box-shadow: 0 18px 40px -14px rgba(0,0,0,.9), 0 0 24px -8px rgba(217,182,121,.35); transform: rotate(-1.2deg); }
.spell__play { position: relative; width: 50px; height: 50px; padding: 0; border: none; background: none; color: var(--gold-hot); cursor: none; flex: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.spell__play:hover { transform: rotate(-8deg) scale(1.08); }
.spell__play svg { width: 100%; height: 100%; overflow: visible; }
.spell__play .ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.spell__play .tri { fill: rgba(217,182,121,.9); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; transition: opacity .25s, transform .3s; transform-origin: 25px 24px; }
.spell__play .bars path { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; opacity: 0; transition: opacity .25s; }
.spell.is-playing .spell__play .tri { opacity: 0; transform: scale(.6); }
.spell.is-playing .spell__play .bars path { opacity: 1; }
.spell.is-playing .spell__play .ring { animation: spellSpin 8s linear infinite; transform-origin: 24px 24px; }
@keyframes spellSpin { to { transform: rotate(360deg); } }
.spell__eq { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); display: flex; gap: 2px; align-items: flex-end; height: 10px; opacity: 0; transition: opacity .3s; }
.spell__eq i { width: 2px; height: 100%; background: var(--gold-hot); border-radius: 2px; transform-origin: bottom; animation: spellEq .9s ease-in-out infinite; }
.spell__eq i:nth-child(2) { animation-delay: -.3s; } .spell__eq i:nth-child(3) { animation-delay: -.6s; }
.spell.is-playing .spell__eq { opacity: 1; }
@keyframes spellEq { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.spell__ticket { position: relative; display: inline-flex; align-items: center; padding: .85rem 1.3rem; border: none; background: none; color: var(--gold-hot); font-family: var(--serif); font-style: italic; font-size: 1.05rem; cursor: none; transform: rotate(1.4deg); transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s; white-space: nowrap; }
.spell__ticket span { position: relative; }
.spell__ticket-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spell__ticket-line path { fill: none; stroke: rgba(217,182,121,.95); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.spell__ticket-line .t2 { stroke-width: .9; opacity: .45; }
.spell__ticket:hover { transform: rotate(-1deg) scale(1.05); color: var(--cream); }
.spell__ticket:hover .spell__ticket-line .t1 { animation: ticketRedraw .9s cubic-bezier(.6,0,.3,1); stroke: var(--cream); }
.spell__ticket::after { content: "✦"; position: absolute; right: -6px; top: -8px; font-size: .7rem; color: var(--gold-hot); animation: spellTwinkle 2.6s ease-in-out infinite; }
@keyframes spellTwinkle { 0%,100% { opacity: .2; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
/* the player card rises out of the bar while music plays (YouTube wants its player visible, 200px or more) */
.spell__stage { width: 236px; padding: 12px 12px 10px; border-radius: 6px; background: linear-gradient(160deg, rgba(27,31,38,.97), rgba(14,16,20,.98)); border: 1px solid rgba(217,182,121,.45); box-shadow: 0 24px 50px -18px rgba(0,0,0,.95); transform-origin: 80% 100%; opacity: 0; transform: translateY(14px) scale(.92) rotate(1deg); visibility: hidden; transition: opacity .4s, transform .5s cubic-bezier(.2,.9,.2,1.1), visibility 0s .5s; }
.spell.is-open .spell__stage { opacity: 1; transform: rotate(1deg); visibility: visible; transition-delay: 0s; }
.spell__frame { position: relative; padding: 5px; border: 1px solid rgba(217,182,121,.5); border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(12,14,18,1), inset 0 0 0 4px rgba(217,182,121,.25); }
.spell__player { width: 200px; height: 200px; margin: 0 auto; background: #000; overflow: hidden; }
.spell__player iframe, .spell__player > div { width: 200px !important; height: 200px !important; display: block; border: 0; }
.spell__meta { display: flex; flex-direction: column; align-items: center; margin: .6rem 0 .5rem; text-align: center; }
.spell__title { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--cream); }
.spell__artist { font-family: var(--type); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(217,182,121,.75); margin-top: .15rem; }
.spell__vol { display: flex; align-items: center; gap: .55rem; padding: 0 .3rem; cursor: none; }
.spell__vol svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--gold-hot); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spell__vol input { -webkit-appearance: none; appearance: none; flex: 1; height: 16px; background: transparent; cursor: none; }
.spell__vol input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-hot) var(--v, 55%), rgba(217,182,121,.25) var(--v, 55%)); }
.spell__vol input::-moz-range-track { height: 2px; background: rgba(217,182,121,.25); }
.spell__vol input::-moz-range-progress { height: 2px; background: var(--gold-hot); }
.spell__vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F0E7CE, #D9B679 60%, #9C7A40); box-shadow: 0 0 8px rgba(217,182,121,.8); border: none; }
.spell__vol input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F0E7CE, #D9B679 60%, #9C7A40); border: none; }
.spell__vol input:focus-visible { outline: 1px dashed var(--gold-hot); outline-offset: 4px; }
.spell__hush { display: block; margin: .55rem auto 0; padding: 0; border: none; background: none; font-family: var(--hand); font-size: .9rem; color: rgba(240,231,206,.55); cursor: none; text-decoration: underline dotted rgba(217,182,121,.5); text-underline-offset: 3px; }
.spell__hush:hover { color: var(--gold-hot); }
/* the cat now naps on top of the bar in the bottom-right spots */
.cat[data-pos="br"] { bottom: 3.6rem; right: 2.2rem; }
@media (max-width: 600px) {
  .spell { right: .8rem; bottom: .8rem; }
  .spell__ticket { font-size: .92rem; padding: .7rem 1rem; }
  .spell__play { width: 42px; height: 42px; }
}

/* ===== TERRITORIES v2: an old sea-chart inked straight onto the night ===== */
.terr { grid-template-columns: minmax(0, 560px) minmax(0, 1fr) !important; }
.terr__map { margin-left: calc(-1 * clamp(2rem, 9vw, 11rem)) !important; }
.terr__map .tmap__svg { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%); }
.tmap__svg { --ink: rgba(222,204,165,.85); --ink-soft: rgba(222,204,165,.45); --ink-faint: rgba(222,204,165,.16); }
.tmap__rhumb { stroke: var(--ink-faint); stroke-width: .6; opacity: .55; }
.tmap__contour { fill: none; stroke: var(--ink-soft); stroke-width: .8; stroke-linecap: round; }
.tmap__coast { stroke: var(--ink) !important; stroke-width: 1.8 !important; }
.tmap__shore { fill: none; stroke: var(--ink-soft); stroke-width: .8; stroke-linecap: round; }
.tmap__island { fill: none !important; stroke: var(--ink) !important; stroke-width: 1.2 !important; }
.tmap__rivers path { stroke: var(--ink-soft) !important; stroke-width: .9 !important; }
.tmap__roads path { fill: none; stroke: rgba(222,204,165,.32); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
.tmap__border { stroke: var(--ink-soft) !important; stroke-dasharray: 6 3 1.5 3 !important; }
.tmap__peaks path { stroke: var(--ink) !important; stroke-width: 1 !important; }
.tmap__peaks .hatch { stroke: var(--ink-soft) !important; stroke-width: .7 !important; opacity: 1 !important; }
.tmap__compass circle, .tmap__compass path { stroke: var(--ink) !important; }
.tmap__compass .thin { stroke: var(--ink-soft) !important; stroke-width: .6; }
.tmap__compass .fill { fill: var(--ink-soft) !important; }
.tmap__compass text { fill: var(--ink) !important; font-family: var(--caps); font-weight: 700; }
.tmap__lbl { font-family: var(--caps) !important; font-style: normal !important; font-weight: 600; fill: var(--ink-soft) !important; letter-spacing: .12em !important; }
.tmap__lbl.sea { font-style: italic !important; letter-spacing: .35em !important; font-size: 11px !important; }
.tmap__lbl.big { font-size: 16px !important; letter-spacing: .5em !important; }
.tmap__lbl.region { font-family: var(--serif) !important; font-style: italic !important; letter-spacing: .04em !important; font-size: 13px !important; fill: rgba(222,204,165,.5) !important; }
.tmap__lbl.state { font-size: 7px !important; letter-spacing: .4em !important; fill: rgba(222,204,165,.3) !important; }
/* pins: a little four-point star that twirls in, with an inked underline under the name */
.tmap__pin .pin-dot { fill: var(--ink-soft) !important; }
.tmap__pin .pin-mark { opacity: 0; transform: scale(.2) rotate(-90deg); transition: opacity .25s, transform .55s cubic-bezier(.2,.9,.25,1.4); }
.tmap__pin .pin-star { fill: rgba(217,182,121,.9); stroke: var(--gold-hot); stroke-width: 1; stroke-linejoin: round; }
.tmap__pin .pin-glint { fill: none; stroke: var(--gold-hot); stroke-width: 1.1; stroke-linecap: round; opacity: .7; }
.tmap__pin.is-on .pin-mark { opacity: 1; transform: none; filter: drop-shadow(0 0 6px rgba(217,182,121,.9)); }
.tmap__pin .pin-ul { fill: none; stroke: var(--gold-hot); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s .15s cubic-bezier(.6,0,.3,1); }
.tmap__pin.is-on .pin-ul { stroke-dashoffset: 0; }
.tmap__pin text { font-family: var(--serif); font-size: 13px; }
/* three neat columns of places */
.terr__list { columns: 3 !important; column-gap: 1.8rem !important; max-width: 640px !important; }
.terr__list li { font-size: .95rem !important; padding: .5rem 0 !important; }
/* the "outside the circle" ribbon */
.terr__banner { position: relative; max-width: 600px; margin-top: 2rem; padding: 1.1rem 4.4rem 1.9rem; text-align: center; transform: rotate(-1.2deg); }
.terr__ribbon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.terr__ribbon .body { fill: rgba(239,227,196,.92); stroke: #6B4F2A; stroke-width: 1.4; }
.terr__ribbon .tail { fill: rgba(200,182,137,.9); stroke: #6B4F2A; stroke-width: 1.4; stroke-linejoin: round; }
.terr__ribbon .fold { fill: rgba(107,79,42,.75); stroke: #6B4F2A; stroke-width: 1; }
.terr__ribbon .edge { fill: none; stroke: rgba(107,79,42,.45); stroke-width: .8; stroke-dasharray: 3 3; }
.terr__banner p { position: relative; margin: 0; font-family: var(--book); font-size: .95rem; line-height: 1.4; color: #2A241A; }
.terr__banner b { font-family: var(--serif); font-style: italic; font-weight: 600; color: #7B3A26; }
@media (max-width: 900px) {
  .terr { grid-template-columns: 1fr !important; }
  .terr__map { margin: 0 auto !important; }
  .terr__list { columns: 2 !important; }
  .terr__banner { padding: 1.2rem 2.6rem 1.3rem; }
}

/* music card: no video, just title, mute and volume. The player itself stays tucked away off-screen */
.spell__player { position: fixed !important; left: -400px; bottom: 0; width: 200px !important; height: 200px !important; opacity: 0; pointer-events: none; overflow: hidden; }
.spell__stage { width: 250px; padding: .9rem 1rem .8rem; }
.spell__meta { margin: 0 0 .7rem; }
.spell__mute { width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: none; flex: none; }
.spell__mute svg { width: 100%; height: 100%; fill: none; stroke: var(--gold-hot); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spell__mute .x { opacity: 0; transition: opacity .2s; }
.spell__mute.is-muted .x { opacity: 1; }
.spell__mute.is-muted .w1, .spell__mute.is-muted .w2 { opacity: 0; }
.spell__mute:hover svg { stroke: var(--cream); }

/* compass rose + fading rhumb lines, up in the top-right beside the raven */
.terr__rose { --rw: 2400px; --cx: 81%; --cy: 14rem; position: absolute; top: calc(var(--cy) - var(--rw) / 2); left: calc(var(--cx) - var(--rw) / 2); width: var(--rw); height: auto; aspect-ratio: 1; pointer-events: none; z-index: 1;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 3.5%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.32) 26%, rgba(0,0,0,.2) 44%, rgba(0,0,0,.11) 62%, rgba(0,0,0,.05) 78%, transparent 92%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 3.5%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.32) 26%, rgba(0,0,0,.2) 44%, rgba(0,0,0,.11) 62%, rgba(0,0,0,.05) 78%, transparent 92%); }
.terr__rhumbs line { stroke: rgba(222,204,165,.28); stroke-width: .8; }
.terr__rhumbs line.major { stroke: rgba(222,204,165,.45); stroke-width: 1; }
.terr__compass circle, .terr__compass path { fill: none; stroke: rgba(222,204,165,.85); stroke-width: 1.2; }
.terr__compass .thin { stroke: rgba(222,204,165,.45); stroke-width: .8; }
.terr__compass .dash { stroke-dasharray: 2 4; }
.terr__compass .fill { fill: rgba(222,204,165,.4); }
.terr__compass text { fill: rgba(222,204,165,.85); font-family: var(--caps); font-weight: 700; font-size: 18px; }
.terr__rhumbs { animation: roseTurn 300s linear infinite; transform-origin: 1400px 1400px; }
@keyframes roseTurn { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .terr__rose { --rw: 1800px; } }

/* rose lines may rise into the Instagram section, but always pass beneath its film strips */
.territories { overflow-x: clip !important; overflow-y: visible !important; }
.gram.gram { z-index: 3; }
.terr__rose { z-index: 0 !important; max-width: none !important; max-height: none !important; }

/* map labels sit in a little dark tag so they never tangle with the linework */
.tmap__pin .pin-tag { fill: rgba(14,17,22,.94); stroke: rgba(217,182,121,.7); stroke-width: .9; opacity: 0; transition: opacity .25s .1s; }
.tmap__pin.is-on .pin-tag { opacity: 1; }
.tmap__pin text { stroke: none !important; }
.tmap__pin .pin-ul { display: none; }

/* QLD / NSW border: runs off to the left edge of the screen, drawn above the map's fade */
.terr__map { position: relative; }
.tmap__statesvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; max-width: none; }
.tmap__stateline { fill: none; stroke: rgba(222,204,165,.5); stroke-width: 1.1; stroke-dasharray: 7 4 1.5 4; stroke-linecap: round; }
.tmap__statelbl { font-family: var(--caps); font-weight: 700; font-size: 9px; letter-spacing: .45em; fill: rgba(222,204,165,.55); }
/* the travel banner: an inked ribbon, drawn not filled */
.terr__banner { padding: 1.3rem 5rem 1.9rem !important; max-width: 680px !important; transform: rotate(-1.4deg); }
.terr__ribbon .body { fill: rgba(222,204,165,.05) !important; stroke: rgba(222,204,165,.85) !important; stroke-width: 1.4 !important; }
.terr__ribbon .body2 { fill: none; stroke: rgba(222,204,165,.35); stroke-width: .8; }
.terr__ribbon .tail { fill: rgba(222,204,165,.03) !important; stroke: rgba(222,204,165,.8) !important; stroke-width: 1.3 !important; stroke-linejoin: round; stroke-linecap: round; }
.terr__ribbon .fold { fill: none !important; stroke: rgba(222,204,165,.8) !important; stroke-width: 1.2 !important; }
.terr__ribbon .tail-hatch, .terr__ribbon .fold-hatch { fill: none; stroke: rgba(222,204,165,.4); stroke-width: .8; stroke-linecap: round; }
.terr__banner p { font-family: var(--type) !important; font-size: .72rem !important; letter-spacing: .1em; line-height: 1.7 !important; text-transform: uppercase; color: rgba(240,231,206,.85) !important; }

/* ===== JOURNAL v2: grimoire entries under glass, with the whimsy back ===== */
.invocation__video-wrap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 280px, #000 calc(100% - 320px), transparent 100%) !important; mask-image: linear-gradient(180deg, transparent 0, #000 280px, #000 calc(100% - 320px), transparent 100%) !important; }
.journal { overflow: hidden; }
.journal > .container { position: relative; z-index: 3; }
.journal__tarot.jt-1 { top: 7rem; left: 3%; --r: -10deg; width: 140px; opacity: .8; }
.journal__tarot.jt-2 { bottom: 8rem; right: 4%; --r: 9deg; animation-delay: -5s; opacity: .75; }
.journal__deco { position: absolute; pointer-events: none; color: var(--gold-hot); opacity: .45; z-index: 1; }
.jd-moth { width: 80px; height: 60px; top: 6rem; right: 14%; animation: mothFlutter 6s ease-in-out infinite; }
.jd-moon { width: 150px; height: 40px; top: 3.5rem; left: 50%; translate: -50% 0; opacity: .3; color: var(--sage-warm); }
.jd-candle { top: auto; bottom: 10rem; left: 6%; }
.jd-feather { width: 28px; height: 110px; top: 42%; right: 3%; color: var(--sage-warm); opacity: .4; transform: rotate(18deg); }
.journal__runes { position: absolute; left: 1.6rem; top: 45%; display: flex; flex-direction: column; gap: 1.3rem; opacity: .45; z-index: 1; }
.journal__runes svg { width: 18px; height: 28px; color: var(--gold-hot); animation: runeGlow 14s ease-in-out infinite; }
.journal__runes svg:nth-child(2) { animation-delay: 3s; } .journal__runes svg:nth-child(3) { animation-delay: 6s; }
@media (max-width: 1100px) { .journal__tarot, .jd-feather, .journal__runes { display: none; } }
/* the entries: dark glass pages with an arched window, like a tarot card */
.journal__pin { display: none !important; }
.journal__entry { --r: 0deg !important; }
.journal__entry:nth-child(1) { transform-origin: bottom right; }
.journal__link { position: relative; color: var(--cream); background: rgba(27,31,38,.5) !important; background-image: radial-gradient(ellipse at 30% 0%, rgba(217,182,121,.10), transparent 60%) !important; clip-path: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(217,182,121,.35); border-radius: 10px; padding: 14px 14px 1.5rem;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .4s, box-shadow .4s; }
.journal__link::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(217,182,121,.14); border-radius: 6px; pointer-events: none; }
.journal__link:hover { border-color: rgba(217,182,121,.75); box-shadow: 0 40px 70px -28px rgba(0,0,0,.95), 0 0 30px -8px rgba(217,182,121,.35); }
.journal__img { aspect-ratio: 4 / 3; border-radius: 999px 999px 4px 4px / 46% 46% 4px 4px; background: #11141a; box-shadow: inset 0 0 0 1px rgba(217,182,121,.35); }
.journal__img img { filter: sepia(.35) saturate(.75) contrast(.95) brightness(.9); }
.journal__link:hover .journal__img img { filter: none; }
.journal__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(217,182,121,.4), inset 0 -40px 60px -30px rgba(10,12,16,.85); pointer-events: none; }
.journal__postmark { right: auto !important; left: 50% !important; bottom: .7rem !important; width: auto !important; height: auto !important; translate: -50% 0; transform: none !important; border-radius: 999px !important; padding: .32rem .8rem !important; border: 1px solid rgba(217,182,121,.5) !important; background: rgba(14,17,22,.55) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--gold-hot) !important; font-size: .56rem !important; letter-spacing: .2em !important; filter: none !important; box-shadow: none !important; white-space: nowrap; }
.journal__body { padding: 1rem .6rem 0 !important; text-align: center; }
.journal__num { display: block; font-family: var(--serif); font-size: .85rem; letter-spacing: .25em; color: rgba(217,182,121,.7); margin-bottom: .2rem; }
.journal__meta { color: rgba(169,175,140,.85) !important; font-size: .58rem !important; }
.journal__body h3 { color: var(--cream) !important; font-weight: 400 !important; font-size: 1.3rem !important; }
.journal__body p { color: rgba(240,231,206,.68) !important; font-size: .93rem !important; }
.journal__more { display: inline-flex !important; align-items: center; color: var(--gold-hot) !important; border-bottom: none !important; font-family: var(--serif) !important; font-style: italic; font-size: 1rem !important; }
.journal__link:hover .harrow { transform: translateX(6px); }
.journal__all a { display: inline-flex; align-items: center; color: var(--gold-hot) !important; border-bottom: none !important; }

/* map place names: a glass pill floated over the map (HTML, so the blur works) */
.tmap__pin text, .tmap__pin .pin-tag { display: none !important; }
.tmap__tip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; white-space: nowrap; padding: .38rem .95rem .42rem; border-radius: 999px;
  font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--cream); letter-spacing: .01em;
  background: rgba(27,31,38,.42); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(217,182,121,.55); box-shadow: 0 10px 26px -10px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px -6px rgba(217,182,121,.45);
  opacity: 0; transform: translate(var(--tx, 14px), -50%) scale(.92); transform-origin: var(--to, left) center; transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.25,1.2); }
.tmap__tip.is-on { opacity: 1; transform: translate(var(--tx, 14px), -50%) scale(1); }

/* journal carousel: centre card forward, neighbours step back and fade */
.journal__stage { position: relative; height: 640px; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; touch-action: pan-y; }
.journal__track { position: relative; height: 100%; }
.journal__entry.jc { position: absolute; left: 50%; top: 1.5rem; width: min(360px, 78vw); margin: 0 !important; opacity: var(--o, 0) !important;
  transform: translateX(calc(-50% + var(--x, 0px))) scale(var(--s, 1)) rotate(var(--rz, 0deg)) !important; transform-origin: 50% 70%;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s !important; filter: saturate(.7) brightness(.8); }
.journal__entry.jc.is-active { filter: none; }
.journal__entry.jc:not(.is-active) .journal__link { cursor: pointer; }
.journal__entry.jc.is-active:hover { transform: translateX(calc(-50% + var(--x, 0px))) translateY(-8px) scale(1.01) !important; }
.journal__entry.jc .journal__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.journal__entry.jc .journal__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.journal__stage { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.journal__controls { display: flex; justify-content: center; gap: 1.4rem; margin-top: .5rem; position: relative; z-index: 4; }
.journal__controls .whispers__btn { width: 58px; height: 58px; }
.journal__count { text-align: center; margin-top: .9rem; font-family: var(--type); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(169,175,140,.7); }
@media (max-width: 700px) { .journal__stage { height: 600px; } }

/* ===== FOOTER v2: logo, hours, contact, ABN and hand-drawn socials ===== */
.colophon__row { grid-template-columns: 1.6fr .8fr 1fr 1fr !important; align-items: start; }
.colophon__brand { display: flex; gap: 2.6rem; align-items: flex-start; }
.colophon__logo { width: 52px; height: auto; flex: none; opacity: .85; }
.colophon__motto { margin: .2rem 0 .8rem; }
.colophon__blurb { font-size: .82rem; line-height: 1.6; color: rgba(240,231,206,.42); max-width: 34ch; }
.colophon__addr { color: rgba(240,231,206,.5); font-size: .88rem; line-height: 1.5; padding-top: .45rem !important; }
.colophon__hours li { color: rgba(240,231,206,.6); font-size: .9rem; }
.colophon__hours span { display: inline-block; min-width: 5.6rem; font-family: var(--type); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hot); }
.colophon__note { font-family: var(--hand); color: var(--sage-warm) !important; font-size: .92rem !important; padding-top: .5rem !important; }
.colophon__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; padding: 1.8rem 0 2rem; margin-top: .5rem; position: relative; }
.colophon__socials::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 10px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'><path d='M2 6 Q 150 2 300 5 T 598 4' fill='none' stroke='%23D9B679' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat; }
.colophon__soc { width: 46px; height: 46px; display: grid; place-items: center; color: var(--gold-hot); border-radius: 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1.3), color .3s, filter .3s; }
.colophon__soc svg { width: 32px; height: 32px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.colophon__soc .dot, .colophon__soc .fillpath { fill: currentColor; }
.colophon__soc:nth-child(odd) { transform: rotate(-4deg); } .colophon__soc:nth-child(even) { transform: rotate(3deg); }
.colophon__soc:hover { transform: rotate(0) scale(1.18) translateY(-3px); color: var(--cream); filter: drop-shadow(0 0 10px rgba(217,182,121,.7)); }
.colophon__bottom { font-style: normal !important; font-family: var(--type); font-size: .64rem !important; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,231,206,.4) !important; }
@media (max-width: 900px) { .colophon__row { grid-template-columns: 1fr 1fr !important; } .colophon__brand { grid-column: 1 / -1; } }
/* the nav logo bows out once the footer (which has its own) comes into view */
.chrome-logo.is-hidden { opacity: 0 !important; transform: translateY(-8px); pointer-events: none; }

/* textured logos: softer gilt, less glare */
.chrome-logo .logo-light { filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)) !important; opacity: .92; }
.chrome-logo.is-on-light .logo-light { opacity: 0; }
.colophon__addr a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; transition: color .3s; }
.colophon__addr a:hover { color: var(--gold-hot); }

.colophon__bottom { justify-content: center !important; text-align: center; }

/* ===== INVOCATION v2 — "The Reading" ===== */
.invocation--reading { min-height: 100vh; padding: 9rem 1.5rem 8rem; display: block; text-align: center; overflow-x: clip !important; }
.invocation--reading::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 58%, rgba(91,20,20,.32), transparent 70%), linear-gradient(180deg, rgba(12,14,16,.0) 0%, rgba(20,10,10,.85) 22%, rgba(16,8,8,.9) 78%, rgba(10,6,6,0) 100%); }
  background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(91,20,20,.28), transparent 70%), linear-gradient(180deg, #0c0e10 0%, #140a0a 55%, #0a0606 100%); }
.rd-glow { position: absolute; left: 50%; top: 58%; width: 70vmin; height: 70vmin; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(217,182,121,.10), transparent 65%); filter: blur(10px); opacity: 0; transition: opacity 2.4s ease; pointer-events: none; }
.rd-geo { position: absolute; left: 50%; top: 58%; width: min(1060px, 120vw); height: auto; max-width: none !important; transform: translate(-50%,-50%); pointer-events: none; z-index: 0; overflow: visible; }
.rd-geo circle, .rd-geo path { fill: none; stroke: var(--gold-hot); stroke-width: .9; stroke-opacity: .2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rd-geo .g3 { stroke-opacity: .12; }
.rd-geo .gk { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; transition: opacity 2s ease 1.6s; }
.rd-geo .gd { fill: var(--gold-hot); fill-opacity: .5; stroke: none; opacity: 0; transition: opacity 1s ease 2.2s; }
.rd-geo > * { transform-origin: 500px 500px; }
.invocation.is-cast .rd-geo circle:not(.gd), .invocation.is-cast .rd-geo .gt { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.6,0,.2,1); }
.invocation.is-cast .rd-geo .g1 { transition-delay: .2s; } .invocation.is-cast .rd-geo .g2 { transition-delay: .5s; }
.invocation.is-cast .rd-geo .gt { transition-delay: .8s; transition-duration: 2.2s; }
.invocation.is-cast .rd-geo .gk, .invocation.is-cast .rd-geo .gd, .invocation.is-cast .rd-glow { opacity: 1; }
.invocation.is-cast .rd-geo { animation: rdTurn 180s linear infinite; }
@keyframes rdTurn { to { transform: translate(-50%,-50%) rotate(360deg); } }

.rd { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; }
.rd-head .lbl { display: block; margin-bottom: 1.4rem; }
.invocation .rd-title { font-family: var(--serif); font-style: normal; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; color: var(--cream); max-width: 18ch; margin: 0 auto; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }
.invocation .rd-title em { font-style: italic; color: var(--gold-hot); }
.rd-head { opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.invocation.is-cast .rd-head { opacity: 1; transform: none; }

.rd-spread { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: clamp(1.2rem, 4vw, 3.6rem); margin: 4.5rem auto 0; perspective: 1400px; --mx: 0; --my: 0; }
.rd-altar { position: absolute; left: -8%; right: -8%; width: 116%; top: calc(220px * 1.72 + 18px); height: 10px; overflow: visible; pointer-events: none; }
.rd-altar path { fill: none; stroke: var(--gold-hot); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.invocation.is-cast .rd-altar path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .3s; }
.rd-card { margin: 0; opacity: 0; transform: translateY(60px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.4s + var(--i) * .16s); }
.invocation.is-cast .rd-card { opacity: 1; transform: none; }
.rd-card__tilt { transform-style: preserve-3d; transform: rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 8deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.rd-card:nth-of-type(1) .rd-card__tilt, .rd-card:nth-of-type(3) .rd-card__tilt { margin-top: 18px; }
.rd-card__inner { position: relative; aspect-ratio: 1 / 1.72; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 1.3s cubic-bezier(.7,0,.2,1); transition-delay: calc(1.2s + var(--i) * .45s); }
.invocation.is-cast .rd-card__inner { transform: rotateY(0deg); }
.rd-card__back, .rd-card__face { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(217,182,121,.35); }
.rd-card__face { background: #efe3c4; }
.rd-card__face img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.18) contrast(1.02); }
.rd-card__back { transform: rotateY(180deg); display: grid; place-items: center; color: var(--gold-hot);
  background: radial-gradient(circle at 50% 50%, rgba(217,182,121,.14), transparent 55%), repeating-linear-gradient(45deg, rgba(217,182,121,.05) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(217,182,121,.05) 0 1px, transparent 1px 12px), linear-gradient(160deg, #2a0d0d, #120708); }
.rd-card__back::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(217,182,121,.55); border-radius: 6px; box-shadow: inset 0 0 0 4px rgba(18,7,8,1), inset 0 0 0 5px rgba(217,182,121,.25); }
.rd-card__back svg { width: 46%; height: auto; opacity: .75; }
.rd-card__num { position: absolute; top: 20px; left: 0; right: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; letter-spacing: .2em; opacity: .8; }
.rd-card__glint { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,240,200,.55) 48%, transparent 62%); transform: translateX(-120%); mix-blend-mode: soft-light; pointer-events: none; }
.invocation.is-cast .rd-card__glint { animation: rdGlint 1.4s ease-out forwards; animation-delay: calc(2.2s + var(--i) * .45s); }
@keyframes rdGlint { to { transform: translateX(120%); } }
.rd-card figcaption { margin-top: 2.6rem; display: grid; gap: .35rem; opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; transition-delay: calc(2s + var(--i) * .45s); }
.invocation.is-cast .rd-card figcaption { opacity: 1; transform: none; }
.rd-card__pos { font-family: var(--type); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-warm); }
.rd-card figcaption strong { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.35rem; color: var(--cream); }
.rd-card__txt { font-family: var(--serif); font-size: .95rem; line-height: 1.45; color: rgba(240,231,206,.62); max-width: 24ch; margin: 0 auto; }
.rd-card:hover .rd-card__inner { box-shadow: none; }
.invocation.is-cast .rd-card:hover .rd-card__tilt { transform: translateY(-10px) rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 8deg)); }

.rd-close { margin-top: 4.5rem; opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease 3.1s, transform 1.2s ease 3.1s; }
.invocation.is-cast .rd-close { opacity: 1; transform: none; }
.invocation .rd-lede { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: rgba(240,231,206,.82); max-width: 44ch; margin: 0 auto 2.4rem; }
.invocation .rd-lede em { color: var(--gold-hot); }
.rd-cta { position: relative; display: inline-flex; align-items: center; gap: .9rem; padding: 1.3rem 2.4rem; border: none; background: radial-gradient(ellipse at 50% 50%, rgba(91,20,20,.55), rgba(18,7,8,.2) 75%); color: var(--cream); font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); cursor: none; transform: rotate(-.8deg); transition: transform .4s cubic-bezier(.2,.8,.2,1), color .3s; }
.rd-cta span, .rd-cta__arrow { position: relative; }
.rd-cta__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rd-cta__line path { fill: none; stroke: var(--gold-hot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rd-cta__line .t2 { stroke-width: .9; opacity: .45; }
.invocation.is-cast .rd-cta__line .t1 { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) 3.4s; }
.invocation.is-cast .rd-cta__line .t2 { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) 3.6s; }
.rd-cta__arrow { width: 40px; height: 16px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.rd-cta__arrow path { fill: none; stroke: var(--gold-hot); stroke-width: 1.6; stroke-linecap: round; }
.rd-cta::before { content: ""; position: absolute; inset: -18px -26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(217,182,121,.22), transparent 70%); opacity: 0; pointer-events: none; }
.invocation.is-cast .rd-cta::before { animation: rdBreathe 3.6s ease-in-out 4.8s infinite; }
@keyframes rdBreathe { 0%,100% { opacity: .15; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.rd-cta::after { content: "✦"; position: absolute; right: -8px; top: -10px; font-size: .8rem; color: var(--gold-hot); animation: spellTwinkle 2.6s ease-in-out infinite; }
.rd-cta:hover { transform: rotate(.6deg) scale(1.04); }
.rd-cta:hover .rd-cta__arrow { transform: translateX(6px); }
.rd-cta:hover .rd-cta__line .t1 { animation: ticketRedraw .9s cubic-bezier(.6,0,.3,1); }
.invocation .rd-note { margin: 2rem auto 0; font-family: var(--hand); font-size: .95rem; color: rgba(240,231,206,.55); max-width: 40ch; line-height: 1.8; }
.invocation .rd-alt { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; color: var(--sage-warm); display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.rd-alt a { color: var(--sage-warm); border-bottom: 1px solid rgba(169,175,140,.4); transition: color .3s, border-color .3s; }
.rd-alt a:hover { color: var(--gold-hot); border-color: var(--gold-hot); }
.rd-alt span { opacity: .5; }

@media (max-width: 760px) {
  .invocation--reading { padding: 7rem 1rem 6rem; }
  .rd-spread { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 3rem; }
  .rd-altar { top: calc((100vw - 3.4rem) / 3 * 1.72 + 18px); }
  .rd-card figcaption { margin-top: 1.4rem; }
  .rd-card figcaption strong { font-size: 1rem; }
  .rd-card__txt { display: none; }
  .rd-card__num { top: 10px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .invocation--reading *, .invocation--reading *::before, .invocation--reading *::after { transition: none !important; animation: none !important; }
}

/* upload scrap: readable, two clear lines */
.field label.scrap { font-variant: normal !important; display: flex !important; flex-direction: column; align-items: center; gap: .45rem; text-transform: none !important; letter-spacing: normal !important; font-family: var(--serif); padding: 1.3rem 1.2rem 1.2rem 2.8rem; }
.field label.scrap .scrap__txt { display: block; font-family: var(--serif); font-style: normal; font-size: 1.05rem; letter-spacing: .01em; text-transform: none; color: var(--cream); }
.field label.scrap .scrap__txt b { font-weight: 500; color: var(--gold-hot); }
.field label.scrap .scrap__txt u { text-decoration: underline; text-decoration-style: solid; text-decoration-color: rgba(217,182,121,.6); text-underline-offset: 4px; }
.field label.scrap .scrap__hint { display: block; font-family: var(--serif); font-style: italic; font-size: .88rem; letter-spacing: normal; text-transform: none; color: rgba(240,231,206,.6); line-height: 1.45; }

.colophon__motto em { color: #E0D2AE !important; opacity: .85; }

/* ===== Meet my familiars ===== */
.fam-btn { position: relative; display: inline-flex; align-items: center; gap: .6rem; margin: 1.8rem 0 0 5rem; padding: .3rem .2rem; border: none; background: none; color: var(--gold-hot); font-family: var(--hand); font-size: 1.05rem; cursor: none; transform: rotate(-3deg); transition: transform .4s cubic-bezier(.2,.8,.2,1), color .3s; }
.fam-btn span { border-bottom: 1px dashed rgba(217,182,121,.5); padding-bottom: .15rem; }
.fam-btn__arrow { position: absolute; right: -4.4rem; top: -1.9rem; width: 60px; height: 44px; overflow: visible; }
.fam-btn svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fam-btn__cat { width: 34px; height: 28px; overflow: visible; transform-origin: 50% 90%; }
.fam-btn__cat .eye { stroke-width: 1.5; }
.fam-btn:hover { transform: rotate(-1deg) scale(1.05); color: var(--cream); }
.fam-btn:hover .fam-btn__cat { animation: famWiggle .7s ease-in-out; }
@keyframes famWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }

.familiars { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1.5rem; background: rgba(8,10,8,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.familiars.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.familiars__card { position: relative; width: min(620px, 100%); padding: 2.6rem 2.2rem 2rem; text-align: center; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 0%, rgba(217,182,121,.12), transparent 60%), linear-gradient(170deg, #1a2118, #0f130e);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(217,182,121,.28), inset 0 0 0 7px rgba(15,19,14,1), inset 0 0 0 8px rgba(217,182,121,.14);
  transform: translateY(24px) scale(.96); transition: transform .6s cubic-bezier(.2,.9,.2,1); }
.familiars.is-open .familiars__card { transform: none; }
.familiars__close { position: absolute !important; top: -1.2rem; right: -1.2rem; }
.familiars__eyebrow { display: block; font-family: var(--caps); font-variant: small-caps; letter-spacing: .3em; font-size: .72rem; color: var(--sage-warm); }
.familiars__title { margin: .5rem 0 1.8rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--cream); }
.familiars__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.fam-pol { margin: 0; padding: .7rem .7rem 0; background: #EFE3C4; box-shadow: 0 20px 36px -18px rgba(0,0,0,.9); transform: rotate(var(--r)) translateY(40px) scale(.9); opacity: 0; transition: transform .8s cubic-bezier(.2,.9,.2,1), opacity .6s ease; transition-delay: var(--d); }
.familiars.is-open .fam-pol { transform: rotate(var(--r)); opacity: 1; }
.fam-pol:hover { transform: rotate(0deg) scale(1.03) !important; transition-delay: 0s; z-index: 2; }
.fam-pol img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: sepia(.12); }
.fam-pol figcaption { display: grid; gap: .1rem; padding: .7rem .2rem .9rem; color: #2A241A; }
.fam-pol figcaption b { font-family: var(--hand); font-weight: 400; font-size: 1.25rem; }
.fam-pol figcaption span { font-family: var(--serif); font-style: italic; font-size: .82rem; line-height: 1.35; color: #6B4F2A; }
.fam-pol figcaption span i { font-style: normal; }
.familiars__note { margin: 1.8rem auto 0; max-width: 36ch; font-family: var(--serif); font-style: italic; color: rgba(240,231,206,.72); }
.familiars__more { margin-top: 1rem; border: none; background: none; padding: 0; font-family: var(--type); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hot); border-bottom: 1px solid rgba(217,182,121,.4); cursor: none; }
.familiars__more:hover { color: var(--cream); }
@media (max-width: 520px) { .familiars__card { padding: 2.2rem 1.2rem 1.6rem; } .familiars__pair { gap: .8rem; } .fam-pol { padding: .45rem .45rem 0; } .fam-pol figcaption span { font-size: .72rem; } .fam-btn { margin-left: 2rem; } }
@media (prefers-reduced-motion: reduce) { .familiars, .familiars__card, .fam-pol { transition: none !important; } }

.rite-weddings .weddings__intro .chapter__lede { max-width: 68ch; }
@media (max-width: 1200px) { .rite-weddings .tarot-float { display: none; } }

.whispers__stat { margin-top: 1.2rem; font-family: var(--type); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-warm); }
.whispers__stars { color: var(--gold-hot); letter-spacing: .2em; margin-right: .5rem; }
.whispers__head h2 { max-width: none !important; font-size: clamp(2rem, 3.6vw, 3.4rem) !important; }
@media (min-width: 900px) { .whispers__head h2 { white-space: nowrap; } }
.whispers__head h2 em { color: var(--gold-hot); }
.frame__cap h3 { margin: 0; font-weight: 400; }

/* 12-item menu: tighter scale so the full list fits one screen */
.nav-overlay li { font-size: clamp(1.25rem, min(3.9vh, 5vw), 2.7rem) !important; }
.nav-body .nav-list, .nav-overlay ul.nav-list { gap: clamp(.15rem, 1vh, .6rem) !important; }

/* ===== Footer layout v3: one even row (desktop) → brand + 4 even columns (tablet) → brand + 2×2 (phone) ===== */
.colophon__row { grid-template-columns: 1.7fr 1fr 1fr 1.25fr 1fr !important; gap: clamp(1.6rem, 3vw, 3rem) !important; align-items: start; padding-bottom: 3rem !important; }
.colophon__row > div:not(.colophon__brand) { padding-top: .2rem; }
.colophon .colophon__h { padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 1px solid rgba(217,182,121,.18); }
.colophon__brand { gap: 1.6rem !important; }
.colophon__blurb { max-width: 32ch; }
@media (max-width: 1100px) {
  .colophon__row { grid-template-columns: repeat(4, 1fr) !important; row-gap: 2.6rem !important; }
  .colophon__brand { grid-column: 1 / -1; justify-content: center; align-items: center; text-align: left; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 700px) {
  .colophon__row { grid-template-columns: 1fr 1fr !important; }
  .colophon__brand { flex-direction: column; text-align: center; }
  .colophon__blurb { margin: 0 auto; }
}

/* ===== MENU v3 — two categorised columns, quieter background ===== */
.nav-body { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) !important; gap: clamp(2rem, 4vw, 4rem) !important; }
.nav-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: clamp(1.2rem, 3vh, 2.2rem); align-items: start; }
.nav-group__h { margin: 0 0 clamp(.6rem, 1.8vh, 1.2rem); padding-bottom: .55rem; border-bottom: 1px solid rgba(217,182,121,.22); font-family: var(--caps); font-variant: small-caps; letter-spacing: .3em; font-size: .8rem; color: var(--gold-hot); }
.nav-group__h span { color: var(--sage-warm); letter-spacing: .2em; }
.nav-overlay .nav-cols li { font-size: clamp(1.15rem, min(3.6vh, 2.5vw), 2.3rem) !important; }
.nav-overlay .nav-cols ul.nav-list { gap: clamp(.2rem, 1.3vh, .8rem) !important; margin: 0; }
.nav-cta { grid-column: 1 / -1; }
.nav-summons { display: inline-flex; align-items: baseline; gap: .9rem; padding: .7rem 1.4rem; border: 1px solid rgba(217,182,121,.5); border-radius: 999px; background: rgba(217,182,121,.07); color: var(--gold-hot); font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.6vh, 1.5rem); transition: background .3s, color .3s, transform .3s; opacity: 0; transform: translateY(10px); transition-delay: .5s; }
.nav-overlay.is-open .nav-summons { opacity: 1; transform: none; }
.nav-summons::before { content: "✧"; }
.nav-summons .nl-latin { display: inline; margin: 0; font-size: .62rem; }
.nav-summons:hover { background: var(--gold-hot); color: var(--void); transition-delay: 0s; }
.nav-summons:hover .nl-latin { color: var(--void); }
/* quieter backdrop */
.nav-overlay.is-open .nav-deco .nd { opacity: .14 !important; }
.nav-deco__runes svg { opacity: .09 !important; }
.nav-deco__grass { opacity: .3 !important; }
.nav-overlay.is-open .nav-circle { opacity: .045 !important; }
.nav-overlay.is-open .nr-b1, .nav-overlay.is-open .nr-b2 { opacity: .4 !important; }
.nav-overlay::before { background: linear-gradient(90deg, rgba(6,8,6,.95) 0%, rgba(6,8,6,.88) 45%, rgba(6,8,6,.55) 66%, rgba(6,8,6,.2) 85%) !important; }
@media (max-width: 900px) {
  .nav-body { grid-template-columns: 1fr !important; }
  .nav-overlay .nav-cols li { font-size: clamp(1.1rem, 3.2vh, 1.6rem) !important; }
  .nav-overlay .nav-cols li .nl-latin { display: none; }
}
@media (max-width: 520px) { .nav-cols { grid-template-columns: 1fr; } .nav-overlay__inner { overflow-y: auto; } }

/* menu candles video: footage shot on black, 'screen' drops the black so only flame + glow remain */
.nav-candles { position: absolute; left: 50%; bottom: calc(-0.08 * min(680px, 52vw)); transform: translateX(-50%); width: min(680px, 52vw); height: auto; max-width: none !important; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.6s ease .4s;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%); }
.nav-overlay.is-open .nav-candles.is-ready { opacity: .38; }
@media (max-width: 900px) { .nav-candles { width: 90vw; bottom: calc(-0.08 * 90vw); } }
@media (prefers-reduced-motion: reduce) { .nav-candles { display: none; } }

.keeper__body p { max-width: 82ch !important; }
@media (min-width: 801px) { .keeper__grid { grid-template-columns: 4fr 7fr !important; } }

.design__close { text-align: right; }
.design__close .chapter__seals { justify-content: flex-end; width: fit-content; max-width: 100%; margin-left: auto; }
.design__close .chapter__cta { margin-left: auto; }

/* wedding polaroids: one handwritten line each, in a mix of hands, kept clear of the open button */
.pile .polaroid__cap { position: absolute; left: .9rem; right: 2.9rem; bottom: .55rem; top: auto; height: 2.2rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: visible; letter-spacing: 0; line-height: 1; text-align: center; font-size: 1.15rem; color: #2b3140; transform: rotate(var(--cr, -1.5deg)); transform-origin: center; }
.pile .hand-0 .polaroid__cap { font-family: "Caveat", cursive; font-size: 1.3rem; color: #27324a; --cr: -2deg; }
.pile .hand-1 .polaroid__cap { font-family: "Reenie Beanie", cursive; font-size: 1.45rem; color: #3a3530; --cr: 1.5deg; }
.pile .hand-2 .polaroid__cap { font-family: "Nothing You Could Do", cursive; font-size: .92rem; color: #2a2f45; --cr: -1deg; }
.pile .hand-3 .polaroid__cap { font-family: "Covered By Your Grace", cursive; font-size: 1.2rem; color: #4a3423; --cr: 2deg; }
.pile .hand-4 .polaroid__cap { font-family: "Shadows Into Light Two", cursive; font-size: 1.1rem; color: #33384a; --cr: -2.5deg; }
.pile .hand-5 .polaroid__cap { font-family: "La Belle Aurore", cursive; font-size: 1.05rem; color: #2e2a26; --cr: .5deg; }
.pile .hand-6 .polaroid__cap { font-family: var(--hand); font-size: .82rem; color: #3b2f22; --cr: -1.5deg; }

/* polaroid pile breaks out of the container to use the full screen width */
.rite-weddings { overflow-x: clip; }
.rite-weddings .pile { width: min(1500px, 86vw); margin-left: 50%; transform: translateX(-50%); height: clamp(600px, 76vh, 820px); margin-top: 3.5rem; }
.rite-weddings .pile__hint { margin-top: 5rem; }
@media (max-width: 700px) { .rite-weddings .pile { height: 1100px; } }

/* ===== RITE II — business film ===== */
.rite-film { position: relative; padding: 9rem 0 8rem; overflow-x: clip; }
.film-intro { max-width: 860px; }
.film-intro .chapter__lede { max-width: 64ch; }
.reel-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); margin-top: 3.5rem; }
.reel-card { position: relative; aspect-ratio: 16 / 9; border: none; padding: 0; border-radius: 4px; overflow: hidden; cursor: none; background: #0c0e0c center / cover no-repeat; box-shadow: 0 24px 50px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(217,182,121,.22); transition: transform .5s cubic-bezier(.2,.9,.2,1), box-shadow .4s; }
.reel-card:nth-child(3n+1) { transform: rotate(-.8deg); } .reel-card:nth-child(3n+2) { transform: translateY(18px) rotate(.6deg); } .reel-card:nth-child(3n) { transform: rotate(-.4deg); }
.reel-card:hover { transform: translateY(-4px) rotate(0) scale(1.02); box-shadow: 0 34px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(217,182,121,.55); }
.reel-card::before, .reel-card::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; z-index: 3; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(10,13,10,.85) 8px 12px, transparent 12px 20px); opacity: .85; pointer-events: none; }
.reel-card::before { top: 4px; } .reel-card::after { bottom: 4px; }
.reel-card__slate { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(217,182,121,.12), transparent 65%), repeating-linear-gradient(135deg, rgba(217,182,121,.04) 0 1px, transparent 1px 14px), linear-gradient(160deg, #1b1f19, #0c0e0c); transition: opacity .6s; }
.reel-card__slate i { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.6rem); color: rgba(240,231,206,.75); }
.reel-card.has-thumb .reel-card__slate { opacity: 0; }
.reel-card.has-thumb { filter: sepia(.18) saturate(.9); }
.reel-card:hover { filter: none; }
.reel-card__play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%) scale(.9); border-radius: 50%; border: 1px solid rgba(240,231,206,.7); background: rgba(10,13,10,.45); backdrop-filter: blur(4px); z-index: 2; transition: transform .4s, background .3s; }
.reel-card__play::after { content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-40%, -50%); border-left: 14px solid var(--cream); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.reel-card:hover .reel-card__play { transform: translate(-50%, -50%) scale(1.05); background: rgba(217,182,121,.85); }
.reel-card__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.2rem 1rem .9rem; text-align: left; background: linear-gradient(180deg, transparent, rgba(8,10,8,.85)); display: grid; gap: .15rem; }
.reel-card__cap .tag { font-family: var(--type); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hot); }
.reel-card__cap b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--cream); }
.reel-card.is-playing { transform: none !important; filter: none; }
.reel-card.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }
.reel-card.is-playing .reel-card__play, .reel-card.is-playing .reel-card__cap { display: none; }
.film-clients { margin-top: 4.5rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .6rem 1.6rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: rgba(240,231,206,.62); }
.film-clients span:not(.film-clients__lbl)::before { content: "✦"; font-style: normal; font-size: .55rem; color: var(--gold-hot); margin-right: .7rem; vertical-align: .25em; opacity: .7; }
.film-clients__lbl { width: 100%; text-align: center; font-family: var(--type); font-style: normal; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage-warm); margin-bottom: .2rem; }
.film-close { margin-top: 3.5rem; text-align: right; }
.film-close .chapter__seals { justify-content: flex-end; width: fit-content; max-width: 100%; margin-left: auto; }
.film-close__note { margin: 1.2rem 0 0 auto; max-width: 46ch; font-family: var(--hand); font-size: .95rem; line-height: 1.8; color: rgba(240,231,206,.6); }
.film-close__more { display: inline-block; margin-left: 1.6rem; font-family: var(--type); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-warm); border-bottom: 1px solid rgba(169,175,140,.4); }
.film-close__more:hover { color: var(--gold-hot); }
@media (max-width: 900px) { .reel-wall { grid-template-columns: repeat(2, 1fr); } .reel-card:nth-child(n) { transform: none; } }
@media (max-width: 560px) { .reel-wall { grid-template-columns: 1fr; } .film-close { text-align: left; } .film-close .chapter__seals { margin-left: 0; justify-content: flex-start; } .film-close__note { margin-left: 0; } }
/* wedding film half: package links + hand-off to the photos */
.hscroll__pkgs { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.4rem !important; }
.hscroll__pkgs a { font-family: var(--type); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hot); border-bottom: 1px solid rgba(217,182,121,.45); padding-bottom: .15rem; }
.hscroll__pkgs a:hover { color: var(--cream); }
.hscroll__down { margin-top: 1.6rem; font-family: var(--hand); color: var(--sage-warm); font-size: 1rem; }
/* wedding photo half: package cards */
.wed-pkgs { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.4rem; text-transform: none; letter-spacing: normal; }
.wed-pkg { display: grid; gap: .2rem; min-width: 250px; padding: 1.1rem 1.6rem 1.2rem; background: #FBF4E3; color: #2A241A; border-radius: 2px; box-shadow: 0 16px 30px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(20,24,18,.08); transform: rotate(-1.2deg); transition: transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .3s; text-align: center; }
.wed-pkg + .wed-pkg { transform: rotate(1.4deg); }
.wed-pkg:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 24px 40px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(139,58,58,.3); }
.wed-pkg span { font-family: var(--type); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.wed-pkg b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; }
.wed-pkg i { font-family: var(--hand); font-style: normal; font-size: .85rem; color: #6B4F2A; }

.hscroll__where { margin-top: 1.6rem; font-family: var(--type); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-warm); }
.hscroll__where a { color: var(--sage-warm); border-bottom: 1px solid rgba(169,175,140,.4); }
.hscroll__where a:hover { color: var(--gold-hot); }
.wed-pkgs { margin-top: 0 !important; }

/* ===== business film wall v2: YouTube posters, four across ===== */
.reel-wall { grid-template-columns: repeat(4, 1fr) !important; }
.reel-card:nth-child(n) { transform: none; }
.reel-card:nth-child(odd) { transform: rotate(-.7deg); } .reel-card:nth-child(even) { transform: translateY(14px) rotate(.6deg); }
.reel-card:hover { transform: translateY(-4px) rotate(0) scale(1.03) !important; }
.reel-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.16) saturate(.9) brightness(.92); transition: filter .4s, transform .8s cubic-bezier(.2,.9,.2,1); }
.reel-card:hover .reel-card__img { filter: none; transform: scale(1.04); }
.reel-card__cap b { font-size: 1rem !important; }
@media (max-width: 1100px) { .reel-wall { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .reel-wall { grid-template-columns: 1fr !important; } .reel-card:nth-child(n) { transform: none; } }
/* ===== FILM THEATRE ===== */
.theatre { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; background: rgba(4,5,4,.97); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; cursor: auto !important; }
.theatre * { cursor: auto !important; }
.theatre button { cursor: pointer !important; }
.theatre.is-open { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.theatre__screen { position: relative; width: min(94vw, calc((100vh - 7rem) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 40px 120px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(217,182,121,.18); }
.theatre:fullscreen .theatre__screen { width: min(100vw, calc(100vh * 16 / 9)); box-shadow: none; }
.theatre:-webkit-full-screen .theatre__screen { width: min(100vw, calc(100vh * 16 / 9)); box-shadow: none; }
.theatre__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.theatre__close { position: absolute !important; top: 1rem; right: 1.2rem; z-index: 3; }
.theatre__cap { position: absolute; left: 0; right: 0; bottom: 1.1rem; margin: 0; text-align: center; font-family: var(--type); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,231,206,.55); pointer-events: none; }
.theatre:fullscreen .theatre__cap, .theatre:-webkit-full-screen .theatre__cap { display: none; }
body.theatre-open .cursor { opacity: 0 !important; }
.frame[data-vimeo], .frame[data-yt] { cursor: none; }

.film-clients span.film-clients__more { width: 100%; text-align: center; margin-top: .5rem; font-family: var(--hand); font-style: normal; font-size: 1rem; color: var(--sage-warm); }
.film-clients span.film-clients__more::before { content: none; }

/* web reels now run the full width: a faint ghost behind the copy on the left, full strength on the right */
@media (min-width: 801px) {
  .webreel__row { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.35) 60%, #000 70%) !important; mask-image: linear-gradient(90deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.35) 60%, #000 70%) !important; clip-path: inset(-40px 0 -40px 0) !important; }
}
@media (max-width: 800px) {
  .webreel__row { -webkit-mask-image: none !important; mask-image: none !important; clip-path: none !important; }
}
.webreel__card.is-faint { pointer-events: none; }

/* film section close: everything centred under the client list */
.film-close { text-align: center !important; }
.film-close .chapter__seals { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
.film-close__note { margin: 1.2rem auto 0 !important; max-width: min(100%, 72rem) !important; }
.film-close .chapter__cta { margin-left: .8rem; margin-right: .8rem; }
.film-close__more { margin-left: .8rem !important; }

/* hero: one herb bundle + a bunch of dried billy buttons beside it */
.decor--herb.dh-buttons { left: calc(32% + 92px); top: -34px; width: 84px; height: 220px; color: var(--gold-hot); opacity: .72; --r: -3deg; transform: rotate(-3deg); transform-origin: 50% 0; animation: herbSway 9s ease-in-out -3s infinite alternate-reverse; }
.decor--herb.dh-2 { transform-origin: 50% 0; }


/* glowing seam under the apothecary shelf: a soft gold line with a spark that drifts across (like "turn the page", sideways) */
.shelf__seam { position: absolute; left: 0; right: 0; bottom: -20px; height: 40px; z-index: 5; pointer-events: none; overflow: hidden; }
.shelf__seam::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 34px; transform: translateY(-50%); background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(217,182,121,.16), transparent 72%); animation: seamBreathe 6s ease-in-out infinite; }
.shelf__seam::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(217,182,121,.32) 14%, rgba(240,210,150,.62) 50%, rgba(217,182,121,.32) 86%, transparent 100%);
  box-shadow: 0 0 8px rgba(217,182,121,.45), 0 0 22px rgba(217,182,121,.2); animation: seamBreathe 6s ease-in-out infinite; }
.shelf__seam i { position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; height: 2px; border-radius: 2px; transform-origin: 0 50%; transform: translateY(-50%) scaleX(0); opacity: 0;
  background: linear-gradient(90deg, rgba(217,182,121,0) 0%, rgba(217,182,121,.12) 30%, rgba(236,204,140,.55) 78%, rgba(255,242,210,.98) 100%);
  box-shadow: 0 0 10px 1px rgba(217,182,121,.35);
  animation: seamStreak 3.2s cubic-bezier(.6,0,.2,1) infinite; }
.shelf__seam b { position: absolute; top: 50%; left: -45px; z-index: 2; width: 90px; height: 8px; border-radius: 50%; transform: translate(0, -50%); opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,248,226,1) 0%, rgba(240,210,150,.75) 30%, rgba(217,182,121,0) 70%); filter: blur(1px);
  animation: seamHead 3.2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes seamStreak { 0% { transform: translateY(-50%) scaleX(0); opacity: 1; } 34% { transform: translateY(-50%) scaleX(1); opacity: 1; } 58% { transform: translateY(-50%) scaleX(1); opacity: 0; } 100% { transform: translateY(-50%) scaleX(1); opacity: 0; } }
@keyframes seamHead { 0% { transform: translate(0, -50%); opacity: 0; } 4% { opacity: 1; } 34% { transform: translate(100vw, -50%); opacity: 1; } 42% { transform: translate(100vw, -50%); opacity: 0; } 100% { transform: translate(100vw, -50%); opacity: 0; } }
@keyframes seamBreathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shelf__seam i, .shelf__seam b, .shelf__seam::before, .shelf__seam::after { animation: none; } .shelf__seam i { transform: translateY(-50%) scaleX(1); opacity: .6; } }

/* web section copy: inclusions as dot points + option pills, inside the copy column */
.web-incl__lbl { display: block; margin: 1.6rem 0 .8rem; font-family: var(--type); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hot); }
.web-incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.4rem; }
.web-incl li { position: relative; padding-left: 1.2rem; font-family: var(--book); font-size: .98rem; line-height: 1.45; color: rgba(240,231,206,.84); }
.web-incl li::before { content: "✦"; position: absolute; left: 0; top: .15em; font-size: .6rem; color: var(--gold-hot); opacity: .85; }
.web-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.web-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .55rem 1.1rem .6rem; border-radius: 999px; border: 1px solid rgba(217,182,121,.45); background: rgba(217,182,121,.06); color: var(--cream); transition: background .3s, border-color .3s, transform .3s; }
.web-pill b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.02rem; line-height: 1.1; }
.web-pill span { font-family: var(--type); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-warm); }
.web-pill:hover { background: rgba(217,182,121,.16); border-color: var(--gold-hot); transform: translateY(-2px); }
.web-pill--more { flex-direction: row; align-items: center; gap: .45rem; background: var(--gold-hot); border-color: var(--gold-hot); color: var(--void); font-family: var(--type); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.web-pill--more i { font-style: normal; transition: transform .3s; }
.web-pill--more:hover { background: var(--cream); border-color: var(--cream); }
.web-pill--more:hover i { transform: translateY(3px); }
@media (max-width: 460px) { .web-incl { grid-template-columns: 1fr; } }

.web-pkgs-link { display: inline-block; margin-top: 1.1rem; font-family: var(--type); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-warm); border-bottom: 1px solid rgba(169,175,140,.45); padding-bottom: .15rem; }
.web-pkgs-link:hover { color: var(--gold-hot); border-color: var(--gold-hot); }

/* ===== WEBSITE PACKAGES pop-up ===== */
.web-pkgs-link { padding: 0 0 .15rem; background: none; cursor: none; }
.pkgs { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; padding: clamp(.8rem, 3vw, 2rem); background: rgba(6,8,6,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.pkgs.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.pkgs__card { position: relative; width: min(1080px, 100%); max-height: min(90vh, 1100px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(2rem, 4vw, 3.2rem) clamp(1.2rem, 3.5vw, 3rem) 2.4rem; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 0%, rgba(217,182,121,.1), transparent 55%), linear-gradient(170deg, #1a2118, #0e120d);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), inset 0 0 0 1px rgba(217,182,121,.28);
  transform: translateY(24px) scale(.97); transition: transform .6s cubic-bezier(.2,.9,.2,1); scrollbar-width: thin; scrollbar-color: rgba(217,182,121,.4) transparent; }
.pkgs.is-open .pkgs__card { transform: none; }
.pkgs__close { position: sticky !important; float: right; top: 0; margin: -1.4rem -1.2rem 0 0; z-index: 3; }
.pkgs__eyebrow { display: block; text-align: center; font-family: var(--type); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hot); }
.pkgs__title { margin: .5rem 0 .6rem; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--cream); }
.pkgs__title em { color: var(--gold-hot); }
.pkgs__intro { max-width: 56ch; margin: 0 auto 2.2rem; text-align: center; font-family: var(--book); color: rgba(240,231,206,.72); }
.pkgs__cols { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 2rem); }
.pkgs__col { padding: 1.6rem clamp(1rem, 2.2vw, 1.8rem) 1.4rem; border-radius: 10px; background: rgba(239,227,196,.035); box-shadow: inset 0 0 0 1px rgba(217,182,121,.18); }
.pkgs__colhead { display: grid; gap: .15rem; padding-bottom: 1rem; margin-bottom: .4rem; border-bottom: 1px dashed rgba(217,182,121,.3); }
.pkgs__colhead b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.8rem; color: var(--cream); line-height: 1; }
.pkgs__colhead span { font-family: var(--hand); font-size: .95rem; color: var(--sage-warm); }
.pkgs__colhead i { font-style: normal; font-family: var(--type); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hot); }
.pkgs__col h4 { margin: 1.4rem 0 .7rem; font-family: var(--type); font-weight: 400; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hot); }
.pkgs__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pkgs__tiers li { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .1rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(217,182,121,.1); }
.pkgs__tiers b { font-family: var(--serif); font-weight: 500; color: var(--cream); font-size: 1.02rem; }
.pkgs__tiers span { font-family: var(--type); font-size: .72rem; letter-spacing: .06em; color: var(--gold-hot); white-space: nowrap; align-self: center; }
.pkgs__tiers em { grid-column: 1 / -1; font-family: var(--book); font-style: italic; font-size: .88rem; line-height: 1.45; color: rgba(240,231,206,.6); }
.pkgs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pkgs__list li { position: relative; padding-left: 1.2rem; font-family: var(--book); font-size: .93rem; line-height: 1.45; color: rgba(240,231,206,.84); }
.pkgs__list li::before { content: "✦"; position: absolute; left: 0; top: .15em; font-size: .56rem; color: var(--gold-hot); opacity: .85; }
.pkgs__list--extras li::before { content: "+"; font-size: .9rem; top: -.05em; }
.pkgs__list b { font-weight: 500; color: var(--cream); }
.pkgs sup { font-size: .62em; color: var(--gold-hot); margin-left: .1em; }
.pkgs__fine { margin: 1.3rem 0 0; font-family: var(--book); font-style: italic; font-size: .78rem; line-height: 1.55; color: rgba(240,231,206,.48); }
.pkgs__fine sup { margin: 0 .15em 0 0; }
.pkgs__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 1rem 2rem; margin-top: 2.2rem; }
.pkgs__care { font-family: var(--type); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-warm); border-bottom: 1px solid rgba(169,175,140,.45); }
.pkgs__care:hover { color: var(--gold-hot); }
@media (max-width: 760px) { .pkgs__cols { grid-template-columns: 1fr; } .pkgs__close { margin: -1rem -.6rem 0 0; } }
@media (prefers-reduced-motion: reduce) { .pkgs, .pkgs__card { transition: none !important; } }

.pkgs__h4-top { margin-top: 0 !important; }
.pkgs__col--incl .pkgs__list { grid-template-columns: 1fr; }

/* wedding label: clearer type on real paper instead of red typewriter on grey */
.tw-heading { background: #F3E9D2 !important; border: 1px dashed rgba(139,58,58,.6) !important; color: #4A1212 !important;
  font-family: var(--caps) !important; font-weight: 600; font-size: 1rem !important; letter-spacing: .2em !important; padding: .55rem 1.4rem .6rem !important;
  box-shadow: 0 12px 26px -16px rgba(0,0,0,.85); }

/* ===== Wix Partner "Legend" seal: footer + mega menu ===== */
.legend-seal { display: block; width: 68px; height: 68px; margin-top: 1.1rem; border-radius: 50%; opacity: .85;
  box-shadow: 0 0 0 1px rgba(217,182,121,.38), 0 0 0 4px rgba(217,182,121,.07), 0 8px 22px rgba(0,0,0,.5);
  transform: rotate(-7deg); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, opacity .6s; }
.legend-seal:hover { opacity: 1; transform: rotate(0deg) scale(1.06); box-shadow: 0 0 0 1px rgba(217,182,121,.6), 0 0 0 5px rgba(217,182,121,.1), 0 0 26px rgba(217,182,121,.28); }
.nav-foot__cred { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.4rem; }
.nav-foot__legend { display: inline-flex; align-items: center; gap: .7rem; }
.legend-seal--nav { width: 42px; height: 42px; margin: 0; transform: rotate(-7deg); }
@media (max-width: 700px) { .colophon__brand .legend-seal { margin: 1.1rem auto 0; } }
@media (max-width: 600px) { .legend-seal--nav { width: 34px; height: 34px; } }

/* ===== Phones + tablets: the copy stays on top, the loose decorations get out of its way ===== */
@media (max-width: 1100px) {
  section > .container { z-index: 6 !important; }
  .tarot-float:not(.post__tarot) { display: none !important; }
  .rite-web .vintage-img, .rite-photo .vintage-img, .rite-design .vintage-img { display: none !important; }
}
/* testimonials on phones: one whole review centred, a sliver of the next ones either side */
@media (max-width: 700px) {
  .whispers__grid { margin-left: calc(-73vw - 1.5rem) !important; }
  .whispers__grid .whisper { flex-basis: 82vw !important; }
}
/* the four tinctures as a tappable list under the shelf (on a small screen the bottles are tiny) */
.shelf-list { display: none; }
@media (max-width: 800px) {
  .shelf-list { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-width: 520px; margin: 2.4rem auto 0; position: relative; z-index: 6; }
  .shelf-list__item { display: grid; justify-items: center; align-content: start; gap: .35rem; padding: 1rem .6rem .95rem; background: linear-gradient(160deg, rgba(27,37,25,.92), rgba(12,16,11,.94)); border: 1px solid rgba(217,182,121,.38); border-radius: 4px; color: var(--cream); font: inherit; text-align: center; cursor: pointer; }
  .shelf-list__item img { height: 88px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(217,182,121,.35)); }
  .shelf-list__name { font-family: var(--type); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-warm); line-height: 1.45; }
  .shelf-list__price { font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.2; color: var(--gold-hot); }
}

/* menu on phones (and short landscape screens): scroll from the top instead of squeezing, so nothing overlaps */
@media (max-width: 700px), (max-height: 560px) {
  .nav-overlay__inner { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; grid-template-rows: auto max-content max-content; align-content: start; }
  .nav-body { align-self: start; min-height: max-content; padding: 1.4rem 0 1.6rem; }
  .nav-overlay__foot { margin-bottom: 4.5rem; }
}

/* small laptops (1280-1300px wide): these tarot cards and plates started covering headings and copy */
@media (max-width: 1300px) {
  .rite-weddings .tarot-float, .rite-photo .tarot-float, .rite-web .vintage-img { display: none !important; }
}

/* magic dust behind the cursor */
.magic-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; }
body.theatre-open .magic-dust { opacity: 0; }

/* ===== music player: folds down to the play button on scroll; sits under the cat and every pop-up ===== */
.spell { z-index: 85; }
.spell__min { flex: none; width: 26px; height: 26px; margin-left: -.2rem; padding: 0; border: 1px solid rgba(217,182,121,.35); border-radius: 50%; background: rgba(217,182,121,.06); color: rgba(217,182,121,.8); cursor: none; display: grid; place-items: center; transition: transform .3s, background .3s; }
.spell__min svg { width: 12px; height: 12px; }
.spell__min:hover { background: rgba(217,182,121,.16); transform: translateY(2px); }
.spell__bar { transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .35s; }
.spell__ticket, .spell__min { transition: opacity .25s, max-width .45s cubic-bezier(.2,.9,.2,1), padding .45s, margin .45s; }
.spell.is-min .spell__stage { opacity: 0 !important; visibility: hidden !important; transform: translateY(14px) scale(.92) !important; transition-delay: 0s, 0s, 0s; }
.spell.is-min .spell__ticket, .spell.is-min .spell__min { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; margin: 0; overflow: hidden; pointer-events: none; }
.spell.is-min .spell__bar { gap: 0; padding: .3rem; border-radius: 50%; transform: rotate(0); }
.spell.is-min .spell__play { transform: none; }
/* loading: the ring pulses gold until YouTube answers */
.spell.is-loading .spell__play .ring { animation: spellLoad 1.1s ease-in-out infinite; transform-origin: 24px 24px; }
@keyframes spellLoad { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* the cat and the pop-ups stay above the player */
.cat { z-index: 90; }
@media (max-width: 600px) {
  .spell { right: .9rem; bottom: .9rem; }
  .spell__stage { width: min(250px, calc(100vw - 2rem)); }
}

/* phones: the territories copy comes first, the map sits under it and is trimmed so there's no empty ocean above the heading */
@media (max-width: 700px) {
  .territories { padding: 5rem 0 6rem; }
  .terr { gap: 1.5rem; }
  .terr__copy { order: 1; }
  .terr__map { order: 2; max-width: 360px; margin: 0 auto !important; }
}

/* ===== phones: breathing room around the rune separators, matched header icons, accordion footer, list instead of map ===== */
@media (max-width: 700px) {
  /* the rune bands overlapped the copy above and below them; give them their own space instead of pulling sections together */
  .tband, .tband--layered, .tband--runes-only { margin: 0 !important; height: 120px !important; }
  /* header: logo and menu icon the same visual size, same top line */
  .chrome-logo { width: 56px; height: 56px; top: .85rem; left: .9rem; }
  .burger { width: 52px; height: 52px; top: .95rem; right: 1rem; }
  /* footer: each column becomes a centred accordion */
  .colophon__row { grid-template-columns: 1fr !important; row-gap: 0 !important; text-align: center; }
  .colophon__brand { grid-column: 1; flex-direction: column; align-items: center; text-align: center; margin-bottom: 1.6rem; }
  .colophon__row > div:not(.colophon__brand) { padding: 0 !important; border-top: 1px dashed rgba(217,182,121,.22); }
  .colophon__row > div:not(.colophon__brand):last-child { border-bottom: 1px dashed rgba(217,182,121,.22); }
  .colophon__h { position: relative; margin: 0 !important; padding: 1rem 2.4rem !important; border-bottom: none !important; font-size: .82rem; cursor: pointer; user-select: none; }
  .colophon__h::after { content: "+"; position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 1.2rem; color: var(--gold-hot); transition: transform .35s; }
  .colophon__row > div.is-open .colophon__h::after { transform: translateY(-50%) rotate(45deg); }
  .colophon__row > div:not(.colophon__brand) ul { max-height: 0; overflow: hidden; margin: 0; transition: max-height .45s cubic-bezier(.2,.8,.2,1), padding .35s; }
  .colophon__row > div.is-open ul { max-height: 420px; padding-bottom: 1rem; }
  .colophon__hours li { justify-content: center; }
  .colophon__addr { text-align: center; }
  /* territories: the hover map can't work on a touchscreen; show the town list and the ribbon instead */
  .terr__map { display: none !important; }
  .terr__copy .territories__head { text-align: center; }
  .terr__list { columns: 2; max-width: 360px; margin: 0 auto; text-align: left; }
  .terr__hint { display: none; }
  .terr__banner { margin: 1.6rem auto 0; }
  .terr__copy .compass__remote { text-align: center; }
}

@media (max-width: 700px) {
  .terr__rose, .terr__raven { display: none !important; }
  .colophon__logo { width: 64px !important; height: auto !important; }
  .colophon__brand .legend-seal { margin: 1rem auto 0; }
  /* travel ribbon: the text has to sit inside the ribbon body, so tighter type and more room under it for the tails */
  .terr__banner { padding: 1rem 2.6rem 2.5rem !important; max-width: 360px !important; transform: rotate(-1deg); }
  .terr__banner p { font-size: .66rem !important; letter-spacing: .06em !important; line-height: 1.65 !important; }
  .terr__banner p br { display: none; }
  /* the one-soul studio strip under the tinctures: one column, eyebrow full width, photo under the quote, fewer bits of clutter */
  .promise-strip { padding: 4.5rem 0 7.5rem !important; }
  .promise-strip > div[style*="grid"] { grid-template-columns: 1fr !important; gap: 2.6rem !important; }
  .promise-strip > div[style*="grid"] > div:last-child { max-width: 250px; margin: 0 auto; }
  .promise-strip .decor--jar, .promise-strip .decor--candle, .promise-strip .eng-moth-big { display: none !important; }
  .promise-strip .decor--jar:last-of-type { display: block !important; bottom: .6rem !important; right: 5% !important; width: 52px !important; height: 92px !important; }
  .promise-strip .decor--candle:nth-of-type(3) { display: block !important; bottom: 1rem !important; right: auto !important; left: 6% !important; width: 26px !important; height: 64px !important; }
}
/* phones: any illustration that lands on top of a heading, a label or a review goes; the ones tucked in corners stay */
@media (max-width: 700px) {
  .care > .eng-crystal, .care > .eng-botanical,
  .rite-photo > .eng, .rite-photo > .decor--feather, .rite-photo > .decor--herb,
  .rite-weddings > .decor--feather, .rite-weddings > .vintage-img,
  .rite-design > .eng-scarab, .rite-design > .eng-key, .rite-design > .decor--jar,
  .whispers > .eng-hand, .whispers > .eng-bird, .whispers > .eng-zodiac, .whispers > .decor--tarot, .whispers > .decor--candle:not(:nth-of-type(3)),
  .stats > .eng-constellation, .stats > .decor--tarot { display: none !important; }
}
/* the enquiry pop-up: the tarot cards and summoning circle hang outside the card on purpose, but they must never make the page scroll sideways */
.modal { overflow-x: hidden !important; }
@media (max-width: 700px) {
  .modal { padding: 3rem .8rem 2rem !important; }
  .modal__tarot { display: none !important; }
  .modal__circle { width: 120% !important; }
}
/* the light-table tile in the photography grid needs two rows on a phone, or its last line gets cut off */
@media (max-width: 800px) {
  .bento { grid-template-rows: repeat(9, 40vw) auto !important; }
  .bento__more { min-height: 200px; padding: 1.4rem 1.2rem 1.6rem; }
}
/* portfolio tiles carry a hidden description for search engines; it never shows */
.folio__seo { display: none !important; }
/* menu card: the return half of a flip is quick and has none of the menu-opening delay */
.nr-card.is-drawing { transition: transform .32s cubic-bezier(.2,.8,.2,1) !important; transition-delay: 0s !important; }
/* business film reel: cinema strips (2.35:1) so the letterboxed films show picture, not bars; three across */
.reel-wall { grid-template-columns: repeat(3, 1fr) !important; }
.reel-card { aspect-ratio: 2.35 / 1 !important; }
.reel-card__cap { padding: 1.4rem .9rem .8rem !important; }
.reel-card__play { width: 50px !important; height: 50px !important; }
/* film-strip edges: dark band with light sprocket holes, so they read over dark footage too */
.reel-card::before, .reel-card::after, .frame::before, .frame::after {
  height: 9px !important; opacity: 1 !important;
  background: repeating-linear-gradient(90deg, rgba(6,8,6,.9) 0 7px, rgba(240,231,206,.55) 7px 12px, rgba(6,8,6,.9) 12px 19px) !important;
}
.reel-card:hover::before, .reel-card:hover::after, .frame:hover::before, .frame:hover::after {
  background: repeating-linear-gradient(90deg, rgba(6,8,6,.9) 0 7px, rgba(217,182,121,.8) 7px 12px, rgba(6,8,6,.9) 12px 19px) !important;
}
@media (max-width: 1100px) { .reel-wall { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .reel-wall { grid-template-columns: 1fr !important; } }