/* =========================================================
   Base: reset, type scale, layout primitives, the cut-join motif
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cotton);-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{background:var(--cotton);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{font-weight:inherit;font-size:inherit;line-height:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-s)}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{box-shadow:none;outline:none}
::selection{background:color-mix(in srgb,var(--in-300) 45%,transparent)}
[hidden]{display:none!important}

/* ---------- type scale (CHOSEN.md) ---------- */
.h-hero{font:800 78px/.94 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.032em}
.h-disp{font:800 44px/1 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.03em}
.h-2{font:700 26px/1.1 var(--serif);font-variation-settings:"opsz" 36;letter-spacing:-.015em}
.h-3{font:700 20px/1.15 var(--serif);font-variation-settings:"opsz" 24;letter-spacing:-.01em}
.ui-title{font:650 17px/1.3 var(--sans);letter-spacing:-.01em}
.body{font:400 15px/1.55 var(--sans)}
.ui{font:500 13px/1.4 var(--sans)}
.small{font:600 11px/1.3 var(--sans);letter-spacing:.04em}
.lede{font:400 16px/1.6 var(--sans);color:var(--ink-2);max-width:56ch}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
/* times: always serif, tabular, even at 13 px */
.t-time{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums lining-nums;font-variation-settings:"opsz" 48;letter-spacing:-.01em}
.tn{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;font-weight:600}
.tab{font-variant-numeric:tabular-nums lining-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
s{text-decoration-thickness:1.5px}

/* ---------- layout primitives ---------- */
.wrap{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut);width:100%}
.wrap.read{max-width:calc(var(--max-read) + var(--gut)*2)}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,8px)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap,24px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap,20px)}
.split-main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.band{background:var(--band);color:var(--on-band);position:relative}
.page{padding-top:40px;padding-bottom:96px}
.section{padding-top:56px}
@media (max-width:1100px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.split-main{grid-template-columns:minmax(0,1fr) 300px;gap:28px}}
@media (max-width:760px){
  .grid-2,.grid-3,.split-main{grid-template-columns:minmax(0,1fr)}
  .page{padding-top:24px;padding-bottom:64px}
  .section{padding-top:40px}
  .h-hero{font-size:46px}
  .h-disp{font-size:34px}
  .h-2{font-size:23px}
}

/* ---------- the motif: a rule with one cut join (2 px gap) ---------- */
.cut{height:1.5px;--at:72px;background:linear-gradient(90deg,currentColor 0 calc(var(--at) - 1px),transparent 0 calc(var(--at) + 1px),currentColor 0);opacity:.9;border:0}
.cut.soft{opacity:.22}
.hr{height:1px;background:var(--rule);border:0}

/* ---------- motion ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(8px);opacity:0}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}