/* S&Co web tokens and base styles. v1, Nov 2026.
   Source: S&Co Brand Pack (BrandGuideSnCo.pdf, Oct 2026) plus decisions to 5 Nov 2026.
   Fonts: self-hosted Cormorant Garamond variable (OFL). Put the woff2 files in /fonts/. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-VF-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-Italic-VF-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette (brand pack p11) */
  --charcoal: #2A2724; /* primary ink, dark grounds */
  --stone:    #CFC7B8; /* label grounds, secondary panels */
  --linseed:  #B08A57; /* accent, sparingly */
  --bone:     #EEE9DF; /* backgrounds, ink on charcoal */
  --paper:    #F6F3EE; /* lightest background, cards */
  --ash:      #6B6358; /* secondary text */

  /* Roles */
  --bg: var(--bone);
  --surface: var(--paper);
  --ink: var(--charcoal);
  --ink-soft: var(--ash);
  --rule: var(--stone);
  --rule-strong: var(--charcoal);
  --accent: var(--linseed);

  /* Type */
  --font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --w-regular: 400;   /* display, wordmark */
  --w-medium: 500;    /* body, labels */
  --w-semibold: 600;  /* product names on labels, emphasis */
  --track-label: 0.28em;  /* tracked caps, brand pack "+28%" */

  /* Fluid type scale (Cormorant runs small, so sizes run large) */
  --fs-label: 0.8125rem;                          /* 13px tracked caps */
  --fs-small: 1rem;                                /* 16px */
  --fs-body: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); /* 19 to 21px */
  --fs-lead: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h3: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --fs-h2: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --fs-h1: clamp(3rem, 2.2rem + 4vw, 5.75rem);
  --lh-tight: 1.05;
  --lh-body: 1.55;

  /* Space (8px base) */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem; --s7: 6.5rem; --s8: 9rem;
  --measure: 34em;
  --page-max: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Shape: square corners, hairline rules. No shadows. */
  --radius: 0;
  --hair: 1px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: var(--w-regular); line-height: var(--lh-tight); margin: 0 0 var(--s3); letter-spacing: -0.005em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--s2); max-width: var(--measure); }
em, .accent { font-style: italic; font-weight: var(--w-regular); }
.lead { font-size: var(--fs-lead); font-weight: var(--w-regular); color: var(--ink-soft); }

/* Links: charcoal text, linseed underline (linseed text fails contrast on light grounds) */
a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--linseed); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* Tracked caps label: "TIMBER CARE · 120 G" */
.label {
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label--accent { color: var(--linseed); } /* only on charcoal */

/* Rules */
hr, .rule { border: 0; border-top: var(--hair) solid var(--rule); margin: var(--s4) 0; }
.rule--strong { border-top-color: var(--rule-strong); }

/* Buttons: square, solid charcoal, tracked caps */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 3rem; padding: 0 var(--s4);
  background: var(--charcoal); color: var(--bone);
  border: var(--hair) solid var(--charcoal); border-radius: var(--radius);
  font: var(--w-medium) var(--fs-label)/1 var(--font);
  letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background .15s, color .15s;
}
.btn:hover { background: transparent; color: var(--charcoal); }
.btn--ghost { background: transparent; color: var(--charcoal); }
.btn--ghost:hover { background: var(--charcoal); color: var(--bone); }
.on-dark .btn { background: var(--bone); color: var(--charcoal); border-color: var(--bone); }
.on-dark .btn:hover { background: transparent; color: var(--bone); }

/* Grounds (approved colourways) */
.on-dark    { background: var(--charcoal); color: var(--bone); --ink: var(--bone); --ink-soft: var(--stone); --rule: #4a453f; --rule-strong: var(--bone); }
.on-stone   { background: var(--stone);   color: var(--charcoal); --ink-soft: var(--charcoal); }
.on-linseed { background: var(--linseed); color: var(--charcoal); --ink-soft: var(--charcoal); --rule: var(--charcoal); }
.on-paper   { background: var(--paper); }

/* Card: paper on bone, hairline, no shadow */
.card { background: var(--paper); border: var(--hair) solid var(--rule); border-radius: var(--radius); }

/* Layout helpers */
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s7); }

:focus-visible { outline: 2px solid var(--linseed); outline-offset: 3px; }