/* STRATA — store pages (shop + product).
   The homepage keeps its own inline CSS; this file carries the same tokens so
   the two read as one site, plus everything the two new templates need.     */

:root{
  --bg:#FAF8F4;
  --ink:#17140F;
  --ink-soft:rgba(23,20,15,.62);
  --ink-faint:rgba(23,20,15,.42);
  --line:rgba(23,20,15,.12);
  --accent:#B5652D;
  --panel:#F1ECE3;
  --pad:clamp(1.25rem,4vw,3rem);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{background:var(--bg);color:var(--ink);font-family:'General Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
h1,h2,h3{font-family:'Clash Display',system-ui,sans-serif;text-wrap:balance;font-weight:600;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}

.mono{font-family:'JetBrains Mono',monospace;}
.section-label{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:300;background:var(--ink);color:var(--bg);
  padding:.7rem 1.1rem;border-radius:999px;}

/* ------------------------------------------------------------------ chrome */
header{position:sticky;top:0;z-index:30;background:rgba(250,248,244,.88);backdrop-filter:blur(8px);
  display:flex;justify-content:space-between;align-items:center;
  padding:1.25rem var(--pad);border-bottom:1px solid var(--line);}
.mark{font-family:'Clash Display',sans-serif;font-weight:700;font-size:1.3rem;
  letter-spacing:.01em;text-decoration:none;color:var(--ink);}
nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);}
nav a{color:var(--ink);text-decoration:none;font-size:.85rem;opacity:.75;}
nav a:hover,nav a[aria-current]{opacity:1;}
nav a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent);}
.cart{display:flex;align-items:center;gap:.4rem;font-size:.82rem;background:none;
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;
  font-family:'General Sans',sans-serif;color:var(--ink);}
.cart:hover{border-color:var(--ink);}

/* Two rows on small screens rather than dropping the nav: the mark and the
   cart hold the top line, the links wrap underneath. */
@media (max-width:760px){
  header{flex-wrap:wrap;row-gap:.7rem;padding:.9rem var(--pad);}
  .mark{flex:1;}
  nav{order:2;width:100%;gap:1.4rem;font-size:.82rem;}
  .cart{order:1;padding:.45rem .95rem;}
}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:'General Sans',sans-serif;
  font-weight:500;font-size:.9rem;background:var(--ink);color:var(--bg);border:1px solid var(--ink);
  border-radius:999px;padding:.9rem 1.8rem;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s;}
.btn:hover{background:transparent;color:var(--ink);}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--bg);}
.btn[disabled]{opacity:.45;pointer-events:none;}

footer{border-top:1px solid var(--line);padding:3.5rem var(--pad) 2.5rem;margin-top:6rem;}
.footer-inner{display:flex;justify-content:space-between;gap:3rem;max-width:1240px;margin:0 auto 3rem;}
.footer-brand .mark{display:inline-block;margin-bottom:.85rem;}
.footer-brand p{font-size:.88rem;color:var(--ink-soft);max-width:32ch;line-height:1.55;}
.footer-cols{display:flex;gap:clamp(2.5rem,6vw,5rem);}
.footer-col h4{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;font-weight:500;}
.footer-col a{display:block;color:var(--ink);text-decoration:none;font-size:.9rem;
  margin-bottom:.65rem;opacity:.85;}
.footer-col a:hover{opacity:1;}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;max-width:1240px;margin:0 auto;
  padding-top:1.75rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft);}
@media (max-width:640px){
  .footer-inner{flex-direction:column;}
  .footer-bottom{flex-direction:column;}
}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);}

/* ==========================================================================
   SHOP — the collection page.
   The bold move: the filter row is a live ledger. Picking a category rewrites
   the counter above the grid rather than just hiding cards silently.
   ========================================================================== */
.shop-head{padding:clamp(3.5rem,8vh,6rem) 0 0;}
.shop-head h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;margin:1rem 0 1.25rem;max-width:16ch;}
.shop-head .lede{font-size:1.08rem;line-height:1.6;color:var(--ink-soft);max-width:52ch;}

.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin:clamp(2.5rem,5vh,3.5rem) 0 1rem;}
.chip{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;background:none;border:1px solid var(--line);border-radius:999px;
  padding:.6rem 1.1rem;cursor:pointer;color:var(--ink-soft);
  transition:border-color .2s,color .2s,background .2s;}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.ledger{display:flex;align-items:baseline;gap:.6rem;padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.ledger b{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums;}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
  gap:clamp(1.5rem,3vw,2.5rem);padding-top:clamp(2rem,4vh,3rem);}
