/* ============================================================
   Design tokens — derived from ui-design-rules.md
   Brand hue 36 (brass/amber). Black + white + ~5 HSB variations.
   Spacing scale 4/8/12/16/24/32/40/48/64. 12-col grid.
   Type: Archivo (display) + Inter (body/UI). Ratio 1.20.
   All colours checked for WCAG 2.1 AA contrast.
   ============================================================ */

:root{
  /* neutrals */
  --paper:      #FAF8F4;   /* page background (warm off-white) */
  --surface:    #FFFFFF;   /* cards / raised surfaces */
  --ink-strong: #201D19;   /* primary text / near-black  (15.8:1 on paper) */
  --ink:        #514B43;   /* body text                  (8.1:1) */
  --ink-weak:   #6C665D;   /* secondary text             (5.4:1) */

  /* lines */
  --hairline:   #E7E2D9;   /* decorative dividers */
  --stroke:     #847C6D;   /* meaningful UI / form borders (>=3:1) */

  /* brand — brass/amber, applied to interactive + accents only */
  --brand:      #A66A0C;   /* accent / UI (4.2:1 on paper, >=3:1) */
  --brand-text: #8A5606;   /* brand-coloured text        (5.8:1) */
  --brand-weak: #F4E7CE;   /* tonal fill */

  /* status (reserved, not decorative) */
  --error:  #B3261E;
  --success:#1F7A3D;

  /* type scale (px) — base 16, ratio ~1.20, rounded */
  --t-display: 56px;
  --t-h1: 40px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 20px;
  --t-body: 16px;
  --t-small: 14px;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  --maxw: 1200px;
  --radius: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:var(--t-body);
  line-height:1.5;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand-text); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* focus — visible for keyboard users */
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:2px; }

/* type helpers */
.display,h1,h2,h3{ font-family:"Archivo",sans-serif; color:var(--ink-strong); }
.display{ font-size:clamp(38px,6vw,var(--t-display)); line-height:1.05;
  font-weight:800; letter-spacing:-0.02em; }
h1{ font-size:var(--t-h1); line-height:1.1; font-weight:800; letter-spacing:-0.015em; margin:0; }
h2{ font-size:var(--t-h2); line-height:1.125; font-weight:700; letter-spacing:-0.01em; margin:0; }
h3{ font-size:var(--t-h3); line-height:1.33; font-weight:700; margin:0; }
p{ margin:0; }
.num{ font-variant-numeric:tabular-nums lining-nums; }

.eyebrow{
  font-family:"Archivo",sans-serif;
  font-size:var(--t-small); font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--brand-text);
}

/* layout */
.wrap{ width:min(100% - var(--s8), var(--maxw)); margin-inline:auto; }
.shell{
  display:grid;
  grid-template-columns:1fr;
}
@media(min-width:960px){
  .shell{ grid-template-columns:236px minmax(0,1fr); gap:var(--s16);
    width:min(100% - var(--s12), var(--maxw)); margin-inline:auto; }
}

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.masthead__inner{
  width:min(100% - var(--s8), var(--maxw)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); min-height:64px; padding-block:var(--s3);
}
.brandmark{ display:flex; align-items:baseline; gap:var(--s2);
  font-family:"Archivo",sans-serif; font-weight:800; font-size:var(--t-h4);
  color:var(--ink-strong); letter-spacing:-0.01em; }
.brandmark:hover{ text-decoration:none; }
.brandmark .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand);
  display:inline-block; transform:translateY(-1px); }
.brandmark .tag{ font-family:"Inter",sans-serif; font-weight:500; font-size:var(--t-small);
  color:var(--ink-weak); letter-spacing:0; }

.mast-tools{ display:flex; align-items:center; gap:var(--s2); }

/* currency toggle — segmented control */
.ccy{ display:inline-flex; border:1px solid var(--stroke); border-radius:var(--radius);
  overflow:hidden; background:var(--surface); }
