/* ── Typefaces, served from this site (/fonts/) ─────────────────────────────
   Archivo and Instrument Sans, SIL Open Font License 1.1 (licence texts in
   /fonts/). Self-hosted since 2026-09-29 so no visitor's IP address goes to
   Google on page load. Latin and Latin Extended only; other scripts fall
   back to system fonts. Copied from Google Fonts' own CSS, URLs rewritten. */
/* Archivo — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#f3f2f2; --surface:#eae9e9; --text:#201e1d;
  --accent:#2b6fe0; --accent-600:#1d57bd; --accent-700:#164496; --accent-100:#eef3fe;
  --divider:rgba(32,30,29,.4); --hair:rgba(32,30,29,.15);
  --muted:rgba(32,30,29,.55); --muted-2:rgba(32,30,29,.7);
  --imgbg:#e2e0de;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Archivo",system-ui,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:0 0 8px}
p{margin:0 0 12px}
img{display:block;max-width:100%}
a{color:var(--accent-700);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:rgba(43,111,224,.3)}
.hr{height:2px;border:0;margin:16px 0;background:var(--divider)}
.wordmark{font-variation-settings:'wdth' 125;font-weight:800;line-height:1;letter-spacing:-.045em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  text-decoration:none;font-family:inherit;font-weight:800;font-size:14px;line-height:1.2;
  color:var(--text);background:transparent;border:1px solid transparent;padding:8px 14px;border-radius:0}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:var(--accent-600);color:var(--bg)}
.btn-primary:active{background:var(--accent-700)}
.btn-secondary{border-color:var(--divider)}
.btn-secondary:hover{background:rgba(32,30,29,.07)}
.btn-ghost{color:var(--accent-700);padding-inline:4px}
.btn-ghost:hover{background:rgba(43,111,224,.1);color:var(--accent-700)}
.btn-block{width:100%;justify-content:flex-start;text-align:left}

.field>label{display:block;font-size:12px;margin-bottom:5px;color:var(--muted-2)}
.input{width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;color:var(--text);
  caret-color:var(--accent);background:var(--surface);border:1px solid var(--divider);border-radius:0}
.input:hover{border-color:rgba(32,30,29,.45)}
.input:focus-visible{border-color:var(--accent);outline-offset:0}
textarea.input{min-height:90px;resize:vertical}

.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px}
.tag-accent{background:var(--accent-100);color:#12336d}
.tag-outline{border:1px solid var(--accent);color:var(--accent-700)}

.kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
/* One content container for the whole site. Sections stay full-bleed so their
   backgrounds and rules still run edge to edge, but .cap pushes their CONTENT
   into a centred column of --content-max. The three sections that are meant to
   run wide — the blue strip, the homepage masthead and the footer — simply
   don't carry .cap. Change the one number to move everything. */
:root{--content-max:1440px; --gutter:20px}
.shell{container-type:inline-size;max-width:100%;margin:0 auto;background:var(--bg);
  min-height:100vh;display:flex;flex-direction:column}
.cap{padding-inline:max(var(--gutter),calc((100% - var(--content-max)) / 2))!important}
/* Header runs full-bleed like the blue strip, the masthead and the footer —
   the wordmark lines up with the hero below it rather than sitting indented.
   Desktop: wordmark left, links + cart right on one line.
   Narrow: two rows — wordmark and the cart button stay together on top so the
   cart is always reachable, links sit underneath. No hamburger; five items
   don't need one. */
.hdr-row{display:flex;align-items:center;gap:14px 20px}
.hdr-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px;margin-left:auto}
.hdr-links .btn,.hdr-cart{font-size:13px;letter-spacing:.02em}
.hdr-cart{white-space:nowrap}
@media (max-width:700px){
  .hdr-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px}
  .hdr-mark{grid-column:1;grid-row:1}
  .hdr-cart{grid-column:2;grid-row:1}
  .hdr-links{grid-column:1 / -1;grid-row:2;margin-left:-4px;gap:2px}
  .hdr-links .btn{padding-inline:6px}
}
/* !important so an inline display on a route can never leak it onto another page */
.route{display:none!important}
.route.is-active{display:block!important}
main{flex:1}

/* product media */
.media{position:relative;width:100%;aspect-ratio:4/3;background:var(--imgbg);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}
/* Fixed-height tiles: show the whole render instead of cropping it. The
   image's own backdrop is --imgbg, so the letterbox is invisible. */
