/* SENTINEL — news-outlet styling: white page, navy/blue accents, grey rules. Mobile first. */
:root {
  --navy: #0b2545;
  --blue: #1d5fbf;
  --blue-dark: #134a99;
  --blue-soft: #e8f0fb;
  --ink: #16202b;
  --body: #2c3a47;
  --muted: #5e6b78;
  --rule: #d9dee4;
  --rule-soft: #eceff3;
  --grey-bg: #f3f5f8;
  --high: #c62f2f;
  --medium: #e69a1f;
  --low: #8fb0d6;
  --map-high: #d65a5a;
  --map-medium: #f2b552;
  --map-low: #b9cfe8;
  --map-none: #e3e7ec;
  --breaking: #c4161c;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 56px; }
body { margin: 0; background: #fff; color: var(--body); font: 16px/1.55 var(--sans); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0 0 0.8em; }
code { background: var(--grey-bg); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 820px; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* Masthead: markets left, centred wordmark, clock right. */
@media (max-width: 599px) {
  .masthead .wrap { padding-top: 10px; padding-bottom: 8px; }
  .story-lead .dek { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.masthead { border-bottom: 1px solid var(--rule); }
.masthead .wrap {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 12px;
}
.masthead-side { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.masthead-markets { justify-content: flex-start; }
.masthead-clock { justify-content: flex-end; }
.brand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 0; display: block; color: var(--navy); max-width: min(100%, 420px);
}
.brand:hover { text-decoration: none; }
.brand-text { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.brand-word { display: block; height: 42px; width: auto; max-width: min(100%, 280px); }
.brand-badges { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.brand-badge {
  display: inline-block; padding: 1px 5px; border: 1px solid var(--rule); border-radius: 3px;
  font-size: 0.52rem; font-weight: 650; letter-spacing: 0.05em; line-height: 1.25; text-transform: uppercase;
  color: var(--muted); background: var(--grey-bg); white-space: nowrap;
}
.brand-beta { color: var(--blue-dark); border-color: #b8cce8; background: var(--blue-soft); }
.brand-version { color: var(--navy); }
.rotator {
  padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; min-width: 0;
}
.masthead-markets .rotator { text-align: left; }
.masthead-clock .rotator { text-align: right; }
.ticker { opacity: 0.9; }
.wc-face { display: block; transition: opacity 0.25s ease; }
.rotator.is-switching .wc-face { opacity: 0; }
.tk-up { color: #13804a; font-weight: 700; }
.tk-down { color: var(--high); font-weight: 700; }
.tk-flat { font-weight: 700; }
.wc-city { display: block; color: var(--blue); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.wc-time { display: block; color: var(--navy); font-family: var(--serif); font-size: 1.28rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wc-meta { display: block; color: var(--muted); font-size: 0.66rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wc-face { transition: none; } }
@media (max-width: 899px) {
  .brand-word { height: 36px; }
  .wc-time { font-size: 1.15rem; }
}
@media (max-width: 599px) {
  .masthead .wrap { flex-wrap: wrap; gap: 10px 12px; padding-top: 12px; }
  .brand {
    position: static; transform: none; order: -1; flex: 1 1 100%;
    max-width: none; text-align: center;
  }
  .brand-word { height: 32px; }
  .brand-badge { font-size: 0.48rem; padding: 1px 4px; }
  .masthead-side { flex: 1 1 0; }
  .masthead-markets, .masthead-clock {
    padding-top: 8px; border-top: 1px solid var(--rule-soft);
  }
  .rotator .wc-face { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .rotator .wc-city { font-size: 0.66rem; }
  .rotator .wc-time { font-size: 1rem; }
  .rotator .wc-meta { font-size: 0.72rem; }
  .world-clock .wc-meta, .tk-status { display: none; }
}
.breaking-kicker {
  display: flex; align-items: center; gap: 12px; background: #1a0a0a; color: #fff;
  border-bottom: 3px solid var(--breaking); padding: 8px 0;
}
.breaking-kicker[hidden] { display: none !important; }
.breaking-kicker .bk-link {
  display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0;
  color: #fff; font-family: var(--serif); font-weight: 700; font-size: 0.98rem; line-height: 1.3;
  padding: 0 16px; text-decoration: none;
}
.breaking-kicker .bk-link:hover { text-decoration: none; }
.breaking-kicker .bk-link:hover [data-bk-title] { text-decoration: underline; }
.bk-label {
  flex: none; font-family: var(--sans); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  background: var(--breaking); padding: 3px 7px; border-radius: 2px;
}
.bk-label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: #fff; vertical-align: 0;
  animation: live-pulse 1s ease-in-out infinite;
}
.breaking-kicker [data-bk-title] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-dismiss {
  flex: none; margin-right: 12px; background: transparent; color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 3px;
  font: 700 0.72rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer;
}
.bk-dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
@media (prefers-reduced-motion: reduce) { .bk-label::before { animation: none !important; } }
.live-post.is-new { animation: live-post-in 0.55s ease-out; }
@keyframes live-post-in {
  from { background: #fff3f3; }
  to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .live-post.is-new { animation: none; } }
@media (max-width: 359px) {
  .rotator .wc-face { gap: 4px; }
  .rotator .wc-city { letter-spacing: 0.02em; }
  .rotator .wc-time { font-size: 0.9rem; }
}
.nav { background: #fff; border-bottom: 3px solid var(--blue); position: sticky; top: 0; z-index: 20; }
.nav .wrap { display: flex; align-items: center; gap: 12px; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
.nav ul::-webkit-scrollbar { display: none; }
.nav a { display: block; padding: 12px 12px 10px; color: var(--ink); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -3px; }
.nav a:hover { color: var(--blue); text-decoration: none; }
.nav a[aria-current='page'] { color: var(--blue); border-bottom-color: var(--navy); }
.nav .edition-age {
  flex: none; margin-left: auto; padding-left: 12px;
  color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 599px) {
  .nav .edition-age { font-size: 0.6rem; padding-left: 8px; }
}
.update-banner { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; max-width: calc(100% - 24px); }
.update-banner a { display: block; background: var(--navy); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 14px rgba(11, 37, 69, 0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.update-banner a:hover { text-decoration: none; background: var(--blue-dark); }

/* Full-screen flash when a new Breaking story lands while the page is open */
.breaking-flash {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(11, 37, 69, 0.88); color: #fff;
  animation: bf-backdrop 0.45s ease-out both;
}
.breaking-flash[hidden] { display: none !important; }
.bf-bars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bf-bars span {
  position: absolute; left: -10%; right: -10%; height: 4px; background: var(--breaking);
  animation: bf-bar 1.1s ease-in-out infinite;
}
.bf-bars span:nth-child(1) { top: 12%; animation-delay: 0s; }
.bf-bars span:nth-child(2) { top: 50%; height: 2px; opacity: 0.55; animation-delay: 0.2s; }
.bf-bars span:nth-child(3) { bottom: 14%; animation-delay: 0.4s; }
.bf-panel {
  position: relative; width: min(640px, 100%); text-align: center;
  padding: 28px 22px 24px; border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 5px solid var(--breaking); background: #0b2545;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: bf-panel 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bf-kicker {
  margin: 0 0 14px; font: 800 0.85rem/1 var(--sans); letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff;
}
.bf-kicker::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  border-radius: 50%; background: var(--breaking); vertical-align: 0;
  animation: live-pulse 1s ease-in-out infinite;
}
.bf-panel h2 {
  margin: 0; color: #fff; font-family: var(--serif); font-size: clamp(1.35rem, 4.2vw, 2rem);
  line-height: 1.25; text-wrap: balance;
}
.bf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.bf-go, .bf-dismiss {
  font: 700 0.92rem var(--sans); padding: 11px 16px; border-radius: 4px; cursor: pointer; border: 0;
}
.bf-go { background: var(--breaking); color: #fff; text-decoration: none; }
.bf-go:hover { background: #a51218; text-decoration: none; }
.bf-dismiss { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.bf-dismiss:hover { background: rgba(255, 255, 255, 0.08); }
@keyframes bf-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes bf-panel {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes bf-bar {
  0%, 100% { transform: translateX(-4%); opacity: 0.35; }
  50% { transform: translateX(4%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .breaking-flash, .bf-panel, .bf-bars span, .bf-kicker::before { animation: none !important; }
}

/* Hero */
.hero { padding: 22px 0 18px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.hero-small { padding-top: 18px; }
.eyebrow { color: var(--blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.hero h1 { font-size: clamp(1.6rem, 5.5vw, 2.6rem); letter-spacing: -0.01em; }
.hero-dek { font-size: 1.05rem; color: var(--body); margin: 10px 0 0; max-width: 60em; }
.level-summary, .facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.level-summary li, .facts li { border: 1px solid var(--rule); border-left-width: 5px; padding: 6px 12px; font-size: 0.9rem; background: #fff; }
.level-summary strong, .facts strong { font-size: 1.2rem; color: var(--ink); margin-right: 4px; }
.level-summary .lvl-high { border-left-color: var(--high); }
.level-summary .lvl-medium { border-left-color: var(--medium); }
.level-summary .lvl-low { border-left-color: var(--low); }
.level-summary .plain, .facts li { border-left-color: var(--navy); }
.crumbs { font-size: 0.82rem; color: var(--muted); padding-top: 14px; }
.region-hero { border-top: 6px solid var(--low); margin-top: 10px; }
.lvl-border-high { border-top-color: var(--high); }
.lvl-border-medium { border-top-color: var(--medium); }
.region-score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.big-index { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--ink); }
.big-index small { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* Layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 40px; }
@media (min-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; } }
.section { margin-bottom: 30px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 3px solid var(--navy); padding-top: 8px; margin-bottom: 14px; }
.section-head h2 { font-size: 1.35rem; }
.section-head .more { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

/* Badges */
.lvl { display: inline-block; font: 700 0.7rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; color: #fff; }
.lvl.lvl-high { background: var(--high); }
.lvl.lvl-medium { background: var(--medium); color: #2b1d00; }
.lvl.lvl-low { background: var(--low); color: #0d2747; }
.cat { font-weight: 700; color: var(--blue-dark); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
.cat-terrorism { color: var(--high); }
.cat-attack { color: #a3401b; }
.cat-conflict { color: #7a2d55; }
.cat-cyber { color: #2a4a7a; }
.cat-strategic { color: #1a5f7a; }
.sev, .ev { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 2px; background: var(--grey-bg); color: var(--body); border: 1px solid var(--rule); }
.sev-4 { background: #fdf0e1; border-color: #f2cf9c; color: #7a4a00; }
.sev-5 { background: #fbe5e5; border-color: #eeb2b2; color: #8f1d1d; }
.ev-official { background: var(--blue-soft); border-color: #c6d8f2; color: var(--blue-dark); }
.ev-multi { background: #e9f5ee; border-color: #bfe0cc; color: #1d5e37; }
.ev-social { background: #fff; border-style: dashed; color: var(--muted); }
.trend { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.trend-rising { color: var(--high); }
.trend-falling { color: #1d7a45; }
.toll { font-size: 0.8rem; font-weight: 600; color: #8f1d1d; }
.ok { color: #1d7a45; font-weight: 600; white-space: nowrap; }
.down { color: var(--high); font-weight: 600; white-space: nowrap; }

/* Map */
.map { margin: 0 0 8px; position: relative; }
.map svg { display: block; width: 100%; height: auto; background: #f6f9fc; border: 1px solid var(--rule); touch-action: manipulation; }
.map .sea { fill: #f6f9fc; }
.map .land-other { fill: var(--map-none); stroke: #fff; stroke-width: 0.5; }
.map .rg path { stroke: #fff; stroke-width: 0.5; transition: opacity 0.15s; }
.map .rg.lvl-high path { fill: var(--map-high); }
.map .rg.lvl-medium path { fill: var(--map-medium); }
.map .rg.lvl-low path { fill: var(--map-low); }
.map .rg:hover path, .map .rg:focus path { opacity: 0.8; }
.map .rg.dim path { fill: var(--map-none); }
.map .pin circle, .map .pin rect { fill: var(--navy); stroke: #fff; stroke-width: 0.9; }
.map .pin-terrorism rect { fill: var(--breaking); }
.map .pin.ev-social circle, .map .pin.ev-social rect { fill-opacity: 0.55; }
.map .pin.approx circle { fill: #33506f; }
.map .pin:hover circle, .map .pin:hover rect, .map .pin:focus circle, .map .pin:focus rect { stroke: #ffd24a; stroke-width: 2; }
.map-region svg { max-height: 70vh; }
.map figcaption { font-size: 0.8rem; color: var(--muted); padding-top: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0 0 4px; padding: 0; }
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 10px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.08); }
.sw.lvl-high { background: var(--map-high); }
.sw.lvl-medium { background: var(--map-medium); }
.sw.lvl-low { background: var(--map-low); }
.pin-key { width: 9px; height: 9px; border-radius: 50%; background: var(--navy); display: inline-block; }
.pin-key.terror { background: var(--breaking); border-radius: 0; transform: rotate(45deg); }
.map-popup { position: absolute; left: 10px; right: 10px; bottom: 54px; max-width: 420px; background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--navy); box-shadow: 0 8px 24px rgba(11, 37, 69, 0.18); padding: 12px 36px 12px 14px; font-size: 0.88rem; z-index: 5; }
.map-popup strong { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.map-popup .popup-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-weight: 600; }
.map-popup .close { position: absolute; top: 4px; right: 6px; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }

/* Region index */
.region-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.region-row a { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: 'rank name badge' 'rank bar bar' 'rank stats trend'; gap: 4px 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--rule); color: var(--body); }
.region-row a:hover { background: var(--grey-bg); text-decoration: none; }
.rank { grid-area: rank; font-family: var(--serif); font-size: 1.15rem; color: var(--muted); align-self: start; }
.rname { grid-area: name; font-weight: 700; color: var(--ink); }
.region-row .lvl { grid-area: badge; justify-self: end; }
.rbar { grid-area: bar; display: flex; align-items: center; gap: 8px; }
.rindex { font-size: 0.8rem; color: var(--muted); min-width: 2ch; text-align: right; }
.rstats { grid-area: stats; font-size: 0.82rem; color: var(--muted); }
.rstats strong { color: var(--high); font-weight: 600; }
.region-row .trend { grid-area: trend; justify-self: end; }
.bar { display: block; width: 100%; height: 8px; flex: 1; }
.bar .track { fill: var(--rule-soft); }
.bar .fill.lvl-high { fill: var(--high); }
.bar .fill.lvl-medium { fill: var(--medium); }
.bar .fill.lvl-low { fill: var(--low); }
@media (min-width: 720px) {
  .region-row a { grid-template-columns: 28px minmax(180px, 1.3fr) 80px minmax(120px, 1fr) minmax(150px, 1fr) 110px; grid-template-areas: 'rank name badge bar stats trend'; }
  .region-row .lvl { justify-self: start; }
}

/* Stories */
.story { position: relative; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.story:target { background: #fffbe6; box-shadow: -8px 0 0 #fffbe6, 8px 0 0 #fffbe6; }
.story .kicker { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.story .kicker a { color: var(--muted); font-weight: 600; }
.story h3 { font-size: 1.12rem; margin-bottom: 6px; }
.story .headline a { color: var(--ink); }
/* Whole card opens the article; links and controls inside the card stay clickable above it. */
.story .headline a::after { content: ''; position: absolute; inset: 0; }
.story .kicker a, .story .sources, .story .meta a { position: relative; z-index: 1; }
.story:hover .headline a { color: var(--blue); text-decoration: underline; }
.story .dek { font-size: 0.93rem; color: var(--body); margin-bottom: 8px; }
.story .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8rem; color: var(--muted); }
.story .src { font-weight: 700; color: var(--body); }
.story-compact h3 { font-size: 1rem; }

/* Front-page headline block */
.section-first { padding-top: 16px; }
.section-first .section-head { margin-bottom: 4px; }
.headlines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.story-lead { padding: 10px 0 18px; }
.story-lead h3 { font-size: clamp(1.55rem, 5.2vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 10px; }
.story-lead .dek { font-size: 1.05rem; }
.story-tile { padding: 12px 0; }
.story-tile h3 { font-size: 1.06rem; margin-bottom: 6px; }
.story-tile .dek { display: none; }
@media (min-width: 720px) {
  .headlines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .headlines .story-lead { grid-column: 1 / -1; border-bottom: 3px solid var(--blue); }
  .story-tile { border-bottom: 0; border-top: 1px solid var(--rule); padding: 12px 0 16px; }
  .story-tile .dek { display: block; font-size: 0.88rem; color: var(--muted); }
}
@media (min-width: 1100px) { .headlines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Latest-updates feed */
.story-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; }
.story-row .row-time { font-size: 0.78rem; font-weight: 700; color: var(--blue-dark); line-height: 1.3; padding-top: 3px; border-right: 2px solid var(--rule); padding-right: 8px; }
.story-row h3 { font-size: 1.04rem; margin-bottom: 5px; }
.section-dek { font-size: 0.92rem; color: var(--muted); margin-bottom: 10px; }

/* Threat strip under the nav */
.threat-strip { background: var(--grey-bg); border-bottom: 1px solid var(--rule); font-size: 0.82rem; }
.threat-strip .wrap { position: relative; display: flex; align-items: center; gap: 12px; padding-top: 7px; padding-bottom: 7px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.threat-strip .wrap::-webkit-scrollbar { display: none; }
.ts-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.threat-strip ul { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.threat-strip li a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.ts-breaking {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: min(420px, 46vw);
  color: var(--ink); font-weight: 700; font-family: var(--serif); overflow: hidden; text-overflow: ellipsis;
}
.ts-break-label {
  flex: none; font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; background: var(--breaking); padding: 2px 6px; border-radius: 2px;
}
.ts-map { margin-left: auto; font-weight: 700; padding-left: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.lvl-high { background: var(--high); }
.dot.lvl-medium { background: var(--medium); }
.ranked { margin: 0; padding-left: 20px; }
.ranked li { padding: 6px 0; border-bottom: 1px solid var(--rule-soft); }
.ranked li a { display: block; color: var(--ink); font-family: var(--serif); font-weight: 700; line-height: 1.3; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sources { margin-top: 8px; font-size: 0.82rem; }
.sources summary { cursor: pointer; color: var(--blue); font-weight: 600; width: max-content; }
.sources ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.sources li { margin: 2px 0; }
.more-pins { margin-top: 16px; }
.more-pins > summary { cursor: pointer; font-weight: 700; color: var(--blue); padding: 10px 0; }
.empty { color: var(--muted); font-style: italic; padding: 12px 0; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 4px; scrollbar-width: thin; }
.chip { flex: none; border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 600 0.82rem var(--sans); cursor: pointer; }
.chip span { color: var(--muted); font-weight: 400; margin-left: 2px; }
.chip[aria-pressed='true'] { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip[aria-pressed='true'] span { color: #c9d6e8; }
.chip-alt { border-style: dashed; }
.show-more { display: block; width: 100%; margin-top: 14px; padding: 12px; background: var(--grey-bg); border: 1px solid var(--rule); color: var(--blue-dark); font: 700 0.9rem var(--sans); cursor: pointer; }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 22px; }
.panel { border-top: 3px solid var(--navy); padding-top: 8px; font-size: 0.9rem; }
.panel-title { font-size: 1.1rem; margin-bottom: 10px; }
.panel-fold > summary { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 2px 0 4px; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 700; color: var(--ink); line-height: 1.25; }
.panel-fold > summary::-webkit-details-marker { display: none; }
.panel-fold > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; flex: none; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.panel-fold[open] > summary { margin-bottom: 10px; }
.panel-fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.fold-note { font: 400 0.8rem var(--sans); color: var(--muted); }
@media (max-width: 979px) { .wide-only { display: none; } }
.guide { margin: 0; }
.guide dt { margin-top: 10px; }
.guide dd { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
.adv-list { list-style: none; margin: 0; padding: 0; }
.adv-row { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.adv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.adv { display: inline-block; margin: 4px 0 2px; padding: 1px 7px; border-radius: 3px; font-size: 0.78rem; font-weight: 700; color: var(--ink); background: var(--grey-bg); }
.adv-2 { background: #fdf3d8; color: #6b4a00; }
.adv-3 { background: #fde3c8; color: #8a3b00; }
.adv-4 { background: var(--high); color: #fff; }
.adv-links { margin-top: 2px; }
.adv-more > summary { cursor: pointer; font-weight: 700; color: var(--blue); padding: 8px 0; }
.adv-new { display: inline-block; margin: 4px 0 2px 6px; padding: 1px 7px; border-radius: 3px; font-size: 0.75rem; font-weight: 700; color: var(--blue-dark); background: var(--blue-soft); }
.adv-new-raised { color: #fff; background: var(--breaking); }
.advice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.advice-card { border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: 12px 14px; background: #fff; }
.advice-card h3 { margin: 0 0 6px; font-size: 1rem; }
.advice-card p { margin: 6px 0; }
/* Local incidents (GPS → country) */
.local-panel { border: 1px solid var(--rule); border-top: 3px solid var(--navy); background: #fff; padding: 16px 18px; margin-bottom: 28px; max-width: 640px; }
.local-status p, .local-result p { margin: 0 0 10px; }
.local-country { margin: 0 0 6px; font-size: 1.65rem; }
.local-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 0 !important; }
.local-btn { font: inherit; font-weight: 700; padding: 10px 16px; border: 0; border-radius: 4px; background: var(--blue); color: #fff; cursor: pointer; }
.local-btn:hover { background: var(--blue-dark); }
.local-btn:disabled { opacity: 0.6; cursor: wait; }
.local-btn-ghost { background: #fff; color: var(--blue-dark); border: 1px solid var(--rule); }
.local-btn-ghost:hover { background: var(--grey-bg); }
.local-link { font-weight: 700; }
.local-fallback { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.local-fallback .country-search { margin-top: 6px; }

.country-search { margin: 14px 0 6px; max-width: 460px; }
.country-search label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; color: var(--ink); }
.cs-row { display: flex; gap: 6px; }
.cs-row input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink); }
.cs-row input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.cs-row button { font: inherit; font-weight: 700; padding: 8px 14px; border: 0; border-radius: 4px; background: var(--blue); color: #fff; cursor: pointer; }
.cs-row button:hover { background: var(--blue-dark); }
.country-list { list-style: none; margin: 8px 0 0; padding: 0; }
.country-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.country-row > a { min-width: 11em; }
.country-row .adv, .country-row .adv-new { margin: 0; }
.cat-advice { color: var(--navy); }
.story-advice .headline a { color: var(--ink); }
.advice-raised .cat-advice { color: var(--breaking); }
.hotspots { margin: 0; padding-left: 20px; }
.hotspots li { padding: 4px 0; }
.hotspots li span { display: inline-block; min-width: 70%; }
.spark { width: 100%; height: 70px; background: var(--grey-bg); }
.spark polyline { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--rule); }
.num { text-align: right; }

/* Live coverage */
.live-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--breaking); color: #fff; font: 800 0.68rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px 4px 6px; border-radius: 2px; }
.live-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.25; } }
.live-box { padding-top: 16px; display: grid; gap: 8px; }
.live-teaser-more { padding: 8px 14px; }
.live-teaser-more .live-kicker { margin-bottom: 2px; }
.live-teaser-more .live-title { font-size: 1rem; margin: 0; }
.live-teaser { border: 1px solid #f1caca; border-left: 4px solid var(--breaking); background: #fffafa; padding: 12px 14px; }
.live-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8rem; color: var(--muted); margin: 0 0 6px; }
.live-title { font-size: 1.12rem; margin-bottom: 8px; }
.live-teaser-main .live-title { font-size: clamp(1.35rem, 4.6vw, 1.8rem); line-height: 1.2; }
.live-title a { color: var(--ink); }
.live-title a:hover { color: var(--blue); text-decoration: underline; }
.live-latest { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.9rem; }
.live-latest li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 6px 0; border-top: 1px solid var(--rule-soft); }
.live-latest .clock { font-weight: 700; color: var(--breaking); }
.live-latest .src { font-weight: 700; color: var(--body); }
.live-latest a { flex: 1 1 100%; color: var(--ink); font-family: var(--serif); font-weight: 700; line-height: 1.3; }
.live-more { font-weight: 700; font-size: 0.9rem; }
.story-figure { position: relative; margin: 0; background: var(--rule-soft); }
.story-figure > a { display: block; }
.story-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.story-figure figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 3px 8px; background: rgba(10, 20, 35, 0.62); color: #fff; font-size: 0.7rem; line-height: 1.3; }
.story-figure figcaption a { color: #fff; }
.story-figure figcaption a:hover { text-decoration: underline; }
.live-teaser-main.has-figure { padding: 0; }
.live-teaser-main.has-figure .live-teaser-body { padding: 12px 14px 14px; }
@media (min-width: 720px) {
  .live-teaser-figure img { aspect-ratio: 2 / 1; }
  .live-teaser-main.has-figure .live-teaser-body { padding-top: 16px; padding-bottom: 16px; }
}
.live-hero-figure { max-width: 640px; margin: 18px 0 16px; }
.live-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.live-hero { border-bottom: 3px solid var(--breaking); }
.live-hero .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.live-hero .eyebrow a { color: var(--blue); }
.live-feed { list-style: none; margin: 0; padding: 0; }
.live-post { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 12px; border-bottom: 1px solid var(--rule); }
.live-time { padding: 14px 8px 0 0; border-right: 2px solid var(--breaking); display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; color: var(--muted); }
.live-time .clock { font-size: 1rem; font-weight: 800; color: var(--ink); }
.live-update { border-bottom: 0; }
.live-src { margin: 0 0 4px; font-size: 0.82rem; color: var(--muted); }
.live-blog-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--breaking); }
.lean {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 1px;
}
.lean-left { color: #6b3a7a; border-color: #d4c2dc; }
.lean-center-left { color: #3d5a80; border-color: #c5d0e0; }
.lean-center, .lean-wire, .lean-official { color: #4a5560; border-color: var(--rule); }
.lean-center-right { color: #7a4a2d; border-color: #e0d0c5; }
.lean-right { color: #8a3030; border-color: #e0c5c5; }
.lean-state { color: #1a5f7a; border-color: #c5d8e0; }
.sources-table .lean { margin-left: 8px; }
.live-src .lean, .live-latest .lean, .meta .lean { margin-left: 6px; }
.lean-caveat { margin: 0 0 14px; max-width: 52rem; }
.live-update .dek { margin: 6px 0 0; color: var(--body); font-size: 0.92rem; line-height: 1.45; }
.outlet-list li { padding: 5px 0; }

/* Prose (methodology) */
.prose { padding-bottom: 40px; }
.prose h2 { font-size: 1.3rem; margin: 26px 0 8px; border-top: 1px solid var(--rule); padding-top: 14px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }

/* Footer */
.footer { background: var(--grey-bg); border-top: 3px solid var(--navy); font-size: 0.85rem; color: var(--muted); padding: 22px 0 34px; }
.footer-brand { font-family: var(--serif); color: var(--ink); font-size: 1.05rem; margin-bottom: 8px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 12px 0 0; padding: 0; }

/* Phones: less chrome per story, shorter lists. Everything trimmed here is a tap away. */
@media (max-width: 599px) {
  .section { margin-bottom: 22px; }
  .section-head { margin-bottom: 10px; }
  .story { padding: 11px 0; }
  .sidebar { gap: 14px; }
  .story-item .dek, .story-tile .dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Latest updates: the time joins the label line so the headline gets the full width; the
     country stands in for region and place; severity and evidence badges stay on full cards. */
  .story-row { display: block; padding: 10px 0; }
  .story-row .row-time { float: left; border: 0; padding: 0 8px 0 0; line-height: 1.55; font-size: 0.75rem; white-space: nowrap; }
  .story-row h3 { font-size: 1rem; margin-bottom: 3px; }
  .story-row .k-region, .story-row .k-sep, .story-row .k-place,
  .story-tile .k-region, .story-tile .k-sep, .story-tile .k-place,
  .story-compact .k-region, .story-compact .k-sep, .story-compact .k-place { display: none; }
  .story-row .sev, .story-row .ev:not(.ev-social), .story-row .sources,
  .story-compact .sev, .story-compact .ev:not(.ev-social), .story-compact .sources,
  .story-lead .sources { display: none; }

  /* Front page: the lead story only, since the other headlines open Latest directly below; four
     terrorism reports. Local keeps the full headlines grid. */
  .headlines > .story-tile { display: none; }
  .headlines[data-local-list] > .story-tile { display: block; }
  .headlines > .story-lead { padding-bottom: 12px; }
  .story-list > .is-lead { display: none; }
  .compact-list > .story-compact:nth-child(n+5) { display: none; }

  /* Source health opened on a phone: name and status only. */
  .panel .sources-table .muted.small, .panel .sources-table th:nth-child(4), .panel .sources-table td:nth-child(4) { display: none; }
  .panel .sources-table td, .panel .sources-table th { padding-top: 5px; padding-bottom: 5px; }

  /* Regions: two lines each; the front page lists the top eight. */
  .region-row a { grid-template-areas: 'rank name badge' 'rank stats trend'; gap: 2px 10px; padding: 9px 2px; }
  .region-row .rbar { display: none; }
  .region-list-short .region-row:nth-child(n+9) { display: none; }

  /* Live coverage */
  .live-teaser-main .live-latest li:nth-child(n+2) { display: none; }
  .live-post { display: block; }
  .live-time { flex-direction: row; align-items: baseline; gap: 8px; border-right: 0; padding: 12px 0 0; }
  .live-update { padding-top: 2px; }
  .live-update .dek { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  .footer { padding: 16px 0 24px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }