/* =========================================================================
   REMZY — appremzy.com
   Dark espresso cinematic ground, warm ivory paper, antique gold.
   Display type is Bodoni Moda (the didone on the app's book cover);
   Archivo carries the interface.
   ========================================================================= */

:root {
  /* ground */
  --black:      #0b0908;
  --black-2:    #100d0c;
  --espresso:   #17110d;
  --espresso-2: #1f1712;

  /* paper + ink */
  --ivory:      #f4ece0;
  --ivory-dim:  #cdc2b2;
  --muted:      #9a8d7c;
  --faint:      #6b6053;

  /* accent */
  --gold:       #c9a05a;
  --gold-lit:   #e6c489;
  --gold-deep:  #8f6d38;

  --hair:       rgba(244, 236, 224, 0.10);
  --hair-soft:  rgba(244, 236, 224, 0.055);

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4.5vw, 4rem);

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, dl { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.wrap {
  width: min(100% - (var(--gut) * 2), var(--wrap));
  margin-inline: auto;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 1rem; top: -60px; z-index: 999;
  background: var(--gold); color: #1a1206;
  padding: 0.7rem 1.1rem; border-radius: 2px; font-weight: 600;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 1px solid var(--gold-lit);
  outline-offset: 4px;
}

/* ---------- atmosphere: fine film grain over everything ---------- */
.grain {
  /* Was inset:-50% (4x viewport area) with mix-blend-mode:overlay, which made
     the compositor re-blend the whole page on every frame and was the main
     source of scroll stutter. Plain low-opacity overlay looks near-identical. */
  position: fixed; inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.16;
  will-change: transform;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-6px, 4px, 0); }
  50%  { transform: translate3d(5px, -5px, 0); }
  75%  { transform: translate3d(-4px, -3px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* =========================================================================
   Typography primitives
   ========================================================================= */

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.4rem);
}

.eyebrow {
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease-soft),
              border-color 0.4s var(--ease-soft),
              color 0.4s var(--ease-soft),
              transform 0.5s var(--ease);
  will-change: transform;
}

.btn--gold {
  background: linear-gradient(178deg, var(--gold-lit), var(--gold) 62%, var(--gold-deep));
  color: #1c1305;
  box-shadow: 0 18px 44px -22px rgba(201, 160, 90, 0.85),
              inset 0 1px 0 rgba(255, 245, 220, 0.55);
}
.btn--gold:hover { filter: brightness(1.06); }

.btn--ghost {
  border-color: rgba(244, 236, 224, 0.24);
  color: var(--ivory);
  padding: 0.7rem 1.4rem;
  font-size: 0.82rem;
  background: rgba(244, 236, 224, 0.04);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-lit); }

.btn--quiet {
  color: var(--ivory-dim);
  padding-inline: 0.4rem;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.btn--quiet:hover { color: var(--ivory); border-bottom-color: var(--gold); }

/* =========================================================================
   Preloader
   ========================================================================= */

.preloader {
  position: fixed; inset: 0; z-index: 950;
  background: var(--black);
  display: grid; place-items: center;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
body:not(.is-loading) .preloader { opacity: 0; visibility: hidden; }

.preloader__inner { display: grid; gap: 1.5rem; justify-items: center; }

.preloader__mark {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ivory);
  opacity: 0.9;
}

.preloader__bar {
  display: block;
  width: 160px; height: 1px;
  background: rgba(244, 236, 224, 0.16);
  overflow: hidden;
}
.preloader__bar i {
  display: block; height: 100%; width: 0%;
  background: var(--gold);
  transition: width 0.4s var(--ease-soft);
}

/* =========================================================================
   Nav
   ========================================================================= */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  transition: background-color 0.5s var(--ease-soft), border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  /* backdrop-filter here forced the compositor to re-sample and blur the
     backdrop every frame while the WebGL canvas repainted underneath. Solid
     translucent fill looks the same on this palette and costs nothing. */
  background: rgba(11, 9, 8, 0.90);
  border-bottom-color: var(--hair-soft);
}

