/* ============================================================
   ZEEM TECH SOLUTION — Cloud & Cybersecurity Hub
   cloud.zeemtechsolution.com  |  shared stylesheet (all pages)
   ------------------------------------------------------------
   1. Tokens            6. Hero grid
   2. Base              7. Article feed
   3. Utility bar       8. Sidebar widgets
   4. Masthead + nav    9. Footer
   5. Breaking ticker  10. Responsive
   11. Ad slots        12. Consent banner
   13. Inner pages
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
:root{
  /* brand */
  --navy-900:#082c45;
  --navy-800:#0b3c5d;
  --navy-700:#004b79;
  --cyan:#00a8cc;
  --cyan-600:#008cab;
  --crimson:#d9534f;
  --crimson-700:#b93f3b;
  --amber:#c98a00;
  --green:#2f855a;

  /* surfaces + ink (light) */
  --page:#f4f6f8;
  --card:#ffffff;
  --card-sunken:#eef2f6;
  --ink:#222222;
  --ink-soft:#3d4650;
  --meta:#666666;
  --line:#e2e7ec;
  --line-strong:#ccd6de;
  --shadow:0 1px 1px rgba(11,60,93,.05), 0 6px 16px rgba(11,60,93,.06);

  /* chrome */
  --utility-bg:var(--navy-900);
  --masthead-bg:var(--navy-800);
  --nav-bg:var(--navy-700);
  --chrome-ink:#eaf3f8;
  --chrome-ink-dim:#a8c6d8;
  --chrome-line:rgba(255,255,255,.14);

  /* type scale */
  --f-xs:.6875rem;   /* 11px — badges, kickers */
  --f-sm:.8125rem;   /* 13px — meta */
  --f-base:.9375rem; /* 15px — body */
  --f-md:1.0625rem;  /* 17px — card titles */
  --f-lg:1.25rem;    /* 20px — section heads */
  --f-2xl:1.875rem;  /* 30px — logo */

  --radius:4px;
  --radius-sm:3px;
  --gutter:24px;
  --maxw:1280px;

  --sans:'Inter','Roboto','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
}

/* dark — system preference, unless an explicit light choice was stamped */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#0d151d;
    --card:#141e28;
    --card-sunken:#1b2735;
    --ink:#e7eef5;
    --ink-soft:#c3d0dc;
    --meta:#93a3b3;
    --line:#22303d;
    --line-strong:#324454;
    --shadow:0 1px 1px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.32);
    --utility-bg:#061e2f;
    --masthead-bg:#07293e;
    --nav-bg:#0a3450;
    --chrome-ink:#dceaf3;
    --chrome-ink-dim:#8fb2c7;
    --cyan:#22bfe0;
    --cyan-600:#4ed0ea;
    --crimson:#e2635f;
    --amber:#e0a72a;
    --green:#48a97a;
  }
}
/* dark — explicit toggle beats a light OS */
:root[data-theme="dark"]{
  --page:#0d151d;
  --card:#141e28;
  --card-sunken:#1b2735;
  --ink:#e7eef5;
  --ink-soft:#c3d0dc;
  --meta:#93a3b3;
  --line:#22303d;
  --line-strong:#324454;
  --shadow:0 1px 1px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.32);
  --utility-bg:#061e2f;
  --masthead-bg:#07293e;
  --nav-bg:#0a3450;
  --chrome-ink:#dceaf3;
  --chrome-ink-dim:#8fb2c7;
  --cyan:#22bfe0;
  --cyan-600:#4ed0ea;
  --crimson:#e2635f;
  --amber:#e0a72a;
  --green:#48a97a;
}

/* ---------- 2. BASE -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--f-base);
  line-height:1.55;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;text-wrap:balance;font-weight:700;letter-spacing:-.011em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
code{font-family:var(--mono);font-size:.92em;background:var(--card-sunken);padding:1px 4px;border-radius:2px;color:var(--ink-soft)}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:2px;
}

.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.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}

/* reusable badge — one class, category colour via data attribute */
.badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:var(--f-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:var(--radius-sm);
  background:var(--navy-700);
  color:#fff;
  white-space:nowrap;
}
.badge[data-cat="azure"]{background:#0b6fb8}
.badge[data-cat="aws"]{background:#b26a00}
.badge[data-cat="gcp"]{background:#2b6ed9}
.badge[data-cat="m365"]{background:#8a3ba8}
.badge[data-cat="security"]{background:var(--crimson)}
.badge[data-cat="tutorial"]{background:#1f7a63}
.badge[data-cat="downloads"]{background:#4a5b6b}

/* ---------- 3. UTILITY BAR ------------------------------- */
.utility{
  background:var(--utility-bg);
  color:var(--chrome-ink-dim);
  font-size:var(--f-sm);
  border-bottom:1px solid var(--chrome-line);
}
.utility .shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:38px;
}
.quicklinks{display:flex;align-items:center;flex-wrap:wrap}
.quicklinks li+li{border-left:1px solid var(--chrome-line);margin-left:12px;padding-left:12px}
.quicklinks a{transition:color .15s ease}
.quicklinks a:hover{color:var(--cyan)}
.quicklinks a[data-flag="alert"]{color:#ffd9d8;font-weight:600}
.quicklinks a[data-flag="alert"]::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:6px;
  border-radius:50%;background:var(--crimson);vertical-align:1px;
  box-shadow:0 0 0 3px rgba(217,83,79,.28);
}

.utility-right{display:flex;align-items:center;gap:10px}

.searchbox{position:relative;display:flex;align-items:center}
.searchbox input{
  width:210px;
  background:rgba(255,255,255,.09);
  border:1px solid var(--chrome-line);
  border-radius:var(--radius-sm);
  padding:5px 30px 5px 9px;
  font-size:var(--f-sm);
  color:#fff;
  transition:width .2s ease, background .2s ease, border-color .2s ease;
}
.searchbox input::placeholder{color:rgba(226,240,248,.6)}
.searchbox input:focus{width:260px;background:rgba(255,255,255,.16);border-color:var(--cyan);outline:none}
.searchbox .icon{position:absolute;right:8px;color:var(--chrome-ink-dim);pointer-events:none}

.icon-btn{
  display:grid;place-items:center;
  width:30px;height:30px;
  background:rgba(255,255,255,.09);
  border:1px solid var(--chrome-line);
  border-radius:var(--radius-sm);
  color:var(--chrome-ink);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.icon-btn:hover{background:var(--cyan);border-color:var(--cyan);color:#04202f}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none}
}

/* ---------- 4. MASTHEAD + NAV --------------------------- */
.masthead{background:var(--masthead-bg);color:#fff}
.masthead .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:18px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--cyan),#0b6fb8);
  color:#04202f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.brand-name{
  display:block;
  font-size:var(--f-2xl);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
}
.brand-name i{font-style:normal;color:var(--cyan)}
.brand-tag{
  display:block;margin-top:5px;
  font-family:var(--mono);
  font-size:var(--f-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--chrome-ink-dim);
}
.masthead-aside{
  display:flex;align-items:center;gap:18px;
  font-size:var(--f-sm);color:var(--chrome-ink-dim);
}
.stat{text-align:right;line-height:1.3}
.stat b{
  display:block;font-family:var(--mono);font-size:var(--f-md);
  color:#fff;font-weight:700;font-variant-numeric:tabular-nums;
}
.stat i{font-style:normal;font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase}
.stat[data-tone="alert"] b{color:#ffb3b1}

/* nav row */
.mainnav{
  background:var(--nav-bg);
  border-top:1px solid var(--chrome-line);
  position:sticky;top:0;z-index:60;
}
.mainnav .shell{display:flex;align-items:stretch;padding:0}
.navlist{display:flex;align-items:stretch;flex-wrap:wrap}
.navlist>li{position:relative}
.navlist>li>a{
  display:flex;align-items:center;gap:7px;height:100%;
  padding:13px 15px;
  color:#e9f4fa;
  font-size:var(--f-sm);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  border-bottom:3px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.navlist>li>a:hover,
.navlist>li:focus-within>a,
.navlist>li[aria-current="page"]>a{
  background:rgba(0,0,0,.22);
  border-bottom-color:var(--cyan);
  color:#fff;
}
.navlist>li[aria-current="page"]>a{background:rgba(0,0,0,.3)}
.has-mega>a::after{
  content:"";width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.7;
}

/* mega menu */
.mega{
  position:absolute;top:100%;left:0;z-index:70;
  min-width:520px;
  max-width:calc(100vw - (2 * var(--gutter)));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 28px;
  padding:20px 24px;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  border-top:3px solid var(--cyan);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 18px 40px rgba(8,44,69,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* right-hand nav items open their panel leftward, so a 520px panel on the
   last dropdown can never push the page into a horizontal scroll */
.mega[data-align="right"]{left:auto;right:0}
.mega h4{
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-600);
  padding-bottom:8px;margin-bottom:9px;border-bottom:1px solid var(--line);
}
.mega ul{display:grid;gap:7px;margin-bottom:18px}
.mega a{font-size:var(--f-sm);color:var(--ink-soft);transition:color .12s ease,padding-left .12s ease}
.mega a:hover{color:var(--navy-700);padding-left:3px}
:root[data-theme="dark"] .mega a:hover{color:var(--cyan)}
.mega .mega-feature{
  grid-column:1/-1;margin-bottom:0;
  display:flex;gap:12px;align-items:flex-start;
  padding-top:14px;border-top:1px solid var(--line);
}
.mega .mega-feature p{font-size:var(--f-sm);color:var(--meta)}
.mega .mega-feature strong{display:block;color:var(--ink);font-size:var(--f-sm)}

/* mobile nav trigger */
.navtoggle{
  display:none;align-items:center;gap:8px;
  padding:12px 14px;background:rgba(0,0,0,.24);
  border:0;border-right:1px solid var(--chrome-line);
  color:#fff;font-size:var(--f-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
}

/* ---------- 5. BREAKING TICKER -------------------------- */
.ticker{
  background:linear-gradient(90deg,var(--crimson-700),var(--crimson) 60%);
  color:#fff;overflow:hidden;
}
.ticker .shell{display:flex;align-items:center;padding-inline:0}
.ticker-label{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;
  background:rgba(0,0,0,.28);
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.ticker-label .pulse{
  width:7px;height:7px;border-radius:50%;background:#fff;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.ticker-viewport{
  flex:1 1 auto;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
.ticker-track{
  display:flex;align-items:center;gap:44px;
  padding-left:16px;
  white-space:nowrap;
  width:max-content;
  animation:marquee 46s linear infinite;
}
.ticker-viewport:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track a{font-size:var(--f-sm);font-weight:500}
.ticker-track a:hover{text-decoration:underline;text-underline-offset:3px}
.ticker-track .cve{
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  background:rgba(0,0,0,.26);padding:2px 6px;border-radius:var(--radius-sm);margin-right:8px;
}

/* ---------- 6. HERO GRID -------------------------------- */
main{display:block;padding-block:26px 40px}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:14px;
  padding-bottom:9px;border-bottom:2px solid var(--navy-800);
}
.section-head h2{font-size:var(--f-lg)}
.section-head h2 em{font-style:normal;color:var(--cyan-600)}
.section-head a{
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy-700);
}
:root[data-theme="dark"] .section-head a{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .section-head a{color:var(--cyan)}
}
.section-head a:hover{color:var(--cyan-600);text-decoration:underline;text-underline-offset:3px}

.hero{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:34px;
}
.hero-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hero-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 10px 26px rgba(8,44,69,.16)}
.hero-card>a{display:flex;flex-direction:column;height:100%}
.hero-card .thumb{aspect-ratio:16/9}
.hero-card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.hero-card h3{font-size:var(--f-md);letter-spacing:-.015em}
.hero-card a:hover h3,.hero-card a:focus-visible h3{
  color:var(--navy-700);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;
}
:root[data-theme="dark"] .hero-card a:hover h3{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-card a:hover h3{color:var(--cyan)}
}
.hero-card .metaline{margin-top:auto}

.metaline{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:var(--f-sm);color:var(--meta);
}
.metaline .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.metaline time,.metaline .count{font-family:var(--mono);font-size:var(--f-xs);font-variant-numeric:tabular-nums}
.metaline .author{font-weight:600;color:var(--ink-soft)}
.metaline .count{display:inline-flex;align-items:center;gap:4px}

/* thumbnail placeholders — pure CSS, no external assets */
.thumb{
  position:relative;
  background:linear-gradient(140deg,var(--navy-800),var(--navy-700) 52%,var(--cyan) 140%);
  display:grid;place-items:center;
  overflow:hidden;
}
.thumb::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 100% at 15% 0%,#000,transparent 78%);
  mask-image:radial-gradient(120% 100% at 15% 0%,#000,transparent 78%);
}
.thumb::after{
  content:attr(data-glyph);
  position:relative;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1rem,2.6vw,1.5rem);
  letter-spacing:.22em;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.thumb[data-tone="aws"]{background:linear-gradient(140deg,#22303e,#7a4a00 60%,#f0a13a 150%)}
.thumb[data-tone="m365"]{background:linear-gradient(140deg,#2a1a3e,#6a2b8c 58%,#c46ce8 150%)}
.thumb[data-tone="azure"]{background:linear-gradient(140deg,#0b2740,#0b6fb8 60%,#54c8f5 150%)}
.thumb[data-tone="security"]{background:linear-gradient(140deg,#2b1113,#a33b37 58%,#f08a86 150%)}
.thumb[data-tone="gcp"]{background:linear-gradient(140deg,#141f38,#2b6ed9 58%,#8fb9ff 150%)}
.thumb[data-tone="tutorial"]{background:linear-gradient(140deg,#0e2b25,#1f7a63 58%,#63d3b4 150%)}
.thumb .badge{position:absolute;top:9px;left:9px;z-index:2}
.thumb .sev{
  position:absolute;bottom:9px;right:9px;z-index:2;
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  background:rgba(4,20,30,.72);color:#fff;
  padding:2px 6px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.2);
  font-variant-numeric:tabular-nums;
}

/* ---------- 7. FEED + SIDEBAR LAYOUT -------------------- */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:32px;
  align-items:start;
}

.feed{display:grid;gap:16px}

.post{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.post:hover{border-color:var(--line-strong);box-shadow:0 8px 22px rgba(8,44,69,.13)}
/* side thumb fills its 260px column; no aspect-ratio here, or the row
   height would derive an over-wide box that overlaps the article text */
.post .thumb{width:100%;height:100%;min-height:168px}
.post-body{padding:16px 18px;display:flex;flex-direction:column;gap:9px;min-width:0}
.post-kicker{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.post h3{font-size:1.1875rem;letter-spacing:-.018em}
.post h3 a{transition:color .12s ease}
.post h3 a:hover,.post h3 a:focus-visible{
  color:var(--navy-700);
  text-decoration:underline;
  text-decoration-color:var(--navy-800);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
:root[data-theme="dark"] .post h3 a:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .post h3 a:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
}
.post .excerpt{color:var(--meta);font-size:var(--f-base);max-width:66ch}
.post .metaline{margin-top:auto;padding-top:4px}
.post[hidden]{display:none}

.feed-empty{
  display:none;
  padding:44px 20px;text-align:center;
  background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--radius);
}
.feed-empty p{color:var(--meta);font-size:var(--f-sm);margin-top:6px}
.feed-empty strong{font-size:var(--f-md)}
.feed-empty.is-visible{display:block}

.filter-note{
  display:none;align-items:center;gap:10px;
  padding:9px 12px;margin-bottom:2px;
  background:var(--card-sunken);
  border-left:3px solid var(--cyan);
  border-radius:var(--radius-sm);
  font-size:var(--f-sm);color:var(--ink-soft);
}
.filter-note.is-visible{display:flex}
.filter-note b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.filter-note button{
  margin-left:auto;background:none;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:2px 9px;font-size:var(--f-xs);
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--meta);cursor:pointer;
}
.filter-note button:hover{border-color:var(--crimson);color:var(--crimson)}

/* pagination */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex-wrap:wrap;margin-top:26px;
}
.pagination button{
  min-width:38px;height:38px;padding:0 12px;
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:var(--f-sm);font-weight:700;
  color:var(--ink-soft);cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.pagination button:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.pagination button[aria-current="true"]{
  background:var(--navy-800);border-color:var(--navy-800);color:#fff;cursor:default;
}
.pagination .ellipsis{color:var(--meta);padding-inline:4px;font-family:var(--mono)}
.pagination .next{letter-spacing:.06em;text-transform:uppercase;font-size:var(--f-xs)}

/* ---------- 8. SIDEBAR ---------------------------------- */
.sidebar{
  display:grid;gap:20px;
  position:sticky;top:64px;
}
.widget{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.widget-head{
  display:flex;align-items:center;gap:9px;
  padding:11px 14px;
  background:var(--navy-800);
  color:#fff;
}
.widget-head h2{
  font-size:var(--f-sm);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}
.widget-head .tick{
  margin-left:auto;font-family:var(--mono);font-size:var(--f-xs);
  color:var(--chrome-ink-dim);letter-spacing:.06em;
}
.widget-body{padding:6px 14px 14px}

/* popular stories — ranked list */
.ranked li{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.ranked li:last-child{border-bottom:0;padding-bottom:2px}
.ranked .rank{
  font-family:var(--mono);font-size:1.125rem;font-weight:700;
  color:var(--cyan-600);line-height:1.15;font-variant-numeric:tabular-nums;
}
.ranked a{font-weight:600;font-size:var(--f-base);line-height:1.35;display:block}
.ranked a:hover{color:var(--navy-700);text-decoration:underline;text-underline-offset:2px}
:root[data-theme="dark"] .ranked a:hover{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ranked a:hover{color:var(--cyan)}
}
.ranked .metaline{margin-top:4px}

/* bulletins */
.bulletins li{padding:11px 0;border-bottom:1px solid var(--line)}
.bulletins li:last-child{border-bottom:0}
.bulletin-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.cve-id{
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  color:var(--ink);background:var(--card-sunken);
  padding:2px 6px;border-radius:var(--radius-sm);
}
.sev-pill{
  margin-left:auto;
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  padding:2px 8px;border-radius:999px;color:#fff;
  font-variant-numeric:tabular-nums;
}
.sev-pill[data-sev="critical"]{background:var(--crimson)}
.sev-pill[data-sev="high"]{background:#e07b39;color:#2b1200}
.sev-pill[data-sev="medium"]{background:var(--amber);color:#2b1f00}
.bulletins a{font-size:var(--f-sm);font-weight:600;line-height:1.4;display:block}
.bulletins a:hover{color:var(--navy-700);text-decoration:underline}
:root[data-theme="dark"] .bulletins a:hover{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bulletins a:hover{color:var(--cyan)}
}
.bulletins .sev-bar{
  height:3px;border-radius:2px;background:var(--card-sunken);
  margin-top:7px;overflow:hidden;
}
.bulletins .sev-bar i{display:block;height:100%;background:var(--crimson)}
.scanner-cta{
  display:flex;align-items:center;gap:9px;
  margin-top:12px;padding:10px 12px;
  background:var(--card-sunken);border-radius:var(--radius-sm);
  font-size:var(--f-sm);color:var(--ink-soft);
}
.scanner-cta a{font-weight:700;color:var(--navy-700);text-decoration:underline;text-underline-offset:2px}
:root[data-theme="dark"] .scanner-cta a{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .scanner-cta a{color:var(--cyan)}
}

/* newsletter */
.widget.newsletter{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  border-color:var(--navy-900);
}
.widget.newsletter .widget-body{padding:16px 16px 18px;color:var(--chrome-ink)}
.newsletter h2{font-size:var(--f-md);color:#fff;margin-bottom:6px}
.newsletter p{font-size:var(--f-sm);color:var(--chrome-ink-dim);margin-bottom:12px}
.newsletter form{display:grid;gap:9px}
.newsletter input{
  width:100%;padding:10px 11px;
  background:rgba(255,255,255,.1);
  border:1px solid var(--chrome-line);
  border-radius:var(--radius-sm);
  color:#fff;font-size:var(--f-sm);
}
.newsletter input::placeholder{color:rgba(226,240,248,.55)}
.newsletter input:focus{border-color:var(--cyan);background:rgba(255,255,255,.16);outline:none}
.btn-accent{
  padding:10px 14px;
  background:var(--cyan);
  border:0;border-radius:var(--radius-sm);
  color:#03202c;
  font-size:var(--f-sm);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease,transform .1s ease;
}
.btn-accent:hover{background:#2ec4e4}
.btn-accent:active{transform:translateY(1px)}
.newsletter .fineprint{
  display:flex;align-items:center;gap:6px;margin-bottom:0;
  font-size:var(--f-xs);color:var(--chrome-ink-dim);
}
.newsletter .status{
  font-family:var(--mono);font-size:var(--f-xs);
  color:#8ff0c4;min-height:1.2em;margin-bottom:0;
}

/* downloads */
.downloads li{
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;
  padding:11px 0;border-bottom:1px solid var(--line);align-items:start;
}
.downloads li:last-child{border-bottom:0}
.dl-icon{
  width:36px;height:36px;border-radius:var(--radius-sm);
  display:grid;place-items:center;
  background:var(--card-sunken);
  color:var(--navy-700);
}
:root[data-theme="dark"] .dl-icon{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dl-icon{color:var(--cyan)}
}
.downloads a{font-size:var(--f-sm);font-weight:700;display:block;line-height:1.35}
.downloads a:hover{color:var(--navy-700);text-decoration:underline}
:root[data-theme="dark"] .downloads a:hover{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .downloads a:hover{color:var(--cyan)}
}
.downloads .dl-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:3px;font-family:var(--mono);font-size:var(--f-xs);color:var(--meta);
  font-variant-numeric:tabular-nums;
}
.downloads .free{color:var(--green);font-weight:700}

/* ---------- 9. FOOTER ---------------------------------- */
.site-footer{
  background:var(--navy-900);
  color:var(--chrome-ink-dim);
  padding-top:34px;
  border-top:3px solid var(--cyan);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr repeat(4,minmax(0,1fr));
  gap:28px;
  padding-bottom:28px;
}
.footer-grid h3{
  font-family:var(--mono);font-size:var(--f-xs);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:12px;
}
.footer-grid p{font-size:var(--f-sm);max-width:46ch}
.footer-grid ul{display:grid;gap:8px}
.footer-grid a{font-size:var(--f-sm)}
.footer-grid a:hover{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.footer-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  color:#fff;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;
}
.footer-brand .brand-mark{width:34px;height:34px}
.footer-bar{
  border-top:1px solid var(--chrome-line);
  padding-block:16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  font-size:var(--f-xs);
}
.footer-bar .domain{font-family:var(--mono);color:var(--cyan)}

/* ---------- 10. RESPONSIVE ----------------------------- */
@media (max-width:1120px){
  .layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
  .hero{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post{grid-template-columns:220px minmax(0,1fr)}
}

@media (max-width:960px){
  :root{--gutter:18px}
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .widget.newsletter{grid-column:1/-1}
  .masthead-aside{display:none}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Nav collapses at 900px, not 760px: below ~900 the eight-item row and its
   520px dropdown panels no longer fit, and a left-anchored panel would push
   the page into a horizontal scroll. Keep this in sync with MOBILE_NAV_MAX
   in the JS below. */
@media (max-width:900px){
  .navtoggle{
    display:flex;width:100%;
    justify-content:flex-start;border-right:0;
  }
  .mainnav{position:static}
  .mainnav .shell{flex-direction:column;padding:0}
  .navlist{display:none;flex-direction:column;width:100%;border-top:1px solid var(--chrome-line)}
  .navlist.is-open{display:flex}
  .navlist>li{border-bottom:1px solid var(--chrome-line)}
  .navlist>li>a{border-bottom:0;border-left:3px solid transparent;padding:13px 18px}
  .navlist>li>a:hover,.navlist>li[aria-current="page"]>a{border-left-color:var(--cyan)}
  .has-mega>a::after{margin-left:auto}
  /* dropdown becomes an in-flow accordion panel */
  .mega,.mega[data-align="right"]{
    position:static;min-width:0;max-width:none;
    opacity:1;visibility:visible;transform:none;
    display:none;border:0;border-top:1px solid var(--chrome-line);border-radius:0;
    box-shadow:none;background:var(--card-sunken);grid-template-columns:minmax(0,1fr);
  }
  .has-mega:hover .mega,.has-mega:focus-within .mega{display:none}
  .has-mega.is-expanded .mega,
  .has-mega.is-expanded:hover .mega,
  .has-mega.is-expanded:focus-within .mega{display:grid}
}

@media (max-width:760px){
  .utility .shell{flex-wrap:wrap;padding-block:8px;gap:10px}
  .quicklinks{font-size:var(--f-xs)}
  .utility-right{flex:1 1 100%}
  .searchbox{flex:1 1 auto}
  .searchbox input,.searchbox input:focus{width:100%}

  .post{grid-template-columns:minmax(0,1fr)}
  .post .thumb{aspect-ratio:16/9;height:auto;min-height:0}
  .post h3{font-size:var(--f-md)}
  .sidebar{grid-template-columns:minmax(0,1fr)}
  .brand-name{font-size:1.5rem}
}

@media (max-width:520px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .quicklinks li:nth-child(n+4){display:none}
  .metaline{font-size:var(--f-xs)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ticker-track{animation:none}
  .ticker-viewport{overflow-x:auto}
}

@media print{
  .utility,.mainnav,.ticker,.sidebar,.pagination,.site-footer{display:none}
  body{background:#fff}
}

/* ============================================================
   11. AD SLOTS — Google AdSense
   ------------------------------------------------------------
   Policy notes baked into these styles:
   - every unit carries a visible "Advertisement" label, so ads are
     clearly distinguishable from editorial content
   - generous margins keep ads away from links, buttons and
     pagination, which prevents accidental-click violations
   - reserved min-height stops layout shift when an ad loads
   - an unfilled unit collapses instead of leaving a blank box
   ============================================================ */
.ad-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  /* keep clear of surrounding interactive elements */
  margin-block:26px;
  padding:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.ad-slot__label{
  font-family:var(--mono);
  font-size:var(--f-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--meta);
}
.ad-slot__frame{
  width:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.ad-slot .adsbygoogle{display:block;width:100%}

/* reserved heights per format — matches the AdSense unit you create */
.ad-slot[data-format="leaderboard"] .ad-slot__frame{min-height:90px}
.ad-slot[data-format="billboard"] .ad-slot__frame{min-height:250px}
.ad-slot[data-format="rectangle"] .ad-slot__frame{min-height:250px}
.ad-slot[data-format="in-feed"] .ad-slot__frame{min-height:120px}
.ad-slot[data-format="in-article"] .ad-slot__frame{min-height:250px}
.ad-slot[data-format="skyscraper"] .ad-slot__frame{min-height:600px}

/* mock placeholder — delete once real <ins> units are pasted in */
.ad-slot[data-placeholder] .ad-slot__frame{
  background:repeating-linear-gradient(
    135deg,var(--card-sunken),var(--card-sunken) 10px,transparent 10px,transparent 20px);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm);
  color:var(--meta);
  font-family:var(--mono);
  font-size:var(--f-xs);
  letter-spacing:.1em;
  text-align:center;
  padding:10px;
}
.ad-slot[data-placeholder] .ad-slot__frame::after{content:attr(data-size)}

/* collapse a unit Google could not fill */
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none}

/* the in-feed unit sits in the article grid and must not look like a card */
.feed .ad-slot{margin-block:0}

/* AdSense forbids ads on pages with no publisher content, and this mock
   ships policy pages that are intentionally ad-light */
.page-legal .ad-slot{margin-block:34px}

/* ============================================================
   12. COOKIE / CONSENT BANNER
   Personalised ads need consent. For EEA + UK traffic Google
   requires a certified CMP — see README. This banner is the
   non-EEA baseline and gates the ad script until a choice exists.
   ============================================================ */
.consent{
  position:fixed;
  inset:auto 0 0 0;
  z-index:200;
  display:none;
  background:var(--navy-900);
  color:var(--chrome-ink);
  border-top:3px solid var(--cyan);
  box-shadow:0 -8px 30px rgba(0,0,0,.28);
}
.consent.is-open{display:block}
.consent .shell{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding-block:16px;
}
.consent p{
  flex:1 1 380px;
  font-size:var(--f-sm);
  color:var(--chrome-ink-dim);
  max-width:74ch;
}
.consent p b{color:#fff;font-weight:700}
.consent a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.btn-ghost{
  padding:10px 16px;
  background:transparent;
  border:1px solid var(--chrome-line);
  border-radius:var(--radius-sm);
  color:var(--chrome-ink);
  font-size:var(--f-sm);
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ============================================================
   13. INNER PAGES — breadcrumbs, prose, forms, article, 404
   Policy, about and contact pages reuse the chrome but drop the
   mega menu and ticker: fewer distractions, faster review.
   ============================================================ */
.breadcrumbs{
  padding-block:14px;
  font-size:var(--f-sm);
  color:var(--meta);
}
.breadcrumbs ol{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumbs a:hover{color:var(--navy-700);text-decoration:underline;text-underline-offset:2px}
:root[data-theme="dark"] .breadcrumbs a:hover{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .breadcrumbs a:hover{color:var(--cyan)}
}
.breadcrumbs .sep{opacity:.5}
.breadcrumbs [aria-current="page"]{color:var(--ink-soft);font-weight:600}

.page-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:32px;
  align-items:start;
  padding-bottom:40px;
}
.page-main{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:30px 34px 34px;
  min-width:0;
}
.page-head{
  padding-bottom:16px;
  margin-bottom:22px;
  border-bottom:2px solid var(--navy-800);
}
.page-head h1{
  font-size:clamp(1.5rem,3.4vw,2.125rem);
  letter-spacing:-.025em;
}
.page-head .kicker{
  display:block;
  margin-bottom:9px;
  font-family:var(--mono);
  font-size:var(--f-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan-600);
}
.page-head .updated{
  margin-top:10px;
  font-family:var(--mono);
  font-size:var(--f-xs);
  color:var(--meta);
}

/* prose — legal text and article bodies */
.prose{max-width:72ch;color:var(--ink-soft)}
.prose>*+*{margin-top:16px}
.prose h2{
  margin-top:34px;
  font-size:1.25rem;
  color:var(--ink);
  padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
.prose h3{margin-top:26px;font-size:1.0625rem;color:var(--ink)}
.prose p,.prose li{font-size:var(--f-base);line-height:1.7}
.prose ul,.prose ol{display:grid;gap:9px;padding-left:20px}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose ol{counter-reset:none}
.prose a{
  color:var(--navy-700);
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}
:root[data-theme="dark"] .prose a{color:var(--cyan)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .prose a{color:var(--cyan)}
}
.prose strong{color:var(--ink)}
.prose table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--f-sm);
}
.prose table th,.prose table td{
  text-align:left;
  padding:9px 11px;
  border:1px solid var(--line);
  vertical-align:top;
}
.prose table th{background:var(--card-sunken);color:var(--ink);font-weight:700}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.callout{
  display:flex;
  gap:12px;
  padding:14px 16px;
  background:var(--card-sunken);
  border-left:3px solid var(--cyan);
  border-radius:var(--radius-sm);
  font-size:var(--f-sm);
}
.callout[data-tone="warn"]{border-left-color:var(--crimson)}
.callout p{margin:0}

/* placeholders the site owner must replace before going live */
.todo{
  background:#ffe9a8;
  color:#4a3600;
  padding:1px 6px;
  border-radius:2px;
  font-family:var(--mono);
  font-size:.9em;
  font-weight:700;
}
:root[data-theme="dark"] .todo{background:#7a5c00;color:#ffe9a8}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .todo{background:#7a5c00;color:#ffe9a8}
}

/* table of contents on long policy pages */
.toc{
  padding:14px 18px;
  background:var(--card-sunken);
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
}
.toc h2{
  margin:0 0 9px;
  font-family:var(--mono);
  font-size:var(--f-xs);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--meta);
  border:0;
  padding:0;
}
.toc ol{display:grid;gap:6px;padding-left:18px}
.toc a{font-size:var(--f-sm);font-weight:500}

/* contact form */
.form-grid{display:grid;gap:14px;max-width:560px;margin-top:20px}
.form-row{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:grid;gap:6px}
.field label{
  font-size:var(--f-sm);
  font-weight:700;
  color:var(--ink);
}
.field label .req{color:var(--crimson)}
.field input,.field textarea,.field select{
  width:100%;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  font-size:var(--f-base);
  color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--cyan);
  outline:2px solid rgba(0,168,204,.25);
  outline-offset:0;
}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-size:var(--f-xs);color:var(--meta)}
.form-status{
  font-family:var(--mono);
  font-size:var(--f-sm);
  min-height:1.3em;
}
.form-status[data-state="ok"]{color:var(--green)}
.form-status[data-state="error"]{color:var(--crimson)}

/* article page */
.article-head .metaline{margin-top:12px}
.article-figure{
  margin-block:22px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}
.article-figure .thumb{aspect-ratio:16/7}
.article-figure figcaption{
  padding:9px 12px;
  background:var(--card-sunken);
  font-size:var(--f-xs);
  color:var(--meta);
}
.article-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

/* 404 — AdSense forbids ads on error pages, so this page has none */
.notfound{
  text-align:center;
  padding:70px 20px 80px;
}
.notfound .code{
  font-family:var(--mono);
  font-size:clamp(3rem,12vw,5.5rem);
  font-weight:700;
  line-height:1;
  color:var(--cyan-600);
  letter-spacing:-.04em;
}
.notfound h1{margin-top:12px;font-size:clamp(1.25rem,4vw,1.75rem)}
.notfound p{margin-top:12px;color:var(--meta);max-width:52ch;margin-inline:auto}
.notfound .links{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:24px;
}
.notfound .links a{
  padding:10px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  font-size:var(--f-sm);
  font-weight:700;
}
.notfound .links a:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}

@media (max-width:960px){
  .page-wrap{grid-template-columns:minmax(0,1fr)}
  .page-main{padding:24px 20px 28px}
}
@media (max-width:520px){
  .form-row{grid-template-columns:minmax(0,1fr)}
  .consent .shell{gap:12px}
  .consent-actions{width:100%}
  .consent-actions button{flex:1 1 auto}
}

/* ============================================================
   14. CLOUDINARY THUMBNAILS
   The gradient set in section 6 stays underneath as the loading
   placeholder, so a slow image never shows a white hole. Once an
   <img> is present the decorative grid and glyph are suppressed.
   ============================================================ */
.thumb__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
}
/* the CSS-only decoration is redundant once real artwork is in place */
.thumb:has(.thumb__img)::before,
.thumb:has(.thumb__img)::after{content:none}

/* badges and severity chips must stay above the image */
.thumb .badge,
.thumb .sev{z-index:2}