/* ═══════════════════════════════════════════════════════════
   FRAGRANCE NOTES — the perfumer's journal
   warm paper · ruled lines · handwritten ink
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:      #f2e8d5;   /* cream page */
  --paper-2:    #ecdfc6;   /* slightly aged */
  --paper-3:    #e4d4b4;   /* old page */
  --ink:        #3b2d1f;   /* espresso ink */
  --ink-soft:   #6b5940;   /* faded ink */
  --ink-faint:  #9c8a6d;
  --rule:       rgba(94,116,138,.22);  /* blue-grey ruled line */
  --gold:       #a97e3f;
  --gold-deep:  #8a6428;
  --red-ink:    #a4432f;   /* teacher's red pen */
  --espresso:   #241a10;   /* leather cover */
  --white:      #faf5ea;   /* polaroid border */
  --shadow:     0 10px 34px rgba(59,45,31,.18);
  --font-hand:  "Caveat", "Segoe Script", cursive;
  --font-script:"Alex Brush", "Segoe Script", cursive;
  --font-lux:   "Playfair Display", Georgia, serif;
  --font-serif: "EB Garamond", Georgia, serif;
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-luxe:  cubic-bezier(.65,0,.35,1);
  --nav-h:      80px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body[data-loading]{overflow:hidden}
