:root{--g:#d9b277;--g2:#f0d6a0;--ink:#0d0e10;--cream:#f3ead9;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300}
.eyebrow{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--g);font-weight:400}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5.2vw,76px);line-height:1.02;letter-spacing:-.005em}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,3.2vw,48px);pointer-events:none}
.top__logo{height:34px;width:auto;opacity:0;animation:fadeIn 1.2s ease .2s forwards}
.top__tag{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--g);opacity:0;animation:fadeIn 1.2s ease .5s forwards}
@keyframes fadeIn{to{opacity:1}}

/* ---------- opening: the gem ---------- */
.stage{display:grid;grid-template-rows:auto 1fr;padding:clamp(70px,10svh,96px) 0 64px;overflow:hidden;background:var(--ink)}
.stage__tex{position:absolute;inset:-4%;background:url("../../media/tex/graphite.jpg") center/cover;opacity:.85;animation:drift 40s ease-in-out infinite alternate}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(217,178,119,.1),transparent 58%);pointer-events:none}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
.stage__head{position:relative;z-index:2;text-align:center;padding:0 20px}
.title{font-family:var(--serif);font-weight:300;font-size:clamp(40px,min(7.2vw,11svh),108px);line-height:.98;margin:12px 0 10px;letter-spacing:-.01em}
.title .w{display:inline-block;opacity:0;transform:translateY(46px);filter:blur(10px);animation:wIn 1.3s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.2s + .35s) forwards}
.title .w--gold{color:var(--g2);font-style:italic}
@keyframes wIn{to{opacity:1;transform:none;filter:blur(0)}}
.lede{font-size:clamp(14px,1.3vw,17px);opacity:.78;max-width:620px;margin:0 auto;line-height:1.6;text-wrap:balance}
.eyebrow[data-r],.lede[data-r]{transition-delay:var(--d)}

.gemwrap{--gs:min(46svh,44vw);position:relative;z-index:2;width:min(1240px,100%);margin:0 auto;padding:0 clamp(16px,3vw,40px);display:grid;grid-template-columns:1fr var(--gs) 1fr;grid-template-rows:var(--gs) auto;column-gap:clamp(18px,3.4vw,64px);align-items:center;align-self:center}
.gemwrap__ring{position:absolute;left:50%;top:calc(var(--gs)/2);width:calc(var(--gs)*1.36);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(217,178,119,.3);animation:spin 120s linear infinite;pointer-events:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.gem{grid-column:2;grid-row:1;width:var(--gs);height:var(--gs);overflow:visible;position:relative;z-index:1}
.gem__body{fill:rgba(255,255,255,.025)}
.gem__table{fill:rgba(240,214,160,.07);pointer-events:none}
.sec{cursor:pointer;outline:none}
.f{fill:var(--g2);fill-opacity:0;animation:twinkle var(--tt) ease-in-out var(--td) infinite;transition:fill-opacity .5s}
@keyframes twinkle{0%,100%{fill-opacity:0}50%{fill-opacity:.15}}
.edges path{fill:none;stroke:var(--g);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.5,0,.2,1) var(--e) forwards;pointer-events:none;opacity:.85}
@keyframes draw{to{stroke-dashoffset:0}}
.sweep{pointer-events:none;mix-blend-mode:screen}
.sweep__r{animation:sweepGo 7.5s ease-in-out 3.4s infinite}
@keyframes sweepGo{0%{transform:translateX(0)}38%,100%{transform:translateX(700px)}}
.gemwrap[data-active="1"] .sec[data-s="1"] .f,.gemwrap[data-active="2"] .sec[data-s="2"] .f,.gemwrap[data-active="3"] .sec[data-s="3"] .f{animation:none;fill-opacity:.34}

.chap{display:flex;flex-direction:column;gap:7px;max-width:310px;text-decoration:none;color:var(--cream);padding:14px 0;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.chap--1{grid-column:1;grid-row:1;text-align:right;align-items:flex-end;justify-self:end}
.chap--2{grid-column:3;grid-row:1;text-align:left;align-items:flex-start;justify-self:start}
.chap--3{grid-column:1/-1;grid-row:2;text-align:center;align-items:center;justify-self:center;max-width:380px;padding-top:6px}
.chap__n{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--g);font-weight:400}
.chap__name{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.8vw,58px);line-height:1;transition:color .4s,letter-spacing .5s}
.chap__d{font-size:14.5px;opacity:.72;line-height:1.5}
.chap__go{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-top:6px}
.chap__go i{display:block;width:26px;height:1px;background:currentColor;position:relative;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.chap__go i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.chap:hover .chap__go i,.chap:focus-visible .chap__go i{width:48px}
.gemwrap[data-active="1"] .chap--1 .chap__name,.gemwrap[data-active="2"] .chap--2 .chap__name,.gemwrap[data-active="3"] .chap--3 .chap__name{color:var(--g2)}
.gemwrap[data-active="1"] .chap--1{transform:translateX(-8px)}
.gemwrap[data-active="2"] .chap--2{transform:translateX(8px)}
.gemwrap[data-active="3"] .chap--3{transform:translateY(5px)}
.gemwrap[data-active] .chap:not(.is-on){opacity:.55}
.gemwrap[data-active="1"] .chap--1,.gemwrap[data-active="2"] .chap--2,.gemwrap[data-active="3"] .chap--3{opacity:1}
.chap[data-r].in{transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}

.cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:24px;height:42px;z-index:3;display:block}
.cue::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(217,178,119,.4)}
.cue span{position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--g2);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{top:0;opacity:0}20%{opacity:1}100%{top:36px;opacity:0}}

/* ---------- what is included ---------- */
.incl{display:grid;place-items:center;overflow:hidden;background:#1a0b0a}
.incl__tex{position:absolute;inset:-4%;background:url("../../media/tex/satin.jpg") center/cover;animation:drift 46s ease-in-out infinite alternate}
.incl__in{position:relative;z-index:2;width:min(1100px,100%);padding:clamp(80px,12svh,130px) clamp(20px,5vw,60px);text-align:center}
.incl .h2{margin:14px 0 clamp(30px,6svh,64px)}
.incl__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,90px)}
.gift{--rs:clamp(170px,21vw,250px);display:flex;flex-direction:column;align-items:center}
.gift__rw{position:relative;width:var(--rs);height:var(--rs);margin-bottom:24px;display:grid;place-items:center}
.gift__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.gift__ring circle{fill:none;stroke:var(--g);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.gift.in .gift__ring circle{animation:draw 2.4s cubic-bezier(.5,0,.2,1) .35s forwards}
.gift__c{display:flex;flex-direction:column;align-items:center;line-height:1}
.gift__c b{font-family:var(--serif);font-weight:300;font-size:calc(var(--rs)*.46);color:var(--g2)}
.gift__c span{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--g);margin-top:4px}
.gift__t{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);margin-bottom:8px}
.gift__d{max-width:300px;font-size:15px;line-height:1.6;opacity:.78}

