/* triongle.com 1.0.0
   Drafting-film paper, graphite ink, one redline accent. Jost for structure, Literata for reading.
   The signature is the construction: a triangle whose three sides are drawn in three line types
   (Architect solid, Assure dashed, Govern chain) around an inscribed circle. */

@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/jost-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(/assets/fonts/literata-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(/assets/fonts/literata-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F2F3EF;      /* drafting film */
  --sheet:#FFFFFF;
  --ink:#1B1F23;        /* 14.9:1 on paper */
  --graphite:#4B535B;   /* 7.0:1 on paper */
  --pencil:#7D868E;     /* construction lines only (3.3:1) */
  --rule:#C3C9C6;
  --wash:#E6E8E3;
  --redline:#B3202C;    /* 6.0:1 on paper */
  --redwash:#F6E3E3;
  --f-ui:"Jost",ui-sans-serif,system-ui,sans-serif;
  --f-text:"Literata",ui-serif,Cambria,serif;
  --gutter:clamp(16px,4vw,44px);
  --max:1240px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:1.0625rem;line-height:1.68;
  font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media(min-width:720px){body{font-size:1.125rem}}
img,svg{max-width:100%}
main{display:block;outline:none}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--f-ui);font-weight:500;line-height:1.12;margin:0 0 .5em;letter-spacing:-.005em;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.018em;line-height:1.04}
h2{font-size:clamp(1.55rem,2.6vw,2.2rem);letter-spacing:-.012em}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.22}
h4{font-size:1.05rem}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--redline);text-underline-offset:.2em}
a:hover{color:var(--redline)}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--redline);outline-offset:3px;border-radius:1px}
strong,b{font-weight:640}
em,i{font-style:italic}
ul,ol{padding-left:1.25em;margin:0 0 1em}
li{margin:.2em 0}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.prose{max-width:68ch}
.prose h2{margin-top:1.6em}
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose ul li::marker{color:var(--redline)}
.code{font-family:var(--f-ui);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.note{color:var(--graphite);font-size:.95em}

/* ---------- skip, draft flag ---------- */
.skip{position:absolute;left:8px;top:-60px;z-index:10;background:var(--ink);color:var(--paper);padding:.6em 1em;font-family:var(--f-ui);text-decoration:none}
.skip:focus{top:8px;color:var(--paper)}
.draft-flag{margin:0;background:var(--redline);color:#fff;font-family:var(--f-ui);font-size:.9rem;text-align:center;padding:.45em 1em}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{color:var(--ink);flex:none}
.wordmark{font-family:var(--f-ui);font-weight:560;font-size:1.32rem;letter-spacing:.005em}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.nav li{margin:0}
.nav a{font-family:var(--f-ui);font-size:1rem;font-weight:450;text-decoration:none;color:var(--ink);padding:6px 0;display:inline-block;border-bottom:2px solid transparent}
.nav a:hover{color:var(--redline)}
.nav a[aria-current="page"]{border-bottom-color:var(--redline)}
@media(max-width:719px){
  .mast{padding-block:12px 10px}
  .nav{width:100%}
  .nav ul{gap:0 16px}
  .nav a{font-size:.97rem;padding:5px 0}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--f-ui);font-size:.9rem;color:var(--graphite)}
.crumbs ol{list-style:none;margin:0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:2px 0}
.crumbs li{margin:0;display:inline-flex;align-items:center}
.crumbs li+li::before{content:"/";color:var(--pencil);padding:0 .55em}
.crumbs a{color:var(--graphite);text-decoration:none}
.crumbs a:hover{color:var(--redline)}
.crumbs a[aria-current="page"]{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--f-ui);font-weight:520;font-size:1rem;line-height:1.2;text-decoration:none;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:.72em 1.15em}
.btn:hover{background:var(--redline);border-color:var(--redline);color:#fff}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover{background:transparent;color:var(--redline);border-color:var(--redline)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6em}

/* ---------- hero (home) ---------- */
.hero{padding-block:clamp(36px,6vw,84px) clamp(40px,6vw,88px)}
.hero-grid{display:grid;gap:28px;align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.55rem);max-width:15ch;margin-bottom:.38em}
.hero .sub{font-family:var(--f-ui);font-weight:400;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.35;color:var(--graphite);max-width:32ch;margin:0}
.hero-figure{margin:0;justify-self:center;width:100%;max-width:560px}
@media(max-width:979px){.hero-figure{max-width:440px}}
.hero-drawing{display:block;width:100%;height:auto;overflow:visible}

