@font-face{font-family:"Cloister Black";src:url(../assets/fonts/CloisterBlack.woff2) format("woff2"),url(../assets/fonts/CloisterBlack.ttf) format("truetype");font-weight:400;font-display:swap}
/* Humble & Blessed — option B "Nocturne". Black, warm stone, bone text, gold hairlines, fog. */
:root{--black:#000;--stone:#1C1A17;--stone2:#262320;--bone:#D9D2C5;--dim:#7E776B;--gold:#E9E6DF;--line:rgba(217,210,197,.14);--gline:rgba(233,230,223,.5)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--bone);font-family:"EB Garamond",Georgia,serif;font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.serif{font-family:"Cormorant Garamond",Georgia,serif}
.black{font-family:"UnifrakturCook",serif;font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.muted{color:#A69E90}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 32px;font-size:17px;font-weight:500;
  background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,0))}
.hdr .logo{font-family:"Cloister Black","UnifrakturCook",serif;font-weight:400;font-size:26px;line-height:1;color:var(--bone);display:block}
.hdr .logo .mono{height:46px;width:auto;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 6px 14px rgba(0,0,0,.9))}
.hdr .logo:hover .mono{transform:scale(1.06)}
.hdr nav{display:flex;gap:32px}
.hdr nav a{position:relative;padding:4px 0}
.hdr nav a.on::after,.hdr nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
.hdr .right{display:flex;justify-content:flex-end;gap:22px;align-items:center}
.hdr .burger{display:none;width:36px;height:36px;position:relative}
.hdr .burger::before,.hdr .burger::after{content:"";position:absolute;left:6px;right:6px;height:1px;background:var(--bone);top:14px}
.hdr .burger::after{top:22px}
.menu{position:fixed;inset:0;z-index:45;background:var(--black);display:none;flex-direction:column;justify-content:center;padding:32px}
.menu.open{display:flex}
.menu a{font-family:"UnifrakturCook",serif;font-weight:700;font-size:48px;line-height:1.2;padding:6px 0}
.menu .close{position:absolute;top:20px;right:28px;font-size:16px;padding:8px}

/* cart drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:50;background:var(--stone);border-left:1px solid var(--gline);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:baseline;padding:24px 28px;border-bottom:1px solid var(--line)}
.drawer header h2{font-family:"UnifrakturCook",serif;font-weight:700;font-size:30px}
.drawer .items{flex:1;overflow:auto;padding:12px 28px}
.drawer .item{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.drawer .item img{width:72px;height:72px;object-fit:contain;background:var(--black)}
.drawer .item .n{font-weight:500}
.drawer .item .s{color:#A69E90;font-size:15px}
.drawer .item .rm{font-size:15px;color:#A69E90;padding:4px 0}
.drawer .item .rm:hover{color:var(--gold)}
.drawer .empty{padding:40px 0;font-family:"Cormorant Garamond",serif;font-size:22px;font-style:italic;color:var(--dim)}
.drawer footer{padding:20px 28px 28px;border-top:1px solid var(--line)}
.drawer .total{display:flex;justify-content:space-between;font-size:16px;margin-bottom:16px}
.scrim{position:fixed;inset:0;z-index:48;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.on{opacity:1;pointer-events:auto}

/* buttons */
.btn{display:inline-block;padding:15px 28px;border:1px solid var(--gold);color:var(--gold);font-size:17px;font-weight:500;text-align:center;transition:background .2s,color .2s}
.btn:hover{background:var(--gold);color:var(--black)}
.btn.solid{background:var(--gold);color:var(--black)}
.btn.solid:hover{background:transparent;color:var(--gold)}
.btn.wide{display:block;width:100%}

/* fixed cinematic stage behind the home page */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;--p:0;--mx:0;--my:0}
#fog{position:absolute;inset:-6%;width:112%;height:112%;display:block;z-index:0;transform:translate(calc(var(--mx)*-30px),calc(var(--my)*-16px))}
.shaft{position:absolute;z-index:1;left:50%;top:-10%;width:34vw;height:120vh;transform:translateX(-50%) rotate(8deg);transform-origin:top center;
  background:linear-gradient(to bottom,rgba(240,236,228,.22),rgba(240,236,228,.05) 55%,rgba(240,236,228,0));filter:blur(28px);mix-blend-mode:screen;pointer-events:none;
  animation:breathe 11s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(calc(-50% + var(--mx)*-14px)) rotate(8deg)}50%{opacity:1.15;transform:translateX(calc(-52% + var(--mx)*-14px)) rotate(6deg)}}
