/* Hibilet at ADE. Tokens and fonts are hibilet.com's own (auteur.css), so the two read as one brand. */
@font-face{ font-family:"Archivo"; src:url("./fonts/archivo-latin.woff2") format("woff2-variations"); font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:swap }
@font-face{ font-family:"Newsreader"; src:url("./fonts/newsreader-latin.woff2") format("woff2-variations"); font-weight:300 600; font-style:normal; font-display:swap }
@font-face{ font-family:"Newsreader"; src:url("./fonts/newsreader-italic-latin.woff2") format("woff2-variations"); font-weight:300 600; font-style:italic; font-display:swap }

:root{
  --paper:      oklch(0.972 0.003 240);
  --paper-sunk: oklch(0.941 0.004 240);
  --ink:        oklch(0.255 0.058 78);
  --ink-soft:   oklch(0.455 0.045 78);
  --brand:      #FFD405;
  --amber-deep: oklch(0.53 0.14 80);
  --purple:     #201142;
  --ink-on-purple:      #f6f2ff;
  --ink-on-purple-soft: #b6a8dd;
  --rule: color-mix(in oklab, var(--ink) 18%, transparent);
  --pad: clamp(1.15rem, 5vw, 4rem);
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader",Georgia,serif; font-size:clamp(1.0625rem, 1rem + .3vw, 1.3125rem); line-height:1.5;
}
::selection{ background:var(--brand); color:var(--ink) }
a{ color:inherit }
[hidden]{ display:none !important }

h1,h2,h3{ font-family:"Archivo",system-ui,sans-serif; font-weight:700; letter-spacing:-.032em; margin:0; text-wrap:balance; font-variation-settings:"wdth" 114 }
h1{ font-size:clamp(2rem, 1.2rem + 3.6vw, 4.6rem); line-height:1.04 }
h2{ font-size:clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height:1.08 }
h3{ font-size:1.25rem; line-height:1.2 }
p{ margin:0 0 1em; text-wrap:pretty }
em{ font-style:italic }
.wide{ font-family:"Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 108; font-feature-settings:"tnum" 1,"lnum" 1 }
.eyebrow{ font-family:"Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 106; font-weight:600; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft) }
.soft{ color:var(--ink-soft) }
.note{ font-style:italic; font-size:.9375rem; color:var(--ink-soft) }

.btn{
  display:block; width:100%; text-align:center; padding:.95rem 1rem; border-radius:.5rem; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink); text-decoration:none; cursor:pointer;
  font-family:"Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 106; font-weight:600; font-size:1rem;
}
.btn.primary{ background:var(--brand); border-color:var(--brand) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible, .nav button:focus-visible{ outline:3px solid var(--ink); outline-offset:2px }

/* the big figure */
.figure{ font-family:"Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 118; font-weight:800; letter-spacing:-.05em; line-height:.9; font-feature-settings:"tnum" 1,"lnum" 1 }