/* Archivo and Literata, served from this site (SIL Open Font License); files in /fonts */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin.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:400;font-display:swap;src:url(/fonts/literata-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/literata-italic-latin.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:400 500;font-display:swap;src:url(/fonts/literata-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/literata-latin.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}
/* The Execution Standard - the pen system, shared by the reading pages (insights, essays, common questions).
   Tokens, type, spacing, links, masthead and footer are the landing page's own (index.html, inline);
   change them there and here together. */
:root{
  --paper:#ECEDEA;          /* canvas */
  --stone:#E2E3DF;          /* band surface */
  --sheet:#F5F5F2;          /* lifted surface */
  --rule:#C6C8C6;           /* hairlines */
  --ink:#202329;
  --lead:#50555D;
  --graphite:#3B3F46;
  --quiet:#5E636C;
  --pen:#14171C;
  --action:#24408E;
  --action-deep:#1A3070;
  --measure:1180px;
  --pad:clamp(20px,5vw,64px);
  --sans:"Archivo",system-ui,sans-serif;
  --serif:"Literata",Georgia,serif;
  /* the one vertical scale */
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:48px;
  --s5:64px;
  --s6:88px;
}
@media (max-width:1100px){ :root{--s6:80px} }
@media (max-width:640px){ :root{--s3:20px;--s4:40px;--s5:52px;--s6:64px} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.62;
  font-optical-sizing:auto;text-rendering:optimizeLegibility}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}
a{color:var(--action)}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}
svg{display:block;overflow:visible}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.margin{grid-column:1/4}
.main{grid-column:4/12}
.note{font-style:italic;color:var(--graphite);font-size:20px;line-height:1.35;text-wrap:balance}
h2.sub{font-family:var(--sans);font-weight:600;font-stretch:88%;font-size:clamp(22px,2.2vw,27px);line-height:1.25;letter-spacing:0;max-width:34ch;text-wrap:balance}

/* ---------- masthead: the nameplate on the pen rule, ending on the benchmark ---------- */
.mast{padding-top:var(--s4)}
.mast-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2) var(--s4);flex-wrap:wrap}
.nameplate{display:inline-block;text-decoration:none;color:var(--ink);white-space:nowrap;
  font-family:var(--sans);font-weight:480;font-stretch:112%;font-size:clamp(30px,5.85vw,84px);line-height:1;letter-spacing:-.018em}
.nameplate .the{font-family:var(--serif);font-weight:400;font-style:italic;font-stretch:100%;font-size:.46em;letter-spacing:0;margin-right:.02em}
.mast .nameplate{font-size:clamp(28px,3.9vw,50px)}
.mast-rule{width:100%;height:auto;margin-top:var(--s2)}
.mast-rule-narrow{display:none}
.mast-nav{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---------- links and the one button ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:580;font-stretch:92%;font-size:17px;line-height:1.2;letter-spacing:.005em;
  padding:15px 22px;border-radius:0;text-decoration:none;border:1.5px solid var(--action);transition:background-color .15s,box-shadow .15s}
.btn-primary{background:var(--action);color:#fff;box-shadow:inset 0 -3px 0 var(--action-deep)}
.btn-primary:hover{background:var(--action-deep);border-color:var(--action-deep);box-shadow:inset 0 -3px 0 #10204D}
a.ln,.dlink{color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--action);
  text-decoration-thickness:1.5px;text-underline-offset:.32em;text-decoration-skip-ink:auto;transition:text-decoration-thickness .15s}
a.ln:hover,.dlink:hover{text-decoration-thickness:2.5px}
a.ln{font-family:var(--sans);font-weight:580;font-stretch:92%;font-size:18px}
.mast-nav a.ln,.foot-nav a.ln{font-size:16px}
.dlink{display:inline-block;font-family:var(--sans);font-weight:600;font-stretch:96%;font-size:17px;line-height:1.3;text-underline-offset:.3em;margin-top:var(--s2)}
.dlink-lg{display:block;width:fit-content;font-size:20px;font-stretch:100%;text-decoration-thickness:2px}

/* ---------- the diagnostic band: ruled above and below, a text link in ink ---------- */
.diag-zone{margin-top:var(--s5)}
.diag-inner{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--s5) 0}
.diag-inner .main > * + *{margin-top:var(--s2)}
.diag{font-size:19px;line-height:1.55;max-width:52ch;text-wrap:pretty}

/* ---------- footer: the nameplate, the site, the line ---------- */
.foot{background:var(--stone);margin-top:var(--s6);padding:var(--s4) 0}
.foot-base{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--s2) 48px}
.nameplate-foot{font-size:clamp(28px,3.4vw,44px)}
.foot-nav{display:flex;gap:var(--s1) 28px;flex-wrap:wrap}
.siteline{font-family:var(--sans);font-stretch:92%;font-size:15px;line-height:1.4;color:var(--ink);display:inline-flex;flex-wrap:wrap;column-gap:24px}
.siteline .dot{display:none}

/* ---------- the pen ---------- */
.pen,.pen path{fill:var(--pen);stroke:none}
.pen .plan{fill:none;stroke:var(--pen);stroke-linecap:round;opacity:.62}
.m{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
/* the one motion moment: the page's signature mark draws itself once on load. Static is the default state */
@media (prefers-reduced-motion:no-preference){
  .draw-in .sig .m{stroke-dasharray:1 1;animation:pen var(--d) cubic-bezier(.42,.06,.38,1) var(--t) both}
  @keyframes pen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}

/* ---------- widths ---------- */
@media (max-width:900px){
  .margin,.main{grid-column:1/13}
}
@media (max-width:640px){
  body{font-size:17px}
  .mast{padding-top:var(--s3)}
  .mast-rule-wide{display:none}
  .mast-rule-narrow{display:block}
  .mast{display:flex;flex-direction:column}
  .mast-row{display:contents}
  .mast-nav{order:0;align-self:flex-end;margin-bottom:var(--s2)}
  .mast .nameplate{order:1;align-self:flex-start}
  .mast-rule{order:2}
  .mast .nameplate{font-size:clamp(26px,7.6vw,34px);font-stretch:100%}
  .foot-base{flex-direction:column;align-items:flex-start}
  .siteline{display:inline;column-gap:0}
  .siteline .dot{display:inline;white-space:pre}
}