/* Zolto — shared theme (css/theme.css)
   Modern editorial: Warm Ivory environment, Ink structure, Deep Oxblood as the
   rare signature accent — with Soft Stone secondary sections, Warm Graphite
   secondary text, and Muted Brass only as a sparing micro-detail. Classic serif
   display (Cormorant Garamond) + neutral sans (Manrope). Ivory creates the
   environment, Ink creates structure, Oxblood creates recognition, and the
   handbags provide the colour. Static, flat: no JS, no transitions, no
   hover/focus/active changes.
   Square, flat, static. Implements style-guide.md. No JS, no transitions, no
   hover/focus/active changes, no animation. Depth comes from tonal sand bands,
   hairlines and imagery.
   Token names (--ivory, --wine, --gold, --ink, …) are kept from the prior
   palette to avoid touching every page.css that references them — only the
   hex values changed to the new brand colors, plus one new --burgundy token
   for primary CTAs (see below). Fonts are Cormorant Garamond (display) and
   Manrope (body/UI), loaded from Google Fonts in partials/head.html per
   style-guide.md §3, each with a system fallback. */

/* ─────────────────────────────  Tokens  ───────────────────────────── */
:root{
  /* Warm Ivory (canvas & surfaces) — the environment. ~70-80% of the page.
     Token names kept from the prior palette so no page.css needs touching;
     only the hex values changed. */
  --ivory:   #F4F1EA;   /* Warm Ivory — page canvas & primary background */
  --ivory-2: #DCD5CA;   /* Soft Stone — secondary sections, cards, spec, inputs */
  --ivory-3: #D3CBBE;   /* deeper stone — hairline fills, quiet blocks */

  /* Ink & Warm Graphite (text & structure). Ink is near-black but softer than
     pure black; Graphite carries secondary copy. Both pass WCAG AA on ivory. */
  --ink:   #1E1D1B;     /* Ink — headings, primary body, nav, prices (~15:1) */
  --ink-2: #55534F;     /* Warm Graphite — secondary text, descriptors (~6.9:1) */
  --ink-3: #6E6B64;     /* muted graphite — meta, captions, small labels (~4.7:1) */
  --line:  #D3CBBE;     /* hairline rules & borders (from Soft Stone) */

  /* Deep Oxblood — the signature ZOLTO accent, used rarely and intentionally:
     primary CTAs, key links, active nav. NEVER a large background (3-5% max). */
  --burgundy:       #4A2025;   /* Deep Oxblood — primary action */
  --burgundy-hover: #3B191D;   /* darker oxblood (documented; static build = no hover) */

  /* Muted Brass — a metallic thread, EXTREMELY sparing (tiny rules, eyebrow
     ticks, micro-details). Never as text (fails AA on ivory), never large fills;
     the physical hardware provides most of the metallic feel via photography. */
  --gold:      #A28A67;   /* Muted Brass — decorative ticks & hairlines only */
  --gold-text: #7C6A4C;   /* AA-safe brass, only if brass TEXT is ever required */

  /* Ink grounding for the footer / dark UI (token name kept as --wine). */
  --wine: #1E1D1B;      /* Ink — footer background */

  /* Functional colors (forms, badges — not yet used anywhere) */
  --color-gray-mid: #8A8078;
  --color-error:    #A3372B;
  --color-success:  #4B6B3A;

  /* On the Ink footer */
  --on-wine:   #F4F1EA;             /* ivory text on Ink */
  --on-wine-2: #B4AEA3;             /* muted light neutral (from Stone) — footer secondary */
  --line-wine: rgba(244,241,234,.14);

  /* Semantic aliases — the brand-spec role names, mapped to the design-system
     tokens above (references, not duplicated values). */
  --color-background:            var(--ivory);
  --color-background-secondary:  var(--ivory-2);
  --color-text-primary:          var(--ink);
  --color-text-secondary:        var(--ink-2);
  --color-brand-primary:         var(--burgundy);
  --color-brand-primary-hover:   var(--burgundy-hover);
  --color-accent-metal:          var(--gold);
  --color-border:                var(--line);
  --color-button-primary-bg:     var(--burgundy);
  --color-button-primary-text:   var(--on-wine);
  --color-footer-bg:             var(--wine);
  --color-footer-text:           var(--on-wine);

  /* Type families — loaded from Google Fonts in partials/head.html per
     style-guide.md §3. Cormorant Garamond for headlines/display, Manrope for
     body & UI, each with a system fallback so text renders before the web
     fonts arrive. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
  --font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale. --step-0 (Body), --step-3/4/5 (H3/H2/H1) are fixed at the
     exact sizes in style-guide.md's type scale table. The remaining steps
     (eyebrows, meta text, buttons, captions) stay fluid — the new guide
     doesn't define those, so they keep the prior restrained-editorial scale. */
  --step--1: clamp(0.75rem,   0.73rem  + 0.11vw, 0.8125rem); /* 12 → 13px */
  --step-0:  1rem;                                           /* 16px — Body */
  --step-1:  clamp(1.0625rem, 1.01rem  + 0.27vw, 1.25rem);   /* 17 → 20px */
  --step-2:  clamp(1.25rem,   1.18rem  + 0.36vw, 1.5rem);    /* 20 → 24px */
  --step-3:  1.5rem;                                         /* 24px — H3 */
  --step-4:  2.125rem;                                       /* 34px — H2 */
  --step-5:  3rem;                                           /* 48px — H1 */

  /* Spacing scale — fixed multiples of the style-guide.md 8px base unit
     (4px kept as the guide's own half-step exception). Token names are kept
     from the prior fluid scale (see color-token note above for why); every
     one of the new guide's six named values (xs 4, sm 8, md 16, lg 24,
     xl 40, 2xl 80) lands exactly on one of these nine tokens. The three
     extra tokens (--space-xs, --space-l's neighbor --space-xl, --space-3xl)
     fill gaps the site's finer-grained layout needs that the six-step guide
     scale doesn't define. */
  --space-3xs: 4px;   /* = guide xs */
  --space-2xs: 8px;   /* = guide sm */
  --space-xs:  12px;
  --space-s:   16px;  /* = guide md */
  --space-m:   24px;  /* = guide lg */
  --space-l:   40px;  /* = guide xl */
  --space-xl:  56px;
  --space-2xl: 80px;  /* = guide 2xl */
  --space-3xl: 128px;

  /* Layout */
  --page-max: 1320px;
  --measure: 66ch;
  --gutter: clamp(20px, 5vw, 72px);

  /* Shape */
  /* 2px — style-guide.md buttons/forms spec ("sharp, minimal — not
     pill-shaped"). Shared by buttons, product-card media, spec panels,
     and form inputs, so all of it stays consistently sharp-but-not-square. */
  --r: 2px;
  --r-round: 100%;

  /* Button geometry */
  /* style-guide.md buttons spec: padding 12px 28px, letter-spacing 0.05em */
  --btn-pad-y: 12px;
  --btn-pad-x: 28px;
  --btn-fw: 500;
  --btn-ls: 0.05em;
  --btn-bw: 1px;
}

