:root { --teal:#0e5450; --teal-deep:#0a3b38; --ink:#14201e; --slate:#424c49; --mist:#646c6a; --paper:#fafaf7; --chalk:#f3f1ec; --line:#e3e4e1; --white:#fff; --gold:#e8a33d; --font-display:Lexend,system-ui,sans-serif; --font-body:"Public Sans",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; --container:1280px; --reading:720px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--slate); font-family:var(--font-body); font-size:16px; line-height:1.65; text-rendering:optimizeLegibility; }
img { height:auto; max-width:100%; }
button,input { font:inherit; }
a { color:inherit; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:.2em; }
a:hover { color:var(--teal); }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.shell { width:min(calc(100% - 2rem),var(--container)); margin-inline:auto; }
.reading { width:min(100%,var(--reading)); }
.skip-link { position:absolute; left:-999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; z-index:1000; padding:.5rem .75rem; background:var(--teal-deep); color:#fff; }
.site-header { border-bottom:1px solid var(--line); background:rgb(250 250 247 / .94); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.reading-progress { position:fixed; top:76px; left:0; z-index:20; width:100%; height:3px; background:rgb(14 84 80 / .12); pointer-events:none; }.reading-progress span { display:block; width:100%; height:100%; background:var(--teal); transform:scaleX(0); transform-origin:left center; transition:transform 80ms linear; }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-branding { display:flex; align-items:center; min-width:0; }.brand-logo { display:block; line-height:0; }.brand-logo img { display:block; width:min(12.75rem,35vw); height:auto; }.wordmark { color:var(--teal-deep); font-family:var(--font-display); font-size:1.15rem; font-weight:500; letter-spacing:-.03em; text-decoration:none; }
.custom-logo-link { display:block; flex:0 0 auto; line-height:0; }.custom-logo { max-width:38px; max-height:38px; width:auto; }
.primary-nav ul,.site-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.25rem; }
.primary-nav a,.site-footer nav a { color:var(--ink); font-size:.84rem; font-weight:500; text-decoration:none; }
.primary-nav .current-menu-item a { color:var(--teal); }
.header-search { display:flex; align-items:center; min-width:0; border:1px solid var(--line); border-radius:999px; background:var(--white); transition:border-color .2s ease,box-shadow .2s ease; }.header-search:focus-within { border-color:var(--teal); box-shadow:0 0 0 3px rgb(14 84 80 / .12); }.header-search-field { min-width:0; width:9.5rem; padding:.45rem .2rem .45rem .8rem; border:0; background:transparent; color:var(--ink); font-size:.82rem; outline:0; }.header-search-field::placeholder { color:var(--mist); opacity:1; }.header-search-submit { display:grid; place-items:center; width:2.25rem; height:2.25rem; border:0; border-radius:50%; background:transparent; color:var(--teal-deep); cursor:pointer; font-size:1.3rem; line-height:1; }.header-search-submit:hover { background:var(--chalk); }.screen-reader-text { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero { padding:clamp(4rem,9vw,9rem) 0 clamp(3.5rem,8vw,7rem); background:linear-gradient(to bottom,#e6f1ef,transparent 75%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,320px); gap:clamp(2rem,7vw,8rem); align-items:end; }
.hero h1,.article-header h1,.archive-header h1,.error-page h1 { max-width:17ch; margin:.35rem 0 1.25rem; color:var(--teal-deep); font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4.75rem); font-weight:500; letter-spacing:-.045em; line-height:1.06; }
.eyebrow { color:var(--mist); font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.16em; line-height:1.3; text-transform:uppercase; }
.lede { max-width:58ch; color:var(--slate); font-size:clamp(1.08rem,2vw,1.25rem); line-height:1.6; }
.button { display:inline-block; margin-top:1rem; padding:.78rem 1.1rem; border-radius:999px; background:var(--teal); color:#fff; font-size:.9rem; font-weight:600; text-decoration:none; transition:background .2s ease,transform .2s ease; }.button:hover,.button:focus { background:var(--teal-deep); color:#fff; transform:translateY(-1px); }
.hero-note { padding:1.5rem; border:1px solid rgb(14 84 80 / .25); border-radius:16px; background:rgb(255 255 255 / .65); color:var(--ink); }.hero-note p:last-child { margin-bottom:0; font-family:var(--font-display); font-size:1.1rem; line-height:1.5; }
.section,.page-shell { padding-block:clamp(4rem,8vw,8rem); }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:2.5rem; border-bottom:1px solid var(--line); }.section-heading h2 { margin:.35rem 0 1.5rem; color:var(--ink); font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.7rem); font-weight:500; letter-spacing:-.04em; }.text-link { margin-bottom:1.65rem; color:var(--teal); font-size:.9rem; font-weight:600; white-space:nowrap; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; align-items:start; }.post-grid .post-card { align-self:start; border:1px solid var(--line); border-radius:16px; background:var(--white); overflow:hidden; content-visibility:auto; contain-intrinsic-size:auto 390px; transition:box-shadow .2s ease,transform .2s ease; }.post-card:hover { box-shadow:0 16px 32px -20px rgb(20 32 30 / .28); transform:translateY(-3px); }.card-image { display:block; aspect-ratio:1.7; overflow:hidden; background:var(--chalk); }.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }.post-card:hover img { transform:scale(1.03); }.post-grid .card-content { display:block; padding:1.25rem; }.card-content .eyebrow { margin:0 0 .7rem; }.card-content h2 { margin:0 0 .65rem; color:var(--ink); font-family:var(--font-display); font-size:1.17rem; font-weight:500; letter-spacing:-.025em; line-height:1.32; }.card-content h2 a { text-decoration:none; }.card-content h2 a:hover { color:var(--teal); text-decoration:underline; }.card-content p:not(.eyebrow) { margin:.25rem 0 1rem; color:var(--slate); font-size:.93rem; }.read-more { display:inline-flex; align-items:center; gap:.3rem; min-height:2.75rem; color:var(--teal); font-size:.85rem; font-weight:600; }.read-more:hover { color:var(--teal-deep); text-decoration:underline; }
.archive-header { margin-bottom:3rem; }.archive-header h1 { margin-bottom:0; font-size:clamp(2.5rem,5vw,4rem); }.archive-description { max-width:60ch; }.article-header { padding-top:clamp(4rem,8vw,8rem); padding-bottom:2rem; }.article-header h1 { max-width:20ch; font-size:clamp(2.1rem,4.1vw,3.4rem); }.article-meta { color:var(--mist); font-family:var(--font-mono); font-size:.8rem; }.feature-image { margin-bottom:clamp(2rem,5vw,4rem); }.feature-image img { width:100%; border-radius:16px; }.article-layout { display:grid; grid-template-columns:minmax(0,var(--reading)) 250px; justify-content:space-between; gap:clamp(2rem,6vw,6rem); }.entry-content { padding-bottom:clamp(4rem,8vw,8rem); color:var(--slate); font-size:1.08rem; }.entry-content > * { margin-block:0 1.5rem; }.entry-content > p { max-width:68ch; }.entry-content h2,.entry-content h3,.entry-content h4 { margin-top:2.8rem; color:var(--ink); font-family:var(--font-display); font-weight:500; letter-spacing:-.025em; line-height:1.2; }.entry-content h2 { font-size:clamp(1.65rem,3vw,2.2rem); }.entry-content h3 { font-size:1.4rem; }.entry-content ul,.entry-content ol { display:grid; gap:.7rem; padding-left:1.35rem; }.entry-content li { padding-left:.35rem; }.entry-content li::marker { color:var(--teal); font-family:var(--font-mono); font-weight:600; }.entry-content ul li::marker { content:'→  '; }.entry-content blockquote { margin-inline:0; padding:1.25rem 1.5rem; border-left:3px solid var(--gold); background:var(--chalk); color:var(--ink); font-family:var(--font-display); font-size:1.14rem; }.entry-content figcaption { color:var(--mist); font-size:.8rem; }.entry-content pre { overflow:auto; padding:1rem; border-radius:8px; background:var(--teal-deep); color:#fff; font-size:.82rem; }.entry-content .wp-block-table { overflow-x:auto; }.entry-content table,.entry-content .wp-block-table table { width:100%; border:1px solid var(--line)!important; border-collapse:separate!important; border-spacing:0!important; border-radius:10px; background:var(--white); font-size:.9rem; overflow:hidden; }.entry-content th,.entry-content td,.entry-content .wp-block-table th,.entry-content .wp-block-table td { padding:.78rem .85rem; border:0!important; border-bottom:1px solid var(--line)!important; color:var(--slate); text-align:left; vertical-align:top; }.entry-content th+th,.entry-content td+td,.entry-content .wp-block-table th+th,.entry-content .wp-block-table td+td { border-left:1px solid var(--line)!important; }.entry-content th,.entry-content .wp-block-table th { background:var(--teal); color:#fff; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }.entry-content tr:last-child td,.entry-content .wp-block-table tr:last-child td { border-bottom:0!important; }.entry-content tr:nth-child(even) td,.entry-content .wp-block-table tr:nth-child(even) td { background:color-mix(in srgb,var(--chalk) 72%,var(--white)); }.article-aside { align-self:start; position:sticky; top:100px; display:grid; gap:1rem; padding-bottom:3rem; }.aside-block { padding:1.1rem; border:1px solid var(--line); border-radius:12px; background:var(--white); }.aside-block .eyebrow { margin-top:0; }.search-form { display:flex; gap:.4rem; }.search-field { min-width:0; width:100%; padding:.55rem .65rem; border:1px solid var(--line); border-radius:6px; color:var(--ink); font:inherit; }.search-submit { padding:.55rem .7rem; border:0; border-radius:6px; background:var(--teal); color:#fff; font:600 .78rem var(--font-body); }.related-posts { display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }.related-posts li { padding-bottom:.75rem; border-bottom:1px solid var(--line); }.related-posts li:last-child { padding-bottom:0; border:0; }.related-posts a { color:var(--ink); font-family:var(--font-display); font-size:.91rem; font-weight:500; line-height:1.35; text-decoration:none; }.kosmio-promo { display:grid; gap:.7rem; padding:1.25rem; border-radius:12px; background:var(--teal-deep); color:#fff; text-decoration:none; }.kosmio-promo .eyebrow { margin:0; color:#b4c2be; }.kosmio-promo strong { font-family:var(--font-display); font-size:1rem; font-weight:500; line-height:1.4; }.kosmio-promo > span:last-child { color:#cfe3df; font-size:.8rem; font-weight:600; }
.navigation.pagination { display:flex; gap:.5rem; margin-top:3rem; }.page-numbers { padding:.45rem .7rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; }.page-numbers.current { border-color:var(--teal); background:var(--teal); color:#fff; }.empty-state { max-width:60ch; padding:1.25rem; border-radius:12px; background:var(--chalk); color:var(--ink); }.error-page { min-height:60vh; }.site-footer { padding-top:3.5rem; background:var(--teal-deep); color:#e9f0ee; }.footer-inner { display:flex; justify-content:space-between; gap:2rem; padding-bottom:2.5rem; }.footer-mark,.site-footer nav a { color:#fff; }.site-footer p { max-width:38ch; color:#b4c2be; font-size:.9rem; }.footer-legal { display:flex; justify-content:space-between; gap:1rem; padding-block:1.15rem; border-top:1px solid rgb(255 255 255 / .15); color:#b4c2be; font-family:var(--font-mono); font-size:.7rem; }
.footer-mark { margin-bottom:1.2rem; }.footer-mark img { width:min(13.5rem,58vw); }
@media (max-width:1000px) { .header-search-field { width:7rem; } } @media (max-width:900px) { .article-layout { display:block; }.article-aside { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); padding-bottom:3rem; }.kosmio-promo { min-height:100%; } } @media (max-width:800px) { .reading-progress { top:76px; }.header-inner,.footer-inner { align-items:flex-start; flex-direction:column; padding-block:1rem; }.header-inner { gap:.8rem; }.primary-nav { width:100%; }.primary-nav ul { gap:.9rem; }.header-search { width:100%; }.header-search-field { width:100%; }.hero-grid { grid-template-columns:1fr; }.hero-note { max-width:440px; }.post-grid { grid-template-columns:1fr; }.section-heading { align-items:flex-start; flex-direction:column; }.text-link { margin-bottom:1.25rem; }.footer-legal { flex-direction:column; }.article-aside { grid-template-columns:1fr; }.entry-content { font-size:1rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }