/* ══════════════ TOKENS ══════════════ */
:root{
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);
  --maxw:1440px; --pad:clamp(1.25rem,5vw,5rem);
}
[data-theme="dark"]{
  --bg:#0C0A09; --bg2:#141110; --ink:#F6F0E7; --ink2:#BCB0A5;
  --line:rgba(246,240,231,.14); --gold:#C9A96A; --onGold:#0C0A09;
}
[data-theme="light"]{
  --bg:#FAF6EF; --bg2:#F1E8DA; --ink:#191410; --ink2:#5C5147;
  --line:rgba(25,20,16,.15); --gold:#8C2F39; --onGold:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:400;font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background .7s var(--ease),color .7s var(--ease)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.02;letter-spacing:-.02em}
p{margin:0 0 1.3em} a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:960px}

.t-hero{font-size:clamp(2.9rem,7.4vw,6.6rem);line-height:.98}
.t-xl{font-size:clamp(2.6rem,6.6vw,5.6rem);line-height:1.02}
.t-lg{font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.06}
.t-md{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.12}
.body-lg{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.85;color:var(--ink2)}
.lbl{font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink2);display:block}
.lbl--gold{color:var(--gold)}
em.g{font-style:italic;color:var(--gold)}

.grain{position:fixed;inset:-200%;z-index:2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}
 20%{transform:translate(-15%,5%)}30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}
 50%{transform:translate(-15%,10%)}60%{transform:translate(15%,0)}70%{transform:translate(0,15%)}
 80%{transform:translate(3%,35%)}90%{transform:translate(-10%,10%)}}
.prog{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:90;width:0;transition:width .1s linear}

/* ══════════════ HEADER ══════════════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;padding:1.7rem 0;
  border-bottom:1px solid transparent;opacity:0;animation:fadeIn 1.4s var(--slow) .6s forwards;
  transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s,padding .5s var(--ease)}
@keyframes fadeIn{to{opacity:1}}
.hdr.stuck{background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(22px) saturate(1.2);border-bottom-color:var(--line);padding:.95rem 0}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mark{font-family:var(--serif);font-size:1.45rem;letter-spacing:.2em;text-transform:uppercase;
  color:#F6F0E7;white-space:nowrap;transition:color .5s var(--ease)}
.hdr.stuck .mark{color:var(--ink)}
.mark em{font-style:italic;text-transform:none;letter-spacing:.02em}
.mnav{display:flex;gap:clamp(.85rem,1.8vw,2rem)}
.mnav a{font-size:.72rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,240,231,.78);position:relative;padding:.4rem 0;transition:color .4s var(--ease)}
.hdr.stuck .mnav a{color:var(--ink2)}
.mnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .45s var(--slow)}
.mnav a:hover::after{right:0}
.mnav a:hover,.hdr.stuck .mnav a:hover{color:var(--ink)}
.hdr__r{display:flex;align-items:center;gap:1rem}
.sw{display:flex;border:1px solid rgba(246,240,231,.28);border-radius:99px;padding:2px;transition:border-color .5s}
.hdr.stuck .sw{border-color:var(--line)}
.sw button{all:unset;cursor:pointer;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.42em .9em;border-radius:99px;color:rgba(246,240,231,.7);transition:all .4s var(--ease)}
.hdr.stuck .sw button{color:var(--ink2)}
.sw button[aria-pressed="true"]{background:var(--gold);color:var(--onGold)}
.burg{all:unset;display:none;cursor:pointer;padding:.5rem;color:#F6F0E7}
.hdr.stuck .burg{color:var(--ink)}

.b{display:inline-flex;align-items:center;gap:.8em;font-size:.72rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;padding:1.25em 3em;border:1px solid;cursor:pointer;transition:all .5s var(--slow)}
.b--gold{background:var(--gold);border-color:var(--gold);color:var(--onGold)}
.b--gold:hover{filter:brightness(1.14);letter-spacing:.36em}
.b--line{background:rgba(12,10,9,.22);border-color:rgba(246,240,231,.45);color:#F6F0E7;backdrop-filter:blur(6px)}
.b--line:hover{border-color:#F6F0E7;background:rgba(246,240,231,.12);letter-spacing:.36em}
.b--ink{background:transparent;border-color:var(--line);color:var(--ink)}
.b--ink:hover{border-color:var(--ink);letter-spacing:.36em}

/* ══════════════ HERO — vertical film, shown whole ══════════════ */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}

