:root{
  --bone:#F4F2EF; --white:#FFFFFF; --band:#E9E6E1;
  --ink:#111110; --mid:#6E6B66; --line:#D8D4CE;
  --serif:'Instrument Serif',serif; --sans:'Manrope',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.demo-note{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--mid);padding:.55rem 1rem;border-bottom:1px solid var(--line)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:baseline;gap:2.5rem;padding:1.1rem 2rem;background:color-mix(in srgb,var(--bone) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.wordmark{font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:.42em}
.nav-links{display:flex;gap:1.75rem}
.nav-links a,.nav-right a,.nav-right button{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:none;border:0;cursor:pointer;font-family:var(--sans);padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s}
.nav-links a:hover,.nav-right a:hover,.nav-right button:hover{border-bottom-color:var(--ink)}
.nav-right{margin-left:auto;display:flex;gap:1.75rem;align-items:baseline}
.nav-right a{color:var(--mid)}

/* ---------- hero ---------- */
.hero{position:relative;padding:3.5rem 2rem 2rem;max-width:1280px;margin:0 auto}
.hero-frame{margin-left:clamp(0px,14vw,180px);overflow:hidden}
.hero-frame img{width:100%;height:min(72vh,640px);object-fit:cover;object-position:center 45%;transform:scale(1.001);animation:heroin 1.6s cubic-bezier(.2,.6,.2,1) both}
@keyframes heroin{from{transform:scale(1.06);opacity:.4}to{transform:scale(1.001);opacity:1}}
.hero-display{position:absolute;left:2rem;bottom:22%;font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,8.5vw,7.5rem);line-height:.98;letter-spacing:-.01em;mix-blend-mode:normal}
.hero-display em{display:inline-block;padding:0 .18em;background:var(--bone)}
.hero-caption{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin:1.4rem 0 0 clamp(0px,14vw,180px);flex-wrap:wrap}
.hero-caption>span{font-size:.78rem;color:var(--mid);max-width:30rem}

.btn{display:inline-block;font:600 .68rem var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:.95rem 1.9rem;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn-solid{background:var(--ink);color:var(--bone)}
.btn-solid:hover{background:transparent;color:var(--ink)}

/* ---------- marquee band ---------- */
.band{background:var(--ink);color:var(--bone);overflow:hidden;padding:.65rem 0;margin-top:3rem}
.band-track{display:flex;gap:2.2rem;white-space:nowrap;font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;animation:slide 36s linear infinite;width:max-content}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.sec-head{max-width:1280px;margin:0 auto;padding:5.5rem 2rem 2.5rem}
.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.02}
.sec-sub{font-size:.8rem;color:var(--mid);max-width:34rem;margin-top:.8rem}
.microlabel{display:block;font-size:.64rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--mid);margin-bottom:.6rem}

