:root{
  --lime:#F8F4ED; --ink:#4F433A; --clay:#BF7656; --smoke:#7A726A; --stone:#D6CDBE; --sand:#B59D88; --leaf:#6A7560;
  --tint:#EDE6DA; --leaftint:#E1E3DA;
  --sans:'Satoshi',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
  --m:clamp(16px,3.6vw,56px);           /* page margin */
  --p:clamp(16px,1.8vw,28px);           /* inner padding from grid lines */
  --g:clamp(10px,1vw,16px);             /* card gap */
  --cut:clamp(22px,2.4vw,40px);         /* notch size */
  --r:clamp(14px,1.4vw,22px);           /* card radius */
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html,body{overflow-x:clip}
body{background:var(--lime);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--clay)}
h1,h2{font-weight:500;letter-spacing:-.045em;line-height:.95}
h2{font-size:clamp(40px,6vw,96px)}
.lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mut{color:var(--smoke)}
.small{font-size:13px;color:var(--smoke);line-height:1.6}
.small a{border-bottom:1px solid var(--stone)}
.wrap{max-width:1480px;margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
section{position:relative}
.num-lab{display:flex;gap:14px;color:var(--smoke);margin-bottom:28px}
.num-lab span{color:var(--ink)}

/* shapes */
.notch{position:relative;overflow:hidden;border-radius:var(--r);clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))}
.ink{background:var(--ink);color:var(--lime)}
.arc{position:absolute;border:1px solid var(--stone);border-radius:50%;pointer-events:none;z-index:-1}
svg{overflow:visible}
.art svg,.vcircle svg,.farc svg,.watermark{fill:none;stroke:var(--stone);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.art svg *,.vcircle svg *,.farc svg *,.watermark *{vector-effect:non-scaling-stroke}

/* buttons */
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:99px;padding:10px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pill.fill{background:var(--ink);color:var(--lime)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--clay)}
.round{flex:none;width:clamp(140px,13vw,200px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;font:500 15px/1.2 var(--sans);border:0;cursor:pointer;transition:transform .6s var(--ease)}
.round:hover{transform:scale(1.04)}
.round .arr{font-size:22px;transition:transform .4s var(--ease)}
.round:hover .arr{transform:translateX(6px)}
.round.light{background:var(--lime);color:var(--ink)}
.circ{width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:15px}

/* ---------- 01 HERO ---------- */
.hero{padding:0 var(--m)}
.frame{position:relative;max-width:1480px;margin:0 auto;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;border-left:1px solid var(--stone);border-right:1px solid var(--stone);padding-bottom:var(--m)}
.hnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:var(--p);position:relative;z-index:2}
.links{display:grid;gap:4px;font-size:14px;color:var(--smoke)}
.links a:hover{color:var(--ink)}
.logo{display:flex;align-items:center;gap:10px;font-weight:500;font-size:18px;letter-spacing:-.01em;padding-top:4px}
.logo svg{width:18px;height:22px;fill:none;stroke:var(--ink);stroke-width:44;stroke-linecap:round;stroke-linejoin:round}
.logo em{color:inherit}
.hnav .pill{justify-self:end}
.art{position:absolute;left:50%;top:clamp(-40px,-3vw,0px);width:min(42vw,620px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.art svg{width:100%;height:100%}
.band{display:grid;grid-template-columns:58fr 42fr;border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);margin-top:clamp(120px,15vw,240px);position:relative;align-self:end}
.band h1{font-size:clamp(56px,7.6vw,128px);white-space:nowrap;padding:clamp(28px,3.4vw,52px) var(--p);align-self:center}
.band-r{border-left:1px solid var(--stone);display:flex;justify-content:space-between;align-items:center;gap:var(--p);padding:var(--p)}
.side{max-width:24ch;font-size:15px;color:var(--smoke);align-self:flex-start;padding-top:8px}
.sub{display:flex;justify-content:space-between;align-items:center;padding:14px var(--p);color:var(--smoke)}
.plus{color:var(--clay);font-size:20px;line-height:1}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);padding:0 var(--p)}
.card{aspect-ratio:5/4;display:block}
.card .num{position:absolute;right:18px;top:14px;font-size:18px;z-index:2;color:var(--lime)}
.card .txt{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:var(--lime);display:grid;font-size:13px}
.card .txt b{font-weight:500;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.02em}
.card.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,33,28,.25),transparent 30%,transparent 50%,rgba(40,33,28,.62))}
.card.ink .txt b{font-size:clamp(20px,1.8vw,28px)}

