/* ===== Clean main.css (mobile-first, dark-mode + menu fixed) =============== */

/* -------- Tokens ---------------------------------------------------------- */

:root{
  /* light mode: gentle cream */
  --panel-bg: color-mix(in oklab, var(--bg), #fff4e6 15%);
}
[data-theme="dark"]{
  /* dark mode: much smaller tint so it doesn’t glow */
  --panel-bg: color-mix(in oklab, var(--bg), #fff4e6 6%);
}

:root{
  --max: 68ch;
  --bg: #fff;
  --fg: #0b0b0b;
  --muted: #666;
  --link: #0b57d0;
  --radius: .5rem;
  --accent: #a00000;   /* site accent used by buttons & quotes */
}

:root{
  /* ...your existing tokens... */
  --header-h: 56px;       /* mobile header height */
}

@media (min-width: 720px){
  :root{ --header-h: 64px; } /* a tad taller on desktop */
}


/* Auto dark mode (user OS preference) */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0b0b; --fg:#eee; --muted:#aaa; --link:#8ab4ff; }
}

/* Manual theme override (your theme toggle sets data-theme on :root) */
:root[data-theme="light"]{ --bg:#fff; --fg:#0b0b0b; --muted:#666; --link:#0b57d0; }
:root[data-theme="dark"] { --bg:#0b0b0b; --fg:#eee; --muted:#aaa; --link:#8ab4ff; }

/* -------- Base ------------------------------------------------------------ */
*{ box-sizing: border-box; }
html{ color-scheme: light dark; font-size: clamp(18px, 0.45vw + 16px, 20px); }
body{
  margin: 0;
  /* background: var(--bg); */
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Container */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 2rem 1rem; }
main.wrap{ padding-top: 1rem; }                     /* tighter top padding */
main.wrap > h1:first-child{ margin-top: .5rem; }    /* pull title up a bit */

/* home title spacing + underline proof-of-life */
main.wrap > h1 { margin-top: .5rem !important; }
a { text-decoration-thickness: .12em; text-underline-offset: .18em; }

/* Links, images, helpers */
a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; height: auto; }
.small{ color: var(--muted); font-size: .9rem; }
.post-meta{ color: var(--muted); margin-top: -.25rem; }

/* Typography */
h1{ font-size: clamp(2rem, 3vw + 1rem, 1.6rem); line-height: 1.2; margin: 1rem 0 .5rem; }
h2{ font-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem); line-height: 1.25; margin: 1.25rem 0 .25rem; }
h3{ font-size: 1.125rem; line-height: 1.25; margin: 1rem 0 .25rem; }
p, li{ margin: .9rem 0; }
article p{ margin: 1rem 0; }

/* ===== Blockquotes — minimal, elegant ===== */
blockquote{
  margin: 1.25rem 0 1.5rem;
  padding: .75rem 1rem .75rem 1.25rem;        /* room for the bar */
  color: var(--muted);                        /* softer copy */
  background: transparent;
/* 
  border-left: .35rem solid color-mix(in oklab, var(--accent) 70%, transparent);
 */
  border-left: .3rem solid color-mix(in oklab, var(--fg) 28%, transparent);
  border-radius: .5rem;

}
[data-theme="dark"] blockquote{
  border-left-color: color-mix(in oklab, var(--fg) 38%, transparent);
}

blockquote p{ margin: .45rem 0; }             /* even rhythm inside */
blockquote :is(em,strong){ color: var(--fg); }/* emphasis still pops */

blockquote cite{
  display:block;
  margin-top:.5rem;
  font-style: normal;
  color: var(--muted);
}
blockquote cite::before{ content:"— "; }

/* Optional faint “card” look — leave commented out unless you want it
blockquote{ background: color-mix(in oklab, var(--bg), var(--fg) 3%); }
[data-theme="dark"] blockquote{ background: color-mix(in oklab, var(--bg), white 2%); }
*/

code, pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre{
  background: color-mix(in oklab, var(--fg) 10%, transparent);
  padding: .75rem 1rem; border-radius: var(--radius); overflow: auto;
}

/* Responsive comparison table
   - Desktop: normal table
   - Mobile: each row becomes a stacked card with labels
--------------------------------------------------------- */
.compare{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.35;
  table-layout: fixed;                 /* fewer layout jumps */
}

.compare th,
.compare td{
  padding: .6rem .8rem;
  vertical-align: top;
  border-top: 1px solid color-mix(in oklab, var(--fg), transparent 85%);
  hyphens: auto;
  overflow-wrap: anywhere;
}

.compare thead th{
  text-align: left;
  color: color-mix(in oklab, var(--fg), transparent 30%);
  font-weight: 700;
  border-top: 0;
}

.compare tbody tr:nth-child(odd){
  background: color-mix(in oklab, var(--panel-bg), var(--fg) 3%); /* subtle zebra */
}

/* Optional: subtle table container scroll on small viewports
   (kept even though we stack, in case JS injects extra cols etc.) */
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== Mobile layout: stack each row into a labeled card ===== */
@media (max-width: 720px){
  .compare thead{ display: none; }      /* hide header row */
  .compare, .compare tbody, .compare tr, .compare td{ display: block; width: 100%; }
  .compare tr{
    margin: .75rem 0;
    padding: .75rem .75rem .6rem;
    background: var(--panel-bg);
    border: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,.04);
  }
  .compare td{
    border: 0;
    padding: .25rem 0;
    display: grid;
    grid-template-columns: 9.5rem 1fr;  /* label | value */
    column-gap: .75rem;
  }
  .compare td + td{ margin-top: .15rem; }
  .compare td::before{
    content: attr(data-label);
    font-weight: 600;
    color: color-mix(in oklab, var(--fg), transparent 35%);
  }
}

