@font-face{font-family:'Cormorant';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/font/CormorantGaramond.ttf) format('truetype')}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:300 700;font-display:swap;src:url(assets/font/CormorantGaramond-Italic.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/font/Inter.ttf) format('truetype')}

:root{
  --charcoal:#1A1A1A; --ivory:#F5EFE6; --brass:#B8935A;
  --bordeaux:#5C1A1B; --bordeaux-lift:#8E2E30; --grey:#8B857A;
  --t-fast:240ms; --t-mid:700ms; --t-slow:1400ms;
  --ease:cubic-bezier(.16,1,.30,1);
  --gut:clamp(20px,5vw,80px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--charcoal)}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--charcoal); color:var(--ivory);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
#scroll{will-change:transform}

/* ── type ── */
.display{font-family:'Cormorant',Georgia,serif;font-weight:300;letter-spacing:.06em;line-height:1.04}
.eyebrow{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass);font-weight:500
}
p{font-size:clamp(14px,1.05vw,16px);line-height:1.75;color:rgba(245,239,230,.62);font-weight:300}
p + p{margin-top:1.5em}
.lede{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(21px,2.5vw,34px);line-height:1.45;color:var(--ivory);letter-spacing:.005em
}

/* ── header ── */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--gut);
  mix-blend-mode:difference;
}
.mark{
  font-family:'Cormorant',serif;font-size:15px;letter-spacing:.36em;
  text-transform:uppercase;color:#fff;font-weight:400;white-space:nowrap
}
.mark i{font-style:normal;opacity:.45;padding:0 .5em}
.hnav{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#fff;opacity:.7}

/* ── hero scrub ── */
#hero{position:relative;height:420vh;background:transparent}
#herofix{position:fixed;inset:0;z-index:1;overflow:hidden;background:var(--charcoal)}
#scroll{position:relative;z-index:2}
#scroll > section,#scroll > footer{background:var(--charcoal);position:relative}
#scroll > section.ivory{background:var(--ivory)}
#scroll > #hero{background:transparent}
#seq{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block
}
.vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%,transparent 30%,rgba(10,10,10,.55) 100%)
}
.hero-copy{
  position:absolute;inset:auto 0 0 0;padding:clamp(90px,18vh,200px) var(--gut) clamp(40px,7vh,80px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  background:linear-gradient(transparent,rgba(12,10,9,.30) 34%,rgba(12,10,9,.82) 100%)
}
.hero-copy h1{font-size:clamp(46px,8.5vw,140px);letter-spacing:.04em}
.hero-copy h1 span{display:block;font-size:.42em;letter-spacing:.2em;opacity:.55;margin-top:.5em}
.hero-side{max-width:270px;text-align:right}
.hero-side p{font-size:12.5px;line-height:1.85;color:rgba(245,239,230,.5)}
.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,239,230,.35)
}
.scrollcue::after{
  content:"";display:block;width:1px;height:26px;margin:10px auto 0;
  background:linear-gradient(var(--brass),transparent);animation:drop 2.6s var(--ease) infinite
}
@keyframes drop{0%{opacity:0;transform:scaleY(0);transform-origin:top}
40%{opacity:1;transform:scaleY(1);transform-origin:top}
100%{opacity:0;transform:scaleY(1);transform-origin:bottom}}

/* ── sections ── */
section{position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:clamp(90px,14vh,190px) var(--gut)}
.narrow{max-width:760px}
.center{text-align:center;margin-inline:auto}
.rule{height:1px;background:var(--brass);opacity:.5;transform-origin:left;transform:scaleX(0)}
.in .rule{transform:scaleX(1);transition:transform var(--t-mid) var(--ease)}

