/* ==========================================================================
   THE HOUSE OF SELF — Dan Lu Wellness
   Editorial luxury / botanical wellness brand experience
   ========================================================================== */

:root{
  /* -- palette, drawn from the book artwork -- */
  --ivory:#FBF6EC;
  --cream:#F5EEDD;
  --paper:#FAF4E8;
  --beige:#EADFC3;
  --sage:#8CA084;
  --sage-dim:#B9C6AE;
  --olive:#6E7A52;
  --forest:#2F4736;
  --forest-deep:#213229;
  --blush:#ECC9C2;
  --rose:#C98A82;
  --wine:#7C2438;
  --wine-deep:#5C1A29;
  --charcoal:#37312A;
  --charcoal-soft:#5B5348;
  --plum:#6B5382;
  --slate:#3E5C74;
  --gold:#B4772F;
  --taupe:#8A7A5C;

  --color-bg:var(--ivory);
  --color-text:var(--charcoal);
  --color-text-soft:var(--charcoal-soft);
  --color-heading:var(--forest-deep);
  --color-accent:var(--wine);
  --color-line:rgba(55,49,42,0.14);

  --font-display:'Cormorant Garamond', 'Georgia', serif;
  --font-body:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-script:'Caveat', cursive;

  --space-1:0.5rem;
  --space-2:1rem;
  --space-3:1.75rem;
  --space-4:2.75rem;
  --space-5:4.5rem;
  --space-6:7rem;
  --space-7:10rem;

  --container:1180px;
  --radius:2px;
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-slow: 900ms;
  --dur-med: 500ms;
  --dur-fast: 250ms;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* This brand is intentionally a single warm literary palette.
       We keep light paper tones even in dark OS mode for consistency
       with the printed book, but soften pure white glare. */
    --color-bg:#F3ECDC;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--color-heading);
  font-weight:500;
  margin:0;
  letter-spacing:0.01em;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--forest-deep); color:#fff; padding:0.8em 1.2em;
  border-radius:var(--radius); font-family:var(--font-body);
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }

button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem, 5vw, 3rem);
}

.eyebrow{
  font-family:var(--font-body);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0 0 0.9em;
  font-weight:500;
}
.eyebrow.center{ text-align:center; }
.eyebrow.light{ color:var(--sage-dim); }

.chapter-heading{
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.2;
  margin:0 0 1.1em;
}
.chapter-heading.center{ text-align:center; max-width:44ch; margin-left:auto; margin-right:auto; }
.chapter-heading.light{ color:var(--ivory); }

.section-lede{
  max-width:56ch;
  margin:0 auto var(--space-5);
  color:var(--color-text-soft);
  font-size:1.08rem;
}
.section-lede.center{ text-align:center; }

.script{ font-family:var(--font-script); color:var(--wine); }

.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  padding:0.95em 2.1em;
  font-family:var(--font-body);
  font-size:0.82rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  border:none; border-radius:999px;
  transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
  cursor:pointer;
}
.btn-primary{
  background:var(--forest-deep); color:var(--ivory);
  box-shadow:0 8px 24px -10px rgba(33,50,41,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(33,50,41,0.6); }
.btn-ghost{
  background:transparent; color:var(--forest-deep);
  border:1px solid var(--color-line);
}
.btn-ghost:hover{ background:rgba(47,71,54,0.06); transform:translateY(-2px); }
.btn-note{ display:block; margin-top:0.9em; font-size:0.82rem; color:var(--color-text-soft); font-style:italic; }

/* ==========================================================================
   READING PROGRESS BAR
   ========================================================================== */
.progress-bar{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:600;
  background:rgba(55,49,42,0.06);
}
.progress-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(to right, var(--sage), var(--rose), var(--wine), var(--gold));
  transition:width 80ms linear;
}

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */
.whatsapp-fab{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:550;
  display:flex; align-items:center; gap:0.6em;
  background:#25D366; color:#fff;
  padding:0.85em; border-radius:999px;
  text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(37,211,102,0.55);
  transition:padding var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.whatsapp-fab svg{ width:26px; height:26px; flex:none; }
.whatsapp-fab span{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:0.85rem; font-weight:500; letter-spacing:0.02em;
  transition:max-width var(--dur-med) var(--ease-soft);
}
.whatsapp-fab:hover,.whatsapp-fab:focus-visible{
  padding-right:1.1em; transform:translateY(-2px);
  box-shadow:0 18px 36px -10px rgba(37,211,102,0.65);
}
.whatsapp-fab:hover span,.whatsapp-fab:focus-visible span{ max-width:120px; }
@media (prefers-reduced-motion: no-preference){
  .whatsapp-fab::before{
    content:''; position:absolute; inset:0; border-radius:999px;
    box-shadow:0 0 0 0 rgba(37,211,102,0.55);
    animation:wa-pulse 2.6s ease-out infinite;
  }
}
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.45); }
  80%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:600px){
  .whatsapp-fab{ right:1rem; bottom:1rem; }
}