/* line types: shared by the drawing, the legend and the glyphs */
.ln-architect,.ln-assure,.ln-govern{stroke:var(--ink);stroke-width:3.5;fill:none;stroke-linecap:butt}
.ln-assure{stroke-dasharray:16 9}
.ln-govern{stroke-dasharray:28 7 4 7}
.hd-cons line{stroke:var(--pencil);stroke-width:1;stroke-dasharray:2 5}
.hd-cons circle{fill:var(--pencil)}
.hd-arcs path{stroke:var(--pencil);stroke-width:1;fill:none}
.hd-o{fill:none;stroke:var(--redline);stroke-width:2.5}
.hd-ticks circle{fill:var(--paper);stroke:var(--redline);stroke-width:2}
.hd-labels text{font-family:var(--f-ui);font-size:21px;font-weight:520;fill:var(--ink);letter-spacing:.01em;
  paint-order:stroke;stroke:var(--paper);stroke-width:7px;stroke-linejoin:round}
.hd-labels .hd-in{font-size:16px;font-weight:440;fill:var(--graphite)}

/* the one orchestrated moment: the construction draws itself */
@media (prefers-reduced-motion:no-preference){
  .hd-trace{animation:hd-trace 1.1s cubic-bezier(.55,.1,.3,1) both}
  .hd-cons,.hd-arcs{animation:hd-fade .5s ease-out .95s both}
  .hd-o{stroke-dasharray:100;animation:hd-circle .8s cubic-bezier(.4,0,.2,1) 1.25s both}
  .hd-ticks{animation:hd-fade .3s ease-out 1.95s both}
  .hd-labels{animation:hd-fade .5s ease-out 2.05s both}
}
@keyframes hd-trace{from{stroke-dashoffset:1410}to{stroke-dashoffset:0}}
@keyframes hd-circle{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes hd-fade{from{opacity:0}to{opacity:1}}

/* ---------- bands and split layout ---------- */
.band{border-top:1px solid var(--rule);padding-block:clamp(44px,6.5vw,92px)}
.band-tight{padding-block:clamp(36px,5vw,64px)}
.split{display:grid;gap:18px 56px}
@media(min-width:980px){.split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.split-head h2{max-width:16ch}
.split-head p{color:var(--graphite);font-size:.98em;max-width:38ch}
.lede{font-family:var(--f-ui);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.42;color:var(--graphite);max-width:46ch}
.page-head{padding-block:clamp(26px,4vw,52px) clamp(28px,4vw,48px)}
.page-head h1{max-width:20ch}
.page-head .meta-line{font-family:var(--f-ui);color:var(--graphite);font-size:.98rem;margin-top:1em;max-width:72ch}

/* ---------- three sides ---------- */
.sides{display:grid;gap:28px}
@media(min-width:720px){.sides{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}}
.side-card h3{margin:.55em 0 .35em}
.side-card p{margin:0;color:var(--ink)}
.side-card .line-name{font-family:var(--f-ui);font-size:.9rem;color:var(--graphite);margin-top:.6em}
.legend-line{display:block;width:120px;height:12px}
.legend-line line{stroke-width:3.5}

/* ---------- glyph and side tag ---------- */
.glyph{flex:none;vertical-align:-3px;overflow:visible}
.glyph .g-off{stroke:var(--pencil);stroke-width:1.3}
.glyph .g-on{stroke:var(--redline);stroke-width:3;stroke-linecap:round}
.glyph .g-o{fill:none;stroke:var(--pencil);stroke-width:1.1}
.side{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:.95rem;font-weight:500;color:var(--ink)}
h2 .side{font-size:inherit;gap:14px}
h2 .side .glyph{width:34px;height:31px}

/* ---------- advantages ---------- */
.notes{list-style:none;padding:0;margin:0;display:grid;gap:30px 48px}
@media(min-width:720px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.notes li{margin:0;padding-top:16px;border-top:2px solid var(--ink)}
.notes h3{margin-bottom:.4em}
.notes p{margin:0}

/* ---------- service schedule (table) ---------- */
.schedule-wrap{margin:0 0 1.2em}
.schedule{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:1rem;line-height:1.4}
.schedule thead th{text-align:left;font-weight:500;font-size:.88rem;color:var(--graphite);padding:0 14px 10px 0;border-bottom:2px solid var(--ink)}
.schedule tbody tr{border-bottom:1px solid var(--rule)}
.schedule th[scope="row"],.schedule td{padding:14px 14px 14px 0;vertical-align:top;text-align:left}
.c-code{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.c-code .glyph{margin-right:8px}
.c-svc a{font-weight:520;font-size:1.06rem}
.c-short{display:block;font-family:var(--f-text);font-size:.95rem;color:var(--graphite);margin-top:4px;max-width:44ch}
.c-deliv{color:var(--ink);font-size:.95rem}
.c-dl{margin:0;padding-left:1.05em;list-style:disc}
.c-dl li{margin:0 0 .25em}
.c-dl li::marker{color:var(--redline)}
@media(min-width:720px){.schedule .c-code{width:7.2em}.schedule .c-svc{width:45%}}
@media(max-width:719px){
  .schedule thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .schedule,.schedule tbody,.schedule tr,.schedule th,.schedule td{display:block;width:100%}
  .schedule tbody tr{padding:14px 0}
  .schedule th[scope="row"],.schedule td{padding:0}
  .c-svc{margin-top:4px}
  .c-deliv{margin-top:6px;color:var(--graphite)}
}

/* services grouped by side (home) */
.side-cols{display:grid;gap:26px}
@media(min-width:720px){.side-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.side-col{border-top:2px solid var(--ink);padding-top:14px}
.side-list{list-style:none;padding:0;margin:.8em 0 0;font-family:var(--f-ui)}
.side-list li{margin:0 0 .55em}
.side-list a{text-decoration:none;font-size:1.04rem;display:grid;grid-template-columns:2.6em minmax(0,1fr);line-height:1.35}
.side-list a:hover .code{color:var(--redline)}
.side-list .code{display:inline-block;min-width:2.4em}
.agents-strip{columns:1;column-gap:40px;font-family:var(--f-ui);list-style:none;padding:0;margin:1em 0 0}
@media(min-width:720px){.agents-strip{columns:2}}
@media(min-width:1100px){.agents-strip{columns:3}}
.agents-strip li{break-inside:avoid;margin:0 0 .7em;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;line-height:1.35}
.agents-strip li .glyph{margin-top:2px}
.agents-strip a{text-decoration:none;display:grid;grid-template-columns:3.4em minmax(0,1fr)}

/* ---------- in development (drawn as a hidden line: not yet visible) ---------- */
.indev{margin:0}
.indev-in{border:2px dashed var(--ink);padding:clamp(20px,3vw,36px);max-width:62ch;background:transparent}
.indev-status{font-family:var(--f-ui);font-weight:500;color:var(--redline);margin:0 0 .4em}
.indev h2{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.indev-problem{font-family:var(--f-ui);font-size:1.2rem;line-height:1.4}

/* ---------- method steps ---------- */
.steps{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;gap:0}
.steps>li{counter-increment:st;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:0 18px;padding:20px 0;border-top:1px solid var(--rule);margin:0}
.steps>li::before{content:counter(st);font-family:var(--f-ui);font-weight:500;font-size:1.9rem;line-height:1;color:var(--redline);font-variant-numeric:tabular-nums}
.steps h3{margin:0 0 .3em}
.steps p{margin:0 0 .5em}
.steps p:last-child{margin-bottom:0}
.steps-compact>li{padding:14px 0}
.steps-compact>li::before{font-size:1.4rem}

/* ---------- tables (mapping) ---------- */
.table-wrap{overflow-x:auto;margin:0 0 1.4em}
.maptable{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:.98rem;line-height:1.42;min-width:0}
.maptable th,.maptable td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule)}
.maptable thead th{font-weight:500;font-size:.88rem;color:var(--graphite);border-bottom:2px solid var(--ink)}
.maptable tbody th{font-weight:520}
@media(max-width:719px){
  .maptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .maptable,.maptable tbody,.maptable tr,.maptable th,.maptable td{display:block;width:100%}
  .maptable tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .maptable th,.maptable td{border:0;padding:2px 0}
  .maptable td[data-label]::before{content:attr(data-label) ": ";color:var(--graphite)}
}

/* ---------- service page ---------- */
.svc-head{padding-block:clamp(22px,3.5vw,44px) clamp(26px,3.5vw,40px);border-bottom:1px solid var(--rule)}
.svc-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-ui);margin:0 0 .9em}
.svc-code .code{font-size:1.25rem}
.svc-side{font-weight:500;color:var(--graphite)}
.svc-group{font-size:.9rem;color:var(--graphite);border:1px solid var(--rule);padding:1px 8px}
.svc-head h1{max-width:22ch}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:1.4em 0 0}
.price{font-family:var(--f-ui);font-weight:520;margin:0 10px 0 0}
.svc-grid{display:grid;gap:36px;padding-block:clamp(30px,4.5vw,56px)}
@media(min-width:980px){.svc-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:64px}}
.svc-aside{font-family:var(--f-ui);align-self:start}
@media(min-width:980px){.svc-aside{position:sticky;top:20px}}
.aside-h{font-size:1.05rem;font-weight:560;margin:0 0 .5em;padding-top:12px;border-top:2px solid var(--ink)}
.aside-h+ul{margin-bottom:1.6em}
.deliv,.fwl{padding-left:1.1em;font-size:1rem;line-height:1.4}
.deliv li::marker,.fwl li::marker{color:var(--redline)}
.deliv li,.fwl li{margin:.35em 0}
.aside-note{font-size:.92rem;color:var(--graphite)}
.svc-map{padding-bottom:clamp(20px,3vw,40px)}
.svc-map h2,.svc-related h2{margin-top:0}
.svc-related{padding-bottom:clamp(30px,4vw,56px)}
.related{list-style:none;padding:0;margin:0;font-family:var(--f-ui);display:flex;flex-wrap:wrap;gap:10px 28px}
.related li{display:flex;align-items:center;gap:8px;margin:0}
.related a{text-decoration:none}