/* ---------- 02 MASTHEAD ---------- */
.mast{padding:clamp(72px,9vw,140px) var(--m) 0;margin-top:clamp(80px,10vw,160px);overflow:hidden}
.mast-bg{position:absolute;inset:0;height:100%}
.paper{position:relative;max-width:1300px;margin:0 auto;background:var(--lime);padding:clamp(20px,2.4vw,36px) clamp(20px,2.8vw,44px) clamp(48px,6vw,96px)}
.prow{display:grid;grid-template-columns:2fr 1fr 1fr}
.mhead{font-size:clamp(34px,6.4vw,104px);margin:clamp(32px,4vw,64px) 0 clamp(20px,2.4vw,36px);white-space:nowrap}
.win{aspect-ratio:16/8}
.win img{object-position:50% 35%}
.pcols{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3vw,48px);color:var(--smoke)}

/* ---------- 03 STORY ---------- */
.story{padding-top:clamp(120px,14vw,220px)}
.arc-story{width:min(70vw,980px);aspect-ratio:1;left:-22vw;top:40px}
.shead{margin-bottom:clamp(48px,6vw,96px)}
.sgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g) clamp(16px,2vw,32px);position:relative}
.s1{grid-column:1/7;aspect-ratio:4/3}
.stext{grid-column:8/13;align-self:end;color:var(--smoke)}
.stext p+p{margin-top:1em}
.stext .big{color:var(--ink);font-size:clamp(20px,1.7vw,25px);line-height:1.4;letter-spacing:-.01em}
.s2{grid-column:4/9;aspect-ratio:4/5;margin-top:clamp(48px,6vw,96px)}
.materials{grid-column:9/13;align-self:end;border-top:1px solid var(--stone)}
.materials li{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--stone);font-size:15px}
.materials i{font-style:normal;width:34px;height:34px;border:1px solid var(--stone);border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--smoke);flex:none}
.watermark{grid-column:1/4;grid-row:2;align-self:end;width:100%;height:auto;aspect-ratio:640/760;max-width:220px}

/* ---------- 04 BENTO ---------- */
.bento{padding-top:clamp(120px,14vw,220px)}
.btop{display:flex;justify-content:space-between;gap:32px;align-items:flex-start;margin-bottom:clamp(36px,4vw,64px)}
.bhead{font-size:clamp(30px,4.2vw,66px);line-height:1;letter-spacing:-.04em;max-width:20ch;font-weight:500}
.bhead .g{color:var(--sand)}
.ring-link{width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none;transition:background .3s,color .3s}
.ring-link:hover{background:var(--ink);color:var(--lime)}
.bgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;grid-template-rows:repeat(2,clamp(200px,20vw,300px));gap:var(--g)}
.bgrid .big{grid-row:1/3}
.bgrid .wide{grid-column:3/5}
.stat{padding:clamp(18px,1.8vw,28px);display:flex;flex-direction:column;justify-content:space-between}
.stat b{font-weight:500;font-size:clamp(40px,4.4vw,68px);letter-spacing:-.05em;line-height:1;display:block}
.stat span{font-size:14px}
.stat.ink .lab{opacity:.7}
.stat.ink span{opacity:.85}
.stone{background:var(--tint)}
.leaf{background:var(--leaftint)}
.stat .bot{display:flex;justify-content:space-between;align-items:flex-end;color:var(--smoke)}