/* threshold — ivory */
.ivory{background:var(--ivory);color:var(--charcoal)}
.ivory p{color:#4a463f}
.ivory .lede{color:var(--charcoal)}
.ivory .eyebrow{color:var(--grey)}
.ivory .rule{background:var(--charcoal);opacity:.18}
.sig{font-family:'Cormorant',serif;font-size:clamp(20px,2.2vw,28px);line-height:1.5;letter-spacing:.02em}
.sig b{font-weight:400;color:var(--bordeaux)}
.byline{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-top:34px}

/* section head */
.head h2{font-size:clamp(32px,5vw,74px);letter-spacing:.05em}
.head .eyebrow{margin-bottom:26px}
.head .rule{margin:34px 0 0;width:78px}

/* one-to-begin */
.begin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.begin figure{position:relative;overflow:hidden}
.begin img{width:100%;height:auto;display:block}

/* notes */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(184,147,90,.22);margin-top:70px}
.note{background:var(--charcoal);padding:clamp(26px,3vw,44px)}
.note .k{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.note .v{font-family:'Cormorant',serif;font-size:clamp(17px,1.6vw,23px);line-height:1.55;letter-spacing:.02em}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:70px;border-top:1px solid rgba(245,239,230,.14);padding-top:34px}
.spec div .k{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.spec div .v{font-size:13px;color:rgba(245,239,230,.72);line-height:1.6}

/* full-bleed video band */
.band{position:relative;height:92vh;overflow:hidden}
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .cap{
  position:absolute;inset:auto 0 0 0;padding:0 var(--gut) clamp(40px,7vh,80px);
  background:linear-gradient(transparent,rgba(15,12,12,.72))
}
.band .cap h3{font-size:clamp(26px,4vw,58px);letter-spacing:.05em}
.band .cap p{max-width:420px;margin-top:16px}

/* ritual */
.ritual{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:center}
.ritual video{width:100%;display:block}
.steps{counter-reset:s;margin-top:44px}
.steps li{list-style:none;display:flex;gap:22px;padding:22px 0;border-top:1px solid rgba(245,239,230,.12)}
.steps li:last-child{border-bottom:1px solid rgba(245,239,230,.12)}
.steps .n{font-family:'Cormorant',serif;font-size:16px;color:var(--brass);min-width:34px;letter-spacing:.1em}
.steps .t{font-size:14px;line-height:1.7;color:rgba(245,239,230,.7);font-weight:300}

/* gallery strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.strip figure{overflow:hidden;position:relative;aspect-ratio:4/5}
.strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.strip figure:hover img{transform:scale(1.04)}

/* newsletter */
.signup{text-align:center;max-width:620px;margin:0 auto}
.field{display:flex;gap:0;margin-top:44px;border-bottom:1px solid rgba(245,239,230,.3)}
.field input{
  flex:1;background:none;border:0;outline:0;color:var(--ivory);
  font-family:'Inter',sans-serif;font-size:14px;padding:16px 4px;letter-spacing:.04em
}
.field input::placeholder{color:rgba(245,239,230,.35)}
.field button{
  background:none;border:0;color:var(--brass);cursor:pointer;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;padding:16px 4px 16px 24px;
  transition:color var(--t-fast) var(--ease)
}
.field button:hover{color:var(--ivory)}
.field:focus-within{border-color:var(--brass)}
.微{font-size:11px;color:rgba(245,239,230,.4);margin-top:20px;letter-spacing:.02em}

/* footer */
footer{border-top:1px solid rgba(245,239,230,.12)}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding:60px var(--gut);max-width:1280px;margin:0 auto}
.fgrid a{color:rgba(245,239,230,.55);text-decoration:none;font-size:12px;letter-spacing:.06em;
  display:block;margin-bottom:9px;transition:color var(--t-fast) var(--ease)}
.fgrid a:hover{color:var(--brass)}
.fh{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.legal{padding:0 var(--gut) 50px;max-width:1280px;margin:0 auto;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,239,230,.28)}

/* reveal */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.in .rv,.rv.in{opacity:1;transform:none}
.rv:nth-child(2){transition-delay:.16s}
.rv:nth-child(3){transition-delay:.32s}
.rv:nth-child(4){transition-delay:.48s}

