:root{
  --base:#fbf9f3;
  --ground:#f3f1ec;
  --ink:#1b1a17;
  --ink-body:#38342e;
  --ink-2:#4c4740;
  --ink-3:#6f6a5f;
  --line:#d5d0c6;
  --accent:var(--ink);
  --grain:.30;
  --col:640px;
  --split:52px;
  --gutter:40px;
  --rail:232px;
  --measure:560px;
 --sans:"Libron", Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:var(--base);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.30'/%3E%3C/svg%3E");
  color:var(--ink);
  font:16.5px/1.72 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

.shell{
  max-width:calc(var(--rail) + var(--split) + var(--col) + 2 * var(--gutter));
  padding-inline:var(--gutter);
  margin-inline:auto;
  display:grid;
  grid-template-columns:var(--rail) minmax(0, var(--col));
  column-gap:var(--split);
  align-items:start;
  background-image:linear-gradient(var(--line), var(--line));
  background-repeat:no-repeat;
  background-size:1px 100%;
  background-position:calc(var(--gutter) + var(--rail)) 0;
}

.rail{
  position:sticky;
  top:0;
  align-self:start;
  padding:54px 26px 40px 0;
}
.mark{display:block;width:165px;max-width:100%;height:auto;margin-bottom:20px}
.wordmark{font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin:0}
.wordmark a{color:inherit;text-decoration:none}
.tagline{font-size:12.5px;line-height:1.6;color:var(--ink-2);margin:10px 0 0}
.rail nav{margin-top:38px;display:flex;flex-direction:column;gap:9px}
.rail nav a{
  position:relative;display:flex;gap:10px;align-items:baseline;
  font-size:12.5px;line-height:1;color:var(--ink-2);text-decoration:none;
}
.rail nav a span{font-size:10.5px;color:var(--ink-3)}
.rail nav a:hover{color:var(--accent)}
.rail nav a[aria-current="true"]{color:var(--accent)}
.rail nav a[aria-current="true"]::before{
  content:"";position:absolute;left:-16px;top:.55em;width:5px;height:1px;background:var(--accent);
}
.writing{margin-top:24px;padding-top:14px;border-top:1px solid var(--line)}
.writing-title{margin:0 0 9px;font-size:10.5px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.writing a{display:flex;gap:10px;align-items:baseline;font-size:12.5px;line-height:1;color:var(--ink-2);text-decoration:none}
.writing a span{font-size:10.5px;color:var(--ink-3)}
.writing a + a{margin-top:9px}
.writing a:hover{color:var(--accent)}
.writing a[aria-current="page"]{color:var(--accent)}
.contact{margin-top:32px;font-size:12px;line-height:1.9;color:var(--ink-2)}
.contact a{text-underline-offset:3px;text-decoration-thickness:.5px}

.signup{margin-top:34px}
.signup h2{margin-bottom:10px}
.signup-row{
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--line);padding-bottom:6px;
}
.signup-row:focus-within{border-bottom-color:var(--ink)}
.signup input{
  flex:1;min-width:0;border:0;background:transparent;padding:0;
  font:12.5px/1.6 var(--sans);color:var(--ink);
}
.signup input::placeholder{color:var(--ink-3)}
/* browsers match :focus-visible on text inputs even for a mouse click, so the
   global outline would draw a box around the input on every click; the row's
   bottom border going from --line to --ink carries the focus state instead */
.signup input:focus{outline:none}
.signup button{
  border:0;background:transparent;padding:0 2px;cursor:pointer;
  font:12.5px/1 var(--sans);color:var(--ink-2);
}
.signup button:hover{color:var(--ink)}
.signup button[disabled]{color:var(--ink-3);cursor:default}
.signup-note{margin:9px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.signup-note[data-state="error"]{color:var(--ink)}
.signup-note:empty{display:none}
.signup-foot{display:none;margin:0 0 22px}

.content{padding:54px 0 96px}
.block{margin-bottom:52px}
.block:last-child{margin-bottom:0}
h2{
  font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;
}
.description{font-size:20px;line-height:1.6;color:var(--ink);margin:0;max-width:32em}
.letter{max-width:var(--measure)}
.letter p{margin:0 0 16px;font-size:16px;line-height:1.76;color:var(--ink-body)}
.letter p:last-of-type{margin-bottom:0}
.signature{margin-top:22px;font-size:15px;color:var(--ink-3)}
.letter .beat{font-size:18.5px;line-height:1.5;color:var(--ink);margin:26px 0}
.seam{border:0;border-top:1px solid var(--line);width:64px;margin:40px 0}
/* between two sections the top gap is already the preceding .block's margin,
   so only the bottom is declared and the line sits evenly in the space */
.content > .seam{margin:0 0 52px}

.work{list-style:none;margin:0;padding:0}
.work li{
  display:grid;grid-template-columns:1fr auto;gap:16px;
  padding:14px 0;border-top:1px solid var(--line);
}
.work li:last-child{border-bottom:1px solid var(--line)}
.work h3{font:400 16.5px/1.3 var(--sans);margin:0}
.work p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2);max-width:46em}
.work .status{
  font-size:11px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}

.acronym{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:var(--split);row-gap:9px}
.acronym li{font-size:15px;line-height:1.5;color:var(--ink-body)}
.acronym-note{margin:20px 0 0;font-size:13.5px;color:var(--ink-3);max-width:40em}

.contact-foot{display:none;border-top:1px solid var(--line);padding-top:18px;
  font-size:12.5px;line-height:1.9;color:var(--ink-2)}

/* writing pages: the article body is a .letter; only the title, section
   headings and the figures table have no counterpart on the home page */
h1{font:400 32px/1.2 var(--sans);letter-spacing:-.035em;margin:0 0 30px}
/* overrides the small uppercase h2 label used on the home page */
.post-heading{font:600 22px/1.3 var(--sans);letter-spacing:-.01em;text-transform:none;
  color:var(--ink);margin:0 0 14px}
.figures{border-collapse:collapse;width:100%;margin:22px 0;
  font-size:14px;line-height:1.5;color:var(--ink-body)}
.figures th,.figures td{padding:9px 0;border-bottom:1px solid var(--line)}
.figures th{font-weight:400;text-align:left}
.figures td{text-align:right;font-variant-numeric:tabular-nums}
.figures tr:last-child th,.figures tr:last-child td{border-bottom:0}

@media (max-width:820px){
  .shell{display:block;max-width:calc(var(--col) + 2 * var(--gutter));background-image:none}
  .rail{display:contents}
  .mark{margin-top:30px}
  .rail nav{
    position:sticky;top:0;z-index:5;flex-direction:row;gap:18px;overflow-x:auto;
    margin:22px calc(-1 * var(--gutter)) 0;padding:11px var(--gutter);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background-color:var(--base);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.30'/%3E%3C/svg%3E");
  }
  .rail nav a span,.writing a span{display:none}
  .rail nav a[aria-current="true"]::before{display:none}
  .rail nav a[aria-current="true"]{text-decoration:underline;text-underline-offset:5px}
  .contact{display:none}
  .rail .signup{display:none}
  .signup-foot{display:block}
  .content{padding:30px 0 56px}
  .block{margin-bottom:40px}
  .content > .seam{margin-bottom:40px}
  .description{font-size:18px}
  .acronym{grid-template-columns:minmax(0,1fr);row-gap:7px}
  .contact-foot{display:block}
  h1{font-size:28px}
  .post-heading{font-size:20px}
}
@media (max-width:820px){ :root{--gutter:20px} }
@media (max-width:360px){ :root{--gutter:18px} }