.compare thead th{
  position: sticky; top: 0;
  background: var(--panel-bg);
  z-index: 1;
}

/* Drop cap — opt-in via <p class="dc"> */
p.dc:first-letter{
  float: left;
  font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 0.9;              /* keeps the top nicely aligned */
  margin: .08em .18em 0 0;       /* tiny lift + gap to the right */
  color: var(--fg);
}

/* Help the following paragraph wrap nicely around the floated initial */
p.dc + p{ overflow: hidden; }

/* Optional: slightly smaller on very narrow phones */
@media (max-width: 360px){
  p.dc:first-letter{ font-size: 2.1rem; }
}




/* -------- Header & Navigation -------------------------------------------- */
/* Works whether your header has class "wrap" or "site-header" */
header.wrap, .site-header{
  display: flex; align-items: center; gap: 1rem;
}

/* Sit the content panel a touch closer to the sticky header */
.site-header + main.wrap { margin-top: .5rem; }  /* adjust to taste */



/* Brand + nav row */
.brand{ font-weight: 700; color: inherit; text-decoration: none; }
.nav{ display: flex; gap: 1rem; margin-left: auto; align-items: center; }

/* Buttons (hamburger + theme). Use text icons (☰ / 🌓) so colors follow --fg */
.icon, .menu, #menuToggle, #themeToggle{
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--fg), transparent 80%);
  color: var(--fg);
  padding: .35rem .55rem;
  border-radius: .5rem;
  font: inherit; line-height: 1;
}
.icon:focus-visible, .menu:focus-visible, #menuToggle:focus-visible, #themeToggle:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--fg), transparent 70%);
  outline-offset: 2px;
}

/* header layout */
.site-header { display:flex; align-items:center; gap:.75rem; }
.site-header .brand { margin-right:auto; display:inline-flex; align-items:center; }

/* logo size */
.site-header .brand img { height:96px; width:auto; display:block; }
@media (max-width:720px){
  .site-header .brand img { height:64px; }
}

/* Phones: scale down a bit */
@media (max-width: 720px){
  .site-header .brand img { height: 60px; }
}



/* -------- Mobile menu (hamburger) ---------------------------------------- */
@media (max-width: 720px){
  #menuToggle{ display: inline-block; order: 2; }   /* show ☰ button */
  #themeToggle{ margin-left: auto; order: 3; }      /* keep theme on far right */

  .nav{
    position: fixed; top: 3.25rem; right: 1rem; left: 1rem;
    display: none; flex-direction: column; gap: .25rem;
    padding: .75rem 1rem; border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid color-mix(in oklab, var(--fg) 15%, transparent);
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
  }

  /* When JS sets html[data-menu="open"] the menu appears */
  html[data-menu="open"] .nav{ display: flex; }

  /* keep page spacing comfy on phones */
  main.wrap{ padding-top: 1rem; }
  main.wrap > h1:first-child{ margin-top: 1rem; }
}