@media(max-width:860px){
  .begin,.ritual{grid-template-columns:1fr}
  .notes,.strip{grid-template-columns:1fr}
  .spec{grid-template-columns:repeat(2,1fr)}
  .hero-side{display:none}
  #hero{height:340vh}
  .hero-copy{padding-bottom:clamp(70px,11vh,110px)}
  .band{height:76vh}
  header{padding:18px var(--gut)}
  .hnav{display:none}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .rule{transform:scaleX(1)!important}
  .scrollcue::after{animation:none}
}

/* ── nav ── */
.hnav{display:flex;align-items:center;gap:26px}
.hnav a{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;text-decoration:none;opacity:.72;
  transition:opacity var(--t-fast) var(--ease)
}
.hnav a:hover{opacity:1}
.hnav a.btn{
  border:1px solid rgba(255,255,255,.5);padding:11px 20px;opacity:.92
}
.hnav a.btn:hover{border-color:#fff;opacity:1}

/* ── story page ── */
.shero{position:relative;height:88vh;min-height:520px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center}
.shero video,.shero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shero .veil{position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 50%,rgba(12,10,9,.35),rgba(12,10,9,.88) 100%)}
.shero .inner{position:relative;padding:0 var(--gut)}
.shero h1{font-size:clamp(38px,6.6vw,104px);letter-spacing:.045em;margin-top:26px}
.shero h1 em{font-style:italic;font-weight:300;display:block}

.chapter{display:grid;grid-template-columns:180px 1fr;gap:clamp(24px,5vw,70px);
  align-items:start;padding-top:clamp(60px,9vh,120px)}
.chapter + .chapter{border-top:1px solid rgba(245,239,230,.12);margin-top:clamp(60px,9vh,120px)}
.chapter .idx{font-family:'Cormorant',serif;font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass);padding-top:.7em}
.chapter h3{font-size:clamp(24px,3.4vw,46px);letter-spacing:.045em;margin-bottom:22px}
.chapter figure{margin-top:38px;overflow:hidden}
.chapter figure img,.chapter figure video{width:100%;display:block}
.chapter figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,239,230,.4);margin-top:14px}

.pull{font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(22px,3vw,40px);line-height:1.42;letter-spacing:.01em;
  text-align:center;max-width:900px;margin:0 auto;color:var(--ivory)}
.ivory .pull{color:var(--charcoal)}

.tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(184,147,90,.22);margin-top:64px}
.tenet{background:var(--charcoal);padding:clamp(26px,3vw,42px)}
.tenet .n{font-family:'Cormorant',serif;font-size:12px;letter-spacing:.28em;color:var(--brass)}
.tenet h4{font-family:'Cormorant',serif;font-weight:300;font-size:clamp(19px,2vw,27px);
  letter-spacing:.04em;margin:16px 0 14px}
.tenet p{font-size:13.5px}

@media(max-width:860px){
  .chapter{grid-template-columns:1fr;gap:16px}
  .chapter .idx{padding-top:0}
  .tenets{grid-template-columns:1fr}
  .hnav{display:none}          /* replaced by the menu button on mobile */
  .menubtn{display:block}
}

/* mobile hero: frame is fitted, not cropped — copy sits below it */
@media(max-width:860px){
  .hero-copy{
    align-items:flex-start;flex-direction:column;
    padding-bottom:clamp(80px,13vh,130px);
    background:linear-gradient(transparent,rgba(12,10,9,.55) 22%,rgba(12,10,9,.95) 62%)
  }
  .hero-copy h1{font-size:clamp(40px,11.5vw,64px)}
  #herofix{background:#141312}
}

/* ── craft section ── */
.craft{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,86px);align-items:center}
.craft .plate{position:relative}
.craft .plate img{width:100%;display:block}
.craft .quote{
  position:absolute;right:-26px;bottom:-26px;background:var(--charcoal);
  color:var(--ivory);padding:22px 30px;max-width:290px;
  font-family:'Cormorant',serif;font-style:italic;font-size:clamp(15px,1.4vw,19px);
  letter-spacing:.02em;line-height:1.45
}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;
  border-top:1px solid rgba(26,26,26,.16);padding-top:32px}