.ccy button{
  min-height:48px; min-width:56px; padding:0 var(--s3);
  border:0; background:transparent; cursor:pointer;
  font:inherit; font-weight:600; font-size:var(--t-small); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ccy button[aria-pressed="true"]{ background:var(--ink-strong); color:var(--paper); }
.ccy button + button{ border-left:1px solid var(--stroke); }

.basket{
  min-height:48px; min-width:48px; display:inline-flex; align-items:center; gap:var(--s2);
  padding:0 var(--s4); border-radius:var(--radius);
  background:var(--ink-strong); color:var(--paper);
  font-weight:600; font-size:var(--t-small);
}
.basket:hover{ text-decoration:none; }
.basket .cnt{ font-variant-numeric:tabular-nums; }

/* ---------- left rail (nav signature) ---------- */
.rail{ display:none; }
@media(min-width:960px){
  .rail{ display:block; position:sticky; top:88px; height:max-content;
    padding-block:var(--s10); }
  .rail__title{ font-size:var(--t-small); color:var(--ink-weak);
    letter-spacing:0.08em; text-transform:uppercase; margin-bottom:var(--s4);
    font-family:"Archivo",sans-serif; font-weight:700; }
  .rail__list{ list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:var(--s1); }
  .rail__link{ display:block; padding:var(--s2) var(--s3);
    color:var(--ink); font-weight:500; border-left:2px solid var(--hairline);
    line-height:1.35; }
  .rail__link:hover{ text-decoration:none; color:var(--ink-strong);
    border-left-color:var(--stroke); }
  .rail__link .c{ font-variant-numeric:tabular-nums; color:var(--ink-weak);
    font-size:var(--t-small); }
  .rail__link[aria-current="true"]{ color:var(--ink-strong); font-weight:700;
    border-left-color:var(--brand); }
  .rail__foot{ margin-top:var(--s8); padding-top:var(--s6);
    border-top:1px solid var(--hairline); font-size:var(--t-small);
    color:var(--ink-weak); }
}

/* mobile category chips */
.chips{ display:flex; gap:var(--s2); overflow-x:auto; padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--hairline); -webkit-overflow-scrolling:touch;
  position:sticky; top:64px; z-index:30; background:var(--paper); }
.chips a{ flex:0 0 auto; padding:var(--s2) var(--s3); border:1px solid var(--stroke);
  border-radius:999px; color:var(--ink); font-size:var(--t-small); font-weight:600; }
.chips a:hover{ text-decoration:none; }
@media(min-width:960px){ .chips{ display:none; } }

/* ---------- opener (not a stock hero) ---------- */
.opener{ padding-block:var(--s16) var(--s10); }
.opener__grid{ display:grid; gap:var(--s10); }
@media(min-width:760px){
  .opener__grid{ grid-template-columns:1.35fr 1fr; align-items:end; gap:var(--s16); }
}
.opener p.lede{ margin-top:var(--s6); max-width:52ch; color:var(--ink);
  font-size:var(--t-h4); line-height:1.5; }
.opener .kicker{ margin-bottom:var(--s4); }

/* spec readout panel */
.readout{ border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--surface); }
.readout__row{ display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4); padding:var(--s4); }
.readout__row + .readout__row{ border-top:1px solid var(--hairline); }
.readout__k{ font-size:var(--t-small); color:var(--ink-weak);
  text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }
.readout__v{ font-family:"Archivo",sans-serif; font-weight:700; color:var(--ink-strong);
  font-variant-numeric:tabular-nums; font-size:var(--t-h4); }

