/* Metric-matched local fallbacks so text doesn't reflow (layout shift) when the web fonts arrive. */
@font-face{font-family:"Fraunces Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:115.4%}
@font-face{font-family:"DM Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:100%}
/* Design tokens from Studio's brand spec (brand/brand-spec.md, "CSS custom properties").
   Copied as written. This is the only place brand colours and fonts are defined. */
:root {
  --gf-fern: #3F5B45;
  --gf-moss: #7E8E68;
  --gf-cream: #F6F1E8;
  --gf-sand: #E6D8C3;
  --gf-clay: #B9745A;
  --gf-rose: #EBCBC3;
  --gf-amethyst: #8D7BA8;
  --gf-bark: #2A2A24;

  --gf-bg: var(--gf-cream);
  --gf-surface: var(--gf-sand);
  --gf-text: var(--gf-bark);
  --gf-heading: var(--gf-fern);
  --gf-accent: var(--gf-clay);
  --gf-btn-bg: var(--gf-fern);
  --gf-btn-text: var(--gf-cream);
  --gf-btn-hover: #354C3A; /* slightly deeper Fern, not a new brand colour */

  --gf-font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --gf-font-body: "DM Sans", "DM Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gf-fs-h1: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  --gf-fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --gf-fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --gf-fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --gf-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --gf-fs-small: 0.875rem;
  --gf-fs-ui: 0.875rem;

  --gf-lh-heading: 1.15;
  --gf-lh-body: 1.6;

  --gf-radius: 12px;
  --gf-rule: var(--gf-sand);
}

h1, h2, h3 {
  font-family: var(--gf-font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--gf-heading);
  line-height: 1.12;
}
h1 { font-size: var(--gf-fs-h1); line-height: 1.12; }
h2 { font-size: var(--gf-fs-h2); line-height: 1.2; }
h3 { font-size: var(--gf-fs-h3); line-height: 1.25; }
body {
  font-family: var(--gf-font-body);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--gf-fs-body);
  line-height: var(--gf-lh-body);
  color: var(--gf-text);
  background: var(--gf-bg);
}

/* Dark sections, from Studio's brand spec ("Dark sections"). Copied as written. */
.gf-dark {
  --gf-bg: var(--gf-fern);
  --gf-surface: #354C3A; /* a slightly deeper Fern for inset cards, not a new brand colour */
  --gf-text: var(--gf-cream);
  --gf-heading: var(--gf-cream);
  --gf-secondary: var(--gf-sand);
  --gf-label: var(--gf-rose);
  --gf-rule: color-mix(in srgb, var(--gf-cream) 22%, transparent);
  --gf-btn-bg: var(--gf-cream);
  --gf-btn-text: var(--gf-fern);
  --gf-btn-hover: var(--gf-sand);
  background: var(--gf-bg);
  color: var(--gf-text);
}
.gf-footer-deep {
  background: var(--gf-bark);
  color: var(--gf-cream);
}