/* assets/css/site.css | Purpose: Shared design system for the khallaf.lt tech platform.
   Visual identity (2026-09-29 redesign): a white canvas, royal blue as the primary
   colour, crimson as the accent that marks the important things, and restrained gold
   hairlines for the luxury detail. Type is Inter (display + body) over JetBrains Mono.

   Every colour lives in the token block below and nothing below it hardcodes a brand
   colour, so the whole platform can be re-skinned from one place. Mobile-first, then
   scaled up. */

/* ---------------------------------------------------------------- tokens
   ══ LOCKED BRAND PALETTE ══
   The --k-* block below is the contract palette and is the ONLY place a brand colour is
   written. Every other token in this file is an alias or a derived value, and no rule
   body anywhere in the project may contain a literal colour — that rule is why the
   aliases exist instead of repeating the hex codes.

   Gold is DECORATION ONLY. Measured on white: --k-gold is 2.25:1 and --k-gold-soft is
   1.06:1, so neither can carry text (WCAG AA needs 4.5:1) nor a functional UI boundary
   (WCAG 1.4.11 needs 3:1). Use gold for hairlines, rules and ornament; use --k-primary or
   --k-muted for anything a reader must actually read. */
:root{
  /* ══ Core Brand Tokens — LOCKED ══ */
  --k-bg:            #ffffff;   /* pure white canvas */
  --k-surface:       #fafbfd;   /* secondary surface */
  --k-primary:       #1a3a6b;   /* royal blue */
  --k-primary-600:   #14305a;
  --k-primary-300:   #4a6da3;
  --k-primary-soft:  #eef2f9;
  --k-secondary:     #c8102e;   /* crimson */
  --k-secondary-soft:#fdf3f4;
  --k-gold:          #c9a961;   /* gold — ornament only, never text */
  --k-gold-soft:     #faf6ec;
  --k-text:          #0a1628;   /* primary text */
  --k-muted:         #5a6a80;
  --k-line:          #e3e8f0;

  /* ══ Effects ══ */
  --k-glow-blue:  0 0 32px rgba(26,58,107,.28);
  --k-glow-gold:  0 0 28px rgba(201,169,97,.42);
  --k-glow-crim:  0 0 24px rgba(200,16,46,.30);
  --k-grad-hero:  linear-gradient(135deg,#1a3a6b 0%,#0a1628 55%,#14305a 100%);
  --k-grad-gold:  linear-gradient(90deg,#c9a961,#f0dfae,#c9a961);
  --k-radius:     14px;
  --k-radius-lg:  22px;
  --k-shadow:     0 1px 2px rgba(10,22,40,.04), 0 8px 24px rgba(10,22,40,.06);

  /* ══ Type ══ */
  --k-font:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ══ Derived values ══
     Needed because the locked palette ships no equivalent. Each one is a tint or shade of
     a locked colour, kept here so no rule body has to invent one. */
  --k-on-brand:      #ffffff;                  /* text on a primary/secondary fill */
  --k-secondary-700: #a30d26;                  /* crimson, pressed */
  --k-muted-faint:   #8c93a1;                  /* tertiary text, decorative only */
  --k-line-soft:     #eef1f5;                  /* lighter hairline */
  --k-gold-line:     rgba(201,169,97,.55);     /* gold as a BORDER — --k-gold-soft is a
                                                  near-white wash and vanishes as a line */
  --k-radius-sm:     10px;
  --k-shadow-sm:     0 1px 3px rgba(10,22,40,.06);
  --k-shadow-md:     0 4px 16px rgba(10,22,40,.08);
  --k-shadow-lg:     0 12px 40px rgba(10,22,40,.12);
  /* Code surfaces: a fixed dark panel, not a dark theme. */
  --k-code-bg:       #14294a;
  --k-code-bg-2:     #0b1b33;
  --k-code-text:     #c7d5ea;
  --k-code-dim:      #7e93b4;
  --k-code-string:   #8fd3ff;
  --k-code-green:    #3fbf7f;
  --k-code-ink:      #dbe6f5;
  --k-on-code:       rgba(255,255,255,.10);
  --k-on-code-soft:  rgba(255,255,255,.04);
  --k-on-code-faint: rgba(255,255,255,.18);
  --k-print-ink:     #000000;

  /* ══ Aliases — the names the templates and inline styles already use ══
     Aliasing rather than duplicating is what keeps "one locked palette" true while the
     existing markup keeps working untouched. */
  --bg:var(--k-bg);
  --bg-soft:var(--k-surface);
  --surface:var(--k-bg);
  --surface-2:var(--k-surface);
  --text:var(--k-text);
  --text-dim:var(--k-muted);
  --text-faint:var(--k-muted-faint);
  --primary:var(--k-primary);
  --primary-dark:var(--k-primary-600);
  --primary-soft:var(--k-primary-soft);
  --accent:var(--k-secondary);
  --accent-dim:var(--k-primary-300);
  --accent-glow:rgba(26,58,107,.13);
  --danger:var(--k-secondary);
  --bg-2:var(--k-surface);
  --gold:var(--k-gold);
  --gold-soft:var(--k-gold-line);
  --line:var(--k-line);
  --line-soft:var(--k-line-soft);

  /* ---- shape, motion, type ---- */
  --radius:var(--k-radius);
  --radius-sm:var(--k-radius-sm);
  --maxw:1180px;
  --prose:72ch;
  --ease:.2s ease;
  --mono:var(--k-mono);
  --display:var(--k-font);
  --body:var(--k-font);
  --shadow-sm:var(--k-shadow-sm);
  --shadow-md:var(--k-shadow-md);
  --shadow:var(--k-shadow-lg);
}

/* ---------------------------------------------------------------- base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Barely-there washes so a white page still has depth without a visible gradient. */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:radial-gradient(900px 600px at 80% -10%,rgba(26,58,107,.05),transparent 60%),
             radial-gradient(700px 500px at -10% 30%,rgba(201,169,97,.07),transparent 60%),
             linear-gradient(180deg,var(--bg),var(--bg-soft))}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;
  color:var(--text);font-weight:700}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:var(--k-on-brand);
  padding:10px 16px;z-index:200;font-family:var(--mono);font-weight:700}