::selection{background:var(--gold);color:var(--white)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
em{font-style:italic}
main{position:relative;z-index:1}

/* paper grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.18  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* soft vignette like a photographed page */
body::before{
  content:"";position:fixed;inset:0;z-index:1999;pointer-events:none;
  background:radial-gradient(130% 110% at 50% 40%,transparent 60%,rgba(59,45,31,.12) 100%);
}

/* ═══════════ INTRO ═══════════ */
.intro{
  position:fixed;inset:0;z-index:2100;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1.1s var(--ease-luxe),visibility 1.1s;
}
.intro.is-done{opacity:0;visibility:hidden;pointer-events:none}
.intro__video{height:100%;width:100%;object-fit:contain;background:#000}
.intro__skip{
  position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);
  font-family:var(--font-hand);font-size:22px;color:#cbb488;
  padding:14px 10px;transition:color .3s;letter-spacing:.04em;
}
.intro__skip:hover{color:#eedcae}
.intro__skip-line{display:block;height:1.5px;margin-top:4px;background:#cbb488;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.intro__skip:hover .intro__skip-line{transform:scaleX(1)}

/* ═══════════ CURSOR ═══════════ */
.cursor{position:fixed;top:0;left:0;z-index:1500;pointer-events:none}
.cursor__dot{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--ink)}
.cursor__ring{
  position:absolute;width:34px;height:34px;margin:-17px;border-radius:50%;
  border:1.5px solid rgba(59,45,31,.45);
  transition:transform .35s var(--ease-out),opacity .35s;
}
.cursor.is-hover .cursor__ring{transform:scale(1.8);opacity:.85}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:transform .5s var(--ease-out),background .5s,border-color .5s,box-shadow .5s;
  border-bottom:1.5px solid transparent;
}
.nav.is-scrolled{
  background:rgba(242,232,213,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:rgba(59,45,31,.25);
  box-shadow:0 6px 30px rgba(59,45,31,.08);
}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{
  max-width:1440px;margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,56px);gap:24px;
}
.nav__logo{height:54px;width:auto;filter:drop-shadow(0 1px 1px rgba(59,45,31,.15))}
.nav__links{display:flex;gap:clamp(18px,3vw,42px)}
.nav__links a{
  font-family:var(--font-serif);font-variant:small-caps;font-size:17px;font-weight:500;
  letter-spacing:.24em;color:var(--ink-soft);
  position:relative;padding:6px 2px;transition:color .3s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:2px;height:2px;width:100%;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__actions{display:flex;align-items:center;gap:16px}
.nav__bag{position:relative;display:grid;place-items:center;width:42px;height:42px;color:var(--ink-soft);transition:color .3s}
.nav__bag:hover{color:var(--ink)}
.nav__bag-count{
  position:absolute;top:1px;right:-2px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:20px;
  background:var(--red-ink);color:var(--white);font-family:var(--font-hand);font-size:13px;font-weight:600;
}
.nav__bag-count.pop{animation:pop .45s var(--ease-out)}
@keyframes pop{40%{transform:scale(1.6)}}
.nav__burger{display:none;flex-direction:column;gap:7px;width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger span{width:24px;height:2px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease-out)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

.mobmenu{
  position:fixed;inset:0;z-index:850;background:rgba(242,232,213,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;
  background-image:repeating-linear-gradient(transparent 0 42px,var(--rule) 42px 43.5px);
}
.mobmenu.is-open{opacity:1;visibility:visible}
.mobmenu__links{display:flex;flex-direction:column;gap:30px;text-align:center}
.mobmenu__links a{
  font-family:var(--font-lux);font-size:clamp(30px,7vw,42px);font-weight:500;color:var(--ink);
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.mobmenu.is-open .mobmenu__links a{opacity:1;transform:none}
.mobmenu.is-open .mobmenu__links a:nth-child(2){transition-delay:.08s}
.mobmenu.is-open .mobmenu__links a:nth-child(3){transition-delay:.16s}
.mobmenu.is-open .mobmenu__links a:nth-child(4){transition-delay:.24s}
.mobmenu__links button{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out) .32s,transform .6s var(--ease-out) .32s}
.mobmenu.is-open .mobmenu__links button{opacity:1;transform:none}

/* ═══════════ BUTTONS — hand-drawn ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;
  font-family:var(--font-serif);font-variant:small-caps;font-size:16px;font-weight:600;
  letter-spacing:.3em;text-indent:.3em;
  border:1.5px solid var(--ink);
  transition:all .3s var(--ease-out);
  cursor:pointer;position:relative;
}
.btn:active{transform:scale(.96)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--white)}
.btn--line{background:rgba(250,245,234,.5);color:var(--ink)}
.btn--line:hover{background:var(--white);border-color:var(--gold-deep);color:var(--gold-deep)}
:is(a,button,input):focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

/* ═══════════ HERO — the open journal ═══════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + clamp(28px,5vh,60px)) 0 clamp(60px,9vh,110px);
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(242,232,213,.94) 0%,rgba(242,232,213,.86) 42%,rgba(242,232,213,.42) 75%,rgba(242,232,213,.55) 100%),
    linear-gradient(to top,rgba(242,232,213,.9) 0%,transparent 30%);
}
.hero__inner{
  position:relative;z-index:2;
  max-width:1440px;margin:0 auto;width:100%;
  padding:0 clamp(20px,4vw,56px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);
  align-items:center;
}
.hero__kicker{
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.34em;
  font-size:15px;color:var(--gold-deep);margin-bottom:24px;overflow:hidden;
}
.hero__kicker span{display:inline-block}
.hero__title{margin-bottom:30px;color:var(--ink)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero__title .line--script{margin-top:-.52em;padding-bottom:.22em;overflow:visible}
.hero__title .line>span{display:inline-block;position:relative}
.hero__serif{
  font-family:var(--font-lux);font-weight:500;
  font-size:clamp(52px,7vw,104px);line-height:1.04;letter-spacing:.045em;
}
.hero__script{
  font-family:var(--font-script);font-weight:400;
  font-size:clamp(52px,6.4vw,96px);line-height:1;
  color:var(--gold-deep);margin-left:clamp(90px,14vw,230px);
  text-shadow:0 1px 0 rgba(250,245,234,.5);
}
.hero__sub{max-width:54ch;color:var(--ink-soft);font-size:clamp(16px,1.35vw,19px);margin-bottom:38px}
.hero__cta{display:flex;gap:18px;flex-wrap:wrap}

/* taped photo */
.hero__photo{
  position:relative;justify-self:end;width:min(560px,100%);
  background:var(--white);padding:14px 14px 12px;
  box-shadow:var(--shadow);
  transform:rotate(2.2deg);
  transition:transform .6s var(--ease-out);
}
.hero__photo:hover{transform:rotate(1deg) scale(1.015)}
.hero__photo img{width:100%;aspect-ratio:16/10.5;object-fit:cover;filter:sepia(.14) saturate(1.02)}
.hero__photo figcaption{
  font-family:var(--font-hand);font-size:21px;font-weight:500;color:var(--ink-soft);
  text-align:center;padding:10px 4px 2px;
}
.tape{
  position:absolute;width:104px;height:30px;
  background:rgba(214,192,148,.6);
  box-shadow:0 2px 6px rgba(59,45,31,.12);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
}
.tape--tl{top:-13px;left:-30px;transform:rotate(-38deg)}
.tape--br{bottom:-12px;right:-32px;transform:rotate(-42deg)}

[data-intro-photo]{opacity:0;transform:rotate(6deg) translateY(46px) scale(.96);transition:opacity 1.1s var(--ease-out) .5s,transform 1.1s var(--ease-out) .5s}
body.is-revealed [data-intro-photo]{opacity:1;transform:rotate(2.2deg)}

.hero__scroll{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(16px,3.5vh,34px);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--font-hand);font-size:19px;color:var(--ink-faint);
}
.hero__scroll svg{animation:bob 2.4s var(--ease-luxe) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* intro-driven entrance */
[data-intro-line]{transform:translateY(115%) rotate(1.5deg);transition:transform 1.15s var(--ease-out)}
[data-intro-stagger] span{transform:translateY(110%);transition:transform .9s var(--ease-out)}
[data-intro-fade]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
body.is-revealed [data-intro-line],
body.is-revealed [data-intro-stagger] span{transform:translateY(0) rotate(0)}
body.is-revealed [data-intro-fade]{opacity:1;transform:none}
body.is-revealed .hero__title .line:nth-child(1)>span{transition-delay:.12s}
body.is-revealed .hero__title .line:nth-child(2)>span{transition-delay:.28s}
body.is-revealed .hero__sub{transition-delay:.55s}
body.is-revealed .hero__cta{transition-delay:.7s}
body.is-revealed .hero__scroll{transition-delay:1.2s}

@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:44px}
  .hero__photo{justify-self:center}
  .hero{padding-bottom:90px}
}

/* ═══════════ MARQUEE ═══════════ */
.marquee{
  overflow:hidden;
  border-top:1.5px solid rgba(59,45,31,.3);border-bottom:1.5px solid rgba(59,45,31,.3);
  padding:18px 0;background:var(--paper-2);
}
.marquee__track{display:flex;align-items:center;gap:34px;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee__track span{
  font-family:var(--font-script);font-size:clamp(30px,3.4vw,42px);white-space:nowrap;
  color:var(--gold-deep);transition:color .4s;padding:0 4px;
}
.marquee__track span:hover{color:var(--red-ink)}
.marquee__track i{color:var(--gold);font-style:normal;font-size:15px}

/* ═══════════ SECTION HEADS ═══════════ */
.section-head{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,56px);position:relative}
.section-head__kicker{
  font-family:var(--font-script);font-size:clamp(26px,2.6vw,34px);
  color:var(--gold-deep);margin-bottom:6px;transform:rotate(-1.2deg);
}
.section-head__title{
  font-family:var(--font-lux);font-weight:500;font-size:clamp(40px,5.2vw,74px);
  line-height:1.04;color:var(--ink);letter-spacing:.02em;
}
.section-head__title em{font-family:var(--font-script);font-style:normal;color:var(--gold-deep);font-size:1.16em;line-height:.8}
.section-head__hint{
  position:absolute;right:clamp(20px,4vw,56px);bottom:10px;
  display:flex;align-items:center;gap:10px;color:var(--ink-faint);
  font-family:var(--font-hand);font-size:19px;
}
@media (max-width:720px){.section-head__hint{display:none}}

/* ═══════════ MANIFESTO ═══════════ */
.manifesto{
  max-width:1100px;margin:0 auto;text-align:center;
  padding:clamp(60px,9vh,110px) clamp(20px,4vw,56px) clamp(60px,9vh,110px);
}
.manifesto__text{
  font-family:var(--font-lux);font-weight:400;
  font-size:clamp(26px,3.6vw,46px);line-height:1.42;color:var(--ink);
}
.manifesto__text em{font-family:var(--font-script);font-style:normal;color:var(--red-ink);font-size:1.22em}
.manifesto__stats{display:flex;justify-content:center;gap:clamp(30px,7vw,100px);margin-top:clamp(50px,7vh,80px);flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;gap:16px}
.stat__circle{
  position:relative;display:flex;align-items:baseline;gap:1px;
  padding:22px 26px;
  border:2.5px solid var(--red-ink);
  border-radius:230px 190px 210px 250px/210px 250px 190px 230px; /* hand-drawn circle */
  transform:rotate(-2deg);
}
.stat:nth-child(2) .stat__circle{transform:rotate(1.5deg);border-color:var(--gold-deep)}
.stat:nth-child(3) .stat__circle{transform:rotate(-1deg)}
.stat__num,.stat__plus{
  font-family:var(--font-lux);font-size:clamp(34px,4vw,50px);font-weight:500;line-height:1;color:var(--ink);
}
.stat__label{font-family:var(--font-hand);font-size:21px;color:var(--ink-soft)}

/* ═══════════ STORY (pinned acts) — the aged spread ═══════════ */
.story{position:relative;height:300vh;background:var(--paper-3)}
.story__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:1.12fr 1fr;
  background-image:repeating-linear-gradient(transparent 0 44px,rgba(94,116,138,.14) 44px 45.5px);
}
.story__media{position:relative;overflow:hidden;display:grid;place-items:center;padding:clamp(20px,4vw,64px)}
.story__img{
  position:absolute;width:min(86%,720px);
  background:var(--white);padding:12px 12px 40px;box-shadow:var(--shadow);
  opacity:0;transform:rotate(-6deg) translateY(60px) scale(.94);
  transition:opacity .9s var(--ease-luxe),transform 1.1s var(--ease-luxe);
}
.story__img.is-active{opacity:1;transform:rotate(-1.6deg) translateY(0) scale(1)}
.story__img[data-act="2"].is-active{transform:rotate(1.8deg)}
.story__img[data-act="3"].is-active{transform:rotate(-1.2deg)}
.story__img img,.story__img video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:sepia(.12);display:block}
.story__progress{
  position:absolute;left:clamp(18px,3vw,42px);top:50%;transform:translateY(-50%);
  width:2px;height:180px;background:rgba(59,45,31,.15);z-index:3;border-radius:2px;
}
.story__progress i{display:block;width:100%;height:0%;background:var(--red-ink);border-radius:2px}
.story__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,90px);position:relative}
.story__kicker{
  font-family:var(--font-script);font-size:clamp(26px,2.4vw,32px);
  color:var(--gold-deep);margin-bottom:34px;transform:rotate(-1.2deg);
}
.story__acts{position:relative;min-height:420px}
.story__act{
  position:absolute;inset:0;opacity:0;transform:translateY(44px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  pointer-events:none;
}
.story__act.is-active{opacity:1;transform:none;pointer-events:auto}
.story__num{
  font-family:var(--font-script);font-size:30px;color:var(--red-ink);
  display:inline-block;margin-bottom:10px;transform:rotate(-2deg);
}
.story__act h2{font-family:var(--font-lux);font-weight:500;font-size:clamp(38px,4.2vw,62px);margin-bottom:18px;line-height:1.05}
.story__act p{color:var(--ink-soft);max-width:46ch;font-size:clamp(16px,1.3vw,19px)}
.story__notes{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.story__notes span{
  font-family:var(--font-hand);font-size:19px;font-weight:600;color:var(--ink);
  border:2px solid rgba(59,45,31,.55);padding:6px 18px;
  border-radius:230px 20px 210px 22px/22px 210px 20px 230px;
}
@media (max-width:900px){
  .story{height:auto}
  .story__pin{position:relative;height:auto;grid-template-columns:1fr;display:block}
  .story__media{height:56svh}
  .story__progress{display:none}
  .story__acts{min-height:0}
  .story__act{position:relative;opacity:1;transform:none;pointer-events:auto;margin-bottom:56px}
  .story__copy{padding-top:44px}
}

/* ═══════════ FEATURED RAIL — polaroids ═══════════ */
.featured{padding:clamp(60px,9vh,110px) 0 clamp(30px,5vh,60px)}
.rail{
  display:flex;gap:clamp(20px,2.6vw,36px);overflow-x:auto;
  padding:52px clamp(20px,4vw,56px) 48px;
  scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail-card{
  position:relative;flex:0 0 clamp(240px,25vw,320px);
  scroll-snap-align:start;text-align:left;
  background:var(--white);padding:11px 11px 14px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(40px) rotate(0deg);
}
.rail-card:nth-child(odd){--tilt:-1.7deg}
.rail-card:nth-child(even){--tilt:1.6deg}
.rail-card:nth-child(3n){--tilt:-.8deg}
.rail-card.in{
  opacity:1;transform:rotate(var(--tilt));
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),box-shadow .4s;
}
.rail-card.in:hover{transform:rotate(0) scale(1.03);box-shadow:0 18px 44px rgba(59,45,31,.26);z-index:2}
.rail-card__imgwrap{overflow:hidden;position:relative}
.rail-card img{width:100%;height:auto;aspect-ratio:768/860;object-fit:cover;filter:sepia(.1);transition:transform 1s var(--ease-luxe)}
.rail-card:hover img{transform:scale(1.06)}
.rail-card__meta{padding:12px 6px 2px}
.rail-card__house{font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.22em;font-size:12.5px;color:var(--gold-deep)}
.rail-card__name{font-family:var(--font-lux);font-size:21px;font-weight:500;color:var(--ink);line-height:1.15;margin-top:3px}
.rail-card__score{
  position:absolute;top:-14px;right:-12px;z-index:2;
  font-family:var(--font-hand);font-size:22px;font-weight:700;color:var(--red-ink);
  width:54px;height:54px;display:grid;place-items:center;
  border:2.5px solid var(--red-ink);border-radius:250px 210px 230px 190px/210px 230px 190px 250px;
  background:var(--paper);transform:rotate(8deg);
}
.rail-card__view{
  position:absolute;inset:11px 11px 64px;z-index:3;display:grid;place-items:center;
  opacity:0;background:rgba(36,26,16,.35);transition:opacity .4s;
}
.rail-card__view span{
  font-family:var(--font-hand);font-size:22px;font-weight:600;color:var(--white);
  border:2px solid rgba(250,245,234,.85);padding:8px 22px;
  border-radius:230px 18px 210px 20px/20px 210px 18px 230px;
  transform:translateY(10px);transition:transform .4s var(--ease-out);
}
.rail-card:hover .rail-card__view{opacity:1}
.rail-card:hover .rail-card__view span{transform:none}

/* ═══════════ EDITORIAL ═══════════ */
.editorial{position:relative;height:clamp(420px,68vh,640px);overflow:hidden;display:grid;place-items:center;margin:clamp(50px,9vh,110px) 0}
.editorial__media{position:absolute;inset:0}
.editorial__video{width:100%;height:100%;object-fit:cover}
.editorial__overlay{position:absolute;inset:0;background:linear-gradient(rgba(36,26,16,.38),rgba(36,26,16,.52))}
.editorial__quote{position:relative;z-index:2;text-align:center;padding:0 clamp(20px,6vw,80px);max-width:1000px;color:var(--white)}
.editorial__quote p{font-family:var(--font-lux);font-style:italic;font-weight:400;font-size:clamp(28px,4.2vw,54px);line-height:1.25;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.editorial__quote cite{
  display:block;margin-top:22px;font-style:normal;
  font-family:var(--font-script);font-size:clamp(24px,2.4vw,32px);color:#e8cf9a;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}

/* ═══════════ LIBRARY — index cards ═══════════ */
.library{padding:clamp(60px,9vh,120px) 0;position:relative}
.library>*{position:relative;z-index:1}

/* scroll-scrubbed ingredient cinema */
.library__cinema{
  position:sticky;top:0;height:100svh;margin-bottom:-100svh;
  overflow:hidden;z-index:0!important;
  opacity:0;transition:opacity .9s var(--ease-luxe);
  pointer-events:none;
}
.library__cinema.on{opacity:1}
.cinema__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s var(--ease-luxe);
}
.cinema__vid.act{opacity:1}
.cinema__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 50% 45%,rgba(242,232,213,.14) 0%,rgba(242,232,213,.34) 80%,rgba(242,232,213,.55) 100%),
    linear-gradient(to bottom,rgba(242,232,213,.82) 0%,rgba(242,232,213,.08) 15%,rgba(242,232,213,.08) 85%,rgba(242,232,213,.86) 100%);
}
.cinema__note{
  position:absolute;left:clamp(20px,4vw,56px);bottom:30px;
  font-family:var(--font-script);font-size:clamp(28px,2.8vw,38px);color:var(--gold-deep);
  transform:rotate(-1.6deg);
  text-shadow:0 1px 0 rgba(250,245,234,.7);
}
.cinema__note span{display:inline-block;transition:opacity .4s,transform .4s var(--ease-out)}
.cinema__note span.swap{opacity:0;transform:translateY(10px)}
.cinema__scrub{
  position:absolute;right:clamp(20px,4vw,56px);bottom:40px;
  width:120px;height:2px;background:rgba(59,45,31,.2);
}
.cinema__scrub i{display:block;height:100%;width:0%;background:var(--gold-deep)}
@media (max-width:900px),(prefers-reduced-motion:reduce){.library__cinema{display:none}}
.library__controls{max-width:1440px;margin:0 auto;padding:40px clamp(20px,4vw,56px) 4px;display:flex;flex-direction:column;gap:18px}
.library__search{
  display:flex;align-items:center;gap:12px;max-width:520px;
  border-bottom:2px solid rgba(59,45,31,.4);padding:6px 2px 8px;color:var(--ink-faint);
  transition:border-color .4s;
}
.library__search:focus-within{border-color:var(--gold-deep)}
.library__search input{
  flex:1;background:none;border:none;outline:none;color:var(--ink);
  font-family:var(--font-hand);font-size:23px;font-weight:500;
}
.library__search input::placeholder{color:var(--ink-faint)}
.library__filters{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  font-family:var(--font-hand);font-size:19px;font-weight:600;color:var(--ink-soft);
  border:2px solid rgba(59,45,31,.4);padding:5px 20px;
  border-radius:230px 20px 210px 22px/22px 210px 20px 230px;
  background:rgba(250,245,234,.78); /* stays legible over the burst reels */
  transition:all .3s var(--ease-out);cursor:pointer;
}
.chip--sm{font-size:17px;padding:3px 15px}
.chip:hover{border-color:var(--ink);color:var(--ink);transform:rotate(-1.2deg)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:rotate(-1.2deg)}
.library__grid{
  max-width:1440px;margin:0 auto;padding:46px clamp(20px,4vw,56px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:clamp(24px,3vw,42px);
}
.card{
  position:relative;text-align:left;display:block;width:100%;cursor:pointer;
  background:var(--white);padding:11px 11px 0;box-shadow:var(--shadow);
  opacity:0;transform:translateY(46px);
}
.card:nth-child(3n+1){--tilt:-.9deg}
.card:nth-child(3n+2){--tilt:.8deg}
.card:nth-child(3n){--tilt:-.4deg}
.card.in{
  opacity:1;transform:rotate(var(--tilt));
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),box-shadow .4s;
}
.card.in:hover{transform:rotate(0) translateY(-6px);box-shadow:0 20px 48px rgba(59,45,31,.24);z-index:2}
.card__media{position:relative;overflow:hidden;display:block}
.card__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:sepia(.1);transition:transform 1s var(--ease-luxe)}
.card:hover .card__media img{transform:scale(1.05)}
.card__family{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--font-hand);font-size:16.5px;font-weight:600;color:var(--ink);
  background:rgba(242,232,213,.92);padding:3px 13px;
  border-radius:230px 18px 210px 20px/20px 210px 18px 230px;
  border:1.5px solid rgba(59,45,31,.3);transform:rotate(-2deg);
}
.card__body{
  padding:16px 10px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  background-image:repeating-linear-gradient(transparent 0 27px,var(--rule) 27px 28px);
}
.card__house{font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.2em;font-size:12.5px;color:var(--gold-deep)}
.card__name{font-family:var(--font-lux);font-size:22px;font-weight:500;color:var(--ink);line-height:1.12;margin-top:4px}
.card__notes{margin-top:7px;font-family:var(--font-hand);font-size:18px;color:var(--ink-soft)}
.card__right{text-align:center;flex-shrink:0;padding-top:2px}
.card__score{
  font-family:var(--font-hand);font-size:23px;font-weight:700;color:var(--red-ink);line-height:1;
  display:inline-grid;place-items:center;width:52px;height:52px;
  border:2.5px solid var(--red-ink);border-radius:250px 210px 230px 190px/210px 230px 190px 250px;
  transform:rotate(5deg);
}
.card__score small{font-size:11px;margin-top:-3px}
.card__price{margin-top:8px;font-family:var(--font-lux);font-size:18px;font-weight:500;color:var(--ink);display:block}
.library__empty{text-align:center;color:var(--ink-soft);font-family:var(--font-hand);font-size:30px;padding:60px 20px}

/* ═══════════ REVIEWS — journal entries ═══════════ */
.reviews{padding:clamp(60px,9vh,120px) 0 clamp(80px,12vh,150px)}
.reviews__list{max-width:1440px;margin:0 auto;padding:48px clamp(20px,4vw,56px) 0}
.review{
  display:grid;grid-template-columns:96px 1fr auto;gap:clamp(20px,3vw,44px);align-items:center;
  padding:32px 8px;border-top:1.5px dashed rgba(59,45,31,.35);cursor:pointer;position:relative;
  opacity:0;transform:translateY(30px);
}
.review.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.review:last-child{border-bottom:1.5px dashed rgba(59,45,31,.35)}
.review__badge{
  width:92px;height:92px;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--font-hand);font-size:30px;font-weight:700;color:var(--red-ink);
  border:3px solid var(--red-ink);
  border-radius:250px 210px 230px 190px/210px 230px 190px 250px;
  transform:rotate(-4deg);
  transition:background .4s,color .4s,transform .45s var(--ease-out);
}
.review:hover .review__badge{background:var(--red-ink);color:var(--paper);transform:rotate(0) scale(1.05)}
.review__badge small{font-size:13px;margin-left:1px}
.review__title{font-family:var(--font-lux);font-size:clamp(22px,2.5vw,31px);font-weight:500;line-height:1.22;transition:color .35s}
.review:hover .review__title{color:var(--gold-deep)}
.review__meta{margin-top:6px;font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.22em;font-size:13px;color:var(--ink-faint)}
.review__excerpt{margin-top:10px;color:var(--ink-soft);max-width:74ch;font-size:16.5px}
.review__arrow{color:var(--gold-deep);transition:transform .4s var(--ease-out)}
.review:hover .review__arrow{transform:translateX(10px)}
@media (max-width:720px){
  .review{grid-template-columns:64px 1fr}
  .review__badge{width:64px;height:64px;font-size:21px}
  .review__arrow{display:none}
}

/* ═══════════ NEWSLETTER — the postcard ═══════════ */
.news{
  position:relative;overflow:hidden;
  padding:clamp(70px,10vh,120px) clamp(20px,4vw,56px) clamp(90px,13vh,160px);
  background:
    linear-gradient(rgba(242,232,213,.9),rgba(242,232,213,.82)),
    url("../assets/journal-bg.webp") center/cover;
}
.news__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news__veil{position:absolute;inset:0;background:linear-gradient(rgba(242,232,213,.9),rgba(242,232,213,.8))}
.news__inner{position:relative;z-index:2}
.news__inner{
  position:relative;max-width:860px;margin:0 auto;text-align:center;
  background:var(--white);box-shadow:var(--shadow);
  border:1.5px solid rgba(59,45,31,.2);
  padding:clamp(50px,8vh,90px) clamp(24px,5vw,80px);
  transform:rotate(-.6deg);
}
.news__inner::before{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:2px dashed rgba(169,126,63,.5);
}
.news__stamp{
  position:absolute;top:22px;right:24px;
  width:64px;height:76px;display:grid;place-items:center;
  font-family:var(--font-serif);font-size:24px;letter-spacing:.06em;color:var(--gold-deep);
  border:2px solid var(--gold);border-radius:3px;
  background:
    radial-gradient(circle,transparent 0 3px,var(--white) 3.5px) ;
  transform:rotate(5deg);
}
.news__title{font-family:var(--font-lux);font-weight:500;font-size:clamp(30px,4.2vw,50px);line-height:1.15}
.news__title em{font-family:var(--font-script);font-style:normal;color:var(--red-ink);font-size:1.2em;white-space:nowrap}
.news__sub{color:var(--ink-soft);margin-top:14px;font-size:17px}
.news__form{display:flex;gap:12px;max-width:540px;margin:38px auto 0}
.news__form input{
  flex:1;min-width:0;background:none;outline:none;padding:10px 6px;
  border:none;border-bottom:2px solid rgba(59,45,31,.45);
  color:var(--ink);font-family:var(--font-hand);font-size:22px;font-weight:500;
  transition:border-color .3s;
}
.news__form input:focus{border-color:var(--gold-deep)}
.news__form input::placeholder{color:var(--ink-faint)}
.news__ok{margin-top:22px;color:var(--gold-deep);font-family:var(--font-hand);font-size:26px;font-weight:600}
@media (max-width:560px){.news__form{flex-direction:column;gap:18px}}

/* ═══════════ FOOTER — leather cover ═══════════ */
.footer{
  background:var(--espresso);color:#cbb99a;
  padding:clamp(70px,10vh,120px) clamp(20px,4vw,56px) 40px;
}
.footer__inner{
  max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;
  gap:clamp(40px,6vw,100px);flex-wrap:wrap;
}
.footer__logo{height:78px;width:auto}
.footer__cols{display:flex;gap:clamp(44px,7vw,110px);flex-wrap:wrap}
.footer__cols h3{
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.34em;font-weight:500;
  font-size:14px;color:#d6ab63;margin-bottom:20px;
}
.footer__cols a{display:block;color:#b5a184;font-family:var(--font-hand);font-size:21px;padding:5px 0;transition:color .3s,transform .3s var(--ease-out)}
.footer__cols a:hover{color:var(--paper);transform:translateX(6px)}
.footer__legal{
  max-width:1440px;margin:64px auto 0;padding-top:26px;border-top:1px solid rgba(214,171,99,.25);
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.26em;
  font-size:13px;color:#907d5f;text-align:center;
}

/* ═══════════ MODAL — the review page ═══════════ */
.modal{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:clamp(12px,3vw,40px);visibility:hidden}
.modal.is-open{visibility:visible}
.modal__backdrop{position:absolute;inset:0;background:rgba(36,26,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .5s}
.modal.is-open .modal__backdrop{opacity:1}
.modal__panel{
  position:relative;width:min(1060px,100%);max-height:min(92svh,880px);overflow:auto;
  background:var(--paper);box-shadow:0 30px 90px rgba(20,12,5,.5);
  display:grid;grid-template-columns:1.05fr 1fr;
  opacity:0;transform:translateY(46px) rotate(.6deg) scale(.97);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
  scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
}
.modal.is-open .modal__panel{opacity:1;transform:none}
.modal__close{
  position:absolute;top:14px;right:14px;z-index:5;width:46px;height:46px;
  display:grid;place-items:center;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);
  border-radius:250px 210px 230px 190px/210px 230px 190px 250px;
  transition:all .35s;
}
.modal__close:hover{background:var(--ink);color:var(--paper);transform:rotate(90deg)}
.modal__media{position:relative;min-height:340px;padding:18px 6px 18px 18px}
.modal__media img{
  width:100%;height:100%;object-fit:cover;filter:sepia(.1);
  border:10px solid var(--white);box-shadow:var(--shadow);
}
.modal__body{
  padding:clamp(26px,3.4vw,52px);
  background-image:repeating-linear-gradient(transparent 0 34px,var(--rule) 34px 35px);
}
.modal__family{
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.3em;
  font-size:13px;color:var(--gold-deep);margin-bottom:10px;display:block;
}
.modal__name{font-family:var(--font-lux);font-size:clamp(30px,3.4vw,44px);font-weight:500;line-height:1.08}
.modal__house{margin-top:6px;font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.26em;font-size:14px;color:var(--ink-soft)}
.modal__scorebar{display:flex;align-items:center;gap:18px;margin:24px 0 6px}
.modal__bigscore{
  font-family:var(--font-hand);font-size:27px;font-weight:700;color:var(--red-ink);
  width:66px;height:66px;display:grid;place-items:center;flex-shrink:0;
  border:3px solid var(--red-ink);
  border-radius:250px 210px 230px 190px/210px 230px 190px 250px;
  transform:rotate(-5deg);
}
.modal__verdictword{font-family:var(--font-script);font-size:30px;color:var(--gold-deep)}
.modal__blurb{color:var(--ink-soft);font-size:16.5px;margin:14px 0 24px}
.modal__pyramid h4,.modal__meters h4{
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.32em;font-weight:500;
  font-size:13px;color:var(--gold-deep);margin:22px 0 12px;
}
.modal__tier{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;align-items:flex-start}
.modal__tier b{
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.18em;
  font-size:13px;color:var(--ink-faint);font-weight:500;width:56px;padding-top:7px;flex-shrink:0;
}
.modal__tier span{
  font-family:var(--font-hand);font-size:18px;font-weight:600;color:var(--ink);
  border:1.5px solid rgba(59,45,31,.45);padding:3px 14px;
  border-radius:230px 18px 210px 20px/20px 210px 18px 230px;
}
.meter{margin-bottom:13px}
.meter__row{display:flex;justify-content:space-between;font-family:var(--font-hand);font-size:18px;color:var(--ink-soft);margin-bottom:5px}
.meter__row b{color:var(--ink);font-weight:600}
.meter__track{height:3px;background:rgba(59,45,31,.15);border-radius:3px;overflow:hidden}
.meter__fill{display:block;height:100%;background:var(--gold-deep);border-radius:3px;width:0;transition:width 1.2s var(--ease-luxe) .25s}
.modal__buy{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.modal__price{font-family:var(--font-lux);font-size:30px;font-weight:500;color:var(--ink)}
.modal__price small{font-size:15px;color:var(--ink-soft);font-weight:400;font-family:var(--font-serif)}
@media (max-width:860px){
  .modal__panel{grid-template-columns:1fr;max-height:92svh}
  .modal__media{min-height:0;padding:16px 16px 0}
  .modal__media img{aspect-ratio:16/10}
}

/* ═══════════ QUIZ ═══════════ */
.quiz{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:clamp(12px,3vw,40px);visibility:hidden}
.quiz.is-open{visibility:visible}
.quiz__backdrop{position:absolute;inset:0;background:rgba(36,26,16,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .5s}
.quiz.is-open .quiz__backdrop{opacity:1}
.quiz__panel{
  position:relative;width:min(720px,100%);max-height:92svh;overflow:auto;
  background:var(--paper);box-shadow:0 30px 90px rgba(20,12,5,.5);
  padding:clamp(34px,5vw,64px);
  background-image:repeating-linear-gradient(transparent 0 40px,var(--rule) 40px 41px);
  opacity:0;transform:translateY(46px) rotate(-.6deg) scale(.97);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.quiz.is-open .quiz__panel{opacity:1;transform:none}
.quiz__step{animation:quizin .6s var(--ease-out)}
@keyframes quizin{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.quiz__count{
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.36em;
  font-size:13px;color:var(--gold-deep);margin-bottom:14px;
}
.quiz__q{font-family:var(--font-lux);font-weight:500;font-size:clamp(28px,3.8vw,42px);line-height:1.12;margin-bottom:30px}
.quiz__opts{display:grid;gap:12px}
.quiz__opt{
  text-align:left;border:2px solid rgba(59,45,31,.4);padding:16px 22px;
  border-radius:255px 18px 225px 18px/18px 225px 18px 255px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:all .3s var(--ease-out);cursor:pointer;background:rgba(250,245,234,.6);
}
.quiz__opt:hover{border-color:var(--ink);background:var(--white);transform:rotate(-.8deg) translateX(6px)}
.quiz__opt b{font-family:var(--font-lux);font-size:20px;font-weight:500;display:block;line-height:1.15}
.quiz__opt small{color:var(--ink-soft);font-size:14.5px;display:block;margin-top:2px}
.quiz__opt svg{flex-shrink:0;color:var(--gold-deep);opacity:0;transform:translateX(-8px);transition:all .3s}
.quiz__opt:hover svg{opacity:1;transform:none}
.quiz__result{text-align:center}
.quiz__result-img{
  width:100%;aspect-ratio:16/9;object-fit:cover;margin:24px 0;filter:sepia(.1);
  border:10px solid var(--white);box-shadow:var(--shadow);
}
.quiz__result .modal__name{font-size:clamp(34px,4.6vw,48px)}
.quiz__result-actions{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* ═══════════ TOAST — sticky note ═══════════ */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translate(-50%,150%) rotate(-1.5deg);z-index:1100;
  background:#f7edd3;border:1.5px solid rgba(59,45,31,.35);color:var(--ink);
  padding:14px 30px;font-family:var(--font-hand);font-size:21px;font-weight:600;
  transition:transform .55s var(--ease-out);pointer-events:none;
  box-shadow:0 14px 44px rgba(59,45,31,.3);
}
.toast::before{
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-1deg);
  width:88px;height:22px;background:rgba(214,192,148,.65);box-shadow:0 2px 6px rgba(59,45,31,.12);
}
.toast.show{transform:translate(-50%,0) rotate(-1.5deg)}
.toast em{color:var(--red-ink);font-style:normal}

/* ═══════════ REVEALS ═══════════ */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════
   ELEVATION — torn paper, ink, seals, chapters, receipt
   ═══════════════════════════════════════════════════════════ */
html{scroll-padding-top:96px}

/* ── torn paper edges ── */
:root{
  --torn-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v10l-28 9-31-7-36 10-30-8-38 6-31-9-37 11-33-6-36 9-29-10-38 7-32-8-34 10-31-6-37 9-30-9-35 7-33-10-36 8-30-6-38 10-31-8-35 6-30-9-37 10-32-7-36 9-29-8-38 6-30-10-35 8-31-6-45 9-44-7-44 8z' fill='%23f2e8d5'/%3E%3C/svg%3E");
  --torn-aged:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v10l-28 9-31-7-36 10-30-8-38 6-31-9-37 11-33-6-36 9-29-10-38 7-32-8-34 10-31-6-37 9-30-9-35 7-33-10-36 8-30-6-38 10-31-8-35 6-30-9-37 10-32-7-36 9-29-8-38 6-30-10-35 8-31-6-45 9-44-7-44 8z' fill='%23e4d4b4'/%3E%3C/svg%3E");
}
.story::before,.featured::before,.editorial::before,.editorial::after,.footer::before{
  content:"";position:absolute;left:0;right:0;height:26px;z-index:4;pointer-events:none;
  background:var(--torn-cream) center/100% 100% no-repeat;
}
.featured{position:relative}
.footer{position:relative}
.story::before{top:-1px}                                  /* cream tears into the aged spread */
.featured::before{display:none}                           /* rail sits right under the marquee now */
.editorial::before{top:-1px}                              /* cream torn window over the film */
.editorial:not(.editorial--spray)::before{background-image:var(--torn-aged)} /* mist band follows the aged story */
.editorial::after{bottom:-1px;transform:scaleY(-1)}
.footer::before{top:-1px}                                 /* cream tears into the leather cover */

/* ── ink margin progress line ── */
.inkline{
  position:fixed;left:24px;top:0;bottom:0;width:2px;z-index:920;
  background:rgba(164,67,47,.14);pointer-events:none;
}
.inkline i{
  display:block;width:100%;height:0%;background:var(--red-ink);
  box-shadow:0 1px 4px rgba(164,67,47,.4);position:relative;
}
.inkline i::after{
  content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50% 50% 50% 0;background:var(--red-ink);
  transform:translateX(-50%) rotate(-45deg);
}
@media (max-width:1100px){.inkline{display:none}}

/* ── chapter tabs ── */
.chapters{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:910;
  display:flex;flex-direction:column;gap:7px;
}
.chapters a{
  display:flex;align-items:center;justify-content:flex-end;
  background:var(--white);border:1.5px solid rgba(59,45,31,.25);border-right:none;
  border-radius:8px 0 0 8px;padding:8px 16px 8px 18px;
  box-shadow:-4px 4px 14px rgba(59,45,31,.08);
  font-family:var(--font-serif);font-variant:small-caps;font-size:12.5px;letter-spacing:.2em;
  color:var(--ink-soft);
  transform:translateX(calc(100% - 30px));
  transition:transform .45s var(--ease-out),background .3s,color .3s,border-color .3s;
}
.chapters a::before{
  content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:rgba(59,45,31,.3);transition:background .3s;
}
.chapters a span{position:relative}
.chapters a:hover{transform:translateX(0)}
.chapters a.is-active{
  transform:translateX(0);
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.chapters a.is-active::before{background:var(--gold)}
@media (max-width:1250px){.chapters{display:none}}

/* ── fx canvas ── */
.fx{position:fixed;inset:0;z-index:1450;pointer-events:none}

/* ── 3D ingredient flyover ── */
.burst3d{
  position:fixed;inset:0;z-index:140;pointer-events:none;
  perspective:1100px;overflow:hidden;
}
.burst3d img{
  position:absolute;left:0;top:0;opacity:0;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
}
@media (max-width:900px),(prefers-reduced-motion:reduce){.burst3d{display:none}}

/* ── page flip after intro ── */
.pageflip{position:fixed;inset:0;z-index:1900;perspective:1500px;pointer-events:none}
.pageflip__sheet{
  position:absolute;inset:0;transform-origin:50% 0;
  background:
    linear-gradient(rgba(242,232,213,.72),rgba(242,232,213,.8)),
    url("../assets/journal-bg.webp") center/cover;
  box-shadow:0 30px 80px rgba(20,12,5,.4);
}
.pageflip.run .pageflip__sheet{
  transform:rotateX(-104deg);opacity:.4;
  transition:transform 1.5s cubic-bezier(.6,.05,.35,1) .15s,opacity 1.5s ease .15s;
}

/* ── self-writing script ── */
.hero__script{clip-path:inset(-40% 103% -40% -3%)}
body.is-revealed .hero__script{
  clip-path:inset(-40% -3% -40% -3%);
  transition:clip-path 1.9s cubic-bezier(.62,.02,.34,1) .8s;
}
.write-in{clip-path:inset(-30% 103% -30% -3%)}
.write-in.in,.in .write-in,.capture .write-in{
  clip-path:inset(-30% -3% -30% -3%);
  transition:clip-path 1.5s cubic-bezier(.62,.02,.34,1) .15s;
}

/* hero serif letters */
.hero__serif .ch{display:inline-block;transform:translateY(115%) rotate(5deg);transition:transform .95s var(--ease-out)}
body.is-revealed .hero__serif .ch{transform:none}

/* hero photo gets 3D room */
.hero__inner{perspective:1200px}

/* ── manifesto highlight swash ── */
.manifesto__text em{position:relative;white-space:nowrap}
.manifesto__text em::before{
  content:"";position:absolute;inset:.06em -.18em -.02em -.14em;z-index:-1;
  background:linear-gradient(100deg,rgba(201,161,92,.0),rgba(201,161,92,.38) 12%,rgba(201,161,92,.30) 88%,rgba(201,161,92,.0));
  border-radius:1em .3em 1em .4em;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease-luxe) .5s;
}
.manifesto__text.in em::before,.capture .manifesto__text em::before{transform:scaleX(1)}

/* ── annotations ── */
.annot{
  font-family:var(--font-hand);font-size:21px;font-weight:500;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.annot svg{flex-shrink:0;color:var(--gold-deep)}
.annot--manifesto{margin-top:44px;transform:rotate(-1.6deg)}
.annot--library{
  max-width:1440px;margin:6px auto -18px;padding:0 clamp(20px,4vw,56px);
  justify-content:flex-end;transform:rotate(-1deg);
  text-shadow:0 1px 0 rgba(250,245,234,.8),0 0 14px rgba(242,232,213,.9);
}
@media (max-width:720px){.annot--library{display:none}}

/* ── marquee second voice ── */
.marquee{padding:12px 0}
.marquee__track--rev{animation:marqueerev 46s linear infinite;margin-top:2px}
@keyframes marqueerev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee__track--rev span{
  font-family:var(--font-lux);font-style:italic;font-size:clamp(15px,1.5vw,19px);
  color:transparent;-webkit-text-stroke:.8px rgba(107,89,64,.75);letter-spacing:.14em;
}
.marquee__track--rev i{color:rgba(107,89,64,.5);font-size:13px}
.marquee:hover .marquee__track--rev{animation-play-state:paused}

/* ── library card stamp on hover ── */
.card__media::after{
  content:"FN · reviewed";position:absolute;top:16px;right:14px;z-index:3;
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.2em;font-size:12px;font-weight:600;
  color:#8e2f1d;border:2.5px double rgba(142,47,29,.9);border-radius:4px;
  padding:6px 12px;background:rgba(242,232,213,.72);
  opacity:0;transform:rotate(10deg) scale(1.7);
  transition:opacity .3s,transform .35s var(--ease-out);
}
.card:hover .card__media::after{opacity:1;transform:rotate(-7deg) scale(1)}

/* ── wax seal ── */
.seal{
  position:absolute;right:22px;bottom:22px;z-index:3;
  width:88px;height:88px;border-radius:47% 53% 51% 49%/52% 48% 52% 48%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 28%,#b3543c,#8e1f2f 58%,#6a1420);
  box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 2px 6px rgba(255,255,255,.28),inset 0 -5px 12px rgba(0,0,0,.4);
  color:#f3dcc9;transform:rotate(-12deg);
}
.seal::before{
  content:"";position:absolute;inset:9px;border-radius:inherit;
  border:1.5px solid rgba(243,220,201,.4);
}
.seal b{font-family:var(--font-lux);font-size:27px;font-weight:600;line-height:1}
.seal small{font-family:var(--font-serif);font-variant:small-caps;font-size:9.5px;letter-spacing:.24em;margin-top:3px;opacity:.85}
.seal.pop{animation:sealpop .8s var(--ease-out) both}
@keyframes sealpop{
  0%{transform:rotate(10deg) scale(1.8);opacity:0}
  55%{transform:rotate(-15deg) scale(.94);opacity:1}
  100%{transform:rotate(-12deg) scale(1);opacity:1}
}

/* modal name underline draws itself */
.draw{display:block;width:min(240px,70%);height:12px;margin-top:6px;color:var(--gold)}
.draw path{stroke-dasharray:240;stroke-dashoffset:240}
.draw.go path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-luxe) .35s}

/* ── quiz ink progress dots ── */
.qdots{display:inline-flex;gap:7px;margin-right:14px;vertical-align:middle}
.qdots i{
  width:9px;height:9px;border-radius:50%;border:1.5px solid var(--red-ink);
  background:transparent;transition:background .3s;
}
.qdots i.done{background:var(--red-ink)}

/* ── editorial per-word rise ── */
.editorial__quote .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.editorial__quote .w i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .9s var(--ease-out)}
.editorial__quote.in .w i,.capture .editorial__quote .w i{transform:none}

/* ── bag drawer — the receipt ── */
.bagdrawer{position:fixed;inset:0;z-index:970;visibility:hidden}
.bagdrawer.is-open{visibility:visible}
.bagdrawer__backdrop{
  position:absolute;inset:0;background:rgba(36,26,16,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .45s;
}
.bagdrawer.is-open .bagdrawer__backdrop{opacity:1}
.bagdrawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(430px,92vw);
  background:#f7f1e2;box-shadow:-24px 0 70px rgba(20,12,5,.45);
  padding:64px 30px 30px;overflow:auto;
  background-image:repeating-linear-gradient(transparent 0 30px,rgba(94,116,138,.14) 30px 31px);
  transform:translateX(105%);transition:transform .6s var(--ease-out);
  scrollbar-width:thin;
}
.bagdrawer__panel::before{ /* perforated receipt edge */
  content:"";position:absolute;left:0;top:0;bottom:0;width:14px;
  background:radial-gradient(circle at 0 50%,transparent 5px,#f7f1e2 5.5px);
  background-size:14px 22px;background-repeat:repeat-y;
  filter:drop-shadow(2px 0 3px rgba(59,45,31,.12));
}
.bagdrawer.is-open .bagdrawer__panel{transform:none}
.bagdrawer__kicker{font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.34em;font-size:12px;color:var(--gold-deep)}
.bagdrawer__title{font-family:var(--font-lux);font-weight:500;font-size:34px;margin:4px 0 22px}
.bagitem{
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1.5px dashed rgba(59,45,31,.3);
}
.bagitem img{width:64px;height:64px;object-fit:cover;border:4px solid var(--white);box-shadow:0 3px 10px rgba(59,45,31,.18)}
.bagitem__name{font-family:var(--font-lux);font-size:17px;font-weight:500;line-height:1.2}
.bagitem__house{font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.18em;font-size:11px;color:var(--gold-deep)}
.bagitem__qty{display:flex;align-items:center;gap:10px;margin-top:6px}
.bagitem__qty button{
  width:26px;height:26px;display:grid;place-items:center;border:1.5px solid rgba(59,45,31,.4);
  border-radius:50%;font-family:var(--font-serif);font-size:15px;line-height:1;
  transition:all .25s;cursor:pointer;
}
.bagitem__qty button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bagitem__qty b{font-family:var(--font-hand);font-size:19px;min-width:16px;text-align:center}
.bagitem__price{font-family:var(--font-hand);font-size:22px;font-weight:600;color:var(--ink)}
.bagdrawer__foot{margin-top:26px}
.bagdrawer__total{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.22em;font-size:14px;
  padding:14px 2px;border-top:2px solid var(--ink);
}
.bagdrawer__total b{font-family:var(--font-hand);font-size:30px;letter-spacing:0;color:var(--red-ink)}
.bagdrawer__checkout{width:100%;justify-content:center}
.bagdrawer__thanks{text-align:center;font-family:var(--font-hand);font-size:19px;color:var(--ink-faint);margin-top:16px}
.bagdrawer__empty{
  text-align:center;font-family:var(--font-hand);font-size:26px;color:var(--ink-faint);
  padding:70px 10px;line-height:1.5;
}

/* nav compact on scroll */
.nav.is-scrolled .nav__inner{height:68px}
.nav.is-scrolled .nav__logo{height:44px}
.nav__inner,.nav__logo{transition:height .45s var(--ease-out)}

/* ═══════════════════════════════════════════════════════════
   INTERIOR PAGES — product, about, contact, help
   ═══════════════════════════════════════════════════════════ */

/* small interior hero band */
.pagehero{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(40px,7vh,80px)) clamp(20px,4vw,56px) clamp(44px,7vh,80px);
  background:
    linear-gradient(rgba(242,232,213,.88),rgba(242,232,213,.8)),
    url("../assets/journal-bg.webp") center/cover;
}
.pagehero__inner{max-width:1440px;margin:0 auto}
.pagehero__kicker{font-family:var(--font-script);font-size:clamp(26px,2.6vw,34px);color:var(--gold-deep);transform:rotate(-1.2deg)}
.pagehero__title{font-family:var(--font-lux);font-weight:500;font-size:clamp(40px,5.6vw,78px);line-height:1.04}
.pagehero__title em{font-family:var(--font-script);font-style:normal;color:var(--gold-deep);font-size:1.16em}
.pagehero__crumb{margin-top:14px;font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.24em;font-size:13px;color:var(--ink-faint)}
.pagehero__crumb a{color:var(--gold-deep)}
.pagehero__crumb a:hover{color:var(--ink)}

/* ── product spread ── */
.product{max-width:1440px;margin:0 auto;padding:clamp(40px,6vh,70px) clamp(20px,4vw,56px) clamp(70px,10vh,120px)}
.product__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,90px);align-items:start}
.product__media{position:sticky;top:calc(var(--nav-h) + 24px)}
.product__photo{
  position:relative;background:var(--white);padding:14px 14px 46px;
  box-shadow:var(--shadow);transform:rotate(-1.4deg);
}
.product__photo img{width:100%;aspect-ratio:16/10.5;object-fit:cover;filter:sepia(.1)}
.product__photo figcaption{
  font-family:var(--font-hand);font-size:21px;font-weight:500;color:var(--ink-soft);
  text-align:center;padding:12px 4px 0;
}
.product__seal{position:absolute;top:-26px;right:-20px;transform:rotate(9deg) scale(.92)}
.product__seal .seal{position:static;display:flex}
.product__body{
  background-image:repeating-linear-gradient(transparent 0 34px,var(--rule) 34px 35px);
  padding-top:4px;
}
.product__family{font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.3em;font-size:13px;color:var(--gold-deep);display:block;margin-bottom:8px}
.product__name{font-family:var(--font-lux);font-weight:500;font-size:clamp(38px,4.4vw,62px);line-height:1.05}
.product__house{margin-top:6px;font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.26em;font-size:15px;color:var(--ink-soft)}
.product__scorebar{display:flex;align-items:center;gap:18px;margin:26px 0 8px}
.product__blurb{color:var(--ink-soft);font-size:17.5px;max-width:58ch;margin:14px 0 26px}
.product__buy{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}
.product__back{
  display:inline-block;margin-top:30px;
  font-family:var(--font-hand);font-size:21px;font-weight:600;color:var(--gold-deep);
  transition:color .3s,transform .3s var(--ease-out);
}
.product__back:hover{color:var(--ink);transform:translateX(-6px)}
.product__related{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,56px) clamp(80px,12vh,140px)}
.product__related-head{margin-bottom:30px}
.product__related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:clamp(24px,3vw,42px)}
@media (max-width:960px){
  .product__grid{grid-template-columns:1fr}
  .product__media{position:relative;top:0}
}

