/* system.css: the site's shared type scale and palette, loaded after each page's own styles.
   Values follow the product (tokens.ts, scale.ts): warm paper, a softer ink for the account
   beneath the standpoint, four sizes plus the page headline, one vertical rhythm. */

:root{
  --paper:#F5F2EA; --ink:#1A1A1F; --ink-body:#3A372F; --ink-muted:#5F5C55; --ink-faint:#706C64;
  --rule:#DBD5C6; --rule-strong:#C4BDA9;
  --head:1.375rem; --head-lh:1.42;   /* 22px: margin headings, the page's opening and closing lines */
  --body:1.125rem; --body-lh:1.74;   /* 18px: the account */
  --aside:.9375rem;                  /* 15px: right-margin entries and links, form notes */
  --app:.75rem;                      /* 12px: labels, navigation, bylines, footer */
  --left:14.5rem; --gap:3.5rem;
}
@media (max-width:68rem){ :root{--gap:3rem} }

body{color:var(--ink-body);line-height:var(--body-lh)}
h1,h2,.brand{color:var(--ink)}
h2{font-size:var(--head);line-height:1.28}
.label{font-size:var(--app);color:var(--ink-faint)}

/* Large type is the page speaking: once at the opening, once at the close. Everything between is the account. */
.body>p:first-of-type{font:400 var(--body)/var(--body-lh) var(--serif);color:var(--ink-body)}
section.opening .body>p:first-of-type,.lede{font:400 var(--head)/var(--head-lh) var(--serif);color:var(--ink)}
.land,.close{font:400 var(--head)/var(--head-lh) var(--serif);color:var(--ink)}
/* The essay opens on a story, not a statement, so it starts at body size and speaks large once, at its close. */
article section.opening .body>p:first-of-type{font:400 var(--body)/var(--body-lh) var(--serif);color:var(--ink-body)}
.answer{color:var(--ink)}

/* right margin */
aside p{font:400 italic var(--aside)/1.6 var(--serif);color:var(--ink-muted)}
aside .onward{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--rule)}
aside .onward:first-child{border-top:0;padding-top:0}
aside nav+.onward{padding-top:22px}
aside .onward a,aside .contact a{font:400 var(--aside)/1.4 var(--sans);text-decoration:none}
aside .thesis a{font:400 var(--aside)/1.4 var(--serif)}
aside .thesis a::after,aside .onward a::after,aside .contact a::after{content:"\00a0\2192"}
aside .by{font:400 var(--app)/1.4 var(--sans);color:var(--ink-faint);margin-top:0}

/* contents: the page's sections, the current one marked as the reader scrolls */
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.toc:has(.label){gap:16px}
.toc li{padding-left:0}
.toc li::before{content:none}
.toc a{display:block;padding-left:12px;border-left:1px solid var(--rule);text-decoration:none;
  font:400 var(--aside)/1.4 var(--serif);color:var(--ink-muted);transition:color .15s,border-color .15s}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{color:var(--ink);border-left-color:var(--ink)}
.toc a span.label{display:block;margin-bottom:4px}
.toc a span:last-child{font:inherit;color:inherit}
@media (max-width:68rem){ aside nav{display:none} aside nav+.onward{padding-top:18px} }

