:root{
  --bg:#0a0a0a; --fg:#ece9d8; --lime:#d7f24a; --mute:#726f60; --line:#232019;
  --cyan:#38e6ff; --magenta:#ff2ea6;
  --serif:'Fraunces', Georgia, serif; --mono:'Space Mono', ui-monospace, Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);-webkit-font-smoothing:antialiased;min-height:100vh}
::selection{background:var(--lime);color:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.signal{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.6rem clamp(1.2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.nav-mark{font-family:var(--serif);font-style:italic;font-size:1.3rem}
.nav-links{display:flex;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap}
.nav-links a{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.nav-links a:hover,.nav-links a.on{color:var(--lime)}

.product{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);
  padding:clamp(2rem,5vw,4rem) clamp(1.2rem,6vw,6rem);max-width:1400px;margin:0 auto}
@media (max-width:860px){.product{grid-template-columns:1fr}}

.gallery{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.main-img{aspect-ratio:4/5;width:100%;max-width:100%;background:#111;border:1px solid var(--line);overflow:hidden}
.main-img img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
.thumbs button{aspect-ratio:1;border:1px solid var(--line);background:#111;cursor:pointer;padding:0;overflow:hidden;opacity:.45;transition:opacity .2s,border-color .2s}
.thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs button:hover{opacity:.8}
.thumbs button[aria-current="true"]{opacity:1;border-color:var(--lime)}

.info{display:flex;flex-direction:column;gap:1.6rem;min-width:0;align-self:start;position:sticky;top:2rem}
@media (max-width:860px){.info{position:static}}
.eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2.4rem,5vw,3.8rem);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.price{font-size:1.1rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.price small{color:var(--mute);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;margin-left:.8rem}
.blurb{color:var(--mute);font-size:.85rem;line-height:1.7;max-width:46ch}

.label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:.7rem}
.sizes{display:flex;flex-wrap:wrap;gap:.5rem}
.sizes button{min-width:3.4rem;padding:.75rem .9rem;background:transparent;border:1px solid var(--line);color:var(--fg);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.sizes button:hover{border-color:var(--fg)}
.sizes button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sizes button:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:2.6rem;height:2.6rem;background:none;border:0;color:var(--fg);font-family:var(--mono);font-size:1rem;cursor:pointer}
.qty button:hover{color:var(--lime)}
.qty output{min-width:2.4rem;text-align:center;font-variant-numeric:tabular-nums}

.buy{display:block;width:100%;text-align:center;background:var(--lime);color:var(--bg);border:0;
  font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1.15rem 1.5rem;cursor:pointer;transition:opacity .2s}
.buy:hover{opacity:.88}
.buy[aria-disabled="true"]{background:transparent;color:var(--mute);border:1px solid var(--line);cursor:not-allowed}
.hint{font-size:.7rem;color:var(--mute);min-height:1.1em;letter-spacing:.06em}

.details{list-style:none;border-top:1px solid var(--line)}
.details li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.75rem;letter-spacing:.08em}
.details li span:first-child{color:var(--mute);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem}
.details li span:last-child{text-align:right}

.more{padding:3rem clamp(1.2rem,6vw,6rem) 4rem;border-top:1px solid var(--line);max-width:1400px;margin:0 auto}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;max-width:760px;margin-top:1.6rem}
@media (max-width:560px){.more-grid{grid-template-columns:1fr}}
.more a{display:flex;flex-direction:column;gap:.7rem}
.more .thumb{aspect-ratio:4/5;border:1px solid var(--line);overflow:hidden;background:#111}
.more .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.35);transition:filter .5s}
.more a:hover .thumb img{filter:none}
.more .name{font-family:var(--serif);font-style:italic;font-size:1.1rem}

footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:2rem clamp(1.2rem,6vw,6rem);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}