/* ==========================================================================
   BASE — reset, tokens, typography
   Fixes the "stretched fonts on iPhone" issue two ways:
   1. text-size-adjust: 100%  → stops iOS Safari inflating text on rotate/zoom
   2. Fluid type uses clamp() with rem (never raw vw) → scales without stretch
   ========================================================================== */

:root {
  /* Palette */
  --bg:        #faf9f5;
  --surface:   #ffffff;
  --sand:      #fbeede;
  --sand-2:    #f4e3d2;
  --ink:       #2a1c12;
  --ink-soft:  #7a5c45;
  --line:      #e7d0bd;
  --brand:     #c2410c;
  --brand-2:   #e8963f;
  --accent:    #0e93b7;
  --ok:        #16a34a;

  /* Fluid type scale — min, preferred (rem-based, no vw stretch), max */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem,   0.96rem + 0.2vw,  1.1rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw,  1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.7vw,  1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw,   2.6rem);
  --step-4:  clamp(2.3rem, 1.85rem + 2.2vw,  3.6rem);

  /* Spacing / shape */
  --wrap: 1120px;
  --gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(42,28,18,.06), 0 12px 30px -18px rgba(42,28,18,.35);
  --shadow-sm: 0 1px 2px rgba(42,28,18,.08);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS Safari: never auto-inflate text */
  text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;         /* offset for the sticky header on jumps */
}

body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;             /* avoid faux-bold/oblique "stretch" look */
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { font-size: var(--step-0); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}