#dust{position:absolute;inset:-6%;width:112%;height:112%;display:block;pointer-events:none;z-index:2;transform:translate(calc(var(--mx)*-22px),calc(var(--my)*-12px))}
/* marble wordmark behind the cherub: same ivory stone and grey veining as the 3D model, lit from the top front */
.wm{position:absolute;z-index:3;left:0;right:0;top:19vh;text-align:center;pointer-events:none;
  transform:translate(calc(var(--mx)*-10px),calc(var(--my)*-6px)) translateY(calc(var(--p)*-10vh));opacity:calc(1 - var(--p)*.8);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.85)) drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.wm span{display:inline-block;font-family:"Cloister Black","UnifrakturCook",serif;font-weight:400;font-size:var(--wm,13vw);line-height:1;white-space:nowrap;
  color:#cfc9bd;background:
    linear-gradient(to bottom,rgba(255,255,255,.18),rgba(255,255,255,0) 35%,rgba(40,36,30,.32) 100%),
    radial-gradient(70% 100% at 50% 15%,rgba(255,255,255,.1),rgba(0,0,0,.14)),
    url(../assets/marble-ivory.webp) center/cover;
  background-blend-mode:normal,multiply,normal;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.loading .wm{animation:fade 2s .4s both}
.cherub{position:absolute;z-index:3;left:50%;top:50%;height:min(86vh,110vw);aspect-ratio:2/3;
  transform:perspective(1000px) translate(calc(-50% + var(--mx)*18px),calc(-50% + var(--my)*10px)) translateY(calc(var(--p)*-18vh)) rotateY(calc(var(--mx)*7deg)) rotateX(calc(var(--my)*-4deg)) scale(calc(1 + var(--p)*.12));will-change:transform;
  opacity:calc(1 - var(--p)*.72)}
.pool{position:absolute;z-index:2;left:50%;bottom:6vh;width:58vh;height:9vh;transform:translateX(calc(-50% + var(--mx)*-20px)) translateY(calc(var(--p)*-18vh));border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,0));filter:blur(10px);opacity:calc(1 - var(--p)*.9);pointer-events:none}
body.loading .pool{animation:fade 1.6s .6s both}
.cherub3d{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity 1.2s ease;
  transform:translateY(calc(var(--p)*-14vh))}
.cherub3d:active{cursor:grabbing}
body.has3d .cherub3d{opacity:calc(1 - var(--p)*.75)}
/* 2D cutout only shows when 3D is not being tried, or when it failed */
html.try3d:not(.no3d) .stage .cherub,html.try3d:not(.no3d) .stage .pool{visibility:hidden}
html.no3d .stage .cherub,html.no3d .stage .pool{visibility:visible;animation:fade 1.4s ease both}
html.no3d .cherub3d{display:none}
.cherub img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(calc(var(--mx)*-14px) 34px 26px rgba(0,0,0,.9)) drop-shadow(calc(var(--mx)*-30px) 90px 80px rgba(0,0,0,.75))}
.cherub .sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:url(../assets/cherub-marble.png) center/contain no-repeat;mask:url(../assets/cherub-marble.png) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 42%,rgba(255,248,232,.38) 50%,transparent 58%);background-size:300% 100%;background-position:120% 0;
  animation:sheen 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sheen{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}