/* Desktop: inline nav; hide hamburger */
@media (min-width: 721px){
  #menuToggle{ display: none; }
  .nav{ position: static; display: flex !important; border: 0; box-shadow: none; padding: 0; }
  main.wrap{ padding-top: 2rem; }
  main.wrap > h1:first-child{ margin-top: 2rem; }
}

@media (max-width: 720px){
  .site-header .nav a:first-child{ display:block !important; }
}

/* ===== Header / Nav (JS toggled) ===== */
header.wrap{display:flex;align-items:center;gap:1rem}
.brand{font-weight:700}
.nav{display:flex;gap:1rem;margin-left:auto}

.menu-btn{
  display:none;          /* hidden on desktop; shown on mobile below */
  margin-left:auto;
  width:36px;height:32px;
  border:1px solid var(--muted);
  border-radius:6px;
  background:none;
  color:var(--fg);
  line-height:0;
}

/* Sticky header */
.site-header{
  position: sticky;        /* keeps it visible when scrolling */
  top: 0;
  z-index: 1000;           /* above content */
  background: color-mix(in oklab, var(--bg), transparent 10%);
  backdrop-filter: saturate(115%) blur(6px);
  border-bottom: 1px solid color-mix(in oklab, var(--fg), transparent 92%);
  min-height: var(--header-h);
  /* This keeps your current spacing; feel free to tweak: */
  display: flex;
  align-items: center;
  gap: 1rem;
}



/* --- mobile behaviour --- */
@media (max-width: 720px){
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;}

  /* menu is hidden by default on mobile */
  .nav{
    display:none;
    position:absolute;
    top:56px; right:1rem; left:auto;   /* drop-down from header */
    background:var(--bg);
    border:1px solid var(--muted);
    border-radius:10px;
    padding:.75rem 1rem;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    flex-direction:column;
    gap:.75rem;
    z-index:1000;
  }

  /* when menu is open, show it */
  body.menu-open .nav{display:flex;}
}

/* optional: keep menu button border visible in dark mode */
[data-theme="dark"] .menu-btn{border-color:#555}

/* === links + focus, cross-browser === */
a{
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: .10em;
  text-underline-offset: .18em;
  transition: color .15s ease, text-decoration-color .15s ease;
}

/* === links + focus (slide-in underline) === */
a{
  color: var(--link);
  text-decoration: none;
  background-image: linear-gradient(var(--link), var(--link));
  background-size: 0 2px;                /* start hidden */
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .20s ease, color .15s ease;
  text-underline-offset: .18em;          /* keeps selection underline pretty */
}

a:hover{
  color: var(--fg);
  background-size: 100% 1px;             /* slide in */
}

a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
  outline-offset: 2px;
  border-radius: .25rem;
}



/* keep nav links not underlined if you prefer the clean header */
.nav a{ text-decoration: none; }

/* current page in the header nav */
.nav a.active{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}
[data-theme="dark"] .nav a.active{
  text-decoration-color: color-mix(in oklab, var(--link) 70%, transparent);
}




/* === Skip link (keyboard users) ============================ */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .6rem .9rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  text-decoration: none;
  z-index: 10000;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
  outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
  outline-offset: 2px;
}

/* === polish: reading rhythm (content only) =============================== */
/* Scope to main content so header/nav spacing stays put */
main :is(p, ul, ol){ margin: .8rem 0; }

/* Lists: a touch less indent + tighter items */
main :is(ul, ol){ padding-left: 1.2rem; }
main li{ margin: .35rem 0; }
main li::marker{ color: var(--muted); }
/* nested lists: keep them snug under their parent item */
main li > :is(ul, ol){ margin-top: .35rem; margin-bottom: .35rem; }

/* Headings: a bit more space before, a bit less after */
main :is(h2, h3){ margin-top: 1.4rem; margin-bottom: .4rem; }
/* if a paragraph or list follows a heading, don't double-space */
main :is(h1, h2, h3) + :is(p, ul, ol){ margin-top: .25rem; }