.media-contain img{object-fit:contain}
.media-ph{display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800}
.soon-flag{position:absolute;top:10px;left:10px;background:#201e1d;color:var(--bg);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:4px 8px}

/* Shop grid: three across on desktop, as designed. Drops to two, then one,
   on narrower screens. Change the 3 if the product count grows. */
.grid-3{display:grid;gap:clamp(16px,2.4cqw,32px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card-prod{display:flex;flex-direction:column;gap:10px;text-align:left;background:none;border:0;
  padding:0;font:inherit;color:inherit;width:100%}
.card-prod[data-open="1"]{cursor:pointer}
.card-prod[data-open="1"]:hover .media img{transform:scale(1.03)}
.media img{transition:transform .35s ease}
.prod-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.prod-name{font-weight:800;font-size:15px}
.prod-price{font-weight:800;font-size:15px;color:var(--accent-700);white-space:nowrap}
.prod-blurb{margin:0;font-size:13px;line-height:1.4;color:rgba(32,30,29,.6)}

.swatch{padding:4px;border:1px solid rgba(32,30,29,.3);width:40px;height:40px;background:transparent;cursor:pointer}
.swatch[aria-pressed="true"]{padding:3px;border:2px solid #201e1d}
.swatch span{display:block;width:100%;height:100%;box-shadow:inset 0 0 0 1px rgba(32,30,29,.18)}
.swatch[disabled]{opacity:.4;cursor:not-allowed}
/* A finish that is photographed but not yet for sale: dimmed at rest so it
   reads as unavailable, but full strength the moment it is hovered or chosen —
   at that point you are looking at the colour, and a faded swatch would
   misrepresent it. The add button is what refuses the order. */
.swatch-soon{opacity:.45;transition:opacity .15s ease}
.swatch-soon:hover,
.swatch-soon:focus-visible,
.swatch-soon[aria-pressed="true"]{opacity:1}

.qty{display:flex;align-items:center;border:1px solid var(--divider);width:fit-content}
.qty button{width:34px;height:34px;padding:0;justify-content:center;font-size:17px}
.qty span{min-width:36px;text-align:center;font-weight:800;font-size:14px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   ADDED IN PHASE 2
   Everything above is the original stylesheet, moved here unchanged.
   Everything below replaces markup that used to repeat the same style="..."
   over and over. 25 identical inline blocks appeared 73 times between them;
   these classes are where those went. Change one here, it changes everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── text colour, the three most-repeated declarations (42 uses) ───────────── */
.muted   { color: var(--muted) }
.muted-2 { color: var(--muted-2) }
.accent  { color: var(--accent-700) }
.ink-75  { color: rgba(32,30,29,.75) }
.ink-60  { color: rgba(32,30,29,.6) }
.ink-50  { color: rgba(32,30,29,.5) }
.ink-45  { color: rgba(32,30,29,.45) }

/* ── layout ────────────────────────────────────────────────────────────────
   .row and .auto-grid took the place of 37 inline flex/grid declarations.
   Both read an optional --gap; .auto-grid reads --min for its column width,
   so a one-off becomes style="--min:190px" instead of a full declaration. */
.row      { display: flex; flex-wrap: wrap; gap: var(--gap, 12px) }
.row-base { align-items: baseline }
.row-end  { align-items: flex-end }
.row-mid  { align-items: center }
.row-tween{ justify-content: space-between }
.stack    { display: flex; flex-direction: column; gap: var(--gap, 8px) }
.auto-grid{ display: grid; gap: var(--gap, 20px);
            grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr)) }

/* ── page furniture ────────────────────────────────────────────────────────
   .sect is the home page's repeated section rhythm (4 uses). .page-head is the
   title-plus-rule block on Shop, Inquiry, Suggest and Terms (4 uses). */
.sect      { padding: clamp(32px,5cqw,72px) 20px; border-bottom: 2px solid var(--divider) }
.sect-first{ padding: clamp(36px,7cqw,96px) 20px clamp(28px,4cqw,56px);
             border-bottom: 2px solid var(--divider) }
.page      { padding: clamp(24px,3cqw,56px) 20px clamp(40px,5cqw,80px) }
.page-head { border-bottom: 2px solid var(--divider); padding-bottom: 16px;
             margin-bottom: 24px }
.page-title{ margin: 0 0 8px; font-size: clamp(28px,4.4cqw,56px); letter-spacing: -.03em }
.page-lede { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted-2) }

/* ── terms / about prose, 12 uses between the two ─────────────────────────── */
.col-head { color: var(--accent-700); border-bottom: 2px solid var(--divider);
            padding-bottom: 6px; margin-bottom: 10px }
.prose    { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: rgba(32,30,29,.75) }
.prose-sm { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted) }

/* ── buttons: the two sizes that were being spelled out inline (6 uses) ───── */
.btn-lg  { justify-content: flex-start; padding: 12px 20px; font-size: 15px }
.btn-wide{ padding: 13px 18px; font-size: 15px; margin-top: 18px }

/* ── home page tiles ──────────────────────────────────────────────────────── */
.tiles    { display: grid; gap: 1px; background: rgba(32,30,29,.25);
            border: 1px solid rgba(32,30,29,.25);
            grid-template-columns: repeat(auto-fit, minmax(190px,1fr)) }
.tile     { background: var(--bg); padding: 16px }
.tile-alt { background: var(--surface); padding: 16px; display: flex; flex-direction: column }
.tile-copy{ margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted-2) }
/* Matches the 2000x800 home page exports exactly, so object-fit has nothing
   to crop at any window width. A fixed height instead of a ratio meant the box
   changed shape as the page narrowed, which no single export can satisfy. */
