/* Shared styles for the blog index and post pages */
:root{
  --paper:#F5F7F9; --surface:#FFFFFF; --surface-2:#EDF1F4;
  --ink:#0C1420; --ink-soft:#26313F; --muted:#59636F;
  --line:#E1E6EB; --line-strong:#CBD3DB;
  --accent:#0E7C86; --accent-strong:#0A5A62; --accent-wash:#E4F1F1;
  --shadow:0 1px 2px rgba(12,20,32,.04), 0 12px 32px -18px rgba(12,20,32,.28);
  --shadow-sm:0 1px 2px rgba(12,20,32,.05), 0 6px 18px -14px rgba(12,20,32,.30);
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  --paper:#090E15; --surface:#101A24; --surface-2:#17232F;
  --ink:#E8EDF2; --ink-soft:#C4CDD7; --muted:#93A0AE;
  --line:#213040; --line-strong:#324456;
  --accent:#2DC6C0; --accent-strong:#5BD8D1; --accent-wash:#0F2A2C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --paper:#090E15; --surface:#101A24; --surface-2:#17232F;
  --ink:#E8EDF2; --ink-soft:#C4CDD7; --muted:#93A0AE;
  --line:#213040; --line-strong:#324456;
  --accent:#2DC6C0; --accent-strong:#5BD8D1; --accent-wash:#0F2A2C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; margin:0; font-weight:600; letter-spacing:-.01em; line-height:1.14; text-wrap:balance}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:760px; margin:0 auto; padding:0 24px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-strong); font-weight:500}

/* nav */
.nav{position:sticky; top:0; z-index:30; backdrop-filter:saturate(1.4) blur(10px); background:color-mix(in srgb, var(--paper) 82%, transparent); border-bottom:1px solid var(--line)}
.nav-in{max-width:760px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:14px}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:18px}
.brand img{width:26px; height:26px; border-radius:7px; display:block}
.brand span{color:var(--accent-strong)}
.nav-r{margin-left:auto; display:flex; align-items:center; gap:6px}
.nav-r a{font-size:14px; color:var(--muted); padding:7px 11px; border-radius:8px; font-weight:500}
.nav-r a:hover{color:var(--ink); background:var(--surface-2)}
.ttoggle{width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.ttoggle:hover{border-color:var(--line-strong); color:var(--ink)}
.ttoggle svg{width:18px; height:18px}
.ttoggle .moon{display:none}
@media (max-width:400px){ .nav-in{padding:10px 16px; gap:8px} .brand{font-size:16.5px; gap:8px; white-space:nowrap} .nav-r{gap:2px} .nav-r a{padding:7px 8px; font-size:13.5px} .ttoggle{width:36px; height:36px; flex:none} }
@media (max-width:340px){ .nav-r a:first-child{display:none} }
:root[data-theme="dark"] .ttoggle .moon{display:block}
:root[data-theme="dark"] .ttoggle .sun{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ttoggle .moon{display:block} :root:not([data-theme="light"]) .ttoggle .sun{display:none} }

/* index header */
.bhead{padding:56px 0 12px}
.bhead h1{font-size:clamp(34px,5.5vw,50px); margin:12px 0 0}
.bhead p{color:var(--ink-soft); font-size:18px; margin-top:14px; max-width:60ch}

/* post list */
.plist{padding:26px 0 60px; display:flex; flex-direction:column; gap:2px}
.pcard{display:block; padding:24px 22px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); margin-bottom:16px; transition:transform .14s ease, border-color .15s, box-shadow .15s}
.pcard:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){ .pcard:hover{transform:none} }
.pmeta{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pcard h2{font-size:24px; margin:9px 0 0}
.pcard .psum{color:var(--ink-soft); margin-top:9px; font-size:16px}
.ptags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.ptag{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:4px 9px; border-radius:6px; background:var(--surface-2); color:var(--muted)}
.readmore{margin-top:14px; font-weight:600; font-size:14.5px; color:var(--accent-strong); display:inline-flex; align-items:center; gap:6px}
.empty{padding:40px 0; color:var(--muted)}

/* post article */
.pback{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:var(--accent-strong); margin:34px 0 6px}
.pback svg{width:16px;height:16px}
article.post{padding-top:8px; padding-bottom:60px}
.post-head{padding:6px 0 24px; border-bottom:1px solid var(--line); margin-bottom:30px}
.post-head h1{font-size:clamp(30px,5vw,46px); margin:12px 0 0}
.post-head .pmeta{margin-top:16px; font-size:13px}
.post-body{font-size:17.5px; color:var(--ink-soft)}
.post-body h2{font-size:27px; margin:38px 0 12px; color:var(--ink)}
.post-body h3{font-size:21px; margin:30px 0 10px; color:var(--ink)}
.post-body h4{font-size:19.5px; margin:30px 0 8px; color:var(--ink)}
.post-body p{margin:0 0 18px}
.post-body a{color:var(--accent-strong); font-weight:500; text-decoration:underline; text-underline-offset:2px}
.post-body strong{color:var(--ink); font-weight:600}
.post-body ul,.post-body ol{margin:0 0 18px; padding-left:24px}
.post-body li{margin:6px 0}
.post-body img{max-width:100%; border-radius:10px; border:1px solid var(--line); display:block; margin:22px 0}
.post-body blockquote{margin:22px 0; padding:12px 18px; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 10px 10px 0; color:var(--ink-soft)}
.post-body code{font-family:"IBM Plex Mono",monospace; font-size:.86em; background:var(--surface-2); padding:.15em .4em; border-radius:5px}
.post-body pre{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; overflow-x:auto; margin:0 0 20px}
.post-body pre code{background:none; padding:0; font-size:14px; line-height:1.6}
.post-body hr{border:0; border-top:1px solid var(--line); margin:32px 0}

footer{border-top:1px solid var(--line); padding:26px 0 44px; color:var(--muted); font-size:13.5px}
.foot-in{max-width:760px; margin:0 auto; padding:0 24px; display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap}
.foot-in a{color:var(--muted)}
.foot-in a:hover{color:var(--accent-strong)}