/* blurred still fills the sides so the 9:16 film never gets cropped */
.hero__back{position:absolute;inset:0;z-index:0;
  background:url("../img/hero-backdrop.webp") center/cover no-repeat;transform:scale(1.08)}
.hero__film{position:absolute;inset:0;z-index:1;overflow:hidden}
/* 142% + top alignment reproduces the original framing — fuller and wider than the
   film's own ratio, cropped only at the foot. Absolute positioning is deliberate:
   inside a grid the percentage height cycles against an auto row and silently falls
   back to the file's intrinsic size. */
.hero__film video{position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:142%;width:auto;max-width:none;display:block;
  opacity:0;transition:opacity 1.8s var(--slow)}
.hero__film video.ready{opacity:1}
/* soft feather where the film meets the backdrop */
.hero__film::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 190px 30px rgba(12,10,9,.42)}

.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
   linear-gradient(180deg,rgba(12,10,9,.72) 0%,rgba(12,10,9,.18) 26%,rgba(12,10,9,.06) 40%,
                   rgba(12,10,9,.52) 68%,rgba(12,10,9,.92) 100%)}

/* opens from black */
.curtain{position:fixed;inset:0;z-index:120;background:#0C0A09;pointer-events:none;
  animation:lift 1.7s var(--slow) .25s forwards}
@keyframes lift{to{opacity:0;visibility:hidden}}

.hero__in{position:relative;z-index:3;text-align:center;
  padding:0 var(--pad) clamp(7rem,15vh,9rem);max-width:1180px;margin:0 auto;width:100%}
.hero .lbl{color:rgba(246,240,231,.78);margin-bottom:1.7rem}
.hero h1{color:#F6F0E7;font-weight:400;
  text-shadow:0 1px 3px rgba(12,10,9,.55),0 2px 18px rgba(12,10,9,.6),0 4px 60px rgba(12,10,9,.5)}
.hero h1 em{font-style:italic;color:var(--gold);display:block}
.hero__sub{color:rgba(246,240,231,.88);font-family:var(--serif);
  font-weight:400;font-size:clamp(1.15rem,1.9vw,1.65rem);max-width:46ch;margin:1.9rem auto 2.4rem;
  line-height:1.55;text-shadow:0 1px 3px rgba(12,10,9,.6),0 2px 20px rgba(12,10,9,.7)}
.hero__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* the type waits for the curtains to start opening */
.up{opacity:0;transform:translateY(34px);animation:upFallback 0s linear 12s forwards}
@keyframes upFallback{to{opacity:1;transform:none}}
.hero.revealed .up{animation:up 1.7s var(--slow) forwards;animation-delay:var(--d,0s)}
@keyframes up{to{opacity:1;transform:none}}

.cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:grid;justify-items:center;gap:.8rem;color:rgba(246,240,231,.62)}
.cue span{font-size:.56rem;letter-spacing:.34em;text-transform:uppercase}
.cue i{display:block;width:1px;height:52px;background:linear-gradient(rgba(246,240,231,.75),transparent);
  animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ══════════════ REVEALS ══════════════ */
.rv{opacity:0;transform:translateY(48px);transition:opacity 1.2s var(--slow),transform 1.2s var(--slow);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-52px);transition:opacity 1.25s var(--slow),transform 1.25s var(--slow)}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(52px);transition:opacity 1.25s var(--slow),transform 1.25s var(--slow)}
.rv-r.in{opacity:1;transform:none}
.draw{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--slow)}
.draw.in{transform:scaleX(1)}
.words span{display:inline-block;opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--slow),transform .95s var(--slow)}
.words.in span{opacity:1;transform:none}
/* On one-column layouts a sideways reveal serves no purpose, and its start
   position (translateX 52px) pushed the document 52px wider than the screen —
   which is what made phones load zoomed in with the menu button off-frame. */