.skip-link:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The signature detail: a thin gold rule under a heading. */
.gold-underline{display:inline-block;border-bottom:2px solid var(--gold);padding-bottom:4px}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(255,255,255,.86);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-weight:700;font-size:1.15rem;letter-spacing:-.01em;flex-shrink:0;color:var(--text)}
.brand .dot{width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--k-on-brand);
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.86rem;
  box-shadow:0 0 0 1px var(--gold-soft),var(--shadow-sm)}
.brand small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;
  color:var(--text-faint);letter-spacing:.02em}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:.92rem;color:var(--text-dim);font-weight:500;transition:color var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--primary)}
.nav-cta{font-family:var(--mono);font-size:.8rem;padding:9px 15px;border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--text);transition:all var(--ease);
  background:var(--bg)}
.nav-cta:hover{border-color:var(--primary);color:var(--primary);
  box-shadow:0 0 0 3px var(--accent-glow)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:14px 8px;
  background:none;border:0;min-width:44px;align-items:center;justify-content:center}
.burger[hidden]{display:none}
.burger span{width:24px;height:2px;background:var(--text);transition:.3s;display:block}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------- buttons */
.btn{font-family:var(--mono);font-weight:600;font-size:.86rem;padding:12px 20px;
  border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:9px;transition:all var(--ease);
  background:var(--bg);color:var(--text)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--k-on-brand);font-weight:700;
  box-shadow:var(--shadow-sm)}
.btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);
  transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-soft)}
.btn.small{padding:8px 13px;font-size:.78rem}
/* Crimson action, for the one call to action that must shout. */
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--k-on-brand);font-weight:700}
.btn.accent:hover{background:var(--k-secondary-700);border-color:var(--k-secondary-700);transform:translateY(-2px);
  box-shadow:var(--shadow-md)}
/* Quiet gold-outlined action. */
.btn.gold{background:transparent;border-color:var(--gold);color:var(--primary)}
.btn.gold:hover{background:var(--gold-soft);border-color:var(--gold)}

/* ---------------------------------------------------------------- sections */
main{display:block;padding-bottom:70px}
section{padding:72px 0}
section.tight{padding:44px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:34px}
.sec-head .sec-tag{display:block;font-family:var(--mono);font-size:.74rem;
  color:var(--accent-dim);letter-spacing:.06em;margin-bottom:10px}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.15rem);position:relative;padding-bottom:12px}