.nav__inner {
  width: min(100% - (var(--gut) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1.1rem;
}

.nav__brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-right: auto;
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.nav__icon { border-radius: 6px; }

.nav__links { display: flex; gap: 2.1rem; font-size: 0.85rem; color: var(--ivory-dim); }
.nav__links a { position: relative; padding-block: 0.2rem; transition: color 0.3s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__links a:hover { color: var(--ivory); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__toggle {
  display: none;
  width: 34px; height: 30px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 7px;
}
.nav__toggle span {
  display: block; height: 1px; background: var(--ivory);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  padding: 0 var(--gut) 1.5rem;
  background: rgba(11, 9, 8, 0.985);
  border-bottom: 1px solid var(--hair-soft);
}
.nav__mobile a {
  padding: 1rem 0;
  border-top: 1px solid var(--hair-soft);
  font-size: 1rem;
  color: var(--ivory-dim);
}
.nav__mobile-cta { color: var(--gold) !important; font-weight: 600; }
.nav__mobile.is-open { display: flex; }

/* =========================================================================
   THE EXPERIENCE — sticky 3D act
   ========================================================================= */

.experience {
  position: relative;
  height: 470vh;           /* the scroll runway for the whole book story */
}

.experience__stage {
  /* Fixed rather than sticky so the same canvas can be reused by the finale
     at the bottom of the page. Sections below have opaque backgrounds, so it
     is naturally covered except where a section opts out. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.5s var(--ease-soft);
  pointer-events: none;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(84, 58, 34, 0.42), transparent 68%),
    radial-gradient(ellipse 50% 40% at 78% 22%, rgba(201, 160, 90, 0.11), transparent 70%),
    var(--black);
}

.stage__canvas {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  width: 100%;
  height: 100%;
  display: block;
}

.stage__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse 78% 70% at 50% 50%, transparent 42%, rgba(6, 5, 4, 0.72) 100%);
}

.stage__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 12vh 6vw;
}
/* A class selector outranks the UA's [hidden] rule, so state it explicitly. */
.stage__fallback[hidden] { display: none; }
.stage__fallback img {
  max-height: 62vh;
  width: auto;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.7));
}

/* ---------------- copy panels ---------------- */

.panels {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Chapter Two sits as a band under the macro shot, not beside the book. */
.panel.panel--band {
  left: 50%;
  bottom: 7vh;
  transform: translate(-50%, 26px);
  width: min(92vw, 660px);
  text-align: center;
  isolation: isolate;
}
.panel.panel--band.is-active { transform: translate(-50%, 0); }
.panel.panel--band .panel__body { margin-inline: auto; max-width: 46ch; }
.panel.panel--band::before {
  content: "";
  position: absolute;
  inset: -2rem -3rem;
  z-index: -1;
  background: radial-gradient(ellipse 70% 62% at 50% 50%,
      rgba(8,6,5,0.94) 0%, rgba(8,6,5,0.80) 42%, rgba(8,6,5,0) 84%);
  pointer-events: none;
}

/* =========================================================================
   FINALE — the book returns and shuts
   ========================================================================= */
.finale {
  position: relative;
  z-index: 10;
  height: 210vh;
  background: transparent;          /* let the fixed book layer through */
}
.finale__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: end center;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  pointer-events: none;
}
.finale__copy { text-align: center; }
.finale__title {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  text-shadow: 0 18px 50px rgba(0,0,0,0.8);
}
.finale__sub {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 820px) {
  .panel.panel--band { bottom: 6vh; }
  .finale { height: 180vh; }
}

.panel {
  position: absolute;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-soft), transform 1.1s var(--ease);
  pointer-events: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* hero: centred, the book sits beneath it */
.panel--hero {
  left: 50%;
  top: 11vh;
  transform: translate(-50%, 26px);
  width: min(92vw, 780px);
  text-align: center;
}
.panel--hero.is-active { transform: translate(-50%, 0); }

/* While the hero is being scrubbed by scroll, opacity and offset are written
   every frame from JS, so the CSS transition would lag behind and read as
   stutter. */
.panel--hero.is-scrubbed { transition: none; }

.panel__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.panel__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.75);
}
.panel__title--sm {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.08;
}

.panel__body {
  margin-top: 1.5rem;
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.14rem);
  color: var(--ivory-dim);
  max-width: 44ch;
  margin-inline: auto;
  text-shadow: 0 6px 24px rgba(0,0,0,0.7);
}

