/* Shared shell for the landing page and the work index. Same type and palette as the articles. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Inter.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/SourceSerif4.woff2) format("woff2")}

:root{
  --paper:#ffffff;--ink:#18181b;--ink2:#3f3f46;--muted:#71717a;--faint:#a1a1aa;--line:#e4e4e7;
  --accent:#1f4e79;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Charter","Source Serif 4",Georgia,serif;
  --col:620px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{min-height:100svh}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.col{width:100%;max-width:var(--col);margin:0 auto;padding:0 28px}

/* top bar: wordmark left, one link right */
.bar{padding:34px 0 0}
.bar .col{display:flex;justify-content:space-between;align-items:baseline}
.mark{font:500 17px/1 var(--serif);letter-spacing:-.005em}
.bar nav a{font-size:14px;color:var(--muted);margin-left:22px}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--ink)}

main{flex:1}
footer{padding:0 0 34px}
footer .col{display:flex;justify-content:space-between;font-size:13px;color:var(--faint)}
footer a:hover{color:var(--muted)}

/* landing: the headline block sits in the vertical middle of the page on every screen */
main.center{display:flex;align-items:center}
.hero{width:100%;padding:24px 0}
.hero h1{font:400 34px/1.28 var(--serif);letter-spacing:-.015em;margin:0 0 26px;max-width:15em;text-wrap:balance}
.hero p{color:var(--ink2);margin:0 0 1.1em;max-width:34em}
.hero .links{margin-top:44px;display:flex;gap:30px;font-size:15px}
.hero .links a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .15s}
.hero .links a:hover{border-color:var(--ink)}
.hero .links a.quiet{color:var(--muted)}
.hero .links a.quiet:hover{color:var(--ink)}

/* work index */
.page{padding:16vh 0 12vh}
.page h1{font:400 15px/1 var(--sans);color:var(--muted);margin:0 0 30px;letter-spacing:0}
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:grid;grid-template-columns:7.5em 1fr;gap:4px 20px;padding:22px 0}
.posts time{font-size:13.5px;color:var(--faint);padding-top:4px}
.posts .t{font:400 21px/1.3 var(--serif);letter-spacing:-.01em;transition:color .15s}
.posts .d{grid-column:2;font-size:14.5px;line-height:1.6;color:var(--muted)}
.posts a:hover .t{color:var(--accent)}

@media (max-width:560px){
  .hero h1{font-size:28px}
  .posts a{grid-template-columns:1fr}
  .posts .d{grid-column:1}
}

/* BenchFlow credit in the footer */
footer .bf{display:inline-flex;align-items:center;gap:8px}
footer .bf img{opacity:.38;transition:opacity .15s}
footer .bf:hover img{opacity:.8}

/* area headings on the work index */
.page h2.area{font:400 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:44px 0 14px}
.page h1 + h2.area{margin-top:0}