/* ─────────────────────────────  Reset  ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}

/* ─────────────────────────  Base typography  ─────────────────────── */
h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:500;letter-spacing:0}
h1{font-size:var(--step-5);line-height:1.15}
h2{font-size:var(--step-4);line-height:1.2}
h3{font-size:var(--step-3);line-height:1.3}
h4,h5,h6{font-family:var(--font-text);color:var(--ink);font-weight:600;line-height:1.25}
h4{font-size:var(--step-2)}
h5{font-size:var(--step-1)}
h6{font-size:var(--step-0);letter-spacing:0.02em}
em,.italic{font-style:italic}
h1 em,h2 em,h3 em{font-style:italic;color:var(--ink)}

/* ───────────────────────────  Layout  ────────────────────────────── */
.wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;gap:var(--space-m)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.measure{max-width:var(--measure)}
.section{padding-block:var(--space-2xl)}
.section--tight{padding-block:var(--space-xl)}

/* Full-width bands */
.band--ivory2{background:var(--ivory-2)}
.band--ivory3{background:var(--ivory-3)}
/* Closing CTA / founding-list band — a light Soft Stone section (§8), not a
   dark block, so oxblood and dark UI stay rare. The oxblood button provides the
   conversion emphasis. Class name kept as band--wine for page compatibility. */
