/* LGCY APPAREL — "Vault"
   Near-black ground, gold as hairline only, Bodoni Moda over Jost.
   No rounded corners anywhere. No shadows anywhere. Both are load-bearing. */

:root{
  --ground:#0E0D0B;        /* warm near-black, not #000 - the garments need somewhere to sit */
  --raise:#141311;         /* cards and image wells */
  --ivory:#F2EFE9;
  --gold:#A9884F;
  --line:rgba(242,239,233,.13);
  --line-strong:rgba(242,239,233,.26);
  --muted:rgba(242,239,233,.55);
  --faint:rgba(242,239,233,.34);
  --gutter:clamp(20px,4.6vw,64px);
  --bar:38px;
  --nav:78px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--ivory);
  font:300 14px/1.65 Jost,system-ui,sans-serif;
  letter-spacing:.012em;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}

/* ---- type ------------------------------------------------------------- */
.d{font-family:'Bodoni Moda',Didot,'Bodoni MT',serif;font-weight:400;line-height:1.02;letter-spacing:-.005em}
.d-xl{font-size:clamp(42px,6.6vw,88px)}
.d-lg{font-size:clamp(30px,3.9vw,52px)}
.d-md{font-size:clamp(24px,2.7vw,36px)}
.lbl{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:400}
.lbl-q{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.cap{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.body{color:var(--muted);max-width:52ch}

/* ---- shell ------------------------------------------------------------ */
.wrap{padding-inline:var(--gutter)}
.sec{padding-block:clamp(56px,8vw,118px)}
.sec-t{border-top:1px solid var(--line)}
.rule{height:1px;background:var(--line);border:0}

.announce{
  height:var(--bar);display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint);text-align:center;padding-inline:16px;
}

.nav{
  height:var(--nav);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
  background:var(--ground);
}
.nav-l,.nav-r{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.nav-r{justify-content:flex-end}
.nav a,.nav button{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .18s}
.nav a:hover,.nav button:hover{color:var(--ivory)}
.nav .on{color:var(--ivory)}
.nav .gold{color:var(--gold)}
.mark{font-size:clamp(15px,1.5vw,21px);letter-spacing:.34em;font-weight:300;color:var(--ivory);white-space:nowrap}
.burger{display:none}

.crumb{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);padding-block:22px}
.crumb a:hover{color:var(--ivory)}

/* ---- buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding-inline:30px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;border:1px solid transparent;transition:.18s;white-space:nowrap;
}
.btn-f{background:var(--ivory);color:#111}
.btn-f:hover{background:#fff}
.btn-o{border-color:var(--line-strong);color:var(--ivory)}
.btn-o:hover{border-color:var(--ivory)}
.btn-w{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link-u{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--line-strong);padding-bottom:5px;transition:.18s}
.link-u:hover{border-color:var(--ivory)}

/* ---- hero ------------------------------------------------------------- */
.hero{position:relative;min-height:clamp(440px,72vh,760px);display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line);overflow:hidden}
.hero-img{position:absolute;inset:0;background:var(--raise);display:grid;place-items:center}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.5}
/* Overlay type has to stay readable over whatever campaign image lands here,
   so the ground is carried back up under the copy rather than trusted to luck. */