/* The gold rule under every section heading — the identity's recurring detail. */
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;
  background:var(--gold);border-radius:2px}
.sec-head p{color:var(--text-dim);margin-top:10px;max-width:60ch}
.see-all{font-family:var(--mono);font-size:.8rem;color:var(--accent-dim);white-space:nowrap;
  transition:color var(--ease)}
.see-all:hover{color:var(--primary)}

/* ---------------------------------------------------------------- hero */
.hero{padding:88px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.04em;color:var(--primary);border:1px solid var(--line);
  padding:7px 14px;border-radius:100px;background:var(--bg);margin-bottom:24px;
  box-shadow:var(--shadow-sm)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(200,16,46,.16);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.9rem);font-weight:800;letter-spacing:-.03em;max-width:19ch}
.hero h1 em{color:var(--primary);font-style:normal;
  border-bottom:3px solid var(--gold);padding-bottom:2px}
.hero .lede{color:var(--text-dim);font-size:1.05rem;margin:22px 0 30px;max-width:52ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;
  border-top:1px solid var(--line);padding-top:22px}
.hero-stats div{font-family:var(--mono)}
.hero-stats b{display:block;font-size:1.5rem;color:var(--primary);font-family:var(--display)}
.hero-stats span{font-size:.72rem;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.05em}
/* CSS-only "code window" so the hero needs no image asset. It stays deep navy on
   purpose: one dark focal point on a white page, like a real editor. */
.code-window{background:linear-gradient(180deg,var(--k-code-bg),var(--k-code-bg-2));
  border:1px solid var(--k-code-bg-2);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.code-window .bar{display:flex;gap:6px;padding:12px 14px;
  border-bottom:1px solid var(--k-on-code);background:var(--k-on-code-soft)}
.code-window .bar i{width:10px;height:10px;border-radius:50%;
  background:var(--k-on-code-faint);display:block}
.code-window .bar i:first-child{background:var(--accent)}
.code-window .bar i:nth-child(2){background:var(--gold)}
.code-window .bar i:nth-child(3){background:var(--k-code-green)}
.code-window pre{padding:18px;font-family:var(--mono);font-size:.8rem;line-height:1.9;
  color:var(--k-code-text);overflow-x:auto;white-space:pre}
.code-window .k{color:var(--gold)}
.code-window .c{color:var(--k-code-dim)}
.code-window .s{color:var(--k-code-string)}

/* ---------------------------------------------------------------- cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card-grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  box-shadow:var(--shadow-sm);transition:transform .25s,border-color .25s,box-shadow .25s}
/* A gold hairline that fades in across the top edge on hover. */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:0;
  transition:opacity .3s;border-radius:var(--radius) var(--radius) 0 0}
.card:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:var(--shadow-md)}
.card:hover::before{opacity:1}
.card-thumb{display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;
  position:relative;border-bottom:1px solid var(--line-soft)}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-thumb img{transform:scale(1.04)}
.card-thumb .placeholder{width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--mono);font-size:1.4rem;color:var(--accent-dim);
  background:radial-gradient(400px 200px at 70% 20%,rgba(26,58,107,.06),transparent 70%),
             var(--surface-2)}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:.7rem;color:var(--text-faint);flex-wrap:wrap}
.chip{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);background:rgba(200,16,46,.06);
  border:1px solid rgba(200,16,46,.22);padding:3px 9px;border-radius:100px}
.chip.muted{color:var(--text-dim);background:var(--surface-2);border-color:var(--line)}
.card h3{font-size:1.1rem;line-height:1.28}
.card h3 a{transition:color var(--ease)}
.card h3 a:hover{color:var(--primary)}
.card p{color:var(--text-dim);font-size:.92rem}
.card .card-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;color:var(--text-faint)}

/* compact list card used by the sidebar and related blocks */
.mini-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.mini{display:flex;gap:14px;align-items:flex-start}
.mini .thumb{width:86px;height:62px;flex-shrink:0;border-radius:10px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line)}
.mini .thumb img{width:100%;height:100%;object-fit:cover}
.mini h3,.mini h4{font-size:.94rem;line-height:1.35}
.mini a{transition:color var(--ease)}
.mini a:hover{color:var(--primary)}
.mini time{font-family:var(--mono);font-size:.7rem;color:var(--text-faint);display:block;
  margin-top:5px}

