:root{
  --canvas:#e8d9d4;
  --panel:#dcc9c2;
  --accent:#a60042;
  --accent-hover:#7f0032;
  --accent-muted:#c45a7e;
  --text-secondary:#5c4a4e;
  --text-primary:#1a1416;
  --tshadow:0 1px 0 rgba(0,0,0,.35),0 8px 28px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:Manrope,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit}
.skip{
  position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.75rem 1rem;z-index:100;
}
.skip:focus{left:1rem;top:1rem}
.accent{color:var(--accent)}
.mono{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.atmosphere{
  pointer-events:none;position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 45% at 12% 8%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 40% at 90% 30%, color-mix(in srgb,var(--accent) 6%, transparent), transparent 50%),
    var(--canvas);
  animation:wash 90s ease-in-out infinite alternate;
}
@keyframes wash{to{transform:scale(1.03) translate(-1%,1%)}}

.site-header{
  position:fixed;inset:0 0 auto;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem 1.25rem;
  background:color-mix(in srgb,var(--canvas) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--text-primary) 8%, transparent);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--font-display);font-size:1.35rem;letter-spacing:.04em}
.brand img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:transparent}
.nav-desktop{display:flex;gap:1.25rem}
.nav-desktop a{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--text-secondary);
}
.nav-desktop a:hover{color:var(--accent)}
.menu-btn{
  display:none;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  border:0;background:transparent;cursor:pointer;padding:.4rem .7rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}
.menu-btn:hover{color:var(--accent)}

.hero{height:800vh;position:relative}
@media (max-width:820px){.hero{height:420vh}}
.hero-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.hero-stage{position:relative;height:100%;background:#2a1c1e;color:#f6ece8}
.poster{
  position:absolute;inset:0;
  background:center/cover no-repeat;
  transition:opacity .5s ease;
}
#hero{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:translateZ(0);will-change:transform;
  transition:opacity .45s ease;
}
.hero-stage.video-ready #hero{opacity:1}
.hero-stage.video-ready .poster{opacity:0}
.hero-stage.video-failed .ring{display:none}
.ring{
  position:absolute;right:1.25rem;bottom:1.25rem;width:42px;height:42px;
  color:rgba(255,255,255,.75);opacity:.9;
}
.hero-stage.video-ready .ring{opacity:0;pointer-events:none}

.band{
  position:absolute;left:6%;top:42%;max-width:min(18ch,42vw);
  opacity:0;pointer-events:none;
  text-shadow:var(--tshadow);
  transition:none;
}
.band::before{
  content:"";position:absolute;inset:-18% -10%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 35% 50%,rgba(5,5,10,.68) 0%,rgba(5,5,10,.42) 46%,rgba(5,5,10,0) 76%);
}
.band .kicker{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-muted);margin:0 0 .6rem;
}
.band .line{
  font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:1.05;margin:0;font-weight:600;
}
.band .sub{margin:.8rem 0 0;max-width:28ch;color:rgba(246,236,232,.78)}
.band.settle{top:auto;bottom:14%;left:6%;pointer-events:auto}
.band .btn{margin-top:1.1rem;text-shadow:none}

.static-hero{
  position:absolute;inset:0;display:grid;place-content:end start;
  padding:0 6% 14%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2));
}
.static-hero[hidden]{display:none !important}
.static-logo{margin-bottom:1rem;border-radius:50%}
.static-hero h1{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4rem);line-height:1.05;margin:0;max-width:16ch}
.static-hero p{max-width:34ch;color:rgba(255,255,255,.78)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.95rem 1.35rem;transition:background .2s ease;
}
.btn:hover{background:var(--accent-hover)}
@media (pointer:coarse){.btn{min-height:44px}}

.section{padding:5rem 1.25rem;max-width:70rem;margin:0 auto}
.section h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);margin:.4rem 0 0;max-width:16ch;line-height:1.1}
.lede{color:var(--text-secondary);max-width:42ch}

.fits .fit-row{display:grid;gap:.75rem;margin-top:2rem}
@media (min-width:800px){.fits .fit-row{grid-template-columns:repeat(3,1fr)}}
.fits article{
  background:var(--text-primary);color:var(--canvas);padding:1.4rem 1.2rem;min-height:8.5rem;
}
.fits h3{font-family:var(--font-display);font-size:1.7rem;margin:0}
.fits p{margin:.45rem 0 0;color:rgba(255,255,255,.7)}

