/* ── WTF MAGAZINE THEME — screen.css ── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,600;1,8..60,300;1,8..60,400&family=DM+Sans:wght@300;400;500&family=IBM+Plex+Mono:wght@300;400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --bg:    #0E0E0C;
  --bg2:   #141412;
  --bg3:   #1C1C19;
  --bg4:   #232320;
  --line:  rgba(255,255,255,0.10);
  --ln2:   rgba(255,255,255,0.18);
  --text:  #F0EDE4;
  --t2:    #C8C4BA;
  --t3:    #8A8680;
  --wtw:   #7EC8F0;
  --wtw-dk:#152840;
  --jot:   #E8A070;
  --jot-dk:#3D2010;
  --ts:    #72CC90;
  --ts-dk: #0F2918;
}

body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;object-fit:cover}

/* ── TICKER ── */
.ticker-bar{height:28px;background:var(--bg2);border-bottom:1px solid var(--line);display:flex;overflow:hidden;position:relative;z-index:50}
.t-label{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.2em;background:var(--jot);color:#0E0E0C;padding:0 13px;display:flex;align-items:center;flex-shrink:0}
.t-scroll{overflow:hidden;flex:1}
.t-inner{display:flex;animation:tsroll 42s linear infinite;white-space:nowrap}
.ti{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--t3);padding:0 16px;height:28px;display:flex;align-items:center;gap:8px;border-right:1px solid var(--line)}
.ti b{color:var(--t2);font-weight:400;letter-spacing:0.06em}
.up{color:#6EC99A}.dn{color:#D97070}
@keyframes tsroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── MASTHEAD ── */
.masthead{background:var(--bg);border-bottom:1px solid var(--ln2);padding:0 36px;position:sticky;top:0;z-index:100}
.mast-top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.mast-date{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.1em;color:var(--t3)}
.nameplate{font-family:'Libre Baskerville',serif;font-size:clamp(20px,3vw,44px);font-weight:700;letter-spacing:0.02em;color:var(--text)}
.nameplate em{font-style:italic;color:var(--jot)}
.mast-btns{display:flex;gap:8px}
.mbtn{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;padding:6px 14px;border:1px solid var(--ln2);color:var(--t3);transition:all 0.15s;cursor:pointer;background:none}
.mbtn:hover{border-color:var(--t2);color:var(--text)}
.mbtn.sub{background:var(--jot);color:#0E0E0C;border-color:var(--jot)}
.mbtn.sub:hover{background:#E09A6A}
.sec-nav{display:flex;overflow-x:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;scrollbar-width:none}
.sec-nav::-webkit-scrollbar{display:none}
.sec-nav a{display:flex;align-items:center;padding:9px 16px;color:var(--t3);white-space:nowrap;border-bottom:2px solid transparent;transition:all 0.15s}
.sec-nav a:first-child{padding-left:0}
.sec-nav a:hover{color:var(--text);border-bottom-color:var(--ln2)}
.sec-nav a.wtw{color:var(--wtw)}.sec-nav a.wtw:hover{border-bottom-color:var(--wtw)}
.sec-nav a.jot{color:var(--jot)}.sec-nav a.jot:hover{border-bottom-color:var(--jot)}
.sec-nav a.ts{color:var(--ts)}.sec-nav a.ts:hover{border-bottom-color:var(--ts)}

/* ── PAGE WRAPPER ── */
.page{max-width:1360px;margin:0 auto;padding:0 36px}

/* ── SHARED COMPONENTS ── */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 12px;border-bottom:1px solid var(--ln2)}
.sec-title{font-family:'Libre Baskerville',serif;font-size:15px;font-weight:700;font-style:italic}
.sec-title.wtw{color:var(--wtw)}.sec-title.jot{color:var(--jot)}.sec-title.ts{color:var(--ts)}.sec-title.flash{color:var(--t2)}.sec-title.def{color:var(--t2)}
.see-all{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:4px;transition:color 0.15s}
.see-all:hover{color:var(--text)}.see-all::after{content:'→'}

.tag-pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.15em;text-transform:uppercase;padding:2px 7px;margin-bottom:8px}
.tag-pill.wtw{background:var(--wtw-dk);color:var(--wtw)}
.tag-pill.jot{background:var(--jot-dk);color:var(--jot)}
.tag-pill.ts{background:var(--ts-dk);color:var(--ts)}
.tag-pill.def{background:var(--bg3);color:var(--t2)}

.meta-row{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.07em;color:var(--t3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lock{opacity:0.35;font-size:9px}
.chip{font-family:'IBM Plex Mono',monospace;font-size:8px;padding:1px 6px;background:var(--bg4);border:1px solid var(--ln2);color:var(--t2)}
.chip.hi{border-color:var(--ts);color:var(--ts)}
.chip.mid{border-color:var(--jot);color:var(--jot)}

/* ── SECTION GRID (homepage sections) ── */
.sec-grid{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--ln2)}
.sc{padding:20px 18px 20px 0;border-right:1px solid var(--line);display:block;position:relative}
.sc:first-child{padding-left:0}
.sc:not(:first-child){padding-left:18px}
.sc:last-child{border-right:none}
.sc:hover .sc-hed{opacity:0.75}
.sc-img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--bg3);margin-bottom:12px;display:block}
.sc-img-ph{width:100%;aspect-ratio:3/2;background:var(--bg3);margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.sc-img-ph span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--t3)}
.sc-hed{font-family:'Source Serif 4',serif;font-size:14px;font-weight:600;line-height:1.3;color:var(--text);margin-bottom:6px;transition:opacity 0.15s}
.sc-dek{font-size:12px;line-height:1.6;color:var(--t2);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── FLASH GRID ── */
.flash-grid{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--ln2)}
.flash-col{padding:16px 18px 16px 0;border-right:1px solid var(--line);display:flex;flex-direction:column}
.flash-col:first-child{padding-left:0}
.flash-col:not(:first-child){padding-left:18px}
.flash-col:last-child{border-right:none}
.fi{display:block;padding:9px 0;border-bottom:1px solid var(--line)}
.fi:last-child{border-bottom:none}
.fi:hover .fi-hed{color:var(--text)}
.fi-hed{font-size:12px;line-height:1.45;color:var(--t2);margin-bottom:3px;transition:color 0.15s}
.fi-date{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--t3)}
.live-badge{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--ts)}
.ldot{width:4px;height:4px;border-radius:50%;background:var(--ts);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}