.panel__actions {
  margin-top: 2.9rem;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Side panels can drift over an ivory page as the camera pushes in, so
   each one carries its own soft scrim to guarantee contrast. */
.panel--side::before {
  content: "";
  position: absolute;
  inset: -2.5rem -3rem;
  z-index: -1;
  background: radial-gradient(ellipse 72% 64% at 50% 50%,
      rgba(8, 6, 5, 0.97) 0%,
      rgba(8, 6, 5, 0.90) 38%,
      rgba(8, 6, 5, 0.58) 66%,
      rgba(8, 6, 5, 0) 86%);
  pointer-events: none;
}

/* side panels: keep the book visible in the middle of the frame */
.panel--side {
  isolation: isolate;
  top: 50%;
  width: min(38vw, 400px);
  transform: translateY(calc(-50% + 26px));
}
.panel--side.is-active { transform: translateY(-50%); }
.panel--side .panel__body { margin-inline: 0; max-width: 34ch; }
.panel--left { left: var(--gut); }
.panel--right { right: var(--gut); text-align: right; }
.panel--right .panel__body { margin-left: auto; }

/* ---------------- scroll cue ---------------- */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  transition: opacity 0.7s var(--ease-soft);
}
.scroll-cue.is-hidden { opacity: 0; }
.scroll-cue__line {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, var(--gold));
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute; left: 0; top: -60%;
  width: 100%; height: 60%;
  background: var(--gold-lit);
  animation: cueRun 2.4s var(--ease-soft) infinite;
}
@keyframes cueRun {
  0% { top: -60%; } 100% { top: 110%; }
}
.scroll-cue__label {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------------- chapter rail ---------------- */

.rail {
  position: absolute;
  right: calc(var(--gut) * 0.6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  opacity: 0;
  transition: opacity 0.6s var(--ease-soft);
}
.rail.is-visible { opacity: 1; }
.rail__track {
  display: block;
  width: 1px; height: 22vh;
  background: rgba(244, 236, 224, 0.14);
  position: relative;
}
.rail__track i {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 0%;
  background: var(--gold);
}

/* =========================================================================
   NO-WEBGL FALLBACK
   The scroll act needs a live canvas to justify its runway, so without one
   the whole stage collapses into an ordinary stacked section: a still of
   the book, then the same copy, in order.
   ========================================================================= */

.no-webgl .experience { height: auto; }

.no-webgl .experience__stage {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: calc(6rem + 8vh) 0 clamp(4rem, 9vw, 7rem);
}

.no-webgl .stage__canvas,
.no-webgl .stage__vignette,
.no-webgl .scroll-cue,
.no-webgl .rail { display: none; }

.no-webgl .stage__fallback {
  position: relative;
  inset: auto;
  order: 1;
  display: block;
  padding: 0 var(--gut);
}
.no-webgl .stage__fallback img {
  max-height: 54vh;
  width: auto;
  margin-inline: auto;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.7));
}

.no-webgl .panels {
  position: relative;
  inset: auto;
  order: 2;
  pointer-events: auto;
  display: grid;
  gap: clamp(3.5rem, 8vw, 6rem);
  padding: clamp(3.5rem, 8vw, 6rem) var(--gut) 0;
}

.no-webgl .panel {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  width: auto;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.no-webgl .panel--side::before { display: none; }
.no-webgl .panel--right { text-align: center; }
.no-webgl .panel--right .panel__body,
.no-webgl .panel--side .panel__body { margin-inline: auto; max-width: 44ch; }

/* =========================================================================
   INSIDE THE BOOK (features)
   ========================================================================= */

.inside {
  contain: layout paint;
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, var(--black) 0%, var(--espresso) 100%);
  padding-block: clamp(5rem, 11vw, 9rem);
  border-top: 1px solid var(--hair-soft);
}