.band--wine{background:var(--ivory-2);color:var(--ink)}
.band--wine h1,.band--wine h2,.band--wine h3,.band--wine h4{color:var(--ink)}
.band--wine .eyebrow{color:var(--ink-2)}
.band--wine p{color:var(--ink-2)}

/* ───────────────────────────  Eyebrow  ───────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-text);font-size:var(--step--1);font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-2); /* Warm Graphite label (§15) */
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none} /* tiny brass tick */
.eyebrow--brand{color:var(--burgundy)} /* selective oxblood emphasis for key labels */

/* ─────────────────────────  Section head  ────────────────────────── */
.section-head{display:flex;flex-direction:column;gap:var(--space-s);max-width:52ch}
.section-head h2{margin-top:.1em}
.section-head p{color:var(--ink-2);font-size:var(--step-1)}
.section-head--center{margin-inline:auto;text-align:center;align-items:center}

/* ───────────────────────────  Buttons  ───────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--font-text);font-size:0.875rem;font-weight:var(--btn-fw); /* 14px — Button label */
  letter-spacing:var(--btn-ls);text-transform:uppercase;text-decoration:none;
  padding:var(--btn-pad-y) var(--btn-pad-x);border:var(--btn-bw) solid transparent;
  border-radius:var(--r);cursor:pointer;line-height:1;white-space:nowrap;
}
.btn.primary{background:var(--burgundy);color:var(--on-wine);border-color:var(--burgundy)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
/* On the light stone CTA band these behave like primary + ghost */
.btn.on-wine{background:var(--burgundy);color:var(--on-wine);border-color:var(--burgundy)}
.btn.on-wine-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-s);align-items:center}

/* ────────────────────────────  Form  ─────────────────────────────── */
.form{display:flex;flex-direction:column;gap:var(--space-m)}
.form__row{display:flex;flex-direction:column;gap:var(--space-2xs)}
.form__row label{
  font-family:var(--font-text);font-size:0.875rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);
}
.form input,.form select,.form textarea{
  font-family:var(--font-text);font-size:var(--step-0);color:var(--ink);
  background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--space-xs) var(--space-s);
}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-2)} /* Warm Graphite placeholder (§12) */
.form input,.form select{height:48px}
.form textarea{resize:none;line-height:1.6}
.form button{align-self:flex-start;margin-top:var(--space-2xs)}
.form__note{font-size:var(--step--1);color:var(--ink-3);max-width:52ch}
.form__radios{display:flex;flex-wrap:wrap;gap:var(--space-m)}
.form__radios label{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-text);font-size:var(--step-0);font-weight:500;
  letter-spacing:normal;text-transform:none;color:var(--ink);
}
.form__radios input{height:auto}

/* ────────────────────────────  Links  ────────────────────────────── */
.link{
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;font-weight:500;
}
.link--brand{color:var(--burgundy);text-decoration-color:var(--burgundy)} /* oxblood conversion links */
.link--gold{text-decoration-color:var(--gold)}
.band--wine .link{color:var(--burgundy);text-decoration-color:var(--burgundy)}

/* label link, no underline (used in nav-like contexts) */
.link-plain{color:inherit;text-decoration:none}

/* ───────────────────────  Product card  ──────────────────────────── */
.product-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.product-card__media{background:var(--ivory);border-radius:var(--r);overflow:hidden}
.product-card__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.product-card__name{font-family:var(--font-display);font-size:var(--step-2);color:var(--ink);font-weight:400;line-height:1.15;margin-top:var(--space-s)}
.product-card__meta{font-size:var(--step--1);color:var(--ink-3);margin-top:.35em;text-transform:uppercase;letter-spacing:0.08em}
.product-card__price{font-family:var(--font-display);font-size:var(--step-1);color:var(--ink);margin-top:var(--space-2xs)}

/* ─────────────────────────  Spec panel  ──────────────────────────── */
.spec{background:var(--ivory-2);border-radius:var(--r);padding:var(--space-l)}
.spec dl{margin:0;display:grid;grid-template-columns:1fr 1.4fr;gap:0}
.spec dt,.spec dd{margin:0;padding:var(--space-xs) 0;border-top:1px solid var(--line);font-size:var(--step--1)}
.spec dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.spec dd{color:var(--ink-2)}
.spec dt:first-of-type,.spec dd:first-of-type{border-top:0}