/* numbered tips */
.tips-list{list-style:none;counter-reset:tip;display:grid;gap:16px}
.tip{position:relative;border:1px solid var(--line);background:var(--bg);
  border-radius:var(--radius);padding:22px 22px 22px 74px;
  box-shadow:var(--shadow-sm);transition:border-color .25s,transform .25s,box-shadow .25s}
.tip:hover{border-color:var(--gold-soft);transform:translateY(-3px);box-shadow:var(--shadow-md)}
/* The counter is crimson: it marks the tips worth reading first. */
.tip::before{counter-increment:tip;content:counter(tip,decimal-leading-zero);
  position:absolute;left:22px;top:22px;font-family:var(--mono);font-size:.95rem;
  color:var(--accent);background:rgba(200,16,46,.06);border:1px solid rgba(200,16,46,.22);
  border-radius:9px;padding:5px 9px}
.tip h3{font-size:1.02rem;margin-bottom:8px}
.tip p{color:var(--text-dim);font-size:.9rem}
.tip .tip-meta{font-family:var(--mono);font-size:.7rem;color:var(--text-faint);margin-top:10px}
.tip .tip-meta a{color:var(--accent-dim)}
.tip .tip-meta a:hover{color:var(--primary)}

/* categories grid */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-sm);
  padding:20px;transition:border-color .22s,transform .22s,box-shadow .22s;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm)}
.cat-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.cat-card b{font-family:var(--display);font-size:1rem;color:var(--text)}
.cat-card span{font-family:var(--mono);font-size:.7rem;color:var(--text-faint)}
.cat-card p{color:var(--text-dim);font-size:.83rem;line-height:1.5}

/* ---------------------------------------------------------------- ad slots
   Every placement is wrapped in .ad-slot by SiteRenderer::adSlot(). The unit itself
   is a plain AdSense <ins>; while a slot id is empty the same box carries a small
   labelled placeholder, so switching a unit on later never shifts the layout. The
   container is deliberately quiet: a dashed hairline and a soft surface, no colour
   competing with the editorial content around it. */
.ad-slot{contain:layout;max-width:var(--maxw);margin:48px auto;padding:0 24px;min-height:100px;
  display:flex;justify-content:center;align-items:center;background:var(--surface-2);
  border:1px dashed var(--line);border-radius:var(--radius)}
.ad-slot:empty{display:none}
.ad-slot ins{display:block;width:100%}
.ad-slot .ad-placeholder{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--text-faint);text-transform:uppercase;padding:28px 12px;text-align:center}
.ad-slot.tall{min-height:250px}
/* The sidebar variant lives inside a 320px rail: no outer margin, no inner padding. */
.ad-slot.rail{min-height:600px;margin:0;padding:0}

/* ---------------------------------------------------------------- article */
.breadcrumbs{font-family:var(--mono);font-size:.74rem;color:var(--text-faint);
  padding:22px 0 4px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumbs a{color:var(--text-dim);transition:color var(--ease)}
.breadcrumbs a:hover{color:var(--primary)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;
  padding-top:16px}
.article-head h1{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:16px}
.article-head .article-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:.74rem;color:var(--text-faint);
  border-bottom:1px solid var(--line);padding-bottom:18px}
.article-head .article-meta a{color:var(--accent-dim)}
.article-head .article-meta a:hover{color:var(--primary)}
.article-hero{margin:26px 0 8px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line)}
.article-hero img{width:100%}
.article-hero figcaption{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);
  padding:10px 14px;background:var(--surface-2)}
.prose{font-size:1.045rem;line-height:1.78;color:var(--text);max-width:var(--prose)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:1.5rem;margin-top:2.1em;scroll-margin-top:90px}
.prose h3{font-size:1.22rem;margin-top:1.7em;scroll-margin-top:90px}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold-soft);transition:text-decoration-color var(--ease)}
.prose a:hover{text-decoration-color:var(--gold)}
.prose ul,.prose ol{padding-inline-start:1.4em}
.prose li+li{margin-top:.4em}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--primary)}
/* Code blocks stay dark: a real code editor look, and the strongest contrast on the page. */
.prose pre{background:var(--primary-dark);border:1px solid var(--primary-dark);
  border-radius:var(--radius-sm);padding:18px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;color:var(--k-code-ink);font-size:.84rem;
  line-height:1.7}
