:root{
  --brand:#00aeef; --brand-deep:#0090c6; --ink:#141416; --ink-soft:#4a4a52;
  --ink-faint:#7a7a84; --rule:#e6e6ea; --paper:#ffffff; --paper-sunk:#f5f6f8;
  --wrap:72rem; --radius:12px;
  --font: "Helvetica Neue", Arial, system-ui, sans-serif;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--paper); line-height:1.6 }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem) }

/* header */
.site-header{ position:sticky; top:0; z-index:20; background:rgb(255 255 255 /.9); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule) }
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:var(--wrap); margin-inline:auto; padding:.7rem clamp(1rem,4vw,2rem) }
.brand img{ height:40px; width:auto }
.hd-nav{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.4rem); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600 }
.hd-nav a{ text-decoration:none; color:var(--ink) }
.hd-nav a:hover{ color:var(--brand-deep) }
.hd-nav .lang{ border:1px solid var(--rule); border-radius:999px; padding:.25rem .6rem }

/* listing */
.listing-head{ padding-block:clamp(2rem,6vw,3.5rem) clamp(1.2rem,4vw,2rem); border-bottom:1px solid var(--rule); margin-bottom:clamp(1.5rem,4vw,2.5rem) }
.listing-head h1{ font-size:clamp(2rem,6vw,3rem); margin:0; letter-spacing:-.02em }
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr)); gap:clamp(1.5rem,3vw,2.5rem) }
.card a{ text-decoration:none; color:inherit; display:block }
.card-img{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--paper-sunk); border:1px solid var(--rule) }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.card a:hover .card-img img{ transform:scale(1.04) }
.card-body time{ display:block; margin-top:.7rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint) }
.card-body h2{ font-size:1.15rem; line-height:1.25; margin:.35rem 0 .4rem }
.card a:hover h2{ color:var(--brand-deep) }
.card-body p{ margin:0; color:var(--ink-soft); font-size:.92rem; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }

/* pager */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-block:clamp(2.5rem,6vw,4rem); padding-top:1.5rem; border-top:1px solid var(--rule); font-weight:600 }
.pager a{ text-decoration:none; color:var(--ink) } .pager a:hover{ color:var(--brand-deep) }
.pager span{ color:var(--ink-faint); font-variant-numeric:tabular-nums }

/* single */
.post{ max-width:46rem; margin-inline:auto; padding-block:clamp(2rem,5vw,3.5rem) }
.post .back{ display:inline-block; margin-bottom:1.2rem; font-size:.8rem; font-weight:600; letter-spacing:.03em; text-decoration:none; color:var(--ink-faint) }
.post .back:hover{ color:var(--brand-deep) }
.post h1{ font-size:clamp(1.8rem,5vw,2.8rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 .5rem }
.post-meta{ color:var(--ink-faint); font-size:.85rem; margin:0 0 1.5rem }
.post-hero{ margin:0 0 2rem }
.post-hero img{ width:100%; border-radius:var(--radius); background:var(--paper-sunk) }

/* prose (post body) */
.prose{ font-size:1.06rem; color:var(--ink) }
.prose > *:first-child{ margin-top:0 }
.prose p{ margin:0 0 1.2em }
.prose h2{ font-size:1.5rem; margin:1.8em 0 .5em; line-height:1.25 }
.prose h3{ font-size:1.2rem; margin:1.6em 0 .4em }
.prose img{ border-radius:var(--radius); margin:1.5em 0 }
.prose a{ color:var(--brand-deep); text-decoration:underline }
.prose ul,.prose ol{ margin:0 0 1.2em; padding-left:1.4em }
.prose li{ margin:.3em 0 }
.prose blockquote{ margin:1.5em 0; padding-left:1.2em; border-left:3px solid var(--brand); color:var(--ink-soft); font-style:italic }
.prose iframe,.prose video{ max-width:100%; width:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius); margin:1.5em 0 }
.prose table{ display:block; overflow-x:auto; width:100%; border-collapse:collapse }
.empty{ padding-block:4rem; color:var(--ink-faint) }

/* footer */
.site-footer{ margin-top:4rem; border-top:1px solid var(--rule); background:var(--paper-sunk); color:var(--ink-soft); font-size:.85rem }
.site-footer .wrap{ padding-block:2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem }
.site-footer a{ color:var(--ink-soft); text-decoration:none } .site-footer a:hover{ color:var(--brand-deep) }