/* Stoomy Steam — design tokens (site v2). Card: apple (scales, pill CTAs, quiet). Palette: measured from logo №1. */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/Fraunces-Stoomy.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/Figtree-Variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
:root{
  /* colour */
  --cream:#FDF3DE;        /* logo background — hero, key sections */
  --paper:#FFFBF4;        /* canvas between cream sections */
  --card:#FFFFFF;
  --ink:#10213A;          /* logo navy — text, never pure black */
  --ink-2:#4E5869;        /* secondary text 6.5:1 on cream */
  --line:#E9DFCB;         /* hairline on cream */
  --blue-logo:#2976DC;    /* logo blue — marks, illustration, large display only */
  --blue:#1D5FBF;         /* action — CTA bg (white text 6.1:1), links on cream 5.5:1 */
  --blue-deep:#174C99;    /* CTA hover */
  --butter:#FED05A;       /* stickers, badges (navy text 11:1) */
  --sky:#DCEBFB;          /* soft blue tint panels */
  --white:#FFFFFF;
  /* type */
  --f-display:"Fraunces",ui-serif,Georgia,serif;
  --f-text:"Figtree",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --fs-hero:clamp(52px,7.2vw,108px);   /* first screen ≥64 on desktop */
  --fs-d1:clamp(40px,4.6vw,68px);
  --fs-d2:clamp(30px,3vw,44px);
  --fs-lead:clamp(19px,1.7vw,26px);
  --fs-body:17px;
  --fs-cap:14px;
  --fs-kicker:13px;
  /* space & shape (base 8) */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --r-card:20px;--r-img:16px;--r-pill:999px;
  --shadow-product:0 34px 38px -26px rgba(16,33,58,.30);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --max:1240px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.47 var(--f-text);letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.display{font-family:var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;font-weight:620;letter-spacing:-.02em;line-height:1.02}
.kicker{font:700 var(--fs-kicker)/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums lining-nums}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-pill);background:var(--blue);color:#fff;font:700 17px/1 var(--f-text);text-decoration:none;border:0;cursor:pointer;transition:background .18s var(--ease-out),transform .18s var(--ease-out)}
.btn:hover{background:var(--blue-deep)}
.btn:active{transform:scale(.96)}
.link{color:var(--blue);font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.sticker{display:inline-block;background:var(--butter);color:var(--ink);font:800 13px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border-radius:10px;transform:rotate(-4deg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