/* ==========================================================================
   CUSTOM CURSOR (desktop only)
   ========================================================================== */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 200ms ease;
}
.cursor-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--wine);
}
.cursor-ring{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(124,36,56,0.45);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 200ms ease, width 250ms var(--ease-soft), height 250ms var(--ease-soft), background 250ms ease;
}
.cursor-label{
  font-family:var(--font-body); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--wine); opacity:0;
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring{ opacity:1; }
.cursor-ring.is-active{ width:76px; height:76px; background:rgba(124,36,56,0.06); }
.cursor-ring.is-active .cursor-label{ opacity:1; }
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:1.35rem clamp(1.25rem, 4vw, 2.75rem) 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  background:transparent;
  transition:background var(--dur-med) var(--ease-soft), padding var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
}
.site-nav.is-scrolled{
  background:rgba(251,246,236,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding-top:0.85rem; padding-bottom:0.85rem;
  box-shadow:0 1px 0 rgba(55,49,42,0.08);
}
.nav-inner{ width:100%; max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.nav-mark{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--forest-deep); }
.mark-icon{ width:26px; height:26px; color:var(--forest-deep); flex:none; }
.nav-mark-text{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:0.02em; white-space:nowrap; }

.nav-links{ display:flex; gap:clamp(1rem,2.4vw,2.1rem); font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; }
.nav-links a{ text-decoration:none; position:relative; padding-bottom:4px; color:var(--charcoal); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--wine);
  transition:right var(--dur-fast) var(--ease-soft);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap:1rem; flex:none; }

.nav-cart{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  color:var(--forest-deep); text-decoration:none;
  transition:background var(--dur-fast) ease;
}
.nav-cart:hover{ background:rgba(47,71,54,0.08); }
.nav-cart-badge{
  position:absolute; top:-2px; right:-2px;
  min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:var(--wine); color:#fff;
  font-size:0.62rem; line-height:16px; text-align:center;
  font-family:var(--font-body); font-weight:600;
}
.mobile-menu .nav-cart-badge{
  position:static; display:inline-block; margin-left:0.5em;
  min-width:18px; height:18px; line-height:18px;
}

.nav-enter{
  display:inline-flex; align-items:center; gap:0.5em;
  font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:var(--forest-deep);
  border:1px solid var(--color-line); border-radius:999px;
  padding:0.6em 1.2em;
  transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  flex:none;
}
.nav-enter:hover{ background:var(--forest-deep); color:var(--ivory); transform:translateY(-1px); }
.nav-enter svg{ transition:transform var(--dur-fast) ease; }
.nav-enter:hover svg{ transform:translateX(3px); }

.nav-burger{ display:none; flex-direction:column; gap:5px; padding:0.4rem; }
.nav-burger span{ width:22px; height:1.5px; background:var(--forest-deep); display:block; transition:transform 250ms ease, opacity 250ms ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  display:none; flex-direction:column;
  flex:0 0 100%; width:100%;
  background:var(--ivory);
  border-top:1px solid var(--color-line);
  margin-top:0;
  max-height:0; overflow:hidden;
  transition:max-height 350ms var(--ease-soft), margin-top 350ms var(--ease-soft);
}
.mobile-menu a{
  padding:1rem clamp(1.25rem,4vw,2.75rem);
  text-decoration:none; color:var(--forest-deep);
  border-bottom:1px solid var(--color-line);
  font-family:var(--font-display); font-size:1.15rem;
}
.mobile-menu.is-open{ max-height:420px; margin-top:1.35rem; }

