/* demipoint.tech — design tokens and base. Single source of truth for every page. */
:root{
  --bg:#FAF8F4;        /* warm off-white (never stark white) */
  --card:#F1EDE6;
  --fg:#16191D;
  --muted:#55616D;
  --line:#DEE2E6;
  --glass:rgba(250,248,244,.76);
  --sky:#ACDDFD;
  --sky-deep:#5AA9DD;
  --ch:#16191D;
  --ch-line:#303840;
  --ring:#2B7FB8;

  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-label:Oswald,"Arial Narrow",sans-serif;

  --r-pill:999px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --max:1040px;
  --gutter:20px;
  --nav-h:56px;
  --section-y:clamp(28px,3.6vw,44px);   /* the one vertical rhythm for every section */
  --gap:clamp(14px,2vw,20px);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#111417;--card:#1A1F24;--fg:#EEF2F5;--muted:#A3ADB8;--line:#262C32;--glass:rgba(17,20,23,.72)}
}
:root[data-theme="dark"]{--bg:#111417;--card:#1A1F24;--fg:#EEF2F5;--muted:#A3ADB8;--line:#262C32;--glass:rgba(17,20,23,.72)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* author display rules must never beat the hidden attribute */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--safe-top) + var(--nav-h) + 24px);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:var(--safe-bottom)}
img{max-width:100%;display:block}
a{color:inherit}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;font-weight:800;letter-spacing:-.03em;line-height:1.1}
h1{font-size:clamp(32px,7vw,64px);letter-spacing:-.035em}
h2{font-size:clamp(26px,4.5vw,38px)}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}

/* Eyebrow: sentence case on purpose (never ALL-CAPS). */
.eyebrow{font:500 15px var(--font-label);letter-spacing:.02em;color:var(--muted)}

.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:where(a,button,[tabindex],summary):focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}