/* ---------- pricing ---------- */
.price-list{list-style:none;padding:0;margin:0 0 2.5em}
.price-item{display:grid;gap:10px 32px;padding:20px 0;border-top:1px solid var(--rule);margin:0}
@media(min-width:900px){.price-item{grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,3fr);align-items:start}}
.pi-head h3{margin:.35em 0 0;font-size:1.2rem}
.pi-head h3 a{text-decoration:none}
.pi-label{font-family:var(--f-ui);font-size:.88rem;color:var(--graphite);margin:0 0 .2em}
.pi-body ul{margin:0;font-family:var(--f-ui);font-size:.98rem;line-height:1.4;padding-left:1.1em;list-style:disc}
.pi-body li::marker{color:var(--redline)}
.pi-price .price{margin:0 0 .5em}
.pi-price .btn{font-size:.93rem;padding:.5em .85em}

/* ---------- frameworks guide ---------- */
.fw-toc{font-family:var(--f-ui);columns:1;column-gap:36px;padding-left:0;list-style:none}
@media(min-width:720px){.fw-toc{columns:2}}
@media(min-width:1100px){.fw-toc{columns:3}}
.fw-toc li{break-inside:avoid;margin:0 0 .45em}
.fw-group{padding-top:clamp(28px,4vw,48px)}
.fw-group>h2{padding-bottom:.35em;border-bottom:2px solid var(--ink);max-width:none}
.fw{padding:22px 0 18px;border-bottom:1px solid var(--rule);max-width:72ch}
.fw h3{margin:0 0 .25em}
.fw-ver{font-family:var(--f-ui);font-weight:500;color:var(--graphite);margin:0 0 .6em}
.fw-use{font-family:var(--f-ui);font-size:.95rem;margin:.4em 0 0}
.fw-use-l{color:var(--graphite);margin-right:.25em}
.fw:target,.price-item:target{background:var(--redwash);box-shadow:-12px 0 0 var(--redwash),12px 0 0 var(--redwash)}