.prose blockquote{border-inline-start:3px solid var(--gold);background:var(--surface-2);
  padding:14px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-dim)}
.prose img{border-radius:var(--radius-sm);border:1px solid var(--line);margin-inline:auto}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:start}
.prose th{background:var(--surface-2);font-family:var(--mono);font-size:.78rem;
  color:var(--text-dim)}
.prose figcaption{font-family:var(--mono);font-size:.74rem;color:var(--text-faint);
  text-align:center}
.prose hr{border:0;border-top:1px solid var(--line)}
.toc{border:1px solid var(--line);border-inline-start:3px solid var(--gold);
  background:var(--surface-2);border-radius:var(--radius-sm);padding:18px 20px;margin:30px 0}
.toc b{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-faint);
  text-transform:uppercase;display:block;margin-bottom:10px}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:7px}
.toc li{counter-increment:toc;font-size:.9rem;padding-inline-start:26px;position:relative}
.toc li::before{content:counter(toc) ".";position:absolute;inset-inline-start:0;
  font-family:var(--mono);color:var(--accent-dim);font-size:.78rem}
.toc li.lvl-3{padding-inline-start:40px}
.toc a{color:var(--text-dim);transition:color var(--ease)}
.toc a:hover{color:var(--primary)}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 0}
.tag-row a{font-family:var(--mono);font-size:.72rem;color:var(--text-dim);
  border:1px solid var(--line);border-radius:100px;padding:5px 12px;transition:all var(--ease)}
.tag-row a:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-soft)}
.share-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--line)}
.share-bar .label{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em}
.share-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--text-dim);display:grid;place-items:center;
  cursor:pointer;transition:all var(--ease)}
.share-btn:hover{border-color:var(--primary);color:var(--primary);box-shadow:var(--shadow-sm)}
.share-btn.copied{border-color:var(--primary);color:var(--primary)}
.author-box{display:flex;gap:16px;align-items:center;border:1px solid var(--line);
  background:var(--bg);border-radius:var(--radius);padding:20px;margin-top:34px;
  box-shadow:var(--shadow-sm)}
.author-box .avatar{width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--k-on-brand);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;flex-shrink:0;
  box-shadow:0 0 0 1px var(--gold-soft)}
.author-box b{display:block;font-family:var(--display)}
.author-box p{color:var(--text-dim);font-size:.88rem}

/* sidebar */
.rail{display:flex;flex-direction:column;gap:24px;position:sticky;top:92px}
.panel{border:1px solid var(--line);background:var(--bg);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm)}
.panel h2,.panel h3{font-size:1rem;margin-bottom:16px;font-family:var(--display)}
.panel .tag-cloud{display:flex;gap:8px;flex-wrap:wrap}
.panel .tag-cloud a{font-family:var(--mono);font-size:.72rem;color:var(--text-dim);
  border:1px solid var(--line);border-radius:100px;padding:5px 11px;transition:all var(--ease)}
.panel .tag-cloud a:hover{border-color:var(--primary);color:var(--primary);
  background:var(--bg-soft)}

/* ---------------------------------------------------------------- listing/filters */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.filter-bar .chips{display:flex;gap:8px;flex-wrap:wrap}
.filter-bar .chips a{font-family:var(--mono);font-size:.74rem;color:var(--text-dim);
  border:1px solid var(--line);border-radius:100px;padding:6px 13px;background:var(--bg);
  transition:all var(--ease)}
.filter-bar .chips a:hover{border-color:var(--primary);color:var(--primary)}
.filter-bar .chips a.active{background:var(--primary);color:var(--k-on-brand);border-color:var(--primary);
  font-weight:700}
.search-form{display:flex;gap:8px;margin-inline-start:auto}
.search-form input{background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:10px 13px;font-family:var(--body);font-size:.9rem;
  min-width:210px;transition:border-color var(--ease),box-shadow var(--ease)}
