:root{
  --bg-page:#FAF8F3;
  --bg-frame:#F3F0E7;
  --bg-dark:#20242F;
  --ink:#22242E;
  --ink-dim:#6B6E7A;
  --accent:#A85D1D;
  --accent-soft:#E8A33D;
  --line:#E6E1D3;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --sans:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --display:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg-page);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  margin:0;
}

.wrap{max-width:720px;margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:960px;margin:0 auto;padding:0 24px;}

.layout{display:grid;grid-template-columns:1fr 240px;gap:56px;align-items:start;}
@media (max-width:760px){
  .layout{grid-template-columns:1fr;}
  /* The sidebar's left border/padding only make sense next to a column —
     once it stacks below the article list, switch to a top divider instead
     of leaving a stray vertical bar and indent with nothing beside it. */
  .sidebar{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:36px;margin-top:8px;}
}

a{color:var(--accent);}
a:hover{color:var(--ink);}

/* ---- Header ---- */
header.site{
  padding:24px 0;
}
header.site .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
@media (max-width:600px){
  header.site .wrap{flex-direction:column;align-items:flex-start;gap:10px;}
  .site-nav{gap:16px;}
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.logo .mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg-dark);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo .mark span{
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--accent-soft);
}
.logo .name{
  font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:0;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:24px;
}
.site-nav a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--ink-dim);
  text-decoration:none;
}
.site-nav a:hover{color:var(--accent);}
.tagline{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---- Homepage ---- */
/* longhand on purpose: this element also carries .wrap, whose horizontal
   padding a `padding: Ypx 0 Zpx` shorthand here would silently zero out */
.hero{padding-top:64px;padding-bottom:48px;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 16px;
}
h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(32px,6vw,48px);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 20px;
  color:var(--ink);
}
.lede{
  font-size:18px;
  color:var(--ink-dim);
  max-width:560px;
  margin:0 0 0;
}
.lede b{color:var(--ink);font-weight:600;}

.author-line{
  display:flex;
  gap:14px;
  align-items:center;
  margin:36px 0 0;
}
.author-line .avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--bg-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;color:var(--accent-soft);
  font-size:15px;
}
.author-line p{margin:0;font-size:14px;color:var(--ink-dim);}
.author-line p b{color:var(--ink);}

/* longhand on purpose: this element also carries .wrap-wide, see .hero above */
section.articles{padding-top:8px;padding-bottom:88px;}
section.articles h2{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 24px;
}

.article-list{display:grid;}
.article-card{
  display:block;
  text-decoration:none;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.article-list .article-card:first-child{padding-top:0;}
.article-card .kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 8px;
}
.article-card .kicker .card-date{
  color:var(--ink-dim);
  letter-spacing:normal;
}
.article-card h3{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  color:var(--ink);
  margin:0 0 8px;
  transition:color 0.15s ease;
}
.article-card:hover h3{color:var(--accent);}
.article-card p{
  font-size:15px;
  color:var(--ink-dim);
  margin:0;
  max-width:520px;
}

/* ---- Sidebar / category index ---- */
.sidebar{
  border-left:1px solid var(--line);
  padding-left:32px;
}
.sidebar h2{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 22px;
}
.sidebar-cat{margin-bottom:26px;}
.sidebar-cat:last-child{margin-bottom:0;}
.sidebar-cat h3{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 12px;
}
.sidebar-cat ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.sidebar-cat a{
  font-size:14px;
  line-height:1.4;
  color:var(--ink-dim);
  text-decoration:none;
}
.sidebar-cat a:hover{color:var(--accent);}
.dim-note{font-size:13px;color:var(--ink-dim);margin:0;}

/* ---- Article page ---- */
/* longhand on purpose: this element also carries .wrap, see .hero above */
article.post{padding-top:56px;padding-bottom:88px;}
article.post .kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 16px;
}
article.post h1{font-size:clamp(28px,5vw,42px);line-height:1.15;}
article.post .meta{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-dim);
  margin:0 0 36px;
}
article.post .meta a{color:var(--ink-dim);}

.disclosure{
  font-size:14px;
  color:#5A5D68;
  background:var(--bg-frame);
  border-left:3px solid var(--accent-soft);
  padding:16px 20px;
  border-radius:0 4px 4px 0;
  margin:0 0 44px;
}
.disclosure b{color:var(--ink);}

article.post .content{font-size:17px;color:var(--ink);}
article.post .content > *{max-width:660px;}
article.post h2{
  font-family:var(--display);
  font-weight:600;
  font-size:27px;
  line-height:1.25;
  color:var(--ink);
  margin:48px 0 18px;
}
article.post h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:18px;
  color:var(--ink);
  margin:30px 0 12px;
}
article.post p{margin:0 0 20px;color:var(--ink);}
article.post p.dim{color:var(--ink-dim);}
article.post ul,article.post ol{margin:0 0 20px;padding-left:22px;color:var(--ink);}
article.post li{margin-bottom:8px;}
article.post strong{color:var(--ink);}

.table-wrap{overflow-x:auto;margin:0 0 32px;}
table.compare{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:560px;
}
table.compare th,table.compare td{
  border-bottom:1px solid var(--line);
  padding:12px 16px;
  text-align:left;
}
table.compare th{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:2px solid var(--ink);
}
/* Below 600px, a wide comparison table just forces sideways scrolling,
   which is what made it hard to read on a phone — stack each row as a
   labeled card instead. */
@media (max-width:600px){
  .table-wrap{overflow-x:visible;}
  table.compare{min-width:0;}
  table.compare thead{display:none;}
  table.compare,table.compare tbody,table.compare tr,table.compare td{display:block;width:100%;}
  table.compare tr{margin-bottom:16px;border:1px solid var(--line);border-radius:6px;padding:4px 16px;}
  table.compare tr:last-child{margin-bottom:0;}
  table.compare td{border-bottom:1px solid var(--line);padding:10px 0;}
  table.compare td:last-child{border-bottom:none;}
  table.compare td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:4px;
  }
}

.cta-box{
  background:var(--bg-frame);
  border-radius:6px;
  padding:26px 28px;
  margin:36px 0;
}
.cta-box p{margin:0 0 14px;}
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  background:var(--accent);
  color:#FFF9EF;
  padding:12px 22px;
  border-radius:4px;
}
.btn:hover{background:var(--ink);color:#FFF9EF;}

.faq dt{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);margin:0 0 6px;}
.faq dd{margin:0 0 22px;color:var(--ink-dim);}

/* ---- Share row ---- */
.share-row{
  margin:44px 0 0;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.share-row p{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 14px;
}
.share-links{display:flex;flex-wrap:wrap;gap:10px;}
.share-links a,
.share-links button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink);
  background:none;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  cursor:pointer;
  transition:border-color 0.15s ease,color 0.15s ease;
}
.share-links svg{flex-shrink:0;}
.share-links a:hover,
.share-links button:hover{border-color:var(--accent);color:var(--accent);}
.share-links button.copied{border-color:var(--accent);color:var(--accent);}

/* ---- Subscribe box ---- */
.subscribe-box{
  background:var(--bg-frame);
  border-radius:6px;
  padding:28px 28px 30px;
  margin:44px 0 0;
}
.subscribe-box p.kicker{margin:0 0 10px;color:#8B4B18;}
.subscribe-box h3{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  color:var(--ink);
  margin:0 0 8px;
}
.subscribe-box .subscribe-intro{
  font-size:14px;
  color:#5A5D68;
  margin:0 0 18px;
}
.subscribe-freq{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 16px;}
.subscribe-freq label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
}

/* Kit's own embedded form markup — Kit's generated <style> block was left
   out on purpose (it's ~300 lines of default blue-button styling); these
   rules restyle their (unmodified, working) HTML to match the site instead. */
.subscribe-kit-slot .formkit-fields{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}
.subscribe-kit-slot .formkit-field{flex:1 1 220px;margin:0;}
.subscribe-kit-slot .formkit-input{
  width:100%;
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:4px;
  padding:10px 12px;
}
.subscribe-kit-slot .formkit-input:focus{outline:none;border-color:var(--accent);}
.subscribe-kit-slot .formkit-submit{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  background:var(--accent);
  color:#FFF9EF;
  padding:12px 22px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  position:relative;
}
.subscribe-kit-slot .formkit-submit:hover{background:var(--ink);}
.subscribe-kit-slot .formkit-submit span{position:relative;z-index:1;}
.subscribe-kit-slot .formkit-spinner{display:none;}
.subscribe-kit-slot .formkit-submit[data-active] span{opacity:0;}
.subscribe-kit-slot .formkit-submit[data-active] .formkit-spinner{
  display:flex;gap:3px;position:absolute;left:0;right:0;top:0;bottom:0;
  align-items:center;justify-content:center;
}
.subscribe-kit-slot .formkit-spinner div{
  width:5px;height:5px;border-radius:50%;background:#FFF9EF;opacity:0.6;
}
.subscribe-kit-slot .formkit-alert{
  list-style:none;margin:14px 0 0;padding:12px 16px;
  border-radius:4px;font-size:14px;
}
.subscribe-kit-slot .formkit-alert:empty{display:none;margin:0;padding:0;}
.subscribe-kit-slot .formkit-alert-success{background:var(--bg-page);border:1px solid var(--accent-soft);color:var(--ink);}
.subscribe-kit-slot .formkit-alert-error{background:#FDE8E2;border:1px solid #F2643B;color:#9A2F16;}
.subscribe-kit-slot .formkit-powered-by-convertkit-container{margin:10px 0 0;}
.subscribe-kit-slot .formkit-powered-by-convertkit{
  font-family:var(--mono);font-size:11px;color:#5A5D68;
  text-decoration:none;
}
.subscribe-kit-slot .formkit-powered-by-convertkit:hover{opacity:1;color:var(--accent);}

/* ---- Contact form ---- */
#contact-thanks{
  background:var(--bg-frame);
  border-left:3px solid var(--accent-soft);
  padding:16px 20px;
  border-radius:0 4px 4px 0;
}
.contact-form{display:grid;gap:6px;max-width:480px;margin-top:28px;}
.contact-form label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:14px 0 0;
}
.contact-form label:first-of-type{margin-top:0;}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea{
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:4px;
  padding:10px 12px;
  width:100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.contact-form textarea{resize:vertical;font-family:var(--sans);}
.contact-form .btn{
  margin-top:22px;
  border:none;
  cursor:pointer;
  justify-self:start;
}

/* ---- Small-screen legibility ---- */
/* Small uppercase, letter-spaced mono labels (kickers, nav, tagline) read fine
   at desktop distance but get hard to scan at phone size — nudge them up. */
@media (max-width:480px){
  .tagline,.site-nav a{font-size:13px;}
  .article-card .kicker,article.post .kicker{font-size:12px;}
  .sidebar-cat h3{font-size:12px;}
  section.articles h2,.sidebar h2{font-size:13px;}
}

/* ---- Footer ---- */
footer.site{
  border-top:1px solid var(--line);
  padding:32px 0;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-dim);
}
footer.site a{color:var(--ink-dim);}