/* footer and apparatus */
footer{font-size:var(--app)}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
.hint{font-size:var(--aside)}
.note,.err,.field label .opt{font-size:var(--app)}
.field label{display:flex;align-items:baseline;gap:6px;line-height:1.2}
.addr{font:400 var(--aside)/1.4 var(--sans);color:var(--ink)}
.status{font:400 var(--aside)/1.6 var(--serif);background:#EDE9DF}
input,textarea{color:var(--ink)}

@media (max-width:44rem){
  .lede,section.opening .body>p:first-of-type{font-size:1.25rem}
}

/* exhibit: one of the product's own outputs, set as an object on the page */
.exhibit{margin:12px 0 0;background:#FBFAF7;border:1px solid var(--rule-strong);padding:28px 30px 22px}
.exhibit p{margin:0}
.ex-meta{font:400 var(--app)/1.5 var(--sans);color:var(--ink-muted)}
.ex-meta b{font-weight:500;color:#7A2E2E}
.ex-act{font:400 var(--head)/var(--head-lh) var(--serif);color:var(--ink);margin-top:8px!important}
.ex-verdict{font:500 var(--body)/1.6 var(--serif);color:var(--ink);margin:20px 0 0 22px!important}
.ex-quiet{font:400 var(--aside)/1.6 var(--serif);color:var(--ink-muted);margin:4px 0 0 22px!important}
.ex-fig{margin:22px 0 0 22px}
.ex-sides{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}
.ex-sides>div+div{text-align:right;border-left:1px solid var(--rule)}
.ex-n{font:400 2.75rem/1.1 var(--serif);color:var(--ink);margin:10px 0 6px!important}
.ex-d{font:400 var(--aside)/1.5 var(--serif);color:var(--ink-body)}
.ex-src{font:400 var(--app)/1.5 var(--sans);color:var(--ink-muted);margin-top:8px!important}
.ex-after{font:400 var(--aside)/1.6 var(--serif);color:var(--ink-muted);margin:18px 0 0 22px!important}
.ex-after strong{font-weight:500;color:var(--ink)}
.exhibit figcaption{font:400 var(--app)/1.5 var(--sans);color:var(--ink-faint);border-top:1px solid var(--rule);margin-top:20px;padding-top:12px}

/* architecture: what sits inside your environment, and what crosses its boundary */
.arch{margin:0}
.arch p{margin:0}
.arch-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.arch-node{border:1px solid var(--rule-strong);padding:14px 16px}
.arch-node .label{margin-bottom:8px}
.arch-dash{border-style:dashed}
.arch-t{font:400 var(--aside)/1.4 var(--serif);color:var(--ink)}
.arch-s{font:400 var(--app)/1.5 var(--sans);color:var(--ink-muted)}
.arch-via{display:none}
.arch-flows{height:52px}
.arch-flow{position:relative;font:400 var(--app)/52px var(--sans);color:var(--ink-muted);padding-left:calc(50% + 10px)}
.arch-flow::before{content:"";position:absolute;left:50%;top:0;bottom:6px;border-left:1px solid var(--ink-muted)}
.arch-flow::after{content:"";position:absolute;left:calc(50% - 4px);bottom:2px;width:7px;height:7px;border-right:1px solid var(--ink-muted);border-bottom:1px solid var(--ink-muted);transform:rotate(45deg)}
.arch-flow-dash::before{border-left-style:dashed}
.arch-flow-dash{line-height:1.4;display:flex;align-items:center}
.arch-env{border:1px solid var(--ink);background:#EFEBE1;padding:16px}
.arch-env>.label{margin-bottom:6px}
.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.arch-inner{background:var(--paper);border:1px solid var(--rule-strong);padding:12px 14px}
.arch-inner .arch-t{margin-bottom:4px}
.arch figcaption{font:400 var(--app)/1.5 var(--sans);color:var(--ink-muted);margin-top:16px}

@media (max-width:44rem){
  .exhibit{padding:20px 18px 16px}
  .ex-verdict,.ex-quiet,.ex-fig,.ex-after{margin-left:0!important}
  .ex-n{font-size:2.125rem}
  .arch-row,.arch-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .arch-flows{display:none}
  .arch-via{display:block;font:400 var(--app)/1.5 var(--sans);color:var(--ink-muted);margin-top:6px!important}
  .arch-env{margin:10px 0}
}

/* record of deliberation */
.record .dl-head{font:400 var(--head)/var(--head-lh) var(--serif);color:var(--ink);margin-top:10px}
.record .dl-range{font:400 var(--app)/1.5 var(--sans);color:var(--ink-muted);margin-top:6px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.dl{list-style:none;margin:0;padding:0}
.dl li{display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:0 18px;padding:16px 0 0}
.dl li::before{content:none}
.dl-date{font:400 var(--app)/1.9 var(--sans);color:var(--ink-muted)}
.dl-said{font:400 var(--aside)/1.6 var(--serif);color:var(--ink-body)}
.dl-said.q{font-style:italic}
.dl-who{color:var(--ink-muted)}
.dl-src{font:400 var(--app)/1.5 var(--sans);color:var(--ink-muted);margin-top:4px}
.dl-src em{font-style:normal;color:#8A6B2E}
.dl-gap{margin-top:22px;padding:14px 0 0 14px;border-left:2px solid #8A6B2E}
.dl-gap p+p{font:500 var(--aside)/1.6 var(--serif);color:var(--ink);margin-top:6px}
@media (max-width:44rem){ .dl li{grid-template-columns:minmax(0,1fr)} .dl-date{line-height:1.5} }