:root{
  --paper:oklch(98.4% .005 280); --paper-2:oklch(96% .009 280);
  --ink:oklch(24% .035 280); --ink-2:oklch(47% .028 280); --ink-3:oklch(62% .022 280);
  --rule:oklch(89% .014 280); --rule-2:oklch(93.5% .010 280);
  --indigo:oklch(51% .19 277); --quiet:oklch(52% .15 22); --live:oklch(50% .13 158);
  --shadow:oklch(30% .06 280 / .10);
  --display:"Newsreader",ui-serif,Georgia,serif; --body:"Karla",ui-sans-serif,system-ui,sans-serif;
  --gutter:clamp(1.25rem,5vw,4rem); --page:46rem; --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:oklch(16.5% .022 280); --paper-2:oklch(20.5% .026 280);
    --ink:oklch(94% .012 280); --ink-2:oklch(74% .018 280); --ink-3:oklch(58% .020 280);
    --rule:oklch(30% .024 280); --rule-2:oklch(25% .022 280);
    --indigo:oklch(74% .14 277); --quiet:oklch(70% .14 25); --live:oklch(74% .14 158);
    --shadow:oklch(4% .02 280 / .5);
  }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100svh}
h1,h2,h3{font-family:var(--display);font-weight:380;line-height:1.06;letter-spacing:-.018em;margin:0}
h1{font-size:clamp(2.4rem,1.6rem+3.4vw,4rem)}
h2{font-size:clamp(1.35rem,1.2rem+.7vw,1.75rem);font-weight:420;letter-spacing:-.012em}
p{margin:0}
a{color:var(--indigo);text-underline-offset:3px}
.wrap{width:min(100% - var(--gutter)*2,var(--page));margin-inline:auto}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
header{border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;height:4rem}
.mark{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.mark img{width:28px;height:28px;border-radius:7px;display:block}
main{flex:1;padding:clamp(3rem,8vw,6rem) 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-size:1rem;font-weight:600;padding:.9rem 1.6rem;
  border:1px solid transparent;border-radius:999px;background:var(--ink);color:var(--paper);
  text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-1.5px);box-shadow:0 10px 26px -12px var(--shadow)}
.btn-accent{background:var(--indigo);color:oklch(99% 0 0)}
@media (prefers-color-scheme:dark){.btn-accent{color:oklch(18% .03 280)}}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--rule);font-weight:500}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
footer{border-top:1px solid var(--rule);padding:2rem 0 2.5rem;font-size:.875rem;color:var(--ink-3)}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{text-decoration:underline;color:var(--ink)}
.foot-row{display:flex;flex-wrap:wrap;gap:.65rem 1.5rem}