/* first element in the main area shouldn't float down */
main > :first-child{ margin-top: .25rem; }

/* === polish: mobile nav dropdown ======================================= */
@media (max-width: 720px){
  .nav{
    /* already positioned by your existing CSS */
    border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    backdrop-filter: saturate(120%) blur(2px);
    z-index: 1000; /* be above page content */
  }
  .nav a{
    padding: .6rem 0;              /* larger tap area */
  }
}

/* === polish: buttons ===================================================== */
.btn{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:.5rem;
  border:1px solid color-mix(in srgb, var(--fg) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, var(--fg) 8%);
  color: var(--fg);
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition: background .15s ease, border-color .15s ease, transform .03s ease;
}
.btn:hover{
  background: color-mix(in srgb, var(--bg) 86%, var(--fg) 14%);
  border-color: color-mix(in srgb, var(--fg) 70%, transparent);
}
.btn:active{ transform: translateY(1px); }

/* outline/“ghost” style */
.btn.ghost{
  background: transparent;
  border-color: color-mix(in srgb, var(--fg) 70%, transparent);
}

/* — button variant: red (#a00000) — */
:root { --btn-red: #a00000; }

.btn.red{
  background: var(--btn-red);
  color: #fff;                          /* strong contrast (~8:1) */
  border-color: color-mix(in srgb, var(--btn-red) 80%, #000);
}
.btn.red:hover{
  background: color-mix(in srgb, var(--btn-red) 88%, #fff 12%);
  border-color: color-mix(in srgb, var(--btn-red) 70%, #000);
}
.btn.red:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--btn-red) 60%, #fff);
  outline-offset: 2px;
}

/* optional “ghost” red button (transparent fill) */
.btn.red.ghost{
  background: transparent;
  color: var(--btn-red);
  border-color: color-mix(in srgb, var(--btn-red) 70%, transparent);
}
.btn.red.ghost:hover{
  background: color-mix(in srgb, var(--btn-red) 10%, transparent);
}

/* Red ghost button: make text white in dark mode */
[data-theme="dark"] .btn.red.ghost {
  color: #fff;
}

/* optional: keep a visible focus ring in dark */
[data-theme="dark"] .btn.red.ghost:focus-visible {
  outline-color: #fff;
}

/* Dark mode: make ghost button outline + text white */
[data-theme="dark"] .btn.red.ghost {
  color: #fff;           /* you already added this */
  border-color: #fff;    /* turn the outline white */
}

/* keep the focus ring visible in dark */
[data-theme="dark"] .btn.red.ghost:focus-visible {
  outline: 2px solid #fff;
}

/* optional: a subtle hover fill so the white outline reads nicely */
[data-theme="dark"] .btn.red.ghost:hover {
  background: rgba(255,255,255,.06);
}

[data-theme="dark"] .btn.ghost { border-color: #fff; }

/* --- Micro-typography niceties --- */
h1, h2, h3 { text-wrap: balance; }        /* nicer headlines on narrow screens */
p, li, blockquote { text-wrap: pretty; }  /* fewer widows/orphans where supported */
article { hyphens: auto; }                /* let long words break sensibly */

/* --- Images, figures, captions --- */
img { max-width: 100%; height: auto; }

figure { margin: 1.5rem 0; }
figure > img {
  display: block;
  width: 100%;
  border-radius: .5rem;
}
figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}

/* optional helpers you can use case-by-case */
figure.outline > img {
  border: 1px solid color-mix(in oklab, var(--fg), transparent 85%);
}
figure.shadow > img {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* full-bleed hero image (use sparingly) */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ===== Post navigation (Previous / Next) ===== */
.post-nav{
  /* align with the main content column */
  max-width: var(--max);
  margin: 2rem auto 0;            /* center like .wrap */
  padding-inline: 1rem;           /* same left/right gutter as .wrap */

  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* optional spacer node if you use it */
.post-nav .spacer{ flex: 1; }

/* buttons inside post-nav — reuse .btn/.ghost, kill stray margins */
.post-nav .btn{ margin: 0; }

/* neutral ghost button look */
.post-nav .btn.ghost{
  background: transparent;
  color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--fg), transparent 80%);
}

/* hover / focus polish */
.post-nav .btn.ghost:hover,
.post-nav .btn.ghost:focus-visible{
  text-decoration: none;
  border-color: color-mix(in oklab, var(--link), transparent 60%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--link), transparent 80%);
}

[data-theme="dark"] .post-nav .btn.ghost:hover,
[data-theme="dark"] .post-nav .btn.ghost:focus-visible{
  background: rgba(255,255,255,.03);
}

/* Mobile: keep Previous / Next side-by-side */
@media (max-width: 720px){
  .post-nav{
    flex-direction: row;            /* stay in a row */
    align-items: center;
    justify-content: space-between; /* same look as desktop */
    gap: .5rem;
    padding-inline: 1rem;
    flex-wrap: nowrap;              /* never drop to next line */
  }

  .post-nav .btn{
    width: auto;        /* undo 100% */
    flex: 1 1 0;        /* grow evenly to share space */
    min-width: 0;       /* allow shrink on small screens */
    justify-content: center;
    text-align: center;
  }

  /* keep labels on one line if possible */
  .post-nav .btn > span{ white-space: nowrap; }
}


/* Footer — align exactly with the content column */
footer.wrap.small{
  display: block;
  max-width: var(--max);         /* same width as .wrap */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;            /* same gutter as .wrap */
  padding-right: 1rem;
  text-align: left;              /* avoid any inherited centering */
}


/* === Desktop default (already works) === */
.author-badge{
  float: right;
  /* sits on the same line as H1 */
  margin: -.25rem .5rem 0 .75rem;
}
.author-badge img{
  width: 88px; height: 88px;          /* (keep your preferred desktop size) */
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 1px 0 rgba(0,0,0,.04) inset;
}

/* === Mobile layout: put the badge on the RIGHT, above the H1 === */
@media (max-width: 720px){
  .author-badge{
    float: none;                       /* stop floating */
    display: block;                    /* its own row above the H1 */
    margin: -1rem .5rem .75rem auto;   /* <-- auto left margin pushes it right */
    text-align: right;                 /* keeps the circle’s “ghost” rim tight */
    margin-block-start: 0;             /* neutralize default <figure> UA margin */
    margin-block-end: 0;
    width: max-content;                /* shrink-wrap so auto works perfectly */
  }
  .author-badge img{
    width: 72px; height: 72px;         /* slightly smaller on phones */
    object-fit: cover;                 /* face stays centered in the circle */
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0,0,0,.10), 0 1px 0 rgba(0,0,0,.04) inset;
  }
}

