:root {
--bg: #ffffff;
--surface: #f9fafb;
--surface-2: #f3f4f6;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--shadow: 0 10px 30px rgba(2,6,23,.06); --header-h: 64px; --wave-h: clamp(90px, 20vw, 500px);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container { width: min(1200px, 92vw); margin: 0 auto; padding: 2rem 0; }   .topbar { position: sticky; top: 0; z-index: 10000; background: #fff; border-bottom: 1px solid var(--border); }
.topbar-inner{
width:min(1200px,92vw);
margin:0 auto;
padding:.8rem 0;
display:grid;
grid-template-columns:auto 1fr auto; align-items:center;
position:relative; }
.brand{display:flex;align-items:center;gap:.5rem;justify-self:start}
.brand .site-title a{font-weight:800;text-decoration:none;color:var(--text)}
.menu-primary{justify-self:center}
.primary-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.primary-list a{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--text);padding:.35rem .55rem;border-radius:8px}
.primary-list a:hover{background:var(--surface)} .menu-toggle{
display:block !important;
justify-self:end;
border:none;background:none;cursor:pointer;padding:.3rem;line-height:0;
position:relative;z-index:10001;
}
.menu-toggle svg{display:block} @media (max-width: 768px){
.menu-primary{display:none}
.topbar-inner{grid-template-columns:auto auto;} .brand{justify-self:start}
.menu-toggle{justify-self:end}
} .mobile-menu{
position:absolute;
top:calc(100% + 8px);
right:0;
display:none;
z-index:9999;
background:#fff;
border:1px solid var(--border);
border-radius:12px;
box-shadow:0 10px 24px rgba(0,0,0,.10);
width:max-content;
min-width:220px;
max-width:min(86vw,320px);
padding:.5rem;
}
.mobile-menu.open{display:block}
.hamburger-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.hamburger-list a{
display:block;
padding:.55rem .8rem;
border-radius:8px;
text-decoration:none;
color:var(--text);
white-space:nowrap;
}
.hamburger-list a:hover{background:var(--surface)} .header-wave, .header-wave svg, .hero-stage { pointer-events: none; z-index: 0; }
.post-hero, .post-hero * { pointer-events: auto; }   .header-wave { height: var(--wave-h); }
.header-wave svg { width: 100%; height: 100%; display: block; }   .section-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 1.6rem 0 .8rem; }
.section-head h2 { margin: 0; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); }
.view-all { font-size: .95rem; color: var(--primary); text-decoration: none; }
.view-all:hover { text-decoration: underline; }
.grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(4, 1fr); } }   .card {
position: relative; padding: 0; overflow: hidden;
border-radius: 16px; border: 1px solid var(--border);
box-shadow: var(--shadow); background: #fff;
}
.card--overlay { aspect-ratio: 4 / 3; display: block; }
.card--overlay img {
width: 100%; height: 100%; object-fit: cover;
opacity: .8; transition: opacity .2s, transform .2s;
}
.card:hover .card--overlay img { opacity: .92; transform: scale(1.02); }
.card .overlay-title {
position: absolute; left: 0; right: 0; bottom: 0;
padding: .9rem 1rem; background: #212121; color: #fff;
}
.card .overlay-title h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.card .overlay-title a { color: inherit; text-decoration: none; }
.card .overlay-title a:hover { text-decoration: underline; } .grid .card .card-body,
.grid .card .card-meta,
.grid .card .card-excerpt { display: none; }   .hero-stage {
display: grid;
grid-template-rows: var(--wave-h) auto;
grid-template-columns: 100%;
position: relative;
}
.hero-stage > .header-wave { grid-row: 1; grid-column: 1; z-index: 0; }
.hero-stage > .post-hero {
grid-row: 1 / span 2; grid-column: 1;
align-self: end; z-index: 1;
text-align: center; padding: 1rem 1rem 0;
}
.single .post-hero { width: min(960px, 92vw); margin: 2rem auto; }
.meta-line-top { margin-bottom: .6rem; }
.single .hero-kicker {
font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
color: #fff; background: #55c1ff; border: 1px solid #4892bd;
padding: 5px 10px; border-radius: 999px; box-shadow: 5px 5px rgb(166 223 255);
}
.single .hero-title {
font-weight: 700; letter-spacing: -.3px; line-height: 1.2;
font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem);
margin: 2rem 0; color: #333;
} .hero-meta-row {
width: min(780px, 88vw);
margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hero-authors { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.author-chip { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.author-avatar { border-radius: 50%; flex-shrink: 0; border: 2px solid #fff; }
.author-text { display: flex; flex-direction: column; line-height: 1.2; }
.author-name { font-weight: 600; font-size: 1rem; }
.author-tagline { font-size: .85rem; color: var(--muted); }
.author-sep { margin: 0 .1rem; color: #9ca3af; }
.hero-date-read { color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.hero-date-read .dot { opacity: .6; }
@media (max-width: 640px) {
.hero-meta-row { flex-direction: column; align-items: center; gap: .35rem; }
} .single .hero-thumb {
margin: 2rem auto; border-radius: 18px; overflow: hidden;
border: 1px solid var(--border); box-shadow: var(--shadow);
max-width: 100%;
}
.single .hero-thumb img { width: 100%; height: auto; display: block; }   .single .prose { width: min(780px, 88vw); margin: 1.6rem auto 3rem; font-size: 1.08rem; line-height: 1.78; }
.single .prose h2, .single .prose h3 { letter-spacing: -.2px; }
.single .prose h2 { font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); }
.single .prose h3 { font-size: clamp(1.2rem, .95rem + .7vw, 1.5rem); }
.single .prose blockquote {
margin: 1.5rem 0; padding: 1.2rem 1.4rem;
background: var(--surface); border-left: 3px solid #0ea5e9;
border-radius: 0 12px 12px 0; color: #0f172a;
}
.single p code, .single ul li code, .single ol li code {
background: #d3efff; padding: 2px 10px; border-radius: 3px; font-size: 1.04rem;
}
.single .cta-box {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 16px; padding: 1.2rem 1.4rem;
}   .share-wrap { width: min(780px, 88vw); margin: 1rem auto 0; display: flex; justify-content: flex-end; }
.share-btn {
border: 1px solid var(--text); background: var(--text); color: #fff;
border-radius: 10px; padding: .55rem .9rem; cursor: pointer;
}
.post-tags-footer {
width: min(780px, 88vw); margin: 1rem auto 0; padding: 1rem;
border: 1px solid var(--border); background: var(--surface); border-radius: 14px;
display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.post-tags-footer .label { font-weight: 700; color: #374151; margin-right: .2rem; }
.post-tags-footer a {
text-decoration: none; background: #eef2ff; color: #3730a3;
padding: .25rem .6rem; border-radius: 999px; font-size: .9rem;
}
.post-tags-footer a:hover { background: #e0e7ff; }   .related-carousel { width: min(1100px, 92vw); margin: 2.5rem auto 4rem; }
.carousel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.carousel-track {
display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 25vw, 300px);
gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory;
}
.carousel-track > .card { scroll-snap-align: start; }   .site-footer { border-top: 1px solid var(--border); padding: 2rem 0 4rem; color: #6b7280; }
.footer-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, 1fr); margin-top: 1rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-col h4 { margin: .2rem 0 .6rem; font-size: 1rem; color: #0b1220; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer-col a { text-decoration: none; color: #2a3345; }
.footer-col a:hover { text-decoration: underline; color: var(--primary-hover); }   .menu-primary ::marker { content: ""; }
header { background: #d3efff; }  .wp-block-kevinbatdorf-code-block-pro { border: 1px solid #f1f1f1; border-radius: 10px; }