/* =========================================================================
   zdnp — TrueCAD Theme 2026
   Tokens, reset, layout and component styles. All visual styling lives here.
   ========================================================================= */

:root{
	--paper:#FFFFFF;
	--paper-2:#F2F6F3;
	--ink:#13201A;
	--ink-soft:#54605A;
	--ink-faint:#8B968F;
	--line:#E3E8E4;
	--line-strong:#D0D8D2;
	--accent:#11774C;
	--accent-deep:#0B5638;
	--accent-on-dark:#5DC08F;
	--dark:#0E1A14;
	--dark-2:#0A130E;
	--on-dark:#E8EDE9;
	--on-dark-soft:#92A39A;
	--maxw:1260px;
	--gut:clamp(20px,4.5vw,68px);
	--header-h:74px;
	--f:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.5;
	-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
#main{flex:1 0 auto}
a{color:inherit;text-decoration:none}
img,picture,svg,video{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
input,button{font-family:inherit}
h1,h2,h3,h4,h5{margin:0}
::selection{background:var(--accent);color:#fff}

/* ---------- shared utilities ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.lbl{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;font-size:13px}
.skip:focus{left:12px;top:12px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.empty{padding:48px 0 clamp(46px,6vw,80px);color:var(--ink-soft);font-size:18px}

/* ---------- reading progress (single) ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:120;transition:width .1s linear}

/* =========================================================================
   MASTHEAD
   ========================================================================= */
.masthead{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
	backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.admin-bar .masthead{top:32px}
.mast-row{display:flex;align-items:center;gap:24px;padding-block:17px}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.custom-logo-link{display:inline-flex;flex:none}
.custom-logo{max-height:34px;width:auto}
.mark{width:24px;height:24px;flex:none;color:var(--ink);display:block}
.mark .b-acc{fill:var(--accent)}
.wordmark{font-weight:800;letter-spacing:-.03em;font-size:25px;line-height:1;color:var(--ink)}
.tagline{color:var(--ink-faint);font-size:13px;line-height:1.3;max-width:20ch;padding-left:14px;border-left:1px solid var(--line-strong)}
@media(max-width:1040px){.tagline{display:none}}

nav.primary{display:flex;gap:2px;align-items:center;margin-left:32px;list-style:none;padding:0;margin:0}
nav.primary li{list-style:none}
nav.primary a{color:var(--ink-soft);padding:9px 15px;font-weight:500;font-size:15.5px;transition:color .2s;position:relative;text-decoration:none}
nav.primary a::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav.primary a:hover,nav.primary .current-menu-item>a,nav.primary .current_page_item>a{color:var(--ink);text-decoration:none}
nav.primary a:hover::after,nav.primary .current-menu-item>a::after,nav.primary .current_page_item>a::after{transform:scaleX(1)}

.h-search{margin-left:auto;display:inline-flex;align-items:center;border:1px solid var(--line-strong);background:rgba(255,255,255,0.6);transition:.2s;flex:none}
.h-search:focus-within{border-color:var(--ink);background:var(--paper)}
.h-search input{width:160px;border:none;background:transparent;padding:0 0 0 14px;font-size:14.5px;color:var(--ink);outline:none;font-family:inherit}
.h-search input::placeholder{color:var(--ink-faint)}
.h-search button{width:40px;height:40px;background:transparent;border:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);padding:0}
.h-search button:hover{color:var(--ink)}

.menu-btn{display:none;align-items:center;background:none;border:1px solid var(--line-strong);
	color:var(--ink);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 15px}
.drawer{position:absolute;top:100%;left:0;width:100%;background:rgba(255,255,255,.98);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.06);padding:24px var(--gut) 24px;margin:0;list-style:none}
.drawer li{list-style:none}
.drawer[hidden]{display:none}
.drawer a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line);font-weight:700;font-size:22px;letter-spacing:-.02em;text-decoration:none}
.drawer-search{display:flex;align-items:center;border-bottom:1px solid var(--line-strong);padding:0 2px 18px;margin-bottom:8px}
.drawer-search input{flex:1;border:none;background:transparent;font-size:18px;color:var(--ink);outline:none;padding:0;font-family:inherit}
.drawer-search input::placeholder{color:var(--ink-faint)}
.drawer-search button{background:transparent;border:none;color:var(--ink-soft);padding:0;display:inline-flex;align-items:center;justify-content:center}

@media(max-width:900px){
	nav.primary,.h-search{display:none}
	.menu-btn{display:inline-flex;margin-left:auto}
}

/* =========================================================================
   HERO (front page)
   ========================================================================= */
.hero{padding-block:clamp(40px,6vw,80px) clamp(34px,4vw,52px)}
.hero-grid{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
.hero-grid.has-media{grid-template-columns:1.04fr .96fr}
@media(max-width:900px){.hero-grid.has-media{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--accent);margin-bottom:24px;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow .dash{width:24px;height:2px;background:var(--accent);display:inline-block}
.hero-title{font-weight:800;letter-spacing:-.035em;font-size:clamp(34px,4.6vw,58px);line-height:1.02;margin:0}
.hero-grid:not(.has-media) .hero-title{max-width:18ch}
.hero-title a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 3px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s ease;padding-bottom:4px;text-decoration:none;}
.hero-title a:hover{background-size:100% 3px;text-decoration:none;}
.hero-media{display:block;border:1px solid var(--line);overflow:hidden}
.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease}
.hero-media:hover img{transform:scale(1.03)}
.hero-text .dek{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink-soft);max-width:48ch;margin:24px 0 0}
.hero-text .byline{margin-top:24px}
@media(max-width:900px){.hero-media img{aspect-ratio:16/9}}
.byline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:var(--ink-faint)}
.byline .who{color:var(--ink);font-weight:600}

/* =========================================================================
   CATEGORY TILES (front page)
   ========================================================================= */
.cats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.cat{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px 24px;
	display:flex;flex-direction:column;min-height:200px;transition:background .25s,color .25s;position:relative}
.cat .ci{color:var(--ink-faint);font-weight:600;font-size:13px;letter-spacing:.04em;transition:color .25s}
.cat h2{font-weight:700;font-size:23px;letter-spacing:-.02em;margin:14px 0 8px;transition:color .25s}
.cat p{color:var(--ink-soft);font-size:14.5px;line-height:1.4;margin:0;flex:1;transition:color .25s}
.cat .arrow{margin-top:18px;font-size:20px;color:var(--accent);transition:transform .25s,color .25s}
.cat:hover{background:var(--accent);color:#fff}
.cat:hover .ci,.cat:hover h2,.cat:hover p,.cat:hover .arrow{color:#fff}
.cat:hover .arrow{transform:translateX(5px)}
@media(max-width:1000px){
	.cats{grid-template-columns:repeat(2,1fr)}
	.cat:nth-child(2n){border-right:none}
}
@media(max-width:560px){
	.cats{grid-template-columns:1fr}
	.cat,.cat:nth-child(2n){border-right:none}
	.cat{min-height:0}
}

/* =========================================================================
   SECTION HEAD
   ========================================================================= */
.sec{padding-block:clamp(46px,6vw,80px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:8px}
.sec-head h2{font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.03em;margin:0;line-height:1}
.sec-head a{color:var(--ink-soft);font-weight:600;font-size:14px;transition:color .2s;white-space:nowrap}
.sec-head a:hover{color:var(--accent)}

/* =========================================================================
   POST LIST ROWS (front, archive, search, index)
   ========================================================================= */
.list--2col{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
@media(max-width:820px){.list--2col{grid-template-columns:1fr}}
.list--archive{margin-top:6px}
.list--archive:last-child{padding-bottom:clamp(46px,6vw,80px)}

.row{display:grid;grid-template-columns:1fr;gap:22px;align-items:flex-start;
	padding:26px 0;border-top:1px solid var(--line);transition:padding-left .2s}
.list--2col .row:nth-child(1),.list--2col .row:nth-child(2){border-top:1px solid var(--line)}
.row:hover{padding-left:6px}
.row-thumb{overflow:hidden;border:1px solid var(--line);order:2}
.row-thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform .5s ease}
.row:hover .row-thumb img{transform:scale(1.04)}
.row-main{min-width:0;order:1}
.row-cat{color:var(--accent);margin-bottom:11px;display:inline-block}
.row-title{font-weight:700;font-size:21px;line-height:1.18;letter-spacing:-.02em;margin:0 0 9px}
.row:hover .row-title{color:var(--accent)}
.row-dek{color:var(--ink-soft);font-size:15px;line-height:1.45;margin:0 0 12px}
.row-meta{color:var(--ink-faint);font-size:13px}

/* list rows with thumbnail → two columns text|image */
.row:has(.row-thumb){grid-template-columns:1fr 168px;column-gap:24px}
.list--2col .row:has(.row-thumb){grid-template-columns:1fr 184px}
.list--2col .row-thumb img{aspect-ratio:4/3}

/* archive variant — index column + larger title */
.row--archive{padding:30px 0;border-top:none;border-bottom:1px solid var(--line)}
.row--archive{grid-template-columns:36px 1fr}
.row--archive:has(.row-thumb){grid-template-columns:36px 1fr 200px}
.row-idx{font-weight:600;font-size:13px;color:var(--ink-faint);padding-top:4px;order:0}
.row--archive .row-thumb{order:3}
.row--archive .row-main{order:1}
.row--archive .row-title{font-size:clamp(20px,2.4vw,25px);line-height:1.16;letter-spacing:-.025em;margin-bottom:10px}
.row--archive .row-dek{font-size:15.5px;line-height:1.5;max-width:62ch}

@media(max-width:680px){
	.row,.row:has(.row-thumb),
	.row--archive,.row--archive:has(.row-thumb){grid-template-columns:1fr}
	.row-thumb,.row--archive .row-thumb{order:0;margin-bottom:4px}
	.row-thumb img{aspect-ratio:16/9}
	.row-idx{display:none}
}

/* =========================================================================
   FLAGSHIP BAND (front page)
   ========================================================================= */
.band{background:var(--paper-2);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.band-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
@media(max-width:820px){.band-grid{grid-template-columns:1fr;gap:36px}}
.feat .cl{color:var(--accent);margin-bottom:18px;display:inline-block}
.feat-media{display:block;margin-bottom:20px;border:1px solid var(--line-strong);overflow:hidden}
.feat-media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s ease}
.feat-media:hover img{transform:scale(1.03)}
.feat h3{font-weight:800;letter-spacing:-.03em;font-size:clamp(26px,3.4vw,42px);line-height:1.04;margin:0 0 16px}
.feat h3 a:hover{color:var(--accent)}
.feat p{color:var(--ink-soft);font-size:18px;line-height:1.5;margin:0 0 22px;max-width:42ch}
.feat .byline{color:var(--ink-faint)}
.mini-h{color:var(--ink-faint);padding-bottom:14px;border-bottom:1px solid var(--line-strong);margin-bottom:2px}
.mini{display:block;padding:18px 0;border-bottom:1px solid var(--line)}
.mini:last-child{border-bottom:none}
.mini h4{font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
.mini:hover h4{color:var(--accent)}
.mini .m{color:var(--ink-faint);font-size:13px}

/* =========================================================================
   NEWSLETTER
   ========================================================================= */
.know{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding-block:clamp(46px,5vw,72px)}
.know-l{padding-right:52px;border-right:1px solid var(--line)}
.know h2{font-weight:800;font-size:clamp(27px,3.4vw,40px);letter-spacing:-.03em;margin:0 0 14px;line-height:1.04}
.know p{color:var(--ink-soft);margin:0;max-width:42ch}
.field{display:flex;border:1px solid var(--ink)}
.field input{flex:1;border:none;background:none;font-size:16px;padding:17px 18px;color:var(--ink);outline:none;min-width:0}
.field input::placeholder{color:var(--ink-faint)}
.field button{background:var(--ink);color:#fff;border:none;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 24px;transition:background .2s;white-space:nowrap}
.field button:hover{background:var(--accent)}
.field.is-done button{background:var(--accent)}
.know-r .fine{color:var(--ink-faint);font-size:13px;margin-top:14px}
@media(max-width:780px){
	.know{grid-template-columns:1fr;gap:30px}
	.know-l{padding-right:0;border-right:none;border-bottom:1px solid var(--line);padding-bottom:30px}
}

/* =========================================================================
   ARCHIVE / SEARCH HEADER
   ========================================================================= */
.arch-head{padding-block:clamp(38px,5vw,66px) 0}
.crumb{display:flex;gap:10px;align-items:center;color:var(--ink-faint);margin-bottom:24px;flex-wrap:wrap;font-size:13.5px}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--line-strong)}
.arch-title{font-weight:800;letter-spacing:-.035em;font-size:clamp(40px,7vw,82px);line-height:.98;margin:0 0 18px}
.arch-head .lead{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink-soft);max-width:56ch;margin:0 0 34px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line-strong)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips a{font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--line-strong);padding:9px 15px;transition:.2s;white-space:nowrap}
.chips a:hover{border-color:var(--ink);color:var(--ink)}
.chips a[aria-current]{background:var(--accent);color:#fff;border-color:var(--accent)}
.count{color:var(--ink-faint);white-space:nowrap;font-size:13.5px}
.search-inline{display:flex;border:1px solid var(--ink);max-width:360px;flex:1}
.search-inline input{flex:1;border:none;background:none;font-size:15px;padding:11px 14px;outline:none;min-width:0}
.search-inline button{background:var(--ink);color:#fff;border:none;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:0 18px;transition:background .2s}
.search-inline button:hover{background:var(--accent)}

/* =========================================================================
   PAGINATION (WP the_posts_pagination)
   ========================================================================= */
.pager{padding-block:clamp(40px,5vw,64px) clamp(46px,6vw,80px)}
.pager .nav-links{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pager .page-numbers{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;border:1px solid var(--line-strong);color:var(--ink-soft);transition:.2s;padding-inline:12px}
.pager a.page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pager .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager .page-numbers.dots{border:none}

/* =========================================================================
   SINGLE ARTICLE
   ========================================================================= */
.ahead{padding-block:clamp(30px,4vw,52px) 0;max-width:880px}
.acat{display:inline-flex;align-items:center;gap:12px;color:var(--accent);margin-bottom:20px}
.acat .dash{width:24px;height:2px;background:var(--accent);display:inline-block}
.title{font-weight:800;letter-spacing:-.035em;font-size:clamp(33px,5.6vw,58px);line-height:1.02;margin:0 0 26px}
.ameta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-block:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ameta .au{display:flex;align-items:center;gap:13px}
.ameta .av{width:42px;height:42px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:-.02em;flex:none}
.ameta .au .nm{font-weight:600;font-size:16px}
.ameta .au .rl{display:block;color:var(--ink-faint);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.ameta .x{color:var(--ink-faint);font-size:14px}

.layout{display:grid;grid-template-columns:228px 1fr;gap:64px;align-items:start;padding-top:42px;padding-bottom:clamp(46px,6vw,80px)}
@media(max-width:980px){.layout{grid-template-columns:1fr;gap:0;padding-top:30px}}
.rail{position:sticky;top:calc(var(--header-h) + 18px)}
.admin-bar .rail{top:calc(var(--header-h) + 50px)}
.rail[hidden]{display:none}
@media(max-width:980px){.rail{display:none!important}}
.rail-h{font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.toc a{display:block;color:var(--ink-soft);padding:8px 0 8px 16px;font-size:14.5px;line-height:1.3;border-left:2px solid var(--line);transition:.2s}
.toc a:hover{color:var(--ink);border-color:var(--line-strong)}
.toc a.active{color:var(--accent);border-color:var(--accent);font-weight:600}
.rail .est{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:12px;line-height:1.9}
.rail .est b{color:var(--ink-soft);font-weight:600}

.body{max-width:720px}
.article-hero{margin:0 0 36px;border:1px solid var(--line)}
.article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-hero figcaption{margin-top:12px;color:var(--ink-faint);font-size:13.5px;padding-left:14px;border-left:1px solid var(--line-strong)}

/* ---------- entry content / Gutenberg prose ---------- */
.entry-content{font-size:18px;line-height:1.62;color:#283029}
.entry-content > *{margin-block:0 24px}
.entry-content > p:first-of-type{font-size:clamp(20px,2.2vw,23px);line-height:1.5;color:var(--ink);font-weight:400}
.entry-content h2{font-weight:800;letter-spacing:-.03em;font-size:clamp(24px,3vw,32px);line-height:1.1;color:var(--ink);margin:52px 0 14px;scroll-margin-top:calc(var(--header-h) + 16px)}
.entry-content h3{font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink);margin:32px 0 6px}
.entry-content h4{font-weight:700;font-size:17px;color:var(--ink);margin:26px 0 6px}
.entry-content a{color:var(--accent);font-weight:500;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;text-decoration:none;}
.entry-content a:hover{background-size:100% 2px;text-decoration:none;}
.entry-content strong{font-weight:700;color:var(--ink)}
.entry-content ul,.entry-content ol{margin:0 0 24px;padding-left:0;list-style:none}
.entry-content li{position:relative;padding-left:30px;margin-bottom:14px;font-size:17.5px;line-height:1.55}
.entry-content ul li::before{content:"";position:absolute;left:2px;top:12px;width:11px;height:2px;background:var(--accent)}
.entry-content ol{counter-reset:li}
.entry-content ol li{counter-increment:li}
.entry-content ol li::before{content:counter(li);position:absolute;left:0;top:0;font-weight:700;color:var(--accent);font-size:16px}
.entry-content img{margin-inline:auto}
.entry-content figure{margin:40px 0}
.entry-content figure img{border:1px solid var(--line)}
.entry-content figcaption{margin-top:12px;color:var(--ink-faint);font-size:13.5px;padding-left:14px;border-left:1px solid var(--line-strong);text-align:left}

/* pull / blockquote */
.entry-content blockquote{margin:46px 0;padding:4px 0 4px 28px;border-left:3px solid var(--accent)}
.entry-content blockquote p{font-weight:400;font-size:clamp(19px,2.2vw,24px);line-height:1.4;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.entry-content blockquote cite{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-style:normal}
.entry-content .wp-block-pullquote{border-top:none;border-bottom:none}

/* "Ključni poudarki" — a Group block with class .takeaways, or a styled quote */
.entry-content .takeaways{border:1px solid var(--accent);margin:0 0 40px;padding:26px 30px;background:var(--paper-2)}
.entry-content .takeaways h2,.entry-content .takeaways h3,.entry-content .takeaways h4{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 18px}
.entry-content .takeaways ul li::before{content:"→";background:none;width:auto;height:auto;left:0;top:0;color:var(--accent);font-weight:600}
.entry-content .takeaways li{padding-left:26px}

/* table */
.entry-content table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 28px}
.entry-content th,.entry-content td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.entry-content th{font-weight:700;color:var(--ink)}

/* code */
.entry-content code{background:var(--paper-2);padding:2px 6px;font-size:.9em;border:1px solid var(--line)}
.entry-content pre{background:var(--dark);color:var(--on-dark);padding:20px;overflow:auto;font-size:14px}
.entry-content pre code{background:none;border:none;padding:0;color:inherit}

/* wide / full alignment within the constrained body */
.entry-content .alignwide{width:min(100%,860px);margin-inline:auto}
.entry-content .alignfull{width:auto;margin-inline:calc(-1 * var(--gut))}
@media(min-width:1100px){.entry-content .alignwide{width:860px;margin-inline:calc((720px - 860px)/2)}}

.page-links{display:flex;gap:8px;margin:24px 0}
.page-links a,.page-links>span{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);font-weight:600;font-size:13px}

.entry-tags{margin-top:36px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.entry-tags .lbl{color:var(--ink-faint);margin-right:6px}
.entry-tags a{font-size:13px;color:var(--ink-soft);border:1px solid var(--line-strong);padding:6px 12px;transition:.2s}
.entry-tags a:hover{border-color:var(--ink);color:var(--ink)}

.authorbox{margin:44px 0 0;border:1px solid var(--line-strong);padding:30px;display:flex;gap:22px;align-items:flex-start}
.authorbox .av{width:60px;height:60px;background:var(--accent);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:21px;letter-spacing:-.02em}
.authorbox .nm{font-weight:700;font-size:20px;letter-spacing:-.02em;margin:0 0 4px}
.authorbox .rl{color:var(--accent);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.authorbox p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.5}
@media(max-width:520px){.authorbox{flex-direction:column;gap:14px}}

/* related */
.related{border-top:1px solid var(--line-strong);padding-bottom:clamp(46px,6vw,80px)}
.related .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:0;padding-top:clamp(42px,5vw,64px)}
.related .sec-head h2{font-weight:800;font-size:clamp(23px,3vw,32px);letter-spacing:-.03em;margin:0}
.related .sec-head a{color:var(--ink-soft);font-weight:600;font-size:14px}
.related .sec-head a:hover{color:var(--accent)}
.rel-list{margin-top:26px;border-top:1px solid var(--line)}
.rel{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .2s}
.rel:has(.rel-thumb){grid-template-columns:120px 1fr auto}
.rel:hover{padding-left:6px}
.rel-thumb{overflow:hidden;border:1px solid var(--line)}
.rel-thumb img{width:100%;aspect-ratio:3/2;object-fit:cover}
.rel .cl{color:var(--accent);margin-bottom:9px;display:inline-block}
.rel h3{font-weight:700;font-size:20px;line-height:1.18;letter-spacing:-.02em;margin:0}
.rel:hover h3{color:var(--accent)}
.rel .m{color:var(--ink-faint);font-size:13px;white-space:nowrap;text-align:right}
@media(max-width:620px){
	.rel,.rel:has(.rel-thumb){grid-template-columns:1fr}
	.rel .m{display:none}
	.rel-thumb img{aspect-ratio:16/9}
}

/* =========================================================================
   PAGE (simple)
   ========================================================================= */
.page-head{max-width:880px}
.page-body{max-width:720px;margin-inline:auto;padding-bottom:clamp(46px,6vw,80px)}
.page-body .article-hero{margin-bottom:36px}

/* =========================================================================
   404
   ========================================================================= */
.e404{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;
	padding-block:clamp(48px,9vw,120px);min-height:60vh}
@media(max-width:840px){.e404{grid-template-columns:1fr;gap:44px}}
.big{font-weight:800;letter-spacing:-.05em;line-height:.82;font-size:clamp(120px,22vw,260px);color:var(--ink);position:relative;display:inline-block}
.big .bar{position:absolute;left:0;bottom:.13em;width:.4em;height:9px;background:var(--accent)}
.sky{display:flex;align-items:flex-end;gap:8px;height:46px;margin-top:30px}
.sky i{display:block;width:14px;background:var(--paper-2);border:1px solid var(--line-strong)}
.sky i:nth-child(1){height:60%}
.sky i:nth-child(2){height:100%;background:var(--accent);border-color:var(--accent)}
.sky i:nth-child(3){height:45%}
.sky i:nth-child(4){height:78%}
.sky i:nth-child(5){height:34%}
.e404-body h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(28px,3.6vw,42px);line-height:1.04;margin:0 0 16px}
.e404-body p{color:var(--ink-soft);font-size:18px;line-height:1.55;margin:0 0 28px;max-width:46ch}
.e404 .search{display:flex;border:1px solid var(--ink);max-width:440px;margin-bottom:30px}
.e404 .search input{flex:1;border:none;background:none;font-size:16px;padding:16px 18px;outline:none;min-width:0}
.e404 .search button{background:var(--ink);color:#fff;border:none;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 22px;transition:background .2s}
.e404 .search button:hover{background:var(--accent)}
.links-h{font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.links-row{display:flex;flex-wrap:wrap;gap:8px}
.links-row a{font-weight:600;font-size:12px;letter-spacing:.02em;color:var(--ink-soft);border:1px solid var(--line-strong);padding:9px 14px;transition:.2s}
.links-row a:hover{border-color:var(--ink);color:var(--ink)}
.home-link{margin-top:30px;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:15px 22px;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:background .2s}
.home-link:hover{background:var(--accent)}

/* =========================================================================
   COMMENTS
   ========================================================================= */
.comments-area{max-width:720px;margin-inline:auto;padding-block:clamp(40px,5vw,64px) clamp(46px,6vw,80px);border-top:1px solid var(--line)}
.comments-title{font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;margin:0 0 26px}
.comment-list{list-style:none;margin:0 0 32px;padding:0}
.comment-list ol{list-style:none;padding-left:24px}
.comment-body{padding:18px 0;border-top:1px solid var(--line)}
.comment-author{font-weight:600}
.comment-author .says{display:none}
.comment-meta{font-size:13px;color:var(--ink-faint);margin-bottom:8px}
.comment-meta a{color:inherit}
.comment-form{display:grid;gap:14px;max-width:560px}
.comment-form label{font-weight:600;font-size:13px}
.comment-form input,.comment-form textarea{width:100%;border:1px solid var(--line-strong);background:none;font-size:15px;padding:12px 14px;font-family:inherit}
.comment-form textarea{min-height:140px}
.comment-form .btn-submit,.comment-form input[type=submit]{width:auto;background:var(--ink);color:#fff;border:none;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:14px 24px;transition:background .2s;cursor:pointer}
.comment-form .btn-submit:hover,.comment-form input[type=submit]:hover{background:var(--accent)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--dark);color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:42px;padding-block:clamp(50px,6vw,84px)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:38px 32px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{display:inline-flex;align-items:center;gap:11px}
.foot-logo .mark{color:#fff;width:22px;height:22px}
.foot-logo .mark .b-acc{fill:var(--accent-on-dark)}
.foot-logo .wordmark{color:#fff;font-size:26px}
.foot-expand{color:var(--on-dark-soft);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:18px 0 0}
.foot-expand b{color:var(--accent-on-dark);font-weight:600}
.foot-brand p{color:var(--on-dark-soft);max-width:38ch;margin:14px 0 0;font-size:15px;line-height:1.55}
.foot-col .foot-h{font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-on-dark);margin:0 0 18px}
.foot-col a{display:block;color:var(--on-dark);padding:7px 0;font-size:15.5px;transition:color .2s}
.foot-col a:hover{color:var(--accent-on-dark)}
.subfoot{border-top:1px solid rgba(232,237,233,.12);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-block:22px;color:var(--on-dark-soft);font-size:13px}
.totop{display:inline-flex;align-items:center;gap:9px;color:var(--on-dark);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.totop .arr{border:1px solid rgba(232,237,233,.24);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.totop:hover .arr{background:var(--accent-on-dark);color:var(--dark);border-color:var(--accent-on-dark)}

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.reveal{opacity:1;transform:none;transition:none}
	*{transition:none!important;animation:none!important}
}