/* ---------- chapters ---------- */
.bab{display:grid;place-items:center;overflow:hidden}
.bab__tex{position:absolute;inset:-4%;background-size:cover;background-position:center;animation:drift 50s ease-in-out infinite alternate}
.bab__in{position:relative;z-index:2;width:min(1320px,100%);padding:clamp(86px,12svh,120px) clamp(20px,5vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,5vw,84px);align-items:center}
.bab__n{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--ac);font-weight:400}
.bab__h{font-family:var(--serif);font-weight:300;font-size:clamp(58px,9vw,140px);line-height:.88;margin:10px 0 14px;letter-spacing:-.015em}
.bab__tag{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.1vw,30px);line-height:1.25;margin-bottom:26px;max-width:520px;opacity:.9}
.bab__list{display:grid;gap:11px;margin-bottom:34px;max-width:520px}
.bab__list li{position:relative;padding-left:26px;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.5}
.bab__list li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;background:var(--ac);transform:rotate(45deg)}
.btn{display:inline-flex;align-items:center;gap:16px;padding:17px 30px;border:1px solid var(--ac,var(--g));color:var(--ac,var(--g));text-decoration:none;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;position:relative;overflow:hidden;isolation:isolate;transition:color .5s}
.btn::before{content:"";position:absolute;inset:0;background:var(--ac,var(--g));transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1);z-index:-1}
.btn:hover,.btn:focus-visible{color:var(--bt,#12100e)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn i{display:block;width:24px;height:1px;background:currentColor;position:relative;transition:width .45s}
.btn i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover i{width:38px}

.bab--1{--ac:#9a7436;--bt:#fbf6ea;background:#ece5d6;color:#2a0b0d}
.bab--1 .bab__tex{background-image:url("../../media/tex/ivory.jpg");opacity:.95}
.bab--2{--ac:#d8b98a;--bt:#07140f;background:#07140f;color:#efe8da}
.bab--2 .bab__tex{background-image:url("../../media/tex/emerald.jpg");opacity:.9}
.bab--3{--ac:#e3bd7d;--bt:#250305;background:#250305;color:#f4e6d1}
.bab--3 .bab__tex{background-image:url("../../media/tex/oxblood.jpg");opacity:.85}
.bab--1 .bab__h{color:#4a0709}
.bab--2 .bab__h{font-style:italic;font-weight:300}

/* device previews */
.dev{position:relative;display:block;text-decoration:none;animation:floaty 9s ease-in-out infinite alternate;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@keyframes floaty{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.dev:hover{animation-play-state:paused;transform:scale(1.015)}
.dev__win{display:block;border-radius:10px;overflow:hidden;background:#111;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
.dev__bar{display:flex;gap:6px;align-items:center;height:24px;padding:0 12px;background:#1b1b1d}
.dev__bar i{width:8px;height:8px;border-radius:50%;background:#4a4a4d}
.dev__win img{width:100%;aspect-ratio:1280/800;object-fit:cover;background:#222}
.dev__ph{position:absolute;right:-3%;bottom:-9%;width:23%;border-radius:20px;overflow:hidden;border:4px solid #151515;background:#151515;box-shadow:0 24px 50px rgba(0,0,0,.5)}
.dev__ph img{width:100%;aspect-ratio:390/780;object-fit:cover;background:#222}
.bab--2 .dev__ph{right:auto;left:-3%}

/* ---------- footer ---------- */
.foot{display:grid;place-items:center;overflow:hidden;color:#2a0b0d;background:#d8c29b}
.foot__tex{position:absolute;inset:-4%;background:url("../../media/tex/champagne.jpg") center/cover;animation:drift 50s ease-in-out infinite alternate}
.foot__in{position:relative;z-index:2;text-align:center;padding:clamp(80px,12svh,120px) clamp(20px,5vw,60px);max-width:760px}
.foot .eyebrow{color:#6b4a1a}
.foot .h2{margin:14px 0 18px;color:#3a0a0d}
.foot__p{font-size:clamp(15px,1.3vw,18px);line-height:1.65;margin-bottom:32px;opacity:.85}
.btn--dark{--ac:#3a0a0d;--bt:#f6ead3;color:#3a0a0d;border-color:#3a0a0d}
.foot__s{margin-top:34px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}

/* ---------- smaller screens ---------- */
@media (max-width:900px){
  .top__logo{height:26px}
  .stage{padding-bottom:70px}
  .gemwrap{--gs:min(74vw,40svh);grid-template-columns:1fr;grid-template-rows:var(--gs) auto auto auto;row-gap:2px;justify-items:center}
  .gemwrap__ring{width:calc(var(--gs)*1.3)}
  .gem{grid-column:1;justify-self:center}
  .chap,.chap--1,.chap--2,.chap--3{grid-column:1;grid-row:auto;text-align:left;align-items:flex-start;justify-self:stretch;max-width:none;width:100%;display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;row-gap:0;align-items:center;padding:14px 4px;border-top:1px solid rgba(217,178,119,.22)}
  .chap__n{grid-column:1;grid-row:1/3;writing-mode:horizontal-tb;font-size:11px;letter-spacing:.22em;min-width:46px}
  .chap__name{grid-column:2;grid-row:1;font-size:30px}
  .chap__d{grid-column:2;grid-row:2;font-size:13.5px}
  .chap__go{grid-column:3;grid-row:1/3;font-size:0;margin:0}
  .chap__go i{width:30px}
  .chap:hover .chap__go i{width:38px}
  .gemwrap[data-active="1"] .chap--1,.gemwrap[data-active="2"] .chap--2,.gemwrap[data-active="3"] .chap--3{transform:none}
  .bab__in{grid-template-columns:1fr;gap:42px;padding-top:96px;padding-bottom:100px}
  .bab--2 .dev{order:2}
  .dev__ph{width:26%;right:-2%}
  .bab--2 .dev__ph{left:-2%}
  .incl__grid{grid-template-columns:1fr;gap:56px}
  .gift{--rs:min(56vw,210px)}
}
@media (max-width:480px){.title{font-size:clamp(38px,13vw,60px)}}