/* Snow Roach containment layer (31 Oct 2026, page polish). Loaded LAST; on the front page it is one of the held sheets that switch on together
   (inc/sr-contain.php). Nothing below changes how the page looks: it changes what the browser has to do while you scroll.
   Rollback: remove the require_once of inc/sr-contain.php at the foot of inc/sr-frost-engine.php. */

/* 1. SEEDS for contain-intrinsic-size: the height a skipped section is assumed to have until the browser has drawn it once (then `auto` remembers
      the real one). The numbers are estimates from the stylesheets at 390 px and 1366 px wide; assets/sr-contain.js stores the real heights per
      width bucket (localStorage 'sr-h2') and the head helper in inc/sr-contain.php sets --sr-h-<key> on <html> before the first layout, which
      overrides these. `SRContain.measure()` in a browser prints the real table. */
:root{
  --sr-h-sf:420px;--sr-h-fundraiser:400px;--sr-h-belt:670px;--sr-h-band:840px;--sr-h-origin:1500px;--sr-h-powers:1700px;--sr-h-arcade:1650px;
  --sr-h-ribbon:220px;--sr-h-quote:240px;--sr-h-dispatch:1800px;--sr-h-kitchen:1500px;--sr-h-merch:1300px;--sr-h-scene:780px;
  --sr-h-meme:3900px;--sr-h-universe:1500px;--sr-h-closing:500px;--sr-h-wrap:1200px
}
@media(min-width:701px){:root{
  --sr-h-sf:330px;--sr-h-fundraiser:280px;--sr-h-belt:640px;--sr-h-band:1320px;--sr-h-origin:820px;--sr-h-powers:780px;--sr-h-arcade:760px;
  --sr-h-ribbon:110px;--sr-h-quote:240px;--sr-h-dispatch:860px;--sr-h-kitchen:820px;--sr-h-merch:700px;--sr-h-scene:440px;
  --sr-h-meme:1800px;--sr-h-universe:820px;--sr-h-closing:430px;--sr-h-wrap:800px
}}

/* 2. CONTAINMENT. Every top-level section below the hero is skipped (no style, layout or paint) until it is near the screen, and is a
      containment boundary once it is (a change inside it cannot reflow the page). The ambient wrappers carry their artwork, so the wrapper is
      the boundary and the art is skipped with the section. The belts keep their own overflow clip; their cards are NOT paint-contained
      (their hover glow and shadow reach outside the card). */
.sr-sf,.sr-fundraiser,.srb,.srs,.origin,.hero-dossier,.sr-ambient-wrap,.sr-shop-ribbon,.hero-quote,.dispatch,.sr-scene-strip,.universe,.closing{
  content-visibility:auto;contain:layout paint style}
.sr-sf{contain-intrinsic-block-size:auto var(--sr-h-sf)}
.sr-fundraiser{contain-intrinsic-block-size:auto var(--sr-h-fundraiser)}
.srb{contain-intrinsic-block-size:auto var(--sr-h-belt)}
.srs{contain-intrinsic-block-size:auto var(--sr-h-band)}
.origin{contain-intrinsic-block-size:auto var(--sr-h-origin)}
.hero-dossier{contain-intrinsic-block-size:auto var(--sr-h-powers)}
.sr-ambient-wrap{contain-intrinsic-block-size:auto var(--sr-h-wrap)}
.sr-ambient-arcade{contain-intrinsic-block-size:auto var(--sr-h-arcade)}
.sr-ambient-kitchen{contain-intrinsic-block-size:auto var(--sr-h-kitchen)}
.sr-ambient-merch{contain-intrinsic-block-size:auto var(--sr-h-merch)}
.sr-ambient-meme{contain-intrinsic-block-size:auto var(--sr-h-meme)}
.sr-shop-ribbon{contain-intrinsic-block-size:auto var(--sr-h-ribbon)}
.hero-quote{contain-intrinsic-block-size:auto var(--sr-h-quote)}
.dispatch{contain-intrinsic-block-size:auto var(--sr-h-dispatch)}
.sr-scene-strip{contain-intrinsic-block-size:auto var(--sr-h-scene)}
.universe{contain-intrinsic-block-size:auto var(--sr-h-universe)}
.closing{contain-intrinsic-block-size:auto var(--sr-h-closing)}
/* the hero is the first screen: never skipped, but its changes stay inside it */
.sr-cinematic-hero{contain:layout paint style}
/* belts: the viewport is the clip (it already was: overflow hidden), the track is what moves; cards are width-fixed size containers */
.srb__viewport{contain:layout paint}
.srb__track{contain:layout style}
.srb-card{container:srcard/inline-size}
@container srcard (max-width:200px){.srb-card__body{padding:10px 12px 12px}.srb-card__title{font-size:16px}}
/* the fixed layers: boxes with a size of their own, so nothing inside them can ever cause layout elsewhere */
.sr-snow,.sr-frost-edge,.sr-aurora,body::before{contain:strict}
/* printing shows everything */
@media print{*{content-visibility:visible!important}}

/* 3. PHONES. The aurora is a 140vw x 52vh layer animated forever: on a touch screen it holds still (the snow, the frost and the crawler still move) */
@media(pointer:coarse){.sr-aurora{animation:none;will-change:auto}}

/* 4. LATENCY. These classes are added by assets/sr-contain.js only, so without it nothing here applies and nothing can stay invisible.
      A picture waits invisible until it has loaded, then fades in over 150 ms on top of its box's ground (the wrapper's own, or --sr-ph, the
      photo's average colour, for Sarah's photo tiles). A section below the fold arrives with a 180 ms opacity + 14 px rise, staggered 70 ms. */
img.sr-img{opacity:0}
img.sr-img.sr-in{opacity:1;transition:opacity .15s ease-out}
.srp__media[style*="--sr-ph"]{background:var(--sr-ph)}
.sr-rv{opacity:0;transform:translate3d(0,14px,0)}
.sr-rv.sr-rv-in{opacity:1;transform:none;transition:opacity .18s ease-out var(--sr-d,0ms),transform .18s ease-out var(--sr-d,0ms)}
@media(prefers-reduced-motion:reduce){.sr-rv{opacity:1;transform:none}.sr-rv.sr-rv-in{transition:none}}
/* anchors (31 Oct 2026): html already reserves the sticky header with scroll-padding-top (110 px, 92 px on phones). Four sections added their own scroll-margin-top on top
   of it (110 / 96 / 95), so a jump to Sarah's posts or the meme studio stopped 220 px below the top with a blank band above. One reserve only. */
html #origin,html #powers,html #arcade,html #reporting-archive,html #kitchen,html #meme-lab,html #merch,html #sarah-fundraiser{scroll-margin-top:0}