@media(max-width:900px){
  .rv-l,.rv-r{transform:translateY(40px)}
  .rv-l.in,.rv-r.in{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r,.words span,.up{opacity:1!important;transform:none!important;animation:none!important}
  .grain,.curtain{animation:none;display:none}
}

/* ══════════════ SECTIONS ══════════════ */
.stmt{padding:clamp(6rem,15vh,12rem) 0;text-align:center}
.stmt h2{max-width:18ch;margin:2rem auto 0}

.about{padding:clamp(3rem,8vh,6rem) 0 clamp(5rem,11vh,9rem);overflow-x:clip}
.about__in{display:grid;grid-template-columns:minmax(0,44vw) 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.about__art img{width:100%;box-shadow:0 50px 90px -50px rgba(0,0,0,.6)}
.about__txt{padding-right:var(--pad);max-width:720px}
.about__txt h2{margin:1.8rem 0 2rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1.6rem;
  margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.facts dt{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink2);margin-bottom:.5rem}
.facts dd{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.6rem);
  line-height:1.2;white-space:nowrap}

.band{position:relative;height:clamp(340px,58vh,660px);overflow:hidden}
@media(max-width:760px){
  .band{height:clamp(400px,62vh,560px)}
  .band__px{inset:-6%}
  .quote__bg,.fin__bg{inset:-6%}
}
.band__px{position:absolute;inset:-14%}
.band__px img{width:100%;height:100%;object-fit:cover}

.mq{border-block:1px solid var(--line);padding:1.5rem 0;overflow:hidden;white-space:nowrap}
.mq__t{display:inline-block;animation:mq 36s linear infinite;will-change:transform}
.mq:hover .mq__t{animation-play-state:paused}
.mq__t span{font-family:var(--serif);font-size:clamp(1.15rem,2.1vw,1.9rem);font-style:italic;
  color:var(--ink2);padding:0 2.4rem;position:relative}
.mq__t span::after{content:"·";position:absolute;right:-.35rem;color:var(--gold);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

.exp{padding:clamp(4rem,9vh,7rem) 0 clamp(5rem,10vh,8rem)}
.exp__hd{max-width:760px;margin-bottom:clamp(2.5rem,7vh,5rem)}
.exp__hd h2{margin:1.4rem 0 0}
.exp__row{display:grid;grid-template-columns:minmax(0,42vw) 1fr;align-items:center;
  gap:clamp(2rem,5vw,5.5rem);padding:clamp(2.5rem,6vh,5rem) 0;border-top:1px solid var(--line)}
.exp__row:first-of-type{border-top:0}
.exp__row:nth-of-type(even){grid-template-columns:1fr minmax(0,42vw)}
.exp__row:nth-of-type(even) .exp__art{order:2}
.exp__art{overflow:hidden}
.exp__art img{width:100%;transition:transform 1.6s var(--slow)}
.exp__row:hover .exp__art img{transform:scale(1.045)}
.exp__txt{padding-right:var(--pad);max-width:600px}
.exp__row:nth-of-type(even) .exp__txt{padding-right:0;padding-left:var(--pad);justify-self:end}
.exp__num{font-family:var(--serif);font-size:clamp(3.6rem,7.5vw,7rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--ink2);opacity:.4;display:block;margin-bottom:.4rem}
.exp__txt h3{margin-bottom:1.1rem}
.exp__dur{margin-bottom:1.5rem}
.exp__more{display:inline-flex;align-items:center;gap:.7em;font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);
  padding-bottom:.55rem;margin-top:.4rem;transition:all .5s var(--slow)}
.exp__more:hover{border-color:var(--gold);color:var(--gold);gap:1.3em}
.exp__foot{margin-top:clamp(2.5rem,5vh,4rem);padding-top:2rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}

.quote{position:relative;padding:clamp(7rem,18vh,14rem) 0;overflow:hidden;text-align:center}
.quote__bg{position:absolute;inset:-16%;z-index:0}
.quote__bg img{width:100%;height:100%;object-fit:cover}
.quote::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,10,9,.6)}
.quote__in{position:relative;z-index:2}
.quote blockquote{margin:0 auto;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2rem,5.4vw,4.6rem);line-height:1.16;color:#F6F0E7;max-width:20ch}
.quote cite{display:block;margin-top:2.6rem;font-family:var(--sans);font-style:normal;
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(246,240,231,.62)}

.strip{padding:clamp(4.5rem,10vh,8rem) 0;overflow:hidden}
.strip__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.strip__hd h2{margin-top:1.2rem}
.strip__track{display:flex;gap:1.2rem;will-change:transform;padding-left:var(--pad)}
.strip__track>a{flex:0 0 clamp(230px,25vw,380px);overflow:hidden}
@media(max-width:900px){
  /* swipe it yourself rather than having the page scroll drive it */
  .strip{overflow:visible}
  .strip__track{transform:none!important;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-right:var(--pad);scrollbar-width:none;will-change:auto}
  .strip__track::-webkit-scrollbar{display:none}
  .strip__track>a{flex:0 0 min(74vw,320px);scroll-snap-align:center}
}
.strip__track img{width:100%;transition:transform 1.2s var(--slow)}
.strip__track a:hover img{transform:scale(1.06)}

.trust{padding:clamp(3rem,7vh,5rem) 0;border-block:1px solid var(--line)}
.trust__in{display:flex;flex-wrap:wrap;gap:1rem 3.6rem;align-items:center;justify-content:center}
.trust a{display:inline-flex;align-items:center;gap:.7rem;font-size:.64rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink2);transition:color .4s var(--ease)}
.trust a:hover{color:var(--ink)}
.trust i{width:5px;height:5px;border-radius:99px;background:var(--gold);flex:none}

.fin{position:relative;min-height:86vh;display:grid;place-items:center;overflow:hidden;text-align:center}
.fin__bg{position:absolute;inset:-12%;z-index:0}
.fin__bg img{width:100%;height:100%;object-fit:cover}
.fin::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,10,9,.8),rgba(12,10,9,.52) 45%,rgba(12,10,9,.92))}
.fin__in{position:relative;z-index:2;padding:4rem 1.5rem;max-width:900px}
.fin h2{color:#F6F0E7;margin:1.6rem 0}
.fin p{color:rgba(246,240,231,.82);max-width:46ch;margin-inline:auto;margin-bottom:3rem}

.ft{background:var(--bg2);padding:clamp(4rem,9vh,7rem) 0 2.2rem;transition:background .7s var(--ease)}
.ft__g{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.ft h4{font-family:var(--sans);font-size:.6rem;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink2);margin:0 0 1.4rem}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.ft ul a{font-size:.95rem;color:var(--ink2);transition:color .35s var(--ease)}
.ft ul a:hover{color:var(--ink)}
.ft__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-top:2.2rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink2)}

.note{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--gold);color:var(--onGold);
  font-size:.72rem;padding:.7rem clamp(1rem,4vw,2rem);display:flex;gap:1rem;
  align-items:center;justify-content:center;text-align:center}
.note button{all:unset;cursor:pointer;opacity:.65;font-size:1rem;padding:0 .4rem}

/* While the menu is open the header must NOT have backdrop-filter: it would
   become the containing block for the fixed-position menu and the overlay
   would scroll away with the page. */
body.menu-open{overflow:hidden}
body.menu-open .hdr{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  background:var(--bg);transition:none!important}

/* nav collapses earlier than the page layout — seven items need the room */
@media(max-width:1120px){
  .mnav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;
    align-items:center;gap:2rem;display:flex;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .26s var(--ease),visibility 0s linear .26s}
  .mnav.open{opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .26s var(--ease),visibility 0s}
  .mnav a{font-size:1.15rem;color:var(--ink)}
  .burg{display:block;position:relative;z-index:85}
  /* keep the wordmark and theme toggle above the open overlay */
  .mark,.sw{position:relative;z-index:85}
  .mnav{padding-top:6rem}
}
@media(max-width:900px){
  .about__in,.exp__row,.exp__row:nth-of-type(even){grid-template-columns:1fr;gap:2.2rem}
  .about__txt,.exp__txt,.exp__row:nth-of-type(even) .exp__txt{padding:0 var(--pad);justify-self:start}
  .exp__row:nth-of-type(even) .exp__art{order:0}
  .ft__g{grid-template-columns:1fr 1fr}
  /* phone is already ~9:16 — let the film fill the screen */
  .hero__film video{position:absolute;inset:0;transform:none;left:0;
    width:100%;height:100%;object-fit:cover}
  .hero__film::after{box-shadow:none}
  .hero__back{display:none}
}
@media(max-height:780px){ .cue{display:none} }
@media(max-width:760px){
  .hero__in{padding-bottom:clamp(3.5rem,9vh,5rem)}
  .hero .lbl{font-size:.55rem;letter-spacing:.2em;margin-bottom:1.1rem}
  .hero h1{font-size:clamp(2.4rem,9.6vw,3.5rem)}
  .hero__sub{font-size:1.02rem;margin:1.2rem auto 1.7rem;max-width:32ch}
  .hero__btns{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero__btns .b{justify-content:center;padding:1.1em 1.6em}
  .cue{display:none}
}
@media(max-width:560px){
  .ft__g{grid-template-columns:1fr}
  /* header content overflowed 390px and the toggle landed on top of the burger */
  .hdr__in{gap:.6rem}
  .hdr__r{gap:.4rem}
  .mark{font-size:1.05rem;letter-spacing:.1em}
  .sw{padding:1px}
  .sw button{font-size:.48rem;letter-spacing:.1em;padding:.4em .62em}
  .burg{padding:.35rem}
}
/* ══════════════ POST / JOURNAL TEMPLATES ══════════════ */
.post-page{padding:calc(clamp(5rem,12vh,8rem) + 78px) 0 clamp(4rem,10vh,7rem)}
.post__hd{margin-bottom:2.5rem}
.post__hd h1{margin:1.2rem 0 1rem}
.post__img{width:100%;margin:2.5rem 0;box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
.post__body{color:var(--ink2)}
.post__body h2,.post__body h3{color:var(--ink);margin:2.4rem 0 1rem;font-family:var(--serif)}
.post__body h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.post__body h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.post__body a{color:var(--gold);border-bottom:1px solid var(--line)}
.post__body img{width:100%;margin:2rem 0}
.post__body blockquote{margin:2rem 0;padding-left:1.6rem;border-left:2px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--ink)}
.post__body figcaption{font-size:.8rem;color:var(--ink2);text-align:center;margin-top:.6rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2.5rem}
.pcard img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:1.2rem;
  transition:transform 1.2s var(--slow)}
.pcard a{display:block;overflow:hidden}
.pcard a:hover img{transform:scale(1.05)}
.pcard h3{margin-bottom:.7rem}
.pcard .lbl{margin-top:.8rem}
.pagination{display:flex;gap:1.5rem;justify-content:center;margin-top:3.5rem;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.pagination a{color:var(--ink)}

/* ══════════════ KOENIG EDITOR CARDS ══════════════
   Required by Ghost so content cards render correctly. */
.kg-card{margin:2.4rem 0}
.kg-width-wide{position:relative;width:75vw;max-width:1100px;left:50%;transform:translateX(-50%)}
.kg-width-full{position:relative;width:100vw;max-width:100vw;left:50%;transform:translateX(-50%)}
.kg-width-full img,.kg-width-wide img{width:100%}
.kg-image-card figcaption,.kg-gallery-card figcaption,.kg-embed-card figcaption{
  font-size:.82rem;color:var(--ink2);text-align:center;margin-top:.7rem}
.kg-image{margin-inline:auto}
.kg-gallery-container{display:flex;flex-direction:column;margin-inline:auto}
.kg-gallery-row{display:flex;flex-direction:row;justify-content:center}
.kg-gallery-row:not(:first-of-type){margin:.6rem 0 0}
.kg-gallery-image:not(:first-of-type){margin:0 0 0 .6rem}
.kg-gallery-image img{width:100%;height:100%}
.kg-embed-card{display:flex;flex-direction:column;align-items:center;width:100%}
.kg-embed-card iframe{max-width:100%}
.kg-bookmark-card,.kg-bookmark-publisher{position:relative;width:100%}
.kg-bookmark-container{display:flex;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
.kg-bookmark-content{flex-basis:0;flex-grow:999;padding:1.2rem 1.4rem;order:1}
.kg-bookmark-title{font-weight:400;font-family:var(--serif);font-size:1.25rem}
.kg-bookmark-description{margin-top:.4rem;color:var(--ink2);font-size:.9rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kg-bookmark-metadata{display:flex;align-items:center;margin-top:.9rem;font-size:.8rem;color:var(--ink2)}
.kg-bookmark-icon{width:18px;height:18px;margin-right:.5rem}
.kg-bookmark-thumbnail{flex-basis:20rem;flex-grow:1;order:2}
.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover}
.kg-callout-card{display:flex;gap:.8rem;padding:1.2rem 1.4rem;border-radius:2px;
  background:var(--bg2);border:1px solid var(--line)}
.kg-callout-emoji{font-size:1.2rem}
.kg-toggle-card{border:1px solid var(--line);border-radius:2px;padding:1.2rem 1.4rem}
.kg-toggle-heading{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.kg-toggle-heading-text{font-family:var(--serif);font-size:1.2rem;margin:0}
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{display:none}
.kg-button-card{display:flex;justify-content:center}
.kg-btn{display:inline-flex;align-items:center;padding:1.1em 2.4em;border:1px solid var(--gold);
  background:var(--gold);color:var(--onGold);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase}
.kg-header-card{padding:3rem 1.5rem;text-align:center}
.kg-product-card,.kg-nft-card,.kg-video-card,.kg-audio-card{margin:2.4rem 0}
.kg-video-card video,.kg-audio-card audio{width:100%}

/* ══════════════ SUBPAGES (gallery · etiquette · contact) ══════════════ */
.subpage{padding:calc(clamp(4rem,10vh,7rem) + 78px) 0 clamp(4rem,10vh,7rem)}
.subhd{max-width:760px;margin-bottom:clamp(2.5rem,7vh,4.5rem)}
.subhd h1{margin:1.3rem 0 1.4rem}
.subfoot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
  margin-top:clamp(3rem,8vh,5.5rem);padding-top:2.5rem;border-top:1px solid var(--line)}

/* ── gallery wall ── */
.gwall{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.gtile{all:unset;cursor:zoom-in;display:block;position:relative;overflow:hidden;
  grid-column:span 1;background:var(--bg2)}
.gtile--wide{grid-column:span 2}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--slow),opacity .6s var(--ease)}
.gtile:hover img{transform:scale(1.05)}
.gtile::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;
  transition:opacity .4s var(--ease);pointer-events:none}
.gtile:hover::after{opacity:.1}
.gtile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:900px){.gwall{grid-template-columns:repeat(2,1fr)}.gtile--wide{grid-column:span 2}}
@media(max-width:520px){.gwall{grid-template-columns:1fr;gap:.8rem}.gtile--wide{grid-column:span 1}}

/* ── lightbox ── */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,6,5,.95);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,5vw,4rem)}
.lb.open{display:flex}
.lb__img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.lb__x{position:absolute;top:1.4rem;right:1.6rem;all:unset;cursor:pointer;color:#F6F0E7;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;padding:.7rem}
.lb__nav{all:unset;cursor:pointer;color:#F6F0E7;font-size:2.6rem;line-height:1;padding:1rem 1.2rem;
  opacity:.55;transition:opacity .3s var(--ease)}
.lb__nav:hover{opacity:1}
.lb__x:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:640px){.lb__nav{position:absolute;bottom:1.2rem}.lb__prev{left:1rem}.lb__next{right:1rem}}

/* ── etiquette ── */
.etq{display:grid;grid-template-columns:220px minmax(0,760px);gap:clamp(2rem,5vw,5rem);align-items:start}
.etq__nav{position:sticky;top:110px;display:flex;flex-direction:column;gap:.1rem}
.etq__nav a{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);
  padding:.7rem 1rem;border-left:1px solid var(--line);transition:all .3s var(--ease)}
.etq__nav a:hover{color:var(--ink);border-left-color:var(--gold);background:var(--bg2)}
.etq__block{padding-bottom:clamp(2rem,5vh,3rem);margin-bottom:clamp(2rem,5vh,3rem);
  border-bottom:1px solid var(--line);scroll-margin-top:110px}