.section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.inside__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}

.inside__lead p {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--ivory-dim);
  font-style: italic;
}

/* an editorial ledger, not a grid of cards */
.ledger__row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hair);
  align-items: baseline;
  transition: background-color 0.5s var(--ease-soft);
}
.ledger__row:last-child { border-bottom: 1px solid var(--hair); }
.ledger__row:hover { background: rgba(244, 236, 224, 0.022); }

.ledger dt {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  color: var(--ivory);
}
.ledger dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.pullquote {
  margin: clamp(4rem, 9vw, 7rem) 0 0;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--hair);
  text-align: center;
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.1rem);
  line-height: 1.24;
  color: var(--ivory);
}

/* =========================================================================
   ON THIS DAY — centred and quiet, deliberately not "book left, text right"
   ========================================================================= */

.onthisday {
  position: relative;
  z-index: 10;
  contain: layout paint;
  background: var(--espresso);
  padding-block: clamp(6rem, 13vw, 11rem);
  border-top: 1px solid var(--hair-soft);
  text-align: center;
}
.onthisday__inner { max-width: 60ch; margin-inline: auto; }
.onthisday__title { margin-inline: auto; margin-bottom: 1.8rem; }
.onthisday__body {
  color: var(--ivory-dim);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  max-width: 52ch; margin-inline: auto;
}
.onthisday__mark {
  margin-top: 3rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

/* =========================================================================
   BUILT TO KEEP — two plain columns, no headline/paragraph repeat
   ========================================================================= */

.keep {
  position: relative;
  z-index: 10;
  contain: layout paint;
  background: linear-gradient(180deg, var(--espresso) 0%, var(--black-2) 100%);
  padding-block: clamp(5rem, 11vw, 9rem);
  border-top: 1px solid var(--hair-soft);
}
.keep__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 22ch; }
.keep__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hair);
  padding-top: 2.2rem;
}
.keep__cols p { color: var(--muted); font-size: 0.98rem; max-width: 42ch; }
@media (max-width: 820px) { .keep__cols { grid-template-columns: 1fr; } }

/* =========================================================================
   PRIVACY
   ========================================================================= */

.privacy {
  contain: layout paint;
  position: relative;
  z-index: 10;
  background: var(--espresso);
  padding-block: clamp(5rem, 11vw, 9rem);
  border-top: 1px solid var(--hair-soft);
  overflow: hidden;
}
.privacy::before {
  content: "";
  position: absolute;
  left: 50%; top: -30%;
  width: 120vw; height: 80vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 40% 50% at 50% 50%, rgba(201, 160, 90, 0.10), transparent 70%);
  pointer-events: none;
}

.privacy__inner { position: relative; max-width: 74ch; }
.privacy__title { margin-bottom: 1.8rem; }
.privacy__body {
  color: var(--ivory-dim);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  max-width: 60ch;
}

.tenets {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.tenets li {
  padding: 1.8rem 1.8rem 1.8rem 0;
  border-top: 1px solid var(--gold-deep);
  padding-right: 2rem;
}
.tenets span {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ivory);
  margin-bottom: 0.5rem;
}
.tenets p { color: var(--muted); font-size: 0.92rem; }

/* =========================================================================
   LAUNCH
   ========================================================================= */

.launch {
  contain: layout paint;
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, var(--espresso) 0%, var(--black-2) 100%);
  padding-block: clamp(5rem, 11vw, 9rem);
  text-align: center;
  border-top: 1px solid var(--hair-soft);
}
.launch__inner { max-width: 62ch; margin-inline: auto; }
.launch__title { margin-bottom: 1.5rem; }
.launch__body { color: var(--ivory-dim); max-width: 46ch; margin-inline: auto; }