/* ---------- shop grid ---------- */
.shop-grid{max-width:1280px;margin:0 auto;padding:0 2rem 4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--white);padding:1.4rem 1.4rem 1.6rem;cursor:pointer;position:relative}
.tile-img{aspect-ratio:1;overflow:hidden;margin-bottom:1.1rem}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.tile:hover .tile-img img{transform:scale(1.045)}
.tile-brand{font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
.tile-name{font-size:.92rem;font-weight:600;margin:.3rem 0 .55rem;border-bottom:1px solid transparent;display:inline-block;transition:border-color .25s}
.tile:hover .tile-name{border-bottom-color:var(--ink)}
.tile-foot{display:flex;justify-content:space-between;align-items:baseline}
.tile-price{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem}
.tile-note{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.tile-note.soon{color:var(--ink);font-weight:700}

/* ---------- lookbook ---------- */
.lookbook{background:var(--band);margin-top:2rem;padding:4.5rem 0}
.lb-head{max-width:1280px;margin:0 auto;padding:0 2rem 2rem}
.lb-grid{max-width:1280px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2rem}
.lb-grid figure:nth-child(2){transform:translateY(2.2rem)}
.lb-grid img{aspect-ratio:4/5;object-fit:cover;width:100%}
.lb-grid figcaption{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin-top:.7rem}
@media(max-width:820px){.lb-grid figure:nth-child(2){transform:none}}

/* ---------- calendar ---------- */
.cal-list{max-width:1280px;margin:0 auto;padding:0 2rem 5rem}
.cal-row{display:grid;grid-template-columns:150px 1fr auto;gap:1.5rem;align-items:baseline;padding:1.5rem 0;border-top:1px solid var(--line)}
.cal-row:last-child{border-bottom:1px solid var(--line)}
.cal-date{font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.cal-date small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);margin-top:.2rem}
.cal-what strong{font-size:.98rem;font-weight:600;display:block}
.cal-what span{font-size:.74rem;color:var(--mid)}
.cal-link{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font-family:var(--sans);transition:opacity .2s}
.cal-link:hover{opacity:.55}
@media(max-width:680px){.cal-row{grid-template-columns:1fr;gap:.4rem}}

/* ---------- stores (inverse) ---------- */
.stores{background:var(--ink);color:var(--bone)}
.stores-inner{max-width:1280px;margin:0 auto;padding:5.5rem 2rem}
.sec-title.inverse{color:var(--bone);margin-bottom:2.5rem}
.store-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:3rem}
.store-cols .microlabel{color:#8d8a84}
.store-cols strong{font-size:.95rem;letter-spacing:.04em}
.store-cols p{font-size:.78rem;color:#b5b2ac;margin-top:.5rem}
.store-cols a{border-bottom:1px solid #55534f}
.stores-media img{width:100%;height:min(52vh,460px);object-fit:cover;object-position:center 30%}
.stores-note{font-size:.72rem;letter-spacing:.06em;color:#8d8a84;max-width:44rem;margin-top:1.5rem}
@media(max-width:820px){.store-cols{grid-template-columns:1fr}}

/* ---------- hero ctas ---------- */
.hero-ctas{display:flex;gap:.6rem;flex-wrap:wrap}

/* ---------- contact ---------- */
.contact{background:var(--band)}
.contact-inner{max-width:720px;margin:0 auto;padding:5rem 2rem;text-align:center}
.contact .sec-sub{margin:.8rem auto 1.8rem}
.want-form{display:grid;grid-template-columns:1fr;gap:.5rem;max-width:480px;margin:0 auto}
.want-form input{border:1px solid var(--line);background:var(--white);padding:.9rem 1rem;font:inherit;font-size:.9rem}
.want-form input:focus{outline:none;border-color:var(--ink)}
.contact-alt{margin-top:1.4rem;font-size:.76rem;color:var(--mid)}
.contact-alt a{border-bottom:1px solid var(--mid);padding-bottom:1px}
.want-done{font-family:var(--serif);font-size:1.6rem;margin-top:1rem}

/* ---------- lookbook caption links ---------- */
.lb-grid figcaption a{border-bottom:1px solid var(--mid);padding-bottom:1px}
.lb-grid figcaption a:hover{color:var(--ink)}

/* ---------- restock capture ---------- */
.restock{border:1px solid var(--line);background:var(--bone);padding:.9rem;margin:-.6rem 0 1.4rem}
.restock p{font-size:.74rem;color:var(--mid);margin-bottom:.6rem}
.restock .alert-form{margin-top:0}

/* ---------- footer ---------- */
.footer{text-align:center;padding:4rem 2rem 3rem;font-size:.74rem;color:var(--mid)}
.footer .wordmark{display:block;margin-bottom:1rem}
.credit{margin-top:1.2rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}

/* ---------- sheet (product / staff / notify) ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(17,17,16,.32);z-index:100;display:flex;justify-content:flex-end}
.sheet-backdrop[hidden],.toast[hidden]{display:none}
.sheet{background:var(--white);width:min(480px,100%);height:100%;overflow-y:auto;padding:2.2rem;animation:sheetin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes sheetin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:640px){
  .sheet-backdrop{align-items:flex-end}
  .sheet{width:100%;height:auto;max-height:92vh;animation-name:sheetup}
  @keyframes sheetup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
.sheet .close-x{float:right;background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--mid);line-height:1}
.sheet .s-img{aspect-ratio:1;overflow:hidden;margin:1.2rem 0 1.4rem}
.sheet .s-img img{width:100%;height:100%;object-fit:cover}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:1.8rem;line-height:1.05}
.sheet .s-price{font-variant-numeric:tabular-nums;font-weight:600;margin:.5rem 0 1.4rem}
.size-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-bottom:1.4rem}
.size-btn{border:1px solid var(--line);background:var(--white);padding:.65rem 0;font:600 .8rem var(--sans);cursor:pointer;transition:all .2s}
.size-btn:hover:not(:disabled){border-color:var(--ink)}
.size-btn.sel{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.size-btn:disabled{color:var(--line);cursor:not-allowed;text-decoration:line-through}
.fulfil{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:1.4rem}
.fulfil button{border:1px solid var(--line);background:var(--white);padding:.85rem .6rem;font:600 .66rem var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .2s}
.fulfil button small{display:block;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--mid);margin-top:.25rem;font-size:.68rem}
.fulfil button.sel{border-color:var(--ink)}
.sheet .btn{width:100%;text-align:center}
.pay-row{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:1rem;font-size:.58rem;color:var(--mid);letter-spacing:.12em}
.pay-row span{border:1px solid var(--line);padding:.2rem .55rem}
.yours{text-align:center;padding:3rem 0}
.yours h3{font-size:2.6rem}
.yours p{font-size:.82rem;color:var(--mid);margin-top:.6rem}
.yours .order-no{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.yours .rule{width:36px;height:1px;background:var(--ink);margin:1.4rem auto}
.staff-table{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:1.2rem}
.staff-table th{text-align:left;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);padding:.5rem .4rem;border-bottom:1px solid var(--ink)}
.staff-table td{padding:.65rem .4rem;border-bottom:1px solid var(--line)}
.alert-form{display:flex;gap:.5rem;margin-top:1.2rem}
.alert-form input{flex:1;border:1px solid var(--line);padding:.8rem .9rem;font:inherit;font-size:.85rem;background:var(--white)}
.alert-form input:focus{outline:none;border-color:var(--ink)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bone);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.8rem 1.6rem;z-index:200}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

@media(max-width:820px){
  .nav{gap:1.2rem;padding:1rem 1.25rem}
  .nav-links{display:none}
  .hero{padding:2rem 1.25rem 1.5rem}
  .hero-frame{margin-left:0}
  .hero-display{left:1.25rem;bottom:18%}
  .hero-caption{margin-left:0}
  .sec-head,.shop-grid,.cal-list,.lb-head,.lb-grid,.stores-inner{padding-left:1.25rem;padding-right:1.25rem}
}