.tile-media{ aspect-ratio: 5 / 2; height: auto }

/* ── form messages: these carried ~150 characters of inline style each ─────── */
.form-msg  { margin: 14px 0 0; padding: 10px 12px; font-size: 13px }
.setup-warn{ background: #fff2ef; border: 2px solid #ae1800; color: #7c1405; font-weight: 800 }
.send-error{ background: #fff2ef; border: 2px solid #ae1800; color: #7c1405 }
.form-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted) }
.form-legal { margin: 18px 0 10px; font-size: 13.5px; line-height: 1.45 }
.field-warn{ margin: 14px 0 0; font-size: 13px; color: var(--accent-700); font-weight: 800 }

/* A field that failed its check (site.js, data-check): a red border and a line of
   text under it. The text is there so the problem isn't told by colour alone. */
.input[aria-invalid="true"],
.input[aria-invalid="true"]:hover,
.input[aria-invalid="true"]:focus-visible{border-color:#ae1800;box-shadow:0 0 0 1px #ae1800}
.field-err{margin:5px 0 0;font-size:12.5px;line-height:1.35;color:#7c1405;font-weight:600}
.field-err:empty{display:none}

/* The send button while the list is empty: grey, not just faded (owner,
   2026-09-30). aria-disabled rather than disabled — it stays reachable and a
   press still gets the "nothing here yet" answer. */
.btn-primary[aria-disabled="true"],
.btn-primary[aria-disabled="true"]:hover,
.btn-primary[aria-disabled="true"]:active{background:#d6d4d3;border-color:#d6d4d3;color:#6b6866;cursor:not-allowed}

/* ── inquiry sidebar ──────────────────────────────────────────────────────── */
.aside-box { background: var(--surface); border: 2px solid var(--divider); padding: 18px }
.cart-line { display: flex; justify-content: space-between; gap: 12px; align-items: center;
             font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--hair) }
.cart-total{ display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
             margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--divider) }
.btn.cart-remove{ padding: 0 4px; font-size: 12px }   /* .btn.… so it beats the theme's button padding, as the old inline style did */

/* Order page layout (Masterplan T-07). Form on the left and the list on the right
   from 640px up. Below that the list comes first: on a 375px phone the Send
   button used to sit ~170px ABOVE the list and ~360px above the total, so people
   sent their details before they could see what they were ordering. The markup
   keeps the form first (tab order unchanged); only the visual order moves. The ✕
   was 19px wide — easy to miss on a phone — so it gets a 44px target there. */
.inq-grid{ display: grid; grid-template-columns: 1fr; align-items: start;
           gap: clamp(18px, 3cqw, 44px) }
.inq-grid > *{ min-width: 0 }
@media (min-width: 640px){ .inq-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 639px){
  .inq-aside{ order: -1 }
  .btn.cart-remove{ min-width: 44px; min-height: 44px; margin-right: -12px }
}

/* ── banner ───────────────────────────────────────────────────────────────── */
.banner     { background: var(--accent); color: var(--bg); padding: 9px 20px;
              display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
              font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
              font-weight: 800 }
.banner-sub { opacity: .75; letter-spacing: .04em; text-transform: none;
              font-weight: 400; font-size: 12.5px }

/* ── header ───────────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--bg);
       border-bottom: 2px solid var(--divider) }

/* ── adding to an inquiry ──────────────────────────────────────────────────
   Adding a product no longer navigates away — people usually want more than
   one thing. The count in the header bumps so the change is not silent. The
   reduced-motion rule above already switches this off for anyone who asks. */
@keyframes cart-bump {
  0%   { transform: scale(1) }
  30%  { transform: scale(1.4) }
  60%  { transform: scale(0.95) }
  100% { transform: scale(1) }
}
#cart-count { display: inline-block }
#cart-count.is-bumped { animation: cart-bump .45s cubic-bezier(.3,1.4,.5,1) }

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN LAYER
   Everything below is the homepage redesign's design language, layered on the
   live stylesheet above so the diff stays reviewable. Light, open and
   typographic: air and a hairline instead of heavy rules and boxes.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Softer section rules. */
  --divider:rgba(32,30,29,.30);
  /* Contrast, not taste: .55 over this ground measures 3.7:1, under the AA
     floor of 4.5:1. .66 is 5.0:1 and .76 is 7.2:1. */
  --muted:rgba(32,30,29,.66);
  --muted-2:rgba(32,30,29,.76);
  /* A control's edge needs 3:1 to read as a boundary; a section rule doesn't. */
  --control:rgba(32,30,29,.55);
  --clay:#a65b3a; --clay-ink:#8f4a2e;

  --display:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;

  --t-micro:11px; --t-sm:14px; --t-base:16px; --t-lead:18px; --t-md:21px;
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:28px;
  --s6:40px; --s7:56px; --s8:80px;
}

