/* ==========================================================================
   Wahyu Redjo Online ? Collector's Storybook
   Founder Visual Reconstruction 2026-07-30.
   One continuous seven-chapter book. Desktop: cinematic 3D storybook.
   Mobile: purpose-built editorial page-reveal. No typed wordmark.
   ========================================================================== */

:root {
  color-scheme: light;
  /* Luxury identity palette */
  --ink: #1c1508;
  --charcoal: #2b2114;
  --oxblood: #6f2126;
  --oxblood-deep: #54181c;
  --ivory: #fdfaf4;
  --porcelain: #f7f1e6;
  --paper: #f4ecdd;
  --champagne: #ecdfc8;
  --champagne-deep: #d8c19a;
  --gold: #b8862e;
  --gold-deep: #9a6c1f;
  --gold-light: #e6c98a;
  --wr-red: #9c2b2e;
  --muted: #6f6552;
  --line: rgba(28, 21, 8, 0.12);
  --line-light: rgba(253, 250, 244, 0.22);

  /* Type */
  --font-display: "Italiana", "Didot", "Bodoni MT", Georgia, serif;
  --font-body: "Jost", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --size-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --size-small: 0.75rem;
  --size-kicker: 0.6875rem;
  --size-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --size-h1: clamp(2.4rem, 1.8rem + 3vw, 4rem);
  --size-h2: clamp(1.9rem, 1.5rem + 2.1vw, 3rem);
  --size-h3: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);

  /* Rhythm */
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: clamp(2.5rem, 5vw, 4rem);
  --space-xl: clamp(3.5rem, 7vw, 6rem);
  --header-h: clamp(4.25rem, 7vh, 5rem);
  --page-max: 1240px;

  /* Motion */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-cinematic: 0.9s;

  --z-header: 100;
  --z-toast: 200;

  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.65;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--oxblood); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: var(--z-header);
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.8rem 1rem;
  transform: translateY(-180%);
  background: var(--ivory);
  color: var(--ink);
  border: 1px solid var(--line);
  transition: transform 0.55s var(--ease-standard);
}
.skip-link:focus { transform: none; }

/* Anchor alias: preserves legacy #ids without visible markup. */
.anchor-alias { position: absolute; width: 0; height: 0; overflow: hidden; scroll-margin-top: var(--header-h); }

/* ---------- Typography ---------- */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
em { font-style: italic; }
p { margin: 0 0 1rem; max-width: 40rem; }
p:last-child { margin-bottom: 0; }

