/*
Theme Name: Cybervigilance
Theme URI: https://cybervigilance.online
Author: Lucie Cardiet
Description: Dark, calm, threat-informed theme for Cybervigilance, a free all-ages online-safety resource. Homepage leads with a three-stage path (build good habits, check your footprint, know the risks) plus two audience doors (keep your kids safe, own your digital life). Topics cross-link across the three stages via shared tags. No page builder required.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cybervigilance
*/

:root{
  --ink:#1a1d24; --muted:#565d6b; --line:#e4e7ec; --bg:#ffffff; --band:#f6f7f9;
  --accent:#2f5fe0; --accent-soft:#eef2fd;
  --teal:#0b7f8f; --teal-soft:#e2f6f9;
  --warn:#b23b2e; --warn-soft:#fbecea;
  --ok:#1f7a52; --ok-soft:#e9f5ef;
  --amber:#9a6a00; --amber-soft:#fbf2df;
  --navy:#0b1730; --navy2:#0f1f3d; --cyan:#12b3c6; --ice:#dfe6f7;
  --maxw:820px; --maxw-wide:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
img{max-width:100%; height:auto}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.wrap-wide{max-width:var(--maxw-wide); margin:0 auto; padding:0 22px}
section{padding:38px 0; border-bottom:1px solid var(--line)}
h1{font-size:34px; line-height:1.12; margin:0 0 14px; letter-spacing:-.02em}
h2{font-size:23px; letter-spacing:-.01em; margin:0 0 6px}
h3{font-size:18px; margin:0 0 8px}
p{margin:0 0 14px}
.sub{color:var(--muted); margin:0 0 16px}
.note{font-size:14px; color:var(--muted)}
.eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:0 0 10px}
.lede{font-size:18px; color:var(--muted)}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
.skip{position:absolute; left:-9999px; top:0; background:var(--cyan); color:#04222a; padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0}

/* ---------- dark header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(11,23,48,.92); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid #1b2c4d}
.site-header .bar{max-width:var(--maxw-wide); margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.brand .logomark{width:32px; height:32px}
.brand .wordmark{font-size:19px; font-weight:800; letter-spacing:-.02em; color:#fff}
.brand .wordmark .b{color:var(--cyan)}
.brand img.custom-logo{max-height:38px; width:auto}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:2px; align-items:center; flex-wrap:wrap}
.main-nav li{position:relative}
.main-nav a{display:block; text-decoration:none; color:var(--ice); font-weight:600; font-size:14.5px; padding:8px 11px; border-radius:8px; white-space:nowrap}
.main-nav a:hover{background:rgba(143,168,255,.12); color:#fff}
.main-nav .current-menu-item > a,.main-nav .current_page_item > a{color:var(--cyan)}
.main-nav ul ul{position:absolute; top:calc(100% + 4px); left:0; display:none; flex-direction:column; gap:2px; background:#0f1f3d; border:1px solid #24365c; border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.45); padding:6px; min-width:230px; z-index:60}
.main-nav li:hover > ul,.main-nav li.focus > ul,.main-nav li.open > ul{display:flex}
.main-nav .menu-item-has-children > a::after{content:" \25BE"; color:#7f93c4; font-size:.85em}
.main-nav .menu-item.emergency > a{border:1px solid rgba(178,59,46,.6); color:#ffb4a8}
.main-nav .menu-item.emergency > a:hover{background:rgba(178,59,46,.18); color:#fff}

/* ---------- cyber hero ---------- */
.cyber-hero{position:relative; overflow:hidden; color:#eef3ff; text-align:center; background:radial-gradient(1100px 480px at 50% -8%, #17305c 0%, #0d1c39 55%, #091529 100%); border-bottom:1px solid #1b2c4d}
.cyber-hero.tall{padding:58px 22px 50px}
.cyber-hero.slim{padding:46px 22px 34px}
.cyber-hero::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(143,168,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,168,255,.07) 1px,transparent 1px); background-size:36px 36px; -webkit-mask:radial-gradient(circle at 50% 25%, #000, transparent 72%); mask:radial-gradient(circle at 50% 25%, #000, transparent 72%)}
.cyber-hero .inner{position:relative; z-index:2; max-width:860px; margin:0 auto}
.cyber-hero .eyebrow{color:var(--cyan)} .cyber-hero h1{color:#fff} .cyber-hero .lede{color:#aebbe0; max-width:660px; margin:0 auto}
.radar{position:absolute; top:-150px; left:50%; width:560px; height:560px; transform:translateX(-50%); pointer-events:none; opacity:.55; z-index:1}
.radar .ring{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(143,168,255,.22)}
.radar .r1{width:560px;height:560px}.radar .r2{width:370px;height:370px}.radar .r3{width:190px;height:190px}
.radar .sweep{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(18,179,198,0) 0deg, rgba(18,179,198,.30) 42deg, rgba(18,179,198,0) 84deg); animation:radarspin 7s linear infinite}
.radar .blip{position:absolute; top:32%; left:62%; width:12px; height:12px; border-radius:50%; background:var(--cyan); box-shadow:0 0 16px 4px rgba(18,179,198,.8); animation:blip 2.6s ease-out infinite}
@keyframes radarspin{to{transform:rotate(360deg)}}
@keyframes blip{0%{transform:scale(.6);opacity:.35}55%{opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){ .radar .sweep,.radar .blip{animation:none} }

/* ---------- stages ---------- */
.stages{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; text-align:left}
.stagecard{display:flex; flex-direction:column; gap:5px; padding:20px 20px 18px; border:1px solid rgba(143,168,255,.22); border-radius:16px; background:rgba(255,255,255,.045); color:#eef3ff; text-decoration:none; transition:transform .15s, border-color .15s, background .15s, box-shadow .15s}
.stagecard:hover{transform:translateY(-3px); border-color:var(--cyan); background:rgba(18,179,198,.10); box-shadow:0 12px 34px rgba(18,179,198,.18)}
.stagecard .sn{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; letter-spacing:.14em; color:var(--cyan)}
.stagecard b{font-size:17.5px; color:#fff} .stagecard span{font-size:13.5px; color:#a9b8de}
.stagecard .go{margin-top:8px; font-size:13px; font-weight:700; color:var(--cyan)}
.hero-alt{margin-top:22px; font-size:13.5px; color:#8ea1cd} .hero-alt a{color:var(--cyan); text-decoration:none; font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-weight:700; font-size:15px; text-decoration:none; padding:11px 20px; border-radius:10px; cursor:pointer; border:1px solid transparent}
.btn.primary{background:var(--accent); color:#fff} .btn.secondary{background:#fff; color:var(--accent); border-color:#c9d6f8}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* ---------- audience doors ---------- */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
.door{display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); border-radius:16px; padding:24px; text-decoration:none; color:var(--ink); background:#fff; transition:border-color .15s, box-shadow .15s, transform .15s}
.door:hover{border-color:var(--accent); box-shadow:0 8px 26px rgba(47,95,224,.10); transform:translateY(-2px)}
.door .ic{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:4px}
.door .ic svg{width:24px; height:24px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.door.kids .ic{background:var(--ok-soft)} .door.kids .ic svg{stroke:var(--ok)}
.door.self .ic{background:var(--accent-soft)} .door.self .ic svg{stroke:var(--accent)}
.door.help .ic{background:var(--teal-soft)} .door.help .ic svg{stroke:var(--teal)}
.door b{font-size:19px} .door p{margin:0; color:var(--muted); font-size:14.5px}
.door .go{margin-top:6px; font-weight:700; font-size:14px; color:var(--accent)}

/* ---------- stage badges ---------- */
.stbadge{display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; font-weight:700; letter-spacing:.03em; padding:3px 10px; border-radius:999px; text-decoration:none}
.stbadge.habits{background:var(--accent-soft); color:var(--accent)}
.stbadge.footprint,.stbadge.check{background:var(--teal-soft); color:var(--teal)}
.stbadge.risks{background:var(--amber-soft); color:var(--amber)}

/* ---------- triad ---------- */
.triad{border:1px solid var(--line); border-radius:16px; padding:20px; background:linear-gradient(180deg,#fbfcfe,#fff)}
.triad .tt{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--muted); margin:0 0 14px}
.triad-row{display:flex; align-items:stretch; gap:8px; flex-wrap:wrap}
.tchip{flex:1; min-width:190px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px; transition:border-color .15s, box-shadow .15s}
.tchip:hover{border-color:var(--accent); box-shadow:0 4px 16px rgba(47,95,224,.08)}
.tchip b{font-size:15px} .tchip.cur{outline:2px solid var(--accent)}
.tarrow{display:flex; align-items:center; color:var(--muted); font-size:20px; padding:0 2px}
@media (max-width:760px){ .tarrow{transform:rotate(90deg); justify-content:center; width:100%} }

/* ---------- journey ---------- */
.journey{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 6px}
.journey::before{content:""; position:absolute; top:26px; left:16%; right:16%; height:2px; background:linear-gradient(90deg,var(--accent),var(--teal),var(--amber)); opacity:.35; z-index:0}
.jstep{position:relative; z-index:1; border:1px solid var(--line); border-radius:14px; background:#fff; padding:16px 18px 18px; text-align:center}
.jstep .n{width:52px; height:52px; border-radius:50%; margin:-42px auto 12px; background:var(--navy2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; border:1px solid var(--cyan); box-shadow:0 0 0 6px #fff, 0 0 18px rgba(18,179,198,.45)}
.jstep h3{margin:8px 0 6px; font-size:16px} .jstep p{color:var(--muted); font-size:14px; margin:0 0 10px} .jstep a{font-weight:700; font-size:14px; text-decoration:none}

/* ---------- author ---------- */
.author{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; margin-top:14px}
.author .face{width:118px; height:118px; border-radius:16px; overflow:hidden; border:1px solid #24365c; flex-shrink:0; box-shadow:0 0 26px rgba(18,179,198,.16); background:radial-gradient(circle at 50% 38%, #17305c, #0d1c39); display:flex; align-items:center; justify-content:center}
.author .face img{width:100%; height:100%; object-fit:cover}
.author .face svg{width:70px; height:70px}
.author .bio p{margin:0 0 12px; font-size:16px} .author .bio p:last-child{margin-bottom:0} .author .sig{font-weight:700}
.author-links{margin-top:14px}
.author-links a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:14px; color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:7px 14px}
.author-links a:hover{border-color:var(--accent); background:var(--accent-soft)}
.author-links svg{width:18px; height:18px; fill:#0a66c2}
#about{scroll-margin-top:90px}
@media (max-width:760px){ .author{grid-template-columns:1fr; gap:16px} .author .face{width:92px; height:92px} }

/* ---------- generic components ---------- */
.panels{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.panel{background:var(--band); border:1px solid var(--line); border-radius:12px; padding:15px 17px}
.panel b{display:block; margin-bottom:3px} .panel span{color:var(--muted); font-size:15px}
.cardlist{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.lcard{border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:#fff; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:6px; transition:border-color .15s, box-shadow .15s}
.lcard:hover{border-color:var(--accent); box-shadow:0 4px 16px rgba(47,95,224,.08)}
.lcard b{font-size:16px} .lcard span{color:var(--muted); font-size:14px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.card{border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:#fff}
.card h4{margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)} .card h3{margin:0 0 4px; font-size:19px}
.card ul{margin:0; padding-left:18px} .card li{margin:0 0 7px} .card .top{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px} .card .when{color:var(--muted); font-size:14px; margin:0 0 10px}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px}
.col h4,.col h5{margin:0 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)} .col ul{margin:0; padding-left:18px} .col li{margin:0 0 6px; font-size:15px}
.col.wrong li::marker{color:var(--warn)} .col.fix li::marker{color:var(--accent)}
.rating{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:6px; white-space:nowrap}
.r-young{background:var(--ok-soft); color:var(--ok)} .r-teen{background:var(--amber-soft); color:var(--amber)} .r-mature{background:var(--warn-soft); color:var(--warn)} .r-all{background:var(--accent-soft); color:var(--accent)}
.callout{border:1px solid var(--warn-soft); background:var(--warn-soft); border-left:4px solid var(--warn); border-radius:10px; padding:16px 18px; margin:16px 0} .callout b{color:var(--warn)}
.callout.blue{background:var(--accent-soft); border-color:#d7e0fb; border-left-color:var(--accent)} .callout.blue b{color:var(--accent)}
.callout.green{background:var(--ok-soft); border-color:#cfe9dc; border-left-color:var(--ok)} .callout.green b{color:var(--ok)}
.callout.amber{background:var(--amber-soft); border-color:#eeddb0; border-left-color:var(--amber)} .callout.amber b{color:var(--amber)}
.steps{counter-reset:s; list-style:none; padding:0; margin:6px 0 12px}
.steps li{position:relative; padding:2px 0 10px 38px; font-size:15px}
.steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:25px; height:25px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center}
.steps.danger li::before{background:var(--warn)}
.report{font-size:14.5px; background:var(--band); border:1px solid var(--line); border-radius:9px; padding:10px 13px; margin-top:4px}
ul.checklist{list-style:none; padding:0; margin:14px 0}
ul.checklist li{position:relative; padding:3px 0 10px 30px; font-size:15px}
ul.checklist li::before{content:"\2713"; position:absolute; left:0; top:2px; color:var(--accent); font-weight:800}

/* linked eyebrow (stage badge jumps to its stage page) */
.eyebrow a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.eyebrow a:hover,.eyebrow a:focus{border-bottom-color:currentColor}

/* stage page: article-style body + a checklist of links to the step's articles */
.stage-page{padding-top:14px}
.stage-page .entry-content{font-size:16.5px}
.stage-page .entry-content h2{margin-top:34px}
ul.checklist.linky{margin:10px 0 22px}
ul.checklist.linky li{font-size:16.5px; padding-bottom:12px}
ul.checklist.linky li a{font-weight:600; text-decoration:none; border-bottom:1px solid var(--line)}
ul.checklist.linky li a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.stage-all{margin-top:8px; border-top:1px solid var(--line); border-bottom:none; padding-top:30px}
.stage-all h2{margin-bottom:6px}

/* guide components (imported articles) */
.principles{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
.principle{background:var(--band); border:1px solid var(--line); border-radius:12px; padding:16px 18px} .principle b{display:block; margin-bottom:4px} .principle span{color:var(--muted); font-size:15px}
.patterns{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.pat{background:var(--band); border:1px solid var(--line); border-radius:12px; padding:15px 17px} .pat b{display:block; margin-bottom:3px} .pat span{color:var(--muted); font-size:15px}
.agenav{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 2px}
.agenav a{text-decoration:none; border:1px solid var(--line); background:#fff; padding:7px 13px; border-radius:999px; font-weight:600; font-size:14px; color:var(--ink)}
.gnav{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 2px}
.gnav a{text-decoration:none; border:1px solid var(--line); background:#fff; padding:7px 13px; border-radius:999px; font-weight:600; font-size:14px; color:var(--ink)}
.agehdr{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap} .agehdr .tag{color:var(--muted); font-size:15px}
.agechip{display:inline-block; background:var(--accent); color:#fff; font-weight:700; padding:4px 12px; border-radius:8px; font-size:15px}
.band{scroll-margin-top:100px} .risktag{color:var(--warn); font-weight:600}
.card.setup{background:var(--accent-soft); border-color:#d7e0fb} .card.talk{background:var(--ok-soft); border-color:#cfe9dc}
.script{margin:0 0 10px; padding-left:14px; border-left:3px solid var(--ok); font-style:italic}
.game{border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin:18px 0; background:#fff} .game .top{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px} .game h3{margin:0; font-size:21px}
.whoplays{color:var(--muted); font-size:14px; margin:0 0 12px} .what{margin:0 0 14px}
table.ages{width:100%; border-collapse:collapse; margin-top:14px; font-size:15px} table.ages th,table.ages td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)} table.ages th{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)} table.ages td:first-child{font-weight:600}
table.ref{width:100%; border-collapse:collapse; margin-top:12px; font-size:14px} table.ref th,table.ref td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top} table.ref th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)} table.ref td:first-child{font-weight:600}
.src{font-size:14px; color:var(--muted)} .src li{margin-bottom:6px}
ul.signs{list-style:none; padding:0; margin:14px 0} ul.signs li{position:relative; padding:3px 0 10px 30px; font-size:15px} ul.signs li::before{content:"!"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--amber); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center}
.stat{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px} .stat .s{background:var(--band); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center} .stat .num{font-size:28px; font-weight:800; color:var(--accent); line-height:1} .stat .lbl{font-size:13px; color:var(--muted); margin-top:8px}
.pill{display:inline-block; border:1px solid var(--line); background:#fff; padding:7px 13px; border-radius:999px; font-weight:600; font-size:14px; margin:2px}

/* ---------- article listings + single ---------- */
.postlist{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0}
.post-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:border-color .15s, box-shadow .15s}
.post-card:hover{border-color:var(--accent); box-shadow:0 4px 18px rgba(47,95,224,.08)}
.post-card .thumb{display:block; aspect-ratio:16/9; background:var(--accent-soft); object-fit:cover}
.post-card .pc-body{padding:16px 18px; display:flex; flex-direction:column; flex:1; gap:8px}
.post-card h3{margin:0; font-size:18px; line-height:1.25} .post-card h3 a{color:var(--ink); text-decoration:none} .post-card h3 a:hover{color:var(--accent)}
.post-card .excerpt{color:var(--muted); font-size:14.5px; margin:0} .post-card .more{margin-top:auto; font-size:13.5px; font-weight:700; color:var(--accent); text-decoration:none}
.entry .entry-content{font-size:16.5px}
.entry-content h2{margin:30px 0 8px} .entry-content h3{margin:24px 0 6px}
.entry-content ul,.entry-content ol{padding-left:22px} .entry-content li{margin:0 0 8px}
.entry-content ul.checklist,.entry-content ul.signs,.entry-content ol.steps,.entry-content .steps{padding-left:0}
.entry-content .panels,.entry-content .principles,.entry-content .patterns,.entry-content .grid,.entry-content .cols,.entry-content .stat{padding-left:0; list-style:none}
.entry-content img{border-radius:12px} .entry-content a{text-decoration:underline}
.entry-content blockquote{margin:18px 0; padding:6px 0 6px 18px; border-left:3px solid var(--accent); color:var(--muted); font-style:italic}
.entry-content table{width:100%; border-collapse:collapse; font-size:15px; margin:16px 0} .entry-content th,.entry-content td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
.tag-list{margin:26px 0 0; padding-top:18px; border-top:1px solid var(--line)}
.tag-list a{display:inline-block; border:1px solid var(--line); background:#fff; padding:6px 12px; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--ink); text-decoration:none; margin:0 6px 8px 0}
.tag-list a:hover{border-color:var(--accent); color:var(--accent)}
.backlink{display:inline-block; margin:8px 0 0; font-weight:700; font-size:14px}
.pagination{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 40px}
.pagination .page-numbers{border:1px solid var(--line); background:#fff; padding:8px 13px; border-radius:8px; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px}
.pagination .page-numbers.current{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ---------- dark footer ---------- */
.site-footer{background:var(--navy); color:var(--ice); border-top:1px solid #1b2c4d}
.site-footer .inner{max-width:var(--maxw-wide); margin:0 auto; padding:36px 22px 44px; display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between}
.site-footer .fbrand{max-width:320px} .site-footer .fbrand .wordmark{font-size:18px; font-weight:800; color:#fff} .site-footer .fbrand .wordmark .b{color:var(--cyan)} .site-footer .fbrand p{color:#93a4cd; font-size:14px; margin:8px 0 0}
.site-footer .fcol h4{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#7f93c4; margin:0 0 10px; font-family:ui-monospace,Menlo,Consolas,monospace}
.site-footer .fcol ul{list-style:none; margin:0; padding:0} .site-footer .fcol li{margin:0 0 8px} .site-footer .fcol a{color:var(--ice); text-decoration:none; font-size:14.5px} .site-footer .fcol a:hover{color:var(--cyan)}
.site-footer .legal{max-width:var(--maxw-wide); margin:0 auto; padding:0 22px 40px; color:#7f93c4; font-size:13px; border-top:1px solid #1b2c4d; padding-top:20px}

@media (max-width:900px){ .stages,.doors{grid-template-columns:1fr} }
@media (max-width:760px){
  .panels,.doors,.cardlist,.journey,.grid,.cols,.postlist,.principles,.patterns,.stat{grid-template-columns:1fr}
  .journey::before{display:none} .jstep .n{margin:0 auto 12px}
  h1{font-size:27px} .main-nav{width:100%; margin-left:0} .main-nav ul{justify-content:flex-start}
  .main-nav ul ul{position:static; box-shadow:none; border:none; padding:2px 0 2px 12px; background:transparent; min-width:0}
}
@media print{ .site-header,.main-nav,.skip,.radar{display:none} .cyber-hero{background:#fff; color:#000} .cyber-hero h1,.cyber-hero .lede,.cyber-hero .eyebrow{color:#000} .site-footer{background:#fff} a{color:#000} }