/* modal → full page link */
.modal__pagelink{
  display:inline-block;margin-top:20px;
  font-family:var(--font-hand);font-size:20px;font-weight:600;color:var(--gold-deep);
  transition:color .3s,transform .3s var(--ease-out);
}
.modal__pagelink:hover{color:var(--ink);transform:translateX(5px)}

/* ── prose pages (about / help) ── */
.prose{max-width:860px;margin:0 auto;padding:clamp(50px,8vh,90px) clamp(20px,4vw,56px) clamp(80px,12vh,140px)}
.prose h2{font-family:var(--font-lux);font-weight:500;font-size:clamp(28px,3.4vw,42px);margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h2 em{font-family:var(--font-script);font-style:normal;color:var(--gold-deep);font-size:1.15em}
.prose p{color:var(--ink-soft);font-size:17.5px;margin-bottom:18px;max-width:66ch}
.prose .lead{font-family:var(--font-lux);font-size:clamp(21px,2.2vw,26px);line-height:1.5;color:var(--ink)}
.about__photo{
  float:right;width:min(360px,42%);margin:6px 0 22px 34px;
  background:var(--white);padding:11px 11px 36px;box-shadow:var(--shadow);
  transform:rotate(2deg);position:relative;
}
.about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:sepia(.12)}
.about__photo figcaption{font-family:var(--font-hand);font-size:19px;color:var(--ink-soft);text-align:center;padding-top:10px}
@media (max-width:640px){.about__photo{float:none;width:100%;margin:0 0 26px}}