@media (max-width:860px){
  .nav-links,.nav-enter{ display:none; }
  .nav-burger{ display:flex; }
  .mobile-menu{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:7rem 1.5rem 4rem;
  background:var(--ivory);
  overflow:hidden;
}
.hero-wash{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 14% 8%, rgba(201,138,130,0.24) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 6%, rgba(140,160,132,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(180,119,47,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 0%, #fffdf6 0%, var(--ivory) 55%);
}
.hero-botanical{
  position:absolute; top:56px; width:min(28vw, 190px); height:auto;
  opacity:0.92; pointer-events:none;
  filter:saturate(1.05);
  -webkit-mask-image:linear-gradient(135deg, #000 30%, transparent 78%);
  mask-image:linear-gradient(135deg, #000 30%, transparent 78%);
}
.hero-botanical--left{ left:0; border-radius:0 0 120px 0; }
.hero-botanical--right{ right:0; transform:scaleX(-1); border-radius:0 0 0 120px; }

.hero-dust{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(201,138,130,0.5) 0 1.4px, transparent 1.6px),
    radial-gradient(circle, rgba(140,160,132,0.5) 0 1.4px, transparent 1.6px);
  background-size:64px 64px, 88px 88px;
  background-position:0 0, 30px 40px;
  opacity:0.55;
  animation:dust-drift 40s linear infinite;
}
@keyframes dust-drift{ from{ background-position:0 0, 30px 40px; } to{ background-position:-400px 600px, -370px 640px; } }

.hero-content{ position:relative; z-index:2; max-width:640px; }

.hero-kicker{
  font-size:0.76rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--olive); margin:0 0 1.6rem;
}

.hero-doorway{
  width:min(46vw, 190px); height:auto; margin:0 auto 1.2rem;
  color:var(--olive); opacity:0.55;
}
.door-heart{ color:var(--wine); }

.hero-title{ margin:0 0 0.9rem; }
.hero-title .line{
  display:block;
  font-size:clamp(2.6rem, 8vw, 5.4rem);
  line-height:1.02;
  font-weight:400;
}
.hero-title .line-2 em{ font-style:normal; color:var(--charcoal-soft); font-size:0.55em; vertical-align:0.28em; margin-right:0.15em; }
.hero-title .line-2 .script{ font-size:1.5em; }

.hero-subtitle{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--charcoal-soft);
  margin:0 0 2.2rem;
}

.hero-tagline{
  font-size:0.95rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--forest); line-height:1.9;
  margin:0 0 3rem;
}

.hero-scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.hero-scroll-cue span{ font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--olive); }
.scroll-line{ width:1px; height:52px; background:rgba(55,49,42,0.15); position:relative; overflow:hidden; }
.scroll-line-fill{ position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--wine); animation:scroll-fill 2.2s ease-in-out infinite; }
@keyframes scroll-fill{ 0%{ top:-100%; } 50%{ top:0%; } 100%{ top:100%; } }

.reveal-line{ opacity:0; transform:translateY(22px); }

/* ==========================================================================
   JOURNEY THEME PATH
   ========================================================================== */
.theme-path{ padding:var(--space-6) 0; background:var(--cream); position:relative; overflow:hidden; }
.theme-path-inner{ max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem); position:relative; }

.path-curve{
  display:block; width:100%; height:auto; margin-top:var(--space-5);
  opacity:0.65;
}

.path-track{
  list-style:none; margin:calc(var(--space-5) * -1) 0 2rem; padding:0;
  display:grid; grid-template-columns:repeat(10, 1fr); gap:0.6rem;
  position:relative;
}
.path-track li{
  display:flex; flex-direction:column; align-items:center; gap:0.65rem;
  text-align:center;
}
.path-track li:nth-child(odd){ transform:translateY(-14px); }
.path-track li:nth-child(even){ transform:translateY(14px); }

.path-dot{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  border:1.5px solid var(--stage, var(--sage-dim));
  color:var(--stage, var(--olive));
  transition:background var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft), color var(--dur-med) ease;
}
.path-dot svg{ width:20px; height:20px; }

.path-label{
  font-family:var(--font-display); font-size:0.98rem;
  color:var(--charcoal-soft); text-align:center;
  transition:color var(--dur-med) ease;
}
.path-note{
  font-size:0.66rem; letter-spacing:0.03em;
  color:var(--charcoal-soft); opacity:0.65;
  max-width:11ch;
}

