/*
Theme Name:   QuirkyByte (GeneratePress child)
Theme URI:    https://www.quirkybyte.com/
Description:  QuirkyByte design system v0.3 (Entertainment-only home with featured-image-only queries + 4 category landing themes incl. Automobiles "Pit Lane", SVG logo lockup), a child theme of GeneratePress (free) + GenerateBlocks (free). Holds the design tokens, self-hosted fonts and component styles for the home, category and article templates.
Author:       QuirkyByte
Template:     generatepress
Version:      0.4.3
Requires at least: 6.4
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  quirkybyte
*/

/* =========================================================
   1. TOKENS, FONTS AND COMPONENTS (shared with the static mockup)
   Component class names (.ticker, .hero, .river, .tldr, .facts, .faq,
   .author-box, .share-rail…) are output by functions.php hooks or by
   the block patterns it registers. Add them in the block editor via
   Advanced → Additional CSS class(es).
   ========================================================= */
@font-face{font-family:"Archivo";src:url(fonts/Archivo-latin-var.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/SourceSerif4-latin-var.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  /* Color — core */
  --qb-ink:#0E1020;        /* header, footer, dark surfaces */
  --qb-ink-2:#1A1D2E;      /* raised dark surface */
  --qb-paper:#FFFFFF;
  --qb-surface:#F4F5F8;    /* card wells, sidebar boxes */
  --qb-line:#E3E5EB;
  --qb-text:#14161F;
  --qb-muted:#5B5F6B;      /* 6.4:1 on white */
  --qb-accent:#FF5A36;     /* "Byte Coral" — on dark or large text only */
  --qb-accent-ink:#D4321F; /* coral for text/links on white (4.9:1) */
  --qb-pop:#2EE6C5;        /* "Glitch Mint" — on dark only: live dots, ticker label */
  /* Color — verticals (white text passes AA on all) */
  --v-ent:#D4321F; --v-tech:#2559D9; --v-life:#A51FB8; --v-auto:#F5B700; --v-auto-ink:#8A5A00;
  /* Type */
  --f-ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem;
  --fs-2xl:clamp(1.375rem,1.1rem + 1vw,1.75rem);
  --fs-3xl:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  --fs-hero:clamp(1.75rem,1.1rem + 2.6vw,3rem);
  --lh-tight:1.12; --lh-snug:1.25; --lh-body:1.65;
  /* Space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --radius:6px; --radius-lg:12px;
  --container:1240px; --gutter:24px; --sidebar:320px;
  --shadow:0 1px 2px rgba(14,16,32,.06),0 4px 16px rgba(14,16,32,.06);
}
@media (max-width:767px){:root{--gutter:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-ui);font-size:var(--fs-md);line-height:1.5;color:var(--qb-text);background:var(--qb-paper)}
a{color:inherit;text-decoration:none}
a:hover .t,a:hover.t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--qb-accent);outline-offset:2px}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kicker / labels ---------- */
.kicker{display:inline-block;font:800 var(--fs-xs)/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--qb-accent-ink)}
.kicker.tech{color:var(--v-tech)}.kicker.life{color:var(--v-life)}.kicker.auto{color:var(--v-auto-ink)}
.pill{display:inline-block;font:800 10px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--v-ent);padding:5px 7px;border-radius:3px}
.pill.tech{background:var(--v-tech)}.pill.life{background:var(--v-life)}.pill.auto{background:var(--v-auto);color:#14161F}
.pill.excl{background:var(--qb-ink);color:var(--qb-pop)}
.meta{font-size:var(--fs-xs);color:var(--qb-muted);font-weight:500}
.meta b{color:var(--qb-text);font-weight:700}

/* ---------- Ad slots (reserved height = zero CLS) ---------- */
.ad{display:grid;place-items:center;background:var(--qb-surface);border:1px dashed #C9CDD6;color:#8A8F9C;font:600 11px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;margin:var(--s5) auto}
.ad.leader{width:min(100%,970px);min-height:90px}
.ad.mrec{width:300px;min-height:250px}
.ad.half{width:300px;min-height:600px}
.ad.inline{width:min(100%,336px);min-height:280px}
@media (max-width:767px){.ad.leader{min-height:100px;width:320px}}

/* ---------- Header ---------- */
.topbar{background:var(--qb-ink);color:#C9CCDA;font-size:var(--fs-xs)}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:var(--s4)}
.topbar a{color:#C9CCDA}.topbar a:hover{color:#fff}
.topbar .follow{display:flex;gap:var(--s3);flex-wrap:wrap}
.masthead{background:var(--qb-ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid var(--qb-accent)}
.masthead .container{display:flex;align-items:center;gap:var(--s5);min-height:64px}
.logo{font:900 30px/1 var(--f-ui);font-stretch:72%;letter-spacing:-.01em;color:#fff;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo .mark{width:30px;height:30px;border-radius:7px;background:var(--qb-accent);display:grid;place-items:center;font-size:16px;color:var(--qb-ink);font-stretch:100%}
.logo .byte{color:var(--qb-accent)}
.mainnav{flex:1}
.mainnav>ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.mainnav>ul>li>a{display:flex;align-items:center;gap:6px;padding:0 14px;height:64px;font:800 15px/1 var(--f-ui);letter-spacing:.04em;text-transform:uppercase}
.mainnav>ul>li>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.mainnav>ul>li>a .dot{width:8px;height:8px;border-radius:50%;background:var(--v-ent)}
.mainnav li.tech .dot{background:#6E98FF}.mainnav li.life .dot{background:#E07AF0}.mainnav li.auto .dot{background:#F5B700}
.mainnav>ul>li:hover>a,.mainnav>ul>li:focus-within>a{background:var(--qb-ink-2);color:var(--qb-accent)}
/* Mega panel */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--qb-text);box-shadow:0 16px 40px rgba(14,16,32,.18);border-top:3px solid var(--qb-accent);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.mainnav>ul>li:hover .mega,.mainnav>ul>li:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega .container{display:grid;grid-template-columns:220px 1fr;gap:var(--s6);padding-top:var(--s5);padding-bottom:var(--s5)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega ul a{display:block;padding:8px 10px;border-radius:4px;font-weight:700}
.mega ul a:hover{background:var(--qb-surface);color:var(--qb-accent-ink)}
.mega .picks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.mega .picks .t{font-weight:700;font-size:var(--fs-sm);line-height:var(--lh-snug);margin-top:8px;display:block}
.hdr-tools{display:flex;align-items:center;gap:var(--s3)}
.btn{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--f-ui);letter-spacing:.03em;padding:10px 14px;border-radius:999px;border:0;cursor:pointer}
.btn.coral{background:var(--qb-accent);color:var(--qb-ink)}
.btn.ghost{background:transparent;color:#fff;border:1px solid #3A3F5A}
.btn.dark{background:var(--qb-ink);color:#fff}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid #3A3F5A;background:transparent}
/* Mobile nav (CSS-only, <details>) */
.mnav{display:none}
@media (max-width:1023px){
  .mainnav,.hdr-tools .btn.ghost{display:none}
  .mnav{display:block}
  .masthead .container{min-height:56px;gap:var(--s3)}
  .logo{font-size:24px;flex:1}
  .mnav summary{list-style:none;cursor:pointer}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav[open] .drawer{display:block}
  .drawer{display:none;position:absolute;left:0;right:0;top:100%;background:var(--qb-ink);max-height:80vh;overflow:auto;padding:var(--s4) var(--gutter) var(--s6);border-top:1px solid #2A2E44}
  .drawer h4{margin:var(--s4) 0 var(--s2);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--qb-pop)}
  .drawer a{display:block;padding:10px 0;color:#fff;font-weight:700;border-bottom:1px solid #22263A}
}
/* Sub-nav (vertical subcats) */
.subnav{background:var(--qb-ink-2);color:#C9CCDA;overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav ul{list-style:none;margin:0 auto;padding:0 var(--gutter);display:flex;gap:var(--s5);max-width:var(--container);min-height:40px;align-items:center;white-space:nowrap}
.subnav a{font:700 13px/1 var(--f-ui)}.subnav a:hover,.subnav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--qb-accent)}

/* ---------- Trending ticker ---------- */
.ticker{border-bottom:1px solid var(--qb-line);background:#fff}
.ticker .container{display:flex;align-items:center;gap:var(--s4);min-height:44px;overflow:hidden}
.ticker .lbl{flex:none;display:flex;align-items:center;gap:8px;font:900 12px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;background:var(--qb-ink);color:var(--qb-pop);padding:8px 10px;border-radius:4px}
.ticker .lbl i{width:8px;height:8px;border-radius:50%;background:var(--qb-pop);box-shadow:0 0 0 3px rgba(46,230,197,.25)}
.ticker .track{overflow:hidden;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.ticker ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s6);white-space:nowrap;animation:qb-scroll 40s linear infinite}
.ticker:hover ul{animation-play-state:paused}
.ticker li a{font-weight:700;font-size:var(--fs-sm)}
.ticker li a::before{content:"#";color:var(--qb-accent-ink);margin-right:4px;font-weight:900}
@keyframes qb-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker ul{animation:none;overflow-x:auto}}

/* ---------- Generic section heading ---------- */
.sec-h{display:flex;align-items:center;gap:var(--s3);margin:var(--s7) 0 var(--s4);border-top:3px solid var(--qb-text);padding-top:var(--s3)}
.sec-h h2{margin:0;font:900 var(--fs-2xl)/1 var(--f-ui);font-stretch:72%;text-transform:uppercase;letter-spacing:.01em}
.sec-h .more{margin-left:auto;font:800 13px/1 var(--f-ui);color:var(--qb-accent-ink);text-transform:uppercase;letter-spacing:.06em}
.sec-h .more::after{content:" →"}
.sec-h.tech{border-color:var(--v-tech)}.sec-h.life{border-color:var(--v-life)}.sec-h.auto{border-color:var(--v-auto)}.sec-h.ent{border-color:var(--v-ent)}

/* ---------- Layout: main + sidebar ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:var(--s6)}
@media (max-width:1023px){.layout{grid-template-columns:1fr}}

/* ---------- Hero + 4-up ---------- */
.hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:var(--s6);margin-top:var(--s5)}
.hero{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--qb-ink)}
.hero .ph{border-radius:0;aspect-ratio:16/9}
.hero .ov{position:absolute;inset:auto 0 0 0;padding:var(--s7) var(--s5) var(--s5);background:linear-gradient(transparent,rgba(14,16,32,.92) 45%);color:#fff}
.hero h1,.hero h2{margin:var(--s2) 0;font:900 var(--fs-hero)/1.04 var(--f-ui);font-stretch:70%;letter-spacing:-.005em}
.hero p{margin:0 0 var(--s3);color:#D5D8E4;font-size:var(--fs-lg);max-width:60ch}
.hero .meta{color:#B8BCCB}.hero .meta b{color:#fff}
.latest-rail{background:var(--qb-surface);border-radius:var(--radius-lg);padding:var(--s4)}
.rail-h{display:flex;align-items:center;gap:8px;margin:0 0 var(--s3);font:900 14px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.rail-h i{width:8px;height:8px;border-radius:50%;background:var(--qb-accent-ink)}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list li{display:grid;grid-template-columns:1fr 84px;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--qb-line)}
.rail-list li:first-child{border-top:0}
.rail-list .t{font-weight:700;font-size:var(--fs-sm);line-height:var(--lh-snug);display:block;margin-top:4px}
.rail-list time{font-size:11px;font-weight:700;color:var(--qb-accent-ink)}
.rail-list .ph{aspect-ratio:1/1;border-radius:4px}
.rail-list .ph::after{display:none}
.four-up{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s4)}
@media (max-width:1023px){.hero-wrap{grid-template-columns:1fr}.four-up{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.hero{border-radius:0;margin:0 calc(-1 * var(--gutter))}.hero .ph{aspect-ratio:4/3}.hero .ov{padding:var(--s6) var(--gutter) var(--s4)}.hero p{display:none}}

/* ---------- Cards ---------- */
.card{display:block}
.card .ph{margin-bottom:var(--s3)}
.card .t{display:block;font:800 var(--fs-lg)/var(--lh-snug) var(--f-ui);font-stretch:92%;margin:6px 0}
.card .dek{margin:0 0 6px;color:var(--qb-muted);font-size:var(--fs-sm);line-height:1.45}
.card.sm .t{font-size:var(--fs-md)}
.card.lg .t{font-size:var(--fs-2xl);font-stretch:78%;font-weight:900;line-height:var(--lh-tight)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
@media (max-width:767px){.grid-3,.grid-2{grid-template-columns:1fr}.four-up{gap:var(--s3)}.four-up .card .t{font-size:var(--fs-sm)}}

/* ---------- Latest river (Deadline-style) ---------- */
.river{list-style:none;margin:0;padding:0}
.river li{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--qb-line)}
.river .t{display:block;font:800 var(--fs-xl)/var(--lh-snug) var(--f-ui);font-stretch:90%;margin:8px 0 6px}
.river .dek{margin:0 0 8px;color:var(--qb-muted);font-size:var(--fs-sm)}
.river .tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:767px){.river li{grid-template-columns:1fr 112px;gap:var(--s3);padding:var(--s4) 0}.river .t{font-size:var(--fs-md)}.river .dek{display:none}.river .ph{aspect-ratio:1/1}.river .ph::after{display:none}}
.loadmore{display:block;width:100%;margin:var(--s5) 0;padding:14px;text-align:center;border:2px solid var(--qb-text);border-radius:999px;font:800 14px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Sidebar ---------- */
.side{display:flex;flex-direction:column;gap:var(--s5)}
.side .sticky{position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--s5)}
.box{background:var(--qb-surface);border-radius:var(--radius-lg);padding:var(--s4)}
.ranked{list-style:none;margin:0;padding:0;counter-reset:r}
.ranked li{counter-increment:r;display:grid;grid-template-columns:36px 1fr;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--qb-line)}
.ranked li:first-child{border-top:0}
.ranked li::before{content:counter(r);font:900 30px/1 var(--f-ui);font-stretch:75%;color:var(--qb-accent-ink)}
.ranked .t{font-weight:700;font-size:var(--fs-sm);line-height:var(--lh-snug)}
@media (max-width:1023px){.side .sticky{position:static}.ad.half{display:none}}

/* ---------- Explained / Ranked feature band ---------- */
.band{background:var(--qb-ink);color:#fff;margin-top:var(--s7);padding:var(--s6) 0 var(--s7)}
.band .sec-h{border-color:var(--qb-accent);margin-top:0}
.band .sec-h h2{color:#fff}
.band .sec-h .more{color:var(--qb-accent)}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.explainer{display:grid;grid-template-columns:140px 1fr;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid #2A2E44}
.explainer .q{font:900 var(--fs-lg)/var(--lh-snug) var(--f-ui)}
.explainer .q::before{content:"Q. ";color:var(--qb-pop)}
.explainer p{margin:6px 0 0;color:#B8BCCB;font-size:var(--fs-sm)}
.rankcard{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-top:1px solid #2A2E44}
.rankcard .n{font:900 52px/1 var(--f-ui);font-stretch:70%;color:transparent;-webkit-text-stroke:1.5px var(--qb-accent)}
.rankcard .t{font:800 var(--fs-lg)/var(--lh-snug) var(--f-ui)}
.band .meta{color:#9DA2B4}
@media (max-width:767px){.band-grid{grid-template-columns:1fr}.explainer{grid-template-columns:96px 1fr}}

/* ---------- Category blocks (4 verticals) ---------- */
.cat-blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s6)}
.cat-block .lead{margin-bottom:var(--s3)}
.cat-block ul{list-style:none;margin:0;padding:0}
.cat-block li{padding:10px 0;border-top:1px solid var(--qb-line);font-weight:700;font-size:var(--fs-sm)}
@media (max-width:767px){.cat-blocks{grid-template-columns:1fr}}

/* ---------- Video block (YouTube facade) ---------- */
.video{display:grid;grid-template-columns:2fr 1fr;gap:var(--s5)}
.yt{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden}
.yt .ph{border-radius:0}
.yt .play{position:absolute;inset:0;margin:auto;width:76px;height:54px;border-radius:14px;background:var(--qb-accent);display:grid;place-items:center}
.yt .play::before{content:"";border-left:20px solid var(--qb-ink);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.yt-list{display:grid;gap:var(--s4);align-content:start}
.yt-list a{display:grid;grid-template-columns:140px 1fr;gap:var(--s3);font-weight:700;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.yt-sub{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2);flex-wrap:wrap}
@media (max-width:767px){.video{grid-template-columns:1fr}.yt-list a{grid-template-columns:120px 1fr}}

/* ---------- Newsletter ---------- */
.nl{background:linear-gradient(120deg,var(--qb-ink) 0 60%,#2A1A3A);color:#fff;border-radius:var(--radius-lg);padding:var(--s6);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s5);align-items:center;margin-top:var(--s7)}
.nl h3{margin:0 0 6px;font:900 var(--fs-2xl)/1.1 var(--f-ui);font-stretch:75%}
.nl p{margin:0;color:#C9CCDA}
.nl .f{display:flex;gap:8px;flex-wrap:wrap}
.nl input{flex:1;min-width:200px;padding:13px 16px;border-radius:999px;border:0;font:500 15px var(--f-ui)}
.nl.side-nl{grid-template-columns:1fr;padding:var(--s5);margin-top:0}
@media (max-width:767px){.nl{grid-template-columns:1fr;padding:var(--s5)}}

/* ---------- Discover / Follow CTA ---------- */
.follow-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--qb-line);border-radius:var(--radius-lg);background:var(--qb-surface);font-size:var(--fs-sm);font-weight:700}
.follow-cta .btn{padding:8px 12px;font-size:12px;border:1px solid var(--qb-text);background:#fff;color:var(--qb-text)}

/* ---------- Breadcrumbs ---------- */
.crumbs{font:700 12px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--qb-muted);margin:var(--s5) 0 var(--s3);display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--qb-accent-ink)}
.crumbs span[aria-hidden]{color:#B0B4C0}

/* ---------- Category page ---------- */
.cat-hero{background:var(--qb-ink);color:#fff;padding:var(--s6) 0 var(--s5);border-bottom:4px solid var(--v-ent)}
.cat-hero h1{margin:var(--s2) 0;font:900 var(--fs-3xl)/1 var(--f-ui);font-stretch:68%;text-transform:uppercase}
.cat-hero p{margin:0;color:#C9CCDA;max-width:70ch}
.cat-hero .crumbs{margin-top:0}.cat-hero .crumbs a{color:var(--qb-accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.chips a{padding:8px 14px;border-radius:999px;border:1px solid #3A3F5A;font:700 13px/1 var(--f-ui)}
.chips a[aria-current]{background:var(--qb-accent);color:var(--qb-ink);border-color:var(--qb-accent)}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:var(--s5) 0}
.pager a{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--qb-line);border-radius:6px;font-weight:800}
.pager a[aria-current]{background:var(--qb-text);color:#fff}
.cat-intro{font-size:var(--fs-sm);color:var(--qb-muted);border-top:1px solid var(--qb-line);padding-top:var(--s4);margin-top:var(--s5)}

/* ---------- Article ---------- */
.art-head{max-width:860px}
.art-head h1{margin:var(--s2) 0 var(--s3);font:900 var(--fs-3xl)/1.06 var(--f-ui);font-stretch:74%;letter-spacing:-.01em}
.art-head .dek{margin:0 0 var(--s4);font:500 var(--fs-xl)/1.45 var(--f-ui);color:#3A3E4A}
.byline{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--qb-line);border-bottom:1px solid var(--qb-line);flex-wrap:wrap}
.avatar{width:44px;height:44px;border-radius:50%;background:repeating-linear-gradient(135deg,#C9CDD6 0 6px,#DADDE4 6px 12px);flex:none}
.byline .who{font-size:var(--fs-sm);line-height:1.35}
.byline .who a{font-weight:800;text-decoration:underline;text-decoration-color:var(--qb-accent);text-underline-offset:3px}
.byline .when{font-size:var(--fs-xs);color:var(--qb-muted)}
.byline .follow-g{margin-left:auto}
.art-figure{margin:var(--s5) 0}
.art-figure figcaption{font-size:var(--fs-xs);color:var(--qb-muted);margin-top:6px}
.art-grid{display:grid;grid-template-columns:56px minmax(0,1fr) var(--sidebar);gap:var(--s6);margin-top:var(--s5)}
.share-rail{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:10px;align-items:center}
.share-rail .lbl{font:800 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--qb-muted)}
.share-rail a,.share-bar a{width:42px;height:42px;border-radius:50%;border:1px solid var(--qb-line);display:grid;place-items:center;font:800 12px/1 var(--f-ui);background:#fff}
.share-rail a:hover{border-color:var(--qb-text)}
.share-bar{display:none}
.prose{font-family:var(--f-body);font-size:1.1875rem;line-height:var(--lh-body);color:#1C1E27;max-width:700px}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--qb-accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose h2{font:900 var(--fs-2xl)/1.15 var(--f-ui);font-stretch:80%;margin:1.6em 0 .5em;color:var(--qb-text)}
.prose h3{font:800 var(--fs-xl)/1.25 var(--f-ui);margin:1.4em 0 .4em}
.prose blockquote{margin:1.4em 0;padding:0 0 0 var(--s4);border-left:4px solid var(--qb-accent);font-style:italic;color:#3A3E4A}
/* TL;DR key points */
.tldr{font-family:var(--f-ui);background:var(--qb-surface);border:1px solid var(--qb-line);border-left:5px solid var(--qb-accent);border-radius:var(--radius);padding:var(--s4) var(--s5);margin:0 0 var(--s5)}
.tldr h2{margin:0 0 var(--s2)!important;font:900 13px/1 var(--f-ui)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--qb-accent-ink)}
.tldr ul{margin:0;padding-left:1.1em;font-size:var(--fs-md);line-height:1.5}
.tldr li{margin:6px 0}.tldr li::marker{color:var(--qb-accent-ink)}
/* Quick facts (AEO) */
.facts{font-family:var(--f-ui);display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--qb-line);border-radius:var(--radius);overflow:hidden;margin:0 0 var(--s5);font-size:var(--fs-sm)}
.facts div{padding:10px 14px;border-bottom:1px solid var(--qb-line)}
.facts dt{font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--qb-muted)}
.facts dd{margin:2px 0 0;font-weight:700}
/* TOC */
.toc{font-family:var(--f-ui);border:1px solid var(--qb-line);border-radius:var(--radius);margin:0 0 var(--s5)}
.toc summary{cursor:pointer;padding:12px 16px;font:800 14px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.06em}
.toc ol{margin:0;padding:0 16px 14px 36px;font-size:var(--fs-sm);line-height:1.8}
/* Inline related */
.inline-rel{font-family:var(--f-ui);border-top:3px solid var(--qb-text);border-bottom:1px solid var(--qb-line);padding:var(--s3) 0;margin:var(--s5) 0}
.inline-rel .rail-h{margin-bottom:var(--s2)}
.inline-rel .grid-2 a{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);font-weight:700;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.inline-rel .ph::after{display:none}
/* FAQ */
.faq{font-family:var(--f-ui);margin:var(--s5) 0}
.faq details{border-top:1px solid var(--qb-line);padding:var(--s3) 0}
.faq details:last-child{border-bottom:1px solid var(--qb-line)}
.faq summary{cursor:pointer;font:800 var(--fs-lg)/1.35 var(--f-ui);list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--qb-accent-ink)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:8px 0 0;font-family:var(--f-body);font-size:var(--fs-lg);line-height:1.55;color:#33363F}
/* Tags */
.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s5) 0;font-family:var(--f-ui)}
.tags-row b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.tags-row a{padding:7px 12px;border-radius:999px;background:var(--qb-surface);font:700 13px/1 var(--f-ui)}
/* Author box */
.author-box{font-family:var(--f-ui);display:grid;grid-template-columns:88px 1fr;gap:var(--s4);padding:var(--s5);background:var(--qb-surface);border-radius:var(--radius-lg);margin:var(--s6) 0}
.author-box .avatar{width:88px;height:88px}
.author-box h3{margin:0;font:900 var(--fs-xl)/1.2 var(--f-ui)}
.author-box .role{font-size:var(--fs-xs);font-weight:700;color:var(--qb-accent-ink);text-transform:uppercase;letter-spacing:.08em}
.author-box p{margin:8px 0;font-size:var(--fs-sm);color:#3A3E4A}
.author-box .links{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:var(--fs-xs);font-weight:800}
.author-box .links a{text-decoration:underline;text-underline-offset:3px}
.updated-note{font-family:var(--f-ui);font-size:var(--fs-xs);color:var(--qb-muted);border-left:3px solid var(--qb-line);padding-left:10px;margin:var(--s4) 0}
@media (max-width:1023px){.art-grid{grid-template-columns:minmax(0,1fr)}.share-rail{display:none}
  .share-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);border-top:1px solid var(--qb-line);padding:8px var(--gutter);gap:10px;justify-content:center;backdrop-filter:blur(6px)}
  body.article{padding-bottom:64px}}
@media (max-width:767px){.prose{font-size:1.125rem}.art-head .dek{font-size:var(--fs-lg)}.facts{grid-template-columns:1fr}.byline .follow-g{margin-left:0}.author-box{grid-template-columns:64px 1fr;padding:var(--s4)}.author-box .avatar{width:64px;height:64px}}

/* ---------- Footer ---------- */
.footer{background:var(--qb-ink);color:#B8BCCB;margin-top:var(--s8);padding:var(--s7) 0 var(--s5);font-size:var(--fs-sm)}
.footer .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s5)}
.footer h4{color:#fff;margin:0 0 var(--s3);font:900 13px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer a:hover{color:#fff}
.footer .legal{border-top:1px solid #2A2E44;margin-top:var(--s6);padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:var(--fs-xs)}
@media (max-width:767px){.footer .cols{grid-template-columns:1fr 1fr}.footer .cols>div:first-child{grid-column:1/-1}}

.rail-more{display:inline-block;margin-top:8px;font:800 13px/1 var(--f-ui);color:var(--qb-accent-ink);text-transform:uppercase;letter-spacing:.06em}.rail-more::after{content:" →"}
.hero .ph::after{inset:12px 12px auto auto}
@media (max-width:767px){.topbar{display:none}}
@media (min-width:1200px){.cat-blocks{grid-template-columns:repeat(4,1fr);gap:var(--s5)}.cat-blocks .card .ph{aspect-ratio:3/2}}
.prose .inline-rel a{color:var(--qb-text);text-decoration:none}
.prose .inline-rel a:hover span{text-decoration:underline}
.byline .who{flex:1;min-width:200px}


/* =========================================================
   2. GENERATEPRESS MAPPING
   GP's own markup gets the tokens so Customizer settings are not
   needed for color and type. Set Customizer → Typography to "System
   default" so GP does not load Google Fonts.
   ========================================================= */
body{font-family:var(--f-ui);color:var(--qb-text)}
.site-header{background:var(--qb-ink);color:#fff;border-bottom:3px solid var(--qb-accent);position:sticky;top:0;z-index:50}
.site-header a{color:#fff}
.main-title a,.site-logo{font:900 30px/1 var(--f-ui);font-stretch:72%;letter-spacing:-.01em;text-transform:uppercase}
.main-navigation,.main-navigation ul ul{background:var(--qb-ink)}
.main-navigation .main-nav ul li a{font:800 var(--fs-sm)/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:#fff;padding-left:14px;padding-right:14px}
.main-navigation .main-nav ul li:hover>a,.main-navigation .main-nav ul li.current-menu-item>a{color:var(--qb-accent)}
.main-navigation .menu-item.v-ent>a::before,.main-navigation .menu-item.v-tech>a::before,
.main-navigation .menu-item.v-life>a::before,.main-navigation .menu-item.v-auto>a::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
.menu-item.v-ent>a::before{background:var(--qb-accent)}.menu-item.v-tech>a::before{background:#6F9BFF}
.menu-item.v-life>a::before{background:#E27BF0}.menu-item.v-auto>a::before{background:#F5B700}

/* Mega menu: give a top-level menu item the CSS class "mega-menu"
   (Appearance → Menus → Screen Options → CSS Classes). Its 2nd-level
   items become columns and the 3rd-level items become links. Pure CSS, no plugin. */
@media (min-width:1024px){
  .main-navigation .mega-menu{position:static}
  .main-navigation .mega-menu>ul{position:absolute;left:0;right:0;width:100%;max-width:var(--container);margin:0 auto;display:grid!important;grid-template-columns:repeat(4,1fr);gap:var(--s5);padding:var(--s5);background:var(--qb-ink-2);border-top:3px solid var(--qb-accent);box-shadow:0 20px 40px rgba(0,0,0,.35)}
  .main-navigation .mega-menu>ul>li>a{font-weight:900;color:var(--qb-pop)!important;border-bottom:1px solid rgba(255,255,255,.12)}
  .main-navigation .mega-menu ul ul{position:static!important;display:block!important;opacity:1!important;visibility:visible!important;height:auto!important;width:auto!important;box-shadow:none;background:transparent;left:auto!important}
  .main-navigation .mega-menu ul ul a{text-transform:none!important;letter-spacing:0!important;font-weight:600!important;padding:6px 0!important}
  .main-navigation .mega-menu .dropdown-menu-toggle{display:none}
}
/* Content and sidebar widths */
.grid-container{max-width:var(--container)}
.inside-article,.sidebar .widget,.separate-containers .inside-article{padding:0;background:transparent}
.separate-containers .site-main{margin:var(--s5) var(--s5) var(--s5) 0}
.right-sidebar .widget-area{width:var(--sidebar)}
.widget-area .widget{background:var(--qb-surface);border-radius:var(--radius-lg);padding:var(--s4);margin-bottom:var(--s5)}
.widget-title{font:900 var(--fs-sm)/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
/* Single post */
.single .entry-title{font:900 var(--fs-3xl)/1.06 var(--f-ui);font-stretch:74%;letter-spacing:-.01em;max-width:22ch}
.single .entry-content{font-family:var(--f-body);font-size:1.125rem;line-height:var(--lh-body);max-width:68ch}
.single .entry-content h2{font:900 var(--fs-2xl)/1.15 var(--f-ui);font-stretch:80%;margin-top:2em}
.single .entry-content h3{font:800 var(--fs-xl)/1.2 var(--f-ui)}
.single .entry-content a{color:var(--qb-accent-ink);text-decoration:underline;text-underline-offset:3px}
.entry-meta{font:500 var(--fs-xs)/1.4 var(--f-ui);color:var(--qb-muted)}
.featured-image img,.post-image img{border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover}
/* Rank Math breadcrumbs */
.rank-math-breadcrumb{font:800 var(--fs-xs)/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;margin:var(--s4) 0}
.rank-math-breadcrumb a{color:var(--qb-accent-ink)}
.rank-math-breadcrumb .separator{color:var(--qb-muted);margin:0 6px}
/* Rank Math FAQ block → same look as .faq */
.rank-math-block .rank-math-list-item{border-bottom:1px solid var(--qb-line);padding:var(--s3) 0}
.rank-math-block .rank-math-question{font:800 var(--fs-lg)/1.3 var(--f-ui);margin:0 0 var(--s2)}
/* Footer */
.site-footer,.site-info{background:var(--qb-ink);color:#C9CCDA}
.site-footer a{color:#fff}
/* Pagination */
.paging-navigation .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;border:1px solid var(--qb-line);border-radius:999px;font-weight:800}
.paging-navigation .page-numbers.current{background:var(--qb-ink);color:#fff}

/* =========================================================
   3. CATEGORY LANDING THEMES (sub-brands)
   Scope: bodybody.archive.qb-theme-* is ONLY added on category archives
   (top-level and their sub-categories). Articles and the home
   page keep the default QuirkyByte tokens.
   Each theme re-points the core tokens, so header, ticker,
   buttons, kickers and links all re-skin automatically.
   ========================================================= */
body.archive.cat-landing{
  --t-display:var(--f-ui); --t-d-weight:900; --t-d-stretch:70%; --t-d-case:uppercase; --t-d-track:-.005em;
  --t-hero-bg:var(--qb-ink); --t-hero-fg:#fff; --t-hero-muted:#C9CCDA; --t-head-rule:3px solid var(--qb-accent);
  background:var(--qb-paper);
}
body.archive.cat-landing .masthead{border-bottom:var(--t-head-rule)}
body.archive.cat-landing .mainnav>ul>li>a[aria-current]{color:var(--qb-accent);box-shadow:inset 0 -3px 0 var(--qb-accent)}
body.archive.cat-landing .ticker{background:var(--qb-paper)}
body.archive.cat-landing .sec-h h2,body.archive.cat-landing .cl-hero h1,body.archive.cat-landing .cl-hero h2,body.archive.cat-landing .card.lg .t,body.archive.cat-landing .nl h3,body.archive.cat-landing .cat-hero h1{
  font-family:var(--t-display);font-weight:var(--t-d-weight);font-stretch:var(--t-d-stretch);text-transform:var(--t-d-case);letter-spacing:var(--t-d-track)}
body.archive.cat-landing .sec-h .more{color:var(--qb-accent-ink)}
body.archive.cat-landing .ph{border-radius:var(--radius)}
.cl-hero{background:var(--t-hero-bg);color:var(--t-hero-fg);padding:var(--s5) 0 var(--s7)}
.cl-hero .crumbs{margin-top:0;color:var(--t-hero-muted)}
.cl-hero .crumbs a{color:var(--qb-accent)}
.cl-tag{margin:0;font:800 12px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--qb-accent)}
.cl-hero h1{margin:var(--s2) 0 var(--s3);font-size:clamp(2.75rem,1.6rem + 5vw,5.5rem);line-height:.92}
.cl-intro{margin:0;max-width:62ch;color:var(--t-hero-muted);font-size:var(--fs-lg);line-height:1.5}
.cl-hero .chips a{border-color:color-mix(in srgb,var(--t-hero-fg) 25%,transparent)}
.cl-row-h{font-size:var(--fs-xl)!important;margin:var(--s6) 0 var(--s4);display:flex;align-items:center;gap:10px}
.cl-row-h::before{content:"";width:28px;height:3px;background:var(--qb-accent)}

/* ---- 1. ENTERTAINMENT · "Cinematic": near-black, coral spotlight, ultra-condensed caps, letterbox hero ---- */
body.archive.qb-theme-ent{
  --qb-ink:#07080F; --qb-ink-2:#14151F; --qb-accent:#FF5A36; --qb-accent-ink:#D4321F; --qb-pop:#FFD166;
  --t-d-stretch:62%; --t-hero-bg:radial-gradient(120% 80% at 80% 0%,#3A1410 0,#07080F 55%);
  --t-head-rule:3px solid var(--qb-accent);
}
.cine-feature{position:relative;display:block;margin-top:var(--s6);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 0 1px #262838,0 30px 80px rgba(255,90,54,.18)}
.cine-feature::before,.cine-feature::after{content:"";position:absolute;left:0;right:0;height:14px;background:#000;z-index:1}
.cine-feature::before{top:0}.cine-feature::after{bottom:0}
.cine-feature .ph{border-radius:0;aspect-ratio:21/9}
.cine-feature .ov{position:absolute;left:0;right:0;bottom:14px;padding:var(--s7) var(--s6) var(--s5);background:linear-gradient(transparent,rgba(7,8,15,.95) 55%)}
.cine-feature h2{font-size:clamp(1.9rem,1rem + 3vw,3.5rem);line-height:.98;margin:var(--s2) 0;max-width:22ch}
.cine-feature .meta{color:#B8BCCB}.cine-feature .meta b{color:#fff}
.posters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.poster .ph{aspect-ratio:3/4;margin-bottom:var(--s3);box-shadow:0 0 0 1px #262838}
.poster .kicker{color:var(--qb-accent)}
.poster .t{display:block;margin-top:6px;font:800 var(--fs-md)/1.25 var(--f-ui)}

/* ---- 2. TECHNOLOGY · "Lab": clean white, electric blue, blueprint grid, wide-set sentence-case display ---- */
body.archive.qb-theme-tech{
  --qb-ink:#0A1633; --qb-ink-2:#12204A; --qb-accent:#4D8BFF; --qb-accent-ink:#2559D9; --qb-pop:#7FD8FF;
  --qb-surface:#F2F5FB; --qb-line:#DDE3EE; --radius:2px; --radius-lg:4px;
  --t-d-weight:750; --t-d-stretch:112%; --t-d-case:none; --t-d-track:-.03em;
  --t-hero-bg:linear-gradient(#fff0,#fff0),#F7F9FD; --t-hero-fg:#0A1633; --t-hero-muted:#46506A;
  --t-head-rule:1px solid #2B4A99;
}
body.archive.qb-theme-tech .masthead{background-image:linear-gradient(rgba(77,139,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(77,139,255,.10) 1px,transparent 1px);background-size:24px 24px}
body.archive.qb-theme-tech .cl-hero{background-image:linear-gradient(#E3EAF7 1px,transparent 1px),linear-gradient(90deg,#E3EAF7 1px,transparent 1px);background-size:32px 32px;border-bottom:1px solid var(--qb-line)}
body.archive.qb-theme-tech .cl-hero h1{font-size:clamp(2.5rem,1.4rem + 4.5vw,4.75rem);line-height:1}
body.archive.qb-theme-tech .chips a{background:#fff;border-color:#C6D1E6;border-radius:2px;color:#0A1633}
body.archive.qb-theme-tech .chips a[aria-current]{background:var(--qb-accent-ink);color:#fff;border-color:var(--qb-accent-ink)}
body.archive.qb-theme-tech .sec-h{border-top-width:1px}
body.archive.qb-theme-tech .sec-h h2{font-size:var(--fs-xl)}
.code{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--qb-accent-ink);letter-spacing:0;text-transform:none;background:#E6EEFF;padding:3px 6px;border-radius:2px}
.lab-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s7);align-items:center}
.lab-feature{display:block;background:#fff;border:1px solid var(--qb-line);padding:var(--s4);box-shadow:8px 8px 0 #D6E2FA}
.lab-feature .ph{margin-bottom:var(--s3)}
.lab-feature .t{display:block;margin:6px 0;font:750 var(--fs-2xl)/1.15 var(--f-ui);font-stretch:105%;letter-spacing:-.02em}
.specs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s6);border:1px solid var(--qb-line);background:#fff}
.spec{display:grid;gap:8px;padding:var(--s4);border-left:1px solid var(--qb-line);align-content:start}
.spec:first-child{border-left:0}
.spec .code{justify-self:start}
.spec .t{font:700 var(--fs-md)/1.3 var(--f-ui)}
body.archive.qb-theme-tech .river .t,body.archive.qb-theme-tech .card .t{font-stretch:100%;letter-spacing:-.01em}

/* ---- 3. LIFESTYLE · "Edit": warm cream paper, magenta + plum, serif display, soft rounded cover layout ---- */
body.archive.qb-theme-life{
  --qb-ink:#2B0F2F; --qb-ink-2:#3B1840; --qb-accent:#F08BE0; --qb-accent-ink:#A51FB8; --qb-pop:#FFC7A8;
  --qb-paper:#FFF9F3; --qb-surface:#F7ECE4; --qb-line:#EADCD2; --radius:14px; --radius-lg:22px;
  --t-display:var(--f-body); --t-d-weight:600; --t-d-stretch:100%; --t-d-case:none; --t-d-track:-.015em;
  --t-hero-bg:#FFF9F3; --t-hero-fg:#2B0F2F; --t-hero-muted:#6B5560; --t-head-rule:4px solid #A51FB8;
}
body.archive.qb-theme-life .cl-hero{padding-top:var(--s6)}
.edit-head{text-align:center;max-width:760px;margin:0 auto}
.edit-head .cl-intro{margin:0 auto}
.edit-head .chips{justify-content:center}
body.archive.qb-theme-life .cl-tag{color:var(--qb-accent-ink);letter-spacing:.3em}
body.archive.qb-theme-life .cl-hero h1{font-size:clamp(3rem,1.6rem + 6vw,6.5rem);line-height:.95;font-weight:600}
body.archive.qb-theme-life .cl-hero .crumbs{justify-content:center}
body.archive.qb-theme-life .cl-hero .crumbs a{color:var(--qb-accent-ink)}
body.archive.qb-theme-life .chips a{border-color:#E2CFC6;color:#2B0F2F}
body.archive.qb-theme-life .chips a[aria-current]{background:#2B0F2F;border-color:#2B0F2F;color:#fff}
body.archive.qb-theme-life .sec-h{border-top:1px solid #2B0F2F}
body.archive.qb-theme-life .sec-h h2{font-size:var(--fs-3xl)}
.cover{display:grid;grid-template-columns:5fr 6fr;gap:var(--s7);align-items:center;margin-top:var(--s7);background:#F7ECE4;border-radius:var(--radius-lg);padding:var(--s5)}
.cover .ph{aspect-ratio:4/5}
.cover h2{font-size:clamp(2rem,1.2rem + 2.4vw,3.25rem)!important;line-height:1.08;margin:var(--s3) 0}
.cover .dek{font:400 var(--fs-xl)/1.5 var(--f-body);color:#6B5560;margin:0 0 var(--s4)}
.soft-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s6)}
.soft .ph{margin-bottom:var(--s3)}
.soft .t,body.archive.qb-theme-life .river .t,body.archive.qb-theme-life .card .t{display:block;font-family:var(--f-body);font-weight:600;font-stretch:100%;font-size:var(--fs-xl);line-height:1.25;margin-top:6px}
body.archive.qb-theme-life .btn.coral{background:#A51FB8;color:#fff}

/* ---- 4. Automobiles · "Pit Lane": asphalt + carbon, racing red / orange / yellow, racing stripes, speedometer arc, spec chips ---- */
body.archive.qb-theme-auto{
  --qb-ink:#16181C; --qb-ink-2:#1F2227; --qb-accent:#FF6A13; --qb-accent-ink:#8A5A00; --qb-pop:#F5B700;
  --qb-paper:#F4F5F8; --qb-surface:#E9EBF0; --qb-line:#D5D8E0; --radius:4px; --radius-lg:6px;
  --t-d-weight:900; --t-d-stretch:72%; --t-d-case:uppercase; --t-d-track:.005em;
  --t-hero-bg:#16181C; --t-hero-fg:#E9EAF0; --t-hero-muted:#9AA0AA; --t-head-rule:4px solid #F5B700;
}
body.archive.qb-theme-auto .cl-hero{position:relative;overflow:hidden;background-color:#16181C;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px);border-bottom:4px solid #F5B700}
body.archive.qb-theme-auto .cl-hero::before{content:"";position:absolute;right:-90px;top:-120px;width:420px;height:420px;border-radius:50%;border:18px solid transparent;border-top-color:#FF2E2E;border-right-color:#FF6A13;border-bottom-color:#F5B700;transform:rotate(-20deg);opacity:.22;pointer-events:none}
body.archive.qb-theme-auto .cl-hero::after{content:"";position:absolute;right:120px;top:90px;width:4px;height:150px;background:#FF2E2E;transform-origin:bottom center;transform:rotate(52deg);opacity:.35;pointer-events:none}
body.archive.qb-theme-auto .cl-hero .container{position:relative;z-index:1}
body.archive.qb-theme-auto .cl-hero h1{font-size:clamp(3rem,1.4rem + 6.5vw,6.5rem);line-height:.88;font-style:italic;color:#fff;background:linear-gradient(transparent 78%,#FF2E2E 78% 86%,transparent 86% 90%,#F5B700 90%);display:inline-block;padding-right:.15em}
body.archive.qb-theme-auto .cl-tag,body.archive.qb-theme-auto .cl-hero .crumbs a{color:#FF6A13}
body.archive.qb-theme-auto .cl-intro{color:#E9EAF0}
body.archive.qb-theme-auto .chips a{border:1px solid #3A3E46;color:#E9EAF0;border-radius:3px;background:#1F2227;font-style:italic}
body.archive.qb-theme-auto .chips a[aria-current]{background:#F5B700;color:#14161F;border-color:#F5B700}
body.archive.qb-theme-auto .cl-row-h{color:#E9EAF0}
body.archive.qb-theme-auto .sec-h{border-top:4px solid #16181C;position:relative}
body.archive.qb-theme-auto .sec-h::after{content:"";position:absolute;left:0;top:-4px;width:64px;height:4px;background:linear-gradient(90deg,#FF2E2E 0 33%,#FF6A13 33% 66%,#F5B700 66%)}
body.archive.qb-theme-auto .btn.coral{background:#F5B700;color:#14161F}
.pit-feature{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s6);margin-top:var(--s6);background:#1F2227;border:1px solid #2E3238;border-radius:var(--radius-lg);padding:var(--s4);overflow:hidden;color:#E9EAF0}
.pit-feature .stripe{position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#FF2E2E 0 34%,#FF6A13 34% 67%,#F5B700 67%)}
.pit-feature h2{font-size:clamp(1.75rem,1rem + 2vw,2.6rem)!important;line-height:1;margin:var(--s3) 0 var(--s4);color:#fff}
.pit-feature .meta{color:#9AA0AA}.pit-feature .meta b{color:#E9EAF0}
.pit-txt{display:flex;flex-direction:column;justify-content:center;padding-bottom:var(--s3)}
.pit-txt .pill{align-self:flex-start}
.spec-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s4);padding:0}
.spec-chips div{background:#16181C;border:1px solid #3A3E46;border-left:3px solid #F5B700;border-radius:3px;padding:7px 10px;min-width:0}
.spec-chips dt{font:800 10px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:#9AA0AA}
.spec-chips dd{margin:4px 0 0;font:900 var(--fs-md,15px)/1.1 var(--f-ui);color:#fff}
.spec-chips div:nth-child(2){border-left-color:#FF6A13}.spec-chips div:nth-child(3){border-left-color:#FF2E2E}
.single .spec-chips{margin:0 0 var(--s5)}
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.gcard{position:relative;display:block;background:#1F2227;border:1px solid #2E3238;border-radius:var(--radius-lg);padding:var(--s3);color:#E9EAF0}
.gcard .pos{position:absolute;top:10px;left:10px;z-index:1;font:900 15px/1 var(--f-ui);font-style:italic;background:#F5B700;color:#14161F;padding:6px 9px;border-radius:3px;transform:skewX(-10deg)}
.gcard .ph{margin-bottom:var(--s3)}
.gcard .kicker{color:#FF6A13}
.gcard .t{display:block;margin:6px 0 var(--s3);font:800 var(--fs-lg)/1.25 var(--f-ui);color:#fff}
.gcard .spec-chips{margin:0}.gcard .spec-chips div{padding:5px 8px}
.gcard:hover .t,.pit-feature:hover h2{color:#F5B700}

/* Landing responsive */
@media (max-width:1023px){
  .lab-grid,.cover,.pit-feature{grid-template-columns:1fr;gap:var(--s5)}
  .posters,.specs{grid-template-columns:repeat(2,1fr)}
  .spec:nth-child(3){border-left:0}.spec:nth-child(n+3){border-top:1px solid var(--qb-line)}
  .soft-row,.grid-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .cine-feature{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));border-radius:0}
  .cine-feature .ph{aspect-ratio:4/3}.cine-feature .ov{padding:var(--s6) var(--gutter) var(--s4)}
  .soft-row,.grid-cards{grid-template-columns:1fr}
  .cover{padding:var(--s3)}.cover .ph{aspect-ratio:4/3}
  .edit-head{text-align:left}.edit-head .chips,body.archive.qb-theme-life .cl-hero .crumbs{justify-content:flex-start}
  .cl-hero .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1*var(--gutter))}
  .cl-hero .chips a{flex:none}
}
/* Articles: default tokens; only the small vertical colour tag (body.v-*) changes */
body.single.v-tech .entry-header .pill:first-child,body.single.v-tech .cat-links a{background:var(--v-tech)}
body.single.v-life .entry-header .pill:first-child,body.single.v-life .cat-links a{background:var(--v-life)}
body.single.v-auto .entry-header .pill:first-child,body.single.v-auto .cat-links a{background:var(--v-auto);color:#14161F}

@media (max-width:767px){.soft-row,.grid-cards{margin-left:0;padding-left:0;scroll-padding-left:0}}
/* ---- WordPress adapters for the landing themes (GeneratePress markup) ---- */
.ph{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--qb-surface);margin:0}
.ph.r-1x1{aspect-ratio:1/1}.ph.r-4x3{aspect-ratio:4/3}.ph.r-3x4{aspect-ratio:3/4}.ph.r-21x9{aspect-ratio:21/9}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph:not([data-label])::after{display:none}
body.archive.cat-landing .site-header{border-bottom:var(--t-head-rule)}
body.archive.qb-theme-tech .site-header{background-image:linear-gradient(rgba(77,139,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(77,139,255,.10) 1px,transparent 1px);background-size:24px 24px}
body.archive.cat-landing,body.archive.cat-landing .site,body.archive.cat-landing .inside-article,body.archive.cat-landing .sidebar .widget{background-color:var(--qb-paper)}
body.archive.cat-landing .main-navigation,body.archive.cat-landing .main-navigation ul ul,body.archive.cat-landing .site-header{background-color:var(--qb-ink)}
body.archive.cat-landing .main-navigation .main-nav ul li.current-menu-item>a,body.archive.cat-landing .main-navigation .main-nav ul li.current-menu-ancestor>a{color:var(--qb-accent)}
body.archive.cat-landing .entry-title,body.archive.cat-landing .widget-title{font-family:var(--t-display);font-stretch:var(--t-d-stretch)}
body.archive.qb-theme-life .entry-title{font-family:var(--f-body);font-weight:600}
body.archive.cat-landing a:hover{color:var(--qb-accent-ink)}
body.archive.cat-landing .page-header{display:none} /* landing hero prints the H1 */
.cl-hero.compact{padding-bottom:var(--s5)}

/* ---- Logo lockup (v0.3): SVG mark + Archivo 900 wordmark; hide GP text title when our lockup prints ---- */
.qb-logo{display:flex;align-items:center;line-height:0}
.qb-logo img{display:block;height:40px;width:auto;max-width:100%}
body.qb-has-lockup .main-title,body.qb-has-lockup .site-description{display:none}
@media (max-width:767px){.qb-logo img{height:30px}}

/* ---- 12. v0.3.1 Home built with core Query Loop blocks (draft page "home") ----
   Core markup: ul.wp-block-post-template > li > figure.wp-block-post-featured-image, .pill (post-terms),
   .wp-block-post-title, .dek (excerpt), .meta (date). These rules override the mockup grid classes. */
.qb-home-ent .inside-article{padding:0;background:transparent}
.qb-home-ent .entry-content>*{max-width:none}
.wp-block-query.qb-home-hero,.wp-block-query.qb-home-fourup,.wp-block-query.qb-home-river{display:block;margin:var(--s5) 0 0}
.qb-home-ent .wp-block-post-template{list-style:none;margin:0;padding:0}
.qb-home-ent .wp-block-post-featured-image{margin:0}
.qb-home-ent .wp-block-post-featured-image img{display:block;width:100%;height:100%;object-fit:cover}
.qb-home-ent .pill{display:inline-block;background:var(--v-ent);color:#fff}
.qb-home-ent .pill a{color:#fff;text-decoration:none}
.qb-home-ent .wp-block-post-title{margin:0}
.qb-home-ent .wp-block-post-title a{color:inherit;text-decoration:none}
.qb-home-ent .meta{font-size:12px;color:var(--qb-muted)}
/* Hero: overlay card */
.qb-home-hero .wp-block-post{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--qb-ink);color:#fff}
.qb-home-hero .wp-block-post-featured-image{aspect-ratio:16/9}
.qb-home-hero .wp-block-post-featured-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,8,15,.92) 100%);pointer-events:none}
.qb-home-hero .wp-block-post{display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto auto auto auto}
.qb-home-hero .wp-block-post-featured-image{grid-row:1/-1;grid-column:1;position:relative}
.qb-home-hero .wp-block-post>*:not(figure){grid-column:1;z-index:1;margin-left:var(--s6);margin-right:var(--s6)}
.qb-home-hero .pill{grid-row:2;justify-self:start}
.qb-home-hero .wp-block-post-title{grid-row:3;margin-top:10px;font:900 clamp(1.75rem,1rem + 2.4vw,3rem)/1.02 var(--f-ui);font-stretch:72%;color:#fff}
.qb-home-hero .dek{grid-row:4;color:#E9EAF2;margin-top:8px}.qb-home-hero .dek p{margin:0}
.qb-home-hero .meta{grid-row:5;color:#C9CBD6;margin:8px var(--s6) var(--s6)}
/* Four-up cards */
.qb-home-fourup .wp-block-post-template{display:grid!important;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.qb-home-fourup .wp-block-post-featured-image{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
.qb-home-fourup .wp-block-post-title{font:800 var(--fs-md,16px)/1.25 var(--f-ui);margin-top:6px}
/* River: text left, image right */
.qb-home-river .wp-block-post{display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-areas:"pill img" "t img" "dek img" "meta img";grid-template-rows:auto auto auto 1fr;column-gap:var(--s5);align-content:start;padding:var(--s5) 0;border-bottom:1px solid var(--qb-line)}
.qb-home-river .wp-block-post-featured-image{grid-area:img;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden}
.qb-home-river .pill{grid-area:pill;justify-self:start}
.qb-home-river .wp-block-post-title{grid-area:t;font:800 var(--fs-xl)/var(--lh-snug) var(--f-ui);font-stretch:90%;margin:8px 0 6px}
.qb-home-river .dek{grid-area:dek;color:var(--qb-muted);font-size:var(--fs-sm)}.qb-home-river .dek p{margin:0 0 8px}
.qb-home-river .meta{grid-area:meta}
.qb-home-ent h2.wp-block-heading.sec-h{margin:var(--s7,40px) 0 0;padding-top:var(--s3);border-top:3px solid var(--v-ent);font:900 var(--fs-xl,22px)/1 var(--f-ui);font-stretch:72%;text-transform:uppercase;letter-spacing:.01em}
.qb-empty{padding:var(--s5);border:1px dashed var(--qb-line);border-radius:var(--radius);color:var(--qb-muted);background:var(--qb-surface,#F4F5F8);text-align:center}
.qb-more{margin:var(--s5) 0;font:800 14px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.06em}.qb-more a{color:var(--qb-accent-ink)}
@media (max-width:1023px){.qb-home-fourup .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  .qb-home-hero .wp-block-post{border-radius:0;margin:0 calc(-1 * var(--gutter,16px))}
  .qb-home-hero .wp-block-post-featured-image{aspect-ratio:4/5}
  .qb-home-hero .dek{display:none}
  .qb-home-hero .wp-block-post>*:not(figure){margin-left:var(--gutter,16px);margin-right:var(--gutter,16px)}
  .qb-home-river .wp-block-post{grid-template-columns:minmax(0,1fr) 112px;column-gap:var(--s3)}
  .qb-home-river .dek{display:none}
  .qb-home-river .wp-block-post-title{font-size:var(--fs-md,16px)}
}
.qb-home-ent h2.wp-block-heading.sec-h{display:block;margin:var(--s7) 0 0;padding-top:var(--s3);border-top:3px solid var(--v-ent);font:900 var(--fs-2xl,1.6rem)/1 var(--f-ui);font-stretch:72%;text-transform:uppercase;letter-spacing:.01em}

/* v0.3.2 footer */
.site-info{background:var(--qb-ink);color:#B8BCCB;font-size:var(--fs-sm)}.site-info a{color:#fff}

/* =========================================================
   v0.3.3 layout corrections (root causes, see DEPLOY_STATE)
   ========================================================= */
/* GP container is 1200px by default; match the design container. */
.grid-container,.site-header .inside-header,.site-footer .inside-site-info{max-width:var(--container)}
/* Archive/sidebar pages: GP sets content-area 70% but we fixed the sidebar at 320px, so they did not add up. */
.right-sidebar .site-content .content-area{width:auto;flex:1 1 0;min-width:0}
.right-sidebar .site-content .is-right-sidebar{flex:0 0 var(--sidebar);width:var(--sidebar)}
/* Single post: no wrapper .art-grid was ever output, so the rail sat in normal flow as a tall centred column.
   Make .inside-article itself the grid: 64px rail + 760px reading column. */
.single-post .inside-article{display:grid;grid-template-columns:64px minmax(0,760px);column-gap:var(--s6);row-gap:0;justify-content:center;align-items:start}
.single-post .inside-article>*{grid-column:2;min-width:0}
.single-post .inside-article>.share-rail{grid-column:1;grid-row:1 / span 30;position:sticky;top:96px;align-self:start;margin-top:var(--s5)}
.single-post .inside-article>.entry-header{order:1;margin-top:var(--s5)}
.single-post .inside-article>.follow-cta{order:2}
.single-post .inside-article>.featured-image{order:3;margin:var(--s5) 0 0;padding:0}
.single-post .inside-article>.share-bar{order:4}
.single-post .inside-article>.entry-content{order:5}
.single-post .inside-article>:not(.share-rail):not(.entry-header):not(.follow-cta):not(.featured-image):not(.share-bar):not(.entry-content){order:6}
.single-post .featured-image img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.single .entry-title{max-width:none;margin:0 0 var(--s3)}
.single .entry-meta{font-size:var(--fs-sm);color:var(--qb-muted)}
.single .entry-content{max-width:none;margin-top:var(--s5)}
.single .entry-content figure,.single .entry-content img{max-width:100%;height:auto}
.share-rail>span{font:800 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--qb-muted)}
.single-post .share-bar{display:none}
@media (max-width:1023px){
  .single-post .inside-article{display:flex;flex-direction:column}
  .single-post .inside-article>.share-rail{display:none}
  .single-post .inside-article>.share-bar{display:flex;position:static;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin:var(--s4) 0 0;padding:0;background:none;border:0;backdrop-filter:none}
  .single-post .inside-article>.featured-image{margin-left:calc(-1 * var(--gutter,16px));margin-right:calc(-1 * var(--gutter,16px))}
  .single-post .featured-image img{border-radius:0}
}
/* Ticker: one row, no duplicate list, no marquee; scrolls sideways if long. */
.ticker .track{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 94%,transparent)}
.ticker .track::-webkit-scrollbar{display:none}
.ticker ul{animation:none;flex-wrap:nowrap}
/* Home & cards: larger type outside the hero. */
.qb-home-ent .site-main,.home .site-main{max-width:var(--container);margin-inline:auto}
.qb-home-fourup .wp-block-post-title{font-size:clamp(1.0625rem,.95rem + .35vw,1.25rem);line-height:1.25}
.qb-home-river .wp-block-post-title{font-size:clamp(1.25rem,1rem + .8vw,1.625rem)}
.qb-home-river .dek{font-size:var(--fs-md)}
.pill{font-size:11px;padding:6px 8px}
h2.wp-block-heading.sec-h{font-size:clamp(1.25rem,1rem + .6vw,1.5rem)}

/* ---- v0.3.4 header logo: coral tile with the dark Q mark + QUIRKY (white) BYTE (coral) wordmark ---- */
.qb-logo .qb-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1;border-radius:10px}
.qb-logo .qb-brand:focus-visible{outline:2px solid #fff;outline-offset:4px}
.qb-logo img.qb-badge{width:40px;height:40px;flex:none;border-radius:9px}
.qb-word{font:900 30px/1 var(--f-ui);font-stretch:72%;letter-spacing:-.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.qb-word .byte{color:#FF5A36}
@media (max-width:767px){.qb-logo img.qb-badge{width:32px;height:32px;border-radius:7px}.qb-word{font-size:23px}.qb-logo .qb-brand{gap:8px}}
@media (max-width:359px){.qb-word{font-size:20px}}

/* ---- v0.3.5 AdSense units (only printed when ads are live) ---- */
.qb-ad{clear:both;margin:var(--s6) auto;padding-top:var(--s2);border-top:1px solid var(--qb-line);text-align:center;max-width:100%;overflow:hidden}
.qb-ad__label{display:block;font:700 10px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--qb-muted);margin-bottom:6px}
.qb-ad{min-height:296px}
.qb-ad--home{max-width:970px;min-height:266px}
@media (max-width:767px){.qb-ad{min-height:266px}.qb-ad--home{min-height:116px}}
.qb-ad ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.qb-ad:has(ins[data-ad-status="unfilled"]){display:none}

/* =========================================================
   v0.4.0 — one layout system (home, archives, search, posts)
   ========================================================= */
/* Containers: one column, design width, consistent gutters; GP "separate containers" boxes neutralised. */
.site-content{display:block}
.site-content .content-area{width:100%;float:none}
.separate-containers .site-main{margin:0}
.qb-home .site-main,.qb-archive .site-main{max-width:var(--container);margin:0 auto;padding:var(--s5) var(--gutter) var(--s7)}
.separate-containers .inside-article,.one-container .site-content{padding:0}
.single-post .site-main,.page .site-main{padding:0 var(--gutter) var(--s7)}

/* Header: badge legible, nav collapses on mobile (GP menu toggle), search in the bar */
.qb-logo img.qb-badge{width:44px;height:44px;border-radius:10px}
.qb-word{font-size:32px}
@media (max-width:767px){.qb-logo img.qb-badge{width:36px;height:36px;border-radius:8px}.qb-word{font-size:26px}}
@media (max-width:359px){.qb-word{font-size:21px}}
.main-navigation .menu-toggle,.main-navigation .menu-bar-item>a{color:#fff;background:transparent;min-height:44px}
.main-navigation .menu-toggle:focus-visible,.main-navigation a:focus-visible,.qb-search summary:focus-visible{outline:2px solid var(--qb-accent);outline-offset:2px}
.main-navigation.toggled .main-nav>ul{background:var(--qb-ink)}
.main-navigation.toggled .main-nav ul li a{padding:14px var(--gutter);border-top:1px solid rgba(255,255,255,.08)}
.menu-bar-items{display:flex;align-items:center}
.qb-search{position:relative;color:#fff}
.qb-search summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.qb-search summary::-webkit-details-marker{display:none}
.qb-search summary:hover{background:rgba(255,255,255,.08)}
.qb-search form{position:absolute;right:0;top:calc(100% + 8px);z-index:70;display:flex;gap:8px;width:min(92vw,420px);padding:10px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(7,8,15,.25)}
.qb-search input[type=search]{flex:1;min-width:0;font:600 16px/1.2 var(--f-ui);padding:10px 12px;border:1px solid var(--qb-line);border-radius:var(--radius);color:var(--qb-text)}
.qb-search button,.search-form .search-submit{font:800 14px/1 var(--f-ui);padding:0 16px;border:0;border-radius:var(--radius);background:var(--qb-ink);color:#fff;cursor:pointer;min-height:44px}

/* Section heads */
.sec-h{display:flex;align-items:center;gap:var(--s3);margin:var(--s7) 0 var(--s4);font:900 clamp(1.25rem,1rem + .6vw,1.5rem)/1.1 var(--f-ui);font-stretch:80%;text-transform:uppercase;letter-spacing:.01em}
.sec-h::after{content:"";flex:1;height:3px;background:var(--qb-ink)}
.qh-sec:first-child .sec-h,.qb-archive .sec-h:first-child{margin-top:var(--s5)}

/* Shared card */
.qb-grid{display:grid;gap:var(--s6) var(--s5)}
.qb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.qb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qb-card{min-width:0}
.qb-card__link{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;height:100%}
.qb-card__img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-lg);background:var(--qb-surface)}
.qb-card__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.qb-card__link:hover .qb-card__img img{transform:scale(1.03)}
.qb-card__body{display:flex;flex-direction:column;gap:6px}
.qb-card__t{font:800 clamp(1.125rem,1rem + .3vw,1.3125rem)/1.22 var(--f-ui);font-stretch:90%;color:var(--qb-text)}
.qb-card__link:hover .qb-card__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.qb-card__link:focus-visible{outline:3px solid var(--qb-accent-ink);outline-offset:4px;border-radius:var(--radius-lg)}
.qb-card__dek{font:400 1rem/1.5 var(--f-body);color:var(--qb-muted)}
.qb-card .meta,.qh-hero .meta{font:600 13px/1.3 var(--f-ui);color:var(--qb-muted)}
.qb-card .meta .by{font-weight:800;color:var(--qb-text)}
.kicker{display:inline-block;font:900 12px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--qb-accent-ink)}
.kicker.v-tech{color:#2559D9}.kicker.v-life{color:#A51FB8}.kicker.v-auto{color:#8A5A00}
.qb-card--sm .qb-card__t{font-size:1.0625rem}
/* Row variant (Latest articles, search) */
.qb-list{display:flex;flex-direction:column}
.qb-card--row{border-bottom:1px solid var(--qb-line);padding:var(--s5) 0}
.qb-card--row:first-child{padding-top:0}
.qb-card--row .qb-card__link{flex-direction:row-reverse;align-items:flex-start;gap:var(--s5)}
.qb-card--row .qb-card__img{flex:0 0 clamp(120px,28%,280px)}
.qb-card--row .qb-card__body{flex:1}
.qb-card--row .qb-card__t{font-size:clamp(1.1875rem,1rem + .7vw,1.625rem)}

/* Home hero */
.qh-hero{margin-top:var(--s5)}
.qh-hero__link{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--qb-ink);color:#fff;text-decoration:none;aspect-ratio:21/9}
.qh-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qh-hero__link::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,15,0) 30%,rgba(7,8,15,.9) 100%)}
.qh-hero__ov{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:var(--s6)}
.qh-hero__t{font:900 clamp(1.75rem,1rem + 2.6vw,3.25rem)/1.03 var(--f-ui);font-stretch:72%;max-width:24ch;text-wrap:balance}
.qh-hero .meta{color:#D7D9E2}.qh-hero .meta .by{color:#fff;font-weight:800}
.qh-hero__link:focus-visible{outline:3px solid var(--qb-accent);outline-offset:4px}
.qh-hero .pill{font-size:12px}
.qb-more{margin:var(--s6) 0 0;text-align:center}
.btn-more{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s6);border-radius:999px;background:var(--qb-ink);color:#fff;font:800 15px/1 var(--f-ui);text-decoration:none}
.btn-more:hover,.btn-more:focus-visible{background:var(--qb-accent-ink);color:#fff}
.qb-empty{padding:var(--s7) 0;text-align:center;color:var(--qb-muted)}

/* Archive heads + pagination */
.qb-arch-head{margin:var(--s5) 0 var(--s5);padding-bottom:var(--s4);border-bottom:3px solid var(--qb-ink)}
.qb-arch-title{margin:0;font:900 clamp(1.75rem,1.2rem + 2vw,2.75rem)/1.05 var(--f-ui);font-stretch:74%}
.qb-arch-title .qb-page-n{color:var(--qb-muted);font-weight:700}
.qb-arch-desc{margin-top:8px;color:var(--qb-muted);max-width:68ch}
.qb-arch-head .search-form{display:flex;gap:8px;margin-top:var(--s4);max-width:520px}
.qb-arch-head .search-field{flex:1;font:600 16px/1.2 var(--f-ui);padding:10px 12px;border:1px solid var(--qb-line);border-radius:var(--radius)}
.pagination.qb-pager,.qb-pager{margin-top:var(--s7)}
.qb-pager .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font:800 15px/1 var(--f-ui)}
.qb-pager .page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--qb-line);border-radius:999px;color:var(--qb-text);text-decoration:none}
.qb-pager .page-numbers.current{background:var(--qb-ink);border-color:var(--qb-ink);color:#fff}
.qb-pager a.page-numbers:hover{border-color:var(--qb-text)}
/* Category landing pages: archive grid follows the themed hero */
body.archive.cat-landing .qb-archive .site-main{padding-top:0}

/* Single post: tidy footer, nav, comments, related */
.single-post footer.entry-meta{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--qb-line)}
.single-post .post-navigation{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);font:700 15px/1.35 var(--f-ui)}
.single-post .post-navigation .gp-icon{display:none}
.single-post .post-navigation .nav-next{text-align:right}
.single-post .post-navigation a{display:block;padding:var(--s4);border:1px solid var(--qb-line);border-radius:var(--radius-lg);color:var(--qb-text);text-decoration:none}
.single-post .post-navigation .prev a::before{content:"← Previous";display:block;font:800 11px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--qb-muted);margin-bottom:6px}
.single-post .post-navigation .next a::before{content:"Next →";display:block;font:800 11px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--qb-muted);margin-bottom:6px}
.single-post .post-navigation a:hover{border-color:var(--qb-text)}
.related .qb-grid--4{gap:var(--s5) var(--s4)}
.author-box .n{margin:2px 0 0;font:900 var(--fs-xl)/1.2 var(--f-ui)}
.author-box .n a{color:var(--qb-text)}
.comments-area{max-width:760px;margin:var(--s7) auto 0;padding:0;font-family:var(--f-ui)}
.separate-containers .comments-area{background:transparent;padding:0}
.comments-title,.comment-reply-title{font:900 var(--fs-xl)/1.2 var(--f-ui);margin:0 0 var(--s4)}
.comment-form{display:grid;gap:var(--s3)}
.comment-form label{display:block;font:700 14px/1.3 var(--f-ui);margin-bottom:4px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;font:400 16px/1.4 var(--f-ui);padding:10px 12px;border:1px solid #C9CDD6;border-radius:var(--radius);background:#fff;color:var(--qb-text)}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid var(--qb-accent-ink);outline-offset:1px;border-color:transparent}
.comment-form .form-submit .submit{min-height:48px;padding:0 var(--s6);border:0;border-radius:999px;background:var(--qb-ink);color:#fff;font:800 15px/1 var(--f-ui);cursor:pointer}
.comment-form .form-submit .submit:hover{background:var(--qb-accent-ink)}
.comment-form-cookies-consent{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.comment-form-cookies-consent label{font-weight:500}
.comment-list .comment-body{padding:var(--s4) 0;border-bottom:1px solid var(--qb-line)}

/* Responsive */
@media (max-width:1023px){.qb-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.qb-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.qh-hero__link{aspect-ratio:16/9}}
@media (max-width:767px){
  .qb-home .site-main,.qb-archive .site-main{padding-top:var(--s4)}
  .qb-grid{gap:var(--s5) var(--s4)}
  .qb-grid--3{grid-template-columns:1fr}
  .qh-hero{margin:0 calc(-1 * var(--gutter))}
  .qh-hero__link{aspect-ratio:4/5;border-radius:0}
  .qh-hero__ov{padding:var(--s5) var(--gutter)}
  .qb-card--row .qb-card__img{flex-basis:112px}
  .qb-card--row .qb-card__dek{display:none}
  .qb-card--row .qb-card__link{gap:var(--s4)}
  .single-post .post-navigation{grid-template-columns:1fr}
  .single-post .post-navigation .nav-next{text-align:left}
}
@media (max-width:479px){.qb-grid--4{grid-template-columns:1fr 1fr}.qb-grid--4 .qb-card__t{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.qb-card__img img{transition:none}.qb-card__link:hover .qb-card__img img{transform:none}}

/* v0.4.3 date/byline separator */
.entry-meta .qb-sep{color:var(--qb-muted);margin:0 .15em}