/* ── FAQ — hand-drawn accordions ── */
.faq{border:2px solid rgba(59,45,31,.35);border-radius:255px 18px 225px 18px/18px 225px 18px 255px;margin-bottom:16px;background:rgba(250,245,234,.6)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 24px;font-family:var(--font-lux);font-weight:500;font-size:clamp(18px,2vw,22px);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-hand);font-size:28px;color:var(--gold-deep);transition:transform .3s var(--ease-out)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 24px 20px;color:var(--ink-soft);font-size:16.5px;max-width:70ch}
.faq:hover{border-color:var(--ink)}

/* ── contact ── */
.contact{max-width:860px;margin:0 auto;padding:clamp(50px,8vh,90px) clamp(20px,4vw,56px) clamp(80px,12vh,140px)}
.contact__card{
  position:relative;background:var(--white);box-shadow:var(--shadow);
  border:1.5px solid rgba(59,45,31,.2);padding:clamp(34px,5vw,64px);transform:rotate(-.5deg);
}
.contact__card::before{content:"";position:absolute;inset:10px;pointer-events:none;border:2px dashed rgba(169,126,63,.5)}
.contact__form{display:grid;gap:20px;position:relative}
.contact__form label{font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.22em;font-size:13px;color:var(--gold-deep);display:block;margin-bottom:6px}
.contact__form input,.contact__form textarea{
  width:100%;background:none;border:none;outline:none;
  border-bottom:2px solid rgba(59,45,31,.4);padding:8px 4px;
  font-family:var(--font-hand);font-size:21px;font-weight:500;color:var(--ink);
  transition:border-color .3s;resize:vertical;
}
.contact__form input:focus,.contact__form textarea:focus{border-color:var(--gold-deep)}
.contact__meta{margin-top:34px;display:flex;gap:clamp(24px,5vw,60px);flex-wrap:wrap}
.contact__meta div{font-size:15.5px;color:var(--ink-soft)}
.contact__meta b{display:block;font-family:var(--font-serif);font-variant:small-caps;letter-spacing:.24em;font-size:13px;color:var(--gold-deep);font-weight:500;margin-bottom:6px}
.contact__ok{margin-top:18px;color:var(--gold-deep);font-family:var(--font-hand);font-size:24px;font-weight:600;text-align:center}

/* reduced motion: hide bg videos, posters take over */
@media (prefers-reduced-motion:reduce){
  .hero__video,.editorial__video,.news__video{display:none}
  .hero__bg{background:url("../assets/journal-bg.webp") center/cover}
  .editorial__media{background:url("../assets/journal-mist.webp") center/cover}
  .editorial--spray .editorial__media{background:url("../assets/spray.webp") center/cover}
}

/* capture mode: pin viewport-height sections for full-page screenshots */
.capture .hero{min-height:900px}
.capture [data-reveal],.capture .card,.capture .rail-card,.capture .review{opacity:1;transform:none}
.capture .story{height:auto}
.capture .story__pin{position:relative;height:900px}
.capture .editorial{height:620px}

/* ═══════════ RESPONSIVE NAV ═══════════ */
@media (max-width:900px){
  .nav__links,.nav__quiz{display:none}
  .nav__burger{display:flex}
}