/* ============================================================
   lyofeel — luxury-minimal, warm greige, editorial
   ============================================================ */

:root{
  --bg:        #EEEAE3;   /* warm off-white paper */
  --bg-deep:   #E4DFD6;   /* slightly deeper panel */
  --ink:       #302B24;   /* near-black warm brown */
  --ink-soft:  #6A6357;   /* muted body text */
  --ink-faint: #A79E90;   /* hairlines / captions */
  --taupe:     #B8AFA3;   /* box tone */
  --rose:      #C08A86;   /* muted rose accent (logo line) */
  --rose-deep: #A66E6A;
  --line:      #CFC7BA;
  --card:      #F4F1EB;
  --shadow:    30 26 20;  /* rgb components for shadows */

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
  --brand: "Poppins", system-ui, sans-serif;   /* the lyofeel wordmark */

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1320px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  position:relative;
}

/* grain overlay */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

::selection{ background:var(--rose); color:#fff; }

a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:500;
}
.display{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem, 5.2vw, 4.4rem);
  line-height:1.04; letter-spacing:-.015em;
  font-optical-sizing:auto;
}
.display em{ font-style:italic; color:var(--rose-deep); }

.brandmark{
  font-family:var(--brand); font-weight:500; font-size:1.3rem;
  letter-spacing:-.01em; color:var(--ink);
}
.brandmark--lg{ font-size:clamp(3rem,9vw,7rem); font-weight:400; letter-spacing:-.02em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-size:.9rem; font-weight:500; letter-spacing:.01em;
  cursor:pointer; border:none; transition:.4s cubic-bezier(.2,.7,.2,1);
  border-radius:100px; padding:.85em 1.5em; white-space:nowrap;
}
.btn--solid{ background:var(--ink); color:var(--bg); }
.btn--solid:hover{ background:var(--rose-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); padding-left:.3em; padding-right:.3em; border-radius:0; }
.btn--ghost:hover{ color:var(--rose-deep); }
.btn--pill{ background:transparent; color:var(--ink); border:1px solid var(--ink); padding:.6em 1.25em; }
.btn--pill:hover{ background:var(--ink); color:var(--bg); }
.btn--full{ width:100%; padding:1.05em; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background .5s, padding .5s, box-shadow .5s;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  padding-top:.75rem; padding-bottom:.75rem;
  box-shadow:0 1px 0 var(--line);
}
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{ font-size:.82rem; letter-spacing:.06em; color:var(--ink-soft); position:relative; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--rose-deep); transition:width .35s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ font-size:.8rem; }

@media (max-width:860px){ .nav__links{ display:none; } }

/* ---------- hero ---------- */
.hero{ min-height:100svh; display:flex; flex-direction:column; padding:0 var(--pad); position:relative; }
.hero__grid{
  flex:1; display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:2rem; padding-top:8rem; max-width:var(--maxw); margin:0 auto; width:100%;
}
.hero__copy{ max-width:34rem; }
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem, 6.4vw, 5.5rem);
  line-height:.98; letter-spacing:-.02em; margin:1.4rem 0 1.6rem;
}
.hero__title span{ display:block; }
.hero__title em{ color:var(--rose-deep); }
.hero__lede{ font-size:1.06rem; color:var(--ink-soft); max-width:30rem; }
.hero__actions{ display:flex; align-items:center; gap:1.5rem; margin-top:2.2rem; flex-wrap:wrap; }

.hero__stage{ position:relative; height:min(70vh,640px); display:flex; align-items:center; justify-content:center; }
#box-canvas{ width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y; }
#box-canvas:active{ cursor:grabbing; }
.stage__caption{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  display:flex; gap:1.5rem; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); pointer-events:none; z-index:2;
}
.stage__caption span{ position:relative; padding-left:1.1rem; }
.stage__caption span::before{ content:"✦"; position:absolute; left:0; color:var(--rose); font-size:.6rem; }
.stage__loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  transition:opacity .6s; pointer-events:none;
}
.stage__loading.hidden{ opacity:0; }