.search-form input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--accent-glow)}
.search-form input::placeholder{color:var(--text-faint)}
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;
  margin-top:44px;flex-wrap:wrap}
.pagination a,.pagination span{font-family:var(--mono);font-size:.8rem;padding:9px 14px;
  border:1px solid var(--line);border-radius:10px;color:var(--text-dim);background:var(--bg)}
.pagination a{transition:all var(--ease)}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}
.pagination .current{background:var(--primary);color:var(--k-on-brand);border-color:var(--primary);
  font-weight:700}
.pagination .gap{border:0;background:none}
.empty-state{border:1px solid var(--line);background:var(--bg);border-radius:var(--radius);
  padding:40px 26px;text-align:center;box-shadow:var(--shadow-sm)}
.empty-state h2{font-size:1.3rem;margin-bottom:10px}
.empty-state p{color:var(--text-dim);max-width:52ch;margin:0 auto 18px}

/* ---------------------------------------------------------------- newsletter */
.newsletter{border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);padding:38px;background:var(--surface-2);display:grid;
  grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;box-shadow:var(--shadow-sm)}
.newsletter h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:10px}
.newsletter p{color:var(--text-dim)}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input[type=email]{flex:1;min-width:220px;background:var(--bg);
  border:1px solid var(--line);color:var(--text);border-radius:var(--radius-sm);
  padding:13px 15px;font-family:var(--body);transition:border-color var(--ease),box-shadow var(--ease)}
.newsletter input[type=email]:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--accent-glow)}
.newsletter .honeypot{position:absolute;left:-9999px}
.newsletter .note{font-family:var(--mono);font-size:.7rem;color:var(--text-faint);margin-top:12px}
.newsletter-status{font-family:var(--mono);font-size:.78rem;margin-top:12px;min-height:1.2em}
.newsletter-status.ok{color:var(--primary)}
.newsletter-status.err{color:var(--danger)}

/* ---------------------------------------------------------------- footer */
.site-footer{border-top:1px solid var(--line);padding:52px 0 34px;margin-top:30px;
  background:var(--surface-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
.foot-grid h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-grid a{color:var(--text-dim);font-size:.9rem;transition:color var(--ease)}
.foot-grid a:hover{color:var(--primary)}
.foot-grid p{color:var(--text-dim);font-size:.9rem;max-width:38ch;margin-top:14px}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px;font-family:var(--mono);
  font-size:.74rem;color:var(--text-faint)}
.foot-bar a{color:var(--text-dim)}
.foot-bar a:hover{color:var(--primary)}

.back-to-top{position:fixed;inset-inline-end:22px;bottom:22px;width:44px;height:44px;
  border-radius:12px;border:1px solid var(--line);background:var(--bg);
  color:var(--primary);display:grid;place-items:center;cursor:pointer;z-index:70;
  box-shadow:var(--shadow-md)}
.back-to-top[hidden]{display:none}
.toast{position:fixed;inset-inline:0;bottom:26px;margin:0 auto;width:max-content;
  background:var(--primary);color:var(--k-on-brand);font-family:var(--mono);font-weight:700;
  font-size:.78rem;padding:10px 18px;border-radius:100px;z-index:80;
  box-shadow:var(--shadow-md)}
.toast[hidden]{display:none}

/* ---------------------------------------------------------------- legal pages */
.page-head{padding:52px 0 10px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:14px}
.page-head p{color:var(--text-dim);max-width:62ch}
.legal{max-width:78ch}
.legal h2{font-size:1.25rem;margin:2.2em 0 .6em}
.legal h3{font-size:1.05rem;margin:1.6em 0 .5em}
.legal ul{padding-inline-start:1.4em;color:var(--text-dim)}
.legal li+li{margin-top:.4em}
.legal p,.legal li{color:var(--text-dim)}
.legal strong{color:var(--text)}
.legal a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold-soft)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.contact-list{list-style:none;display:grid;gap:12px}
.contact-list a,.contact-list div{display:flex;gap:14px;align-items:center;
  border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-sm);
  padding:16px 18px;box-shadow:var(--shadow-sm);transition:border-color var(--ease)}