.fig .num{font-family:'Cormorant',serif;font-weight:300;font-size:clamp(34px,3.8vw,52px);
  color:var(--brass);line-height:1;letter-spacing:.02em}
.fig .lab{font-size:12px;line-height:1.5;color:#5c574e;margin-top:12px;letter-spacing:.02em}

/* ── gallery ── */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gal figure{position:relative;overflow:hidden;background:#141312;cursor:zoom-in;margin:0}
.gal img,.gal video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease),opacity var(--t-mid) var(--ease)}
.gal figure:hover img,.gal figure:hover video{transform:scale(1.035)}
.gal .cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;
  background:linear-gradient(transparent,rgba(12,10,9,.8));
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(245,239,230,.8);opacity:0;transition:opacity var(--t-fast) var(--ease)
}
.gal figure:hover .cap{opacity:1}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}.s8{grid-column:span 8}
.r45{aspect-ratio:4/5}.r11{aspect-ratio:1/1}.r169{aspect-ratio:16/9}.r34{aspect-ratio:3/4}
.gtag{display:inline-block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);border:1px solid rgba(184,147,90,.4);padding:5px 11px;margin-right:8px}

#lb{position:fixed;inset:0;z-index:200;background:rgba(10,9,9,.96);
  display:none;align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out}
#lb.on{display:flex}
#lb img,#lb video{max-width:100%;max-height:90vh;object-fit:contain}
#lb .x{position:absolute;top:22px;right:28px;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(245,239,230,.6)}

@media(max-width:860px){
  .craft{grid-template-columns:1fr}
  .craft .quote{right:0;bottom:-18px;max-width:230px;padding:16px 20px}
  .figs{grid-template-columns:1fr;gap:22px}
  .s3,.s4,.s6,.s8{grid-column:span 12}
  .gal{gap:10px}
}
.fig .num.word{font-size:clamp(22px,2.4vw,32px);line-height:1.15}
.gal figure{background-size:cover;background-position:center}

/* ── mobile menu ── */
.menubtn{
  display:none;background:none;border:0;cursor:pointer;padding:10px 0 10px 14px;
  font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:#fff;opacity:.85
}
.menubtn .bars{display:inline-block;vertical-align:middle;width:22px;margin-left:10px}
.menubtn .bars i{display:block;height:1px;background:currentColor;margin:5px 0;
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
body.menu-open .menubtn .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .menubtn .bars i:nth-child(2){opacity:0}
body.menu-open .menubtn .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

#menu{
  position:fixed;inset:0;z-index:55;background:var(--charcoal);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid)
}
body.menu-open #menu{opacity:1;visibility:visible}
#menu a{
  display:block;text-decoration:none;color:var(--ivory);
  font-family:'Cormorant',serif;font-weight:300;
  font-size:clamp(34px,10vw,54px);letter-spacing:.05em;line-height:1;
  padding:20px 0;border-bottom:1px solid rgba(245,239,230,.12);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)
}
body.menu-open #menu a{opacity:1;transform:none}
body.menu-open #menu a:nth-child(1){transition-delay:.10s}
body.menu-open #menu a:nth-child(2){transition-delay:.19s}
body.menu-open #menu a:nth-child(3){transition-delay:.28s}
#menu a .n{
  font-family:'Inter',sans-serif;font-size:9px;letter-spacing:.28em;
  color:var(--brass);display:block;margin-bottom:12px
}
#menu a[aria-current]{color:var(--brass)}
#menu .foot{
  position:absolute;left:var(--gut);right:var(--gut);bottom:44px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,239,230,.4)
}
@media(prefers-reduced-motion:reduce){
  #menu,#menu a{transition:none}
}

@media(max-width:860px){
  .menubtn{display:block}
  header{mix-blend-mode:normal}
  body.menu-open header{background:transparent}
}

@media(max-width:860px){
  body.menu-open #menu a:nth-child(4){transition-delay:.37s}
  #menu a.menu-join{color:var(--brass)}
  /* touch devices have no hover — captions stay legible */
  .gal .cap{opacity:1}
  .gal figure:hover img,.gal figure:hover video{transform:none}
}