.kicker, .page-marker {
  margin: 0 0 1.1rem;
  font-size: var(--size-kicker);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.kicker { color: var(--gold-deep); }
.page-marker { color: var(--wr-red); }

.lead { font-size: var(--size-lead); font-weight: 300; line-height: 1.7; }

.chapter-note {
  max-width: 62rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--size-small);
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.3rem;
  padding: 1rem 2rem;
  border: 1px solid;
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease-standard), color 0.25s var(--ease-standard),
              border-color 0.25s var(--ease-standard), transform 0.25s var(--ease-luxury);
}
.button:hover { transform: translateY(-1px); }
.button.dark { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.button.dark:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.button.light { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.button.light:hover { background: var(--gold-light); border-color: var(--gold-light); }
.button.ghost-dark { background: transparent; border-color: var(--champagne-deep); color: var(--ink); }
.button.ghost-dark:hover { background: rgba(230, 201, 138, 0.18); border-color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  color: var(--ivory);
  transition: background 0.55s var(--ease-standard), color 0.55s var(--ease-standard),
              box-shadow 0.55s var(--ease-standard);
}
.site-header.scrolled {
  background: rgba(253, 250, 246, 0.94);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: 178px; height: auto; display: block; }

#site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
#site-nav a {
  font-size: var(--size-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.25s var(--ease-standard), color 0.25s var(--ease-standard);
}
#site-nav a:hover { opacity: 1; color: var(--gold-light); }
.site-header.scrolled #site-nav a:hover { color: var(--gold-deep); }

.header-actions { display: flex; align-items: center; }
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid currentColor;
  padding: 0.55rem 0.9rem;
  font-size: var(--size-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav-toggle-lines { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-toggle-lines i { display: block; width: 18px; height: 1px; background: currentColor; transition: transform 0.25s var(--ease-standard); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:first-child { transform: translateY(2.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:last-child { transform: translateY(-2.5px) rotate(-45deg); }

/* ==========================================================================
   BOOK STAGE ? continuous storybook scaffolding
   ========================================================================== */
.book-stage { position: relative; }

/* Every chapter reserves explicit header safe-zone + content bounds. */
.chapter {
  position: relative;
  scroll-margin-top: var(--header-h);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-xl) clamp(1.25rem, 4vw, 3rem);
}

/* A spread is the physical object: paper, spine, page edges. */
.spread-inner {
  position: relative;
  background:
    linear-gradient(90deg, transparent 0, rgba(28,21,8,0.05) 49.4%, rgba(28,21,8,0.12) 50%, rgba(28,21,8,0.05) 50.6%, transparent 100%),
    linear-gradient(160deg, var(--ivory), var(--porcelain));
  border: 1px solid rgba(28, 21, 8, 0.08);
  border-radius: 4px;
  box-shadow: 0 40px 80px -50px rgba(28, 21, 8, 0.45);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
}

/* Continuous page edges: each spread is bound into the same book block. */
html.js.cinematic .chapter { max-width: var(--page-max); }
html.js.cinematic .spread .spread-inner {
  border-left: 6px solid rgba(28, 21, 8, 0.18);
  border-right: 6px solid rgba(28, 21, 8, 0.1);
}
html.js.cinematic .received .spread-inner {
  border-left-color: rgba(0, 0, 0, 0.5);
  border-right-color: rgba(0, 0, 0, 0.35);
}

/* Fine paper grain, extremely subtle. */
.spread-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(28,21,8,0.025) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.5;
}

/* Page number, bottom outer corner. */
.page-num {
  position: absolute;
  bottom: 1.1rem;
  right: 1.4rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}

/* Two-column editorial spread: media page + text page. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.two-col .page-media { max-height: 72vh; }
.two-col .page-media img { max-height: 72vh; }
.page-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.page-media img { width: 100%; height: 100%; object-fit: cover; }
.page-copy h2 { margin-bottom: 1.2rem; }
.page-copy h2 em { color: var(--gold-deep); }
.page-copy p { color: var(--charcoal); }

.page-head { max-width: 62rem; margin: 0 auto var(--space-lg); text-align: center; }
.page-head h2 { margin-bottom: 1rem; }
.page-head p { color: var(--muted); margin-left: auto; margin-right: auto; }

/* Reveal ? content visible by default; JS only enhances. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--motion-cinematic) var(--ease-luxury), transform var(--motion-cinematic) var(--ease-luxury);
}
html.js .reveal.visible { opacity: 1; transform: none; }
.reveal-media { overflow: hidden; }
html.js .reveal-media img { transform: scale(1.06); transition: transform 1.6s var(--ease-luxury); }
html.js .reveal-media.visible img { transform: scale(1); }

/* ==========================================================================
   CH1 ? COVER
   ========================================================================== */
.cover { max-width: none; padding: 0; }
.cover-inner {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: calc(var(--header-h) + var(--space-lg)) clamp(1.25rem, 5vw, 4rem) var(--space-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(230, 201, 138, 0.16), transparent 55%),
    linear-gradient(180deg, var(--ivory) 0%, var(--porcelain) 100%);
  text-align: center;
}

/* Physical book: under-page + opening leaf. */
.cover-book {
  position: relative;
  width: min(78vw, 30rem);
  aspect-ratio: 5 / 6.4;
  perspective: 1600px;
}
.cover-page--under {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--porcelain), var(--paper));
  border: 1px solid rgba(28,21,8,0.1);
  border-radius: 4px 12px 12px 4px;
  box-shadow: 0 50px 90px -50px rgba(28, 21, 8, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.cover-under-copy { max-width: 20rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.cover-under-kicker {
  font-size: var(--size-kicker);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}
.cover-under-jewel {
  width: 54px;
  height: 54px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(184, 134, 46, 0.14);
}

.cover-leaf {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.cover-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  border-radius: 4px 12px 12px 4px;
}
.cover-face--front {
  background:
    linear-gradient(160deg, rgba(230,201,138,0.12), transparent 40%),
    linear-gradient(155deg, var(--oxblood) 0%, var(--oxblood-deep) 100%);
  color: var(--champagne);
  box-shadow: inset 0 0 0 1px rgba(230, 201, 138, 0.35), 0 50px 90px -45px rgba(28, 21, 8, 0.6);
}
.cover-face--back { background: linear-gradient(165deg, var(--porcelain), var(--champagne)); transform: rotateY(180deg); }
.cover-logo { width: min(70%, 220px); height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.cover-rule { width: 56px; height: 1px; background: var(--gold-light); opacity: 0.7; }
.cover-sub { font-size: var(--size-kicker); letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.85; margin: 0; }
.cover-invite { font-size: 0.9rem; font-weight: 300; letter-spacing: 0.04em; opacity: 0.8; max-width: 15rem; margin: 0; }

.cover-copy { max-width: 44rem; }
.cover-copy .kicker { color: var(--gold-deep); }
.cover-copy h1 .h-line { display: block; }
.cover-copy h1 em { color: var(--wr-red); }
.cover-copy .lead { margin: 1.25rem auto 0; color: var(--charcoal); }
.cover-actions { margin-top: 1.75rem; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--size-kicker);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue i { width: 1px; height: 3rem; background: currentColor; transform-origin: top; animation: cue 2.4s var(--ease-standard) infinite; }
@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
}

/* ==========================================================================
   CH2 ? MAKNA
   ========================================================================== */
.meaning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.3rem;
  margin: 1.75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.meaning-list li { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem); color: var(--ink); }
.meaning-list li::before {
  content: "";
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  margin: 0 0.62rem 0.14rem 0.08rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  transform-origin: center;
}

/* ==========================================================================
   CH3 ? KARYA
   ========================================================================== */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.craft-card { overflow: hidden; }
.craft-card img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.4s var(--ease-luxury); }
.craft-card:hover img { transform: scale(1.04); }
.craft-card figcaption {
  padding: 0.85rem 0.25rem 0;
  font-size: var(--size-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ==========================================================================
   CH5 ? GOLD MOMENT
   ========================================================================== */
.experience-live {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.exp-card {
  background: rgba(253, 250, 244, 0.7);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.6rem 1.5rem;
}
.exp-card h3 { margin: 0.75rem 0 0.55rem; font-size: var(--size-h3); }
.exp-card p { color: var(--muted); margin: 0; }
.exp-tag {
  display: inline-block;
  font-size: var(--size-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ivory);
}
.experience-hub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1.75rem;
}
.hub-item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: transparent;
  border: 1px solid var(--champagne-deep);
  border-radius: 6px;
  padding: 1.3rem 1.2rem;
  color: var(--ink);
  transition: border-color 0.25s var(--ease-standard), background 0.25s var(--ease-standard), transform 0.25s var(--ease-luxury);
}
.hub-item:hover { border-color: var(--gold); background: rgba(230, 201, 138, 0.12); transform: translateY(-2px); }
.hub-item strong { font-weight: 500; }
.hub-tag { font-size: var(--size-kicker); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }

/* ==========================================================================
   CH6 ? HADIAH DITERIMA (ink spread, gradual ? not abrupt)
   ========================================================================== */
.received .spread-inner {
  background:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.28) 49.4%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.28) 50.6%, transparent 100%),
    linear-gradient(160deg, var(--charcoal), var(--ink));
  color: var(--ivory);
  border-color: rgba(253, 250, 244, 0.12);
}
.received .spread-inner::before { background-image: radial-gradient(rgba(253,250,244,0.03) 1px, transparent 1px); }
.received .page-marker { color: var(--gold-light); }
.received .page-copy h2 em { color: var(--gold-light); }
.received .page-copy p { color: rgba(253, 250, 244, 0.8); }
.privacy-points { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.privacy-points li { padding: 0.95rem 0; border-top: 1px solid var(--line-light); color: rgba(253, 250, 244, 0.8); }
.privacy-points strong { color: var(--gold-light); font-weight: 500; }
.received .page-num { color: var(--gold-light); }

/* ==========================================================================
   CH7 ? KANAL RESMI
   ========================================================================== */
.channels-inner { text-align: center; }
.channels-brand { max-width: 40rem; margin: 0 auto var(--space-lg); }
.channels-logo { width: 240px; height: auto; margin: 0 auto 1.25rem; }
.channels-brand h2 { margin-bottom: 1rem; }
.channels-brand > p { color: var(--muted); margin-left: auto; margin-right: auto; }
.channels-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin: 0 0 var(--space-lg); }
.channel-list { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--line); }
.channel-list a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.3rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.25s var(--ease-luxury), background 0.25s var(--ease-standard);
}
.channel-list a:hover { padding-left: 1rem; background: rgba(230, 201, 138, 0.1); }
.channel-name { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); }
.channel-desc { font-size: var(--size-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.channel-arrow { font-size: 1.1rem; color: var(--gold-deep); }
.channels-foot { margin: var(--space-lg) auto 0; font-size: var(--size-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); max-width: 46rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--charcoal);
  color: rgba(253, 250, 246, 0.82);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: var(--space-xl) clamp(1.25rem, 4vw, 3rem) var(--space-lg);
}
.footer-logo { width: 180px; height: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.95rem; color: rgba(253, 250, 246, 0.62); }
.footer-nav, .footer-channels { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a, .footer-channels a {
  font-size: var(--size-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.25s var(--ease-standard), color 0.25s var(--ease-standard);
}
.footer-nav a:hover, .footer-channels a:hover { opacity: 1; color: var(--gold-light); }
.footer-contact p { font-size: 0.95rem; line-height: 1.8; }
.footer-legal {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(253, 250, 246, 0.14);
  font-size: var(--size-small);
  letter-spacing: 0.08em;
  color: rgba(253, 250, 246, 0.5);
}

/* ==========================================================================
   CINEMATIC DESKTOP BOOK (JS-enhanced only)
   ========================================================================== */
html.js.cinematic .chapter { padding-top: calc(var(--header-h) + var(--space-md)); }
html.js.cinematic .spread-inner { will-change: transform, opacity; transform-style: preserve-3d; }
html.js.cinematic .cover-inner { min-height: 100vh; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .craft-grid { grid-template-columns: repeat(2, 1fr); }
  .experience-live { grid-template-columns: repeat(2, 1fr); }
  .experience-hub { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .storybook-opening-track { height: 140svh; }
  .storybook-opening-stage { display: block; padding: calc(var(--header-h) + 1.25rem) 1.25rem 2rem; }
  .storybook-opening-copy { max-width: none; text-align: center; }
  .storybook-opening-copy h1 { font-size: clamp(2.25rem, 10vw, 3.55rem); }
  .storybook-opening-copy .lead { max-width: 30rem; margin: 1rem auto 0; font-size: .98rem; line-height: 1.55; }
  .archive-book-scene { position: absolute; right: 50%; bottom: 5.2rem; width: min(92vw, 31rem); transform: translateX(calc(50% + var(--opening-progress, 0) * 0vw)) translateY(calc(var(--opening-progress, 0) * -18vh)) scale(calc(1 + var(--opening-progress, 0) * .38)); }
  .archive-book { inset: 8% 2% 8% 5%; transform: rotateX(calc(8deg - var(--opening-progress, 0) * 8deg)) rotateZ(calc(-2deg + var(--opening-progress, 0) * 2deg)); }
  .archive-cover-title { font-size: clamp(1.6rem,8vw,2.5rem); }
  .archive-scroll-cue { right: 50%; bottom: 1rem; transform: translateX(50%); white-space: nowrap; }
}

html.storybook-static .storybook-opening-track { height: 100svh; }
html.storybook-static .storybook-opening-copy { opacity: 1; transform: none; }
html.storybook-static .archive-book-scene { transform: none; }
html.storybook-static .archive-cover { transform: translateZ(8px); transition: transform 500ms var(--ease-luxury), opacity 300ms ease 280ms; }
html.storybook-static.storybook-activated .archive-cover { transform: translateZ(8px) rotateY(-176deg); opacity: 0; }
html.storybook-static .archive-poster { opacity: 0; transition: opacity 320ms ease 260ms; }
html.storybook-static.storybook-activated .archive-poster { opacity: 1; }
html.storybook-static.storybook-activated .storybook-opening-copy, html.storybook-static.storybook-activated .archive-scroll-cue { opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
html.storybook-static .storybook-track { height: 100svh; }
html.storybook-static .storybook-chapter--poster { display: none; }

@media (max-width: 899px) {
  :root { --header-h: 4.25rem; }
  .brand-logo { width: 150px; }
  .nav-toggle { display: inline-flex; }
  #site-nav {
    position: fixed;
    inset: 0;
    background: rgba(28, 17, 19, 0.97);
    color: var(--ivory);
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s var(--ease-standard);
  }
  #site-nav.open { opacity: 1; pointer-events: auto; }
  #site-nav a { font-size: 1.05rem; }
  .site-header { color: var(--ivory); }
  .site-header.scrolled { color: var(--ink); }
  .site-header:has(#site-nav.open) { color: var(--ivory); }

  .two-col { grid-template-columns: 1fr; }
  .page-media { aspect-ratio: 4 / 3; }
  .moment .page-media { order: -1; }
  .cover-book { width: min(72vw, 22rem); }
  .channels-logo { width: 200px; }
}

@media (max-width: 560px) {
  .craft-grid { grid-template-columns: 1fr; }
  .experience-live { grid-template-columns: 1fr; }
  .experience-hub { grid-template-columns: 1fr; }
  .channels-cta { flex-direction: column; align-items: stretch; }
  .channel-list a { grid-template-columns: 1fr auto; }
  .channel-desc { display: none; }
  .site-footer { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRIVACY & CONSENT
   ========================================================================== */
.privacy-settings { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.consent-panel[hidden] { display: none; }
.consent-panel {
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 46rem;
  margin-left: auto;
  padding: 1rem;
  border: 1px solid rgba(28, 21, 8, 0.2);
  background: var(--ivory);
  box-shadow: 0 1rem 3rem rgba(28, 21, 8, 0.18);
  color: var(--ink);
}
.consent-panel p { margin: 0; }
.consent-panel p span { display: block; margin-top: 0.25rem; }
.consent-panel div { display: flex; gap: 0.5rem; }
.consent-panel button { min-height: 2.75rem; padding: 0.65rem 1rem; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.consent-panel [data-consent-accept] { background: var(--ink); color: var(--ivory); }
@media (max-width: 540px) {
  .consent-panel { align-items: stretch; flex-direction: column; }
  .consent-panel div { justify-content: flex-end; }
}

/* ==========================================================================
   REDUCED MOTION ? elegant static editorial journey, all content present
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html.js .reveal, html.js .reveal.visible { opacity: 1; transform: none; }
  html.js .reveal-media img { transform: none; }
  .scroll-cue i { animation: none; }
  .cover-leaf { transform: none !important; }
}


/* ==========================================================================
   CH1 ? CINEMATIC STORYBOOK HERO
   ========================================================================== */
.storybook-hero { max-width: none; margin: 0; padding: 0; background: var(--ink); }
.storybook-opening-track { position: relative; height: 130svh; background: #eee4d3; }
.storybook-opening-stage {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(17rem, 0.75fr) minmax(30rem, 1.25fr); align-items: center;
  gap: clamp(2rem, 5vw, 7rem); padding: calc(var(--header-h) + 2rem) clamp(2rem, 7vw, 8rem) 3rem;
  color: var(--ink); background:
    radial-gradient(circle at 76% 42%, rgba(184,134,46,.14), transparent 30%),
    linear-gradient(118deg, #fdfaf4 0%, #f3eadc 58%, #e9ddca 100%);
}
.storybook-opening-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(84,24,28,.025) 8px); }
.storybook-opening-copy { position: relative; z-index: 4; max-width: 38rem; opacity: calc(1 - var(--opening-progress, 0) * 1.7); transform: translateY(calc(var(--opening-progress, 0) * -1.5rem)); }
.storybook-opening-copy h1 { font-size: clamp(2.7rem, 4.4vw, 5rem); text-wrap: balance; }
.storybook-opening-copy .lead { margin-top: 1.5rem; color: #594e3d; }
.storybook-opening-copy .storybook-open { margin-top: 1.7rem; color: var(--ivory); border-color: var(--oxblood-deep); background: var(--oxblood-deep); }
.storybook-opening-copy .storybook-open:hover { border-color: var(--gold-deep); background: var(--gold-deep); }
.archive-book-scene { position: relative; z-index: 2; width: min(48vw, 46rem); aspect-ratio: 1.24; perspective: 1800px; transform: translateX(calc(var(--opening-progress, 0) * -18vw)) scale(calc(1 + var(--opening-progress, 0) * .74)); transform-origin: center; }
.archive-book-shadow { position: absolute; z-index: -2; right: -4%; bottom: -7%; width: 87%; height: 16%; border-radius: 50%; background: rgba(52,24,19,.35); filter: blur(calc(16px + var(--opening-progress, 0) * 18px)); transform: rotate(-3deg) scaleX(calc(1 - var(--opening-progress, 0) * .2)); opacity: calc(1 - var(--opening-progress, 0) * .65); }
.archive-book { position: absolute; inset: 5% 3% 9% 7%; transform-style: preserve-3d; transform: rotateX(calc(11deg - var(--opening-progress, 0) * 11deg)) rotateZ(calc(-4deg + var(--opening-progress, 0) * 4deg)); }
.archive-page-block { position: absolute; inset: 2.2% 0 0 3.5%; overflow: hidden; border: 1px solid #d2bd91; border-radius: .35rem .75rem .75rem .35rem; background: repeating-linear-gradient(0deg,#fbf6e9 0 2px,#e2d2af 3px 4px); box-shadow: 1rem 1.4rem 2.2rem rgba(51,29,18,.23), inset -.65rem 0 1rem rgba(112,76,31,.15); transform: translateZ(-6px); }
.archive-page-block::after { content: ""; position: absolute; inset: auto 0 0; height: 10px; background: repeating-linear-gradient(0deg,#bfa77b 0 1px,#f8efd9 1px 3px); }
.archive-poster { position: absolute; inset: 0; background: #17120c; opacity: clamp(0, calc((var(--opening-progress, 0) - .72) * 4), 1); }
.archive-poster picture, .archive-poster img { width: 100%; height: 100%; }
.archive-poster img { object-fit: cover; }
.archive-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.4rem; padding: 10%; overflow: hidden; border: 1px solid #3e1015; border-radius: .45rem .8rem .8rem .45rem; color: var(--gold-light); background: radial-gradient(circle at 70% 22%,#882e34,#641a21 50%,#481016 100%); box-shadow: inset 0 0 0 3px rgba(230,201,138,.2), inset 1.5rem 0 2rem rgba(25,4,8,.25), 1.3rem 1.7rem 2.5rem rgba(51,18,16,.34); transform-origin: left center; transform: translateZ(8px) rotateY(calc(var(--opening-progress, 0) * -176deg)); backface-visibility: visible; }
.archive-cover::before { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(42deg,transparent 0 3px,#fff 4px 5px); mix-blend-mode: soft-light; }
.archive-cover::after { content: ""; position: absolute; inset: 2.6%; border: 1px solid rgba(230,201,138,.48); border-radius: .2rem .55rem .55rem .2rem; }
.archive-cover-frame { position: absolute; inset: 6%; border: 1px solid rgba(230,201,138,.32); }
.archive-cover img { width: clamp(9rem, 18vw, 15rem); filter: brightness(0) invert(88%) sepia(34%) saturate(654%) hue-rotate(351deg); }
.archive-cover-rule { width: 4rem; height: 1px; background: var(--gold-light); }
.archive-cover-title { font: italic clamp(1.8rem,3.2vw,3.25rem)/1 var(--font-display); }
.archive-cover-year { font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; }
.archive-spine { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 4.2%; border-radius: .45rem 0 0 .45rem; background: linear-gradient(90deg,#3a0b10,#8a3035 52%,#441015); box-shadow: inset -1px 0 rgba(230,201,138,.35); transform: translateZ(10px); }
.archive-scroll-cue { position: absolute; right: clamp(2rem,7vw,8rem); bottom: 1.4rem; margin: 0; color: #6c5e49; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: calc(1 - var(--opening-progress, 0) * 2); }
.archive-scroll-cue span { display: inline-block; width: 2.5rem; height: 1px; margin: 0 0 .2rem .8rem; background: var(--gold-deep); }
.storybook-track { position: relative; height: 500svh; }
.storybook-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #17120c;
  color: var(--ivory);
}
.storybook-media, .storybook-shade { position: absolute; inset: 0; }
.storybook-media { z-index: -2; background: #17120c; }
.storybook-poster-picture { position: absolute; inset: 0; }
.storybook-video, .storybook-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.storybook-video { position: absolute; inset: 0; }
.storybook-poster { position: absolute; inset: 0; }
.storybook-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(15, 10, 5, 0.8) 0%, rgba(15, 10, 5, 0.52) 38%, rgba(15, 10, 5, 0.08) 67%),
    linear-gradient(0deg, rgba(12, 8, 4, 0.52), transparent 42%);
}
.storybook-copy {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-h) + clamp(2rem, 8vh, 6rem));
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  left: max(clamp(1.25rem, 7vw, 7rem), env(safe-area-inset-left, 0px));
  width: min(42rem, 48vw);
  display: grid;
  align-items: center;
}
.storybook-chapter {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity 420ms var(--ease-luxury), transform 420ms var(--ease-luxury), visibility 0s linear 420ms;
}
.storybook-chapter.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 80ms;
}
.storybook-chapter h1, .storybook-chapter h2 { max-width: 12em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,0.25); }
.storybook-chapter h1 { font-size: clamp(2.5rem, 4.6vw, 5rem); }
.storybook-chapter h2 { font-size: clamp(2.2rem, 4vw, 4.5rem); }
.storybook-chapter .lead, .storybook-chapter > p:not(.kicker):not(.storybook-count) {
  max-width: 35rem;
  margin-top: 1.4rem;
  color: rgba(253, 250, 244, 0.88);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.65;
}
.storybook-chapter .kicker, .storybook-count { color: var(--gold-light); }
.storybook-count { margin: 0 0 1.1rem; font-size: var(--size-kicker); letter-spacing: 0.28em; }
.storybook-open { margin-top: 1.75rem; border: 0; }
.storybook-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.storybook-secondary { border-color: rgba(253,250,244,0.62); color: var(--ivory); background: rgba(20,14,8,0.22); }
.storybook-secondary:hover { border-color: var(--ivory); background: rgba(253,250,244,0.12); }
.storybook-navigation {
  position: absolute;
  z-index: 3;
  right: max(clamp(1.25rem, 4vw, 3.5rem), env(safe-area-inset-right, 0px));
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 0.25rem;
}
.storybook-navigation button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(253,250,244,0.62);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}
.storybook-navigation button:hover, .storybook-navigation button[aria-current="true"] { color: var(--ivory); }
.storybook-navigation button[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--gold-light); text-underline-offset: 0.45rem; }
.storybook-progress { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 2px; background: rgba(253,250,244,0.15); }
.storybook-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--gold-light); will-change: transform; }
.storybook-fallback-actions { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; display: flex; gap: 1rem; }
.storybook-fallback-actions a { text-decoration: underline; }
html.storybook-cinematic .storybook-fallback-actions, html.storybook-static .storybook-fallback-actions { display: none; }
.storybook-hero + .meaning { padding-top: clamp(3rem, 7vw, 6rem); }

html.storybook-static .storybook-track { height: auto; }
html.storybook-static .storybook-stage { position: relative; }
html.storybook-static .storybook-video { display: none; }
html.storybook-static .storybook-navigation { display: flex; }

@media (max-width: 899px) {
  .storybook-video, .storybook-poster { object-position: center center; }
  .storybook-shade { background: linear-gradient(0deg, rgba(12,8,4,0.9) 0%, rgba(12,8,4,0.58) 48%, rgba(12,8,4,0.08) 78%); }
  .storybook-copy {
    top: calc(var(--header-h) + 1rem);
    right: max(1.25rem, env(safe-area-inset-right, 0px));
    bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
    left: max(1.25rem, env(safe-area-inset-left, 0px));
    width: auto;
    align-items: end;
  }
  .storybook-chapter h1 { font-size: clamp(2.25rem, 10vw, 3.6rem); }
  .storybook-chapter h2 { font-size: clamp(2rem, 9vw, 3.3rem); }
  .storybook-chapter .lead, .storybook-chapter > p:not(.kicker):not(.storybook-count) { font-size: 1rem; line-height: 1.55; }
  .storybook-navigation { right: 1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); left: 1rem; justify-content: space-between; }
  .storybook-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .storybook-chapter { transition: none; transform: none; }
  .storybook-progress span { will-change: auto; }
}

/* Opening portrait composition overrides follow the shared cinematic rules. */
@media (max-width: 899px) {
  .storybook-opening-track { height: 140svh; }
  .storybook-opening-stage { display: block; padding: calc(var(--header-h) + 1.25rem) 1.25rem 2rem; }
  .storybook-opening-copy { max-width: none; text-align: center; }
  .storybook-opening-copy h1 { font-size: clamp(2.25rem, 10vw, 3.55rem); }
  .storybook-opening-copy .lead { max-width: 30rem; margin: 1rem auto 0; font-size: .98rem; line-height: 1.55; }
  .archive-book-scene { position: absolute; right: 50%; bottom: 5.2rem; width: min(92vw, 31rem); transform: translateX(50%) translateY(calc(var(--opening-progress, 0) * -18vh)) scale(calc(1 + var(--opening-progress, 0) * .38)); }
  .archive-book { inset: 8% 2% 8% 5%; transform: rotateX(calc(8deg - var(--opening-progress, 0) * 8deg)) rotateZ(calc(-2deg + var(--opening-progress, 0) * 2deg)); }
  .archive-cover-title { font-size: clamp(1.6rem, 8vw, 2.5rem); }
  .archive-scroll-cue { right: 50%; bottom: 1rem; transform: translateX(50%); white-space: nowrap; }
}

/* Keep the poster-only chapter out of the pre-runtime and no-JS flows. */
html.no-js .storybook-track,
html.js:not(.storybook-cinematic):not(.storybook-static) .storybook-track { display: none; }
html.storybook-cinematic .storybook-track,
html.storybook-static .storybook-track { display: block; }
html.no-js .storybook-opening-track { height: auto; min-height: 100svh; }
html.no-js .storybook-opening-stage { position: relative; }

@media (max-height: 600px) and (orientation: landscape) {
  .storybook-opening-stage { grid-template-columns: minmax(16rem, .8fr) minmax(22rem, 1.2fr); gap: clamp(1rem, 4vw, 4rem); padding-top: calc(var(--header-h) + .75rem); padding-bottom: 1.5rem; }
  .storybook-opening-copy { max-width: 28rem; }
  .storybook-opening-copy h1 { font-size: clamp(2rem, 5.5vh, 3.5rem); }
  .storybook-opening-copy .lead { margin-top: .7rem; font-size: .9rem; line-height: 1.35; }
  .storybook-opening-copy .storybook-open { margin-top: .85rem; min-height: 2.7rem; padding: .7rem 1.25rem; }
  .archive-book-scene { width: min(44vw, 34rem); max-height: calc(100svh - var(--header-h) - 2rem); }
  .archive-scroll-cue { bottom: .65rem; }
}

@media (max-width: 899px) and (max-height: 600px) and (orientation: landscape) {
  .storybook-opening-stage { display: grid; grid-template-columns: minmax(13rem, .8fr) minmax(18rem, 1.2fr); align-items: center; padding: calc(var(--header-h) + .5rem) 1.25rem 1.25rem; }
  .storybook-opening-copy { max-width: 22rem; text-align: left; }
  .storybook-opening-copy h1 { font-size: clamp(1.8rem, 6vh, 2.8rem); }
  .storybook-opening-copy .lead { margin: .65rem 0 0; font-size: .82rem; }
  .storybook-opening-copy .storybook-open { margin-top: .7rem; }
  .archive-book-scene { position: relative; right: auto; bottom: auto; width: min(54vw, 27rem); transform: translateX(calc(var(--opening-progress, 0) * -8vw)) scale(calc(1 + var(--opening-progress, 0) * .35)); }
  .archive-scroll-cue { right: 1.25rem; bottom: .45rem; transform: none; font-size: .52rem; }
}