.path-track li.is-lit .path-dot{
  background:var(--stage, var(--wine));
  color:var(--ivory);
  transform:scale(1.12);
  box-shadow:0 10px 22px -8px var(--stage, var(--wine));
}
.path-track li.is-lit .path-label{ color:var(--stage, var(--wine)); font-weight:500; }

.path-hint{ text-align:center; font-size:0.78rem; color:var(--olive); font-style:italic; margin:0; }

@media (max-width:900px){
  .path-curve{ display:none; }
  .path-track{
    grid-template-columns:1fr; gap:0; margin-top:0;
    max-width:420px; margin-left:auto; margin-right:auto;
    position:relative; padding-left:2.2rem;
  }
  .path-track::before{
    content:''; position:absolute; left:22px; top:24px; bottom:24px; width:1px;
    background:repeating-linear-gradient(to bottom, var(--color-line) 0 6px, transparent 6px 12px);
  }
  .path-track li{
    flex-direction:row; align-items:center; justify-content:flex-start;
    text-align:left; gap:1rem;
    padding:0.85rem 0;
    transform:none !important;
  }
  .path-track li:not(:last-child){ border-bottom:none; }
  .path-dot{ width:38px; height:38px; margin-left:-2.2rem; background:var(--cream); }
  .path-dot svg{ width:17px; height:17px; }
  .path-note{ max-width:none; }
}

/* ==========================================================================
   BOOK OPENS — signature scroll interaction
   ========================================================================== */
.book-open{
  position:relative;
  height:280vh;
  background:var(--forest-deep);
}
.book-open-sticky{
  position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  perspective:1800px;
}
.book-open-bg{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, #3a5544 0%, var(--forest-deep) 62%, #172019 100%);
}
.book-open-caption{
  position:relative; z-index:2;
  font-family:var(--font-display); font-style:italic; color:var(--sage-dim);
  font-size:0.95rem; letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:2.4rem; text-align:center;
  opacity:0.85;
}

.book-3d-stage{
  position:relative; z-index:2;
  width:min(46vw, 320px);
  aspect-ratio:509/727;
  transform-style:preserve-3d;
}
.book-3d{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(4deg);
}
.book-spine-face{
  position:absolute; left:-2.2%; top:1%; width:4.5%; height:98%;
  background:linear-gradient(to right, #5c4425, #cbb27f, #5c4425);
  transform:rotateY(-90deg); transform-origin:right center;
  border-radius:2px 0 0 2px;
}
.book-cover,.book-page{
  position:absolute; inset:0;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.65);
  backface-visibility:hidden;
}
.book-cover img{ width:100%; height:100%; object-fit:cover; }
.book-cover--back{ z-index:1; }
.book-cover--front{
  z-index:5;
  transform-origin:left center;
  transform:rotateY(0deg);
}
.book-page{
  z-index:2;
  background:
    linear-gradient(to right, rgba(0,0,0,0.05), transparent 6%),
    #FAF4E6;
  display:flex; align-items:center;
  padding:10% 9%;
}
.page-text{ font-family:var(--font-display); color:var(--charcoal); }
.page-text p{ font-size:clamp(0.78rem, 1.5vw, 1rem); line-height:1.65; margin:0 0 1.1em; }
.page-quote{ font-style:italic; color:var(--wine-deep); font-size:clamp(0.85rem, 1.7vw, 1.08rem) !important; }
.page-fineprint{ margin-top:1.2em !important; font-size:0.78em !important; color:var(--olive); font-style:italic; }

.book-open-hint{
  position:relative; z-index:2;
  margin-top:2.4rem; text-align:center;
  font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(233,236,228,0.55);
}

.book-tap-hint{ display:none; }

