/* Ultimate Clarity — design tokens + base (warm design system, D-2026-06-28-design)
   Verbatim-harlett ur mock-C2-warm-refined.html :root. */
:root{
  --paper:#FCF5EE; --card:#FFFFFF; --card-warm:#FFF8F0;
  --plum:#3A2738; --plum-soft:#4A3447;
  --ink:#32242D;          /* body / headlines — ~12:1 on paper */
  --ink-soft:#5B4750;     /* secondary — ~7:1 on paper (AAA) */
  --rose:#B0424C; --rose-deep:#9A3A43; --rose-tint:#F3DAD6;
  --honey:#E3A24F; --honey-deep:#C9863A; --honey-tint:#F8E6CC;
  --line:#EADFD5; --line-2:#E2D4C8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1060px;margin:0 auto;padding:0 32px}
.serif{font-family:"Fraunces",Georgia,serif;font-weight:400}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Delade sid-primitiver (anvands av legal + marknad) — en definition har. */
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 32px}
.page-hero{padding:64px 0 8px}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1,.page-hero .display{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(38px,5vw,56px);line-height:1.05;letter-spacing:-0.02em;color:var(--ink)}
.page-hero .lead{font-size:21px;color:var(--ink-soft);line-height:1.5;max-width:680px}
.display{font-family:"Fraunces",serif;font-weight:500;letter-spacing:-0.02em;color:var(--ink)}
.lead{font-size:21px;color:var(--ink-soft);line-height:1.5}