:root {
  color-scheme: light;
  --ink: #172638;
  --night: #142436;
  --muted: #475a6b;
  --copper: #8b391c;
  --line: #d2dce2;
  --pale: #edf2f4;
  --focus: #0756a1;
  font: 1rem/1.55 system-ui,sans-serif;
  color: var(--ink);
  background: #f7f9fa;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--copper); text-underline-offset: .18em; }
a, button, input, select { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(92%, 82rem); margin-inline: auto; }
.skip { position: absolute; left: .75rem; top: .75rem; padding: .6rem; background: white; translate: 0 -180%; z-index: 4; }
.skip:focus { translate: none; }
.mast { color: white; background: var(--night); border-bottom: 4px solid #b5623d; }
.mast a { color: white; }
.mast :focus-visible { outline-color: #ffc59d; }
.mast-inner { display:flex; justify-content:space-between; gap: .5rem 2rem; align-items:center; min-height: 4rem; flex-wrap:wrap; padding-block:.5rem; }
.brand { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:780; font-size:1.2rem; }
.brand svg { color:#ffc59d; flex:none; }
.mast nav { display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; }
.mast nav a { padding-block:.3rem; }
main { padding-block:1.5rem 3rem; }
h1, h2 { line-height:1.16; letter-spacing:-.025em; margin:0 0 .75rem; }
h1 { font-size:clamp(2rem,4.4vw,4rem); max-width:22ch; }
h2 { font-size:clamp(1.3rem,2vw,1.8rem); }
p { margin:.25rem 0 1rem; }
.lede { max-width:65ch; }
.code, .chip { font-family: ui-monospace,monospace; font-weight:700; }
.code { color:var(--copper); font-size:.83rem; letter-spacing:.06em; }
.workbench { display:grid; grid-template-columns:minmax(0,3fr) minmax(14rem,1fr); gap:1.15rem; align-items:start; }
.bench-intro { padding:clamp(1rem,3vw,2.5rem); background:#e8eff2; border:1px solid var(--line); border-radius:.7rem; }
.bench-intro p:not(.code) { max-width:53ch; }
.fit-desk { grid-column:2; grid-row:1 / span 2; background:white; padding:1rem; border:1px solid var(--line); border-radius:.7rem; }
.stock { grid-column:1; }
.family-list,.grid { list-style:none; margin:0; padding:0; }
.family-list { display:grid; gap:.48rem; }
.family-list a { display:grid; padding:.5rem .7rem; border:1px solid var(--line); border-radius:.4rem; background:#f7f9fa; text-decoration:none; color:var(--ink); }
.family-list a:hover { border-color:var(--copper); text-decoration:underline; }
.family-list small { color:var(--muted); }
.search { max-width:56rem; margin:1rem 0; }
.search > label, .family-filter { display:block; font-weight:700; }
.search-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.55rem; }
input,select,button { min-height:2.7rem; padding:.55rem .7rem; font:inherit; border:1px solid #8b9aa9; border-radius:.35rem; }
input { flex:1; min-width:min(100%,14rem); width:100%; color:var(--ink); background:white; }
select { display:block; max-width:100%; background:white; color:var(--ink); }
button { font-weight:700; background:var(--copper); color:white; border-color:var(--copper); cursor:pointer; }
.section-head { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:.4rem; }
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.grid [hidden] { display:none; }
.card { min-width:0; padding:.65rem; border:1px solid var(--line); border-radius:.55rem; background:white; overflow-wrap:anywhere; }
.card a { display:grid; color:var(--ink); text-decoration:none; gap:.2rem; }
.card a:hover strong { text-decoration:underline; }
.card img { display:block; width:100%; height:auto; aspect-ratio:1.7; object-fit:contain; }
.chip { color:var(--copper); font-size:.75rem; }
.price { margin-top:.5rem; min-width:0; }
.price-amount { display:block; font-size:1.3rem; font-variant-numeric:tabular-nums; }
.price-observed { display:block; color:var(--muted); overflow-wrap:anywhere; }
.price-info { font-size:.8rem; color:var(--muted); }
.price-info summary, #questions summary { cursor:pointer; min-height:2rem; padding-block:.2rem; }
.reading { margin-top:1.6rem; background:white; border:1px solid var(--line); border-left:4px solid #b5623d; padding:1rem; max-width:65rem; }
.reading p { max-width:67ch; }
.crumbs { color:var(--muted); margin-bottom:1rem; overflow-wrap:anywhere; }
.product-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:white; border:1px solid var(--line); border-radius:.7rem; }
.product-art { min-width:0; border-right:1px solid var(--line); }
.product-art img { display:block; width:100%; height:auto; max-height:26rem; object-fit:contain; }
.product-side { min-width:0; padding:clamp(1rem,3vw,2.5rem); overflow-wrap:anywhere; }
.product-side h1 { font-size:clamp(1.7rem,3vw,3rem); }
.preview-notice { color:var(--muted); margin-top:1rem; }
.jump { display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin:1rem 0; border-bottom:1px solid var(--line); }
.jump a { display:block; padding:.55rem 0; }
.product-body { max-width:65rem; }
.product-body section { padding:1rem 0; border-bottom:1px solid var(--line); }
.product-body dl { display:grid; grid-template-columns:minmax(5rem,10rem) 1fr; gap:.35rem .5rem; }
.product-body dt { font-weight:700; }
.product-body dd { margin:0; overflow-wrap:anywhere; }
.footer { padding:1rem 0; color:#e8eef1; background:var(--night); }
.footer span { margin-left:.5rem; color:#e1b9a8; }
@media(max-width:60rem) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:45rem) {
  .workbench,.product-head { display:grid; grid-template-columns:minmax(0,1fr); }
  .fit-desk,.stock { grid-column:1; grid-row:auto; }
  .stock { grid-row:2; }
  .fit-desk .family-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-art { border-right:0; border-bottom:1px solid var(--line); }
  .product-side { grid-row:1; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.profiles { display:flex; flex-wrap:wrap; gap:.35rem .55rem; }
.profiles a { display:inline-flex; align-items:center; min-height:2.5rem; padding:.2rem .55rem; gap:.35rem; background:white; border:1px solid var(--line); border-radius:.35rem; text-decoration:none; font-size:.85rem; font-weight:720; }
.profiles a:hover { text-decoration:underline; border-color:var(--copper); }
@media(max-width:45rem) { .product-art img { max-height:15rem; } }
.add-action { display:block; width:100%; margin-top:.6rem; padding:.55rem .75rem; border-radius:.35rem; background:var(--copper); color:white; min-height:2.7rem; text-align:center; font-weight:750; text-decoration:none; }
.card .add-action { color:white; }
.add-action:hover { background:#702d16; text-decoration:underline; }
.merchant-note { font-size:.78rem; color:var(--muted); margin:.4rem 0; }
.selection-actions { display:flex; flex-wrap:wrap; gap:.3rem; }
.selection-actions button { min-height:2.35rem; padding:.2rem .5rem; color:var(--ink); border-color:#8b9aa9; background:#f7f9fa; font-size:.82rem; }
.selection-actions button[aria-pressed="true"] { color:white; background:var(--night); }
.selection-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.footer a { color:#fff; }
.footer p { margin:.2rem 0 0; }