@media (max-width:760px){
  .book-open{ height:auto; background:var(--forest-deep); }
  .book-open-sticky{ position:relative; height:auto; padding:4rem 1.5rem 3.5rem; perspective:1100px; }
  .book-3d-stage{ width:min(78vw,300px); }
  .book-3d{ transform:none; }
  .book-spine-face{ display:none; }
  .book-cover--back{ display:none; }

  #bookInsidePage{
    display:flex; opacity:0;
    transition:opacity 500ms ease 200ms;
  }
  .book-3d.is-open #bookInsidePage{ opacity:1; }

  .book-cover--front{
    position:relative; width:100%; height:100%;
    transform-origin:left center;
    transform:rotateY(0deg);
    transition:transform 750ms cubic-bezier(.22,.61,.36,1);
    box-shadow:0 30px 60px -22px rgba(0,0,0,0.6);
  }
  .book-3d.is-open .book-cover--front{ transform:rotateY(-130deg); }

  .book-tap-hint{
    display:block; position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
    background:rgba(55,49,42,0.75); color:var(--ivory);
    font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
    padding:0.5em 1em; border-radius:999px;
    pointer-events:none;
    transition:opacity 300ms ease;
  }
  .book-3d.is-open .book-tap-hint{ opacity:0; }

  .book-open-hint{ display:none; }
  .book-open-caption{ margin-bottom:1.6rem; }
}

/* ==========================================================================
   ROOMS OF SELF
   ========================================================================== */
.rooms{ padding:var(--space-7) 0 var(--space-6); background:var(--ivory); }

.room-grid{
  margin-top:var(--space-5);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--color-line);
  border:1px solid var(--color-line);
}
/* ---- Room of Understanding: the book that opens ---------------------------
   Default (no JavaScript): the open book is simply shown.
   .is-scroll = desktop, opens as you scroll.  .is-tap = phones, opens on tap. */
.room-book{ margin:var(--space-4) 0 var(--space-5); }
.room-book-sticky{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.room-book-eyebrow{
  font-family:var(--font-display); font-style:italic; font-size:1.3rem;
  color:var(--olive); margin:0; text-align:center;
}
.room-book-stage{
  --rb-w:min(100%, 880px);
  position:relative; display:grid; place-items:center;
  grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  width:var(--rb-w); aspect-ratio:1400/961; min-height:0;
  perspective:2600px;
}
.room-book-stage::after{
  content:''; position:absolute; left:12%; right:12%; bottom:2%; height:9%;
  background:radial-gradient(ellipse at center, rgba(33,50,41,.34) 0%, rgba(33,50,41,0) 70%);
  filter:blur(6px); z-index:0; pointer-events:none;
}
.rb-closed,.rb-open{ grid-area:1/1; position:relative; z-index:1; display:block; min-height:0; }
.rb-open{ width:100%; height:auto; }
.rb-closed{ display:none; height:100%; width:auto; max-width:none; }
.room-book-hint{
  display:none; margin:0; text-align:center; transition:opacity 400ms ease;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive);
}

/* desktop: pinned, scroll-driven */
.room-book.is-scroll{ height:250vh; margin-block:var(--space-3); }
.room-book.is-scroll .room-book-sticky{
  position:sticky; top:0; height:100vh; height:100dvh; justify-content:center;
  padding:4.5rem 0 1.5rem;
}
.room-book.is-scroll .room-book-stage{
  width:min(100%, 900px, calc((100vh - 13rem) * 1.457));
  width:min(100%, 900px, calc((100dvh - 13rem) * 1.457));
}
.room-book.is-scroll .rb-closed{ display:block; z-index:2; will-change:transform, opacity; }
.room-book.is-scroll .rb-open{ will-change:transform, opacity; }
.room-book.is-scroll .room-book-hint,
.room-book.is-scroll .hint-scroll{ display:block; }
.room-book.is-scroll .hint-tap{ display:none; }

/* phones: tap to open */
.room-book.is-tap .room-book-stage{
  --rb-w:min(92vw, 460px);
  width:var(--rb-w); aspect-ratio:auto; height:calc(var(--rb-w) * 1.22);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:height 800ms var(--ease-soft);
}
.room-book.is-tap.is-open .room-book-stage{ height:calc(var(--rb-w) * .74); }
.room-book.is-tap .rb-closed{
  display:block; transform-origin:18% 50%; transform:rotateY(0deg);
  transition:transform 800ms var(--ease-soft), opacity 500ms ease 150ms;
}
.room-book.is-tap .rb-open{
  opacity:0; transform:scale(.55,.8);
  transition:transform 800ms var(--ease-soft) 100ms, opacity 600ms ease 250ms;
}
.room-book.is-tap.is-open .rb-closed{ transform:rotateY(-105deg) scale(1.04); opacity:0; pointer-events:none; }
.room-book.is-tap.is-open .rb-open{ opacity:1; transform:none; }
.room-book.is-tap .room-book-hint{ display:block; }
.room-book.is-tap .hint-scroll{ display:none; }
.room-book.is-tap.is-open .room-book-hint{ opacity:0; }
.room-book.is-tap .room-book-stage:focus-visible{ outline:2px solid var(--wine); outline-offset:6px; border-radius:8px; }

