@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-serif-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-serif-400-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-serif-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans.woff2) format("woff2")}
:root{
  --paper:#f3efe6; --ink:#1d1c1a; --muted:#6b665d; --rule:#1d1c1a; --hair:#d6cfc1;
  --link:#5b3a8c; --vetted:#a586c8;
  --serif:"IBM Plex Serif",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#161519; --ink:#ebe6dc; --muted:#9d978d; --rule:#ebe6dc; --hair:#34323a; --link:#c4a5ea; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.075rem/1.7 var(--serif)}
main{max-width:38rem;margin:0 auto;padding:2.5rem 1rem 4rem}
.rules{border-top:4px solid var(--rule);border-bottom:1px solid var(--rule);height:7px;margin-bottom:2.5rem}
header{display:flex;gap:1.25rem;align-items:center;margin-bottom:2rem}
header img{width:84px;height:84px;border-radius:2px;flex:none;filter:saturate(.85)}
header h1{font:600 2.1rem/1.1 var(--serif);margin:0;letter-spacing:-.01em}
.sub{font:.95rem/1.45 var(--sans);color:var(--muted);margin:.35rem 0 0}
.lede{margin:-.4rem 0 .6rem}
p{margin:0 0 1.15rem}
h2{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:3rem 0 1rem;padding-top:1.1rem;border-top:1px solid var(--hair)}
ul.idx{list-style:none;margin:0;padding:0}
.idx li{display:grid;grid-template-columns:1fr;gap:.1rem;padding:.55rem 0}
.idx li+li{border-top:1px dotted var(--hair)}
.idx b{font-weight:600}
.idx .what{color:var(--muted);font-size:.97rem}
.idx .when{font:.8rem/1.6 var(--sans);color:var(--muted)}
.vetted b{box-shadow:inset 0 -.45em 0 color-mix(in srgb,var(--vetted) 45%,transparent)}
ul.q{margin:0;padding-left:1.2rem}
ul.q li+li{margin-top:.35rem}
.flags{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem .9rem;font:.85rem/1.4 var(--sans);color:var(--muted)}
.flags li{display:flex;align-items:center;gap:.4rem}
.flag{width:1.5rem;height:1rem;flex:none;border-radius:1px;box-shadow:0 0 0 1px var(--hair)}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--link);outline-offset:3px}
footer{margin-top:3.5rem;padding-top:1rem;border-top:4px solid var(--rule);font:.9rem/1.5 var(--sans);color:var(--muted);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (min-width:40rem){
  main{padding-top:4rem}
  .idx li{grid-template-columns:1fr auto;column-gap:1.5rem}
  .idx .what{grid-column:1}
  .idx .when{grid-row:1;grid-column:2;text-align:right}
}

/* writing pages and 404 */
.post{font-size:1.125rem;line-height:1.75}
.post main{max-width:36rem}
.post .rules{margin-bottom:1.5rem}
.home{font:.9rem/1 var(--sans);color:var(--muted);text-decoration:none}
.home:hover{color:var(--link)}
.post h1{font:600 2.2rem/1.15 var(--serif);margin:2.5rem 0 .5rem;letter-spacing:-.01em}
.meta,.post .meta{font:.9rem/1.5 var(--sans);color:var(--muted);margin:0 0 2.25rem}
.post p{margin:0 0 1.2rem}
.post .src{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--hair);font:.88rem/1.55 var(--sans);color:var(--muted)}
.post footer{margin-top:3rem}

.post .dateline{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:3rem 0 .8rem}
.post .dateline + h1{margin-top:0}

/* wide screens: label rail on the home page, roomier writing pages */
@media (min-width:56rem){
  body:not(.post){font-size:1.15rem}
  body:not(.post) main{max-width:68rem;padding:5rem 2.5rem;display:grid;grid-template-columns:13rem minmax(0,1fr);column-gap:4rem;align-items:start}
  body:not(.post) main>*{grid-column:2}
  body:not(.post) main>.rules,body:not(.post) main>footer{grid-column:1/-1}
  body:not(.post) main>header{grid-column:1/-1;margin-bottom:3rem}
  body:not(.post) header img{width:132px;height:132px}
  body:not(.post) header h1{font-size:3.2rem}
  body:not(.post) .sub{font-size:1.05rem}
  body:not(.post) main>h2{grid-column:1;margin:3rem 0 0;padding-top:1.1rem;border-top:1px solid var(--hair)}
  body:not(.post) main>h2 + *{margin-top:3rem !important;padding-top:1rem;border-top:1px solid var(--hair)}
  .post main{max-width:44rem;padding-top:5rem}
  .post{font-size:1.2rem}
  .post h1{font-size:2.8rem}
}

/* writing topics */
.topics{font:.88rem/1.9 var(--sans);color:var(--muted);margin:0 0 .8rem}
.topics a{color:var(--link)}
.topics b{color:var(--ink);font-weight:600}
.topics span{color:var(--muted);font-size:.8em;margin-left:.15em}
.post .topics{margin:.6rem 0 1.75rem}
.post .idx{font-size:1.05rem}