/* ── POST / ARTICLE PAGE ── */
.post-wrap{display:grid;grid-template-columns:1fr 300px;gap:0;padding-top:0}
.post-main{border-right:1px solid var(--line);padding:36px 40px 60px 0;min-width:0}
.post-aside{padding:36px 0 36px 32px}

.post-header{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.post-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.18em;text-transform:uppercase;padding:3px 8px;margin-bottom:14px}
.post-tag.wtw{background:var(--wtw-dk);color:var(--wtw)}
.post-tag.jot{background:var(--jot-dk);color:var(--jot)}
.post-tag.ts{background:var(--ts-dk);color:var(--ts)}
.post-tag.def{background:var(--bg3);color:var(--t2)}
.post-title{font-family:'Libre Baskerville',serif;font-size:clamp(26px,3vw,42px);font-weight:700;line-height:1.1;letter-spacing:-0.015em;color:var(--text);margin-bottom:14px}
.post-excerpt{font-family:'Source Serif 4',serif;font-size:17px;font-weight:300;font-style:italic;line-height:1.6;color:var(--t2);margin-bottom:16px}
.post-byline{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.1em;color:var(--t3);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.post-feature-img{width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--bg3);margin-bottom:32px}

/* Article body typography */
.post-body{font-family:'Source Serif 4',serif;font-size:17px;font-weight:300;line-height:1.8;color:var(--t2);max-width:680px}
.post-body h2{font-family:'Libre Baskerville',serif;font-size:22px;font-weight:700;color:var(--text);margin:36px 0 14px;line-height:1.2}
.post-body h3{font-family:'Libre Baskerville',serif;font-size:18px;font-weight:700;color:var(--text);margin:28px 0 10px;line-height:1.2}
.post-body p{margin-bottom:20px;color:var(--t2)}
.post-body strong{color:var(--text);font-weight:600}
.post-body em{font-style:italic}
.post-body a{color:var(--wtw);border-bottom:1px solid rgba(126,200,240,0.3);transition:border-color 0.15s}
.post-body a:hover{border-bottom-color:var(--wtw)}
.post-body blockquote{border-left:3px solid var(--jot);padding:12px 0 12px 20px;margin:28px 0;font-style:italic;color:var(--t2)}
.post-body ul,.post-body ol{padding-left:24px;margin-bottom:20px}
.post-body li{margin-bottom:8px}
.post-body img{width:100%;margin:28px 0;background:var(--bg3)}
.post-body hr{border:none;border-top:1px solid var(--line);margin:36px 0}
.post-body pre{background:var(--bg3);padding:20px;overflow-x:auto;margin:24px 0;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--t2)}
.post-body code{font-family:'IBM Plex Mono',monospace;font-size:13px;background:var(--bg3);padding:2px 6px;color:var(--ts)}
.post-body figure{margin:28px 0}
.post-body figcaption{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.1em;color:var(--t3);margin-top:8px;text-align:center}
.post-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.post-body th{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);padding:8px 12px;border-bottom:1px solid var(--ln2);text-align:left}
.post-body td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--t2)}