.room-card{
  position:relative;
  aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.6rem;
  padding:1.5rem 1rem;
  background:var(--paper);
  text-align:center;
  transition:background var(--dur-med) var(--ease-soft);
}
.room-card::before{
  content:''; position:absolute; inset:0;
  background:var(--room-tint);
  opacity:0.55; transition:opacity var(--dur-med) var(--ease-soft);
}
.room-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--room-accent); opacity:0.4;
  transition:opacity var(--dur-med) ease;
}
.room-card:hover::before,
.room-card:focus-visible::before,
.room-card.is-active::before{ opacity:1; }
.room-card:hover::after,
.room-card:focus-visible::after,
.room-card.is-active::after{ opacity:1; height:4px; }

.room-window{
  position:relative; z-index:1;
  width:34px; height:44px;
  border:1.3px solid var(--room-accent);
  opacity:0.75;
  transition:opacity var(--dur-med) ease, transform var(--dur-med) var(--ease-soft);
}
.room-window::before,.room-window::after{
  content:''; position:absolute; background:var(--room-accent); opacity:0.75;
}
.room-window::before{ left:0; right:0; top:50%; height:1px; }
.room-window::after{ top:0; bottom:0; left:50%; width:1px; }
.room-card:hover .room-window,
.room-card.is-active .room-window{ opacity:1; transform:scale(1.08); }

.room-name{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:1.25rem; color:var(--room-accent);
}
.room-tag{
  position:relative; z-index:1;
  font-size:0.68rem; letter-spacing:0.05em;
  color:var(--charcoal-soft); max-width:20ch;
}

.room-reveal{
  margin-top:2.5rem;
  max-width:640px; margin-left:auto; margin-right:auto;
  text-align:center;
  background:var(--cream);
  border:1px solid var(--color-line);
  padding:2.6rem 2.2rem;
  position:relative;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft), visibility 0s linear var(--dur-med);
}
.room-reveal.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
.room-reveal-eyebrow{ font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--olive); margin-bottom:1rem; }
.room-reveal-quote{ font-family:var(--font-display); font-style:italic; font-size:1.35rem; color:var(--forest-deep); line-height:1.5; }
.room-reveal-close{
  position:absolute; top:1rem; right:1rem;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--charcoal-soft);
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.room-reveal-close:hover{ background:rgba(55,49,42,0.08); color:var(--wine); }

@media (max-width:900px){
  .room-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:460px){
  .room-grid{ grid-template-columns:1fr; }
  .room-card{ aspect-ratio:auto; padding:2rem 1.25rem; flex-direction:row; justify-content:flex-start; text-align:left; }
  .room-name{ font-size:1.1rem; }
}

/* ==========================================================================
   AUTHOR
   ========================================================================== */
.author{ padding:var(--space-7) 0; background:var(--cream); }
.author-inner{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.author-portrait{ text-align:center; }
.author-portrait-frame{
  width:min(100%, 340px); aspect-ratio:1/1; margin:0 auto;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--color-line);
  box-shadow:0 30px 60px -30px rgba(47,71,54,0.4);
  position:relative;
}
.author-portrait-frame::after{
  content:''; position:absolute; inset:10px; border-radius:50%; border:1px solid rgba(140,160,132,0.5); pointer-events:none;
}
.author-portrait-frame img{ width:100%; height:100%; object-fit:cover; }
.author-signature{
  font-family:var(--font-script); font-size:1.8rem; color:var(--wine);
  margin-top:1.6rem;
}

.author-copy p{ color:var(--color-text-soft); max-width:52ch; }
.author-lead{ font-size:1.12rem; color:var(--charcoal) !important; }
.author-closing{ font-family:var(--font-display); font-style:italic; font-size:1.2rem; color:var(--forest-deep) !important; margin-top:1.4em !important; }

.author-brand-strip{
  margin-top:2.2rem; display:flex; gap:0.7em; align-items:center;
  font-size:0.78rem; letter-spacing:0.24em; color:var(--olive);
}

