/* قادة مجتمعيون — site styles, from the design system's tokens (v2) and component styles */

@font-face{font-family:"Brando Arabic";src:url(../fonts/brando-arabic-200.woff2) format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"Brando Arabic";src:url(../fonts/brando-arabic-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Brando Arabic";src:url(../fonts/brando-arabic-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Brando Arabic";src:url(../fonts/brando-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --surface:#ffffff;--surface-alt:#f2f2f2;--surface-panel:#f0f3ed;--line:#c7d0bb;--line-strong:#7f9075;
  --ink:#26331f;--ink-muted:#55604f;--brand-text:#547250;--gold-text:#8a6400;--rust-text:#a6551e;--orange-text:#ab4e24;
  --action:#547250;--on-action:#ffffff;--focus:#d96a3a;--badge-deep:#547250;
  --green:#6d844d;--green-300:#aab898;--green-200:#c7d0bb;--green-100:#f0f3ed;--green-deep:#547250;
  --rust:#a6551e;--rust-100:#f6eee9;--orange:#d96a3a;--apricot:#ed8b53;--gold:#db9907;--gold-100:#fbf5e6;
  --white:#ffffff;--on-gold:#26331f;
  --font-sans:"Brando Arabic",Tahoma,"Segoe UI",system-ui,sans-serif;
  --brand-gradient:linear-gradient(to right,var(--green),var(--green-deep));
}
[data-theme="green"]{
  --surface:#547250;--surface-alt:#4a6547;--surface-panel:#4a6547;--line:#6d844d;--line-strong:#c7d0bb;
  --ink:#ffffff;--ink-muted:#eef1ed;--brand-text:#f0f3ed;--gold-text:#fbf5e6;--rust-text:#fdf4ee;--orange-text:#fdf4ee;
  --action:#ffffff;--on-action:#547250;--focus:#f5bc9b;--badge-deep:#34492f;
  background:var(--surface);color:var(--ink);
}

/* ---------- Base ---------- */
body{margin:0;background:#ffffff}
[hidden]{display:none !important}
.qd{direction:rtl;font-family:var(--font-sans);color:var(--ink);background:var(--surface);font-size:16px;line-height:30px;min-height:100vh}
.qd *,.qd *::before,.qd *::after{box-sizing:border-box}
.qd :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.qd a{color:var(--brand-text)}
a:hover{color:var(--ink)}
.qd input,.qd select,.qd button{font-family:inherit}
main:focus{outline:none}
.wrap{max-width:1280px;margin:0 auto;padding-inline:32px}
.sec{padding-block:96px}
.pt-0{padding-top:0}
.alt{background:var(--surface-alt)}
.num{font-feature-settings:"lnum"}
.lead-light{margin:0;font-size:28px;line-height:44px;font-weight:200}
.body-lg{margin:0;font-size:20px;line-height:36px}
.muted{color:var(--ink-muted)}
.justify{text-align:justify}
.self-start{align-self:flex-start}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100px;right:16px;z-index:100;padding:8px 16px;background:var(--action);color:var(--on-action) !important;font-weight:600;text-decoration:none}
.skip-link:focus{top:16px}

/* Layout helpers */
.stack-4,.stack-12,.stack-16,.stack-20,.stack-40{display:flex;flex-direction:column}
.stack-4{gap:4px}.stack-12{gap:12px}.stack-16{gap:16px}.stack-20{gap:20px}.stack-40{gap:40px}
.split{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.split-stretch{align-items:stretch}
.split-center{align-items:center}
.gap-56{gap:56px}
.split-aside{flex:1 1 300px}
.split-main{flex:2 1 560px;min-width:0}
.col-half{flex:1 1 460px;min-width:0}
.btn-row,.tag-row{display:flex;flex-wrap:wrap}
.btn-row{gap:12px;margin-top:8px}
.tag-row{gap:8px}
.ratio-1{aspect-ratio:1}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-5{aspect-ratio:4/5}
.note{font-size:13px;color:var(--ink-muted)}
.result-count{margin:0;font-size:14px;color:var(--ink-muted)}
.empty-note{margin:0;text-align:center;color:var(--ink-muted);font-size:16px}

/* ---------- Header ---------- */
.qd-header{background:var(--surface);border-bottom:1px solid var(--line)}
.qd-header-in{max-width:1280px;margin:0 auto;padding:16px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.qd-header-logo img{display:block;height:52px;width:auto}
.qd-nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.qd .qd-nav a{font-size:15px;line-height:22px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:3px solid transparent;transition:color .2s ease-out}
.qd .qd-nav a:hover{color:var(--brand-text)}
.qd .qd-nav a[aria-current="page"]{color:var(--brand-text);border-bottom-color:var(--orange)}

/* ---------- Buttons and tags ---------- */
.qd-btn{font:inherit;font-size:15px;line-height:22px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 24px;border-radius:0;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:filter .2s ease-out,background .2s ease-out}
.qd .qd-btn-primary{background:var(--action);color:var(--on-action);border-color:var(--action)}
.qd-btn-primary:hover{filter:brightness(1.08)}
.qd .qd-btn-accent{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.qd-btn-accent:hover{filter:brightness(1.05)}
.qd .qd-btn-outline{background:transparent;color:var(--brand-text);border-color:var(--line-strong)}
.qd-btn-outline:hover{background:var(--surface-panel)}
.qd-tag{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:22px;font-weight:600;padding:4px 12px;border-radius:0}
.qd-tag-solid{background:var(--brand-gradient);color:#fff}
.qd-tag-soft{background:var(--surface-panel);color:var(--brand-text)}
.qd-tag-gold{background:var(--gold);color:var(--on-gold)}
.qd-tag-light{background:#fff;color:var(--green-deep)}
.qd .qd-tag-download{background:var(--green-deep);color:#fff;border-radius:4px;padding:2px 10px;text-decoration:none}
.icon-btn{padding:0;width:44px;font-size:20px}
.card-action{align-self:flex-start;margin-top:8px}

/* ---------- SectionBand ---------- */
.qd-band{background:var(--brand-gradient);color:#fff}
.qd-band-in{max-width:1280px;margin:0 auto;padding:24px 32px;min-height:128px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.qd-band h1,.qd-band h2{margin:0;font-size:40px;line-height:60px;font-weight:700}
.qd-band p{margin:0;font-size:20px;line-height:34px;font-weight:200}

/* ---------- SectionHeading ---------- */
.qd-sh{display:flex;flex-direction:column;gap:8px}
.qd-sh-row{display:flex;align-items:center;gap:16px}
.qd-sh-title{margin:0;font-size:30px;line-height:46px;font-weight:700;color:var(--brand-text)}
.qd-sh-lg .qd-sh-title{font-size:56px;line-height:76px}
.qd-sh-md .qd-sh-title{font-size:40px;line-height:60px}
.qd-sh-sm .qd-sh-title{font-size:24px;line-height:36px}
.qd-sh-rule{flex:1;height:1px;background:var(--gold);min-width:48px;max-width:280px}
.qd-sh-lead{margin:0;font-size:20px;line-height:34px;font-weight:200;color:var(--ink-muted)}

/* ---------- Panels ---------- */
.qd-panel{padding:32px;font-size:20px;line-height:36px}
.qd-panel-brand{background:var(--brand-gradient);color:#fff}
.qd-panel-tint{background:var(--surface-panel);color:var(--ink)}
.qd-panel-outline{border:1px solid var(--line)}
.qd-panel-statement{font-size:24px;line-height:44px}

/* ---------- Stats ---------- */
.qd-stat{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.qd-stat-value{font-size:96px;line-height:1;font-weight:700;color:var(--brand-text);font-feature-settings:"lnum"}
.qd-stat-gold .qd-stat-value{color:var(--gold-text)}
.qd-stat-rust .qd-stat-value{color:var(--rust-text)}
.qd-stat-label{font-size:20px;line-height:32px;font-weight:600}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}

/* ---------- PhaseBlocks ---------- */
.qd-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.qd-phase{min-height:240px;padding:32px;display:flex;flex-direction:column;gap:8px}
.qd-phase h3{margin:0;font-size:26px;line-height:38px;font-weight:700}
.qd-phase p{margin:0;font-size:20px;line-height:32px;font-weight:200}
.qd-phase-1{background:var(--green);color:#fff}.qd-phase-2{background:var(--rust);color:#fff}.qd-phase-3{background:var(--gold);color:var(--on-gold)}

/* ---------- WindowFrame ---------- */
.qd-win{position:relative;margin:0;background:var(--green-100);overflow:hidden}
.qd-win img{display:block;width:100%;height:100%;object-fit:cover}
.qd-win-stepped{clip-path:polygon(73% 0,100% 0,100% 100%,0 100%,0 36%,44% 36%,44% 22%,73% 22%)}
.qd-win-tower{clip-path:polygon(52% 0,100% 0,100% 100%,0 100%,0 30%,52% 30%)}

/* ---------- Filters and form controls ---------- */
.qd-chip{font:inherit;font-size:14px;line-height:22px;font-weight:600;min-height:40px;padding:4px 16px;border-radius:0;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .2s ease-out}
.qd-chip:hover{background:var(--surface-panel)}
.qd .qd-chip[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.qd-field{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:22px;font-weight:600;color:var(--ink-muted)}
.qd-input{height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:0;background:var(--surface);color:var(--ink);font-size:15px}
.field-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.field-grow{flex:2 1 260px}
.field{flex:1 1 160px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-row-label{font-size:13px;color:var(--ink-muted);margin-inline-end:8px}

/* ---------- Cards ---------- */
.qd-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.qd-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:0;color:inherit;text-decoration:none;overflow:hidden;transition:border-color .2s ease-out}
.qd a.qd-card{color:inherit}
.qd-card:hover{border-color:var(--line-strong)}
.qd-card-media{position:relative;aspect-ratio:4/3;background:var(--green-100);overflow:hidden}
.qd-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.qd-card-body{padding:16px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.qd-card-kicker{font-size:13px;line-height:22px;font-weight:600;color:var(--brand-text)}
.qd-card-title{margin:0;font-size:20px;line-height:32px;font-weight:700}
.qd-card-text{margin:0;font-size:16px;line-height:28px;color:var(--ink-muted)}
.qd-card-meta{font-size:13px;line-height:22px;color:var(--ink-muted)}
.qd-type{position:absolute;top:12px;right:12px;font-size:13px;line-height:22px;font-weight:600;padding:0 8px;background:var(--green-deep);color:#fff}
.qd-card-strip{height:6px;background:var(--brand-gradient)}
.media-badge{position:absolute;top:12px;right:12px}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;background:var(--green-100);color:var(--ink-muted);font-size:13px;line-height:22px}

/* ---------- PatternBand and footer ---------- */
.qd-pattern{display:block;width:100%;height:88px;background-repeat:repeat-x;background-size:auto 100%;background-position:right center}
.qd-pattern-geo-green{background-image:url(../img/pattern-geo-green.svg);background-color:var(--green)}
.qd-footer{background:var(--brand-gradient);color:#fff}
.qd-footer-in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:32px}
.qd-footer-brand{display:flex;flex-direction:column;gap:12px}
.qd-footer-brand img{height:56px;width:auto;align-self:flex-start}
.qd-footer-tagline{font-size:18px;line-height:30px;font-weight:200}
.qd-footer-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;font-weight:600}
.qd .qd-footer a{color:#fff}
.qd-footer-contact{display:flex;flex-direction:column;font-size:14px;line-height:24px}
.qd-footer-contact a{direction:ltr;text-align:right}
.qd-footer-copy{max-width:1280px;margin:0 auto;padding:12px 32px 20px;font-size:13px;line-height:22px;border-top:1px solid rgba(255,255,255,.35)}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .3s ease-out both}

/* ---------- Hero (green pages) ---------- */
.hero{background:var(--brand-gradient)}
.hero-in{padding-block:80px;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.hero-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hero-copy.stack-16{gap:16px}
.hero-title{margin:0;font-size:56px;line-height:76px;font-weight:700;color:#fff}
.hero .lead-light{color:#fff}
.hero-text{color:#eef1ed}
.hero-text-narrow{max-width:620px}
.hero-figure{flex:0 1 440px;min-width:280px;height:540px;margin-inline:auto}
.crumbs{font-size:13px;display:flex;gap:8px;color:var(--ink-muted)}
.qd .hero .crumbs a{color:#fff}

/* ---------- Home: journey stairs ---------- */
.stairs-wrap{padding-top:64px;display:flex;flex-direction:column;gap:24px}
.stairs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;align-items:end}
.stair{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:24px 20px;overflow:hidden;min-height:calc(190px + var(--i,0) * 42px);transition:transform .25s ease-out,filter .25s ease-out;animation:rise .45s ease-out backwards;animation-delay:calc(var(--i,0) * 80ms)}
.stair:hover{transform:translateY(-8px);filter:brightness(1.06)}
.stair-n{position:absolute;top:12px;left:16px;font-size:72px;line-height:1;font-weight:700;opacity:.22;font-feature-settings:"lnum"}
.stair-mark{width:12px;height:12px;transform:rotate(45deg);margin-bottom:8px}
.stair h3{margin:0;font-size:20px;line-height:30px;font-weight:700}
.stair p{margin:0;font-size:14px;line-height:24px}
.stair-p1{background:var(--green-deep);color:#fff}.stair-p1 .stair-mark{background:#fff}
.stair-p2{background:var(--rust);color:#fff}.stair-p2 .stair-mark{background:#f5bc9b}
.stair-p3{background:var(--gold);color:var(--on-gold)}.stair-p3 .stair-mark{background:var(--on-gold)}

/* ---------- Library ---------- */
.lib-intro{padding-block:64px 48px}
.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters-in{padding-block:24px;display:flex;flex-direction:column;gap:20px}
.lib-results{padding-block:48px 96px;display:flex;flex-direction:column;gap:24px}
.post-dialog{width:calc(100% - 32px);max-width:820px;max-height:calc(100vh - 96px);margin:48px auto auto;padding:0;border:0;background:#fff;color:var(--ink);overflow-y:auto}
.post-dialog[open]{animation:rise .3s ease-out both}
.post-dialog::backdrop{background:rgba(38,51,31,.7)}
.post-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line)}
.post-dialog-body{padding:32px;display:flex;flex-direction:column;gap:20px}
.post-title{margin:0;font-size:30px;line-height:46px;font-weight:700;color:var(--green-deep)}
.post-text{margin:0;font-size:18px;line-height:34px;text-align:justify}
.post-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.copied-note{font-size:13px;font-weight:600;color:var(--green-deep)}

/* ---------- Brief archive ---------- */
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(10px,-14px)}100%{transform:translate(0,0)}}
.brief-hero{position:relative;overflow:hidden;background:var(--brand-gradient);min-height:640px;display:flex;align-items:center;justify-content:center}
.brief-portraits{position:absolute;inset:0}
.pf{position:absolute;animation:drift 9s ease-in-out infinite}
.pf.d2{animation-duration:11s;animation-delay:-3s}
.pf.d3{animation-duration:13s;animation-delay:-6s}
.pf-card{width:100%;height:100%;background:#f0f3ed;border:6px solid #fff;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;font-size:11px;line-height:16px;color:#55604f}
.brief-hero-copy{position:relative;max-width:640px;margin:0 16px;padding:48px 32px;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.brief-lead{min-height:88px}
.archive{padding-block:48px 96px;display:flex;flex-direction:column;gap:32px}
.issue-card.is-latest{border:2px solid var(--green-deep)}
.issue-card.is-soon{opacity:.7}
.issue-soon{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink-muted)}
.promo-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:20px}
.promo-figure{flex:0 1 420px;min-width:260px;height:460px;margin-inline:auto}

/* ---------- Brief issue ---------- */
@keyframes step{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.issue-hero{padding-block:32px 80px;display:flex;flex-direction:column;gap:40px}
.issue-hero-row{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.issue-figure{flex:0 1 420px;min-width:260px;height:500px;margin-inline:auto}
.issue-layout{padding-block:64px 96px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.toc{flex:1 1 220px;display:flex;flex-direction:column;border-top:3px solid var(--orange);padding-top:16px}
.toc-label{font-size:13px;font-weight:600;color:var(--ink-muted);margin-bottom:8px}
.qd .toc a{display:block;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600;font-size:15px;color:var(--ink)}
.qd .toc a:last-child{border-bottom:0}
.qd .toc a:hover{color:var(--brand-text)}
.issue-content{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:72px}
.issue-sec{display:flex;flex-direction:column;gap:16px;scroll-margin-top:24px}
.issue-sec.stack-20{gap:20px}
.issue-p{margin:0;font-size:18px;line-height:34px;text-align:justify}
.pull-quote{margin:8px 0;display:flex;flex-direction:column;gap:12px}
.pull-quote p{margin:0;font-size:26px;line-height:44px;font-weight:200}
.pull-quote cite{font-style:normal;font-size:14px;font-weight:600}
.player{padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.play-btn{flex:none;width:56px;height:56px;padding:0}
.play-btn-lg{width:80px;height:80px;padding:0}
.wave{flex:1 1 260px;display:flex;align-items:center;gap:3px;height:48px}
.wave span{flex:1;background:var(--green-300)}
.wave span.is-played{background:var(--orange)}
.anim-box{aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.steps-anim{display:flex;align-items:flex-end;gap:12px}
.sq{width:40px;animation:step 2.4s ease-in-out infinite}
.sq-1{height:40px;background:#6d844d}
.sq-2{height:64px;background:#a6551e;animation-delay:.3s}
.sq-3{height:88px;background:#d96a3a;animation-delay:.6s}
.sq-4{height:112px;background:#db9907;animation-delay:.9s}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:8px}
.video-ph{position:relative}
.video-label{position:absolute;bottom:12px;right:16px}
.ops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ops li{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:28px}
.ops li::before{content:"";flex:none;width:8px;height:8px;background:var(--orange);transform:rotate(45deg)}
.qd .cta-panel{text-decoration:none;color:#fff;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.qd .cta-panel:hover{color:#fff;filter:brightness(1.05)}
.cta-panel-copy{display:flex;flex-direction:column;gap:4px}
.cta-panel-title{font-size:28px;line-height:40px;font-weight:700}
.cta-panel-sub{font-size:18px;font-weight:200}
.cta-panel-action{font-size:15px;font-weight:600}
.issue-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:24px;font-size:15px;font-weight:600}

/* ---------- Living map ---------- */
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
.map-page{padding-block:24px 96px;display:flex;flex-direction:column;gap:32px}
.map-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.map-search{width:240px;max-width:100%}
.seg{display:flex}
.seg-btn{min-height:44px;padding:0 18px;font-size:14px;font-weight:600;border-radius:0;background:#fff;color:var(--ink);border:1px solid var(--line-strong);cursor:pointer;transition:filter .2s ease-out}
.seg-btn:hover{filter:brightness(.97)}
.seg-btn[aria-pressed="true"]{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.map-view{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.map-col{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px}
.map-frame{position:relative;background:var(--surface-alt);border:1px solid var(--line);padding:16px 24px 24px}
.map-hover{min-height:40px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--green-deep)}
.diamond{width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.map-svg{display:block;width:100%;max-width:680px;height:auto;margin:0 auto;overflow:visible;font-family:var(--font-sans)}
.gv{fill:#c7d0bb;stroke:#fff;stroke-width:2;stroke-linejoin:round;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:fill .25s ease-out,transform .25s ease-out,stroke .25s ease-out;animation:rise .5s ease-out backwards}
.gv.is-dim{fill:#f2f2f2}
.gv:hover{fill:#aab898;transform:translateY(-5px) scale(1.04);stroke:var(--orange);stroke-width:3}
.gv:focus{outline:none}
.gv:focus-visible{stroke:var(--orange);stroke-width:3}
.gv.is-on{fill:var(--gold)}
.gv-label{fill:var(--ink);font-weight:600}
.gv-label.is-dim{fill:var(--ink-muted)}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.6s ease-out infinite}
.map-legend{display:flex;flex-wrap:wrap;gap:24px;font-size:13px;color:var(--ink-muted)}
.map-legend>span{display:flex;align-items:center;gap:8px}
.swatch{width:14px;height:14px;background:#c7d0bb}
.swatch-on{background:var(--gold)}
.map-aside{flex:1 1 360px;min-width:0;background:var(--surface-panel);border:1px solid var(--line);display:flex;flex-direction:column}
.aside-pad{padding:24px}
.fade{animation:fadein .25s ease-out both}
.aside-title{margin:0;font-size:26px;line-height:40px;font-weight:600}
.lcard{font:inherit;text-align:right;color:var(--ink);cursor:pointer;transition:border-color .2s ease-out}
.lcard:hover{border-color:var(--line-strong) !important}
.leader-row{width:100%;background:#fff;border:1px solid var(--line);padding:16px;display:flex;gap:16px;align-items:center}
.leader-row-text{display:flex;flex-direction:column;gap:4px;flex:1}
.leader-name{font-size:17px;font-weight:600}
.leader-sub{font-size:13px;line-height:22px;color:var(--ink-muted)}
.leader-sub-lg{font-size:14px}
.leader-arrow{color:var(--green-deep);font-weight:600}
.avatar{flex:none;width:64px;height:64px;background:var(--surface-panel);border:2px solid var(--green-deep);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:600}
.avatar-lg{width:88px;height:88px;background:#fff;font-size:36px}
.avatar-tile{width:100%;height:auto;aspect-ratio:1;background:#fff;font-size:56px}
.profile{display:flex;flex-direction:column;gap:22px}
.back-btn{font:inherit;align-self:flex-start;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:0;min-height:40px;padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;transition:filter .2s ease-out}
.back-btn:hover{filter:brightness(1.06)}
.profile-head{display:flex;gap:16px;align-items:center}
.profile-name{margin:0;font-size:24px;line-height:36px;font-weight:600}
.profile-bio{margin:0;font-size:15px;line-height:26px;color:var(--ink-muted)}
.profile-sec{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.profile-sec h3{margin:0;font-size:18px;font-weight:600}
.note-box{background:#fff;border:1px solid var(--line);padding:12px 16px;font-size:14px;line-height:24px}
.jrny{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jrny li{position:relative;padding-block:8px;display:flex;align-items:center;gap:12px;font-size:14px}
.jrny li:not(:last-child)::after{content:"";position:absolute;right:5px;width:2px;top:calc(50% + 8px);bottom:calc(-50% + 8px);background:var(--line)}
.jrny li.done:not(:last-child)::after{background:var(--green)}
.jrny-mark{position:relative;z-index:1;flex:none;width:12px;height:12px;transform:rotate(45deg)}
.jrny .done .jrny-mark{background:var(--green)}
.jrny .now .jrny-mark{background:var(--orange)}
.jrny .next .jrny-mark{border:1px solid var(--line-strong);background:var(--surface-panel)}
.jrny-title{flex:1;color:var(--ink)}
.jrny .now .jrny-title{font-weight:600;color:var(--orange-text)}
.jrny .next .jrny-title{color:var(--ink-muted)}
.jrny-status{font-size:12px;color:var(--ink-muted)}
.list-view{display:flex;flex-direction:column;gap:16px}
.leader-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.leader-tile{background:var(--surface-panel);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:12px}
.leader-tile-name{font-size:18px;font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .stairs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stair{min-height:180px}
}
@media (max-width:640px){
  .wrap,.qd-header-in,.qd-band-in,.qd-footer-in{padding-inline:16px}
  .sec{padding-block:64px}
  .hero-title{font-size:40px;line-height:56px}
  .qd-sh-lg .qd-sh-title,.qd-sh-md .qd-sh-title{font-size:32px;line-height:48px}
  .qd-stat-value{font-size:72px}
  .qd-phases{grid-template-columns:1fr}
  .qd-phase{min-height:140px}
  .qd-band h1,.qd-band h2{font-size:30px;line-height:46px}
  .qd-panel{padding:24px}
  .hero-figure,.issue-figure{height:400px}
  .lead-light{font-size:24px;line-height:40px}
  .map-frame{padding:12px}
  .post-dialog{margin-top:16px;max-height:calc(100vh - 32px)}
  .post-dialog-body{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .qd *,.post-dialog{transition:none !important;animation:none !important}
}