.hero-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--ground) 0%,rgba(14,13,11,.82) 34%,rgba(14,13,11,.30) 72%,rgba(14,13,11,.12) 100%)}
.hero-in{position:relative;padding-block:clamp(40px,6vw,86px);max-width:760px}
.hero-in .d-xl{margin:14px 0 20px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---- product grid ----------------------------------------------------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.grid{display:grid;gap:clamp(12px,1.6vw,22px)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.card{display:block;transition:opacity .2s}
.card:hover{opacity:.84}
.well{position:relative;aspect-ratio:405/560;background:var(--raise);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.well img{width:100%;height:100%;object-fit:cover}
.well .ph{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.card-f{display:flex;justify-content:space-between;gap:12px;padding-top:14px;font-size:11px;letter-spacing:.17em;text-transform:uppercase}
.card-f .p{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- split band ------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.split-img{background:var(--raise);min-height:clamp(320px,42vw,620px);display:grid;place-items:center;
  border-right:1px solid var(--line)}
.split-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,86px)}
.split-txt .d-lg{margin:16px 0 18px}

/* ---- cream band ------------------------------------------------------- */
.cream{background:var(--ivory);color:#15130F}
.cream .lbl{color:#8A6E3C}
.cream .body,.cream .lbl-q{color:rgba(21,19,15,.62)}
.cream .link-u{border-color:rgba(21,19,15,.3)}
.cream .link-u:hover{border-color:#15130F}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,54px);margin-top:clamp(34px,4.6vw,66px)}
.cols3 h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:12px;font-weight:400}

/* ---- membership ------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);margin-top:clamp(30px,4vw,54px)}
.tier{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:12px}
.tier.hi{border-top-color:var(--gold)}
.tier .nm{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center}
.tier .nm em{font-style:normal;font-size:8.5px;letter-spacing:.2em;color:var(--gold)}
.tier .pr{font-family:'Bodoni Moda',serif;font-size:clamp(28px,3vw,40px);line-height:1}
.tier .pr span{font-family:Jost,sans-serif;font-size:12px;color:var(--muted);letter-spacing:.06em}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--muted);margin-top:4px}
.tier .btn{margin-top:auto}

/* ---- product detail --------------------------------------------------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,4vw,74px);
  padding-bottom:clamp(50px,7vw,100px)}
.pdp-media{display:flex;flex-direction:column;gap:14px}
.pdp-main{aspect-ratio:720/880;background:var(--raise);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.pdp-main img{width:100%;height:100%;object-fit:cover}
.dots{display:flex;gap:8px;justify-content:center}
/* the bar stays 2px; the hit area is 30px, because a 2px tap target on a phone
   is not a control, it is a decoration that disappoints */
.dot{width:34px;height:2px;background:var(--line-strong);transition:.18s;
  padding:14px 0;background-clip:content-box;box-sizing:content-box}
.dot.on{background:var(--gold)}
.pdp-info{padding-top:clamp(8px,2vw,34px);display:flex;flex-direction:column;gap:22px}
.pdp-info .d-lg{margin-top:10px}
.price{font-size:17px;color:var(--ivory);font-variant-numeric:tabular-nums}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.sw{width:46px;height:46px;border:1px solid var(--line-strong);transition:.15s;position:relative}
.sw[aria-pressed=true]{border-color:var(--gold);outline:1px solid var(--gold);outline-offset:-4px}
.sizes{display:flex;gap:9px;flex-wrap:wrap}
.size{min-width:62px;height:46px;border:1px solid var(--line-strong);font-size:11px;letter-spacing:.14em;
  display:grid;place-items:center;transition:.15s}
.size[aria-pressed=true]{background:var(--ivory);color:#111;border-color:var(--ivory)}
.size:hover:not([aria-pressed=true]){border-color:var(--ivory)}
/* The extended-size upcharge, set inside the size chip. Quiet enough not to
   shout, present enough that nobody meets the number first at the bag. */
.up{display:block;font-size:8.5px;letter-spacing:.08em;opacity:.62;margin-top:2px}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:11px}
.memnote{border:1px solid var(--gold);padding:17px 20px;display:flex;justify-content:space-between;
  align-items:center;gap:18px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.memnote b{color:var(--gold);font-weight:400}
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:19px 0;display:flex;justify-content:space-between;
  align-items:center;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:15px;color:var(--muted)}
.acc[open] summary::after{content:'–'}
.acc .ac-b{padding-bottom:20px;color:var(--muted);font-size:13px;max-width:56ch}
.acc .ac-b dl{display:grid;grid-template-columns:auto 1fr;gap:5px 20px}
.acc .ac-b dt{color:var(--faint);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding-top:3px}

/* ---- collection filters ----------------------------------------------- */
.filters{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-block:20px;border-block:1px solid var(--line);flex-wrap:wrap}
.fset{display:flex;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.fset a{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  padding-bottom:4px;border-bottom:1px solid transparent;transition:.18s}
.fset a:hover{color:var(--ivory)}
.fset a.on{color:var(--ivory);border-bottom-color:var(--gold)}

/* ---- bag / checkout --------------------------------------------------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(28px,4.4vw,78px);align-items:start}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:20px;padding-block:22px;border-bottom:1px solid var(--line);align-items:start}
.line .th{aspect-ratio:1;background:var(--raise);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.line .th img{width:100%;height:100%;object-fit:cover}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);margin-top:10px}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--muted)}
.qty button:hover{color:var(--ivory)}
.qty span{min-width:30px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.panel{border:1px solid var(--line);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px}
.tot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.tot.big{color:var(--ivory);font-size:15px;padding-top:14px;border-top:1px solid var(--line);margin-top:4px}
.tot span:last-child{font-variant-numeric:tabular-nums}
.steps{display:flex;gap:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);padding-block:24px}
.steps .on{color:var(--ivory)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.field input,.field select{height:46px;border:1px solid var(--line-strong);padding-inline:14px;font-size:13px;width:100%;transition:.15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
.fgrid{display:grid;gap:14px}
.fgrid.c2{grid-template-columns:1fr 1fr}
.fgrid.c3{grid-template-columns:1fr 1fr 1fr}
.note{font-size:11.5px;color:var(--faint);max-width:58ch}

/* ---- footer ----------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(44px,5.4vw,76px)}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,54px)}
.foot h5{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:400}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:12.5px;color:var(--muted)}
.foot a:hover{color:var(--ivory)}
.signup{display:flex;margin-top:16px;max-width:330px}
.signup input{flex:1;height:44px;border:1px solid var(--line-strong);padding-inline:13px;font-size:12.5px}
.signup button{height:44px;padding-inline:22px;background:var(--ivory);color:#111;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.foot-b{display:flex;justify-content:space-between;gap:16px;padding-top:clamp(34px,4vw,58px);margin-top:clamp(34px,4vw,58px);
  border-top:1px solid var(--line);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);flex-wrap:wrap}

/* ---- responsive ------------------------------------------------------- */
@media(max-width:1000px){
  .pdp,.two{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(3,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .foot-g{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .split-img{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:720px){
  :root{--nav:62px}
  .nav{grid-template-columns:auto 1fr auto}
  .nav-l a,.nav-r a:not(.bag),.nav-r button:not(.burger){display:none}
  .nav-l{justify-content:flex-start}
  .burger{display:grid;place-items:center;width:30px;height:30px}
  .mark{letter-spacing:.26em}
  .g3,.g4,.g2{grid-template-columns:repeat(2,1fr)}
  .cols3{grid-template-columns:1fr;gap:26px}
  .tiers{grid-template-columns:1fr}
  .foot-g{grid-template-columns:1fr;gap:30px}
  .fgrid.c2,.fgrid.c3{grid-template-columns:1fr}
  .line{grid-template-columns:72px 1fr;gap:14px}
  .line .pr{grid-column:2}
}
@media(max-width:420px){
  .g3,.g4,.g2{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* A colourway we hold no photograph for yet: dim rather than show the wrong garment. */
.pdp-main img[data-missing]{opacity:.22;filter:grayscale(1)}
.pdp-main{position:relative}
.pdp-main img[data-missing]+.ph,.pdp-main:has(img[data-missing])::after{
  content:'Photography for this colourway is coming';position:absolute;inset:auto 0 0 0;
  padding:14px;text-align:center;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);background:linear-gradient(to top,var(--ground),transparent)}
/* long-form policy copy */
.doc{max-width:74ch;margin-top:34px}
.doc h2{font-family:'Jost',system-ui,sans-serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivory);font-weight:400;margin:44px 0 15px;padding-top:22px;border-top:1px solid var(--line)}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc p{color:var(--muted);font-size:13.5px;line-height:1.78;margin-bottom:13px}
.doc ul{margin:0 0 15px;padding:0;list-style:none}
.doc li{color:var(--muted);font-size:13.5px;line-height:1.7;margin-bottom:8px;padding-left:19px;position:relative}
.doc li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--gold)}
.doc a{color:var(--ivory);border-bottom:1px solid var(--line-strong)}
.doc a:hover{border-color:var(--gold)}