.card{border:1px solid var(--line);border-radius:16px;background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .3s var(--ease),transform .4s var(--ease);}
.card:hover{border-color:var(--ink);transform:translateY(-3px);}
.card.is-out{display:none;}
.card__media{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  background:var(--panel);padding:1.75rem;}
.card__media img{width:auto;max-height:100%;max-width:74%;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(23,20,15,.15));
  transition:transform .6s var(--ease);}
.card:hover .card__media img{transform:scale(1.04);}
.card__badge{position:absolute;top:1rem;left:1rem;font-family:'JetBrains Mono',monospace;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bg);
  background:var(--accent);border-radius:999px;padding:.35rem .7rem;}
.card__body{padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1;}
.card__kind{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem;}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.card__row h2{font-size:1.28rem;}
.card__price{font-family:'JetBrains Mono',monospace;font-size:.95rem;color:var(--accent);
  white-space:nowrap;}
.card__desc{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin:.75rem 0 1.4rem;flex:1;}
.card__acts{display:flex;gap:.6rem;flex-wrap:wrap;}
.card__acts .btn{padding:.75rem 1.35rem;font-size:.85rem;}
.card__link{text-decoration:none;color:inherit;}

.compare{margin-top:clamp(4rem,9vh,7rem);}
.compare h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.9rem 0 2rem;max-width:24ch;}
.compare__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;}
table{border-collapse:collapse;width:100%;min-width:38rem;}
th,td{text-align:left;padding:1rem 1.25rem;border-bottom:1px solid var(--line);font-size:.9rem;
  vertical-align:top;}
thead th{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;background:var(--panel);}
tbody th{font-weight:500;color:var(--ink-soft);width:14rem;}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0;}
td b{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--accent);}

/* ==========================================================================
   PRODUCT
   The bold move: one dimension toggle. Press it and a technical annotation
   overlay draws itself onto the product shot — the drawing behind the object.
   ========================================================================== */
.crumbs{padding:1.5rem 0 0;font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{margin:0 .5rem;}

.pdp{display:grid;gap:clamp(2rem,5vw,4rem);padding-top:clamp(1.5rem,4vh,2.5rem);
  grid-template-columns:1fr;}
/* Grid items default to min-width:auto, so the horizontally scrolling thumbnail
   strip widened its own track and took the whole page sideways with it. */
.pdp > *{min-width:0;}
@media (min-width:940px){
  .pdp{grid-template-columns:1.1fr .9fr;align-items:start;}
  .pdp__media{position:sticky;top:6rem;}
}

.stage{position:relative;background:var(--panel);border-radius:20px;aspect-ratio:1;
  display:grid;place-items:center;padding:clamp(1.5rem,4vw,3.5rem);overflow:hidden;}
.stage img{max-height:100%;max-width:86%;width:auto;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(23,20,15,.18));
  transition:opacity .35s ease,transform .6s var(--ease);}
.stage.is-swapping img{opacity:0;}

/* dimension overlay — the technical drawing, laid over the object.
   Built from elements rather than an SVG: a viewBox stretched onto a
   non-square stage distorts its own label glyphs. */
.dims{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s ease;}
.stage.show-dims .dims{opacity:1;}
.dims b{position:absolute;font-family:'JetBrains Mono',monospace;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;
  background:var(--panel);padding:.15rem .4rem;}
.dims i{position:absolute;background:var(--accent);
  transition:transform .7s var(--ease) .1s;}

/* the height rule, down the start edge */
.dim-v{position:absolute;left:7%;top:14%;bottom:11%;width:1px;}
.dim-v i{inset:0;transform:scaleY(0);transform-origin:top;}
.stage.show-dims .dim-v i{transform:scaleY(1);}
.dim-v::before,.dim-v::after{content:"";position:absolute;left:-6px;width:13px;height:1px;
  background:var(--accent);opacity:0;transition:opacity .3s ease .55s;}
.dim-v::before{top:0;} .dim-v::after{bottom:0;}
.stage.show-dims .dim-v::before,.stage.show-dims .dim-v::after{opacity:1;}
.dim-v b{left:.7rem;top:50%;transform:translateY(-50%);white-space:nowrap;}

/* the width rule, along the foot */
.dim-h{position:absolute;left:40%;right:36%;bottom:12%;height:1px;}
.dim-h i{inset:0;transform:scaleX(0);transform-origin:left;}
.stage.show-dims .dim-h i{transform:scaleX(1);}
.dim-h::before,.dim-h::after{content:"";position:absolute;top:-6px;height:13px;width:1px;
  background:var(--accent);opacity:0;transition:opacity .3s ease .55s;}
