*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--sans);font-weight:500;font-size:var(--fs-body);line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink-1);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}

/* ---------- type roles ---------- */
.t-display{font-weight:600;font-size:var(--fs-display);line-height:1;letter-spacing:-.06em;text-wrap:balance}
.t-h2{font-weight:600;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.045em}
.t-h3{font-weight:600;font-size:var(--fs-h3);line-height:22px;letter-spacing:-.035em}
.t-lede{font-weight:500;font-size:var(--fs-lede);line-height:1.35;letter-spacing:-.035em;text-wrap:balance}
.t-body{font-size:var(--fs-body);line-height:22px;letter-spacing:-.02em;color:var(--ink-2)}
.t-meta{font-size:var(--fs-meta);line-height:18px;letter-spacing:-.01em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.t-cap{font-weight:400;font-size:var(--fs-caption);line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- grid ---------- */
.col{width:calc(100% - var(--edge) * 2);margin-inline:auto}
@media (min-width:1000px){.col{width:min(66.667%,1200px)}}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s-7)}
.grid>*{grid-column:1/-1;min-width:0}
section{scroll-margin-top:var(--s-6)}
.block{margin-top:var(--section)}

/* section header: one component everywhere */
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding-bottom:var(--s-4);margin-bottom:var(--s-6);border-bottom:1px solid var(--line)}
.mask{display:block;overflow:hidden;padding-bottom:.08em}
.mask>span{display:block}
.motion .sh .mask>span{transform:translateY(105%);transition:transform var(--d-slow) var(--ease)}
.motion .sh.on .mask>span{transform:none}

/* reveal system: items > body > metadata (instant) */
.motion [data-r]{opacity:0;transform:translateY(var(--rd,20px));transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.motion [data-r="body"]{--rd:8px;transition-duration:var(--d-med)}
.motion [data-r].on{opacity:1;transform:none}

/* page-load entrance (hero only) */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.motion .in{animation:rise var(--d-slow) var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms)}

/* theme switch: one brief cross-fade for colour, nothing else moves */
.theming,.theming *,.theming *::before,.theming *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease,box-shadow .4s ease!important}