/* story3d/hero/iceberg.css — "The danger you don't see" loop on the navy band (2026-10-20). Namespaced
   .ice; nothing here reaches the stories or the other hero loops. The .art.dia box has no aspect of its
   own (the flat SVG gave it one), so .ice sets the old picture's 26:21. Labels are real HTML pills
   (white, navy Inter 600); amber and orange are only shapes and light in the 3D. */
.ice{position:relative;width:100%;aspect-ratio:26/21;container-type:inline-size;}
.ice-view{position:absolute;inset:0;}
.ice-still,.ice-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.ice-still{object-fit:contain;}
.ice-gl{opacity:0;}
.ice.is-3d .ice-gl{opacity:1;}
.ice.is-3d .ice-still{visibility:hidden;}
.ice-labels{position:absolute;inset:0;pointer-events:none;}
.ice-label{
  position:absolute;white-space:nowrap;
  background:#fff;color:var(--navy,#1E3A5F);font-family:var(--sans,'Inter',sans-serif);font-size:14px;font-weight:600;
  letter-spacing:-.005em;line-height:1;padding:9px 14px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55);
}
.ice-label[data-k="tip"]{background:#fff;}
/* v2 tip (the faceted berg with a honeycomb crown): the label's rest pose sits higher than the markup's
   (pages.py); without the 3D (no JS, no WebGL, reduced motion) this places it over the still's crown */
.ice:not(.is-3d) .ice-label[data-k="tip"]{left:56.79%!important;top:12.87%!important;}
@container (max-width:420px){ .ice:not(.is-3d) .ice-label[data-k="tip"]{left:auto!important;right:2px!important;} }
.ice-pause{position:absolute;right:0;bottom:0;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--navy,#1E3A5F);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55);}
.ice-pause[hidden]{display:none;}
.ice-pause .i-play{display:none;}
.ice-pause[data-paused] .i-pause{display:none;}
.ice-pause[data-paused] .i-play{display:block;}
.ice-pause:focus-visible{outline:2px solid #fff;outline-offset:3px;}
@media (hover:hover) and (pointer:fine){ .ice-pause:hover{background:#E9EEF4;} }
@media (max-width:860px){ .ice-label{font-size:12px;padding:7px 10px 8px;} }
/* a mid-size box (the 1020-wide layout): a little smaller type so the label columns stay off the props */
@container (min-width:421px) and (max-width:470px){ .ice-label{font-size:13px;padding:8px 12px 9px;} }
/* a phone-sized box: the four hidden items wrap to two short lines so the columns leave the mass visible */
@container (max-width:420px){
  .ice-label:not([data-k="tip"]){white-space:normal;width:max-content;max-width:31cqw;border-radius:12px;font-size:11.5px;line-height:1.18;padding:6px 9px 7px;}
}
@media (prefers-reduced-motion:reduce){ .ice-pause{display:none;} }
html.s3d-capture .ice-pause{display:none;}