@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* ============================================================
   STUDIO SA'MO — design tokens (single source of truth)
   "Architectural editorial": warm bone ground · warm ink · ONE
   orange accent (<5%). Metana display (solid) + Hanken Grotesk body
   + IBM Plex Mono metadata. Flat, print-like, photography-led.
   ============================================================ */
:root{
  /* ---- Warm neutral palette ---- */
  --ground:#F4EFE4;         /* page canvas — never pure white */
  --ground-2:#FBF8F1;       /* raised surface / inputs */
  --band:#EBE3D4;           /* banded section */
  --band-2:#E4DAC9;         /* deeper band */
  --ink:#221C17;            /* warm near-black text — never #000 */
  --ink-2:#4A4139;          /* secondary text */
  --muted:#8A7F70;          /* taupe — captions, meta */
  --faint:#B3A895;          /* faintest text on light */
  --hairline:#DED5C4;       /* 1px rules / borders */
  --hairline-strong:#CDC1AC;

  /* ---- Single accent: brand orange, used <5% ---- */
  --accent:#E86729; --accent-deep:#BE511D; --accent-soft:#F6DBC8;

  /* ---- On-dark (rare: one occasional deep block) ---- */
  --dark:#241E18; --on-dark:#F1EADC; --on-dark-muted:#A79A88; --hairline-on-dark:rgba(241,234,220,0.18);

  /* ---- Type families ---- */
  --display:'Neue Metana Next','Arial Narrow',sans-serif;   /* headlines — solid Metana */
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif; /* body / UI */
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',monospace; /* labels · metadata */
  --out:'Neue Metana Next Outline','Neue Metana Next',sans-serif; /* oversized service index only */

  /* ---- Type scale ---- */
  --t-2xs:.78rem; --t-xs:.85rem; --t-sm:1rem; --t-base:1.125rem; --t-md:1.25rem;
  --t-lg:1.45rem; --t-xl:1.9rem;
  --t-h3:clamp(1.5rem,2.4vw,2.15rem);
  --t-h2:clamp(2rem,4vw,3.25rem);
  --t-h1:clamp(2.6rem,6.2vw,5.25rem);
  --t-hero:clamp(3rem,8vw,7rem);

  /* ---- Tracking (tight display · wide micro-labels) ---- */
  --track-display:-.022em; --track-tight:-.01em; --track-normal:0; --track-label:.14em; --track-nav:.12em;

  /* ---- Line heights ---- */
  --lh-hero:.98; --lh-display:1.02; --lh-heading:1.12; --lh-body:1.62; --lh-label:1.1;

  /* ---- Weights (Metana single face; Hanken 400/500/600) ---- */
  --w-regular:400; --w-medium:500; --w-semibold:600;

  /* ---- Spacing ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  /* ---- Layout ---- */
  --maxw:1400px; --wide:1720px; --pad:clamp(1.5rem,5vw,4.5rem);
  --sec:clamp(4.5rem,11vw,10rem); --sec-sm:clamp(3rem,7vw,6rem); --measure:64ch;

  /* ---- Shape: flat / print-like ---- */
  --radius:0; --radius-xs:2px;

  /* ---- Borders ----
     NB: 1.5px is snapped by Chrome to a sub-pixel (~0.8px) rule, i.e. thinner than
     --bw. Use --bw-3 wherever a divider is meant to read as heavy. */
  --bw:1px; --bw-2:1.5px; --bw-3:3px;

  /* ---- Elevation: essentially none (warm, faint if ever) ---- */
  --shadow:none; --shadow-soft:0 12px 40px rgba(34,28,23,0.08);

  /* ---- Motion (slow, unhurried) ---- */
  --ease:cubic-bezier(.51,.01,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-micro:200ms; --dur:600ms; --dur-img:1200ms; --dur-reveal:800ms;

  /* ---- Blueprint texture (from the v1 mockup, dialled right down) ----
     A 26px drafting grid. On light grounds it is a barely-there warm line; on the
     one deep band it is the orange line over blue-ink. --bp-surface is the colour
     the grid fades back into at the top and bottom of its block. */
  --blueprint:#151B2C;                    /* the deep blue patch */
  --bp-size:26px; --bp-w:1px;
  --bp-line-light:rgba(34,28,23,.05);     /* grid on bone / band */
  --bp-line-dark:rgba(232,103,41,.10);    /* orange grid on dark */

  /* ---- Imagery: one consistent warm grade ---- */
  /* One pass fewer: grayscale(.05) folded into saturate (.85 x .95 = .81). Same look,
     and this chain runs on every image on every page. */
  --img-grade:sepia(.14) saturate(.81) contrast(1.02) brightness(1.02);

  /* ---- Focus ---- */
  --focus:0 0 0 2px var(--ground),0 0 0 4px var(--accent);
}