:root{
  --paper:#050505; --ink:#f2f1ee;
  --mute:color-mix(in srgb,var(--ink) 46%,transparent);
  --rule:color-mix(in srgb,var(--ink) 14%,transparent);
  --measure:44rem; --body:15.5px;
}
:root[data-read="m"]{--body:17px}
:root[data-read="l"]{--body:18.5px}
:root[data-measure="n"]{--measure:36rem}
:root[data-measure="w"]{--measure:52rem}
:root[data-theme="light"]{--paper:#f4f3f0;--ink:#0e0e0d}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-size:var(--body);line-height:1.62;
  font-family:"Suisse Intl","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent);
  transition:border-color .18s ease,opacity .18s ease}
a:hover{border-bottom-color:currentColor}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}

.page{max-width:var(--measure);margin:0 auto;padding:96px 26px 110px}
header.id{display:flex;gap:14px;align-items:flex-start;margin:0 0 30px}
header.id .av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  background:color-mix(in srgb,var(--ink) 12%,transparent)}
header.id h1{margin:0;font-size:1em;font-weight:600;letter-spacing:-.015em}
header.id p{margin:1px 0 0;font-size:.88em;color:var(--mute)}
.intro p{margin:0 0 17px}
.intro p:last-child{margin-bottom:0}

nav.pages{display:flex;flex-wrap:wrap;gap:0 18px;margin:34px 0 0;font-size:.88em}
nav.pages a{border:0;color:var(--mute)}
nav.pages a:hover{color:var(--ink)}

section{margin-top:54px}
h2{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--mute);margin:0 0 16px}
.list{display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:13px 0;
  border-top:1px solid var(--rule);border-bottom:0;align-items:baseline}
.item:last-child{border-bottom:1px solid var(--rule)}
.item .t{font-size:1em;font-weight:500}
.item .d{grid-column:1;font-size:.86em;color:var(--mute);line-height:1.45}
.item .y{font-size:.78em;color:var(--mute);font-variant-numeric:tabular-nums;
  grid-row:1;grid-column:2}
a.item{border:0}
a.item:hover .t{border-bottom:1px solid currentColor}
.more{margin-top:16px;font-size:.88em;color:var(--mute)}
.more a{color:var(--ink)}

footer{margin-top:66px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8em;color:var(--mute)}
footer a{border:0}
footer a:hover{border-bottom:1px solid currentColor}
footer .sp{margin-left:auto}

/* preferences, opened with / */
.prefs{position:fixed;left:0;top:0;bottom:0;width:238px;z-index:40;
  background:color-mix(in srgb,var(--paper) 92%,var(--ink));
  border-right:1px solid var(--rule);padding:22px 20px;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.16,1,.3,1);
  overflow-y:auto}
.prefs.is-open{transform:none}
.prefs h3{font-size:.68em;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--mute);margin:22px 0 9px}
.prefs h3:first-child{margin-top:0}
.prefs .row{display:flex;align-items:center;justify-content:space-between;
  padding:5px 0;font-size:.86em}
.prefs button{background:none;border:0;color:inherit;font:inherit;padding:0;
  cursor:pointer;opacity:.55;transition:opacity .15s ease;text-align:left;width:100%;
  display:flex;justify-content:space-between;align-items:center}
.prefs button:hover{opacity:.85}
.prefs button[aria-pressed=true]{opacity:1}
.prefs kbd{font:inherit;font-size:.78em;opacity:.35;border:1px solid var(--rule);
  border-radius:3px;padding:0 4px}
.prefs .sw{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:9px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);vertical-align:-1px}
.prefs button[aria-pressed=true] .sw{box-shadow:0 0 0 2px var(--paper),0 0 0 3px currentColor}
.prefs .grid{display:flex;gap:6px;padding:2px 0 4px}
.prefs .grid button{flex:1;justify-content:center;border:1px solid var(--rule);padding:5px 0;font-size:.82em;opacity:.5}
.prefs .grid button[aria-pressed=true]{opacity:1;border-color:currentColor}
.prefs .close{position:absolute;top:18px;right:16px;width:auto;opacity:.4;font-size:1.1em}
.prefsbtn{position:fixed;left:16px;bottom:16px;z-index:30;background:none;border:1px solid var(--rule);
  border-radius:100px;color:var(--mute);font:inherit;font-size:.76em;padding:5px 12px;cursor:pointer;
  display:flex;gap:8px;align-items:center;transition:color .18s ease,border-color .18s ease}
.prefsbtn:hover{color:var(--ink);border-color:currentColor}

.entry{display:block;padding:15px 0;border-top:1px solid var(--rule);text-decoration:none}
.entry:last-of-type{border-bottom:1px solid var(--rule)}
a.entry:hover .t{border-bottom:1px solid currentColor}
.entry .hd{display:flex;align-items:baseline;gap:14px;justify-content:space-between}
.entry .t{font-size:1.02em;font-weight:500;letter-spacing:-.012em}
.entry .m{font-size:.74em;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums;
  flex:0 0 auto}
.entry .b{margin:5px 0 0;font-size:.88em;color:var(--mute);line-height:1.55;max-width:58ch}
.frame p{margin:0 0 14px;max-width:58ch}
.frame p:last-child{margin-bottom:0}
p.creditline{margin:0 0 12px;font-size:.88em;color:var(--mute);line-height:1.65;max-width:60ch}
p.creditline:last-child{margin-bottom:0}
h1.lede-h{font-size:1.72em;line-height:1.16;letter-spacing:-.026em;font-weight:600;
  margin:26px 0 12px;max-width:19ch}
p.lede{font-size:1.02em;line-height:1.55;color:var(--mute);margin:0 0 14px;max-width:58ch}
h1{margin:0;font-size:1em;font-weight:600;letter-spacing:-.015em}
.who{margin:0;font-size:1em;font-weight:600;letter-spacing:-.015em}
.who a{border:0}
.can{margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--rule)}
.can p{margin:0 0 5px;font-size:1.02em;letter-spacing:-.014em}
.can p:last-child{margin-bottom:0;color:var(--mute)}
p.clients{margin:0;line-height:1.85;font-size:.94em;color:var(--mute)}
p.note{margin:-6px 0 16px;font-size:.84em;color:var(--mute);max-width:52ch}
p.ask{margin:0;max-width:46ch}
nav.pages a[aria-current]{color:var(--ink)}

@media (max-width:640px){
  .entry .hd{flex-direction:column;gap:1px;align-items:flex-start}
  .entry .m{white-space:normal}
  h1.lede-h{font-size:1.5em;max-width:none}
  .page{padding:64px 18px 84px}
  .prefs{width:min(280px,86vw)}
  .prefsbtn{left:12px;bottom:12px}
  footer .sp{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:140ms ease both fo}
::view-transition-new(root){animation:240ms ease both fi}
@keyframes fo{to{opacity:0}} @keyframes fi{from{opacity:0}}
:root[data-ground="aubergine"]{--paper:#16070f;--ink:#f0e6ec}:root[data-theme="light"][data-ground="aubergine"]{--paper:#f7eff3;--ink:#1a0a12}:root[data-ground="forest"]{--paper:#05120c;--ink:#e6efe9}:root[data-theme="light"][data-ground="forest"]{--paper:#eff4f0;--ink:#07160f}:root[data-ground="oxblood"]{--paper:#150707;--ink:#f0e5e2}:root[data-theme="light"][data-ground="oxblood"]{--paper:#f7efec;--ink:#190909}:root[data-ground="ocean"]{--paper:#05101a;--ink:#e4ecf2}:root[data-theme="light"][data-ground="ocean"]{--paper:#eef3f7;--ink:#06131f}