.contact-list a:hover{border-color:var(--gold)}
.contact-list .k{font-family:var(--mono);font-size:.68rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em}
.contact-list .v{font-size:.94rem}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:.72rem;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.06em}
.field input,.field textarea,.field select{background:var(--bg);border:1px solid var(--line);
  color:var(--text);border-radius:var(--radius-sm);padding:12px 14px;font-family:var(--body);
  font-size:.95rem;width:100%;transition:border-color var(--ease),box-shadow var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;
  border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-glow)}
.field textarea{min-height:150px;resize:vertical}
.field .honeypot{position:absolute;left:-9999px}
.form-status{font-family:var(--mono);font-size:.78rem;margin-top:12px;min-height:1.2em}
.form-status.ok{color:var(--primary)}
.form-status.err{color:var(--danger)}
.notice{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-sm);
  padding:16px 18px;color:var(--text-dim);font-size:.92rem;margin:20px 0}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .article-layout{grid-template-columns:1fr;gap:34px}
  .rail{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .card-grid{grid-template-columns:1fr 1fr}
  .newsletter{grid-template-columns:1fr}
}
@media(max-width:760px){
  .burger{display:flex}
  /* [CLS] The bar holds one height on mobile. With an auto height the webfont swap grew
     the bar from 48px to 92px after first paint and pushed the whole document down:
     measured as two layout shifts worth 0.34 + 0.35 on the home page. 64px is also the
     offset the off-canvas panel below is positioned against. */
  .nav{height:64px;flex-wrap:nowrap;padding:0}
  /* [CLS] The panel is off-canvas from the first paint instead of only after site.js marks
     the list collapsible; the in-flow -> fixed transition was the largest shift measured
     (0.34). Visitors without JavaScript keep the wrapped, in-flow list, restored by the
     <noscript> override in views/site/_partials/head.php. */
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;
    gap:2px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);
    padding:10px 24px 22px;box-shadow:var(--shadow-md);transform:translateY(-140%);
    transition:transform .32s ease-out;z-index:55;width:100%;flex-wrap:nowrap}
  .nav-links.open{transform:none}
  .nav-links a,.nav-links .nav-cta{display:block;width:100%;padding:12px 0;border:0;
    font-size:1rem}
  .hero{padding:56px 0 38px}
  section{padding:52px 0}
  section.tight{padding:34px 0}
  .card-grid,.card-grid.two{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .newsletter{padding:26px 22px}
  .search-form{margin-inline-start:0;width:100%}
  .search-form input{flex:1;min-width:0}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .tip{padding:20px 20px 20px 20px}
  .tip::before{position:static;display:inline-block;margin-bottom:12px}
  .ad-slot{margin:34px auto}
}
@media(max-width:480px){
  .cat-grid{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  .ad-slot{padding:0 18px}
}
/* ---------------------------------------------------------------- ad compliance
   [C-02] A sticky header scrolls over an ad container, which the policy forbids as an
   overlay. Pages that actually serve an ad carry class="has-ads" on <body>, and on those
   the header becomes static. Pages with no advertising (legal pages, the archive, which has
   no configured unit) keep the sticky header, so nothing is lost where there is nothing to
   overlay. */
body.has-ads .site-header{position:static!important}

/* [2.A] Collapse a unit the browser has decided it cannot fill.
   The first rule is the documented, permitted case: hiding happens only AFTER the browser
   sets data-ad-status="unfilled", never before it. It touches no DOM, no attribute, no
   slot id, client or format — it is a pure CSS selector, which is why A1 is not breached.

   The second rule is the one that actually reclaims the white space. Hiding the <ins> alone
   leaves its wrapper still holding the reserved min-height, so the empty gap this task is
   about would remain. :has() lets the WRAPPER collapse once the unit inside it came back
   unfilled — still strictly after the browser's own decision. A browser without :has()
   simply keeps the reserved box, which is the harmless fallback. */
ins.adsbygoogle[data-ad-status="unfilled"]{
  display:none!important;
  min-height:0!important;
  height:0!important;
}
.ad-slot:has(> ins.adsbygoogle[data-ad-status="unfilled"]){
  display:none;
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}
@media print{
  .site-header,.site-footer,.rail,.ad-slot,.share-bar,.back-to-top,.newsletter{
    display:none!important}
  body{background:var(--k-bg);color:var(--k-print-ink)}
  .prose,.prose *{color:var(--k-print-ink)!important}
}