.etq__block h2{margin-bottom:1.2rem}
.etq__block:last-child{border-bottom:0}
.etq__fig{margin:0 0 clamp(2rem,5vh,3rem)}
.etq__fig img{width:100%;box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
.ticks{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li{position:relative;padding-left:1.8rem;margin-bottom:.6rem}
.ticks li::before{content:"";position:absolute;left:0;top:.85em;width:10px;height:1px;background:var(--gold)}
@media(max-width:900px){
  .etq{grid-template-columns:1fr}
  .etq__nav{position:static;flex-direction:row;flex-wrap:wrap;gap:.4rem;margin-bottom:2.5rem}
  .etq__nav a{border-left:0;border:1px solid var(--line);border-radius:99px;padding:.5rem 1rem}
}

/* ── contact ── */
.cform{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.cform__side img{width:100%;box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
.cnote{margin-top:2rem;padding:1.4rem 1.6rem;background:var(--bg2);border-left:2px solid var(--gold)}
.cnote a{display:block;margin:.5rem 0;color:var(--gold);font-size:1.05rem}
.cnote .small{margin:0;font-size:.85rem;color:var(--ink2)}
.form{display:grid;gap:1.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.field > label,.label-as{display:block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:.7rem}
.req{color:var(--gold)}
.field input,.field textarea,.field select{width:100%;font-family:var(--sans);font-size:1rem;
  font-weight:300;color:var(--ink);background:var(--bg2);border:1px solid var(--line);
  border-radius:2px;padding:1rem 1.15rem;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{min-height:150px;resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.field input.err,.field textarea.err,.field select.err{border-color:#C0524F}
.hint{display:block;font-size:.82rem;color:var(--ink2);margin-top:.5rem}
.opts{display:grid;gap:.6rem}
.opt{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;
  padding:1.05rem 1.25rem;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  background:var(--bg2);transition:all .3s var(--ease)}
.opt:hover{border-color:var(--ink2)}
.opt input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;padding:0;
  flex:none;border-radius:50%;border:1px solid var(--ink2);background:transparent;
  display:grid;place-items:center;transition:border-color .25s var(--ease)}
.opt input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);
  transform:scale(0);transition:transform .22s var(--slow)}
.opt input:checked{border-color:var(--gold)}
.opt input:checked::after{transform:scale(1)}
.opt:has(input:checked){border-color:var(--gold)}
.opt__t{display:block;font-family:var(--sans);font-size:1rem;font-weight:300;line-height:1.45;
  letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.opt__s{display:block;font-size:.85rem;line-height:1.4;color:var(--ink2);
  letter-spacing:0;text-transform:none;margin-top:.2rem}
.success{display:none;padding:clamp(2.5rem,6vh,4rem);border:1px solid var(--gold);
  background:var(--bg2);text-align:center}
.success[data-on]{display:block}
.success h2{margin-bottom:1rem}
.success .b{margin-top:1rem}
@media(max-width:900px){.cform{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

/* ── footer: verified & listed ── */
.ft__verify{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 2.4rem;
  padding:1.8rem 0;margin-top:.5rem;border-top:1px solid var(--line)}
.ft__verify .lbl{margin-right:.4rem}
.ft__verify a{display:inline-flex;align-items:center;gap:.65rem;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);
  transition:color .35s var(--ease)}
.ft__verify a:hover{color:var(--ink)}
.ft__verify a i{width:5px;height:5px;border-radius:99px;background:var(--gold);flex:none}
.ft__verify a::after{content:"↗";margin-left:.15rem;font-size:.85em;opacity:.5;
  transition:transform .35s var(--slow),opacity .35s var(--ease)}
.ft__verify a:hover::after{opacity:1;transform:translate(2px,-2px)}
@media(max-width:560px){.ft__verify{flex-direction:column;align-items:flex-start;gap:.9rem}}

/* ══════════════ HEDONISM x2 (duo) ══════════════ */
.subhd--wide{max-width:940px}
.subhd--wide h1{line-height:1.06}
.duo__hd{margin:clamp(1rem,3vh,2rem) 0 clamp(1.5rem,4vh,2.5rem);
  padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
.duo__card{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);
  overflow:hidden;transition:border-color .4s var(--ease),transform .5s var(--slow)}
.duo__card:hover{border-color:var(--gold);transform:translateY(-3px)}
.duo__card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__slot{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--bg2)}
.duo__slot::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 28% 18%,color-mix(in srgb,var(--gold) 26%,transparent) 0%,transparent 60%),
             radial-gradient(70% 70% at 78% 86%,color-mix(in srgb,var(--ink) 40%,transparent) 0%,transparent 62%),
             linear-gradient(155deg,var(--bg2),var(--bg))}
.duo__slot::after{content:"Photo to come";position:absolute;left:1.2rem;bottom:1.1rem;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2);opacity:.6}
.duo__slot--b::before{background:radial-gradient(75% 65% at 76% 22%,color-mix(in srgb,var(--gold) 22%,transparent) 0%,transparent 58%),
             radial-gradient(80% 80% at 18% 88%,color-mix(in srgb,var(--ink) 45%,transparent) 0%,transparent 60%),
             linear-gradient(35deg,var(--bg),var(--bg2))}
.duo__body{padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1rem;flex:1}
.duo__body h2{margin:0}
.duo__body p{margin:0;flex:1}
.duo__body .b{align-self:flex-start;margin-top:.4rem}
.duo__note{margin-top:clamp(2.5rem,6vh,4rem);padding:1.6rem 1.8rem;
  background:var(--bg2);border-left:2px solid var(--gold)}
.duo__note p{margin:0}
@media(max-width:820px){.duo{grid-template-columns:1fr}}

/* ══════════════ ETIQUETTE: current-section indicator ══════════════ */
.etq__nav a{position:relative}
.etq__nav a::after{content:"";position:absolute;left:1rem;right:calc(100% - 1rem);bottom:.32rem;
  height:1px;background:var(--gold);transition:right .45s var(--slow)}
.etq__nav a.is-current{color:var(--ink);border-left-color:var(--gold)}
.etq__nav a.is-current::after{right:1rem}
@media(max-width:900px){
  .etq__nav a::after{left:1rem;right:calc(100% - 1rem);bottom:.3rem}
  .etq__nav a.is-current{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
}

/* ══════════════ INDULGE ME (gift list) ══════════════ */
.indulge{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.indulge__txt{max-width:640px}
.indulge__txt h1{margin:1.4rem 0 2rem}
.indulge__cta{margin-top:1.2rem}
.indulge__art img{width:100%;box-shadow:0 50px 90px -50px rgba(0,0,0,.6)}
@media(max-width:900px){
  .indulge{grid-template-columns:1fr;gap:2.5rem}
  .indulge__art{order:-1}
}

/* ══════════════ GALLERY BANNER ══════════════ */
.gbanner{position:relative;height:clamp(380px,68vh,720px);overflow:hidden;
  display:grid;place-items:center;margin-top:78px}
.gbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.gbanner__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,9,.72) 0%,rgba(12,10,9,.3) 34%,
             rgba(12,10,9,.42) 66%,rgba(12,10,9,.86) 100%)}
.gbanner__in{position:relative;z-index:2;text-align:center;padding:0 var(--pad);max-width:900px}
.gbanner__in .lbl{color:var(--gold);margin-bottom:1.4rem}
.gbanner__in h1{color:#F6F0E7;text-shadow:0 2px 40px rgba(12,10,9,.55)}
.gbanner__in p{margin:1.4rem 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.5rem);color:rgba(246,240,231,.86);
  text-shadow:0 2px 24px rgba(12,10,9,.6)}
.subpage--banner{padding-top:clamp(2.5rem,6vh,4rem)}
.gwall__hint{margin:0 0 1.6rem;text-align:center;color:var(--ink2)}
@media(max-width:760px){.gbanner{height:clamp(320px,52vh,440px);margin-top:70px}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.failed{display:none;padding:clamp(2rem,5vh,3rem);border:1px solid #C0524F;
  background:color-mix(in srgb,#C0524F 10%,transparent);text-align:center}
.failed[data-on]{display:block}
.failed a{color:var(--gold)}

/* Autoplay refused (Low Power Mode, Data Saver, per-site block) — offer a tap */
.hero.film-blocked{cursor:pointer}
.hero.film-blocked .cue{display:none}
.hero.film-blocked .hero__film::before{
  content:"";position:absolute;left:50%;top:38%;z-index:4;
  width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:1px solid rgba(246,240,231,.6);background:rgba(12,10,9,.35);
  backdrop-filter:blur(4px);pointer-events:none}
.hero.film-blocked .hero__film::after{
  content:"";position:absolute;left:50%;top:38%;z-index:5;
  width:0;height:0;margin:-9px 0 0 -4px;pointer-events:none;
  border-left:15px solid rgba(246,240,231,.85);
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  box-shadow:none}

/* ── iOS fallback: an animated image, which Low Power Mode does NOT block ── */
.hero__anim{position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:142%;width:auto;max-width:none;display:none;opacity:0;
  transition:opacity .8s var(--slow)}
.hero.film-blocked .hero__anim{display:block}
.hero.film-blocked .hero__anim.on{opacity:1}
.hero.film-blocked video{visibility:hidden}
/* only offer a tap control if the animation could not load either */
.hero.film-blocked .hero__film::before,
.hero.film-blocked .hero__film::after{content:none}
.hero.film-blocked.anim-failed .hero__film::before{
  content:"";position:absolute;left:50%;top:38%;z-index:4;
  width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:1px solid rgba(246,240,231,.6);background:rgba(12,10,9,.35);pointer-events:none}
.hero.film-blocked.anim-failed .hero__film::after{
  content:"";position:absolute;left:50%;top:38%;z-index:5;
  width:0;height:0;margin:-9px 0 0 -4px;pointer-events:none;
  border-left:15px solid rgba(246,240,231,.85);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
@media(max-width:900px){
  .hero__anim{inset:0;top:0;left:0;transform:none;width:100%;height:100%;object-fit:cover}
}