:root{
  --ground:#F2F2F0; --panel:#FBFBFA; --panel-2:#E9E9E6;
  --ink:#111314; --ink-2:#5D6163; --ink-3:#8C9092;
  --line:#D8D9D5; --line-2:#BFC1BC; --accent:#111314;
  --live:#1E6E4B; --draft:#9A6B12; --danger:#A33224;
  --logo:url("/assets/logo-dark.png");
  --f-head:"Barlow Condensed","Arial Narrow",Helvetica,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#101112; --panel:#171919; --panel-2:#202324;
  --ink:#E7E8E3; --ink-2:#A2A6A5; --ink-3:#767B7C;
  --line:#262A2B; --line-2:#393E3F; --accent:#E7E8E3;
  --live:#63C596; --draft:#DDAE4A; --danger:#E0705E;
  --logo:url("/assets/logo-light.png");
}}
:root[data-theme="dark"]{
  --ground:#101112; --panel:#171919; --panel-2:#202324;
  --ink:#E7E8E3; --ink-2:#A2A6A5; --ink-3:#767B7C;
  --line:#262A2B; --line-2:#393E3F; --accent:#E7E8E3;
  --live:#63C596; --draft:#DDAE4A; --danger:#E0705E;
  --logo:url("/assets/logo-light.png");
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100%}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%}
.hidden{display:none!important}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px;width:100%}

/* ---------- site header ---------- */
.site-head{border-bottom:1px solid var(--line);background:var(--ground);
  position:sticky;top:0;z-index:30;flex:none}
.site-head .row{max-width:1000px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand i{width:36px;height:36px;background:var(--logo) center/contain no-repeat;flex:none}
.brand span{font-family:var(--f-head);font-size:18px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.site-nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.site-nav a{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;padding:7px 10px 8px;
  position:relative;transition:color .3s,letter-spacing .3s}
.site-nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.site-nav a:hover{color:var(--ink);letter-spacing:.17em}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.site-nav a.admin{color:var(--live)}

main{flex:1 1 auto}

/* ---------- buttons ---------- */
.btn{font-family:var(--f-head);font-size:14px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:11px 18px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--ground);cursor:pointer;text-decoration:none;
  display:inline-block;transition:opacity .2s}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--ground);opacity:1}
.btn.sm{font-size:12px;padding:7px 12px;letter-spacing:.11em}
.btn.warn{border-color:var(--danger);color:var(--danger);background:transparent}
.btn.warn:hover{background:var(--danger);color:var(--ground)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- forms ---------- */
label.fl{display:block;font-family:var(--f-head);font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{
  width:100%;padding:11px 13px;font-family:var(--f-body);font-size:16px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line-2)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.field{margin-bottom:18px}

/* ---------- article body ---------- */
.body{font-size:16.5px;color:var(--ink-2);line-height:1.68;overflow:hidden}
.body>*:first-child{margin-top:0}
.body h2{font-family:var(--f-head);font-size:30px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);margin:34px 0 12px;line-height:1.08}
.body h3{font-family:var(--f-head);font-size:23px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);margin:28px 0 10px;line-height:1.14}
.body h4{font-family:var(--f-head);font-size:18px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin:24px 0 8px}
.body p{margin:0 0 15px}
.body ul,.body ol{margin:0 0 15px;padding-left:22px}
.body li{margin-bottom:5px}
.body blockquote{margin:20px 0;padding:2px 0 2px 18px;border-left:2px solid var(--line-2);
  color:var(--ink-3);font-style:italic}
.body strong{color:var(--ink)}
.body img{display:block;height:auto;margin:20px auto;border:1px solid var(--line)}
.body img[data-a="left"]{float:left;margin:8px 26px 16px 0}
.body img[data-a="right"]{float:right;margin:8px 0 16px 26px}
.body img[data-a="center"]{float:none;margin:20px auto}
img[data-w="30"]{width:30%}img[data-w="40"]{width:40%}img[data-w="50"]{width:50%}
img[data-w="60"]{width:60%}img[data-w="70"]{width:70%}img[data-w="80"]{width:80%}
img[data-w="90"]{width:90%}img[data-w="100"]{width:100%}
@media (max-width:640px){
  .body img[data-a="left"],.body img[data-a="right"],.body img[data-w]{
    float:none;width:100%;margin:20px 0}
}

/* ---------- misc ---------- */
.tag{font-family:var(--f-head);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.tag.cat{color:var(--ink);border-left:2px solid var(--accent);padding-left:8px}
.pill{font-family:var(--f-head);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:2px 7px;border:1px solid currentColor}
.pill.live{color:var(--live)}
.pill.draft{color:var(--draft)}
.notice{background:var(--panel);border:1px solid var(--line-2);padding:16px 18px;
  margin:20px 0;font-size:15px;color:var(--ink-2)}
.notice b{color:var(--ink)}
.notice.bad{border-color:var(--danger);color:var(--danger)}
.empty{padding:60px 0;text-align:center;color:var(--ink-3);border:1px dashed var(--line-2)}

footer.site-foot{border-top:1px solid var(--line);padding:22px 24px 34px;text-align:center;
  flex:none;font-family:var(--f-head);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
footer.site-foot a{text-decoration:none}
footer.site-foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}