.dim-h::before{left:0;} .dim-h::after{right:0;}
.stage.show-dims .dim-h::before,.stage.show-dims .dim-h::after{opacity:1;}
.dim-h b{left:50%;transform:translateX(-50%);top:.5rem;white-space:nowrap;}

@media (prefers-reduced-motion:reduce){
  .dims i,.dim-v::before,.dim-v::after,.dim-h::before,.dim-h::after{transition:none;}
  .stage img{transition:none;}
}

.stage__toggle{position:absolute;bottom:1rem;right:1rem;pointer-events:auto;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:.55rem 1rem;cursor:pointer;color:var(--ink-soft);}
.stage__toggle:hover{color:var(--ink);border-color:var(--ink);}
.stage__toggle[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);}

.views{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;align-items:flex-start;}
.view{width:4.4rem;flex:none;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);display:grid;place-items:center;cursor:pointer;padding:.5rem;
  transition:border-color .25s;}
.view img{max-width:100%;max-height:100%;object-fit:contain;}
.view:hover{border-color:var(--ink-soft);}
.view.is-active{border-color:var(--accent);}
@media (max-width:640px){
  /* one row that scrolls, rather than an orphan thumbnail on a second line */
  .views{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;
    scrollbar-width:thin;overscroll-behavior-x:contain;}
}

.buy h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.04;margin:.9rem 0 .75rem;}
.buy__price{font-family:'JetBrains Mono',monospace;font-size:1.15rem;color:var(--accent);
  margin-bottom:1.25rem;font-variant-numeric:tabular-nums;}
.buy__price s{color:var(--ink-faint);margin-left:.6rem;font-size:.85em;}
.buy__lede{font-size:1rem;line-height:1.65;color:var(--ink-soft);max-width:46ch;}

fieldset{border:0;margin:2rem 0 0;}
legend{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.9rem;}
.opts{display:flex;gap:.6rem;flex-wrap:wrap;}
.opt{position:relative;border:1px solid var(--line);border-radius:12px;padding:.85rem 1.1rem;
  cursor:pointer;display:flex;flex-direction:column;gap:.25rem;min-width:8.5rem;
  transition:border-color .25s,background .25s;}
.opt:hover{border-color:var(--ink-soft);}
.opt input{position:absolute;opacity:0;pointer-events:none;}
.opt:has(input:checked){border-color:var(--accent);background:var(--panel);}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.opt__n{font-size:.95rem;font-weight:500;}
.opt__p{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--ink-soft);}
.opt__note{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin-top:.9rem;min-height:2.6em;}

.qtyrow{display:flex;align-items:center;gap:1rem;margin-top:2rem;flex-wrap:wrap;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;}
.qty button{width:2.5rem;height:2.75rem;background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:1.05rem;border-radius:999px;}
.qty button:hover{background:var(--panel);}
.qty input{width:2.5rem;height:2.75rem;border:0;background:none;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--ink);
  -moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;}
.qtyrow .btn{flex:1;justify-content:center;min-width:12rem;}
.buy__ship{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:1rem;}

.specs-block{margin-top:clamp(2.5rem,6vh,4rem);border-top:1px solid var(--line);}
.acc{border-bottom:1px solid var(--line);}
.acc__q{width:100%;background:none;border:0;cursor:pointer;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.25rem 0;font-family:'Clash Display',sans-serif;font-size:1.02rem;font-weight:600;
  text-align:left;}
.acc__q .plus{font-family:'JetBrains Mono',monospace;font-size:1.1rem;color:var(--accent);
  transition:transform .3s var(--ease);flex:none;}
.acc.is-open .acc__q .plus{transform:rotate(45deg);}
.acc__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.acc__a-in{padding-bottom:1.4rem;}
.acc__a p{font-size:.94rem;line-height:1.65;color:var(--ink-soft);max-width:56ch;}
.spec-list{list-style:none;}
.spec-list li{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.85rem 0;
  border-bottom:1px solid var(--line);}
.spec-list li:last-child{border-bottom:0;}
@media (min-width:560px){ .spec-list li{grid-template-columns:13rem 1fr;gap:1.5rem;} }
.spec-list dt,.spec-list .k{font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);padding-top:.15rem;}
.spec-list .v{font-size:.94rem;line-height:1.6;color:var(--ink-soft);}

.dimgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-top:1.25rem;}
.dimgrid div{background:var(--bg);padding:1.1rem 1.25rem;}
.dimgrid .k{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.4rem;}
.dimgrid .v{font-family:'Clash Display',sans-serif;font-size:1.15rem;font-weight:600;}

.pairs{margin-top:clamp(4rem,9vh,7rem);}
.pairs h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin:.9rem 0 2rem;}
/* one or two related items should sit at card size, not stretch to the page */
.pairs .grid{grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),22rem));}