.vignette{position:absolute;z-index:2;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(0,0,0,0),rgba(0,0,0,.85) 100%);pointer-events:none}
@keyframes in{from{opacity:0;transform:perspective(1000px) translate(-50%,-50%) translateY(40px) scale(.95)}to{opacity:1;transform:perspective(1000px) translate(-50%,-50%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
body.loading .cherub{animation:in 2.2s cubic-bezier(.2,.8,.2,1) both}
body.loading .hero p,body.loading .hdr{animation:fade 1.2s 1.4s both}
main{position:relative;z-index:1}

.hero{height:100vh;min-height:640px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:40px;text-align:center}
.hero p{font-size:16px;color:#A69E90}
.hero p b{display:block;color:var(--bone);font-weight:500;font-size:17px;margin-bottom:4px}

.motto{padding:20vh 32px 24vh;text-align:center}
.motto .line{font-family:"UnifrakturCook",serif;font-weight:700;font-size:clamp(56px,11vw,160px);line-height:1;color:#2A2622;transition:color .6s,text-shadow .6s}
.motto .line.lit{color:var(--bone);text-shadow:0 10px 22px rgba(0,0,0,.9),0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(233,230,223,.25)}
.motto .line.gold.lit{color:var(--gold)}

/* solid sections sit on black so the stage stays behind the hero only */
.solid{background:var(--black);position:relative}
.section{padding:12vh 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:40px}
.section-head h2{font-family:"UnifrakturCook",serif;font-weight:700;font-size:clamp(32px,4vw,56px);line-height:1}
.section-head a{font-size:16px;font-weight:500;color:var(--gold);border-bottom:1px solid var(--gline);padding-bottom:2px}

/* product grid with gold hairline frames */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{display:block}
.card .ph{position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;perspective:900px;background:radial-gradient(60% 60% at 50% 60%,#171411,#000)}
.card .ph::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);transition:inset .5s,border-color .5s}
.card:hover .ph::before{inset:4px;border-color:var(--gline)}
.card .ph img{width:76%;transition:transform .6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 20px 24px rgba(0,0,0,.8))}
.card:hover .ph img{transform:rotateY(-10deg) rotateX(5deg) translateZ(20px)}
.card .meta{display:flex;justify-content:space-between;padding:12px 0 0;font-size:17px}
.card .meta .c{color:var(--gold)}
.filters{display:flex;gap:22px;margin-bottom:32px;font-size:17px;flex-wrap:wrap}
.filters button{padding:6px 0;border-bottom:1px solid transparent;color:var(--dim)}
.filters button.on{border-bottom-color:var(--gold);color:var(--bone)}

/* lookbook */
.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.look img{width:100%;aspect-ratio:2/3;object-fit:cover;filter:contrast(1.08) saturate(.85)}
.look.eng img{object-fit:contain;padding:10%;filter:none;opacity:.85}
.look figcaption{margin-top:10px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:17px;color:var(--dim)}
.looks.big{grid-template-columns:repeat(2,1fr);gap:40px}
.looks.big .look:nth-child(3n){grid-column:span 2}
.looks.big .look:nth-child(3n) img{aspect-ratio:16/9}

/* about panel */
.about{padding:0 0 12vh;display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:center}
.about > div{max-width:520px;background:var(--stone);padding:48px;border:1px solid var(--line)}
.about-art{position:relative;margin:0;--reveal:0%;
  transform:translate(calc(var(--mx,0)*-10px),calc(var(--my,0)*-6px));transition:transform .4s ease-out}
.about-art .cupid3d{display:none;width:100%;aspect-ratio:4/3;cursor:grab;touch-action:pan-y}
html.try3d:not(.no3d) .about-art .cupid3d{display:block}
.about-art.has3d .cupid3d{animation:fade 1.2s ease both}
.about-art.has3d img{display:none}
.about-art.has3d::after{inset:auto 22% 10% 22%;height:10%}
html.try3d:not(.no3d) .about-art:not(.has3d) img{position:absolute;inset:0;opacity:0}
.about-art img{width:100%;display:block;opacity:.9;animation:float 7s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(105deg,#000 var(--reveal),transparent calc(var(--reveal) + 22%));mask-image:linear-gradient(105deg,#000 var(--reveal),transparent calc(var(--reveal) + 22%))}
.about-art::after{content:"";position:absolute;inset:auto 10% -6% 10%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(233,230,223,.18),rgba(233,230,223,0));filter:blur(8px);animation:floatShadow 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes floatShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.85);opacity:.6}}
.about h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:38px;line-height:1.1;margin-bottom:20px}
.about p{font-family:"Cormorant Garamond",serif;font-size:20px;line-height:1.5;color:#B9B1A3}
.about p+p{margin-top:1em}

/* countdown */
.drop2{border-top:1px solid var(--gline);border-bottom:1px solid var(--gline);padding:10vh 0}
.drop2 .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.drop2 h2{font-family:"UnifrakturCook",serif;font-weight:700;font-size:clamp(36px,5vw,72px);line-height:1;color:var(--gold)}
.drop2 .count{display:flex;gap:32px;font-family:"Cormorant Garamond",serif}
.drop2 .count b{display:block;font-weight:400;font-size:clamp(40px,5vw,72px);line-height:1}
.drop2 .count span{font-size:15px;color:#A69E90}
.drop2 form{display:flex;border-bottom:1px solid var(--bone);max-width:420px;margin-top:28px}
.drop2 input{flex:1;background:none;border:0;color:var(--bone);font:inherit;padding:12px 0}
.drop2 input::placeholder{color:var(--dim)}
.drop2 button{color:var(--gold);padding:12px 0 12px 16px;font-size:17px;font-weight:500}

/* product page */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;padding-top:120px}
.pdp .gallery{position:sticky;top:100px;aspect-ratio:1;display:grid;place-items:center;perspective:1000px;background:radial-gradient(60% 60% at 50% 60%,#171411,#000)}
.pdp .gallery::before{content:"";position:absolute;inset:12px;border:1px solid var(--gline)}
.pdp .gallery img{width:74%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.8));transition:transform .5s}
.pdp .gallery:hover img{transform:rotateY(-10deg) rotateX(6deg)}
.pdp h1{font-family:"UnifrakturCook",serif;font-weight:700;font-size:clamp(34px,4.2vw,56px);line-height:1}
.pdp .price{font-family:"Cormorant Garamond",serif;font-size:26px;margin:10px 0 24px;color:var(--gold)}
.pdp .blurb{font-family:"Cormorant Garamond",serif;font-size:20px;max-width:40ch;color:#B9B1A3;margin-bottom:28px}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 24px}
.sizes button{min-width:52px;padding:12px 14px;border:1px solid var(--line)}
.sizes button.on{border-color:var(--gold);color:var(--gold)}
.label{font-size:15px;color:#A69E90}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-size:17px;font-weight:500}
summary::after{content:"+";font-family:"Cormorant Garamond",serif;font-size:22px;line-height:1;color:var(--gold)}
details[open] summary::after{content:"–"}
details ul{margin-top:12px;padding-left:18px;font-family:"Cormorant Garamond",serif;font-size:18px;color:#B9B1A3}
.added{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:18px;margin-top:12px;min-height:1.4em;color:var(--dim)}

/* page titles, about page */
.page-head{padding:160px 0 40px}
.page-head h1{font-family:"UnifrakturCook",serif;font-weight:700;font-size:clamp(40px,6vw,96px);line-height:1}
.page-head p{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:20px;color:var(--dim);margin-top:10px}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.about-cols p{font-family:"Cormorant Garamond",serif;font-size:22px;line-height:1.45;color:#B9B1A3;max-width:40ch}
.about-cols p+p{margin-top:1em}
.timeline{border-top:1px solid var(--line)}
.timeline li{list-style:none;display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);font-family:"Cormorant Garamond",serif;font-size:20px}
.timeline li b{font-weight:400;color:var(--gold)}
.founder{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;margin-top:10vh}
.founder .pic{aspect-ratio:1;border-radius:50%;background:var(--stone) url(../assets/logo-circle.png) center/cover;outline:1px solid var(--gline);outline-offset:8px}

/* footer */
.ftr{border-top:1px solid var(--line);padding:48px 0 32px;font-size:16px;color:#A69E90;background:var(--black);position:relative;z-index:1}
.ftr .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.ftr .cols .mono{height:72px;width:auto;margin-bottom:14px;opacity:.95}
.ftr .cols .logo{font-family:"Cloister Black","UnifrakturCook",serif;font-weight:400;font-size:28px;color:var(--bone)}
.ftr .cols a{display:block;color:var(--bone);padding:3px 0}
.ftr .cols h4{font-weight:600;color:var(--gold);margin-bottom:8px;font-size:16px}
.ftr .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ftr .base a{color:var(--bone)}

/* ---------- finish ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .36s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.look{overflow:hidden}
.look img{will-change:transform;transition:none}
.cart-btn.bump{animation:bump .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bump{30%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

@media (max-width:920px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .looks{grid-template-columns:1fr 1fr}
  .drop2 .wrap,.pdp,.about-cols,.founder{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .hdr{grid-template-columns:auto 1fr auto;padding:16px 20px}
  .hdr nav{display:none}
  .hdr .burger{display:block}
  .motto .line{font-size:15vw}
  .about{grid-template-columns:1fr}
  .about > div{padding:32px}
  .looks{grid-template-columns:1fr}
  .looks.big .look:nth-child(3n){grid-column:auto}
  .looks.big .look:nth-child(3n) img{aspect-ratio:2/3}
  .pdp .gallery{position:static}
  .drop2 .count{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  body.loading *{animation:none!important}
  .shaft,.cherub .sheen,.about-art img,.about-art::after{animation:none!important}
    .about-art img{-webkit-mask-image:none;mask-image:none}
  #dust{display:none}
  .cherub{transform:translate(-50%,-50%)!important;opacity:1!important}
  .motto .line{color:var(--bone)}
  *{transition:none!important}
}