/* ---------- catalogue sections ---------- */
.cat{ padding-block:var(--s10); border-top:1px solid var(--hairline); scroll-margin-top:120px; }
.cat__head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s8); flex-wrap:wrap; }
.cat__note{ color:var(--ink-weak); margin-top:var(--s2); max-width:44ch; }
.cat__count{ font-family:"Archivo",sans-serif; font-weight:700; color:var(--ink-weak);
  font-size:var(--t-small); letter-spacing:0.08em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* product grid on 12-col logic */
.grid{ display:grid; gap:var(--s6);
  grid-template-columns:repeat(1,minmax(0,1fr)); }
@media(min-width:560px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1080px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{ display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden;
  transition:border-color .15s ease, transform .15s ease; }
.card:hover{ border-color:var(--stroke); transform:translateY(-2px); }
.card__media{ aspect-ratio:4/3; background:var(--brand-weak); overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);
  flex:1; }
.card__cat{ font-size:var(--t-small); color:var(--brand-text); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; }
.card__name{ font-size:var(--t-h4); }
.card__desc{ color:var(--ink); font-size:var(--t-small); line-height:1.5; }
.card__foot{ margin-top:auto; display:flex; align-items:center;
  justify-content:space-between; gap:var(--s3); padding-top:var(--s3); }
.price{ font-family:"Archivo",sans-serif; font-weight:800; color:var(--ink-strong);
  font-size:var(--t-h3); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }

/* ---------- buttons: 3 weights ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:0 var(--s6); border-radius:var(--radius);
  font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent;
  line-height:1; text-align:center; }
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--ink-strong); color:var(--paper); border-color:var(--ink-strong); }
.btn--primary:hover{ background:#000; }
.btn--secondary{ background:transparent; color:var(--ink-strong); border-color:var(--stroke); }
.btn--secondary:hover{ border-color:var(--ink-strong); background:var(--brand-weak); }
.btn--tertiary{ background:transparent; color:var(--brand-text); border-color:transparent;
  padding:0 var(--s2); }
.btn--tertiary:hover{ text-decoration:underline; text-underline-offset:3px; }
.btn--sm{ min-height:48px; padding:0 var(--s4); font-size:var(--t-small); }
.card .btn--secondary{ min-height:48px; padding:0 var(--s4); }

/* ---------- content pages (policies) ---------- */
.doc{ padding-block:var(--s12) var(--s16); }
.doc__inner{ width:min(100% - var(--s8), 760px); margin-inline:auto; }
.doc h1{ margin-bottom:var(--s3); }
.doc .updated{ color:var(--ink-weak); font-size:var(--t-small); margin-bottom:var(--s10); }
.doc h2{ font-size:var(--t-h3); margin-top:var(--s10); margin-bottom:var(--s4);
  padding-top:var(--s6); border-top:1px solid var(--hairline); }
.doc h2:first-of-type{ border-top:0; padding-top:0; margin-top:var(--s6); }
.doc h3{ font-size:var(--t-h4); margin-top:var(--s6); margin-bottom:var(--s3); }
.doc p{ margin-bottom:var(--s4); max-width:72ch; }
.doc ul{ margin:0 0 var(--s4); padding-left:var(--s6); }
.doc li{ margin-bottom:var(--s2); max-width:72ch; }
.doc strong{ color:var(--ink-strong); }
.doc .callout{ background:var(--brand-weak); border-radius:var(--radius);
  padding:var(--s4) var(--s6); margin-bottom:var(--s8); color:var(--ink-strong); }
.doc table{ width:100%; border-collapse:collapse; margin-bottom:var(--s6);
  font-size:var(--t-small); }
.doc th,.doc td{ text-align:left; padding:var(--s3); border:1px solid var(--hairline);
  vertical-align:top; }
.doc th{ background:var(--surface); font-family:"Archivo",sans-serif; }
.tocback{ margin-bottom:var(--s8); }

/* ---------- newsletter form ---------- */
.signup{ display:grid; gap:var(--s2); max-width:420px; }
.signup label{ font-size:var(--t-small); font-weight:600; color:var(--ink-strong); }
.signup .hint{ font-size:var(--t-small); color:var(--ink-weak); }
.signup .field{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.signup input[type="email"]{
  flex:1 1 200px; min-height:48px; padding:0 var(--s3);
  border:1px solid var(--stroke); border-radius:var(--radius);
  font:inherit; color:var(--ink-strong); background:var(--surface); }
.signup input::placeholder{ color:var(--ink-weak); }
.signup input:focus-visible{ border-color:var(--brand); }
.msg{ font-size:var(--t-small); min-height:20px; }
.msg.ok{ color:var(--success); }
.msg.err{ color:var(--error); }

/* ---------- footer ---------- */
.foot{ background:var(--ink-strong); color:var(--paper); margin-top:var(--s16); }
.foot a{ color:var(--paper); }
.foot__inner{ width:min(100% - var(--s8), var(--maxw)); margin-inline:auto;
  padding-block:var(--s12);
  display:grid; gap:var(--s10); }
@media(min-width:820px){ .foot__inner{ grid-template-columns:1.4fr 1fr 1.2fr; gap:var(--s16); } }
.foot h4{ font-family:"Archivo",sans-serif; font-size:var(--t-small); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:#C9BFA9; margin:0 0 var(--s4); }
.foot .brandmark{ color:var(--paper); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.foot .legal{ font-size:var(--t-small); line-height:1.6; color:#C9BFA9; }
.foot .legal strong{ color:var(--paper); }
.foot__bar{ border-top:1px solid rgba(255,255,255,.14); }
.foot__bar-inner{ width:min(100% - var(--s8), var(--maxw)); margin-inline:auto;
  padding-block:var(--s6); font-size:var(--t-small); color:#C9BFA9;
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--ink-strong); color:var(--paper);
  padding:var(--s3) var(--s4); border-radius:var(--radius); z-index:100; }
.skip:focus{ left:var(--s4); top:var(--s4); }

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