/* ---------- platforms ---------- */
.plist{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:0 40px}
@media(min-width:720px){.plist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.plist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plist>li{margin:0;padding:14px 0 12px;border-top:1px solid var(--rule)}
.pname{font-family:var(--f-ui);font-weight:560;font-size:1.08rem;display:block}
.pby{font-family:var(--f-ui);font-size:.92rem;color:var(--graphite);display:block;margin:.1em 0 .3em}
.pdesc{font-size:.98rem;line-height:1.5;display:block}
.pcount{font-family:var(--f-ui);color:var(--graphite);font-weight:400;font-size:.6em;margin-left:.4em;vertical-align:.15em}

/* ---------- finding record (method) ---------- */
.finding{background:var(--sheet);border:2px solid var(--ink);padding:clamp(18px,2.6vw,28px);margin:1.2em 0 1.6em}
.finding-label{font-family:var(--f-ui);font-size:.92rem;color:var(--redline);font-weight:500;margin:0 0 .4em}
.finding h3{margin-top:0}
.finding dl{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;font-family:var(--f-ui);font-size:.97rem}
@media(min-width:720px){.finding dl{grid-template-columns:15em minmax(0,1fr)}}
.finding dt{color:var(--graphite);padding:9px 12px 0 0;border-top:1px solid var(--rule)}
.finding dd{margin:0;padding:9px 0;border-top:1px solid var(--rule)}
@media(max-width:719px){.finding dd{border-top:0;padding-top:2px}}
.version-box{font-family:var(--f-ui);display:inline-flex;gap:0;border:2px solid var(--ink);margin:1em 0 0}
.version-box span{padding:6px 12px}
.version-box span+span{border-left:2px solid var(--ink)}

/* ---------- record (about) ---------- */
.record{list-style:none;padding:0;margin:0}
.record>li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 28px;padding:18px 0;border-top:1px solid var(--rule);margin:0}
@media(min-width:720px){.record>li{grid-template-columns:7.5rem minmax(0,1fr)}}
.record .yr{font-family:var(--f-ui);font-weight:500;font-size:1.5rem;line-height:1.1;color:var(--redline);font-variant-numeric:tabular-nums}
.record h3{margin:0 0 .3em}
.record p{margin:0}

