/* ============================================================================
   WEAR — static pages
   ----------------------------------------------------------------------------
   Every product, collection and look has a real page that stands on its own:
   crawlable, readable, and fast. Deliberately independent of wear.css so these
   pages carry none of the store's weight.
   ========================================================================== */

:root {
  --onyx:#0A0806; --pitch:#060403; --charcoal:#16130F;
  --walnut:#2C1D12; --bronze:#8C6239; --brass:#D4A843; --copper:#B87333;
  --clay:#C4956A; --cream:#F0E8D8; --bone:#E3D5BE; --sage:#8A9E7A;
  --sign:'Bebas Neue','Arial Narrow',sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:var(--pitch); color:var(--cream); font-family:var(--serif);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
::selection { background:rgba(212,168,67,.3); }
:focus-visible { outline:2px solid var(--brass); outline-offset:3px; }

.skip-link {
  position:fixed; top:-100px; left:16px; z-index:99; background:var(--brass);
  color:var(--pitch); padding:12px 20px; font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus { top:16px; }

.wrap { max-width:1160px; margin:0 auto; padding:0 clamp(18px,4vw,40px); }

/* ── header ── */
.doc-head {
  border-bottom:1px solid rgba(140,98,57,.24);
  background:linear-gradient(180deg,#120C08,#0A0806);
  position:sticky; top:0; z-index:20;
}
.doc-head .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:15px; padding-bottom:15px; }
.mark { display:flex; align-items:baseline; gap:9px; }
.mark .w {
  font-family:var(--sign); font-size:24px; letter-spacing:.28em; margin-left:.28em;
  color:transparent; background:linear-gradient(180deg,#F3E4C4,#D4A843);
  -webkit-background-clip:text; background-clip:text;
}
.mark .by { font-family:var(--mono); font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:rgba(240,232,216,.42); }
.doc-nav { display:flex; gap:clamp(6px,1.4vw,18px); flex-wrap:wrap; }
.doc-nav a {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(240,232,216,.6); padding:8px 4px; transition:color .25s;
}
.doc-nav a:hover { color:var(--brass); }

/* ── breadcrumb ── */
.crumbs {
  padding:20px 0 0; font-family:var(--mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(240,232,216,.4);
}
.crumbs a { border-bottom:1px solid rgba(196,149,106,.3); }
.crumbs a:hover { color:var(--clay); }
.crumbs span { margin:0 8px; color:rgba(140,98,57,.6); }

/* ── product ── */
.pdp { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,60px); padding:clamp(26px,5vh,52px) 0; }
@media (max-width:820px){ .pdp { grid-template-columns:1fr; } }

.shots { display:grid; gap:12px; }
.shot { position:relative; }
.shot img { width:100%; border:1px solid rgba(140,98,57,.28); background:var(--charcoal); }
.shot figcaption {
  margin-top:7px; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(240,232,216,.42);
}
.shots-extra { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }

.eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(212,168,67,.66); }
h1.name {
  font-family:var(--sign); font-size:clamp(32px,4.6vw,54px); letter-spacing:.09em;
  line-height:1.02; margin:10px 0 6px; font-weight:400;
}
.variant { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--clay); }
.price { margin-top:14px; font-family:var(--mono); font-size:18px; color:var(--brass); }
.blurb { margin-top:16px; font-size:17px; color:rgba(240,232,216,.72); max-width:46ch; }

.status {
  margin-top:20px; padding:14px 16px; border:1px solid rgba(212,168,67,.3);
  background:rgba(212,168,67,.06); font-family:var(--mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brass);
}
.status.muted { border-color:rgba(240,232,216,.16); background:rgba(240,232,216,.03); color:rgba(240,232,216,.6); }

.cta {
  display:inline-block; margin-top:24px; font-family:var(--sign); font-size:19px;
  letter-spacing:.2em; padding:16px 34px; color:var(--pitch);
  background:linear-gradient(135deg,#E6C078,#D4A843 42%,#A87A32);
  transition:filter .25s, transform .25s;
}
.cta:hover { filter:brightness(1.06); transform:translateY(-2px); }
.cta.ghost {
  background:none; color:rgba(240,232,216,.8); border:1px solid rgba(240,232,216,.24);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:15px 22px;
}
.cta.ghost:hover { border-color:var(--brass); color:var(--brass); }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.opts { margin-top:26px; }
.opts h2 {
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(240,232,216,.5); font-weight:400; margin-bottom:11px;
}
.opt-row { display:flex; flex-wrap:wrap; gap:9px; }
.opt {
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; padding:9px 13px;
  border:1px solid rgba(240,232,216,.18); color:rgba(240,232,216,.72);
  transition:border-color .25s,color .25s;
}
.opt:hover { border-color:var(--clay); color:var(--cream); }
.opt[aria-current="true"] { background:var(--cream); border-color:var(--cream); color:var(--pitch); }
.opt .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:-1px; border:1px solid rgba(0,0,0,.4); }

/* ── spec tables ── */
.specs { margin-top:34px; border-top:1px solid rgba(140,98,57,.22); }
.specs section { border-bottom:1px solid rgba(140,98,57,.16); padding:18px 0; }
.specs h2 {
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(240,232,216,.66); font-weight:400; margin-bottom:12px;
}
.specs dl { display:grid; grid-template-columns:auto 1fr; gap:8px 20px; }
.specs dt { font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:rgba(212,168,67,.6); padding-top:3px; }
.specs dd { color:rgba(240,232,216,.74); }
.specs p { color:rgba(240,232,216,.7); }

/* ── grids ── */
.section-head { margin:clamp(34px,7vh,64px) 0 20px; }
.section-head h2 { font-family:var(--sign); font-size:clamp(26px,3.4vw,40px); letter-spacing:.14em; font-weight:400; }
.section-head p { margin-top:8px; font-style:italic; color:rgba(240,232,216,.5); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:clamp(14px,2vw,24px); }
.tile { display:block; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.tile:hover { transform:translateY(-5px); }
.tile img { border:1px solid rgba(140,98,57,.2); }
.tile .t-name { margin-top:10px; font-family:var(--sign); font-size:16px; letter-spacing:.11em; }
.tile .t-var { margin-top:3px; font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:rgba(240,232,216,.46); }
.tile .t-price { margin-top:5px; font-family:var(--mono); font-size:11px; color:var(--brass); }
.tile .t-pip {
  display:inline-block; margin-top:5px; font-family:var(--mono); font-size:8px;
  letter-spacing:.15em; text-transform:uppercase; padding:3px 7px; border:1px solid;
}
.t-pip.live { color:var(--pitch); background:var(--brass); border-color:var(--brass); }
.t-pip.soon { color:var(--brass); border-color:rgba(212,168,67,.5); }
.t-pip.out  { color:rgba(240,232,216,.5); border-color:rgba(240,232,216,.2); }

/* ── story ── */
.story-block { max-width:62ch; margin:clamp(30px,6vh,56px) 0; }
.story-block p { font-size:17px; color:rgba(240,232,216,.72); }
.story-block .energy { font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); margin-bottom:14px; }

/* ── footer ── */
.doc-foot {
  margin-top:clamp(48px,10vh,96px); border-top:1px solid rgba(140,98,57,.22);
  padding:clamp(28px,5vh,52px) 0; background:linear-gradient(180deg,#0A0806,#120C08);
}
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px; }
.foot-grid h3 { font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); font-weight:400; margin-bottom:10px; }
.foot-grid ul { list-style:none; }
.foot-grid li { margin-bottom:7px; }
.foot-grid a { font-size:15px; color:rgba(240,232,216,.6); transition:color .25s; }
.foot-grid a:hover { color:var(--cream); }
.foot-note {
  margin-top:30px; padding-top:20px; border-top:1px solid rgba(140,98,57,.16);
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; color:rgba(240,232,216,.34); line-height:1.9;
}
.phrase { font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--clay); margin-bottom:14px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}