/* Zolto — shared theme (css/theme.css)
   Warm editorial luxury: ink on warm ivory, classic serif display + neutral
   sans text, deep wine for dark sections and primary actions, one thread of
   gold. Square, flat, static. Implements style-guide.md. No JS, no transitions,
   no hover/focus/active changes, no animation. Depth comes from ivory/wine
   bands, hairlines and imagery. */

/* ─────────────────────────────  Tokens  ───────────────────────────── */
:root{
  /* Ivory (canvas & surfaces) */
  --ivory:   #F1EAE0;
  --ivory-2: #E9DFD0;
  --ivory-3: #E1D6C4;

  /* Ink (text & structure) */
  --ink:   #211E1B;
  --ink-2: #4A453F;
  --ink-3: #8A8074;
  --line:  #D9CFC0;

  /* Deep accent & the one bright accent */
  --wine: #3E1620;
  --gold: #AD8A4E;

  /* On wine */
  --on-wine:   #F1EAE0;
  --on-wine-2: #C8BEB0;
  --line-wine: rgba(241,234,224,.18);

  /* Type families */
  --font-display: "Liberation Serif", "Times New Roman", Times, Georgia, serif;
  --font-text:    "Liberation Sans", Arial, Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale — restrained editorial (≈ brochure) */
  --step--1: clamp(0.75rem,   0.73rem  + 0.11vw, 0.8125rem); /* 12 → 13px */
  --step-0:  clamp(0.9375rem, 0.92rem  + 0.09vw, 1rem);      /* 15 → 16px */
  --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:  clamp(1.5rem,    1.39rem  + 0.54vw, 1.875rem);  /* 24 → 30px */
  --step-4:  clamp(1.8125rem, 1.65rem  + 0.80vw, 2.375rem);  /* 29 → 38px */
  --step-5:  clamp(2.125rem,  1.875rem + 1.25vw, 3rem);      /* 34 → 48px */

  /* Fluid spacing scale */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --space-2xs: clamp(0.5rem,  0.48rem + 0.10vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.19vw, 0.94rem);
  --space-s:   clamp(1rem,    0.95rem + 0.24vw, 1.25rem);
  --space-m:   clamp(1.5rem,  1.40rem + 0.49vw, 2rem);
  --space-l:   clamp(2.5rem,  2.20rem + 1.46vw, 3.5rem);
  --space-xl:  clamp(4rem,    3.40rem + 2.93vw, 6rem);
  --space-2xl: clamp(6rem,    5.00rem + 4.88vw, 9rem);
  --space-3xl: clamp(8rem,    6.50rem + 7.32vw, 13rem);

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

  /* Shape */
  --r: 0;
  --r-round: 100%;

  /* Button geometry */
  --btn-pad-y: 16px;
  --btn-pad-x: 30px;
  --btn-fw: 600;
  --btn-ls: 0.14em;
  --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-2);
  font-family:var(--font-text);
  font-size:var(--step-0);
  line-height:1.8;
  -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:400;letter-spacing:0}
h1{font-size:var(--step-5);line-height:1.2}
h2{font-size:var(--step-4);line-height:1.2}
h3{font-size:var(--step-3);line-height:1.2}
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)}
.band--wine{background:var(--wine);color:var(--on-wine)}
.band--wine h1,.band--wine h2,.band--wine h3,.band--wine h4{color:var(--on-wine)}
.band--wine .eyebrow{color:var(--gold)}
.band--wine p{color:var(--on-wine-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(--gold);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
.band--wine .eyebrow::before{background:var(--gold)}

/* ─────────────────────────  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:var(--step--1);font-weight:var(--btn-fw);
  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(--wine);color:var(--on-wine);border-color:var(--wine)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.on-wine{background:var(--gold);color:var(--wine);border-color:var(--gold)}
.btn.on-wine-ghost{background:transparent;color:var(--on-wine);border-color:var(--on-wine-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-s);align-items:center}

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

/* 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-2);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-wine)}

/* ─────────────────────────  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-2)}

/* ══════════════════════════  Header chrome  ══════════════════════════ */
.site-head{background:var(--ivory);border-bottom:1px solid var(--line)}
.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-text);font-weight:600;font-size:1.15rem;
  letter-spacing:0.16em;text-transform:lowercase;color:var(--ink);text-decoration:none;
  flex:none;display:inline-flex;align-items:center;gap:var(--space-2xs);
}
.wordmark__mark{width:28px;height:28px;flex:none;object-fit:contain}
.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(--gold);text-decoration-thickness:1px;text-underline-offset:6px}
.site-head__end{flex:none}
.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}
}