:root {
  --accent: #216e44;
  --accent-wash: #edf5e8;
  --accent-bright: #cee77d;
  --shadow: 0 6px 24px rgba(28,44,35,.06);
  --radius-card: 12px;

  --paper:       #ffffff;
  --paper-dim:   #f6f7f3;
  --line:        #dce1d8;
  --line-soft:   #edf0e9;
  --ink:         #1c2c23;
  --ink-mute:    #566459;
  --ink-faint:   #6c776d;
  --signal:      #a3332c;
  --signal-wash: #fdf0eb;

  --band:        rgba(152,203,128,.40);
  --band-rule:   rgba(96,160,74,.42);
  --desk:        #16201b;
  --graphite:    #5b5f66;
  --guide:       rgba(96,176,206,.26);
  --guide-edge:  rgba(28,104,138,.62);



  --font-display: 'Manrope', sans-serif;
  --font-ui:      'DM Sans', sans-serif;
  --font-hand:    'DM Sans', sans-serif;

  --text-2xs: .6875rem;
  --text-xs:  .75rem;
  --text-sm:  .8125rem;
  --text-base:.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.375rem;
  --text-xl:  2rem;
  --text-2xl: 2.75rem;

  --lh-tight:  1.15;
  --lh-normal: 1.45;


  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;


  --radius-sm: 0;
  --radius-md: 0;


  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-settle: 380ms;
  --dur-roll:   560ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-out:      cubic-bezier(.05,.7,.1,1);
  --ease-settle:   cubic-bezier(.3,0,.2,1);
}

html{background:var(--paper-dim);color:var(--ink);min-height:100%;overflow-x:hidden}
body{margin:0 auto;max-width:1800px;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-variant-numeric:tabular-nums}
body,button,input,select,textarea{font-family:var(--font-ui)}
h1,h2,h3,.mark{font-family:var(--font-display);letter-spacing:-.035em}
body>nav.top,body>h1,body>p.meta,body>section,body>footer{max-width:100%}
nav.top{display:flex;gap:24px;padding:22px 28px;border-bottom:1px solid var(--line)}
nav.top a,.links a{color:var(--ink-mute);text-decoration:none}
nav.top a:hover,.links a:hover{color:var(--accent)}
body>h1,body>p.meta{margin-left:28px;margin-right:28px}
a{ text-underline-offset:3px }
button,a,input,select{touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;opacity:1;transform:none}}