/* Very narrow phones */
@media (max-width: 420px){
  .author-badge img{ width: 64px; height: 64px; }
}

/* Home page: lift the badge into the top-right corner */
.wrap.home .author-badge{
  float: right;
  margin: -.9rem 0 .6rem 1rem; /* up a bit, small gap below, gap from text */
}
/* Home page (mobile): make the name smaller and reduce vertical space */
@media (max-width: 720px){
  .wrap.home h1{
    font-size: 1.75rem;       /* was much larger; tune as you like */
    line-height: 1.15;        /* tighter lines */
    margin-block-start: 0;    /* kill the default top margin */
    margin-block-end: .25rem; /* tiny gap to the tagline */
  }

  .wrap.home p.small{
    margin-block-start: 0;    /* pull the tagline up too */
  }

  /* (Optional) slightly reduce card padding on phones for an even tighter look */
  .wrap.home{
    padding-top: 1rem;
  }
}

/* ========== Mobile tweaks (≤720px) ========== */
@media (max-width: 720px){

  /* POSTS (not home): keep badge on the right and let H1 wrap around it */
  .wrap:not(.home) .author-badge{
    float: right;
    display: inline-block;      /* allows text to flow around */
    margin: .15rem 0 .50rem .75rem;  /* small lift + gap on the left */
  }
  .wrap:not(.home) .author-badge img{
    width: 72px; height: 72px; object-fit: cover; border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0,0,0,.10), 0 1px 0 rgba(0,0,0,.04) inset;
  }

  /* Tighter mobile H1 on posts so the block gets shorter */
  .wrap:not(.home) h1{
    font-size: 1.75rem;        /* tweak 1.6–1.9 as you like */
    line-height: 1.15;
    margin: .15rem 0 .35rem;   /* less air above/below the title */
  }

  /* Ensure the date/“post-meta” clears the floated badge */
  .wrap:not(.home) .post-meta{
    clear: both;
    font-size: .95rem;
    margin-block: .20rem .50rem;
  }

  /* HOME: keep the badge in the top-right corner (no wrapping) */
  .wrap.home .author-badge{
    float: right;
    display: inline-block;
    margin: -.9rem 0 .6rem 1rem; /* small lift + gap below */
  }
  .wrap.home h1{
    font-size: 1.65rem;        /* smaller name on phones */
    line-height: 1.15;
    margin-block-start: 0;     /* kill default top margin */
    margin-block-end: .25rem;  /* tuck it closer to the tagline */
  }
  .wrap.home p.small{ margin-block-start: 0; }
}

