/* Light publication masthead and perspective story selector. */
.news-masthead { display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:24px; padding:8px 0 0; margin-bottom:24px; }
.news-masthead-subtitle { margin:0; padding-left:24px; border-left:1px solid #c3d9e3; color:#526c7c; font-family:Inter,sans-serif; font-size:14px; font-weight:500; line-height:1.5; letter-spacing:.1px; }
.news-masthead-title { margin:0; color:#0b1c36; font-family:Montserrat,Inter,sans-serif; font-size:clamp(26px,3vw,36px); font-weight:800; line-height:1.25; letter-spacing:-1px; }
.news-masthead-the { color:#287b98; font-family:Inter,sans-serif; font-size:.65em; font-style:italic; font-weight:800; letter-spacing:0; margin-right:.2em; }
.news-masthead-period { color:#299cbe; }
.news-masthead::after { content:''; display:block; grid-column:1 / -1; width:46px; height:3px; margin-top:14px; background:#4cc9f0; }
@media (max-width:600px) {
  .news-masthead { grid-template-columns:1fr; row-gap:7px; padding:4px 6px 0; margin-bottom:20px; }
  .news-masthead-subtitle { border:0; padding:0; font-size:13px; }
  .news-masthead-title { letter-spacing:-.8px; }
  .news-masthead::after { margin-top:11px; }
}
.news-stories-jump { display:inline-flex; align-self:flex-start; align-items:center; gap:16px; min-height:44px; margin-top:14px; padding:10px 17px; border:1px solid #4cc9f080; border-radius:24px; background:#0b1c365c; color:#fff; font-size:12px; font-weight:600; }
.news-stories-jump i { color:#4cc9f0; }
.news-stories-jump:hover { background:#1a4660; border-color:#4cc9f0; }
.news-stories-jump:focus-visible { outline:2px solid #a7ecff; outline-offset:4px; }
.story-explorer-main { background:#f5f5f7; padding:24px 0 56px; }
.story-explorer-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:14px; }
.story-explorer-eyebrow { color:#427287; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin-bottom:8px; }
.story-explorer-heading h2 { font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:clamp(21px,2.2vw,29px); line-height:1.25; letter-spacing:-.8px; }
.story-explorer { --explorer-accent:#176b91; --explorer-muted:#65717d; position:relative; isolation:isolate; background:#fff; color:#1d2733; border:1px solid #e2e7eb; border-radius:24px; padding:0 30px; box-shadow:0 20px 60px -24px #34495e20; overflow:hidden; }
.story-explorer-map { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 28%,#e8f3fa99,transparent 57%),linear-gradient(180deg,#fafcfd,#fff 72%); }
.story-explorer-map svg { width:100%; height:100%; opacity:.18; }
.explorer-contours { stroke:#7ebed3; stroke-width:1; opacity:.12; }
.explorer-route { stroke:#66bdd5; stroke-width:1; stroke-dasharray:5 9; opacity:.2; }
.explorer-map-points { fill:#70d9f6; opacity:.4; }
.explorer-toolbar { position:relative; z-index:10; min-height:44px; display:flex; align-items:center; justify-content:flex-end; gap:12px; padding-top:4px; }
/* Perspective belongs to the scene, not individual cards, for a shared vanishing point. */
.explorer-stage { --card-width:460px; --card-height:286px; --orbit-step:370px; position:relative; height:337px; margin:0 -30px; perspective:1100px; perspective-origin:50% 40%; touch-action:pan-y pinch-zoom; cursor:grab; user-select:none; -webkit-user-select:none; }
.explorer-stage.is-dragging { cursor:grabbing; }

.explorer-mission-card { position:absolute; top:12px; left:calc(50% - var(--card-width) / 2); width:var(--card-width); height:var(--card-height); padding:0; text-align:left; color:#1d2733; background:#fff; border:1px solid #dbe4e9; border-radius:16px; overflow:hidden; transform:translate3d(calc(var(--slot) * var(--orbit-step)),var(--rise),var(--depth)) rotateY(calc(var(--angle) + var(--tilt-y, 0deg))) rotateX(var(--tilt-x, 0deg)); opacity:1; box-shadow:0 18px 30px #273d501c; transition:transform .92s cubic-bezier(.2,.85,.25,1.08),opacity .55s,border-color .3s,box-shadow .6s; cursor:pointer; backface-visibility:hidden; }
/* Inset frame and two teal corner brackets add detail without covering the photos. */
.explorer-mission-card::before { content:''; position:absolute; inset:7px; z-index:3; border:1px solid #d9f4ff66; border-radius:10px; background:linear-gradient(#69d8f4,#69d8f4) right top / 27px 2px no-repeat,linear-gradient(#69d8f4,#69d8f4) right top / 2px 27px no-repeat,linear-gradient(#69d8f4,#69d8f4) left bottom / 27px 2px no-repeat,linear-gradient(#69d8f4,#69d8f4) left bottom / 2px 27px no-repeat; opacity:.55; pointer-events:none; transition:opacity .4s; }
.explorer-mission-card.is-selected::before { opacity:1; }
.explorer-mission-card.is-selected { opacity:1; border-color:#86c8df; box-shadow:0 0 0 3px #c7eaf44d,0 8px 28px #4cc9f01a,0 24px 44px -12px #30495945; }
.explorer-mission-card.is-distant { opacity:0; pointer-events:none; }
.explorer-mission-card:not(.is-selected):hover { opacity:1; border-color:#8badc1; }
.explorer-mission-card .explorer-card-photo { width:100%; height:100%; object-fit:cover; pointer-events:none; filter:saturate(.75); transform:scale(1.055) translate(var(--photo-x, 0px),var(--photo-y, 0px)); transition:filter .6s,transform .7s cubic-bezier(.2,.7,.2,1); }
.explorer-mission-card.is-selected .explorer-card-photo { filter:saturate(1); }
.explorer-mission-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(11,28,54,.97) 0%,rgba(11,28,54,.85) 25%,rgba(11,28,54,0) 72%); pointer-events:none; }
/* Original brand emblem stays crisp and independent of photo parallax/filters. */
.explorer-card-emblem { position:absolute; top:17px; right:18px; z-index:4; width:58px; height:62px; object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 2px 3px rgba(11,28,54,.45)); }
.explorer-card-caption { position:absolute; left:24px; right:90px; top:22px; bottom:auto; z-index:1; color:#fff; }
.explorer-card-caption::before { content:''; display:block; width:28px; height:2px; margin-bottom:10px; background:#4cc9f0; }
.explorer-card-volume { display:block; color:#4cc9f0; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:7px; }
.explorer-card-title { display:block; font-family:Montserrat,Inter,sans-serif; font-size:24px; line-height:1.2; font-weight:800; color:#fff; letter-spacing:-.6px; text-wrap:balance; text-shadow:0 1px 6px rgba(11,28,54,.2); }
.explorer-card-state { position:absolute; top:auto; bottom:15px; left:17px; z-index:1; display:flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid #4cc9f059; border-radius:20px; background:rgba(11,28,54,.82); color:#b4edff; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.explorer-mission-card:not(.is-selected) .explorer-card-state { display:none; }
.explorer-card-state::before { content:''; height:4px; width:4px; border-radius:50%; background:currentColor; }
/* The briefing stays readable while its image card travels through the scene. */
.explorer-briefing { display:grid; max-width:820px; margin:0 auto; padding:18px 0 26px; border-top:1px solid #e3e9ed; }
.explorer-panel { grid-area:1/1; min-width:0; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(9px); transition:opacity .35s,transform .45s,visibility .45s; }
.explorer-panel.is-active { visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); }
.explorer-panel-copy { display:grid; grid-template-columns:1fr auto; column-gap:28px; align-items:start; }
.explorer-category { grid-column:1; color:var(--explorer-accent); font-size:10px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:9px; }
.explorer-panel h3 { grid-column:1; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:23px; line-height:1.25; font-weight:600; letter-spacing:-.6px; margin:0 0 11px; text-wrap:balance; }
.explorer-excerpt { grid-column:1; font-size:16px; color:#445a69; line-height:1.65; margin:0; }
.explorer-panel-actions { grid-column:2; grid-row:1 / 4; align-self:center; display:flex; flex-direction:column; align-items:center; gap:13px; }
.explorer-read-link { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:46px; padding:12px 20px; border-radius:24px; color:#fff; background:#176b91; font-size:12px; font-weight:600; white-space:nowrap; transition:background .2s,box-shadow .2s; }
.explorer-read-link:hover { background:#125775; box-shadow:0 4px 14px #176b9124; }
.explorer-read-link i { transition:transform .2s; }
.explorer-read-link:hover i { transform:translateX(3px); }
.explorer-read-time { font-size:11px; color:#65717d; display:flex; gap:7px; align-items:center; }
.explorer-navigation { display:flex; align-items:center; justify-content:center; padding:0 0 22px; }
.explorer-controls { display:flex; align-items:center; gap:7px; }
.explorer-arrow { width:44px; height:44px; border:1px solid #e1e6ea; background:#f3f5f7; color:#36566b; border-radius:50%; display:grid; place-items:center; transition:background .2s,border-color .2s; }
.explorer-arrow:hover { background:#e7f0f5; border-color:#b7cdd9; }
.explorer-arrow:disabled { opacity:.3; cursor:default; }
.explorer-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.story-explorer :is(button,a):focus-visible { outline:2px solid #176b91; outline-offset:4px; }
.story-explorer-main noscript { display:block; padding:20px; }
.story-explorer-main noscript a { text-decoration:underline; }
.explorer-empty { padding:70px 25px; text-align:center; }
@media (max-width:900px) {
  .explorer-stage { --card-width:390px; --card-height:260px; --orbit-step:325px; height:307px; }

  .explorer-card-title { font-size:22px; }
  .explorer-panel h3 { font-size:21px; }
}
@media (max-width:600px) {
  .story-explorer-main { padding:18px 0 34px; }
  .story-explorer-main > .container { padding-inline:12px; }
  .story-explorer-heading { margin-bottom:12px; padding-inline:4px; }
  .story-explorer-heading h2 { font-size:22px; max-width:290px; }
  .story-explorer-eyebrow { font-size:10px; letter-spacing:1.5px; }
  .story-explorer { padding:0 18px; border-radius:20px; }
  .explorer-stage { --card-width:248px; --card-height:214px; --orbit-step:252px; height:251px; margin:0 -18px; perspective:800px; perspective-origin:50% 40%; }
  .explorer-mission-card { top:10px; }
  .explorer-card-emblem { top:14px; right:14px; width:40px; height:43px; }
  .explorer-card-caption { left:17px; right:62px; top:18px; bottom:auto; }
  .explorer-card-title { font-size:16px; line-height:1.2; }
  .explorer-card-volume { font-size:10px; margin-bottom:6px; }
  .explorer-card-state { left:12px; top:auto; bottom:12px; font-size:9px; letter-spacing:1px; }

  .explorer-briefing { padding:15px 2px 23px; }
  .explorer-panel-copy { display:flex; flex-direction:column; gap:0; }
  .explorer-panel h3 { font-size:21px; letter-spacing:-.5px; margin-bottom:12px; }
  .explorer-category { font-size:10px; letter-spacing:1px; }
  .explorer-excerpt { font-size:16px; line-height:1.65; }
  .explorer-panel-actions { flex-direction:row; align-self:auto; align-items:center; gap:17px; margin-top:20px; }
  .explorer-read-link { padding-inline:16px; gap:18px; }
  .explorer-read-time { font-size:10px; }
}
@media (max-width:350px) { .explorer-stage { --card-width:218px; --orbit-step:225px; } .explorer-card-title { font-size:17px; } }
/* Motion layers are independent: transform = navigation; translate = gentle float.
   No animated property changes the geometry used to calculate card positions. */
.explorer-toolbar-tools { display:flex; align-items:center; gap:16px; }
.explorer-motion-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 11px; border:1px solid #dfe7ec; border-radius:22px; background:#ffffffc9; color:#426375; font-size:10px; white-space:nowrap; }
.explorer-motion-toggle:hover { background:#edf5fa; border-color:#b9d0dd; }
.explorer-motion-toggle:disabled { cursor:default; opacity:.75; }
.explorer-mission-card { animation:explorerFloat 6s ease-in-out infinite; animation-delay:var(--float-delay, 0s); animation-play-state:paused; }
@keyframes explorerFloat { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes explorerSheen { 0%,72% { transform:translateX(-155%) skewX(-20deg); opacity:0; } 78% { opacity:.45; } 96%,100% { transform:translateX(245%) skewX(-20deg); opacity:0; } }
@keyframes explorerBriefingIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.explorer-card-sheen { position:absolute; inset:0; z-index:2; background:linear-gradient(110deg,transparent 25%,#ffffff70 50%,transparent 75%); pointer-events:none; opacity:0; }
.explorer-mission-card.is-selected .explorer-card-sheen { animation:explorerSheen 10s ease-in-out infinite; animation-play-state:paused; }
.story-explorer.is-scene-visible[data-ambient="on"] :is(.explorer-mission-card,.explorer-mission-card.is-selected .explorer-card-sheen) { animation-play-state:running; }
.story-explorer .explorer-stage:is(:hover,:focus-within,.is-dragging) :is(.explorer-mission-card,.explorer-card-sheen) { animation-play-state:paused; }
.story-explorer[data-ambient="off"] :is(.explorer-mission-card,.explorer-card-sheen) { animation:none; }
.explorer-stage.is-dragging .explorer-mission-card { transition:none; cursor:grabbing; }
.explorer-stage.is-dragging .explorer-mission-card .explorer-card-photo { transition:none; }
.explorer-mission-card.is-hovering { transition:transform .22s ease-out,opacity .3s,box-shadow .3s; box-shadow:0 0 0 3px #c7eaf466,0 8px 30px #4cc9f024,0 30px 50px -12px #30495945; }
.explorer-panel.is-active .explorer-panel-copy > * { animation:explorerBriefingIn .52s both cubic-bezier(.22,.7,.2,1); }
.explorer-panel.is-active h3 { animation-delay:.07s; }
.explorer-panel.is-active .explorer-excerpt { animation-delay:.13s; }
.explorer-panel.is-active .explorer-panel-actions { animation-delay:.19s; }
.explorer-arrow { transition:background .2s,border-color .2s,transform .25s; }
.explorer-arrow:not(:disabled):hover { transform:translateY(-2px); }
.explorer-arrow:not(:disabled):active { transform:scale(.93); }
@media (max-width:600px) {
  .explorer-toolbar-tools { gap:7px; flex-shrink:0; }
  .explorer-motion-toggle { padding:7px 10px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  /* Keep spatial placement! Removing transforms would pile cards on each other. */
  .story-explorer *, .story-explorer *::before, .story-explorer *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
