/* ===== Direction 1b — Warm Heritage ===== */
/* Every colour in this file comes from the tokens below — change a value here
   and it propagates across the whole site. */
:root {
  /* page gutter — the horizontal breathing room every full-bleed section keeps
     on each side. Viewport-relative so it scales instead of hardcoding 56/24px:
     ~24px on phones, growing to a 56px cap on wide screens. */
  --gutter: clamp(1.5rem, 5vw, 3.5rem);
  /* accents */
  --maroon: #7a2e2e; /* primary accent: buttons, announce bar, makers band */
  --maroon-deep: #6e2b2b; /* links, outlines — a touch darker */
  --maroon-shade: #5e2525; /* darkest, used in the makers weave texture */
  --maroon-tint: #732f2f; /* lighter stripe in the makers weave texture */
  --gold: #a97d3a; /* ornament lines, product codes, hover */
  --gold-light: #d9b98a; /* gold on dark surfaces */
  --gold-pale: #fbeedb; /* palest gold, text on maroon */
  --amber: #c98a2c; /* low-stock warning dot */
  /* heritage green — Deep Bottle, the chosen shade; tints derive from it */
  --green: #123d1a;
  --green-bright: #1f5a2c; /* divider diamond */

  /* surfaces */
  --cream: #faf4e9; /* page background */
  --cream-warm: #f3ead6; /* alternating section background */
  --cream-soft: #f6e9d6; /* text on the announce bar */
  --line: #e6d9bf; /* hairline borders on cream */
  --line-gold: #d8c39a; /* divider lines, input borders */

  /* text */
  --ink: #332a20; /* body text + footer background */
  --ink-heading: #3a2a20; /* headings */
  --ink-price: #3a342a;
  --ink-body: #5f5340; /* paragraph copy */
  --ink-muted: #5a4b34; /* nav, labels */
  --ink-caption: #4a4034; /* placeholder captions */
  --ink-faint: #8a7350; /* fine print, sub-labels */
  --on-maroon: #f4e4cf; /* text on the maroon band */
  --on-maroon-dim: #e6cfb4;

  /* placeholder weave textures */
  --ph-a: #ecdcc3;
  --ph-b: #f3e6cf;
  --ph-c: #e6d3b8;
  --ph-d: #efe0c6;
  --ph-e: #e9d8bb;
  --ph-f: #e2cdb0;
  --ph-g: #e9d6b8;
  --ph-h: #f1e2c6;
  --ph-i: #e6d3b3;
  --ph-j: #efe0c4;

  /* footer */
  --footer-bg: #332a20;
  --footer-text: #e6ddcb;
  --footer-col: #c8bda6;
  --footer-tag: #b3a892;
  --footer-label: #8a7d66;
  --footer-rule: #47402f;

  /* neutrals */
  --white: #fff;
  --scrim-light: rgba(255, 255, 255, 0.75);
  --scrim-dark: rgba(0, 0, 0, 0.35);
  --caption-brdr: rgba(74, 64, 52, 0.25);
  --orn-line: rgba(169, 125, 58, 0.6);
}
* {
  box-sizing: border-box;
}
/* clip (not hidden) guards against horizontal overflow WITHOUT turning the
   page into a scroll container — hidden would break position:sticky, which the
   Our Story chapter-stacking animation depends on */
html {
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "Jost", sans-serif;
  background: var(--cream);
  color: var(--ink);
}
a {
  color: var(--maroon-deep);
  text-decoration: none;
}
a:hover {
  color: var(--gold);
}
img {
  display: block;
  max-width: 100%;
  height: auto; /* ignore WooCommerce's width/height <img> attributes so CSS sizing
                   (e.g. .ratio-45 aspect-ratio) controls height; object-fit
                   images below set an explicit height:100% and are unaffected */
}
/* The `img { display: block }` above overrides the browser's default
   `[hidden] { display: none }`, which made elements toggled via the `hidden`
   attribute stay visible — e.g. WooCommerce's Mini-Cart renders a linked image
   plus a bare fallback and hides one with `hidden`, so both showed (duplicate
   thumbnail). Restore the attribute's authority for every element. */
[hidden] {
  display: none !important;
}

/* placeholders */
.ph {
  position: relative;
  background: repeating-linear-gradient(
    135deg,
    var(--ph-a),
    var(--ph-a) 0.6875rem,
    var(--ph-b) 0.6875rem,
    var(--ph-b) 1.375rem
  );
  display: flex;
  align-items: flex-end;
}
.ph__cap {
  font-family: "DM Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-caption);
  background: var(--scrim-light);
  padding: 0.3125rem 0.5625rem;
  border: 1px solid var(--caption-brdr);
  margin: 1rem;
}

.ratio-45 {
  aspect-ratio: 4/5;
}

.eyebrow {
  font-family: "DM Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.eyebrow--accent {
  color: var(--maroon);
}
.eyebrow--gold {
  color: var(--gold-light);
}

.body {
  max-width: 32.5rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-body);
  margin: 0 0 1.125rem;
}

.section-title {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: 2.5rem;
  margin: 0;
  color: var(--ink-heading);
}

.link-underline {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--maroon-deep);
  padding-bottom: 0.3125rem;
  width: fit-content;
  display: inline-block;
}

.btn {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
}
.btn--solid {
  background: var(--maroon);
  color: var(--cream);
  padding: 1rem 1.875rem;
}
.btn--solid:hover {
  color: var(--white);
}
.btn--outline {
  border: 1px solid var(--maroon-deep);
  color: var(--maroon-deep);
  padding: 0.9375rem 1.75rem;
}
.btn--outline-gold {
  border: 1px solid var(--gold-light);
  color: var(--gold-pale);
  padding: 0.875rem 1.625rem;
  width: fit-content;
}


/* keyboard "skip to content" link — visible only when focused */
.skip-link:focus {
  position: fixed !important;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 0.625rem 1rem;
  background: var(--maroon);
  color: var(--cream);
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}