/* ---------- 05 SPACES ---------- */
.spaces{padding-top:clamp(120px,14vw,220px)}
.spgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);align-items:start}
.spgrid h2{margin-bottom:clamp(36px,4vw,64px)}
.splist{border-top:1px solid var(--stone);margin-bottom:20px}
.splist li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid var(--stone);color:var(--smoke);cursor:pointer;transition:color .3s,padding .5s var(--ease)}
.splist i{font-style:normal;font-size:11px;width:30px;height:30px;border:1px solid var(--stone);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.splist li span:nth-child(2){font-size:clamp(19px,1.6vw,24px);letter-spacing:-.015em}
.splist li span:last-child{font-size:13px;text-align:right}
.splist li.on,.splist li:hover{color:var(--ink)}
.splist li.on{padding-left:8px}
.splist li.on i{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.splist li.on span:nth-child(2){font-family:var(--serif);font-style:italic}
.spimg-wrap{position:sticky;top:clamp(40px,6vw,96px)}
.spimg{aspect-ratio:4/5}
.spimg img{transition:opacity .5s,transform 1.2s var(--ease)}
.spimg img.fade{opacity:0;transform:scale(1.04)}
.arc-sp{width:116%;aspect-ratio:1;left:-8%;top:-10%}

/* ---------- 06 RITUALS ---------- */
.rituals{padding-top:clamp(140px,16vw,260px)}
.half{position:absolute;left:50%;top:clamp(40px,5vw,80px);width:min(80vw,1100px);aspect-ratio:2/1;transform:translateX(-50%);border:1px solid var(--stone);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none;z-index:-1}
.rhead{text-align:left;margin-bottom:clamp(48px,6vw,96px)}
.rrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.rrow figure{aspect-ratio:3/4}
.rrow figure:nth-child(even){margin-top:clamp(40px,5vw,80px)}
.rrow figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:var(--lime);font-size:13px;display:flex;gap:10px;align-items:center}
.rrow figcaption i{font-style:normal;width:26px;height:26px;border:1px solid rgba(248,244,237,.7);border-radius:50%;display:grid;place-items:center;font-size:11px;font-family:var(--serif)}
.rrow figure::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(40,33,28,.55))}

/* ---------- 07 HOME ---------- */
.home{padding-top:clamp(140px,16vw,260px);display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,112px);align-items:end}
.hphoto{aspect-ratio:3/2}
.htext{position:relative}
.htext h2{margin-bottom:28px;font-size:clamp(36px,4.4vw,72px)}
.htext p+p{margin-top:12px}
.arc-home{width:110%;aspect-ratio:1;left:25%;top:10%}

/* ---------- 08 VISIT ---------- */
.visit{padding-top:clamp(140px,16vw,260px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,112px);align-items:start}
.vleft{position:relative}
.vleft h2{margin-bottom:28px}
.vleft>p:not(.lab){max-width:40ch;margin-bottom:18px}
.vcircle{position:absolute;right:0;top:-40px;width:min(22vw,280px);aspect-ratio:1;z-index:-1}
.vcircle svg{width:100%;height:100%}
.form{padding:clamp(28px,3.4vw,52px);display:grid;gap:22px}
.form label{display:grid;gap:6px}
.form label span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.form input,.form select{font:400 17px var(--sans);color:var(--lime);background:transparent;border:0;border-bottom:1px solid rgba(248,244,237,.3);padding:8px 0 10px;border-radius:0;appearance:none;outline:none;color-scheme:dark}
.form input::placeholder{color:rgba(248,244,237,.4)}
.form input:focus,.form select:focus{border-color:var(--lime)}
.form select option{color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--p)}
.form .round{justify-self:end;width:clamp(136px,11vw,160px);margin-top:8px;font-size:14px}

/* ---------- 09 FAQ ---------- */
.faq{padding-top:clamp(120px,14vw,220px)}
.flist{max-width:900px;margin-left:auto}
details{border-bottom:1px solid var(--stone)}
details:first-child{border-top:1px solid var(--stone)}
summary{list-style:none;cursor:pointer;padding:24px 0;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.015em;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";width:32px;height:32px;border:1px solid var(--stone);border-radius:50%;display:grid;place-items:center;font-size:16px;color:var(--smoke);transition:transform .4s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--smoke);max-width:62ch}

/* ---------- FOOTER ---------- */
.foot{padding-top:clamp(140px,16vw,260px);padding-bottom:40px;position:relative}
.farc{width:min(60vw,760px);margin:0 auto -2px}
.farc svg{width:100%;height:auto}
.fbig{font-size:clamp(48px,11vw,180px);font-weight:500;letter-spacing:-.05em;line-height:.9;border-top:1px solid var(--stone);padding-top:clamp(24px,3vw,44px)}
.fbig em{color:var(--clay)}
.frow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:32px;font-size:14px;color:var(--smoke)}