.notify {
  margin-top: 2.6rem;
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
}
.notify input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.95rem 1.4rem;
  min-width: 270px;
  border-radius: 999px;
  border: 1px solid rgba(244, 236, 224, 0.2);
  background: rgba(244, 236, 224, 0.04);
  color: var(--ivory);
  transition: border-color 0.35s var(--ease-soft);
}
.notify input::placeholder { color: var(--faint); }
.notify input:focus { border-color: var(--gold); outline: none; }

.notify__note {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--faint);
  transition: color 0.4s;
}
.notify__note.is-ok { color: var(--gold-lit); }
.notify__note.is-err { color: #d99a7a; }

/* =========================================================================
   CONTACT
   ========================================================================= */

.contact {
  contain: layout paint;
  position: relative;
  z-index: 10;
  background: var(--black-2);
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--hair-soft);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact__title { margin-bottom: 1.2rem; }
.contact__body { color: var(--muted); max-width: 40ch; }

.contact__email {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.2rem);
  color: var(--gold-lit);
  border-bottom: 1px solid rgba(201, 160, 90, 0.35);
  padding-bottom: 0.25rem;
  transition: color 0.35s, border-color 0.35s;
}
.contact__email:hover { color: var(--gold); border-color: var(--gold); }

.contact__card {
  border-left: 1px solid var(--hair);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.contact__card h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  margin-bottom: 0.9rem;
}
.contact__card p { color: var(--muted); font-size: 0.92rem; margin-bottom: 0.6rem; }
.contact__card a { color: var(--ivory-dim); border-bottom: 1px solid var(--hair); }
.contact__card a:hover { color: var(--gold-lit); }

/* =========================================================================
   FOOTER
   ========================================================================= */

.footer {
  position: relative;
  z-index: 10;
  background: var(--black);
  border-top: 1px solid var(--hair-soft);
  padding-top: clamp(3rem, 6vw, 4rem);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 2.5rem;
}
.footer__brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--display); font-size: 1.35rem;
}
.footer__brand img { border-radius: 7px; }
.footer__nav { display: flex; gap: 1.8rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--muted); }
.footer__nav a:hover { color: var(--ivory); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.78rem;
  color: var(--faint);
}

/* =========================================================================
   Reveal on scroll
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-soft), transform 1.2s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1000px) {
  .inside__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__card { border-left: 0; border-top: 1px solid var(--hair); padding-left: 0; padding-top: 1.8rem; }
  .tenets { grid-template-columns: 1fr; }
  .tenets li { padding-right: 0; }
}

@media (max-width: 820px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-stuck { background: rgba(11, 9, 8, 0.88); }

  /* On phones the book owns the upper frame and copy sits beneath it,
     so nothing ever overlaps the 3D. */
  .experience { height: 400vh; }

  .panel--hero { top: 11vh; width: min(92vw, 560px); }

  .panel--side {
    top: auto;
    bottom: 9vh;
    left: var(--gut);
    right: var(--gut);
    width: auto;
    text-align: left;
    transform: translateY(26px);
  }
  .panel--side.is-active { transform: translateY(0); }
  .panel--right { text-align: left; }
  .panel--right .panel__body { margin-left: 0; }
  .panel--side .panel__body { max-width: none; }

  .rail { display: none; }
  .ledger__row { grid-template-columns: 1fr; gap: 0.4rem; }
}

@media (max-width: 520px) {
  .notify { flex-direction: column; align-items: stretch; }
  .notify input { min-width: 0; }
  .panel__actions { gap: 1rem; }
  .footer__base { flex-direction: column; gap: 0.4rem; }
}

/* Short landscape phones: pull the hero copy up so it clears the book */
@media (max-height: 560px) and (orientation: landscape) {
  .panel--hero { top: 8vh; }
  .panel__title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
  .panel--side { bottom: 5vh; }
  .scroll-cue { display: none; }
}

/* =========================================================================
   Reduced motion — hold the book in a composed open state, drop the drift
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .scroll-cue__line::after { animation: none; }
  .panel {
    transition-duration: 0.01ms;
  }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}