/* ──────────────────────────  Rules  ──────────────────────────────── */
.rule{border:0;border-top:1px solid var(--line);margin:0}
.rule--gold{border-top-color:var(--gold)}
.band--wine .rule{border-top-color:var(--line)}

/* ─────────────────────────  Breadcrumb  ──────────────────────────── */
.crumbs{font-size:var(--step--1);color:var(--ink-3);letter-spacing:0.02em}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs span{margin-inline:.5em;color:var(--line)}

/* ─────────────────────────  Page hero  ───────────────────────────── */
.page-hero{padding-block:var(--space-xl) var(--space-l)}
.page-hero__head{max-width:60ch}
.page-hero h1{margin-top:var(--space-s)}
.page-hero__lead{margin-top:var(--space-m);font-size:var(--step-1);color:var(--ink-2);max-width:54ch;line-height:1.6}
.page-hero .cta-row{margin-top:var(--space-l)}
.page-hero__media{margin:var(--space-l) 0 0}
.page-hero__media img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ivory)}

/* ══════════════════════════  Header chrome  ══════════════════════════ */
.site-head{background:var(--ivory);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.site-head__bar{
  max-width:var(--page-max);margin-inline:auto;padding:clamp(16px,3vw,22px) var(--gutter);
  display:flex;align-items:center;gap:var(--space-l);
}
.wordmark{
  font-family:var(--font-display);font-weight:400;font-size:2rem;
  letter-spacing:0.1em;text-transform:lowercase;color:var(--ink);text-decoration:none;
  flex:none;display:inline-flex;align-items:center;
}
.nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,30px);margin-inline:auto}
.nav a{
  font-family:var(--font-text);font-size:var(--step-0);font-weight:500;
  color:var(--ink);text-decoration:none;letter-spacing:0.01em;
}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--burgundy);text-decoration-thickness:1px;text-underline-offset:6px}
.site-head__end{flex:none;display:flex;align-items:center;gap:var(--space-m)}
.site-head__end .link-plain{font-size:var(--step--1);letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.site-head__note{
  border-top:1px solid var(--line);margin:0;
  padding:9px var(--gutter);text-align:center;
  font-size:var(--step--1);letter-spacing:0.04em;color:var(--ink-3);
}

/* ══════════════════════════  Footer chrome  ══════════════════════════ */
.site-foot{background:var(--wine);color:var(--on-wine-2);margin-top:var(--space-2xl)}
.site-foot__in{
  max-width:var(--page-max);margin-inline:auto;padding:var(--space-xl) var(--gutter) var(--space-l);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-l);
}
.site-foot__brand p{color:var(--on-wine-2);max-width:34ch;margin-top:var(--space-s);font-size:var(--step--1);line-height:1.7}
.wordmark--foot{color:var(--on-wine)}
.site-foot__label{
  display:block;font-size:var(--step--1);font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--on-wine);margin-bottom:var(--space-s);
}
.site-foot__col a{color:var(--on-wine-2);text-decoration:none;font-size:var(--step--1);line-height:2.2}
.site-foot__base{
  max-width:var(--page-max);margin-inline:auto;padding:var(--space-m) var(--gutter);
  border-top:1px solid var(--line-wine);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-s);
  font-size:var(--step--1);color:var(--on-wine-2);
}

/* ═══════════════════════════  Responsive  ══════════════════════════ */
@media (max-width:1024px){
  .cols-3{grid-template-columns:repeat(2,1fr)}
  .site-foot__in{grid-template-columns:1fr 1fr}
  .site-foot__brand{grid-column:1 / -1}
}
@media (max-width:768px){
  .cols-2,.cols-3{grid-template-columns:1fr}
  .site-head__bar{flex-wrap:wrap;gap:var(--space-s) var(--space-m)}
  .nav{width:100%;margin-inline:0;order:3;justify-content:flex-start}
  .site-head__end{margin-left:auto}
  .spec dl{grid-template-columns:1fr}
  .spec dt{padding-bottom:0}
  .spec dd{padding-top:.2em;border-top:0}
  .spec dt:not(:first-of-type){border-top:1px solid var(--line);margin-top:var(--space-xs)}
}
@media (max-width:520px){
  .site-foot__in{grid-template-columns:1fr}
}