/* BEIIU editorial system: photographic storytelling, clear actions, calm authority. */
:root { --signal:#e64e1c; --radius:12px; --bg:#f5f4ef; }
header.top { max-width:1320px; padding:22px 28px; gap:26px; }
.brand { font-size:23px; font-weight:850; letter-spacing:.01em; white-space:nowrap; }
.desktop-nav { display:flex; align-items:center; gap:25px; margin-inline-start:auto; }
.desktop-nav a,.desktop-nav button { font-size:14px; font-weight:650; text-decoration:none; white-space:nowrap; }
.desktop-nav button { border:0; background:transparent; padding:0; cursor:pointer; }
.top-tools { flex:0 1 auto; }
.top-tools select { font-size:13px; max-width:160px; }
select#cur { min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); }
.sos { justify-content:center; font-size:13px; min-height:36px; padding:5px 16px; }
.sos:has(.small) { background:var(--ink); color:var(--bg); font-weight:450; }
.launch-notice { max-width:1264px; margin:0 auto 16px; padding:10px 0; font-size:12px; letter-spacing:.01em; }
main#view { max-width:1320px; padding:12px 28px 112px; }
main#view.home-view { padding-top:0; }
figure { margin:0; }
.eyebrow { display:block; font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.visual-hero { position:relative; isolation:isolate; min-height:610px; overflow:hidden; border-radius:16px; color:#fff; background:#273333; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-3; }
.visual-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(8,19,23,.90) 0%,rgba(8,19,23,.76) 25%,rgba(8,19,23,.23) 60%,rgba(8,19,23,.04) 100%); }
.visual-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(9,20,23,.55),transparent 40%); }
.hero-content { max-width:680px; padding:74px 58px 86px; }
.hero-content .eyebrow { display:flex; gap:10px; align-items:center; color:#e6e9e5; }
.hero-content .eyebrow i { width:6px; height:6px; border-radius:50%; background:#ff7142; flex-shrink:0; }
.hero-content h1 { font-size:clamp(36px,4.6vw,65px); line-height:1.18; font-weight:760; letter-spacing:-.055em; margin:32px 0 24px; }
.hero-content h1 span { color:#f1c6a3; }
.hero-content>p { max-width:420px; font-size:16px; line-height:1.85; color:#e0e5e2; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero-actions .btn { min-height:52px; border-radius:7px; padding-inline:22px; font-size:14px; gap:24px; }
.hero-secondary { color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.45); backdrop-filter:blur(8px); }
.hero-principles { display:flex; flex-wrap:wrap; gap:0; margin-top:30px; font-size:11px; color:#c2cdca; }
.hero-principles span+span { border-inline-start:1px solid #7d8987; padding-inline-start:14px; margin-inline-start:14px; }
.scene-label { position:absolute; inset-inline-end:13px; bottom:13px; color:#fff; font-size:10px; letter-spacing:.04em; padding:4px 7px; background:rgba(10,20,23,.65); border-radius:3px; line-height:1.4; }
.hero-edge { position:absolute; left:58px; bottom:24px; font-size:9px; letter-spacing:.18em; color:#b7c3c1; }
.readiness-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding:20px 3px; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-2); }
.readiness-line a { display:flex; gap:28px; text-decoration:none; color:var(--ink); font-weight:650; }
.editorial-section { margin-top:72px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:28px; }
.section-heading .eyebrow,.feature-copy>.eyebrow,.aid-copy>.eyebrow { color:var(--signal); }
.section-heading h2 { font-size:clamp(25px,2.5vw,35px); letter-spacing:-.045em; line-height:1.3; margin:14px 0 0; }
.section-heading>p { max-width:370px; font-size:14px; line-height:1.8; color:var(--ink-2); margin:0; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.scenario-card { text-decoration:none; min-width:0; }
.scenario-card figure { position:relative; overflow:hidden; aspect-ratio:4/3; border-radius:10px; background:#343f3e; }
.scenario-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.scenario-card:first-child img { object-position:72% center; }
.scenario-card:hover img { transform:scale(1.035); }
.scenario-number { position:absolute; top:14px; inset-inline-start:16px; color:#fff; font-size:12px; letter-spacing:.08em; text-shadow:0 1px 6px #000; }
.scenario-body { padding:22px 0 0; }
.scenario-body .eyebrow { color:var(--ink-2); font-size:10px; }
.scenario-body h3 { display:flex; justify-content:space-between; gap:12px; font-size:21px; margin:9px 0; line-height:1.4; letter-spacing:-.025em; }
.scenario-body h3 span { color:var(--signal); font-weight:400; }
.scenario-body p { font-size:13px; line-height:1.85; color:var(--ink-2); margin:0; }
.preparedness-feature { display:grid; grid-template-columns:1.05fr 1fr; background:var(--card); border-radius:14px; overflow:hidden; }
.preparedness-feature>figure,.aid-feature>figure { position:relative; min-height:500px; }
.preparedness-feature img,.aid-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-copy { padding:48px 48px 42px; align-self:center; }
.feature-copy h2,.aid-copy h2 { font-size:clamp(26px,2.6vw,37px); margin:17px 0; line-height:1.35; letter-spacing:-.04em; }
.feature-copy>p,.aid-copy>p { color:var(--ink-2); font-size:14px; line-height:1.9; }
.preparation-steps { margin:24px 0 27px; }
.preparation-steps>div { display:flex; gap:20px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); }
.preparation-steps>div>span { font-size:11px; color:var(--signal); padding-top:2px; }
.preparation-steps p { margin:0; }
.preparation-steps b { display:block; font-size:14px; }
.preparation-steps small { display:block; font-size:12px; color:var(--ink-2); margin-top:4px; }
.feature-copy>.btn,.aid-copy>.btn,.save-band>.btn { border-radius:7px; gap:28px; font-size:14px; }
.resource-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.resource-link { position:relative; text-decoration:none; border-top:2px solid var(--ink); padding:20px 0 12px; }
.resource-index { font-size:11px; color:var(--signal); }
.resource-link h3 { font-size:19px; margin:18px 0 12px; }
.resource-link p { font-size:13px; color:var(--ink-2); line-height:1.85; max-width:220px; padding-inline-end:16px; }
.resource-arrow { position:absolute; inset-inline-end:0; top:18px; color:var(--signal); }
.aid-feature { display:grid; grid-template-columns:1.1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0; gap:60px; }
.aid-feature>figure { min-height:370px; border-radius:10px; overflow:hidden; }
.aid-copy { align-self:center; padding-inline-end:28px; }
.aid-copy>small { display:block; color:var(--ink-2); font-size:11px; margin-top:18px; line-height:1.8; }
.save-band { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:48px; margin-top:64px; border-radius:12px; background:#182b2b; color:#fff; }
.save-band .eyebrow { color:#b3c3bc; }
.save-band h2 { font-size:30px; letter-spacing:-.03em; margin:12px 0; line-height:1.4; }
.save-band p { font-size:13px; color:#c7d2ce; margin:0; }
.save-band>.btn { flex-shrink:0; }
.editorial-footer { display:flex; flex-wrap:wrap; align-items:center; gap:24px; padding:38px 0 6px; font-size:12px; color:var(--ink-2); }
.editorial-footer>b { font-size:18px; color:var(--ink); }
.editorial-footer p { flex:1; }
.context-cover { position:relative; min-height:300px; color:#fff; border-radius:12px; overflow:hidden; isolation:isolate; margin-bottom:28px; background:#20302f; }
.context-cover>img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; z-index:-2; }
.context-cover::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(9,22,26,.88),rgba(9,22,26,.24)); }
.context-copy { padding:58px 42px; max-width:680px; }
.context-copy h1 { font-size:42px; margin:20px 0 15px; letter-spacing:-.04em; }
.context-copy p { font-size:14px; line-height:1.9; color:#dce4df; margin:0; max-width:480px; }
.save-site-dialog { width:min(560px,calc(100vw - 32px)); max-height:85vh; overflow:auto; padding:36px; border:1px solid var(--line); border-radius:15px; background:var(--card); color:var(--ink); }
.save-site-dialog::backdrop { background:rgba(5,15,17,.65); backdrop-filter:blur(4px); }
.save-site-dialog .eyebrow { color:var(--signal); padding-inline-end:25px; }
.save-site-dialog h2 { font-size:27px; margin:20px 0 12px; }
.save-site-dialog>p,.save-site-dialog li { font-size:14px; line-height:1.9; color:var(--ink-2); }
.save-site-dialog ol { padding-inline-start:21px; margin:22px 0; }
.save-site-dialog li { padding-inline-start:4px; margin-bottom:10px; }
.dialog-close { position:absolute; top:14px; inset-inline-end:14px; border:0; background:none; color:var(--ink); font-size:27px; width:38px; height:38px; cursor:pointer; }
[dir=rtl] .visual-hero::before { background:linear-gradient(270deg,rgba(8,19,23,.92),rgba(8,19,23,.7) 45%,rgba(8,19,23,.12)); }
@media(min-width:900px) { nav.tabbar { width:520px; inset-inline:auto; left:50%; transform:translateX(-50%); bottom:16px; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 30px #0002; padding-bottom:0; overflow:hidden; } }
@media(max-width:1100px) { .desktop-nav { gap:15px; } .desktop-nav a,.desktop-nav button { font-size:12px; } header.top { gap:18px; } .feature-copy { padding:32px; } .aid-feature { gap:35px; } }
@media(max-width:900px) { .desktop-nav { display:none; } .top-tools { margin-inline-start:auto; } .hero-content { padding:62px 36px 80px; max-width:610px; } .visual-hero { min-height:570px; } .section-heading { display:block; } .section-heading>p { margin-top:16px; max-width:600px; } .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .preparedness-feature { grid-template-columns:1fr 1fr; } .feature-copy { padding:30px; } .preparedness-feature>figure { min-height:480px; } .aid-copy { padding:0; } }
@media(max-width:700px) {
  header.top { padding:16px; gap:10px; } .brand { font-size:20px; } .top-tools { gap:6px; } .top-tools select { max-width:112px; min-height:36px; font-size:12px; padding-inline:6px; }
  .sos { justify-content:flex-start; font-size:11px; min-height:32px; } .sos .small { font-size:11px; }
  .launch-notice { margin:0 16px 12px; font-size:10px; padding:8px 0; }
  main#view { padding:0 16px 95px; } .visual-hero { min-height:650px; border-radius:12px; }
  .hero-image { object-position:88% center; } .visual-hero::before { background:linear-gradient(0deg,rgba(6,18,22,.96),rgba(6,18,22,.85) 35%,rgba(6,18,22,.08) 78%); }
  .hero-content { padding:255px 25px 72px; max-width:none; } .hero-content .eyebrow { font-size:9px; letter-spacing:.08em; }
  .hero-content h1 { font-size:36px; margin:22px 0 18px; letter-spacing:-.045em; } .hero-content>p { font-size:13px; line-height:1.85; margin:0; }
  .hero-actions { gap:9px; margin-top:24px; } .hero-actions .btn { min-height:47px; padding-inline:15px; font-size:12px; gap:17px; }
  .hero-principles { font-size:9px; margin-top:23px; } .hero-principles span+span { padding-inline-start:9px; margin-inline-start:9px; }
  .hero-edge { left:25px; bottom:22px; font-size:7px; letter-spacing:.11em; } .scene-label { font-size:8px; bottom:10px; inset-inline-end:10px; }
  .visual-hero>.scene-label { bottom:44px; }
  .readiness-line { font-size:11px; gap:10px; padding:17px 0; } .readiness-line a { gap:15px; }
  .editorial-section { margin-top:46px; } .section-heading { margin-bottom:22px; } .eyebrow { font-size:9px; }
  .section-heading h2 { font-size:26px; margin-top:12px; } .section-heading>p { font-size:12px; line-height:1.9; }
  .scenario-grid { grid-template-columns:1fr; gap:30px; } .scenario-card figure { aspect-ratio:1.55; }
  .scenario-body { padding:17px 0 0; } .scenario-body h3 { font-size:21px; } .scenario-body p { font-size:12px; }
  .preparedness-feature { display:flex; flex-direction:column; } .preparedness-feature>figure { min-height:0; aspect-ratio:1.25; }
  .feature-copy { padding:29px 24px 30px; } .feature-copy h2,.aid-copy h2 { font-size:27px; } .feature-copy>p,.aid-copy>p { font-size:13px; }
  .resource-grid { gap:25px 20px; } .resource-link h3 { font-size:18px; } .resource-link p { font-size:12px; padding:0; }
  .aid-feature { display:block; padding:26px 0; } .aid-feature>figure { min-height:0; aspect-ratio:1.45; } .aid-copy { padding:27px 4px 4px; }
  .save-band { display:block; padding:30px 24px; margin-top:40px; } .save-band h2 { font-size:27px; } .save-band p { font-size:12px; line-height:1.9; } .save-band>.btn { margin-top:24px; }
  .editorial-footer { gap:16px; padding-top:30px; } .editorial-footer p { flex-basis:100%; order:3; margin:0; line-height:1.8; }
  .context-cover { min-height:270px; } .context-copy { padding:43px 26px; } .context-copy h1 { font-size:31px; } .context-copy p { font-size:12px; }
  .save-site-dialog { padding:30px 24px 24px; } .save-site-dialog h2 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { .scenario-card img { transition:none; } }
@media print { .visual-hero,.editorial-section,.save-band,.editorial-footer,.launch-notice,.desktop-nav { display:none!important; } }