/* ---------- MOTION ---------- */
.lines>span{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lines>span>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.lines>span:nth-child(2)>span{transition-delay:.12s}
.lines.in>span>span{transform:none}
.rv:not(.lines):not(.ph):not(.draw){opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in:not(.lines):not(.ph):not(.draw){opacity:1;transform:none}
.ph.rv{opacity:0;transition:opacity 1.2s var(--ease)}
.ph.rv img{transform:scale(1.14);transition:transform 2s var(--ease)}
.ph.rv.in{opacity:1}
.ph.rv.in img{transform:scale(1)}
.card.ink.rv,.stat.rv,.form.rv{transition-delay:.1s}
.draw{clip-path:inset(0 0 100% 0);transition:clip-path 3s var(--ease)}
.draw.in{clip-path:inset(0 0 0 0)}
.cards .rv:nth-child(2),.rrow .rv:nth-child(2){transition-delay:.1s}
.cards .rv:nth-child(3),.rrow .rv:nth-child(3){transition-delay:.2s}
.cards .rv:nth-child(4),.rrow .rv:nth-child(4){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.rv,.rv *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}

/* ---------- CURSOR ---------- */
.cur{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);color:var(--lime);pointer-events:none;z-index:100;display:grid;place-items:center;font-size:0;letter-spacing:.06em;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background .3s,font-size .2s;will-change:transform}
.cur.hover{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(79,67,58,.12)}
.cur.big{width:88px;height:88px;margin:-44px 0 0 -44px;font-size:13px;background:var(--ink)}
.cur.on-ink.big{background:var(--lime);color:var(--ink)}
.cur.hide{opacity:0}
@media (pointer:fine){html.has-cur,html.has-cur *{cursor:none!important}}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(40,33,28,.92);z-index:90;display:grid;place-items:center;padding:4vw;opacity:0;pointer-events:none;transition:opacity .5s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r)}

.sticky{display:none}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  body{font-size:16px}
  .frame{border:0;min-height:auto}
  .hnav{grid-template-columns:1fr auto;padding:16px 0}
  .links{display:none}
  .hnav .logo{order:-1}
  .art{width:86vw;top:40px}
  .band{grid-template-columns:1fr;margin-top:48vw}
  .band h1{padding:28px 0}
  .band-r{border-left:0;border-top:1px solid var(--stone);padding:20px 0;align-items:flex-end}
  .round{width:120px;font-size:13px}
  .sub{padding:14px 0}
  .cards{grid-template-columns:1fr 1fr;padding:0}
  .prow{grid-template-columns:1fr 1fr}.prow span:last-child{display:none}
  .mhead{white-space:normal}
  .win{aspect-ratio:4/3}
  .pcols,.spgrid,.home,.visit{grid-template-columns:1fr}
  .s1,.stext,.s2,.materials{grid-column:1/-1}
  .s2{width:75%;margin-left:auto;margin-top:24px}
  .watermark{display:none}
  .bgrid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:44vw}
  .bgrid .big{grid-row:span 2}.bgrid .wide{grid-column:1/-1}
  .btop .ring-link{display:none}
  .spimg-wrap{display:none}
  .splist li{grid-template-columns:40px 1fr}
  .splist li span:last-child{grid-column:2;text-align:left}
  .rrow{grid-template-columns:1fr 1fr}
  .rrow figure:nth-child(even){margin-top:32px}
  .vcircle{width:40vw;top:0}
  .sticky{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:50;text-align:center;background:var(--ink);color:var(--lime);border-radius:99px;padding:16px;font-weight:500;transition:transform .5s var(--ease)}
  .sticky.hide{transform:translateY(120px)}
  .foot{padding-bottom:100px}
}