/* ---------- contact ---------- */
.contact-lines{list-style:none;padding:0;margin:0;font-family:var(--f-ui)}
.contact-lines li{padding:16px 0;border-top:1px solid var(--rule);display:grid;gap:4px 24px;margin:0}
@media(min-width:720px){.contact-lines li{grid-template-columns:12rem minmax(0,1fr)}}
.contact-lines .k{color:var(--graphite)}
.contact-lines .v{font-size:1.15rem}
.big-mail{font-family:var(--f-ui);font-size:clamp(1.35rem,3.4vw,2.3rem);font-weight:500;word-break:break-word}

/* ---------- citations and references ---------- */
sup.cite{font-family:var(--f-ui);font-size:.68em;line-height:0;vertical-align:super;white-space:nowrap;font-weight:500}
sup.cite a{color:var(--redline);text-decoration:none;padding:0 1px}
sup.cite a:hover{text-decoration:underline}
.references,.further-reading{border-top:1px solid var(--rule);padding-block:clamp(32px,4vw,52px);font-size:.93rem;line-height:1.55}
.further-reading{border-top:0;padding-top:0}
.references h2,.further-reading h2{font-size:1.3rem}
.ref-intro{color:var(--graphite);font-family:var(--f-ui);font-size:.92rem;max-width:72ch}
.references ol{padding-left:2.1em;max-width:84ch}
.references li,.further-reading li{margin:0 0 .65em;padding:2px 6px 2px 4px;scroll-margin-top:24px}
.references li::marker{font-family:var(--f-ui);color:var(--graphite)}
.ref-back,.ref-back a{font-family:var(--f-ui);color:var(--redline);text-decoration:none;margin-right:.3em}
.ref-site{color:var(--graphite)}
.ref-note{color:var(--graphite);font-style:italic}
.references li:target{background:var(--redwash)}
.further-reading ul{max-width:84ch}
@media (prefers-reduced-motion:no-preference){.references li{transition:background-color .6s ease}}
sup.cite a:target{background:var(--redwash);outline:2px solid var(--redline)}