/* Very narrow phones */
@media (max-width: 420px){
  .wrap:not(.home) .author-badge img,
  .wrap.home .author-badge img{
    width: 64px; height: 64px;
  }
}


/* === Content card / panel ===================================== */
main.wrap{
  /* fallback for older browsers */
  background: #fff7ef;
  /* real background */
  background: var(--panel-bg);

  border-radius: 14px;
  padding: 2rem;
  outline: 1px solid color-mix(in oklab, var(--fg), transparent 92%);
  box-shadow:
      0 10px 24px rgba(0,0,0,.06),
      0  1px  0 rgba(0,0,0,.03);

}

/* Dark theme: outline & shadow tweaks only (bg comes from --panel-bg) */
[data-theme="dark"] main.wrap{
  outline-color: rgba(255,255,255,.08);
  box-shadow:
      18px 42px rgba(0,0,0,.45),
       1px  0  rgba(255,255,255,.02) inset;
}


/* dark theme: smaller tint so it doesn’t glow */
[data-theme="dark"] main.wrap{
  background: color-mix(in oklab, var(--bg), #fff4e6 3%);
  outline-color: rgba(255,255,255,.08);
  box-shadow:
    0 18px 42px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.02) inset;
}


/* Micro nudge: give the mobile badge a bit more air on top */
@media (max-width: 720px){
  .author-badge{ margin-top: .35rem !important; } /* try .35–.5rem to taste */
}

/* 404 page tweaks */
.not-found .wrap{ padding-top: 1rem; }

.nf-link{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.nf-link img{
  display: block;
  width: 100%;
  height: auto;
}

/* Start hidden, then animate in when .is-ready is added */
#lostImg{
  opacity: 0;
  transform: scale(.995);
  filter: saturate(.95);
}

#lostImg.is-ready{
  animation: lostFade .6s ease-out .05s forwards; /* tweak duration as you like */
}

@keyframes lostFade{
  to{
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Be kind to folks who prefer less motion */
@media (prefers-reduced-motion: reduce){
  #lostImg{ opacity: 1; transform: none; filter: none; }
  #lostImg.is-ready{ animation: none; }
}

.post-desc{
  margin:.15rem 0 0;
  font-size:.9rem;
  line-height:1.35;
  color: var(--muted);
  max-width:40rem;
}

@media (max-width:600px){
  .post-desc{
    font-size:.88rem;
  }
}

/* css over ride to reduce fatness of header */

/* === Header height cleanup ==================================== */
/* Override earlier .wrap and .site-header rules without rewriting the whole file */
header.wrap.site-header{
  padding-top: .35rem;
  padding-bottom: .35rem;
  padding-left: 1rem;
  padding-right: 1rem;
  min-height: auto;
  gap: .75rem;
}

/* Desktop logo size */
.site-header .brand img{
  height: 72px;
  width: auto;
  display: block;
}

/* Mobile: slimmer header + smaller logo */
@media (max-width: 720px){
  header.wrap.site-header{
    padding-top: .2rem;
    padding-bottom: .2rem;
  }

  .site-header .brand img{
    height: 48px;
  }

  /* keep dropdown lined up under the slimmer header */
  .site-header .nav{
    top: 52px;
  }
}