.shop-head{display:flex;justify-content:space-between;align-items:end;gap:1rem}
.shop .mark{border-radius:50%;opacity:.9}
.grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;margin-top:2rem;
}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:1.4rem}}
.card{
  display:block;width:100%;text-align:left;border:0;background:transparent;color:inherit;
  font:inherit;padding:0;cursor:pointer;transition:transform .35s ease;
}
.card img{aspect-ratio:3/4;object-fit:cover;background:var(--panel);width:100%}
.card h3{font-family:var(--font-display);font-size:1.35rem;margin:.85rem 0 0}
.card .meta{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.card:hover{transform:translateY(-3px)}

.why{background:var(--text-primary);color:var(--canvas);max-width:none;padding-left:0;padding-right:0}
.why > *{max-width:70rem;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}
.why ol{list-style:none;padding:0;margin:2.5rem auto 0;display:grid;gap:1.5rem;max-width:70rem}
@media (min-width:800px){.why ol{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.why li{border-top:1px solid rgba(255,255,255,.15);padding-top:1rem}
.why strong{display:block;font-family:var(--font-display);font-size:1.5rem;margin:.5rem 0}
.why p{margin:0;color:rgba(255,255,255,.65);max-width:28ch}

.table-wrap{overflow-x:auto;margin-top:1.5rem;border:1px solid color-mix(in srgb,var(--text-primary) 12%, transparent)}
table{width:100%;border-collapse:collapse;min-width:28rem}
th,td{padding:.85rem 1rem;text-align:left;border-top:1px solid color-mix(in srgb,var(--text-primary) 8%, transparent)}
th{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;background:var(--panel);color:var(--text-secondary)}
td:first-child{font-family:var(--font-display);font-size:1.2rem}

.faq details{border-top:1px solid color-mix(in srgb,var(--text-primary) 10%, transparent);padding:1rem 0}
.faq details:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--text-primary) 10%, transparent)}
.faq summary{cursor:pointer;font-family:var(--font-display);font-size:1.4rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--text-secondary);max-width:48ch}
.draw-line{width:min(12rem,40%);height:2px;margin:1rem 0 1.5rem;overflow:visible}
.draw-line path{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:200;stroke-dashoffset:200}
.faq.in-view .draw-line path{animation:draw 1.1s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.cta{text-align:center}
.cta img{margin:0 auto 1rem;border-radius:50%}
.cta h2{margin-inline:auto}
.cta > p{margin:.75rem auto 0;color:var(--text-secondary);max-width:36ch}
.contact{max-width:28rem;margin:1.75rem auto 0;text-align:left;display:grid;gap:.9rem}
.contact label{display:grid;gap:.4rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.contact input,.contact textarea{
  font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--text-primary);
  border:1px solid color-mix(in srgb,var(--text-primary) 20%, transparent);
  background:transparent;padding:.85rem 1rem;
}
.contact input:focus,.contact textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.form-note{font-size:.85rem;color:var(--text-secondary);margin:0}

.site-footer{
  background:var(--text-primary);color:var(--canvas);
  padding:2.5rem 1.25rem;display:grid;gap:1rem;justify-items:start;
}
.site-footer > div{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.4rem}
.site-footer img{border-radius:50%}
.site-footer .copy{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;opacity:.45}

.modal{
  border:0;padding:1.25rem;width:min(34rem,calc(100vw - 1.5rem));
  background:var(--canvas);color:var(--text-primary);
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.modal::backdrop{background:rgba(12,8,10,.62)}
.modal-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.modal-bar p{margin:0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.modal-close{
  border:0;background:transparent;cursor:pointer;min-height:44px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}
.nav-modal{max-width:none;width:min(28rem,100vw);height:100%;max-height:100%;margin:0 0 0 auto;border-radius:0}
.nav-sheet{display:grid;gap:.2rem;padding:.5rem 0 1.5rem}
.nav-sheet a{
  font-family:var(--font-display);font-size:2.2rem;text-decoration:none;padding:.55rem 0;
  min-height:44px;display:flex;align-items:center;
}
.product-modal{max-height:min(92vh,42rem);overflow:auto}
.product-modal img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--panel);margin-bottom:1rem}
.product-modal h2{font-family:var(--font-display);font-size:2rem;margin:0}
.product-modal .meta{margin:.4rem 0 0;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.product-modal p:not(.meta):not(.mono){color:var(--text-secondary);max-width:36ch}
.product-modal .btn{margin-top:1.25rem}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

@media (max-width:720px){
  .nav-desktop{display:none}
  .menu-btn{display:inline-flex}
  .band{max-width:78vw;left:5%}
  .brand span{font-size:1.15rem}
  .site-header{padding:.7rem .9rem}
  .section{padding:3.5rem 1rem}
  .grid{gap:.75rem}
  .card h3{font-size:1.15rem}
  .product-modal{width:calc(100vw - 1.25rem)}
  .nav-sheet a{font-size:1.85rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .atmosphere{animation:none}
  .faq.in-view .draw-line path{animation:none;stroke-dashoffset:0}
  .card{transition:none}
}