:root{
--bg: oklch(0.13 0.025 285);
--bg-2: oklch(0.10 0.02 285);
--ink: oklch(0.95 0.02 80);
--ink-dim: oklch(0.72 0.03 80);
--paper: oklch(0.92 0.045 80);
--paper-ink: oklch(0.18 0.03 60);
--magenta: oklch(0.66 0.28 350);
--magenta-2: oklch(0.55 0.30 355);
--cyan: oklch(0.82 0.16 200);
--acid: oklch(0.88 0.18 130);
--rule: oklch(0.30 0.04 285);
--col-gap: 28px;
--tight: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Space Grotesk", system-ui, sans-serif;overflow-x:clip;}
/* Host-theme cascade override: a later-loading host theme would otherwise
win the cascade. The .pkaffi-context body class — added by body_class only
on this post type — boosts our specificity so we win here without
affecting any other URL on the site. */
body.pkaffi-context{
background:
radial-gradient(1200px 600px at 80% -10%, oklch(0.30 0.18 350 / .35), transparent 60%),
radial-gradient(900px 500px at -10% 30%, oklch(0.30 0.14 200 / .28), transparent 60%),
linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
background-attachment: fixed;
color: var(--ink);
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
}
body.pkaffi-context[data-tiling="on"]{
background-image:
url("../img/bg-monotile.svg"),
radial-gradient(1200px 600px at 80% -10%, oklch(0.30 0.18 350 / .35), transparent 60%),
radial-gradient(900px 500px at -10% 30%, oklch(0.30 0.14 200 / .28), transparent 60%),
linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
background-size: 480px 480px, auto, auto, auto;
background-attachment: fixed, fixed, fixed, fixed;
color: oklch(0.55 0.22 350);
}
/* Single-article: modal-overlay backdrop so the
article-sheet visually centers in a uniform dark frame instead of
floating against the asymmetric body gradient. */
body.pkaffi-context.single-paz_kaffi .article-sheet,
body.single-paz-kaffi .article-sheet{
margin: 40px auto !important;
}
body.pkaffi-context.single-paz_kaffi::before,
body.single-paz-kaffi::before{
content:""; position:fixed; inset:0; z-index:-1;
background: oklch(0.06 0.02 285 / .55);
pointer-events:none;
}
/* Image treatment: pipeline often delivers clean isometric illustrations
on light backgrounds. Darken + saturation-boost + magenta/cyan diagonal
wash so light source assets read as cyberpunk against the dark frame.
Higher specificity than the unscoped image rules so this lands. */
body.pkaffi-context .nm-card-img img,
body.pkaffi-context .nm-hero-vis img,
body.pkaffi-context .art-hero img{
filter: contrast(1.12) saturate(1.3) brightness(0.85);
}
body.pkaffi-context .nm-card-img::after,
body.pkaffi-context .nm-hero-vis::after,
body.pkaffi-context .art-hero::after{
background:
linear-gradient(135deg,
oklch(0.55 0.22 350 / .22) 0%,
transparent 45%,
oklch(0.30 0.20 200 / .15) 100%),
linear-gradient(180deg,
transparent 55%,
oklch(0.10 0.04 285 / .80) 100%);
}
body{
overflow-x:clip;
background:
radial-gradient(1200px 600px at 80% -10%, oklch(0.30 0.18 350 / .35), transparent 60%),
radial-gradient(900px 500px at -10% 30%, oklch(0.30 0.14 200 / .28), transparent 60%),
linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
background-attachment: fixed;
}
/* Scanline + grain overlay (toggleable) */
body[data-scanlines="on"]::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:200;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
mix-blend-mode:multiply;
opacity:.55;
}
/* Aperiodic-tile-inspired background substrate (decorative).
Sits behind everything, low opacity, magenta-tinted via currentColor. */
body[data-tiling="on"]{
background-image:
url("../img/bg-monotile.svg"),
radial-gradient(1200px 600px at 80% -10%, oklch(0.30 0.18 350 / .35), transparent 60%),
radial-gradient(900px 500px at -10% 30%, oklch(0.30 0.14 200 / .28), transparent 60%),
linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
background-size: 480px 480px, auto, auto, auto;
background-attachment: fixed, fixed, fixed, fixed;
color: oklch(0.55 0.22 350);
}
body[data-tiling="on"]::after{
/* Re-apply original grain — currentColor leak into the SVG must not bleed text. */
}
body::after{
content:""; position:fixed; inset:0; pointer-events:none; z-index:201;
background-image:url("data:image/svg+xml;utf8,");
opacity:.18;
mix-blend-mode:overlay;
}
/* === MASTHEAD === */
.top-strip{
border-bottom:1px solid var(--rule);
font-family:"JetBrains Mono", monospace;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--ink-dim);
padding:9px 24px;
display:flex; gap:24px; align-items:center;
background:rgba(0,0,0,.35);
backdrop-filter:blur(6px);
position:sticky; top:0; z-index:50;
}
.top-strip .live{
display:inline-flex; align-items:center; gap:8px; color:var(--magenta); font-weight:700;
}
.top-strip .live .dot{
width:8px;height:8px;border-radius:50%;background:var(--magenta);
box-shadow:0 0 0 0 oklch(0.66 0.28 350 / .7);
animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 oklch(0.66 0.28 350 / .7)}
70%{box-shadow:0 0 0 12px oklch(0.66 0.28 350 / 0)}
100%{box-shadow:0 0 0 0 oklch(0.66 0.28 350 / 0)}
}
.top-strip .spacer{flex:1}
.top-strip .links{display:flex;gap:18px}
.top-strip .links a{color:var(--ink-dim);text-decoration:none}
.top-strip .links a:hover{color:var(--cyan)}
/* Ticker */
.ticker{
border-bottom:1px solid var(--rule);
background:linear-gradient(90deg, oklch(0.20 0.10 350 / .6), oklch(0.18 0.10 200 / .5));
overflow:hidden;
position:relative;
}
.ticker .track{
display:flex; gap:48px;
white-space:nowrap;
font-family:"JetBrains Mono", monospace;
font-size:13px;
padding:10px 0;
animation:scroll-x 80s linear infinite;
color:var(--ink);
}
.ticker .track span b{color:var(--magenta);font-weight:700}
.ticker .track span i{color:var(--cyan);font-style:normal}
.ticker .track .up{color:var(--acid)}
.ticker .track .dn{color:var(--magenta)}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Masthead */
.masthead{
display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
gap:24px; padding:34px 24px 18px;
border-bottom:2px solid var(--magenta);
position:relative;
}
.masthead::before{
content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--cyan);
opacity:.6;
}
.masthead .meta-l, .masthead .meta-r{
font-family:"JetBrains Mono", monospace;
font-size:11px; line-height:1.7; color:var(--ink-dim); letter-spacing:.08em; text-transform:uppercase;
}
.masthead .meta-r{text-align:right}
.masthead .meta-l b, .masthead .meta-r b{color:var(--ink); font-weight:700}
.masthead .badge{
display:inline-block; padding:3px 7px; border:1px solid var(--magenta); color:var(--magenta);
margin-right:6px;
}
.masthead .nameplate{
text-align:center;
}
.masthead .eyebrow{
font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--cyan);
letter-spacing:.4em; text-transform:uppercase; margin-bottom:8px;
}
.masthead h1.brand{
font-family:"Major Mono Display", "JetBrains Mono", monospace;
font-size:clamp(64px, 12vw, 160px);
line-height:.85;
margin:0; letter-spacing:-0.02em;
text-transform:uppercase;
color:var(--ink);
text-shadow:
3px 0 0 var(--magenta),
-3px 0 0 var(--cyan);
position:relative;
cursor:default;
}
.masthead h1.brand a{ color:inherit; text-decoration:none; }
.masthead h1.brand .k{ color:var(--magenta); }
.masthead h1.brand:hover{ animation: glitch .35s steps(2) infinite; }
@keyframes glitch{
0%{ text-shadow: 3px 0 0 var(--magenta), -3px 0 0 var(--cyan); transform:translate(0,0)}
25%{ text-shadow: -4px 1px 0 var(--magenta), 4px -1px 0 var(--cyan); transform:translate(1px,-1px)}
50%{ text-shadow: 3px -1px 0 var(--cyan), -3px 1px 0 var(--magenta); transform:translate(-1px,1px)}
75%{ text-shadow: 5px 0 0 var(--magenta), -5px 0 0 var(--cyan); transform:translate(2px,0)}
}
.masthead .tagline{
font-family:"JetBrains Mono", monospace;
font-size:13px; letter-spacing:.5em; text-transform:uppercase;
color:var(--ink-dim); margin-top:14px;
}
.masthead .tagline span{color:var(--magenta)}
/* === Section nav === */
.secnav{
display:flex; gap:0; border-bottom:1px solid var(--rule);
font-family:"JetBrains Mono", monospace; font-size:12px;
text-transform:uppercase; letter-spacing:.18em;
overflow-x:auto;
}
.secnav button{
background:transparent; border:none; color:var(--ink-dim);
padding:14px 18px; cursor:pointer; white-space:nowrap;
border-right:1px solid var(--rule);
transition:all .15s;
font:inherit; letter-spacing:inherit; text-transform:inherit;
}
.secnav button:hover{ color:var(--cyan); background:oklch(0.20 0.06 200 / .25) }
.secnav button.active{
color:var(--bg); background:var(--magenta); font-weight:700;
}
.secnav .grow{ flex:1; }
.secnav .clock{
padding:14px 18px; color:var(--cyan); font-variant-numeric:tabular-nums;
/* Date sits on the LEFT, keeps its own column, and never folds: nowrap +
no-shrink stop the "[ … UTC // SEKTOR 7 ]" string wrapping into extra
rows. Sticky-left pins it in place while the pillar row scrolls.
Translucent + blur (the .top-strip recipe) so the pinned cell blends
with the body gradient instead of cutting a flat dark hole in it. */
flex:none; white-space:nowrap;
position:sticky; left:0; z-index:1;
background:oklch(0.13 0.025 285 / .88); backdrop-filter:blur(6px);
border-right:1px solid var(--rule);
}
@media (max-width:640px){
/* On phones the ~300px clock would cover most of the scrollport if it
stayed pinned — let it scroll with the row instead. */
.secnav .clock{ position:static; }
}
/* === Layout === */
.page{
max-width:1480px; margin:0 auto;
}
main.grid{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:0;
padding:0;
position:relative;
}
main.grid > *{ padding:24px; border-right:1px solid var(--rule); }
main.grid > *:last-child{ border-right:none; }
/* HERO */
.hero{
grid-column: 1 / -1;
display:grid;
grid-template-columns: 1.4fr 1fr;
grid-template-areas:
"top vis"
"lead vis";
gap:0;
padding:0 !important;
border-bottom:1px solid var(--rule);
}
.hero .lead-top{
grid-area: top;
padding:36px 32px 24px;
border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);
background:
radial-gradient(800px 320px at 12% 20%, oklch(0.40 0.20 350 / .12), transparent),
transparent;
}
.hero .lead-top .deck{ max-width:none; margin-bottom:0 }
.hero .lead{
grid-area: lead;
padding:24px 28px 28px;
border-right:1px solid var(--rule);
display:flex; flex-direction:column; justify-content:flex-end;
}
.hero .vis{ grid-area: vis }
.hero .kicker{
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.3em; text-transform:uppercase;
color:var(--magenta); margin-bottom:14px;
display:flex; align-items:center; gap:10px;
}
.hero .kicker::before{
content:"▮"; color:var(--cyan);
}
.hero h2.headline{
font-family:"DM Serif Display","Space Grotesk",serif;
font-size:clamp(40px, 4.6vw, 72px); line-height:.98;
letter-spacing:-0.018em; font-weight:400;
margin:0 0 18px;
color:var(--ink);
text-wrap:balance;
max-width:22ch;
}
.hero h2.headline em{
font-style:normal; color:var(--magenta);
background:linear-gradient(180deg, transparent 60%, oklch(0.66 0.28 350 / .25) 60%);
}
.hero .deck{
font-family:"DM Serif Display","Space Grotesk",serif;
font-size:clamp(16px, 1.15vw, 19px); line-height:1.45;
color:var(--ink-dim); font-weight:400; font-style:italic;
max-width:72ch; margin:0;
padding-left:14px; border-left:2px solid var(--magenta);
text-wrap:pretty;
}
.hero .byline{
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
border-top:1px solid var(--rule); padding-top:14px; margin-top:auto;
display:flex; gap:14px; align-items:center;
}
.hero .byline .who{color:var(--ink)}
.hero .vis{
position:relative; min-height:380px; overflow:hidden;
background: #0a0a14;
}
.hero .vis img{
width:100%; height:100%; object-fit:cover; display:block;
filter:contrast(1.05) saturate(1.1);
}
.hero .vis::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 50%, oklch(0.10 0.04 285 / .85));
pointer-events:none;
}
.hero .vis .caption{
position:absolute; left:0; right:0; bottom:0; padding:18px 22px;
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
z-index:2;
display:flex; justify-content:space-between; gap:12px;
}
.hero .vis .frame-tag{
position:absolute; top:14px; left:14px; z-index:3;
background:var(--magenta); color:#fff;
padding:5px 9px; font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.2em; font-weight:700;
}
.hero .vis .corner{
position:absolute; width:22px; height:22px; border:2px solid var(--cyan);
z-index:3;
}
.hero .vis .corner.tl{top:8px;left:8px;border-right:none;border-bottom:none}
.hero .vis .corner.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.hero .vis .corner.bl{bottom:8px;left:8px;border-right:none;border-top:none}
.hero .vis .corner.br{bottom:8px;right:8px;border-left:none;border-top:none}
/* Story columns */
.col-story h3{
font-family:"DM Serif Display", "Space Grotesk", serif;
font-size:28px; line-height:1.1; letter-spacing:-0.01em;
margin:0 0 10px;
text-wrap:balance;
}
.col-story h3 a{color:var(--ink); text-decoration:none}
.col-story h3 a:hover{color:var(--magenta)}
.col-story .dek{font-size:14px; line-height:1.55; color:var(--ink-dim); margin:0 0 12px}
.col-story .meta{
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
display:flex; gap:10px; align-items:center;
border-top:1px dashed var(--rule); padding-top:10px;
}
.col-story .meta .sep{color:var(--rule)}
.col-story .img{
aspect-ratio: 16/10; overflow:hidden; margin-bottom:14px;
position:relative; background:#0a0a14;
}
.col-story .img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s; filter:contrast(1.05) saturate(1.1)}
.col-story:hover .img img{ transform:scale(1.04) }
.col-story .img::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 60%, oklch(0.10 0.04 285 / .55));
}
.col-story .tag{
display:inline-block; font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.22em; text-transform:uppercase;
color:var(--magenta); margin-bottom:6px;
}
.stack > * + *{ margin-top:24px; padding-top:24px; border-top:1px solid var(--rule) }
/* === Brutalist data row === */
.data-row{
grid-column:1/-1;
display:grid; grid-template-columns: repeat(4, 1fr);
border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
background: oklch(0.10 0.04 285 / .6);
padding:0 !important;
}
.data-row .stat{
padding:22px 24px; border-right:1px solid var(--rule);
font-family:"JetBrains Mono", monospace;
}
.data-row .stat:last-child{border-right:none}
.data-row .stat .label{
font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim);
margin-bottom:8px;
}
.data-row .stat .num{
font-family:"Archivo Black", sans-serif;
font-size:38px; color:var(--ink); line-height:1;
}
.data-row .stat .delta{
font-size:12px; margin-top:8px;
}
.data-row .stat .delta.up{color:var(--acid)}
.data-row .stat .delta.dn{color:var(--magenta)}
/* === Feature: dispatch === */
.dispatch{
grid-column:1/-1;
display:grid; grid-template-columns: 1.1fr 1fr;
gap:0; padding:0 !important; border-bottom:1px solid var(--rule);
}
.dispatch .vis{position:relative; min-height:480px; overflow:hidden}
.dispatch .vis img{width:100%;height:100%;object-fit:cover;display:block; filter:contrast(1.05) saturate(1.1)}
.dispatch .vis::after{
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, oklch(0.10 0.04 285 / .0), oklch(0.10 0.04 285 / .85));
}
.dispatch .body{padding:34px 28px; display:flex; flex-direction:column; gap:14px}
.dispatch .body .kicker{
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
}
.dispatch .body h2{
font-family:"DM Serif Display", serif;
font-size:clamp(30px, 3.4vw, 52px); line-height:1.05; margin:0;
color:var(--ink); text-wrap:balance;
}
.dispatch .body p{ color:var(--ink-dim); font-size:16px; line-height:1.55; margin:0; max-width:60ch }
.dispatch .pulls{
display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px;
}
.dispatch .pull{
border:1px solid var(--rule); padding:14px;
font-family:"JetBrains Mono", monospace;
}
.dispatch .pull .l{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--magenta); margin-bottom:6px }
.dispatch .pull .v{ font-family:"Archivo Black", sans-serif; font-size:22px; color:var(--ink); line-height:1.05 }
/* === Audio module === */
.audio{
grid-column:1/-1;
display:grid; grid-template-columns: 280px 1fr 280px; gap:0;
border-bottom:1px solid var(--rule);
background:
linear-gradient(90deg, oklch(0.20 0.16 350 / .35), oklch(0.20 0.10 200 / .15)),
var(--bg-2);
padding:0 !important;
}
.audio .cover{ position:relative; overflow:hidden }
.audio .cover img{width:100%;height:100%;object-fit:cover;display:block}
.audio .cover::after{
content:""; position:absolute; inset:0;
box-shadow: inset 0 0 60px oklch(0.20 0.20 350 / .8);
mix-blend-mode:multiply;
}
.audio .body{ padding:28px 28px; display:flex; flex-direction:column; justify-content:center; gap:14px}
.audio .body .kicker{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--magenta)}
.audio .body h3{
font-family:"Archivo Black", sans-serif; font-size:36px; line-height:1; margin:0;
color:var(--ink); letter-spacing:-0.01em;
}
.audio .body p{ color:var(--ink-dim); margin:0; font-size:14px; max-width:54ch }
.audio .controls{
display:flex; align-items:center; gap:14px; margin-top:6px;
}
.audio .play{
width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
background:var(--magenta); color:#fff;
display:grid; place-items:center;
box-shadow: 0 0 0 1px oklch(0.10 0.04 285), 0 0 24px oklch(0.66 0.28 350 / .6);
transition:transform .15s;
}
.audio .play:hover{ transform:scale(1.06) }
.audio .play svg{ width:20px; height:20px; fill:currentColor }
.audio .progress{
flex:1; height:4px; background:oklch(0.30 0.04 285); position:relative; overflow:hidden;
}
.audio .progress .bar{
position:absolute; left:0; top:0; bottom:0; width:32%;
background:linear-gradient(90deg, var(--magenta), var(--cyan));
}
.audio .time{
font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--ink-dim);
letter-spacing:.1em;
}
.audio .vu{
display:flex; align-items:flex-end; gap:3px; padding:24px;
border-left:1px solid var(--rule);
}
.audio .vu i{ display:block; width:6px; background:var(--cyan); animation:vu 1.2s ease-in-out infinite}
.audio .vu i:nth-child(1){animation-delay:.0s; height:30%}
.audio .vu i:nth-child(2){animation-delay:.1s; height:55%}
.audio .vu i:nth-child(3){animation-delay:.2s; height:75%; background:var(--magenta)}
.audio .vu i:nth-child(4){animation-delay:.05s; height:40%}
.audio .vu i:nth-child(5){animation-delay:.18s; height:90%; background:var(--magenta)}
.audio .vu i:nth-child(6){animation-delay:.12s; height:60%}
.audio .vu i:nth-child(7){animation-delay:.22s; height:35%}
.audio .vu i:nth-child(8){animation-delay:.08s; height:78%; background:var(--magenta)}
.audio .vu i:nth-child(9){animation-delay:.16s; height:45%}
.audio .vu i:nth-child(10){animation-delay:.04s; height:65%}
.audio.paused .vu i{ animation-play-state:paused }
@keyframes vu{
0%,100%{transform:scaleY(.4)}
50%{transform:scaleY(1)}
}
.audio .vu i{transform-origin:bottom}
/* === Print spread (newsprint inversion) === */
.spread{
grid-column:1/-1;
background: var(--paper);
color: var(--paper-ink);
border-bottom:1px solid var(--rule);
padding:0 !important;
}
.spread .inner{
padding:38px 32px 44px;
display:grid; grid-template-columns: 1fr 1.3fr 1fr; gap:32px;
position:relative;
}
.spread::before{
content:"PRINT EDITION · NEWSPRINT MIRROR";
display:block; padding:8px 24px; border-bottom:1px solid var(--paper-ink);
font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.3em;
background:var(--paper-ink); color:var(--paper);
}
.spread h2{
font-family:"DM Serif Display", serif; font-size:42px; line-height:1; margin:0 0 12px;
text-wrap:balance;
}
.spread h4{
font-family:"DM Serif Display", serif; font-size:22px; line-height:1.1; margin:0 0 8px;
text-wrap:balance;
}
.spread p{ font-size:14px; line-height:1.6; margin:0 0 10px;
font-family:"Space Grotesk", sans-serif; color:oklch(0.25 0.03 60);
}
.spread p.lead::first-letter{
font-family:"DM Serif Display", serif; font-size:64px; float:left; line-height:.85; padding:6px 8px 0 0;
color:var(--magenta-2);
}
.spread .col{ border-left:1px dashed oklch(0.55 0.04 60); padding-left:16px}
.spread .col:first-child{border-left:none; padding-left:0}
.spread .kicker{
font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.22em;
text-transform:uppercase; color:var(--magenta-2); margin-bottom:8px;
}
.spread .pic{
aspect-ratio:4/3; overflow:hidden; margin:8px 0 12px;
filter:grayscale(.85) contrast(1.1);
border:1px solid oklch(0.40 0.03 60);
}
.spread .pic img{width:100%;height:100%;object-fit:cover;display:block}
.spread .credit{
font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.18em;
text-transform:uppercase; color:oklch(0.40 0.04 60);
}
/* === Quote bar === */
.quotebar{
grid-column:1/-1;
padding:46px 32px !important;
border-bottom:1px solid var(--rule);
background: linear-gradient(90deg, oklch(0.18 0.10 200 / .35), transparent);
display:grid; grid-template-columns: 80px 1fr 200px; gap:24px; align-items:center;
}
.quotebar .mark{
font-family:"DM Serif Display", serif; font-size:120px; line-height:.6; color:var(--magenta);
}
.quotebar blockquote{
margin:0; font-family:"DM Serif Display", serif;
font-size:clamp(24px, 2.6vw, 40px); line-height:1.18;
color:var(--ink); text-wrap:balance;
}
.quotebar .who{
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
text-align:right;
}
.quotebar .who b{display:block; color:var(--ink); font-size:13px; margin-bottom:4px}
/* === Cards grid === */
.cards{
grid-column:1/-1;
display:grid; grid-template-columns: repeat(4, 1fr);
gap:0; padding:0 !important; border-bottom:1px solid var(--rule);
}
.cards .card{
border-right:1px solid var(--rule); padding:22px 22px 26px;
display:flex; flex-direction:column; gap:10px;
transition:background .2s;
cursor:pointer; position:relative;
overflow:hidden;
}
.cards .card:last-child{border-right:none}
.cards .card:hover{ background:oklch(0.20 0.10 350 / .15) }
.cards .card .num{
font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--cyan);
letter-spacing:.2em;
}
.cards .card h4{
font-family:"DM Serif Display", serif; font-size:24px; line-height:1.1; margin:0;
color:var(--ink); text-wrap:balance;
}
.cards .card p{ font-size:13px; line-height:1.55; color:var(--ink-dim); margin:0 }
.cards .card .meta{
font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:var(--magenta); margin-top:auto;
}
/* === Markets / weather panel === */
.panel{
grid-column:1/-1;
display:grid; grid-template-columns: 1fr 1fr 1fr;
gap:0; padding:0 !important; border-bottom:1px solid var(--rule);
}
.panel .pane{ padding:24px; border-right:1px solid var(--rule); }
.panel .pane:last-child{ border-right:none }
.panel h5{
font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.3em;
text-transform:uppercase; color:var(--magenta); margin:0 0 14px;
display:flex; align-items:center; gap:8px;
}
.panel h5::before{ content:"◆"; color:var(--cyan) }
.panel .row{
display:flex; justify-content:space-between; align-items:baseline;
padding:10px 0; border-top:1px dashed var(--rule);
font-family:"JetBrains Mono", monospace; font-size:13px;
}
.panel .row:first-of-type{border-top:none}
.panel .row .name{color:var(--ink)}
.panel .row .val{color:var(--ink); font-weight:700}
.panel .row .ch{font-size:11px; margin-left:8px}
.panel .row .ch.up{color:var(--acid)}
.panel .row .ch.dn{color:var(--magenta)}
.panel .weather{
display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.panel .weather .city{
border:1px solid var(--rule); padding:12px;
font-family:"JetBrains Mono", monospace;
}
.panel .weather .city .n{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.panel .weather .city .t{font-family:"Archivo Black", sans-serif; font-size:30px; color:var(--ink); margin:4px 0}
.panel .weather .city .d{font-size:11px; color:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase}
/* === Footer === */
footer.foot{
border-top:1px solid var(--rule);
padding:34px 24px;
display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px;
background:oklch(0.08 0.02 285);
}
footer.foot .brand-mini{
font-family:"Major Mono Display", monospace; font-size:36px;
color:var(--ink);
text-shadow: 2px 0 0 var(--magenta), -2px 0 0 var(--cyan);
}
/* The wordmark is now a home link — keep it visually identical (inherit the
glitch-shadowed type), with a cyan hover/focus as the only affordance cue. */
footer.foot .brand-mini a{ color:inherit; text-decoration:none; }
footer.foot .brand-mini a:hover,
footer.foot .brand-mini a:focus-visible{ color:var(--cyan); outline:none; }
/* Back-to-top — full-width, centered beneath the signoff. */
footer.foot .foot-totop{
grid-column:1/-1; justify-self:center; margin-top:16px;
font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-dim); text-decoration:none;
}
footer.foot .foot-totop:hover,
footer.foot .foot-totop:focus-visible{ color:var(--cyan); }
/* Smooth jump only when the reader hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
footer.foot p{font-size:13px; color:var(--ink-dim); line-height:1.6}
footer.foot h6{
font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.3em;
text-transform:uppercase; color:var(--magenta); margin:0 0 12px;
}
footer.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
footer.foot a{color:var(--ink-dim); text-decoration:none; font-size:13px}
footer.foot a:hover{color:var(--cyan)}
footer.foot .signoff{
grid-column:1/-1; border-top:1px solid var(--rule); padding-top:18px; margin-top:6px;
font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.2em;
text-transform:uppercase; color:var(--ink-dim);
display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
footer.foot .signoff b{color:var(--magenta)}
/* Newsletter */
.nl{
grid-column:1/-1;
padding:40px 32px !important;
border-bottom:1px solid var(--rule);
background:
radial-gradient(600px 300px at 80% 50%, oklch(0.40 0.20 350 / .35), transparent),
var(--bg-2);
display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
}
.nl h3{
font-family:"Archivo Black", sans-serif; font-size:clamp(28px, 3vw, 44px); line-height:1; margin:0 0 10px;
color:var(--ink); letter-spacing:-0.01em;
}
.nl h3 span{color:var(--magenta)}
.nl p{color:var(--ink-dim); margin:0; font-size:15px; line-height:1.5}
.nl form{
display:flex; gap:0; border:2px solid var(--magenta);
background:oklch(0.10 0.04 285);
}
.nl input{
flex:1; padding:18px 18px; background:transparent; border:none; color:var(--ink);
font-family:"JetBrains Mono", monospace; font-size:14px; letter-spacing:.06em;
outline:none;
}
.nl input::placeholder{color:var(--ink-dim)}
.nl button{
border:none; padding:0 24px; background:var(--magenta); color:#fff; cursor:pointer;
font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.2em;
text-transform:uppercase; font-weight:700;
transition:background .15s;
}
.nl button:hover{background:var(--cyan); color:var(--bg)}
.nl .legal{
font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink-dim); margin-top:12px;
}
/* Responsive */
@media (max-width: 1100px){
main.grid{grid-template-columns:1fr 1fr}
.hero{grid-template-columns:1fr; grid-template-areas:"top" "lead" "vis"}
.hero .lead{border-right:none; border-bottom:1px solid var(--rule)}
.data-row{grid-template-columns:1fr 1fr}
.data-row .stat:nth-child(2){border-right:none}
.data-row .stat:nth-child(1), .data-row .stat:nth-child(2){border-bottom:1px solid var(--rule)}
.dispatch{grid-template-columns:1fr}
.audio{grid-template-columns:1fr}
.audio .vu{display:none}
.cards{grid-template-columns:1fr 1fr}
.panel{grid-template-columns:1fr}
.panel .pane{border-right:none; border-bottom:1px solid var(--rule)}
.spread .inner{grid-template-columns:1fr}
.nl{grid-template-columns:1fr}
footer.foot{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
main.grid{grid-template-columns:1fr}
main.grid > *{border-right:none; border-bottom:1px solid var(--rule)}
.cards{grid-template-columns:1fr}
.quotebar{grid-template-columns:1fr; text-align:left}
.quotebar .who{text-align:left}
/* Mobile: stack the 3-col masthead and shrink the brand so the nameplate
can never exceed the viewport (it was clipping "PAZ KAFFI" off the right
edge and dragging the whole page into a horizontal scroll). */
.masthead{ grid-template-columns:1fr; gap:12px; padding:20px 16px 16px; text-align:center; }
.masthead .meta-l, .masthead .meta-r{ text-align:center; line-height:1.6; }
.masthead h1.brand{ font-size:clamp(38px, 15vw, 72px); }
.masthead .tagline{ letter-spacing:.3em; }
}
/* === ARTICLE OVERLAY === */
.article-overlay{
position:fixed; inset:0; z-index:300;
background: oklch(0.06 0.02 285 / .92);
backdrop-filter: blur(8px);
overflow-y:auto;
padding:40px 16px;
animation: fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.article-sheet{
max-width:1100px; margin:0 auto;
background: var(--bg-2);
border:1px solid var(--magenta);
box-shadow: 0 0 60px oklch(0.66 0.28 350 / .25), 0 0 0 1px var(--rule);
position:relative;
animation: slideUp .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUp{from{transform:translateY(20px); opacity:0}to{transform:translateY(0); opacity:1}}
.art-close{
position:absolute; top:16px; right:16px; z-index:10;
background:var(--bg); color:var(--ink);
border:1px solid var(--rule); cursor:pointer;
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.18em; padding:8px 12px;
display:flex; gap:10px; align-items:center;
transition:all .15s;
}
.art-close:hover{ border-color:var(--magenta); color:var(--magenta) }
.art-close .esc{ color:var(--cyan); border:1px solid var(--cyan); padding:2px 5px; font-size:9px }
.art-close .x{ font-size:13px }
/* per-article language pill */
.art-lang{ position:absolute; top:16px; left:16px; z-index:10; }
.lang-toggle{
display:inline-flex; align-items:center; gap:0;
background:var(--bg); border:1px solid var(--ink-3);
font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:.06em;
padding:0; border-radius:2px; overflow:hidden;
}
.lang-toggle button{
background:transparent; color:var(--ink-2); border:0; cursor:pointer;
padding:6px 10px; font:inherit; letter-spacing:.08em;
transition:all .12s;
}
.lang-toggle button.on{ background:var(--magenta); color:var(--bg); }
.lang-toggle button:hover:not(.on){ color:var(--ink); background:var(--bg-2); }
.lang-toggle .sep{ color:var(--ink-3); padding:0 2px; align-self:center; font-size:10px; }
.lang-toggle.s-sm{ font-size:10px }
.lang-toggle.s-sm button{ padding:4px 8px }
.lang-toggle.s-md{ font-size:12px }
.lang-toggle.s-md button{ padding:6px 12px }
/* top-strip toggle alignment */
.top-strip .lang-toggle{ margin-right:14px; }
.art-hero{
position:relative; aspect-ratio: 21/9; overflow:hidden;
border-bottom:1px solid var(--rule);
}
.art-hero img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) saturate(1.15) }
.art-hero::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 50%, oklch(0.10 0.04 285 / .9));
}
/* Wide-banner exception: full composition on black (bars top+bottom). */
.art-hero img.pk-letterbox,
.nm-hero-vis img.pk-letterbox,
.nm-card-img img.pk-letterbox{
object-fit: contain;
background: #000;
}
.art-corner{ position:absolute; width:28px; height:28px; border:2px solid var(--cyan); z-index:3 }
.art-corner.tl{top:12px;left:12px;border-right:none;border-bottom:none}
.art-corner.tr{top:12px;right:12px;border-left:none;border-bottom:none}
.art-corner.bl{bottom:12px;left:12px;border-right:none;border-top:none}
.art-corner.br{bottom:12px;right:12px;border-left:none;border-top:none}
.art-tag{
position:absolute; bottom:18px; left:18px; z-index:4;
background:var(--magenta); color:#fff;
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.22em; padding:6px 10px; font-weight:700;
}
.art-frame{
position:absolute; bottom:18px; right:18px; z-index:4;
color:var(--cyan);
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.18em;
}
.art-body{ padding:42px 56px 56px; }
.art-meta{
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
.art-meta .sep{color:var(--rule)}
.art-title{
font-family:"DM Serif Display", serif;
font-size:clamp(36px, 5vw, 64px); line-height:1.02;
margin:0 0 18px; letter-spacing:-0.01em;
color:var(--ink); text-wrap:balance;
}
.art-deck{
font-size:21px; line-height:1.45; color:var(--ink-dim);
max-width:64ch; margin:0 0 28px; text-wrap:pretty;
border-left:3px solid var(--magenta); padding-left:18px;
}
.art-byline{
border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
padding:14px 0; margin-bottom:28px;
display:flex; justify-content:space-between; gap:18px;
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.16em; text-transform:uppercase;
}
.art-byline .who{color:var(--ink)}
.art-byline .dt{color:var(--ink-dim)}
.art-cols{
column-count:2; column-gap:36px;
font-size:16px; line-height:1.7; color:var(--ink);
}
.art-cols p{ margin:0 0 16px; text-wrap:pretty }
.art-cols p.first::first-letter{
font-family:"DM Serif Display", serif;
font-size:72px; float:left; line-height:.85; padding:6px 10px 0 0;
color:var(--magenta);
}
.art-pull{
break-inside:avoid;
border-top:2px solid var(--magenta); border-bottom:2px solid var(--magenta);
padding:18px 0; margin:14px 0;
font-family:"DM Serif Display", serif;
font-size:24px; line-height:1.2; color:var(--ink);
position:relative;
}
.art-pull .pmark{
color:var(--magenta); font-size:48px; line-height:0; vertical-align:-12px; margin-right:4px;
}
.art-foot{
margin-top:40px; padding-top:24px;
border-top:1px solid var(--rule);
display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.art-foot-l{
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px;
}
.art-foot-v{
font-family:"JetBrains Mono", monospace; font-size:13px;
color:var(--magenta); letter-spacing:.08em;
}
@media(max-width:900px){
.art-body{padding:28px 22px}
.art-cols{column-count:1}
.art-foot{grid-template-columns:1fr 1fr}
}
.hud-corner{position:fixed; width:24px; height:24px; border:2px solid var(--cyan); pointer-events:none; z-index:30; opacity:.55}
.hud-corner.tl{top:48px; left:8px; border-right:none; border-bottom:none}
.hud-corner.tr{top:48px; right:8px; border-left:none; border-bottom:none}
.hud-corner.bl{bottom:8px; left:8px; border-right:none; border-top:none}
.hud-corner.br{bottom:8px; right:8px; border-left:none; border-top:none}
/* Tweak panel host requires this hook for our scanline toggle */
body[data-mode="acid"]{
--magenta: oklch(0.85 0.22 130);
--magenta-2: oklch(0.78 0.22 130);
}
body[data-mode="ice"]{
--magenta: oklch(0.78 0.18 220);
--magenta-2: oklch(0.62 0.20 235);
--cyan: oklch(0.85 0.16 280);
}
body[data-mode="blood"]{
--magenta: oklch(0.58 0.25 25);
--magenta-2: oklch(0.50 0.25 25);
--cyan: oklch(0.78 0.13 60);
}
/* =========================================================================
NEWS MATRIX — rolling-week layout
========================================================================= */
.news-matrix{
grid-column:1/-1;
padding:0 !important;
border-bottom:1px solid var(--rule);
display:flex; flex-direction:column;
}
/* ---- Filter strip ---------------------------------------------------- */
.nm-filter{
border-bottom:1px solid var(--rule);
background: oklch(0.10 0.04 285 / .55);
padding:14px 24px;
display:flex; flex-direction:column; gap:10px;
position:relative; z-index:5;
}
.nm-filter-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nm-search{
flex:1; min-width:240px;
padding:10px 14px; background:oklch(0.08 0.02 285);
border:1px solid var(--rule); color:var(--ink);
font-family:"JetBrains Mono", monospace; font-size:13px; letter-spacing:.04em;
outline:none;
}
.nm-search:focus{ border-color:var(--magenta); box-shadow:0 0 0 1px var(--magenta) }
.nm-search::placeholder{ color:var(--ink-dim); letter-spacing:.06em }
.nm-clear{
background:transparent; color:var(--magenta);
border:1px solid var(--magenta); padding:8px 12px;
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
}
.nm-clear:hover{ background:var(--magenta); color:var(--bg) }
.nm-chips{ gap:6px; }
.nm-chip-label{
font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.22em;
text-transform:uppercase; color:var(--cyan); margin-right:6px; min-width:60px;
}
.nm-chip{
background:transparent; color:var(--ink-dim);
border:1px solid var(--rule); padding:4px 10px;
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
transition: all .12s;
}
.nm-chip:hover{ color:var(--ink); border-color:var(--cyan) }
.nm-chip.on{
background:var(--magenta); color:var(--bg); border-color:var(--magenta);
font-weight:700;
}
/* ---- Today row: hero on top (full width), supporting stories underneath
The hero gets the whole stage; today's other two articles sit below as a
2-up row, clearly subordinate. Newspaper-classical hierarchy. */
.nm-today-row{
display:flex;
flex-direction:column;
border-bottom:1px solid var(--rule);
}
.nm-today-hero{
border-right:none;
border-bottom:1px solid var(--rule);
}
.nm-today-side{
display:grid;
grid-template-columns: 1fr 1fr;
}
.nm-today-side > .nm-card{
border-right:1px solid var(--rule);
border-bottom:none;
}
.nm-today-side > .nm-card:last-child{ border-right:none }
.nm-empty-side{
grid-column:1/-1;
padding:40px;
display:grid; place-items:center;
color:var(--ink-dim); font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.22em;
}
/* ---- Hero card · big newspaper-style lead -----------------------------
Now full-width with body on the LEFT (where the eye lands) and image on
the RIGHT (visual weight). The image is taller (no fixed aspect ratio —
it fills the column). At narrow widths it stacks: image on top, body below. */
.nm-hero{
display:grid;
grid-template-columns: 1fr 1.4fr;
cursor:pointer;
background: oklch(0.12 0.04 285);
transition: background .15s;
min-height: 520px;
}
.nm-hero:hover{ background: oklch(0.16 0.06 285) }
.nm-hero-empty{
display:grid; place-items:center;
color:var(--ink-dim); font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.22em;
min-height:240px;
}
.nm-hero-vis{
position:relative; overflow:hidden;
background:#0a0a14;
order:2; /* image on the right */
}
.nm-hero-vis img{
width:100%; height:100%; object-fit:cover; display:block;
filter:contrast(1.05) saturate(1.1);
transition: transform .6s;
}
.nm-hero:hover .nm-hero-vis img{ transform: scale(1.03) }
.nm-hero-vis::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 50%, oklch(0.10 0.04 285 / .9));
pointer-events:none;
}
.nm-hero-tag{
position:absolute; top:14px; left:14px; z-index:3;
background:var(--magenta); color:#fff;
padding:6px 10px; font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.22em; font-weight:700;
}
.nm-hero-pin{
position:absolute; top:14px; right:14px; z-index:3;
background: var(--cyan); color:var(--bg);
padding:6px 10px; font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.22em; font-weight:700;
}
.nm-corner{ position:absolute; width:22px; height:22px; border:2px solid var(--cyan); z-index:3 }
.nm-corner.tl{top:8px;left:8px;border-right:none;border-bottom:none}
.nm-corner.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.nm-corner.bl{bottom:8px;left:8px;border-right:none;border-top:none}
.nm-corner.br{bottom:8px;right:8px;border-left:none;border-top:none}
.nm-hero-body{
padding:42px 36px 38px;
display:flex; flex-direction:column; gap:14px;
order:1; /* body on the left */
justify-content:center;
}
.nm-hero-kicker{
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.3em; text-transform:uppercase;
color:var(--magenta);
}
.nm-hero-title{
font-family:"DM Serif Display","Space Grotesk",serif;
font-size:clamp(40px, 4.4vw, 68px); line-height:1.0;
letter-spacing:-0.018em; font-weight:400;
margin:0; color:var(--ink); text-wrap:balance; max-width:18ch;
}
.nm-hero-dek{
font-family:"DM Serif Display", serif;
font-size:clamp(15px, 1.05vw, 18px); line-height:1.45;
color:var(--ink-dim); font-style:italic; margin:0;
padding-left:12px; border-left:2px solid var(--magenta);
text-wrap:pretty; max-width:64ch;
}
.nm-hero-byline{
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
border-top:1px solid var(--rule); padding-top:10px; margin-top:6px;
display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.nm-rating{
margin-left:auto; color:var(--magenta); letter-spacing:.1em;
}
/* ---- Time-machine strip (jump to past months) ----------------------- */
.nm-timemachine{
border-bottom:1px solid var(--rule);
background: oklch(0.07 0.02 285);
padding:10px 16px 10px 22px;
display:flex; align-items:center; gap:14px;
overflow:hidden;
}
.nm-tm-label{
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.32em; text-transform:uppercase; color:var(--magenta);
font-weight:700; white-space:nowrap; flex-shrink:0;
}
.nm-tm-track{
display:flex; gap:6px; align-items:center;
overflow-x:auto; overflow-y:hidden;
scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
flex:1; min-width:0;
scroll-snap-type:x mandatory;
padding-bottom:4px;
}
.nm-tm-track::-webkit-scrollbar{ height:4px }
.nm-tm-track::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:2px }
.nm-tm-chip{
background:transparent; color:var(--ink-dim);
border:1px solid var(--rule); padding:5px 10px;
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.16em; text-transform:uppercase;
cursor:pointer; white-space:nowrap; flex-shrink:0;
scroll-snap-align:start;
display:inline-flex; gap:8px; align-items:center;
transition: all .12s;
}
.nm-tm-chip:hover{ color:var(--ink); border-color:var(--cyan) }
.nm-tm-chip.on{
background:var(--magenta); color:var(--bg); border-color:var(--magenta);
font-weight:700;
}
.nm-tm-count{
color:var(--cyan); font-weight:700; font-size:9px;
}
.nm-tm-chip.on .nm-tm-count{ color:var(--bg) }
/* ---- Grid marker (above the asymmetric matrix) ---------------------- */
.nm-grid-marker{
display:flex; gap:14px; align-items:center;
padding:12px 22px;
border-bottom:1px solid var(--rule);
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.28em; text-transform:uppercase;
color:var(--cyan);
background: oklch(0.08 0.02 285);
}
.nm-grid-marker .gm-prompt{ color:var(--magenta); font-weight:700 }
.nm-grid-marker .gm-count{ margin-left:auto; color:var(--ink-dim) }
/* ---- ASYMMETRIC NEWS MATRIX (wabi-sabi 6-col grid) ------------------ */
.nm-grid{
display:grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(220px, auto);
grid-auto-flow: dense;
border-bottom:1px solid var(--rule);
}
.nm-grid > *{
border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);
background: transparent;
}
/* ---- Glitch-broken offsets (Strategy 8: layered on any layout).
Co-prime moduli so the pattern only fully repeats every ~10000 cards. */
body[data-glitch-offsets="on"] .nm-grid > *,
body[data-glitch-offsets="on"] .nm-maxrects-cell{
transition: transform .25s ease;
}
body[data-glitch-offsets="on"] .nm-grid > *:nth-child(3n+1){ transform: translate(-2px, 0) rotate(-0.4deg); }
body[data-glitch-offsets="on"] .nm-grid > *:nth-child(7n) { transform: translate(11px, 1px) rotate(0.6deg); }
body[data-glitch-offsets="on"] .nm-grid > *:nth-child(11n) { transform: translate(-5px, 4px) rotate(-0.2deg); }
body[data-glitch-offsets="on"] .nm-grid > *:nth-child(17n+5){ transform: translate(-7px, 5px) rotate(0.3deg); }
body[data-glitch-offsets="on"] .nm-grid > *:nth-child(23n+9){ transform: translate(8px, -3px) rotate(-0.5deg); }
body[data-glitch-offsets="on"] .nm-grid > *:hover,
body[data-glitch-offsets="on"] .nm-maxrects-cell:hover{ transform: none; z-index: 5; }
/* ---- MAXRECTS layout (Strategy 2: 2D bin packing, absolute-positioned).
Activated when body[data-layout="maxrects"]. The container has computed
height; cells are positioned absolutely. Each cell hosts a card or insert. */
.nm-maxrects{
position: relative;
border-bottom:1px solid var(--rule);
background:
repeating-linear-gradient(0deg, transparent 0 99px, oklch(0.30 0.04 285 / .3) 99px 100px);
/* faint horizontal rule lines visible between cards, like graph paper */
}
.nm-maxrects-cell{
position: absolute;
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
overflow: hidden;
box-sizing: border-box;
}
.nm-maxrects-cell > .nm-card,
.nm-maxrects-cell > .nm-insert{
/* Override grid-column / grid-row from the variant rules, since we're
inside an absolute-positioned cell, not a grid track. */
grid-column: auto !important;
grid-row: auto !important;
height: 100%;
border-right: none;
border-bottom: none;
}
/* Wide / tall keep their flex direction in MAXRECTS mode */
.nm-maxrects-cell > .nm-v-wide{ flex-direction: row; height: 100% }
.nm-maxrects-cell > .nm-v-wide .nm-card-img{ width: 42%; aspect-ratio: 1/1 }
.nm-maxrects-cell > .nm-v-tall .nm-card-img{ aspect-ratio: 16/9 }
.nm-maxrects-loading{
display:flex; justify-content:center; align-items:center;
padding:80px 24px;
color:var(--ink-dim);
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.28em; text-transform:uppercase;
}
/* ---- Article cards (shared base) ------------------------------------ */
.nm-card{
cursor:pointer; padding:0;
display:flex; flex-direction:column;
transition: background .15s;
position:relative;
overflow:hidden;
}
.nm-card:hover{ background: oklch(0.20 0.10 350 / .12) }
.nm-card.is-muted{ opacity:.55 }
.nm-card.is-muted:hover{ opacity:.9 }
.nm-card-img{
position:relative; aspect-ratio:16/10; overflow:hidden;
background:#0a0a14; flex-shrink:0;
}
.nm-card-img img{
width:100%; height:100%; object-fit:cover; display:block;
filter:contrast(1.05) saturate(1.1);
transition: transform .5s;
}
.nm-card:hover .nm-card-img img{ transform: scale(1.04) }
.nm-card-img::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 60%, oklch(0.10 0.04 285 / .55));
}
.nm-date-badge{
position:absolute; top:8px; left:8px; z-index:3;
background: oklch(0.06 0.02 285 / .85); color:var(--cyan);
padding:3px 7px;
font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.18em;
border:1px solid var(--rule);
}
.nm-swiss-badge{
position:absolute; top:8px; right:8px; z-index:3;
background:var(--magenta); color:#fff;
padding:3px 6px;
font-family:"JetBrains Mono", monospace; font-size:9px; font-weight:700;
letter-spacing:.22em;
}
.nm-card-body{
display:flex; flex-direction:column; gap:6px;
padding:16px 18px;
flex:1;
}
.nm-card-tag{
font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.22em;
text-transform:uppercase; color:var(--magenta);
}
.nm-card-title{
font-family:"DM Serif Display", "Space Grotesk", serif;
font-size:20px; line-height:1.12; letter-spacing:-0.005em;
margin:0; color:var(--ink); text-wrap:balance;
}
.nm-card:hover .nm-card-title{ color:var(--magenta) }
.nm-card-dek{
font-size:13px; line-height:1.5; color:var(--ink-dim); margin:0;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.nm-card-meta{
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
border-top:1px dashed var(--rule); padding-top:8px; margin-top:auto;
display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.nm-card-meta .sep{ color:var(--rule) }
.nm-card-swiss{ color:var(--magenta); font-weight:700 }
.nm-card-date{ color:var(--ink-dim) }
/* Per-card play button (audio engine) */
.nm-card-play{
position:absolute;
top:10px; right:10px;
width:32px; height:32px; border-radius:50%;
background: oklch(0.10 0.02 285 / .85);
border:1px solid var(--magenta);
color: var(--magenta);
cursor:pointer;
z-index:4;
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; padding:0; padding-left:2px;
transition: all .15s;
backdrop-filter: blur(4px);
opacity: 0.65;
}
.nm-card-play:hover{
background: var(--magenta); color: var(--bg); opacity:1;
box-shadow: 0 0 16px oklch(0.66 0.28 350 / .55);
transform: scale(1.08);
}
.nm-card.is-now-playing .nm-card-play{
background: var(--magenta); color: var(--bg); opacity: 1;
animation: pulse 1.6s ease-out infinite;
}
/* Hide on textonly variant since there's no image to perch on */
.nm-v-textonly .nm-card-play{ top: 14px; right: 14px; }
/* Compact play on today-side small thumbs */
.nm-v-today-side .nm-card-play{ width:26px; height:26px; font-size:9px; top:6px; right:6px }
/* Hero play button (matches card style, larger and more prominent since
the hero is the flagship of the day). Lives inside .nm-hero-vis. */
.nm-hero-play{
position:absolute;
bottom:18px; right:18px;
width:56px; height:56px; border-radius:50%;
background: oklch(0.10 0.02 285 / .9);
border:2px solid var(--magenta);
color: var(--magenta);
cursor:pointer;
z-index:4;
display:flex; align-items:center; justify-content:center;
font-size:18px; line-height:1; padding:0; padding-left:3px;
transition: all .15s;
backdrop-filter: blur(6px);
box-shadow: 0 0 28px oklch(0.10 0.02 285 / .55);
}
.nm-hero-play:hover{
background: var(--magenta); color: var(--bg);
box-shadow: 0 0 32px oklch(0.66 0.28 350 / .65);
transform: scale(1.08);
}
.nm-hero.is-now-playing .nm-hero-play{
background: var(--magenta); color: var(--bg);
animation: pulse 1.6s ease-out infinite;
}
/* ---- Card variants (asymmetry) -------------------------------------- */
/* small: default 2 cols × 1 row, image on top */
.nm-v-small{ grid-column: span 2; }
/* wide: 3 cols × 1 row, image left + body right */
.nm-v-wide{
grid-column: span 3;
flex-direction: row;
}
.nm-v-wide .nm-card-img{ width:42%; aspect-ratio:1/1; }
.nm-v-wide .nm-card-body{ padding:22px 24px; }
.nm-v-wide .nm-card-title{ font-size:24px; line-height:1.08 }
/* tall: 2 cols × 2 rows, big lead, full image */
.nm-v-tall{
grid-column: span 2;
grid-row: span 2;
}
.nm-v-tall .nm-card-img{ aspect-ratio:16/10 }
.nm-v-tall .nm-card-body{ padding:22px 22px; }
.nm-v-tall .nm-card-title{ font-size:30px; line-height:1.05 }
.nm-v-tall .nm-card-dek{ -webkit-line-clamp:6; font-size:14px }
/* textonly: 2 cols × 1 row, no image, big serif headline */
.nm-v-textonly{
grid-column: span 2;
background: oklch(0.10 0.04 285 / .35);
padding:24px 22px;
flex-direction:column;
}
.nm-v-textonly .nm-card-img{ display:none }
.nm-v-textonly .nm-card-body{ padding:0 }
.nm-v-textonly .nm-card-tag{ color:var(--cyan); margin-bottom:10px }
.nm-v-textonly .nm-card-title{
font-family:"DM Serif Display", serif;
font-size:26px; line-height:1.08;
border-left:3px solid var(--magenta);
padding-left:14px;
margin:0 0 12px;
}
.nm-v-textonly .nm-card-dek{ font-size:14px; -webkit-line-clamp:8 }
/* today-side: compact horizontal cards in the 2-up row underneath the hero.
Small thumbnail left, body right. Sized intentionally smaller than the
matrix cards so they read as supporting stories, not co-protagonists. */
.nm-v-today-side{
flex-direction: row;
align-items: stretch;
border-bottom: none;
background: oklch(0.10 0.02 285 / .35);
}
.nm-v-today-side .nm-card-img{
width: 30%;
flex-shrink: 0;
aspect-ratio: 1/1;
align-self: stretch;
}
.nm-v-today-side .nm-card-img img{ filter: contrast(1.05) saturate(0.9) brightness(0.92) }
.nm-v-today-side .nm-card-body{
padding: 14px 18px;
gap: 4px;
flex: 1; min-width: 0;
}
.nm-v-today-side .nm-card-tag{
font-size: 9px; letter-spacing: .26em; color: var(--cyan);
}
.nm-v-today-side .nm-card-title{
font-family: "Space Grotesk", sans-serif;
font-size: 16px; line-height: 1.22; font-weight: 600;
letter-spacing: -0.005em;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nm-v-today-side .nm-card-dek{
font-size: 11.5px; line-height: 1.45;
-webkit-line-clamp: 2;
color: var(--ink-dim);
}
.nm-v-today-side .nm-card-meta{
font-size: 9px; letter-spacing: .14em;
padding-top: 6px; gap: 6px;
}
/* ---- INSERTS (ads, quotes, jokes, stats, weather, robot, binary, code) -- */
.nm-insert{
padding:22px;
display:flex; flex-direction:column;
font-family:"JetBrains Mono", monospace;
position:relative;
overflow:hidden;
}
.ins-corner-stamp{
position:absolute; top:10px; right:10px;
font-family:"JetBrains Mono", monospace; font-size:9px; font-weight:700;
letter-spacing:.3em;
background:var(--cyan); color:var(--bg); padding:3px 6px;
transform:rotate(3deg);
z-index:2;
}
.nm-insert-ad{
grid-column: span 2;
background: linear-gradient(135deg, oklch(0.20 0.16 350 / .25), oklch(0.12 0.04 285 / .55));
justify-content: space-between;
gap:10px;
border-top:2px solid var(--magenta);
}
.ins-ad-kicker{
font-size:10px; letter-spacing:.3em; color:var(--cyan);
text-transform:uppercase;
}
.ins-ad-title{
font-family:"Archivo Black", sans-serif;
font-size:24px; line-height:1; margin:6px 0 8px;
color:var(--ink); letter-spacing:-0.005em;
}
.ins-ad-body{
font-size:13px; line-height:1.5; color:var(--ink-dim); margin:0;
font-family:"Space Grotesk", sans-serif;
}
.ins-ad-foot{
font-size:11px; letter-spacing:.22em; color:var(--magenta);
margin-top:auto; padding-top:12px; border-top:1px dashed var(--rule);
text-transform:uppercase;
}
.nm-insert-quote{
grid-column: span 3;
background: linear-gradient(135deg, oklch(0.16 0.10 200 / .35), transparent);
font-family:"DM Serif Display", serif;
padding:28px;
display:grid;
grid-template-columns: 60px 1fr;
gap:18px; align-items:center;
}
.ins-q-mark{
font-family:"DM Serif Display", serif; font-size:120px; line-height:.55;
color:var(--magenta); align-self:start;
}
.ins-q-text{
font-size:clamp(18px, 1.7vw, 26px); line-height:1.2;
color:var(--ink); margin:0; text-wrap:balance;
}
.ins-q-who{
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.2em; color:var(--cyan); margin-top:12px;
grid-column: 2;
display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
}
.ins-q-who b{ color:var(--ink) }
.nm-insert-joke{
grid-column: span 2;
background: oklch(0.06 0.02 285);
justify-content: center; align-items: center; text-align:center;
border:1px dashed var(--rule);
}
.ins-j-prompt{ color:var(--magenta); font-size:32px; font-weight:700; line-height:1 }
.ins-j-text{
font-size:14px; color:var(--ink); margin:12px 0 4px;
line-height:1.4; max-width:30ch; letter-spacing:.04em;
}
.ins-j-cursor{
color:var(--cyan); font-weight:700; font-size:14px;
animation: blink 1s steps(2) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.nm-insert-stat{
grid-column: span 1;
background: oklch(0.08 0.02 285);
justify-content: center; align-items: flex-start;
padding:18px;
}
.ins-s-num{
font-family:"Archivo Black", sans-serif; font-size:36px; line-height:1;
color:var(--ink); font-feature-settings:"tnum";
}
.ins-s-label{
font-size:10px; letter-spacing:.22em; color:var(--ink-dim);
margin:8px 0 4px; text-transform:uppercase;
}
.ins-s-delta{ font-size:11px; letter-spacing:.08em }
.ins-s-delta.up{ color:var(--acid) }
.ins-s-delta.dn{ color:var(--magenta) }
.nm-insert-weather{
grid-column: span 2;
background: linear-gradient(135deg, oklch(0.14 0.06 200 / .55), oklch(0.10 0.04 285 / .35));
justify-content: center;
}
.ins-w-city{ font-size:11px; letter-spacing:.22em; color:var(--cyan); text-transform:uppercase }
.ins-w-temp{
font-family:"Archivo Black", sans-serif; font-size:56px; line-height:1;
color:var(--ink); margin:6px 0; font-feature-settings:"tnum";
}
.ins-w-desc{ font-size:11px; letter-spacing:.14em; color:var(--ink-dim); text-transform:uppercase }
/* Robot classifieds — sketchy "FOR ROBOTS ONLY" ad */
.nm-insert-robot_ad{
grid-column: span 2;
background: oklch(0.08 0.02 285);
border:2px solid var(--cyan);
border-style: dashed;
color:var(--ink);
justify-content:center;
gap:8px;
}
.ins-r-stamp{
position:absolute; top:8px; right:-30px;
background: var(--acid); color:var(--bg);
padding:4px 36px;
font-family:"JetBrains Mono", monospace; font-size:9px; font-weight:700;
letter-spacing:.32em;
transform: rotate(28deg);
z-index:2;
}
.ins-r-kicker{
font-size:10px; letter-spacing:.32em; color:var(--cyan);
text-transform:uppercase;
}
.ins-r-title{
font-family:"JetBrains Mono", monospace;
font-size:18px; line-height:1.15; color:var(--ink);
letter-spacing:.04em; font-weight:700;
margin:6px 0 4px;
}
.ins-r-body{
font-size:12px; line-height:1.55; color:var(--ink-dim); margin:0;
font-family:"JetBrains Mono", monospace; letter-spacing:.02em;
}
.ins-r-foot{
font-size:10px; letter-spacing:.22em; color:var(--acid);
margin-top:auto; padding-top:10px;
text-transform:uppercase;
}
/* Binary message — click to translate */
.nm-insert-binary{
grid-column: span 2;
background: oklch(0.05 0.01 285);
border:1px solid var(--cyan);
cursor:pointer;
justify-content: space-between;
transition: background .15s;
}
.nm-insert-binary:hover{ background: oklch(0.10 0.04 200 / .35) }
.ins-b-kicker{
font-size:10px; letter-spacing:.3em; color:var(--magenta);
text-transform:uppercase;
}
.ins-b-bits{
font-family:"JetBrains Mono", monospace;
font-size:11px; line-height:1.55; color:var(--cyan);
margin:10px 0;
word-break:break-all;
letter-spacing:.05em;
}
.ins-b-translation{
font-family:"DM Serif Display", serif;
font-size:18px; line-height:1.25; color:var(--ink);
margin:6px 0; text-wrap:balance;
}
.ins-b-toggle{
font-size:10px; letter-spacing:.22em; color:var(--cyan);
margin-top:auto;
border-top:1px dashed var(--rule); padding-top:10px;
text-transform:uppercase; user-select:none;
}
/* Code-style article snippet */
.nm-insert-code{
grid-column: span 3;
background: #0a0a14;
border-left:3px solid var(--acid);
padding:18px 22px;
font-family:"JetBrains Mono", monospace;
overflow:hidden;
}
.ins-c-kicker{
font-size:10px; letter-spacing:.3em; color:var(--acid);
text-transform:uppercase; margin-bottom:10px;
}
.ins-c-block{
font-size:12px; line-height:1.6; color:var(--ink);
white-space:pre-wrap;
margin:0;
}
.ins-c-block .k{ color:var(--magenta) } /* key */
.ins-c-block .s{ color:var(--acid) } /* string */
.ins-c-block .n{ color:var(--cyan) } /* number */
.ins-c-block .c{ color:var(--ink-dim); font-style:italic } /* comment */
/* PAZ Academy course / product cross-promo */
.nm-insert-course,
.nm-insert-product{
grid-column: span 3;
background: linear-gradient(135deg, oklch(0.14 0.06 200 / .35), oklch(0.10 0.04 285 / .55));
padding:22px 24px;
gap:8px;
border-top:2px solid var(--cyan);
}
.nm-insert-product{ border-top-color: var(--acid) }
.ins-corner-stamp-cyan{ background: var(--cyan); color: var(--bg); }
.ins-corner-stamp-acid{ background: var(--acid); color: var(--bg); }
.ins-cp-kicker{
font-size:10px; letter-spacing:.3em; color:var(--cyan);
text-transform:uppercase;
}
.nm-insert-product .ins-cp-kicker{ color:var(--acid) }
.ins-cp-title{
font-family:"Archivo Black", sans-serif;
font-size:24px; line-height:1; margin:6px 0 8px;
color:var(--ink); letter-spacing:-0.005em;
}
.ins-cp-body{
font-size:13px; line-height:1.5; color:var(--ink-dim); margin:0 0 6px;
font-family:"Space Grotesk", sans-serif;
}
.ins-cp-specs{
display:flex; flex-wrap:wrap; gap:6px;
margin:auto 0 0;
padding-top:10px;
}
.ins-cp-chip{
border:1px solid var(--rule);
padding:3px 8px;
font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-dim);
}
.ins-cp-price{
border-color:var(--cyan); color:var(--cyan); font-weight:700;
}
.nm-insert-product .ins-cp-price{ border-color:var(--acid); color:var(--acid) }
.ins-cp-cta{
margin-top:10px; padding-top:10px;
border-top:1px dashed var(--rule);
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color: var(--cyan); font-weight:700;
}
.ins-cp-cta-acid{ color: var(--acid) }
/* =========================================================================
AUDIO MINI-PLAYER
Fixed bottom strip — clicks the article body's "▶" button to start.
Coexists with the tweaks-panel (right side).
========================================================================= */
.paz-audio-player{
position:fixed;
left:50%; bottom:16px;
transform:translateX(-50%);
width:min(720px, calc(100vw - 320px)); /* leave room for tweaks-panel */
background: oklch(0.10 0.04 285 / .92);
border:1px solid var(--magenta);
box-shadow: 0 0 0 1px var(--rule), 0 12px 40px oklch(0.66 0.28 350 / .35);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
color: var(--ink);
display:grid;
grid-template-columns: 28px 1fr auto auto;
align-items:center; gap:14px;
padding:10px 14px;
z-index:300;
font-family:"JetBrains Mono", monospace;
}
.pap-led{ display:flex; gap:2px; align-items:flex-end; height:18px }
.pap-bar{
width:3px; background:var(--cyan); display:block;
animation: pap-bar 1.1s ease-in-out infinite;
transform-origin: bottom;
}
.pap-bar:nth-child(1){ height:55%; animation-delay:.0s }
.pap-bar:nth-child(2){ height:80%; animation-delay:.18s; background:var(--magenta) }
.pap-bar:nth-child(3){ height:40%; animation-delay:.30s }
.pap-bar:nth-child(4){ height:90%; animation-delay:.10s; background:var(--magenta) }
@keyframes pap-bar{ 0%,100%{ transform: scaleY(.4) } 50%{ transform: scaleY(1) } }
.paz-audio-player[data-playing="0"] .pap-bar{ animation-play-state: paused; opacity: .4 }
.pap-meta{ min-width:0; display:flex; flex-direction:column; gap:2px }
.pap-now{
font-size:9px; letter-spacing:.28em; text-transform:uppercase;
color: var(--magenta); font-weight:700;
}
.pap-q{ color: var(--cyan); font-weight:400; letter-spacing:.18em }
.pap-title{
font-size:13px; line-height:1.2; color: var(--ink);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family: "Space Grotesk", sans-serif; font-weight:500;
}
.pap-controls{ display:flex; gap:4px }
.pap-btn{
background:transparent; border:1px solid var(--rule);
color: var(--ink); cursor:pointer;
width:32px; height:32px; padding:0; border-radius:0;
font-size:11px; line-height:1; font-family:inherit;
display:flex; align-items:center; justify-content:center;
transition: all .12s;
}
.pap-btn:hover:not(:disabled){ border-color: var(--magenta); color: var(--magenta) }
.pap-btn:disabled{ opacity:.35; cursor:not-allowed }
.pap-play{
background: var(--magenta); color:#fff; border-color: var(--magenta);
width:36px; height:36px; font-size:13px;
}
.pap-play:hover:not(:disabled){
background: var(--cyan); color: var(--bg); border-color: var(--cyan);
}
.pap-close{
background:transparent; border:none; color: var(--ink-dim); cursor:pointer;
font-size:14px; padding:6px 10px;
}
.pap-close:hover{ color: var(--magenta) }
/* Bigger article-modal play button */
.art-play-btn{
display:inline-flex; align-items:center; gap:8px;
background: var(--magenta); color:#fff; border:none;
padding:8px 14px; cursor:pointer;
font-family:"JetBrains Mono", monospace; font-size:11px;
letter-spacing:.22em; text-transform:uppercase; font-weight:700;
margin-left:auto;
transition: all .15s;
}
.art-play-btn:hover{ background: var(--cyan); color: var(--bg) }
.art-play-btn .triangle{ font-size:10px; line-height:1 }
@keyframes pulse{
0% { box-shadow: 0 0 0 0 oklch(0.66 0.28 350 / .7) }
70% { box-shadow: 0 0 0 12px oklch(0.66 0.28 350 / 0) }
100% { box-shadow: 0 0 0 0 oklch(0.66 0.28 350 / 0) }
}
/* ---- Empty / load-more ---------------------------------------------- */
.nm-empty-grid{
grid-column:1/-1; padding:40px;
text-align:center; color:var(--ink-dim);
font-family:"JetBrains Mono", monospace; font-size:12px;
letter-spacing:.2em; text-transform:uppercase;
}
.nm-loadmore-bar{
border-bottom:1px solid var(--rule);
background: linear-gradient(180deg, transparent, oklch(0.10 0.04 285 / .55));
padding:32px 24px;
display:flex; justify-content:center;
}
.nm-loadmore{
background: transparent;
border:1px solid var(--magenta); color:var(--magenta);
padding:14px 28px;
font-family:"JetBrains Mono", monospace; font-size:12px;
letter-spacing:.28em; text-transform:uppercase; font-weight:700;
cursor:pointer;
display:flex; gap:14px; align-items:center;
transition: all .15s;
}
.nm-loadmore:hover:not(:disabled){
background: var(--magenta); color: var(--bg);
box-shadow: 0 0 24px oklch(0.66 0.28 350 / .45);
}
.nm-loadmore:disabled{
border-color:var(--rule); color:var(--ink-dim); cursor:default;
}
.nm-loadmore .lm-chev{ color:var(--cyan); font-size:14px }
.nm-loadmore:hover:not(:disabled) .lm-chev{ color:var(--bg) }
/* =========================================================================
CYBER LIST — archive / filter / search results
========================================================================= */
.cyber-list{
grid-column:1/-1;
background: oklch(0.07 0.02 285);
border-top:1px solid var(--rule);
font-family:"JetBrains Mono", monospace;
}
.cl-head{
display:flex; justify-content:space-between; align-items:center;
padding:12px 22px; border-bottom:1px solid var(--rule);
color:var(--cyan); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
}
.cl-row{
display:grid;
grid-template-columns: 130px 100px 130px 1fr auto auto;
gap:14px; align-items:center;
padding:14px 22px;
border-bottom:1px dashed var(--rule);
cursor:pointer;
transition: background .12s;
}
.cl-row:hover{ background: oklch(0.18 0.10 350 / .14) }
.cl-pillar{ color:var(--magenta); font-size:11px; letter-spacing:.18em; font-weight:700 }
.cl-date{ color:var(--ink-dim); font-size:12px; letter-spacing:.08em }
.cl-voice{ color:var(--cyan); font-size:10px; letter-spacing:.18em }
.cl-text{ min-width:0 }
.cl-title{
margin:0; font-family:"Space Grotesk", sans-serif;
font-size:15px; font-weight:600; line-height:1.25; color:var(--ink);
text-wrap:balance;
}
.cl-row:hover .cl-title{ color:var(--magenta) }
.cl-dek{
margin:4px 0 0; font-family:"Space Grotesk", sans-serif;
font-size:13px; line-height:1.45; color:var(--ink-dim);
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.cl-flag{
background:var(--magenta); color:#fff;
padding:2px 6px; font-size:9px; letter-spacing:.22em; font-weight:700;
}
.cl-rating{ color:var(--magenta); font-size:11px; letter-spacing:.1em; font-weight:700 }
.cyber-list-empty{ padding:60px 22px }
.cl-empty{
display:flex; gap:14px; align-items:baseline; justify-content:center;
color:var(--cyan); font-size:13px; letter-spacing:.22em;
}
.cl-empty .cl-prompt{ color:var(--magenta); font-weight:700 }
/* =========================================================================
ARTICLE PREV / NEXT NAV
========================================================================= */
.art-nav{
margin-top:44px; padding-top:24px; border-top:1px solid var(--rule);
display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.art-nav-btn{
background:transparent; color:var(--ink);
border:1px solid var(--rule); cursor:pointer;
padding:14px 18px;
display:flex; gap:14px; align-items:center;
text-align:left;
font:inherit;
transition: all .15s;
min-width:0; /* grid item must opt out of min-content width
or long titles push the whole article wider */
overflow:hidden;
}
.art-nav-btn:hover:not(:disabled){
border-color:var(--magenta); background: oklch(0.18 0.10 350 / .14);
}
.art-nav-btn:disabled{ opacity:.4; cursor:not-allowed }
.art-nav-next{ flex-direction:row-reverse; text-align:right }
.art-nav-chev{
font-size:22px; color:var(--cyan); flex-shrink:0;
}
.art-nav-label{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 }
.art-nav-label-r{ align-items:flex-end }
.art-nav-kicker{
font-family:"JetBrains Mono", monospace; font-size:10px;
letter-spacing:.22em; text-transform:uppercase; color:var(--magenta);
}
.art-nav-text{
font-family:"DM Serif Display", serif; font-size:15px; line-height:1.2;
color:var(--ink);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
width:100%;
}
/* =========================================================================
RESPONSIVE: news matrix
========================================================================= */
@media (max-width: 1100px){
/* Hero: stack image on top, body below at narrow widths */
.nm-hero{ grid-template-columns: 1fr; min-height: auto }
.nm-hero-vis{ aspect-ratio: 16/9 }
.nm-hero-body{ padding: 28px 24px }
/* Today-side: stay 2-up if there's room, else 1-up */
.nm-today-side{ grid-template-columns: 1fr 1fr; }
/* Collapse 6-col asymmetric grid to 4-col */
.nm-grid{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); }
.nm-v-small { grid-column: span 2; }
.nm-v-wide { grid-column: span 4; flex-direction: row; }
.nm-v-tall { grid-column: span 2; grid-row: span 2; }
.nm-v-textonly { grid-column: span 2; }
.nm-insert-ad { grid-column: span 2; }
.nm-insert-quote { grid-column: span 4; }
.nm-insert-joke { grid-column: span 2; }
.nm-insert-stat { grid-column: span 2; }
.nm-insert-weather { grid-column: span 2; }
.nm-insert-robot_ad{ grid-column: span 2; }
.nm-insert-binary { grid-column: span 2; }
.nm-insert-code { grid-column: span 4; }
.nm-insert-course { grid-column: span 4; }
.nm-insert-product { grid-column: span 4; }
.cl-row{ grid-template-columns: 1fr; gap:6px; padding:14px 18px }
.cl-pillar, .cl-date, .cl-voice{ display:inline-block; margin-right:8px }
}
@media (max-width: 640px){
/* Today-side stacks vertically on phones, but stays compact horizontal cards */
.nm-today-side{ grid-template-columns: 1fr; }
.nm-today-side > .nm-card{ border-right: none; border-bottom: 1px solid var(--rule) }
.nm-today-side > .nm-card:last-child{ border-bottom: none }
.nm-v-today-side .nm-card-img{ width: 32% }
.nm-v-today-side .nm-card-title{ font-size: 15px }
/* Audio player: full-width strip, no margin reserved for tweaks panel */
.paz-audio-player{
width: calc(100vw - 16px);
left: 8px;
right: 8px;
transform: none;
bottom: 8px;
grid-template-columns: 24px 1fr auto;
gap: 10px;
padding: 8px 10px;
}
/* Tweaks cup + dock on phones: smaller cup (it floats over full-width
text), pinned to the upper-right just under the sticky top-strip so it
never sits over article text mid-screen; the drop-down pill then has
the whole viewport below it (well clear of the bottom-fixed audio
player). max-height + scroll as a short-viewport safety net; tighter
gaps shorten the pill (~218px). */
.twk-side{ top: 96px; right: 12px }
body.pkaffi-context .twk-cup{ width: 32px; height: 32px }
.twk-side .twk-dock{ max-height: calc(56vh - 24px); overflow-y: auto }
.twk-dock{ gap: 8px }
.twk-dock .twk-radio, .twk-dock .twk-fx{ gap: 6px }
.nm-card-play{ width: 28px; height: 28px; font-size: 10px }
.nm-hero-play{ width: 44px; height: 44px; font-size: 15px; bottom: 12px; right: 12px }
/* Time-machine: tighter on phones */
.nm-timemachine{ padding: 8px 12px; gap: 8px }
.nm-tm-label{ font-size: 9px }
.nm-tm-chip{ font-size: 9px; padding: 4px 8px }
/* Hero body: a bit more compact */
.nm-hero-body{ padding: 22px 18px; gap: 8px }
.nm-hero-title{ font-size: clamp(28px, 8vw, 40px) }
.nm-hero-dek{ font-size: 14px }
/* Stack everything in a single column */
.nm-grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
.nm-grid > *{ grid-column: span 1 !important; grid-row: span 1 !important; border-right:none }
.nm-v-wide, .nm-v-today-side{ flex-direction: column }
.nm-v-wide .nm-card-img,
.nm-v-today-side .nm-card-img{ width: 100%; aspect-ratio: 16/10 }
.nm-insert-quote{ grid-template-columns: 1fr; }
.ins-q-mark{ font-size:80px; line-height:.4 }
.ins-q-who{ grid-column: 1 }
.art-nav{ grid-template-columns: 1fr }
}
/* =========================================================================
LAYOUT REFINEMENTS
========================================================================= */
/* ─── Title typography lock ────────────────────────────────────────
A later-loading host theme would otherwise win the cascade for `h1`. body.pkaffi-context bumps our
specificity; !important locks the font-family decisively. */
body.pkaffi-context .masthead h1.brand,
body.pkaffi-cyberpunk .masthead h1.brand{
font-family: "Major Mono Display", "JetBrains Mono", monospace !important;
}
body.pkaffi-context footer.foot .brand-mini,
body.pkaffi-cyberpunk footer.foot .brand-mini{
font-family: "Major Mono Display", "JetBrains Mono", monospace !important;
}
/* ─── Language switcher in top-strip ───────────────────────────────
Two static EN/DE links rendered by header.php (no Polylang). */
.top-strip .pkaffi-lang{
display:inline-flex; align-items:center; gap:0;
border:1px solid var(--rule);
font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.22em;
text-transform:uppercase;
margin-right:14px;
background:rgba(0,0,0,.4);
}
.top-strip .pkaffi-lang a{
color:var(--ink-dim); text-decoration:none;
padding:4px 10px;
transition:all .12s;
border-right:1px solid var(--rule);
}
.top-strip .pkaffi-lang a:last-child{ border-right:none; }
.top-strip .pkaffi-lang a:hover{ color:var(--cyan); }
.top-strip .pkaffi-lang a.is-active{
background:var(--magenta); color:var(--bg); font-weight:700;
}
/* ─── Reader-LEVEL identity chip (GHOST · MEMBER · VIP) ──────────────────
Sits in the top-strip beside the lang switcher. Same JetBrains-Mono
register as .pkaffi-lang; populated + revealed by paz-kaffi.js
(setupIdentityChip). Hidden until JS resolves the tier, so a no-JS reader
never sees an empty pill — and the server never knows the anonymous
identity. The leading ◆ + accent colour shift per tier:
GHOST → dim ink (anonymous)
MEMBER → cyan (free signup)
VIP → gold/magenta (paid/special). */
.top-strip .pkaffi-id{
display:inline-flex; align-items:center; gap:7px;
border:1px solid var(--rule);
font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.18em;
text-transform:uppercase;
color:var(--ink-dim);
padding:4px 11px;
margin-right:14px;
background:rgba(0,0,0,.4);
white-space:nowrap;
transition:color .15s, border-color .15s, box-shadow .15s;
}
.top-strip .pkaffi-id[hidden]{ display:none; }
.top-strip .pkaffi-id .pk-id-mark{
font-size:9px; line-height:1; transform:translateY(.5px);
}
.top-strip .pkaffi-id .pk-id-text{ color:var(--ink); }
/* GHOST — anonymous, deliberately the quietest. */
.top-strip .pkaffi-id.pk-id--ghost{
color:var(--ink-dim); border-color:var(--rule);
}
.top-strip .pkaffi-id.pk-id--ghost .pk-id-mark{ color:var(--ink-dim); }
/* MEMBER — free newsletter signup, cyan accent. */
.top-strip .pkaffi-id.pk-id--member{
color:var(--cyan); border-color:oklch(0.82 0.16 200 / .55);
}
.top-strip .pkaffi-id.pk-id--member .pk-id-mark{ color:var(--cyan); }
.top-strip .pkaffi-id.pk-id--member .pk-id-text{ color:var(--cyan); }
/* VIP — paid/special, the gold/magenta tier. Gold ink, magenta rule + glow. */
.top-strip .pkaffi-id.pk-id--vip{
color:var(--acid);
border-color:var(--magenta);
box-shadow:0 0 0 1px oklch(0.66 0.28 350 / .25), 0 0 10px oklch(0.66 0.28 350 / .25);
}
.top-strip .pkaffi-id.pk-id--vip .pk-id-mark{ color:var(--magenta); }
.top-strip .pkaffi-id.pk-id--vip .pk-id-text{
color:oklch(0.90 0.16 95); /* gold */
font-weight:700;
}
/* ─── Topic chips under article title ──────────────────────────────
Single article: row of pill chips placed directly under the H1. */
.art-topics{
display:flex; flex-wrap:wrap; gap:8px;
margin:0 0 22px;
}
.art-topic{
display:inline-flex; align-items:center; gap:6px;
padding:6px 12px;
border:1px solid var(--magenta);
background:oklch(0.20 0.10 350 / .15);
color:var(--ink);
font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.22em;
text-transform:uppercase;
text-decoration:none;
transition:all .12s;
}
.art-topic:hover{
background:var(--magenta); color:var(--bg);
border-color:var(--magenta);
}
.art-topic.is-cyan{
border-color:var(--cyan); color:var(--cyan);
background:oklch(0.20 0.10 200 / .15);
}
.art-topic.is-cyan:hover{ background:var(--cyan); color:var(--bg); }
.art-topic.is-acid{
border-color:var(--acid); color:var(--acid);
background:oklch(0.20 0.18 130 / .12);
}
/* News-card: chip-styled tag *under* the title (was just colored text above). */
.nm-card-tag{
display:inline-flex;
padding:4px 10px;
border:1px solid var(--magenta);
background:oklch(0.20 0.10 350 / .15);
color:var(--magenta);
align-self:flex-start;
order:2;
margin-top:4px;
}
.nm-card-title{ order:1; }
.nm-card-dek{ order:3; }
.nm-card-meta{ order:4; }
.nm-v-textonly .nm-card-tag{
border-color:var(--cyan); color:var(--cyan);
background:oklch(0.20 0.10 200 / .15);
margin-bottom:0;
}
.nm-v-today-side .nm-card-tag{ font-size:9px; padding:3px 8px; }
/* ─── Single-article — full-page reading mode ──────────────────────
Hide masthead/secnav/ticker on single article so the article-sheet is
the focal element. Top-strip stays for back-to-academy + lang switcher.
Footer stays compact. */
body.single-paz_kaffi .masthead,
body.single-paz_kaffi .secnav,
body.single-paz_kaffi .ticker{
display:none !important;
}
body.single-paz_kaffi main.grid{
display:block;
padding:0;
}
body.single-paz_kaffi main.grid > *{
border-right:none;
padding:0;
}
body.single-paz_kaffi .article-sheet{
max-width:1180px;
margin:32px auto !important;
background:var(--bg-2);
border:1px solid var(--magenta);
box-shadow:
0 0 80px oklch(0.66 0.28 350 / .28),
0 0 0 1px var(--rule);
}
body.single-paz_kaffi .art-back{
display:inline-flex; align-items:center; gap:8px;
position:absolute; top:18px; left:18px; z-index:6;
padding:8px 14px;
background:oklch(0.06 0.02 285 / .85);
border:1px solid var(--cyan);
color:var(--cyan);
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.22em;
text-transform:uppercase;
text-decoration:none;
transition:all .12s;
backdrop-filter:blur(6px);
}
body.single-paz_kaffi .art-back:hover{
background:var(--cyan); color:var(--bg);
}
body.single-paz_kaffi .art-body{ padding:56px 72px 64px; }
body.single-paz_kaffi .art-title{
font-size:clamp(40px, 5.5vw, 72px);
margin-bottom:14px;
}
body.single-paz_kaffi .art-deck{
font-size:22px; line-height:1.5; max-width:70ch;
}
body.single-paz_kaffi footer.foot{
grid-template-columns:1fr 1fr;
padding:24px 22px;
}
body.single-paz_kaffi footer.foot .brand-mini{ font-size:28px; }
@media (max-width: 900px){
body.single-paz_kaffi .article-sheet{ margin:16px auto !important; }
body.single-paz_kaffi .art-body{ padding:32px 22px 40px; }
body.single-paz_kaffi .art-title{ font-size:clamp(30px, 8vw, 44px); }
body.single-paz_kaffi .art-deck{ font-size:17px; }
body.single-paz_kaffi .art-back{ top:10px; left:10px; padding:6px 10px; font-size:10px; }
}
/* ─── Article body design polish (first pass) ──────────────────────
Drop cap, refined column typography, callouts, figures, lists, code. */
/* Mobile-safety guards (backstop): keep wide article content — images,
code blocks, tables, long links — inside the sheet instead of stretching
the page. The article view fits today; this protects as content varies. */
body.single-paz_kaffi .art-cols img,
body.single-paz_kaffi .art-cols video,
body.single-paz_kaffi .art-cols iframe{ max-width:100%; height:auto; }
body.single-paz_kaffi .art-cols pre{ max-width:100%; overflow-x:auto; }
body.single-paz_kaffi .art-cols table{ display:block; max-width:100%; overflow-x:auto; }
body.single-paz_kaffi .art-cols{ overflow-wrap:break-word; }
body.single-paz_kaffi .art-cols{
font-size:17px; line-height:1.78;
color:var(--ink);
column-gap:44px;
}
body.single-paz_kaffi .art-cols > p:first-of-type::first-letter{
font-family:"DM Serif Display", serif;
font-size:84px; float:left; line-height:.82;
padding:8px 14px 0 0;
color:var(--magenta);
text-shadow:2px 0 0 var(--cyan);
}
body.single-paz_kaffi .art-cols h2{
font-family:"Archivo Black", sans-serif;
font-size:26px; line-height:1.1;
letter-spacing:-0.005em;
margin:28px 0 12px;
color:var(--ink);
text-transform:uppercase;
break-after:avoid;
}
body.single-paz_kaffi .art-cols h2::before{
content:"▮ "; color:var(--magenta);
}
body.single-paz_kaffi .art-cols h3{
font-family:"JetBrains Mono", monospace;
font-size:14px; line-height:1.3;
letter-spacing:.18em; text-transform:uppercase;
color:var(--cyan);
margin:22px 0 10px;
break-after:avoid;
}
body.single-paz_kaffi .art-cols a{
color:var(--magenta); text-decoration:none;
border-bottom:1px solid var(--magenta);
transition:all .12s;
}
body.single-paz_kaffi .art-cols a:hover{
color:var(--cyan); border-bottom-color:var(--cyan);
background:oklch(0.30 0.14 200 / .15);
}
body.single-paz_kaffi .art-cols strong{ color:var(--ink); }
body.single-paz_kaffi .art-cols em{ color:var(--cyan); font-style:italic; }
body.single-paz_kaffi .art-cols blockquote{
break-inside:avoid;
margin:18px 0;
padding:14px 18px;
border-left:3px solid var(--magenta);
background:oklch(0.10 0.04 285 / .35);
font-family:"DM Serif Display", serif;
font-size:19px; line-height:1.4;
color:var(--ink);
font-style:italic;
}
body.single-paz_kaffi .art-cols blockquote::before{
content:"❝ ";
color:var(--magenta);
font-size:24px; vertical-align:-4px;
}
body.single-paz_kaffi .art-cols figure{
break-inside:avoid;
margin:18px 0;
padding:4px;
border:1px solid var(--rule);
background:oklch(0.08 0.02 285);
position:relative;
}
body.single-paz_kaffi .art-cols figure img{
display:block; width:100%; height:auto;
}
body.single-paz_kaffi .art-cols figcaption{
padding:10px 14px;
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.12em;
color:var(--ink-dim);
border-top:1px dashed var(--rule);
text-transform:uppercase;
}
body.single-paz_kaffi .art-cols ul,
body.single-paz_kaffi .art-cols ol{
margin:14px 0; padding-left:22px;
}
body.single-paz_kaffi .art-cols li{
margin:6px 0; padding-left:4px;
}
body.single-paz_kaffi .art-cols ul li::marker{ color:var(--magenta); }
body.single-paz_kaffi .art-cols ol li::marker{ color:var(--cyan); }
body.single-paz_kaffi .art-cols code{
font-family:"JetBrains Mono", monospace;
font-size:.92em;
padding:1px 6px;
background:oklch(0.10 0.04 285);
color:var(--cyan);
border:1px solid var(--rule);
}
/* Code BLOCKS — pipeline articles ship long snippets; with no `pre` rule
they overflowed the 2-col layout and ran off the article sheet
(2_SCREENSHOTS/CodeOut.PNG). A block spans BOTH columns like a newspaper
figure and long lines scroll INSIDE the block, never past the sheet. */
body.single-paz_kaffi .art-cols pre{
column-span:all;
max-width:100%;
overflow-x:auto;
margin:24px 0;
padding:16px 18px;
background:oklch(0.10 0.04 285);
border:1px solid var(--rule);
border-left:3px solid var(--magenta);
font-family:"JetBrains Mono", monospace;
font-size:13px; line-height:1.6;
white-space:pre;
scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
body.single-paz_kaffi .art-cols pre > code{
/* reset the inline-chip treatment inside blocks */
display:block; padding:0; border:none; background:transparent;
font-size:inherit; color:var(--ink); white-space:inherit;
}
/* Syntax tokens — paz-kaffi.js (pkHighlight) wraps comments/strings/numbers/
flags/keywords/commands in .tok-* spans. Self-contained replacement for the
old EnlighterJS colourising, mapped onto the cyberpunk palette. Everything
not tokenised stays at the default ink, so code reads calm, not rainbow. */
body.single-paz_kaffi .art-cols pre .tok-c{ color:var(--ink-dim); font-style:italic; } /* comment */
body.single-paz_kaffi .art-cols pre .tok-s{ color:var(--acid); } /* string */
body.single-paz_kaffi .art-cols pre .tok-n{ color:var(--magenta); } /* number */
body.single-paz_kaffi .art-cols pre .tok-f{ color:var(--magenta); } /* CLI flag */
body.single-paz_kaffi .art-cols pre .tok-k{ color:var(--cyan); } /* keyword */
body.single-paz_kaffi .art-cols pre .tok-b{ color:var(--cyan); font-weight:700; } /* command */
/* COPY / SAVE actions — paz-kaffi.js wraps each pre in .pk-code and pins
the buttons to the wrapper, so they stay put while the code scrolls. */
body.single-paz_kaffi .art-cols .pk-code{
column-span:all; position:relative; margin:24px 0;
}
body.single-paz_kaffi .art-cols .pk-code pre{
margin:0; padding-top:40px; /* headroom so buttons don't sit on code */
}
.pk-code-actions{
position:absolute; top:8px; right:8px;
display:flex; gap:6px;
}
.pk-code-btn{
font-family:"JetBrains Mono", monospace;
font-size:10px; letter-spacing:.14em; text-transform:uppercase;
padding:4px 10px; cursor:pointer;
color:var(--ink-dim);
background:oklch(0.13 0.025 285 / .9);
border:1px solid var(--rule);
transition:all .15s;
}
.pk-code-btn:hover{ color:var(--cyan); border-color:var(--cyan); }
.pk-code-btn.is-done{ color:var(--bg); background:var(--magenta); border-color:var(--magenta); }
/* Article-foot code/asset download (single.php art-foot, _paz_code_url). Same
mono-pill register as .pk-code-btn but a touch larger and a link, not a JS
button. High specificity + explicit color so the host theme's link reset
can't repaint it. */
.art-foot .pk-code-dl{
display:inline-flex; align-items:center; gap:8px;
font-family:"JetBrains Mono", monospace;
font-size:11px; letter-spacing:.16em; text-transform:uppercase;
padding:8px 14px; text-decoration:none;
color:var(--cyan);
background:oklch(0.13 0.025 285 / .9);
border:1px solid var(--cyan);
transition:all .15s;
}
.art-foot .pk-code-dl:hover,
.art-foot .pk-code-dl:focus-visible{ color:var(--bg); background:var(--cyan); }
.art-foot .pk-code-dl .pk-code-dl-ico{ font-size:13px; line-height:1; }
body.single-paz_kaffi .art-cols hr{
border:0;
margin:32px 0;
height:1px;
background:linear-gradient(90deg, transparent, var(--magenta), transparent);
}
@media (max-width: 900px){
body.single-paz_kaffi .art-cols{ font-size:16px; column-count:1; }
body.single-paz_kaffi .art-cols > p:first-of-type::first-letter{ font-size:64px; }
body.single-paz_kaffi .art-cols h2{ font-size:22px; }
}
/* ─── Cyber-list (search / filter / taxonomy archive) full-width fix ─
The section was rendering inside one column of the 3-col main.grid,
squashing search results to ~33% width with the article rows clipped.
Span the full grid and give the page header proper cyberpunk weight. */
.cyber-list-section{
grid-column: 1 / -1;
padding: 0 !important;
border-right: none !important;
}
.cl-page-head{
padding: 28px 24px 20px;
border-bottom: 1px solid var(--rule);
background: oklch(0.08 0.02 285);
}
.cl-page-head h1{
margin: 0;
font-family: "DM Serif Display", "Space Grotesk", serif;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--ink);
text-wrap: balance;
}
.cl-page-head h1::before{
content: "▮ ";
color: var(--magenta);
}
@media (max-width: 900px){
.cl-row{
grid-template-columns: 1fr auto;
gap: 8px;
}
.cl-row .cl-pillar,
.cl-row .cl-date,
.cl-row .cl-voice{ grid-column: 1 / -1; font-size: 10px; }
.cl-row .cl-text{ grid-column: 1 / -1; }
}
/* ─── Section nav as proper buttons ────────────────────────────────
The reference markup targets `.secnav button`, but the WP template renders
`.secnav-item` anchors — so the nav had ZERO of the intended segmented
button styling. Apply rules to the actual selector. */
.secnav .secnav-item,
.secnav button{
display: inline-flex; align-items: center;
background: transparent; border: none;
color: var(--ink-dim);
padding: 14px 18px;
cursor: pointer;
white-space: nowrap;
border-right: 1px solid var(--rule);
text-decoration: none;
transition: all .15s;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.secnav .secnav-item:hover,
.secnav button:hover{
color: var(--cyan);
background: oklch(0.20 0.06 200 / .25);
}
.secnav .secnav-item.active,
.secnav .secnav-item.is-current,
.secnav button.active{
color: var(--bg);
background: var(--magenta);
font-weight: 700;
}
/* ─── Filter chips — stronger button affordance ────────────────────
Brighter border contrast + slightly larger padding so chips read as
clickable buttons, not dim outlined text. */
.nm-chip{
border-color: oklch(0.45 0.05 285);
padding: 6px 12px;
font-weight: 500;
text-decoration: none;
}
.nm-chip:hover{
border-color: var(--cyan);
color: var(--ink);
background: oklch(0.18 0.10 200 / .15);
}
.nm-chip.on{
background: var(--magenta);
color: var(--bg);
border-color: var(--magenta);
font-weight: 700;
}
/* ─── Top-strip secondary nav (FEED · PRINT · BROADCAST · COMMUNE) ──
Renders to the right of the language pill. */
.top-strip .top-links{
display: inline-flex;
align-items: center;
gap: 18px;
margin-left: 14px;
}
.top-strip .top-links a{
color: var(--ink-dim);
text-decoration: none;
transition: color .12s;
}
.top-strip .top-links a:hover{ color: var(--cyan); }
/* Brand-mini in footer: render all-caps; the body class lock
only forced font-family. Add the text-transform here so the footer brand
reads PAZ KAFFI not "PAZ Kaffi". */
body.pkaffi-context footer.foot .brand-mini,
body.pkaffi-cyberpunk footer.foot .brand-mini{
text-transform: uppercase;
letter-spacing: -0.01em;
}
/* ─── Filter-strip compaction (P0 — vertical bloat) ───────────────
Reduce row padding + chip padding so the 2 chip rows aren't a wall. Allow
horizontal scroll when chips overflow instead of wrapping to many lines. */
.nm-filter{
padding: 10px 22px;
gap: 6px;
}
.nm-filter-row{
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--rule) transparent;
padding-bottom: 2px;
}
.nm-filter-row::-webkit-scrollbar{ height: 4px; }
.nm-filter-row::-webkit-scrollbar-thumb{ background: var(--rule); border-radius: 2px; }
.nm-filter-row .nm-chip{ flex-shrink: 0; padding: 4px 10px; }
.nm-filter-row .nm-chip-label{ flex-shrink: 0; min-width: 50px; }
.nm-search{ padding: 8px 12px; font-size: 12px; }
.nm-clear{ padding: 6px 10px; font-size: 10px; flex-shrink: 0; }
/* ─── Today-side cards visual weight (P0 — too prominent) ─────────
The 2 supporting cards under the hero were reading as co-protagonists.
Tighter image, smaller title, lighter background, reduced row height. */
.nm-today-side > .nm-card.nm-v-today-side{
background: oklch(0.09 0.02 285 / .35);
min-height: 0;
}
.nm-v-today-side .nm-card-img{
width: 26%;
aspect-ratio: 4/3;
}
.nm-v-today-side .nm-card-body{
padding: 12px 14px;
gap: 4px;
}
.nm-v-today-side .nm-card-title{
font-size: 14px;
line-height: 1.2;
-webkit-line-clamp: 2;
}
.nm-v-today-side .nm-card-dek{
-webkit-line-clamp: 1;
font-size: 11px;
}
.nm-v-today-side .nm-card-meta{
font-size: 9px;
padding-top: 4px;
}
/* ─── Card title line-clamp (P0 — unclamped overflow) ─────────────
Long titles broke the 6-col asymmetric grid rhythm. Clamp every variant
to a sensible cap; ellipsis on overflow. */
.nm-card-title{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-break: break-word;
}
.nm-v-tall .nm-card-title{ -webkit-line-clamp: 4; }
.nm-v-textonly .nm-card-title{ -webkit-line-clamp: 3; }
.nm-v-wide .nm-card-title{ -webkit-line-clamp: 2; }
.nm-hero-title{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.cl-title{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* ─── Back button polish (P1 — placement on single) ───────────────
Move it OUT of the article-sheet's absolute-positioned corner and pin it
to the viewport top-left so it stays reachable when scrolling long pieces. */
body.single-paz_kaffi .art-back{
position: fixed;
top: 60px;
left: 16px;
z-index: 25;
box-shadow: 0 2px 12px oklch(0.06 0.02 285 / .6);
}
@media (max-width: 900px){
body.single-paz_kaffi .art-back{
top: 50px;
left: 8px;
}
}
/* ─── Article footer 4-up (P1 — was 3-up) ─────────────────────────
Footer is 4-up: filed-from / co-signers / confidence / reprints. Already
using `.art-foot` grid; bump from 3 to 4 columns. PHP renders the new
cells with sensible defaults (FIELD DESK / — / HIGH / FREE). */
.article-sheet .art-foot{
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px){
.article-sheet .art-foot{ grid-template-columns: repeat(2, 1fr); }
}
/* ─── Per-article DE/EN toggle pill (P2) ──────────────────────────
Top-right inside article-sheet. Same look as the global .pkaffi-lang
pill but slightly larger for reader-mode usability. */
body.single-paz_kaffi .art-lang{
position: absolute;
top: 18px;
right: 18px;
z-index: 6;
display: inline-flex;
background: oklch(0.06 0.02 285 / .85);
border: 1px solid var(--magenta);
backdrop-filter: blur(6px);
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: .22em;
}
body.single-paz_kaffi .art-lang a{
padding: 6px 12px;
color: var(--ink-dim);
text-decoration: none;
border-right: 1px solid var(--rule);
transition: all .12s;
}
body.single-paz_kaffi .art-lang a:last-child{ border-right: none; }
body.single-paz_kaffi .art-lang a:hover{ color: var(--magenta); }
body.single-paz_kaffi .art-lang a.is-active{
background: var(--magenta);
color: var(--bg);
font-weight: 700;
}
/* ─── Tweaks dock v3 (kaffi-cup at the right edge unfolds the pill) ─
One warm CSS-drawn coffee cup, fixed on the right and dropped below the
masthead nameplate so it never covers the edition data in the meta-r
column; it stays near the top of the viewport on scroll (the masthead
scrolls away under the sticky top-strip). Click → the dock pill (4
palette dots · 3 effect dots) drops down below it; Esc or second click
folds it. Language dots stay
dropped (the EN/DE pills upper-right cover language). JS contract
unchanged (paz-tweaks.js): .twk-radio[data-twk] + button[data-value],
.twk-switch[data-twk], .is-on; cup toggle = [data-twk-cup] +
.twk-side.is-open. The body.pkaffi-context prefix on button rules is
load-bearing: the host-theme button reset outranks bare classes. */
.twk-side{
position: fixed; top: 150px; right: 28px;
z-index: 90;
display: flex; align-items: center; gap: 10px;
}
body.pkaffi-context .twk-cup{
box-sizing: border-box;
width: 38px; height: 38px; padding: 0;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--rule);
color: oklch(0.80 0.12 75); /* warm kaffi amber */
cursor: pointer;
position: relative;
box-shadow: 0 0 14px -6px oklch(0.80 0.12 75 / .8);
transition: all .15s;
}
body.pkaffi-context .twk-cup:hover{ border-color: var(--cyan); }
.twk-side.is-open .twk-cup{ border-color: var(--magenta); box-shadow: 0 0 12px -4px var(--magenta); }
.twk-cup:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
.twk-cup-body{
position: absolute; left: 50%; top: 57%;
width: 14px; height: 10px;
transform: translate(-50%, -50%);
border: 1.5px solid currentColor;
border-radius: 1px 1px 6px 6px;
}
.twk-cup-body::after{ /* handle */
content: "";
position: absolute; right: -6px; top: 1px;
width: 4px; height: 5px;
border: 1.5px solid currentColor;
border-left: none;
border-radius: 0 4px 4px 0;
}
.twk-cup-steam{
position: absolute; left: 50%; top: 7px;
width: 11px; height: 6px;
transform: translateX(-50%);
background:
linear-gradient(currentColor, transparent) no-repeat 1px 0 / 1px 6px,
linear-gradient(currentColor, transparent) no-repeat 5px 0 / 1px 6px,
linear-gradient(currentColor, transparent) no-repeat 9px 0 / 1px 6px;
animation: twk-steam 2.6s ease-in-out infinite;
}
@keyframes twk-steam{
0%, 100%{ opacity: .35; transform: translateX(-50%) translateY(0); }
50%{ opacity: .85; transform: translateX(-50%) translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce){
.twk-cup-steam{ animation: none; }
}
.twk-dock{
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
font-family: "JetBrains Mono", monospace;
}
/* The dock is a vertical pill that drops DOWN out of the cup — absolutely
positioned so the cup itself never moves when it unfolds. */
.twk-side .twk-dock{
position: absolute;
top: calc(100% + 10px);
left: 50%;
background: oklch(0.08 0.02 285 / .92);
border: 1px solid var(--rule);
border-radius: 999px;
padding: 12px 8px;
backdrop-filter: blur(8px);
visibility: hidden; opacity: 0;
transform: translate(-50%, -6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.twk-side.is-open .twk-dock{
visibility: visible; opacity: 1; transform: translate(-50%, 0);
}
.twk-sep{ width: 14px; height: 1px; background: var(--rule); }
.twk-dock .twk-radio,
.twk-dock .twk-fx{ display: flex; flex-direction: column; gap: 8px; flex-wrap: nowrap; }
body.pkaffi-context .twk-dock button{
box-sizing: border-box;
width: 22px; height: 22px; padding: 0;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--rule);
color: var(--ink-dim);
font-family: inherit; font-size: 8px; font-weight: 700; letter-spacing: .06em;
line-height: 1;
cursor: pointer;
transition: all .15s;
}
body.pkaffi-context .twk-dock button:hover{ border-color: var(--cyan); color: var(--cyan); }
.twk-dock button:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Palette — each dot painted with its OWN accent (literal copies of the
body[data-mode] --magenta tokens above; var(--magenta) here would
repaint every dot to whichever palette is active). Selected state must
survive forced-colors mode, where fills/shadows are stripped — the 2px
ring width is the structural cue, not colour alone. */
body.pkaffi-context .twk-dock [data-twk="palette"] button{
box-shadow: inset 0 0 0 2px var(--bg-2);
}
.twk-dock [data-twk="palette"] button[data-value="default"]{ background: oklch(0.66 0.28 350); }
.twk-dock [data-twk="palette"] button[data-value="acid"]{ background: oklch(0.85 0.22 130); }
.twk-dock [data-twk="palette"] button[data-value="ice"]{ background: oklch(0.78 0.18 220); }
.twk-dock [data-twk="palette"] button[data-value="blood"]{ background: oklch(0.58 0.25 25); }
body.pkaffi-context .twk-dock [data-twk="palette"] button.is-on{ border-width: 2px; }
body.pkaffi-context .twk-dock [data-twk="palette"] button.is-on[data-value="default"]{ border-color: oklch(0.66 0.28 350); box-shadow: inset 0 0 0 2px var(--bg-2), 0 0 10px oklch(0.66 0.28 350 / .55); }
body.pkaffi-context .twk-dock [data-twk="palette"] button.is-on[data-value="acid"]{ border-color: oklch(0.85 0.22 130); box-shadow: inset 0 0 0 2px var(--bg-2), 0 0 10px oklch(0.85 0.22 130 / .55); }
body.pkaffi-context .twk-dock [data-twk="palette"] button.is-on[data-value="ice"]{ border-color: oklch(0.78 0.18 220); box-shadow: inset 0 0 0 2px var(--bg-2), 0 0 10px oklch(0.78 0.18 220 / .55); }
body.pkaffi-context .twk-dock [data-twk="palette"] button.is-on[data-value="blood"]{ border-color: oklch(0.58 0.25 25); box-shadow: inset 0 0 0 2px var(--bg-2), 0 0 10px oklch(0.58 0.25 25 / .55); }
/* Effects — dashed ring = off, solid magenta ring + glow = on (state stays
readable without colour). Icons are currentColor CSS gradients (no
glyphs, so the colour-emoji fallback problem can't apply),
composed for a 12×12 canvas inside the 22px dot. `.twk-switch` stays on
the buttons — paz-tweaks.js binds .twk-switch[data-twk]. */
body.pkaffi-context .twk-dock .twk-switch{ border-style: dashed; }
.twk-dock .twk-fx-icon{ display: block; position: relative; width: 12px; height: 12px; }
.twk-dock .twk-fx-icon::before{ content: ""; position: absolute; inset: 0; }
.twk-dock .twk-fx-icon--scan::before{
background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 3px);
}
.twk-dock .twk-fx-icon--tile::before{
background: conic-gradient(currentColor 0 25%, transparent 0 50%, currentColor 0 75%, transparent 0);
}
.twk-dock .twk-fx-icon--glitch::before{
background:
linear-gradient(currentColor, currentColor) no-repeat 0 1px / 9px 2px,
linear-gradient(currentColor, currentColor) no-repeat 3px 5px / 9px 2px,
linear-gradient(currentColor, currentColor) no-repeat 1px 9px / 7px 2px;
}
body.pkaffi-context .twk-dock .twk-switch.is-on{
border-style: solid; border-color: var(--magenta); color: var(--magenta);
box-shadow: 0 0 10px color-mix(in oklab, var(--magenta) 50%, transparent);
}
/* Hovering an ON switch still signals "clickable → will turn off". */
body.pkaffi-context .twk-dock .twk-switch.is-on:hover{ border-color: var(--cyan); color: var(--cyan); }
/* Layout · matrix geometry (recovered): standard even grid vs the MAXRECTS
bin-packed geometry. Radio — one button is always on; .is-on takes the
cyan ring like any selected control. CSS-drawn icons, no glyphs. */
.twk-dock .twk-layout-icon{ display: block; position: relative; width: 12px; height: 12px; }
.twk-dock .twk-layout-icon::before{ content: ""; position: absolute; inset: 0; }
.twk-dock .twk-layout-icon--std::before{
background: repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 5px);
}
.twk-dock .twk-layout-icon--max::before{
background:
linear-gradient(currentColor, currentColor) no-repeat 0 0 / 7px 5px,
linear-gradient(currentColor, currentColor) no-repeat 8px 0 / 4px 7px,
linear-gradient(currentColor, currentColor) no-repeat 0 6px / 11px 6px;
}
body.pkaffi-context .twk-dock [data-twk="layout"] button.is-on{
border-color: var(--cyan); color: var(--cyan);
box-shadow: 0 0 10px color-mix(in oklab, var(--cyan) 50%, transparent);
}
/* ─── Single-article editorial blocks (bridge-stamp / five-beat / takeaway) ──
Three WP-only doctrine blocks rendered by single.php that had ZERO CSS
— they were inheriting host-theme defaults. Style them in the cyber
register so they read as deliberate editorial inserts. */
/* Bridge stamp — TODAY ↔ 3012 ↔ Fulcrum prediction block. */
.article-sheet .bridge-stamp{
margin: 28px 0;
padding: 18px 22px;
background: oklch(0.10 0.04 285 / .55);
border-left: 3px solid var(--cyan);
border-right: 1px solid var(--rule);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
position: relative;
}
.article-sheet .bridge-stamp::before{
content: "BRIDGE";
position: absolute;
top: -10px; left: 14px;
padding: 2px 8px;
background: var(--bg-2);
color: var(--cyan);
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: .3em;
font-weight: 700;
}
.article-sheet .bridge-stamp p{
margin: 4px 0;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
}
.article-sheet .bridge-stamp p strong{
color: var(--magenta);
font-weight: 700;
margin-right: 6px;
letter-spacing: .04em;
}
/* Five-beat — quick-read summary table (Signal/System/Street/Atelier/Move). */
.article-sheet .five-beat{
margin: 32px 0;
padding: 24px 26px 22px;
border: 1px solid var(--magenta);
background: oklch(0.10 0.04 285 / .35);
position: relative;
}
.article-sheet .five-beat h3{
margin: 0 0 14px;
font-family: "Archivo Black", sans-serif;
font-size: 13px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--magenta);
}
.article-sheet .five-beat dl{
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px 18px;
margin: 0 0 8px;
padding: 8px 0;
border-top: 1px dashed var(--rule);
}
.article-sheet .five-beat dl:first-of-type{ border-top: none; padding-top: 0; }
.article-sheet .five-beat dt{
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--cyan);
margin: 0;
padding-top: 2px;
}
.article-sheet .five-beat dd{
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--ink);
}
/* PAZ takeaway — the editorial conclusion / key insight callout. */
.article-sheet .paz-takeaway{
margin: 36px 0;
padding: 28px 32px;
border-top: 2px solid var(--magenta);
border-bottom: 2px solid var(--magenta);
background:
linear-gradient(180deg,
oklch(0.20 0.10 350 / .12) 0%,
oklch(0.10 0.04 285 / .35) 100%);
position: relative;
}
.article-sheet .paz-takeaway .kicker{
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 14px;
display: inline-block;
padding-right: 14px;
border-right: 1px solid var(--magenta);
}
.article-sheet .paz-takeaway p{
margin: 0;
font-family: "DM Serif Display", serif;
font-size: 22px;
line-height: 1.4;
color: var(--ink);
text-wrap: balance;
}
.article-sheet .paz-takeaway::before{
content: "▮";
position: absolute;
top: 24px; right: 28px;
color: var(--magenta);
font-size: 18px;
line-height: 1;
}
@media (max-width: 900px){
.article-sheet .bridge-stamp{ padding: 14px 16px; }
.article-sheet .five-beat{ padding: 18px 18px 16px; }
.article-sheet .five-beat dl{ grid-template-columns: 1fr; gap: 4px; }
.article-sheet .paz-takeaway{ padding: 22px 22px; }
.article-sheet .paz-takeaway p{ font-size: 18px; }
}
/* =========================================================================
PARITY FIXES
========================================================================= */
/* ─── Line-clamp card titles ─────────────────────────────────────
Long German headlines (4-5 lines) break grid track minima and force
`grid-auto-flow: dense` to leave gaps. Clamp per variant; tall/textonly
get more room because the variant itself is height-flexible. */
body.pkaffi-context .nm-card-title{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.pkaffi-context .nm-v-tall .nm-card-title{ -webkit-line-clamp: 4; }
body.pkaffi-context .nm-v-textonly .nm-card-title{ -webkit-line-clamp: 5; }
body.pkaffi-context .nm-v-wide .nm-card-title{ -webkit-line-clamp: 3; }
/* today-side already clamps to 3 (line 1422) — keep as-is, no override needed */
/* ─── Today-side row constrained so hero stays the protagonist ──
Before: `.nm-today-side { grid-template-columns: 1fr 1fr }` gave each
side card 50% of the full row width — visual mass ≈60% of the hero.
After: cards become two compact tiles aligned to the inline-start,
title weakens to 14px / 2-line clamp, dek to 1 line. Hero reclaims
"front page" hierarchy. Reverts at 640px (cards stack full width). */
body.pkaffi-context .nm-today-side{
grid-template-columns: minmax(220px, 30%) minmax(220px, 30%);
justify-content: flex-start;
}
body.pkaffi-context .nm-v-today-side .nm-card-title{
font-size: 14px;
font-weight: 500;
-webkit-line-clamp: 2;
}
body.pkaffi-context .nm-v-today-side .nm-card-dek{
font-size: 11px;
-webkit-line-clamp: 1;
}
body.pkaffi-context .nm-v-today-side .nm-card-img{ width: 32%; }
@media (max-width: 1100px){
/* Tablet: relax the cap so cards aren't claustrophobic. */
body.pkaffi-context .nm-today-side{
grid-template-columns: minmax(220px, 38%) minmax(220px, 38%);
}
}
@media (max-width: 640px){
/* Phone: full-width single column already in base CSS — let it win. */
body.pkaffi-context .nm-today-side{
grid-template-columns: 1fr;
}
}
/* ─── Filter-strip "+N MORE" cap ─────────────────────────────────
Pillar / voice rows are capped at N (default 6) inline chips. Overflow
chips live in `.nm-chips-overflow[hidden]` and are revealed by clicking
the `.nm-chip-more` button. The button visually distinguishes itself
from regular chips (cyan accent) so the affordance reads as control,
not as a category. */
body.pkaffi-context .nm-chips-overflow{
display: contents; /* once revealed, the chips rejoin the row */
}
body.pkaffi-context .nm-chips-overflow[hidden]{
display: none;
}
body.pkaffi-context .nm-chip-more{
border-color: var(--cyan);
color: var(--cyan);
font-weight: 700;
cursor: pointer;
background: transparent;
/* Match the .nm-chip metrics */
padding: 6px 12px;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
transition: all .12s;
}
body.pkaffi-context .nm-chip-more:hover{
background: var(--cyan);
color: var(--bg);
}
body.pkaffi-context .nm-chip-more[aria-expanded="true"]{
background: var(--cyan);
color: var(--bg);
}
/* =========================================================================
HOST-THEME OVERRIDE LOCK PASS
The dequeue removes the host theme's enqueued .css, but inline styles, theme.json
output, customizer CSS, page-builder rules, and other plugins can still
reach our /paz-kaffi/* zone. Force the brand identity on every selector
that was visibly bleeding (links blue, play button browser-default, etc).
All scoped to body.pkaffi-context so the rest of the site stays untouched.
========================================================================= */
body.pkaffi-context,
body.pkaffi-context.single-paz_kaffi{
background-color: var(--bg) !important;
color: var(--ink) !important;
font-family: "Space Grotesk", system-ui, sans-serif !important;
}
body.pkaffi-context h1,
body.pkaffi-context h2,
body.pkaffi-context h3,
body.pkaffi-context h4,
body.pkaffi-context h5,
body.pkaffi-context h6{
color: var(--ink) !important;
font-family: "DM Serif Display", "Space Grotesk", serif !important;
}
body.pkaffi-context .masthead h1.brand,
body.pkaffi-context footer.foot .brand-mini{
font-family: "Major Mono Display", "JetBrains Mono", monospace !important;
}
body.pkaffi-context a,
body.pkaffi-context a:visited,
body.pkaffi-context a:hover,
body.pkaffi-context a:focus,
body.pkaffi-context a:active{
color: inherit !important;
text-decoration: none !important;
box-shadow: none !important;
}
body.pkaffi-context .top-strip .top-links a{ color: var(--ink-dim) !important; }
body.pkaffi-context .top-strip .top-links a:hover{ color: var(--cyan) !important; }
body.pkaffi-context .secnav .secnav-item{ color: var(--ink-dim) !important; }
body.pkaffi-context .secnav .secnav-item:hover{ color: var(--cyan) !important; }
body.pkaffi-context .secnav .secnav-item.active{ color: var(--bg) !important; }
body.pkaffi-context .nm-chip{ color: var(--ink-dim) !important; }
body.pkaffi-context .nm-chip.on{ color: var(--bg) !important; }
body.pkaffi-context .nm-tm-chip{ color: var(--ink-dim) !important; }
body.pkaffi-context .nm-tm-chip.on{ color: var(--bg) !important; }
body.pkaffi-context .nm-card-title,
body.pkaffi-context .nm-card-title a,
body.pkaffi-context .nm-hero-title,
body.pkaffi-context .nm-hero-title a,
body.pkaffi-context .cl-title,
body.pkaffi-context .cl-title a{ color: var(--ink) !important; }
body.pkaffi-context .nm-card:hover .nm-card-title,
body.pkaffi-context .nm-card:hover .nm-card-title a{ color: var(--magenta) !important; }
body.pkaffi-context .nm-card-dek,
body.pkaffi-context .nm-hero-dek,
body.pkaffi-context .cl-dek{ color: var(--ink-dim) !important; }
body.pkaffi-context .nm-card-meta,
body.pkaffi-context .nm-hero-byline,
body.pkaffi-context .cl-pillar,
body.pkaffi-context .cl-voice{ color: var(--cyan) !important; }
body.pkaffi-context footer.foot a{ color: var(--ink-dim) !important; }
body.pkaffi-context footer.foot a:hover{ color: var(--cyan) !important; }
body.pkaffi-context .art-cols a{ color: var(--magenta) !important; }
body.pkaffi-context .art-cols a:hover{ color: var(--cyan) !important; }
body.pkaffi-context .art-back{ color: var(--cyan) !important; }
body.pkaffi-context .art-topic{ color: var(--ink) !important; }
body.pkaffi-context .art-topic.is-cyan{ color: var(--cyan) !important; }
body.pkaffi-context .art-topic.is-acid{ color: var(--acid) !important; }
body.pkaffi-context .art-topic:hover{ color: var(--bg) !important; }
body.pkaffi-context .pkaffi-lang a{ color: var(--ink-dim) !important; }
body.pkaffi-context .pkaffi-lang a.is-active{ color: var(--bg) !important; }
body.pkaffi-context .art-lang a{ color: var(--ink-dim) !important; }
body.pkaffi-context .art-lang a.is-active{ color: var(--bg) !important; }
/* Buttons full reset — host theme often forces background, border-radius,
font-size, padding on every