.hero__foot{
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 0 2rem; gap:2rem;
}
.marquee{ flex:1; min-width:0; max-width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:inline-flex; align-items:center; gap:1.6rem; white-space:nowrap; animation:marq 34s linear infinite; }
.marquee__track span{ font-size:.8rem; letter-spacing:.12em; color:var(--ink-soft); text-transform:lowercase; }
.marquee__track i{ color:var(--rose); font-size:.6rem; font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%); } }

.scrollcue{ width:34px; height:52px; border:1px solid var(--line); border-radius:20px; position:relative; flex:none; }
.scrollcue span{ position:absolute; top:9px; left:50%; width:3px; height:9px; border-radius:3px; background:var(--rose-deep); transform:translateX(-50%); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1;} 70%{ opacity:0; transform:translate(-50%,18px);} }

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; padding-top:7rem; gap:0; }
  .hero__stage{ order:-1; height:46vh; }
  .hero__foot{ flex-direction:column; align-items:stretch; }
  .scrollcue{ display:none; }
}

/* ---------- section shell ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(5rem,11vw,9rem) var(--pad); }
.section__head{ max-width:44rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section__head .eyebrow{ display:block; margin-bottom:1.1rem; }
.section__head--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- method ---------- */
.method__lead{ font-family:var(--serif); font-weight:300; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.35; color:var(--ink); max-width:40rem; margin-bottom:clamp(3rem,6vw,5rem); }
.method__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem); }
.pillar{ border-top:1px solid var(--line); padding-top:1.5rem; }
.pillar__no{ font-family:var(--serif); font-size:.9rem; color:var(--rose-deep); }
.pillar h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:.9rem 0 .7rem; }
.pillar p{ color:var(--ink-soft); font-size:.98rem; }
@media (max-width:760px){ .method__cols{ grid-template-columns:1fr; } }

/* ---------- science ---------- */
.science{ }
.science__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.science__copy h2{ margin:1.1rem 0 1.4rem; }
.science__copy p{ color:var(--ink-soft); max-width:30rem; }
.science__stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--card); padding:clamp(1.4rem,3vw,2.2rem); }
.stat__num{ display:block; font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,5vw,3.4rem); line-height:1; color:var(--ink); }
.stat__label{ display:block; margin-top:.7rem; font-size:.82rem; color:var(--ink-soft); letter-spacing:.01em; }
@media (max-width:760px){ .science__inner{ grid-template-columns:1fr; } }

/* ---------- ritual ---------- */
.ritual__steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.rstep{ background:var(--bg); padding:clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,2vw,1.8rem); transition:background .5s; }
.rstep:hover{ background:var(--card); }
.rstep__idx{ font-family:var(--serif); font-size:.85rem; color:var(--rose-deep); }
.rstep h3{ font-family:var(--serif); font-weight:400; font-size:1.55rem; margin:1.4rem 0 .6rem; }
.rstep p{ color:var(--ink-soft); font-size:.92rem; }
@media (max-width:760px){ .ritual__steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .ritual__steps{ grid-template-columns:1fr; } }

/* ---------- actives ---------- */
.actives__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.active{ background:var(--card); padding:clamp(1.8rem,3vw,2.6rem); transition:background .5s, transform .5s; }
.active:hover{ background:var(--bg); }
.active h3{ font-family:var(--serif); font-weight:400; font-size:1.32rem; margin-bottom:.6rem; }
.active p{ color:var(--ink-soft); font-size:.95rem; }
@media (max-width:860px){ .actives__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .actives__grid{ grid-template-columns:1fr; } }

/* ---------- buy ---------- */
.buy__card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem);
  background:var(--ink); color:var(--bg); border-radius:26px;
  padding:clamp(2.2rem,5vw,4rem); align-items:center;
  box-shadow:0 40px 90px -50px rgb(var(--shadow) / .8);
}
.buy__left .eyebrow{ color:var(--rose); }
.buy__left h2{ color:var(--bg); margin:1rem 0 1.3rem; }
.buy__note{ color:color-mix(in srgb, var(--bg) 74%, transparent); max-width:26rem; }
.buy__list{ list-style:none; margin-top:1.6rem; display:grid; gap:.7rem; }
.buy__list li{ position:relative; padding-left:1.5rem; font-size:.95rem; color:color-mix(in srgb, var(--bg) 82%, transparent); }
.buy__list li::before{ content:"✦"; position:absolute; left:0; color:var(--rose); font-size:.7rem; top:.15em; }

.buy__right{ background:color-mix(in srgb,#fff 6%, transparent); border:1px solid color-mix(in srgb,#fff 12%, transparent); border-radius:18px; padding:clamp(1.5rem,3vw,2rem); }
.price{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:1.4rem; }
.price__amount{ font-family:var(--serif); font-weight:300; font-size:3rem; line-height:1; }
.price__meta{ font-size:.82rem; color:color-mix(in srgb, var(--bg) 62%, transparent); }
.buy__options{ display:grid; gap:.6rem; margin-bottom:1.3rem; }
.opt{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:transparent; color:var(--bg); border:1px solid color-mix(in srgb,#fff 16%, transparent); border-radius:12px; padding:.9em 1.1em; font-family:var(--sans); font-size:.9rem; cursor:pointer; transition:.35s; }
.opt b{ font-weight:600; }
.opt--active{ border-color:var(--rose); background:color-mix(in srgb, var(--rose) 16%, transparent); }
.opt:hover{ border-color:var(--rose); }
.buy__fine{ margin-top:1rem; text-align:center; font-size:.74rem; letter-spacing:.04em; color:color-mix(in srgb, var(--bg) 56%, transparent); }
@media (max-width:760px){ .buy__card{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.footer{ background:var(--bg-deep); border-top:1px solid var(--line); padding:clamp(3.5rem,7vw,6rem) var(--pad) 2rem; }
.footer__top{ max-width:var(--maxw); margin:0 auto; overflow:hidden; }
.footer__tag{ color:var(--ink-soft); margin-top:.5rem; }
.footer__cols{ max-width:var(--maxw); margin:clamp(2.5rem,5vw,4rem) auto 0; display:grid; grid-template-columns:1fr 1fr 1fr 1.6fr; gap:2rem; }
.footer__cols h4{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.1rem; }
.footer__cols a{ display:block; color:var(--ink-soft); font-size:.92rem; padding:.28rem 0; transition:color .3s; }
.footer__cols a:hover{ color:var(--rose-deep); }
.footer__news p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:1rem; }
.news{ display:flex; gap:.5rem; }
.news input{ flex:1; background:transparent; border:1px solid var(--line); border-radius:100px; padding:.65em 1em; font-family:var(--sans); font-size:.85rem; color:var(--ink); }
.news input:focus{ outline:none; border-color:var(--rose-deep); }
.footer__base{ max-width:var(--maxw); margin:clamp(2.5rem,5vw,4rem) auto 0; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-faint); letter-spacing:.04em; }
@media (max-width:760px){ .footer__cols{ grid-template-columns:1fr 1fr; } .footer__base{ flex-direction:column; gap:.5rem; } }

/* ============================================================
   CINEMA — pinned scroll-story spotlight
   ============================================================ */
.cinema{
  position:relative;
  height:440vh;                 /* 4 chapters · scroll length */
  background:#1b1611;
}
.cinema__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:
    radial-gradient(120% 90% at 62% 34%, #443c31 0%, #2c261e 42%, #1b1611 78%);
}
#box-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
.cinema__spot{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(60% 55% at 60% 40%, rgba(255,244,228,.10), transparent 60%);
  mix-blend-mode:screen;
}
.cinema__sticky::after{        /* vignette to seat the box in shadow */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(85% 75% at 60% 46%, transparent 42%, rgba(12,9,6,.55) 100%);
}
.stage__loading{
  position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:#a79e90;
  transition:opacity .7s; pointer-events:none;
}
.stage__loading.hidden{ opacity:0; }

/* captions */
.caps{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.cap{
  position:absolute; max-width:min(30rem, 42vw);
  opacity:0; transform:translateY(22px); filter:blur(2px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s;
}
.cap.is-active{ opacity:1; transform:none; filter:none; }
.cap .eyebrow{ color:var(--rose); display:block; margin-bottom:1rem; }
.cap__title{
  font-family:var(--serif); font-weight:300; color:#f3efe8;
  font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.02; letter-spacing:-.015em;
  text-shadow:0 2px 34px rgba(14,10,6,.55), 0 1px 4px rgba(14,10,6,.4);
}
.cap__title--xl{ font-size:clamp(2.6rem, 6vw, 5.2rem); }
.cap__title--brand{ font-family:var(--brand); font-weight:400; letter-spacing:-.02em; }
.cap__title em{ font-style:italic; color:var(--rose); }
.cap__body{ margin-top:1.2rem; color:#ded5c7; font-size:1.02rem; line-height:1.6;
  text-shadow:0 1px 20px rgba(14,10,6,.6); }
.cap .eyebrow{ text-shadow:0 1px 16px rgba(14,10,6,.5); }
.cap__body em{ color:#e7cfca; font-style:italic; }

.cap--hero{ left:var(--pad); top:50%; transform:translateY(-50%); }
.cap--hero.is-active{ transform:translateY(-50%); }
.cap--l{ left:var(--pad);  top:50%; margin-top:-4rem; }
.cap--r{ right:var(--pad); top:50%; margin-top:-4rem; text-align:right; }
.cap--r .eyebrow{ }

/* chapter index — bottom-centre progress strip */
.chapters{
  position:absolute; z-index:3; left:50%; bottom:2rem; transform:translateX(-50%);
  display:flex; flex-direction:row; gap:1.4rem; align-items:center;
}
.chapters__item{
  display:inline-flex; align-items:center; gap:.5rem; background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(247,240,230,.32); transition:color .35s; padding:.2rem 0;
}
.chapters__item span{ font-family:var(--serif); font-size:.68rem; opacity:.7; }
.chapters__item::after{ content:""; width:0; height:1px; background:currentColor; transition:width .35s; }
.chapters__item.is-active{ color:var(--rose); }
.chapters__item.is-active::after{ width:26px; }
.chapters__item:hover{ color:#f3efe8; }
@media (max-width:1080px){ .chapters__item{ font-size:0; gap:0; } .chapters__item span{ font-size:.7rem; } }

/* scroll cue */
.cinema__cue{
  position:absolute; z-index:3; left:50%; bottom:5.4rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.7rem; color:rgba(247,240,230,.55);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; transition:opacity .6s;
}
.cinema__cue span{ width:26px; height:40px; border:1px solid rgba(247,240,230,.35); border-radius:14px; position:relative; }
.cinema__cue span::before{ content:""; position:absolute; top:7px; left:50%; width:3px; height:7px; border-radius:3px; background:var(--rose); transform:translateX(-50%); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1;} 70%{ opacity:0; transform:translate(-50%,14px);} }

/* nav on the dark cinema */
.nav--dark .brandmark,
.nav--dark .nav__links a{ color:#f2ede4; }
.nav--dark .nav__links a{ color:rgba(242,237,228,.72); }
.nav--dark .nav__links a:hover{ color:#fff; }
.nav--dark .nav__cta{ border-color:rgba(242,237,228,.5); color:#f2ede4; }
.nav--dark .nav__cta:hover{ background:#f2ede4; color:var(--ink); }

@media (max-width:860px){
  .cinema{ height:430vh; }
  .chapters{ display:none; }
  .caps{ pointer-events:none; }
  .cap{ max-width:none; left:var(--pad); right:var(--pad); top:auto; bottom:12%; margin:0; text-align:center; }
  .cap--hero{ top:auto; bottom:14%; transform:translateY(22px); }
  .cap--hero.is-active{ transform:none; }
  .cap--r{ text-align:center; }
  .cinema__cue{ bottom:5%; }
}

/* ---------- reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
[data-reveal].in{ opacity:1; transform:none; }
.reveal{ }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}