body{font-family:var(--body);font-size:var(--t-base);line-height:1.65}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;text-wrap:balance}
a:hover{color:var(--accent-700);text-decoration:underline}
.hr{height:1px;margin:var(--s5) 0}
.kicker{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:var(--muted)}
.ink-50,.ink-45,.ink-60{color:var(--muted)!important}
.ink-75{color:var(--muted-2)!important}
.muted{color:var(--muted)}
.muted-2{color:var(--muted-2)}

/* ── controls ──────────────────────────────────────────────────────────── */
.btn{font-family:var(--body);font-weight:600;font-size:var(--t-sm);
  padding:10px 16px;min-height:44px;border-width:1px;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{text-decoration:none}
/* The brand blue is 4.07:1 on this ground — fine for fills and graphics, under
   AA for button text. Buttons use the darker step. */
.btn-primary{background:var(--accent-600);color:#fff;border-color:var(--accent-600)}
.btn-primary:hover{background:var(--accent-700);border-color:var(--accent-700);color:#fff}
.btn-secondary{border-color:var(--control);color:var(--text)}
.btn-secondary:hover{background:rgba(32,30,29,.06);color:var(--text)}
.btn-ghost{color:var(--text);padding-inline:var(--s2);font-weight:500}
.btn-ghost:hover{background:rgba(32,30,29,.06);color:var(--text)}
.btn-lg{padding:14px 24px;font-size:var(--t-base);min-height:52px}
.input{min-height:44px;padding:10px 12px;font-family:var(--body);
  font-size:var(--t-base);border-color:var(--control)}
/* What you type stays 16px (so phones don't zoom in on focus); the hint text
   inside an empty field is one step smaller so a hint like "For the confirmation
   email" isn't cut off in the three-across row on a laptop. */
.intake .input::placeholder{font-size:var(--t-sm);text-overflow:ellipsis}
.field>label{font-size:var(--t-sm);margin-bottom:6px;color:var(--muted-2)}
.tag-outline{border-color:var(--control);color:var(--muted-2)}
.qty{border-color:var(--control)}
.qty button{width:44px;height:44px;min-height:44px}
.hdr{border-bottom:1px solid var(--divider)!important}
.hdr-mark{display:inline-flex;align-items:center;min-height:44px}

/* ── banner: white text, and the separators the owner asked for ─────────── */
.banner{color:#fff;padding:10px 20px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 10px}
.banner>span{font-family:var(--display);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#fff}
.banner-sub{opacity:1!important;font-weight:500!important;letter-spacing:.1em!important}
/* Separator dots between banner items. Rendered as an ::after on the item
   BEFORE the break and glued on with a non-breaking space, so a dot can never
   wrap to the start of the next line on its own — which is exactly what a
   ::before on the following item does at phone width. */
.banner>span:not(:last-child)::after{content:"\00a0·";opacity:.6;font-weight:500}

/* ── section rhythm: air, not boxes ─────────────────────────────────────── */
.sect{padding:clamp(52px,7cqw,112px) 20px;border-bottom:1px solid var(--divider)}
.sect-first{padding:clamp(48px,6cqw,96px) 20px clamp(48px,6cqw,96px);
  border-bottom:1px solid var(--divider)}
.page{padding:clamp(36px,4cqw,72px) 20px clamp(48px,5cqw,88px)}
.page-head{border-bottom:1px solid var(--divider);padding-bottom:var(--s4);
  margin-bottom:var(--s6)}
.page-title{font-size:clamp(30px,4.4cqw,58px);letter-spacing:-.035em}
.page-lede{font-size:var(--t-lead);line-height:1.55;color:var(--muted-2);max-width:58ch}

.sec-head{margin-bottom:clamp(32px,4cqw,56px);max-width:62ch}
.sec-head h2{margin:0;font-size:clamp(30px,4.2cqw,58px);letter-spacing:-.035em}
.sec-head p{margin:var(--s4) 0 0;max-width:58ch;color:var(--muted-2);
  font-size:var(--t-lead);line-height:1.55}
/* "It comes apart on purpose" is meant to hold one line wherever it fits. */
.sec-head .h2-single{max-width:none;text-wrap:nowrap}
@media (max-width:900px){.sec-head .h2-single{text-wrap:balance}}

/* A note under a section's sub-header that must read as its own thing, not as
   more of the sub-header (owner, 2026-09-30): ink-coloured, accent rule at the
   left, the same device as the care panel. */
.sec-head p.sec-note{margin:var(--s5) 0 0;padding:var(--s3) var(--s4);max-width:52ch;
  border-left:3px solid var(--accent);background:var(--surface);
  color:var(--text);font-weight:600;line-height:1.45}

.pull{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;text-wrap:balance;margin:clamp(36px,4cqw,56px) 0 0;
  font-size:clamp(21px,2.6cqw,34px);max-width:24ch}

/* ── images ────────────────────────────────────────────────────────────
   `contain` so a render is never cropped. Source art is authored at 4:3, so
   for every correctly-sized image `contain` and `cover` are identical and the
   picture fills the box edge to edge; anything off-ratio letterboxes onto a
   ground that matches the page, so the seam is invisible either way. */
.media{background:var(--bg);overflow:hidden}
.media img{object-fit:contain}
.media-plain{background:transparent}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1fr);
  gap:clamp(36px,5cqw,80px);align-items:center}
@media (max-width:1000px){.hero{grid-template-columns:1fr;gap:var(--s7)}}
.hero h1{font-size:clamp(42px,6.6cqw,92px);letter-spacing:-.045em;line-height:.96;
  margin:0 0 var(--s5);max-width:14ch}
.hero-lead{font-size:clamp(17px,1.5cqw,21px);line-height:1.5;max-width:46ch;
  color:var(--muted-2);margin:0 0 var(--s6)}
.hero-lead b{color:var(--text);font-weight:600}
.hero-fit{font-size:15px;line-height:1.5;color:var(--muted-2);margin:calc(-1 * var(--s4)) 0 var(--s6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ── hero drawing ──────────────────────────────────────────────────────
   The render sits on the page with no ground of its own. Leader lines and
   labels are percentage-positioned so they stay welded together at any width,
   and the label text is sized in real px so it never scales away.
   To swap the hero image, change the three coordinate pairs in HERO_CALLOUTS
   in site.js — nothing here needs touching. */
/* The hero render is a wide 2.5:1 crop, not a 4:3 grid cell, so it keeps its
   own ratio rather than letterboxing inside a forced box. Grid images (cards,
   steps) are all authored 4:3 and do get a fixed ratio, because there they
   have to line up with each other. */
.hero-fig{position:relative;margin:0;background:transparent}
.hero-fig>img{width:100%;height:auto;display:block}
.callouts{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none}
.callouts line{stroke:rgba(32,30,29,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.callouts circle{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.callouts text{font-family:var(--display);font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;fill:var(--text)}
.callouts .cnum{fill:var(--accent-700)}
/* The legend is permanent, not a mobile fallback: it carries the explanation
   the short drawing labels leave out, and it is the version a screen reader
   gets. Below 700px the drawing hides and this stands on its own. */
.callout-list{display:block;margin:var(--s4) 0 0;padding:0;list-style:none}
.callout-list li{display:grid;grid-template-columns:7.5em 1fr;gap:var(--s3);
  padding:10px 0;border-bottom:1px solid var(--hair);font-size:13.5px;
  line-height:1.5;color:var(--muted-2)}
@media (max-width:420px){.callout-list li{grid-template-columns:1fr;gap:2px}}
.callout-list li:last-child{border-bottom:0}
.callout-list b{font-family:var(--display);font-size:var(--t-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-700);font-weight:800}
@media (max-width:700px){.callouts{display:none}}

/* ── the system: three open columns, no grid chrome ─────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(28px,3.5cqw,56px);background:none;border:0}
.step{display:flex;flex-direction:column;background:none;padding:0}
.step-hd{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s4) 0 var(--s2)}
.step-n{font-family:var(--display);font-weight:800;font-size:var(--t-micro);
  letter-spacing:.14em;color:var(--accent-700)}
.step-t{font-family:var(--display);font-weight:800;font-size:var(--t-md);
  letter-spacing:-.02em}
.step p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--muted-2);max-width:40ch}

/* ── spec tables: open rows on hairlines, no frame, no fill ─────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.spec-tbl{width:100%;border-collapse:collapse;min-width:460px}
.spec-tbl caption{text-align:left;padding:0 0 var(--s3);font-family:var(--display);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--muted);border-bottom:1px solid var(--divider)}
.spec-tbl th,.spec-tbl td{text-align:left;padding:14px var(--s4) 14px 0;
  border-bottom:1px solid var(--hair);font-size:var(--t-sm);line-height:1.55;
  vertical-align:baseline}
.spec-tbl th:last-child,.spec-tbl td:last-child{padding-right:0}
.spec-tbl thead th{font-family:var(--display);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.spec-tbl tbody th{font-weight:600;font-size:var(--t-base);white-space:nowrap;color:var(--text)}
.spec-tbl tbody tr:last-child th,.spec-tbl tbody tr:last-child td{border-bottom:0}
table.spec-tbl--pairs{min-width:0}
@media (max-width:520px){.spec-tbl--pairs tbody th{white-space:normal}}
.st-yes{color:var(--accent-700);font-weight:600;white-space:nowrap}
.st-soon{color:var(--clay-ink);font-weight:600;white-space:nowrap}
.st-ask{color:var(--muted);white-space:nowrap}

/* Care is the one thing a customer has to take in, so it gets the page's only
   tinted panel and a heavier rule. */
.care-panel{background:var(--surface);padding:clamp(20px,2.4cqw,32px);
  border-left:3px solid var(--accent)}
.care-panel .spec-tbl caption{border-bottom-color:var(--control)}
.care-lede{font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(19px,2.2cqw,26px);line-height:1.15;margin:0 0 var(--s4);max-width:26ch}

/* ── ordering ──────────────────────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(28px,3.5cqw,52px)}
.flow div{display:flex;flex-direction:column;gap:var(--s2)}
.flow dt{font-family:var(--display);font-weight:800;font-size:var(--t-lead);
  letter-spacing:-.02em}
.flow dd{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--muted-2);max-width:36ch}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--hair)}
.faq details:first-child{border-top:1px solid var(--divider)}
.faq summary{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s5);padding:var(--s5) 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:800;font-size:var(--t-md);
  letter-spacing:-.02em;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-weight:400;
  font-size:26px;line-height:1;color:var(--accent-700);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent-700)}
.faq details>p{margin:0 0 var(--s5);max-width:68ch;color:var(--muted-2);font-size:var(--t-base)}

/* ── product cards ─────────────────────────────────────────────────────── */
.card-prod{gap:0}
.card-prod .kicker{margin-top:var(--s3);font-size:var(--t-micro)!important}
.card-prod[data-open="1"]:hover .prod-name{color:var(--accent-700)}
.prod-row{margin-top:var(--s3)}   /* no rule above the name any more (owner, round 9) */
.prod-name{font-family:var(--display);font-size:var(--t-lead);letter-spacing:-.02em;
  transition:color .15s ease}
.prod-price{font-family:var(--body);font-weight:600;font-size:var(--t-base)}
.prod-blurb{margin:var(--s2) 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--muted)}
/* "Hook included" / "Needs a hook": a plain, normal-weight note, left-aligned, at
   the foot of the card (owner, round 9: left again; round 8 tried it on the right).
   margin-top:auto lines the notes up across a row of cards. */
.card-note{margin:auto 0 0;padding-top:var(--s2);font-size:13px;line-height:1.4;font-weight:400;
  text-align:left;letter-spacing:0;text-transform:none;color:var(--muted)}
.soon-flag{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.12em;
  background:var(--clay)}

/* ── detail page ───────────────────────────────────────────────────────── */
#d-info-block{border-top:1px solid var(--divider)!important}
.info-group{margin-bottom:var(--s5)}
.info-group:last-child{margin-bottom:0}
.info-group h3{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:var(--muted);margin:0 0 var(--s2)}
.info-group p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--muted-2);max-width:48ch}
.info-group ul{margin:0;padding-left:18px;font-size:var(--t-sm);line-height:1.7;
  color:var(--muted-2);max-width:48ch}
.info-group li strong{font-weight:700}
.dim-note{margin:0 0 var(--s2);font-size:var(--t-sm);line-height:1.6;color:var(--muted)}
/* ── shop paths (Masterplan T-26): Complete sets · Build your own · Parts ─────── */
.shop-tabs{display:flex;flex-wrap:wrap;gap:0 8px;margin:0 0 clamp(20px,2.4cqw,32px);
  border-bottom:1px solid var(--divider)}
.shop-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin-bottom:-1px;
  font-family:var(--display);font-weight:600;font-size:var(--t-sm);color:var(--muted-2);
  border-bottom:2px solid transparent}
.shop-tabs a:hover{color:var(--accent-700)}
.shop-tabs a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}

/* Add-on picker: buy the matching hook without leaving the product page. */
.addon{margin:var(--s4) 0 0}
.addon-note{margin:var(--s3) 0 0;font-size:13px;color:var(--muted)}
.addon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
/* "Added" is a finished state, not a faded-out disabled button. */
.btn.is-added,.btn.is-added:disabled{opacity:1;cursor:default;background:var(--accent-100);
  border-color:var(--accent);color:var(--accent-700)}
.addon-undo{background:none;border:0;padding:10px 4px;min-height:44px;font:inherit;font-size:13px;
  color:var(--accent-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.addon-undo:hover{color:var(--accent)}

/* ── footer ────────────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--divider);padding:clamp(48px,5cqw,80px) 20px var(--s7)}
.ftr-grid{display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(36px,4cqw,64px) var(--s6);align-items:start}
.ftr h3{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:var(--muted);margin:0 0 var(--s4)}
.ftr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
/* Footer links are real tap targets on a phone, so row padding — not a flex
   gap — gives each a 44px-tall hit area. */
.ftr li a{display:inline-block;padding-block:13px;line-height:1.3;
  font-size:var(--t-sm);color:var(--muted-2);overflow-wrap:anywhere}
.ftr li a:hover{color:var(--accent-700)}
.ftr-note{margin:var(--s4) 0 0;font-size:var(--t-sm);line-height:1.6;
  color:var(--muted);max-width:34ch}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* The contents block is rewritten per product, so its trailing space lives
   here rather than on whichever element happens to be last. */
#d-contents{display:block;margin-bottom:var(--s5);padding-bottom:var(--s5);
  border-bottom:1px solid var(--divider)}

/* ── wheel fitment ──────────────────────────────────────────────────────
   The model list appears twice on the site and is authored once: as plain
   text in the FAQ (crawlable, and the version a screen reader reads), and as
   a chip on each product page that reveals the same models on demand. */
.wheel-list{margin:var(--s4) 0;padding:0}
.wheel-list>div{display:grid;grid-template-columns:8.5em 1fr;gap:var(--s3);
  padding:12px 0;border-bottom:1px solid var(--hair)}
.wheel-list>div:last-child{border-bottom:0}
.wheel-list dt{font-family:var(--display);font-weight:800;font-size:var(--t-sm);
  letter-spacing:-.01em}
.wheel-list dd{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.wheel-list dd span{font-size:var(--t-sm);color:var(--muted-2)}
.wheel-list>div[data-soon] dt,.wheel-list>div[data-soon] dd span{color:var(--muted)}
@media (max-width:460px){
  .wheel-list>div{grid-template-columns:1fr;gap:4px}
}

/* Chip + disclosure. Opens on hover for a mouse, on focus for a keyboard, and
   on tap via aria-expanded — hover alone would hide the models from phones
   entirely, which is where most of this traffic will be. */
.wheel-chips{position:relative}
.wheel-chip{position:relative;display:inline-flex}
/* A 44px hit area, like every other control on the site — these are tapped on
   phones, which is exactly where a hover-only tooltip would have failed. */
.wheel-btn{font-family:var(--body);font-size:13px;font-weight:500;
  cursor:pointer;background:transparent;padding:10px 13px;min-height:44px;
  border:1px dashed var(--control);color:var(--muted-2);
  transition:border-color .15s ease,color .15s ease}
.wheel-btn:hover,.wheel-btn:focus-visible{border-style:solid;
  border-color:var(--accent);color:var(--accent-700)}
.wheel-chip.is-soon .wheel-btn{opacity:.6}

.wheel-pop{position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;
  min-width:max(100%,170px);width:max-content;max-width:min(78vw,280px);
  display:flex;flex-direction:column;gap:3px;
  padding:10px 12px;background:var(--text);color:var(--bg);
  opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
.wheel-chip:hover .wheel-pop,
.wheel-chip:focus-within .wheel-pop,
.wheel-btn[aria-expanded="true"] + .wheel-pop{opacity:1;visibility:visible;transform:none}
.wheel-pop-h{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:rgba(243,242,242,.65);margin-bottom:2px}
.wheel-pop-m{font-size:13px;line-height:1.45}
/* Keep the panel on screen when a chip sits near the right edge. */
.wheel-chip:last-child .wheel-pop{left:auto;right:0}
@media (prefers-reduced-motion:reduce){.wheel-pop{transition:none}}

/* The header is sticky, so an in-page anchor that lands at top:0 sits behind
   it. Reserve its height on anything a link can jump to. */
.sect,.sect-first,#wheels-faq{scroll-margin-top:96px}

/* A standalone link on its own line is a real target, not an inline link in a
   sentence, so it gets a proper hit area rather than a 17px one. */
.link-target{display:inline-block;padding-block:13px;line-height:1.35}

/* Hover hint (site.js, enhanceHints): a link that opens its answer in place
   instead of leaving the page. Opens on hover for a mouse, on focus for a
   keyboard, and on tap through aria-expanded — hover alone would hide it from
   phones. The hover rule is limited to devices that really hover, because on a
   touch screen "hover" sticks after a tap and the panel could never be closed
   by tapping its link again. */
.hint{position:relative}
.hint-btn{font:inherit;color:var(--accent-700);background:none;border:0;padding:12px 0;margin:-12px 0;
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-thickness:1px}
.hint-btn:hover,.hint-btn[aria-expanded="true"]{color:var(--accent);text-decoration-style:solid}
.hint-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:30;
  width:max-content;max-width:min(86vw,360px);
  display:flex;flex-direction:column;gap:6px;
  padding:12px 14px;background:var(--text);color:var(--bg);
  font-size:13px;line-height:1.45;font-weight:400;letter-spacing:0;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
/* Bridges the 4px gap so the pointer can travel from the link into the panel. */
.hint-pop::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.hint-btn:focus-visible + .hint-pop,
.hint-btn[aria-expanded="true"] + .hint-pop{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.hint:hover .hint-pop{opacity:1;visibility:visible;transform:none}}
.hint-h{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:rgba(243,242,242,.65)}
.hint-row{display:grid;grid-template-columns:7.5em 1fr;gap:10px}
.hint-row b{font-weight:800}
.hint-foot{margin-top:2px;padding-top:8px;border-top:1px solid rgba(243,242,242,.25);
  color:rgba(243,242,242,.8)}
@media (prefers-reduced-motion:reduce){.hint-pop{transition:none}}

/* Detail gallery: a tile left alone on the final row spans the full width
   instead of sitting stranded at half. Positional, so it holds for any number
   of views — products now carry anywhere from one to six. */
#d-gallery > .media:last-child:nth-child(odd){grid-column:1 / -1}

/* ── logo and navigation ────────────────────────────────────────────────
   .wordmark never declared a typeface — it inherited Archivo from body. When
   body moved to Instrument Sans the logo silently went with it and started
   rendering in the wrong face, which read as "thin". It names its own font
   now, so it cannot drift again. Weight 900 is Archivo Black, per the brand
   guide's 800–900 range for the wordmark. */
.wordmark{font-family:var(--display);font-weight:900;
  font-variation-settings:'wdth' 125;letter-spacing:-.045em;line-height:1}

/* The nav sat at weight 500, against 800 on the old site. Same pixel size,
   but far lighter — which reads as smaller. */
.hdr-links .btn-ghost{font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:-.005em;padding-inline:10px}
.hdr-cart{font-family:var(--display);font-weight:700;font-size:15px}

/* ── all headings are Archivo Black ──────────────────────────────────────
   Mane, 2026-09-28. Weight 900 across every heading, not just the wordmark.
   Declared last so it wins over the earlier 800s without editing each rule.
   The small caps labels (.kicker, footer column heads) stay at 800: they are
   signposts, not headings, and 900 at 11px fills in and turns muddy. */
h1,h2,h3,h4,
.hero h1,.sec-head h2,.page-title,.pull,.care-lede,
.step-t,.flow dt,.prod-name,.faq summary{
  font-family:var(--display);font-weight:900}

/* ── Archivo carries the interface, Instrument Sans carries the prose ────
   Mane, 2026-09-28: headers, prices and CTAs in Archivo. So the split is by
   ROLE, not by element — anything you act on or read at a glance is Archivo;
   running text stays Instrument Sans, which is easier at paragraph length. */
.btn,.btn-lg,.btn-primary,.btn-secondary,.btn-ghost,
.prod-price,#d-price,#cart-total,
.st-yes,.st-soon,.st-ask,
.spec-tbl tbody th,
.banner>span{
  font-family:var(--display)}
.btn{font-weight:800;letter-spacing:-.005em}
.btn-ghost{font-weight:700}
.prod-price,#d-price,#cart-total{font-weight:800;letter-spacing:-.01em}

/* A nudge, not a blocker. Clay rather than red: nothing is wrong, there is
   just something they probably want. Sits under the list where it is read at
   the moment of sending, and never prevents a submission — plenty of people
   already own a hook. */
.hook-hint{margin:14px 0 0;padding:12px 14px;background:var(--surface);
  border-left:3px solid var(--clay);font-size:13.5px;line-height:1.55;
  color:var(--muted-2)}
.hook-hint b{color:var(--text);font-weight:600}
.hook-hint[hidden]{display:none}

/* ── shop hierarchy ─────────────────────────────────────────────────────────
   Section (h2) > sub-section (h3) > product name. On desktop the sizes are the
   clamps that used to be inline; on phones each level steps down clearly and
   each product gets air and a rule of its own so a price sits with its name. */
.shop-sec{margin:0;font-size:clamp(30px,5cqw,64px);letter-spacing:-.03em}
.shop-grp{margin:0;font-size:clamp(18px,2.2cqw,26px);letter-spacing:-.02em}
@media (max-width:700px){
  .shop-sec{font-size:40px;line-height:1.05}
  .shop-grp{font-size:25px;line-height:1.15;padding-left:10px;border-left:4px solid var(--accent-700)}
  #shop-groups>section{margin-bottom:64px!important}
  #shop-groups section section{margin-bottom:48px!important}
  #shop-groups .grid-3{gap:44px}
  #shop-groups .card-prod .prod-row{margin-top:12px}
  #shop-groups .card-prod .prod-name{font-size:17px;line-height:1.25}
  #shop-groups .card-prod .prod-price{font-size:17px;font-weight:800}
  #shop-groups .card-prod .prod-blurb{margin-top:6px}
}

/* More air between products on a phone (owner, 2026-09-30: "confusing which
   product headline goes with which product"). Cards stack one above the next, and
   the old 16–20px gap put a caption about as close to the NEXT picture as to its
   own (a caption sits 12px under its own picture). Now the next picture is 44px
   away, and a new group heading ("Tray sets") 64px, so a caption can only belong
   to the picture above it. The #shop-groups rules above predate the Shop split and
   no longer match anything, which is why this wasn't already in force. */
@media (max-width:700px){
  .grid-3,#featured-grid,#shop-sets-grid,#shop-build-grid{row-gap:44px}
  .shop-group{margin-bottom:64px!important}
}

/* ── privacy-notice strip ─────────────────────────────────────────────────
   The 30-day site notice the privacy notice promises for a material change
   (src/site/storefront.ts, privacyStrip). Quiet on purpose: it informs, it
   doesn't nag, and it removes itself after 30 days. */
.notice-strip{margin:0;padding-block:18px;font-size:12.5px;line-height:1.45;color:var(--muted-2)}
.notice-strip a{color:inherit;text-decoration:underline;text-underline-offset:2px}