/* ---------- footer: the title block ---------- */
.site-foot{border-top:1px solid var(--rule);margin-top:clamp(24px,4vw,48px);padding-block:clamp(28px,4vw,48px) 36px;font-family:var(--f-ui)}
.titleblock{display:grid;border:2px solid var(--ink);background:var(--paper)}
@media(min-width:980px){.titleblock{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.tb-brand{padding:18px 20px;border-bottom:2px solid var(--ink)}
@media(min-width:980px){.tb-brand{border-bottom:0;border-right:2px solid var(--ink)}}
.tb-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.tb-mark:hover{color:var(--ink)}
.tb-brand p{margin:.7em 0 0;color:var(--graphite);font-size:.98rem;line-height:1.4;max-width:30ch}
.tb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
@media(min-width:720px){.tb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tb-cell{padding:10px 16px 12px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-width:0}
.tb-cell dt{font-size:.82rem;color:var(--graphite);margin:0 0 2px}
.tb-cell dd{margin:0;font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.tb-wide{grid-column:span 2}
@media(min-width:720px){.tb-wide{grid-column:span 1}}
.foot-nav ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-nav li{margin:0}
.foot-nav a{text-decoration:none;font-size:.97rem}
.fine{color:var(--graphite);font-size:.88rem;line-height:1.5;margin:16px 0 0;max-width:90ch}

/* ---------- 404 ---------- */
.nf{padding-block:clamp(48px,8vw,120px)}
.nf .mark-lg{color:var(--ink)}
.nf-list{list-style:none;padding:0;margin:1.2em 0 0;font-family:var(--f-ui);display:flex;flex-wrap:wrap;gap:8px 24px}
.nf-list li{margin:0}

/* ---------- misc ---------- */
.kicker{font-family:var(--f-ui);font-weight:500;color:var(--graphite);margin:0 0 .5em}
.two-col{display:grid;gap:8px 48px}
@media(min-width:900px){.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}}
.callout{border-left:3px solid var(--redline);padding:4px 0 4px 18px;margin:1.4em 0;max-width:66ch}
.callout p:last-child{margin-bottom:0}
dl.defs{margin:0 0 1em}
dl.defs dt{font-family:var(--f-ui);font-weight:560;margin-top:.9em}
dl.defs dd{margin:.15em 0 0}
@media print{.masthead .nav,.skip,.btn{display:none}body{background:#fff}}