/* Paywall / subscription box */
.post-paywall{margin-top:32px;padding:32px;background:var(--bg3);border:1px solid var(--ln2);text-align:center}
.post-paywall h3{font-family:'Libre Baskerville',serif;font-size:20px;font-weight:700;color:var(--text);margin-bottom:10px}
.post-paywall p{font-size:14px;color:var(--t2);margin-bottom:20px;line-height:1.6}
.post-paywall .mbtn{display:inline-block;padding:10px 28px;font-size:10px}

/* Sidebar */
.aside-head{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--t3);padding-bottom:8px;border-bottom:1px solid var(--ln2);margin-bottom:0}
.aside-card{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
.aside-card:last-child{border-bottom:none}
.aside-card:hover .ac-hed{opacity:0.7}
.ac-img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--bg3);margin-bottom:10px}
.ac-hed{font-family:'Source Serif 4',serif;font-size:13px;font-weight:600;line-height:1.3;color:var(--text);margin-bottom:5px;transition:opacity 0.15s}
.ac-meta{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--t3)}

/* ── TAG ARCHIVE PAGE ── */
.tag-header{padding:32px 0 24px;border-bottom:1px solid var(--ln2);margin-bottom:0}
.tag-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.tag-name{font-family:'Libre Baskerville',serif;font-size:clamp(24px,3vw,40px);font-weight:700;color:var(--text)}
.tag-name.wtw{color:var(--wtw)}.tag-name.jot{color:var(--jot)}.tag-name.ts{color:var(--ts)}
.tag-desc{font-family:'Source Serif 4',serif;font-size:15px;font-style:italic;color:var(--t2);margin-top:8px}
.tag-count{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--t3);margin-top:6px}

/* Archive grid — reuse sec-grid */
.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ln2)}
.archive-grid .sc{padding:20px 16px 20px 0}
.archive-grid .sc:not(:first-child){padding-left:16px}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:28px 0;border-top:1px solid var(--line)}
.pagination a,.pagination span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;padding:7px 16px;border:1px solid var(--line);color:var(--t3);transition:all 0.15s}
.pagination a:hover{border-color:var(--t2);color:var(--text)}
.pagination .current{border-color:var(--jot);color:var(--jot)}

/* ── AUTHOR PAGE ── */
.author-header{display:flex;align-items:center;gap:24px;padding:32px 0 24px;border-bottom:1px solid var(--ln2)}
.author-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--bg3);flex-shrink:0}
.author-name{font-family:'Libre Baskerville',serif;font-size:28px;font-weight:700;color:var(--text);margin-bottom:4px}
.author-bio{font-size:14px;color:var(--t2);line-height:1.6;max-width:560px}
.author-meta{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--t3);margin-top:6px}

/* ── BOTTOM / TOOLS + SUBSCRIBE ── */
.bottom{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ln2)}
.tools-col{border-right:1px solid var(--line);padding:22px 28px 22px 0}
.sub-col{padding:22px 0 22px 28px}
.col-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--t3);padding-bottom:8px;border-bottom:1px solid var(--ln2);margin-bottom:14px}
.tools{display:flex;flex-wrap:wrap;gap:5px}
.tool{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);color:var(--t3);transition:all 0.15s}
.tool:hover{background:var(--bg3);color:var(--text);border-color:var(--ln2)}
.sub-pitch{font-family:'Source Serif 4',serif;font-size:16px;font-style:italic;font-weight:300;line-height:1.45;color:var(--text);margin-bottom:14px}
.sub-pitch em{font-style:normal;color:var(--jot)}
.sub-row{display:flex;gap:0;max-width:400px}
.sub-input{flex:1;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:10px 14px;background:var(--bg3);border:1px solid var(--ln2);border-right:none;color:var(--text);outline:none}
.sub-input::placeholder{color:var(--t3)}
.sub-input:focus{border-color:var(--t2)}
.sub-btn{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;padding:10px 16px;background:var(--jot);color:#0E0E0C;border:none;cursor:pointer;transition:background 0.15s}
.sub-btn:hover{background:#E09A6A}
.sub-note{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--t3);margin-top:8px}

/* ── FOOTER ── */
.site-footer{padding:20px 36px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--ln2)}
.ft-copy{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.08em;color:var(--t3)}
.ft-links{display:flex;gap:16px;list-style:none;flex-wrap:wrap}
.ft-links a{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.08em;color:var(--t3);transition:color 0.15s}
.ft-links a:hover{color:var(--text)}

/* ── ERROR / 404 ── */
.error-page{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:60px 36px}
.error-code{font-family:'Libre Baskerville',serif;font-size:80px;font-weight:700;color:var(--bg4);line-height:1}
.error-title{font-family:'Libre Baskerville',serif;font-size:24px;font-weight:700;color:var(--text)}
.error-desc{font-size:14px;color:var(--t2);max-width:400px;line-height:1.6}
.error-home{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:10px 24px;border:1px solid var(--ln2);color:var(--t3);transition:all 0.15s}
.error-home:hover{border-color:var(--jot);color:var(--jot)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .page,.masthead,.site-footer{padding-left:20px;padding-right:20px}
  .sec-grid,.flash-grid{grid-template-columns:repeat(3,1fr)}
  .sc:nth-child(n+4),.flash-col:nth-child(n+4){display:none}
  .archive-grid{grid-template-columns:repeat(3,1fr)}
  .post-wrap{grid-template-columns:1fr}
  .post-main{border-right:none;padding-right:0}
  .post-aside{border-top:1px solid var(--ln2);padding:24px 0 0}
  .bottom{grid-template-columns:1fr}
  .tools-col{border-right:none;padding-right:0}
  .sub-col{border-top:1px solid var(--ln2);padding:16px 0 0}
}
@media(max-width:720px){
  .sec-grid,.flash-grid{grid-template-columns:repeat(2,1fr)}
  .sc:nth-child(n+3),.flash-col:nth-child(n+3){display:none}
  .archive-grid{grid-template-columns:repeat(2,1fr)}
  .mast-date{display:none}
  .mast-btns .mbtn:not(.sub){display:none}
  .author-header{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:480px){
  .sec-grid,.flash-grid,.archive-grid{grid-template-columns:1fr}
  .sc:nth-child(n){display:block;padding-left:0;padding-right:0;border-right:none;border-bottom:1px solid var(--line)}
  .flash-col:nth-child(n+2){display:none}
  .post-title{font-size:24px}
  .post-body{font-size:15px}
}