@media (max-width:820px){
  .author-inner{ grid-template-columns:1fr; text-align:center; }
  .author-copy p{ margin-left:auto; margin-right:auto; }
  .author-brand-strip{ justify-content:center; }
}

/* ==========================================================================
   BOOK SHOWCASE
   ========================================================================== */
.book-showcase{ padding:var(--space-7) 0; background:var(--ivory); overflow:hidden; }
.book-showcase-inner{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.book-showcase-visual{ position:relative; display:flex; justify-content:center; }
.book-object{
  width:min(80%, 320px);
  transform:rotate(-3deg);
  box-shadow:0 50px 90px -30px rgba(55,49,42,0.45);
  border-radius:2px;
  transition:transform var(--dur-med) var(--ease-soft);
}
.book-showcase-visual:hover .book-object{ transform:rotate(0deg) translateY(-6px); }
.book-object-shadow{
  position:absolute; bottom:-6%; left:10%; right:10%; height:28px;
  background:radial-gradient(ellipse, rgba(55,49,42,0.28) 0%, transparent 72%);
  filter:blur(4px);
}

.book-showcase-lead{ font-size:1.1rem; color:var(--color-text-soft); max-width:52ch; }
.book-showcase-note{ font-family:var(--font-display); font-style:italic; color:var(--forest-deep); font-size:1.15rem; margin-top:1.3em; }
.book-showcase-price{
  font-family:var(--font-display); font-size:1.4rem; color:var(--wine);
  margin-top:1.4em;
}
.book-showcase-ctas{ margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

@media (max-width:820px){
  .book-showcase-inner{ grid-template-columns:1fr; text-align:center; }
  .book-showcase-lead,.book-showcase-note{ margin-left:auto; margin-right:auto; }
}

/* ==========================================================================
   OFFERS (doorways)
   ========================================================================== */
.offers{ padding:var(--space-6) 0; background:var(--cream); }
.doorway-grid{
  margin-top:var(--space-5);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.doorway-card{
  position:relative;
  text-align:left; padding:2.3rem 1.8rem;
  background:var(--paper); border:1px solid var(--color-line);
  border-top:3px solid var(--accent, var(--sage));
  display:flex; flex-direction:column; gap:0.9rem;
  transition:transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft), border-color var(--dur-med) ease;
}
.doorway-card:hover,.doorway-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 24px 50px -26px rgba(47,71,54,0.35);
}
.doorway-shape{
  width:30px; height:40px;
  border:1.5px solid var(--accent, var(--olive)); border-bottom:none;
  border-radius:14px 14px 0 0;
  position:relative;
}
.doorway-shape::after{ content:''; position:absolute; left:3px; right:3px; bottom:6px; height:1px; background:var(--accent, var(--color-line)); opacity:0.4; }
.doorway-title{ font-family:var(--font-display); font-size:1.25rem; color:var(--accent, var(--forest-deep)); }
.doorway-desc{ font-size:0.9rem; color:var(--color-text-soft); }

@media (max-width:900px){ .doorway-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .doorway-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   EXPERIENCES
   ========================================================================== */
.experiences{ padding:var(--space-6) 0; background:var(--ivory); }
.exp-grid{ margin-top:var(--space-5); display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--color-line); border:1px solid var(--color-line); }
.exp-card{ position:relative; background:var(--paper); padding:2.4rem 1.8rem; }
.exp-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent, var(--sage)); }
.exp-index{ font-family:var(--font-display); font-style:italic; color:var(--accent, var(--sage)); font-size:1.1rem; }
.exp-card h3{ margin:1.4rem 0 0.7rem; font-size:1.4rem; color:var(--accent, var(--forest-deep)); }
.exp-card p{ font-size:0.9rem; color:var(--color-text-soft); }

@media (max-width:900px){ .exp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .exp-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   VISION / MISSION / WHY — three chapters
   ========================================================================== */
.chapters{ padding:var(--space-7) 0; background:var(--forest-deep); color:var(--ivory); }
.chapters .section-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.chapter-block{ padding-top:1.6rem; border-top:1px solid rgba(233,236,228,0.22); }
.chapter-num{ font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--sage-dim); }
.chapter-block h3{ color:var(--ivory); font-size:1.7rem; margin:0.8rem 0 1rem; }
.chapter-block p{ color:rgba(251,246,236,0.78); font-size:0.98rem; }
.chapter-signoff{ font-family:var(--font-display); font-style:italic; color:var(--blush) !important; font-size:1.1rem; margin-top:1.2em !important; }

@media (max-width:820px){ .chapters .section-inner{ grid-template-columns:1fr; gap:2.5rem; } }

/* ==========================================================================
   VALUES
   ========================================================================== */
.values{ padding:var(--space-7) 0; background:var(--cream); }
.values-grid{ margin-top:var(--space-5); display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem 1.8rem; }
.value-item{ text-align:center; }
.value-icon{
  width:48px; height:48px; color:var(--accent, var(--forest)); margin-bottom:1.1rem;
  padding:0.6rem; border-radius:50%; background:color-mix(in srgb, var(--accent, var(--forest)) 10%, transparent);
}
.value-item h3{ font-size:1.3rem; margin-bottom:0.5rem; color:var(--accent, var(--forest-deep)); }
.value-item p{ font-size:0.88rem; color:var(--color-text-soft); }

@media (max-width:700px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .values-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   IMPACT
   ========================================================================== */
.impact{ position:relative; padding:var(--space-7) 0; overflow:hidden; }
.impact-bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #1c2a21 0%, var(--forest-deep) 45%, #3a5544 100%);
}
.impact .section-inner{ position:relative; z-index:1; }
.impact-list{
  list-style:none; margin:var(--space-5) 0 0; padding:0;
  max-width:640px; margin-left:auto; margin-right:auto;
  display:flex; flex-direction:column; gap:0;
}
.impact-list li{
  font-family:var(--font-display); font-size:clamp(1.3rem,3vw,1.9rem);
  color:rgba(251,246,236,0.5);
  padding:1rem 0;
  border-bottom:1px solid rgba(251,246,236,0.12);
  text-align:center;
  transition:color var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
  transform:translateX(-14px);
}
.impact-list li.is-lit{ color:var(--ivory); transform:translateX(0); }
.impact-list li:last-child{ border-bottom:none; }

/* ==========================================================================
   FINALE
   ========================================================================== */
.finale{
  position:relative;
  padding:var(--space-7) 1.5rem;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 100%, #fdf6e6 0%, var(--ivory) 55%);
}
.finale-doorway{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(70vw, 560px); height:70%;
  background:radial-gradient(ellipse 60% 90% at 50% 100%, rgba(255,236,190,0.9) 0%, rgba(255,236,190,0) 70%);
  pointer-events:none;
}
.finale-content{ position:relative; z-index:1; max-width:680px; }
.finale-line{
  font-family:var(--font-display); font-size:clamp(1.3rem,3.4vw,2rem);
  line-height:1.35; color:var(--charcoal-soft);
  margin:0 0 1.6rem;
}
.finale-line em{ font-style:italic; color:var(--forest-deep); }
.finale-title{
  font-size:clamp(2.4rem,6vw,4rem);
  margin:1.4rem 0 2.6rem;
  color:var(--wine-deep);
}
.finale-ctas{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--forest-deep); color:rgba(251,246,236,0.85); padding-top:var(--space-6); }
.footer-inner{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; padding-bottom:var(--space-5); }
.footer-brand-name{ font-family:var(--font-display); font-size:1.3rem; color:var(--ivory); margin-top:0.8rem; }
.footer-philosophy{ font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage-dim); margin-top:0.5rem; }
.footer-links h4,.footer-nav h4{
  font-family:var(--font-body); font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sage-dim); margin:0 0 1.1rem; font-weight:500;
}
.footer-links,.footer-nav{ display:flex; flex-direction:column; }
.footer-links a,.footer-nav a{
  text-decoration:none; color:rgba(251,246,236,0.8);
  padding:0.4rem 0; font-size:0.94rem;
  transition:color var(--dur-fast) ease;
}
.footer-links a:hover,.footer-nav a:hover{ color:var(--ivory); }
.footer-bottom{
  border-top:1px solid rgba(251,246,236,0.12);
  padding:1.6rem clamp(1.25rem,5vw,3rem);
  text-align:center; font-size:0.78rem; color:rgba(251,246,236,0.5);
}

@media (max-width:700px){
  .footer-inner{ grid-template-columns:1fr; text-align:center; gap:2.2rem; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
}