/* World Pulse Stories: the full-screen home feed, plus the dark "Stories" palette on story and conflict pages. */
.sx {
  --sx-ink: #0E0C0B; --sx-ink2: #171310; --sx-card: #1E1915; --sx-line: rgba(247,242,236,.12);
  --sx-paper: #F7F2EC; --sx-muted: #B3A99F; --sx-dim: #857B72;
  --sx-ember: #F97316; --sx-ember-soft: #FDBA74; --sx-crit: #FF4D3D;
  --sx-cond: "Barlow Condensed", "Roboto", sans-serif;
  --sx-ui: "Barlow", "Roboto", sans-serif;
  --sx-serif: "Source Serif 4", "Newsreader", Georgia, serif;
  --sx-nav: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  position: fixed; inset: 0; z-index: 15; overflow: hidden; background: var(--sx-ink); color: var(--sx-paper);
  font-family: var(--sx-ui); -webkit-font-smoothing: antialiased; touch-action: none; overscroll-behavior: contain;
}
.sx .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-stage { position: absolute; inset: 0; overflow: hidden; }
.sx-track { position: absolute; inset: 0; transition: transform .32s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.sx-track { display: flex; flex-direction: column; }
.sx-card, .sx-end { position: relative; flex: none; height: 100%; overflow: hidden; }

/* background: glow, dot grid, radar rings on a point, sweep, dashed arc (no images) */
.sx-bg { position: absolute; inset: 0; background:
  radial-gradient(120% 70% at var(--x) var(--y), rgba(249,115,22,.28), rgba(249,115,22,0) 60%),
  radial-gradient(90% 60% at 10% 100%, rgba(194,65,12,.22), transparent 70%),
  linear-gradient(180deg, #1a1210 0%, #0E0C0B 70%); }
.sx-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(247,242,236,.13) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 45% at var(--x) var(--y), #000 30%, transparent 80%); mask-image: radial-gradient(70% 45% at var(--x) var(--y), #000 30%, transparent 80%); }
.sx-radar { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.sx-radar i { position: absolute; border: 1.5px solid rgba(249,115,22,.55); border-radius: 50%; transform: translate(-50%,-50%); }
.sx-radar i:nth-child(1) { width: 44px; height: 44px; border-color: rgba(253,186,116,.9); }
.sx-radar i:nth-child(2) { width: 110px; height: 110px; opacity: .7; }
.sx-radar i:nth-child(3) { width: 190px; height: 190px; opacity: .45; }
.sx-radar i:nth-child(4) { width: 290px; height: 290px; opacity: .25; }
.sx-radar b { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--sx-ember-soft); transform: translate(-50%,-50%);
  box-shadow: 0 0 0 6px rgba(249,115,22,.35), 0 0 30px 8px rgba(249,115,22,.6); }
.sx-sweep { position: absolute; left: var(--x); top: var(--y); width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(249,115,22,0), rgba(249,115,22,.28) 40deg, transparent 41deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, #000 62%, transparent 64%); mask-image: radial-gradient(circle, #000 0, #000 62%, transparent 64%);
  animation: sx-spin 9s linear infinite; }
.sx-radar i:nth-child(2) { animation: sx-ping 3.2s ease-out infinite; }
.sx-arc { position: absolute; left: 0; top: 18%; width: 100%; height: 200px; }
.sx-coord { position: absolute; left: 16px; top: calc(120px + env(safe-area-inset-top)); font: 600 11px var(--sx-ui); letter-spacing: .14em; color: var(--sx-ember-soft); text-transform: uppercase; }
.sx-coord span { display: block; color: var(--sx-muted); letter-spacing: .08em; margin-top: 3px; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-ping { 0% { transform: translate(-50%,-50%) scale(.9); opacity: .8; } 100% { transform: translate(-50%,-50%) scale(1.15); opacity: .3; } }

/* top: progress bars, brand, tabs */
.sx-top { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: calc(10px + env(safe-area-inset-top)) 16px 0; pointer-events: none; }
.sx-top a { pointer-events: auto; }
.sx-bars { display: flex; gap: 4px; }
.sx-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(247,242,236,.25); overflow: hidden; position: relative; }
.sx-bars i.done { background: var(--sx-paper); }
.sx-bars i.now::after { content: ""; position: absolute; inset: 0; background: var(--sx-paper); transform-origin: left; transform: scaleX(.42); animation: sx-fill var(--dur, 30s) linear forwards; }
.sx-bars i.now.paused::after { animation-play-state: paused; }
@keyframes sx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sx-head { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.sx-brand { display: flex; align-items: center; gap: 9px; color: var(--sx-paper); text-decoration: none; }
.sx-brand img { border-radius: 28%; display: block; }
.sx .wm { font: 700 17px/1 var(--sx-cond); letter-spacing: .14em; text-transform: uppercase; }
.sx-tabs { display: flex; gap: 16px; font: 700 15px var(--sx-ui); }
.sx-tabs a { color: var(--sx-muted); text-decoration: none; position: relative; }
.sx-tabs a.on { color: var(--sx-paper); }
.sx-tabs a.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -7px; height: 2.5px; border-radius: 2px; background: var(--sx-ember); }

/* card text */
.sx-content { position: absolute; left: 16px; right: 78px; bottom: calc(var(--sx-nav) + 88px); z-index: 10; }
.sx-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.sx .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 12px/1 var(--sx-ui); letter-spacing: .06em; text-transform: uppercase; }
.sx .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: currentColor; }
.sx .c-critical { background: rgba(255,77,61,.16); color: #FF8A7D; border: 1px solid rgba(255,77,61,.45); }
.sx .c-critical .dot { background: var(--sx-crit); }
.sx .c-high { background: rgba(249,115,22,.16); color: var(--sx-ember-soft); border: 1px solid rgba(249,115,22,.45); }
.sx .c-th { background: rgba(247,242,236,.08); color: var(--sx-paper); border: 1px solid var(--sx-line); }
.sx-kick { font: 700 13px var(--sx-ui); color: var(--sx-ember-soft); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.sx-h { margin: 0 0 14px; font: 700 50px/.94 var(--sx-cond); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.sx-h.sx-m { font-size: 44px; } .sx-h.sx-l { font-size: 38px; } .sx-h.sx-xl { font-size: 32px; }
.sx-h em { font-style: normal; color: var(--sx-ember); }
.sx-sum { margin: 0 0 14px; font: 400 16.5px/1.45 var(--sx-serif); color: #EDE6DE; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sx-src { display: flex; align-items: center; gap: 10px; }
.sx-stack { display: flex; flex: none; }
.sx-stack span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 9.5px var(--sx-ui); color: #fff; border: 2px solid var(--sx-ink); margin-left: -7px; }
.sx-stack span:first-child { margin-left: 0; }
.sx-src p { margin: 0; font: 600 12.5px/1.3 var(--sx-ui); color: var(--sx-muted); }
.sx-src strong { color: var(--sx-paper); }
.sx-ai { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--sx-ui); color: var(--sx-muted); }
.sx-ai b { font-weight: 700; color: var(--sx-ink); background: var(--sx-ember-soft); border-radius: 4px; padding: 2px 5px; font-size: 10.5px; letter-spacing: .08em; }

/* right action rail */
.sx-rail { position: absolute; right: 10px; bottom: calc(var(--sx-nav) + 98px); z-index: 12; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.sx-rb { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--sx-paper); font: 700 11.5px var(--sx-ui); cursor: pointer; }
.sx-rb .c { width: 50px; height: 50px; border-radius: 50%; background: rgba(247,242,236,.1); border: 1px solid rgba(247,242,236,.14); display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sx-rb.hot .c { background: var(--sx-ember); border-color: var(--sx-ember); color: var(--sx-ink); }
.sx-rb[aria-pressed="true"]:not(.hot) .c { color: var(--sx-ember-soft); border-color: rgba(253,186,116,.6); }
.sx-rb[aria-pressed="true"]:not(.hot) .c path { fill: currentColor; }
.sx-rb:disabled { opacity: .4; cursor: default; }
.sx-rb:focus-visible .c, .sx-play:focus-visible, .sx-tabs a:focus-visible { outline: 2px solid var(--sx-ember-soft); outline-offset: 3px; }

/* player */
.sx-player { position: absolute; left: 12px; right: 12px; bottom: calc(var(--sx-nav) + 10px); height: 62px; z-index: 14; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  border-radius: 18px; background: rgba(30,25,21,.92); border: 1px solid var(--sx-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sx-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sx-paper); display: grid; place-items: center; flex: none; cursor: pointer; padding: 0; }
.sx-play svg { width: 18px; height: 18px; fill: var(--sx-ink); }
.sx-play .ps, .sx.speaking .sx-play .pl { display: none; }
.sx.speaking .sx-play .ps { display: inline; }
.sx-pl-t { flex: 1; min-width: 0; }
.sx-pl-t b { display: block; font: 700 14px var(--sx-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-pl-t span { font: 500 12px var(--sx-ui); color: var(--sx-muted); }
.sx-wave { display: flex; gap: 2.5px; align-items: center; height: 28px; }
.sx-wave i { width: 3px; border-radius: 2px; background: var(--sx-ember); }
.sx-wave i:nth-child(n+8) { opacity: .4; }
.sx.speaking .sx-wave i { opacity: 1; animation: sx-wave .9s ease-in-out var(--d) infinite alternate; transform-origin: center; }
@keyframes sx-wave { to { transform: scaleY(.35); } }
.sx-hint { display: none; }

/* end card */
.sx-end-in { position: absolute; left: 16px; right: 16px; bottom: calc(var(--sx-nav) + 100px); z-index: 10; }
.sx-cta { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 16px; background: var(--sx-ember); color: var(--sx-ink); font: 700 16px var(--sx-ui); text-decoration: none; margin-bottom: 10px; }
.sx-again { width: 100%; height: 48px; border-radius: 16px; background: var(--sx-card); border: 1px solid var(--sx-line); color: var(--sx-paper); font: 700 15px var(--sx-ui); cursor: pointer; }
.sx.at-end .sx-rail, .sx.at-end .sx-player { display: none; }

/* the chrome around Stories: no masthead, a dark tab bar like the mockup */
body[data-route="stories"] .masthead, body[data-route="stories"] .dateline, body[data-route="stories"] .sections, body[data-route="stories"] .site-foot, body[data-route="stories"] footer { display: none !important; }
body[data-route="stories"] { overflow: hidden; background: #0E0C0B; }
.tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body[data-route="stories"] .tabbar { background: linear-gradient(to top, rgba(14,12,11,.98) 60%, rgba(14,12,11,.6)); border-top: 0; }
body[data-route="stories"] .tabbar a { color: #857B72; font-family: "Barlow", "Roboto", sans-serif; }
body[data-route="stories"] .tabbar a[aria-current="page"] { color: #F7F2EC; }
body[data-route="stories"] .tabbar a[aria-current="page"] svg { stroke: #F97316; }
body[data-route="stories"] .tabbar a[aria-current="page"]::before, body[data-route="stories"] .tabbar a[aria-current="page"]::after { display: none; }
.tabbar { z-index: 30; }

/* desktop: a centred phone-width column on a dimmed stage */
@media (min-width: 700px) {
  .sx { --sx-nav: 0px; background: radial-gradient(60% 60% at 50% 30%, #1a1210, #070605); }
  .sx-stage, .sx-top, .sx-rail, .sx-player, .sx-hint { left: 50% !important; right: auto !important; width: min(460px, calc(100vw - 32px)); transform: translateX(-50%); }
  .sx-stage { top: 2vh; bottom: 2vh; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.6); border: 1px solid rgba(247,242,236,.08); }
  .sx-top { top: 2vh; }
  .sx-rail { width: auto; transform: none; margin-left: calc(min(460px, calc(100vw - 32px)) / 2 - 60px); bottom: calc(2vh + 98px); }
  .sx-player { bottom: calc(2vh + 12px); width: calc(min(460px, calc(100vw - 32px)) - 24px); }
  .sx-hint { display: block; position: absolute; bottom: 0; margin: 0; text-align: center; font: 600 11px var(--sx-ui); color: var(--sx-dim); letter-spacing: .12em; text-transform: uppercase; line-height: 2vh; }
}
@media (min-width: 900px) { body[data-route="stories"] .tabbar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sx-track { transition: opacity .2s; }
  .sx-sweep, .sx-radar i, .sx.speaking .sx-wave i { animation: none !important; }
  .sx-bars i.now::after { animation: none; transform: scaleX(1); }
}

/* Story and conflict pages take the Stories palette and type (dark, ember, condensed headlines, serif body). */
body[data-route="story"], body[data-route="conflict"], body[data-route="conflicts"] {
  --paper: #0E0C0B; --paper-2: #171310; --paper-3: #1E1915; --field: #171310;
  --ink: #F7F2EC; --ink-2: #EDE6DE; --muted: #B3A99F; --rule: rgba(247,242,236,.12); --rule-2: #857B72;
  --red: #F97316; --red-dark: #C2410C; --red-text: #FDBA74; --on-red: #0E0C0B;
  --deal: #5EE3A1; --deal-text: #5EE3A1; --crisis: #FF4D3D; --focus: #FDBA74;
  --st-critical: #FF4D3D; --st-high: #F97316; --st-elevated: #F2C14E; --st-watch: #5EC2FF; --st-quiet: #857B72;
  --ocean: #171310; --land: #2a231e;
  --serif: "Source Serif 4", "Newsreader", Georgia, serif;
  color-scheme: dark; background: #0E0C0B; color: #F7F2EC;
}
body[data-route="story"] .view h1, body[data-route="conflict"] .view h1, body[data-route="conflicts"] .view h1 {
  font-family: "Barlow Condensed", "Roboto", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; line-height: 1;
}
body[data-route="story"] .masthead, body[data-route="conflict"] .masthead, body[data-route="conflicts"] .masthead { background: #0E0C0B; }
body[data-route="story"] .kicker, body[data-route="conflict"] .kicker, body[data-route="conflicts"] .kicker { color: #FDBA74; letter-spacing: .14em; }