/* chokinghazard.org: compact sizing.
   Loads after every other stylesheet. Same content, same order, same colours;
   less vertical space. Remove this file to get the current site back. */

/* ---------- 1. one smaller type scale and spacing rhythm ---------- */
:root{
  --t-h1:clamp(32px,4.1vw,52px);
  --t-h2:clamp(27px,3.2vw,42px);
  --t-h3:clamp(21px,2vw,27px);
  --t-h4:clamp(18px,1.5vw,21px);
  --t-h5:clamp(16px,1.25vw,17.5px);
  --t-lede:clamp(16.5px,1.25vw,18px);
  --t-body:clamp(16px,1.15vw,17px);
  --sec-y:clamp(30px,3vw,42px);
}
/* kicker -> heading -> lede -> content */
.sublede,.sublede.full,.herosub,.subhero-lede,.subhero-lede.full,.feedlede,.triage{margin-top:10px!important}
.pvtop,.twosides,.pvgrid,.lgrid,.rsgrid,.hotgrid,.dlgrid,.newsgrid,.dgrid,.faq,.s2grid,.segsplit,.xpills,
.x-dgrid,.x-ngrid,.tglrow,.forcebox,.x-ctas,.fl-over{margin-top:20px!important}
.kick{margin-bottom:2px}

/* ---------- 2. page headers ---------- */
.subhero,.subhero.x-sub{padding-top:30px!important;padding-bottom:28px!important}
.subhero.x-sub h1{font-size:clamp(32px,4.4vw,56px)!important}
.subhero.x-film h1{font-size:min(54px,3.9vw)!important}
@media(max-width:900px){.subhero.x-film h1{font-size:clamp(30px,8vw,48px)!important}}
.subhero.art{padding-top:28px!important;padding-bottom:26px!important}
.x-notify{margin-top:18px}
.x-nfrm input[type=email]{padding:12px 14px}
.x-notify .xb,.x-ctas .xb{padding:13px 20px}

/* Home opener (lockers) */
.band.b-lockers{min-height:0!important;padding-top:26px!important;padding-bottom:30px!important}
.bandlogo{height:88px;margin-bottom:16px}
@media(max-width:640px){.bandlogo{height:52px;margin-bottom:12px}}
.band h1,.band h2{max-width:24ch}
.band p{margin-top:12px}
.bandsticker{width:clamp(200px,21vw,300px)!important;bottom:52px!important}
@media(max-width:700px){.bandsticker{width:164px!important;bottom:20px!important}}

/* ---------- 3. Home sections ---------- */
/* It starts before college: shorter bars, tighter stat tiles */
figure.sp{padding:20px 22px 16px!important;margin-top:18px!important}
.spcap{padding-bottom:10px!important}
.spaxis,.spbars{height:clamp(190px,21vw,260px)!important}
.spfacts{margin-top:16px!important}
.spf{padding:14px 16px 14px!important}
.spf b{font-size:clamp(32px,3.2vw,44px)!important}
.spf p{margin-top:8px!important}
figure.sp .figsrc{margin-top:12px!important}

/* Less force than opening a can */
.hero.fizz{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
.fbleft,.fbright{padding:14px 16px 12px!important;gap:10px}
.fbcan{aspect-ratio:2.6/1!important}
.fbwarn{padding:10px 14px!important}
.nfrow{padding-top:7px!important;padding-bottom:7px!important}

/* Seconds matter */
.stopwatch,.sw2{margin-top:18px!important;padding-top:18px!important}
.sw2 .swclock{font-size:clamp(52px,6vw,80px)!important}
.sw2top{margin-bottom:12px!important}
.swcall{margin-top:16px!important;padding:14px 18px!important}

/* Myth vs fact rows */
.sec.spineband{padding-bottom:18px!important}
.spinehead{margin-top:8px!important}
.heard,.truth{padding:30px 32px!important}
.rowset .heard,.rowset .truth{padding-bottom:58px!important}   /* leaves a small gap above the See the evidence button */
/* the two column headings match the statements under them, as on the current site */
.spinehead h2,.spinehead h2.t,.heard h3,.truth h3{font-size:clamp(24px,2.9vw,34px)!important}
@media(max-width:879px){.heard,.truth{padding:22px 18px!important}.rowset .heard{padding-bottom:22px!important}}

/* Consent */
.tsq{padding:16px 20px 14px!important}
.stopsig .ssnum{padding:16px 20px!important}
.ssnum b{font-size:clamp(32px,3.4vw,46px)!important}
.ssnum p{margin-top:8px!important}
.consentline{margin-top:22px!important}
.pillarwrap{margin-top:24px!important;padding:24px 24px 18px!important}
.pillarwrap .xpills{margin:14px 0!important}
.p2grid{gap:10px!important}
.p2card{padding:16px 18px 14px!important}
.p2card h4{font-size:clamp(22px,2.2vw,28px)!important;margin-top:10px!important}
.p2card.big h4{font-size:clamp(28px,3vw,38px)!important}

/* It didn't come out of nowhere: exhibit cards keep their full size; only the space above them is tighter */
.feedwrap{margin-top:22px!important}

/* Get medical help band + the medical cards */
.band.b-interv.xshort{padding:28px 0 24px!important}
.sec.doit{padding-top:22px!important}
.x-med .card{padding:20px 22px!important}
.x-med .card h3{margin-bottom:10px!important}
.x-med .card ul{gap:5px!important}
.x-med .xb.lt{margin-top:14px!important}

/* Vibe Check band and Put one up */
.vibe p{margin-top:12px!important}
.putup{padding-top:24px!important;padding-bottom:24px!important}
.putin img{width:190px!important}
@media(min-width:900px){.putin{grid-template-columns:190px 1fr auto!important;gap:36px!important}}
.putin h2{font-size:var(--t-h2)!important}
.putin p{font-size:var(--t-lede)!important;margin-top:8px!important}

/* ---------- 4. Learn More ---------- */
.fqq{padding:15px 4px 15px 18px!important}
.x-dgrid,.x-ngrid{gap:12px!important}
.dtile{min-height:120px!important;padding:16px 18px 44px!important}
.dtile.sm{min-height:110px!important}
.x-spec{padding:22px 18px 14px!important}
.x-spec .x-st{font-size:18px!important;margin-top:8px!important}
.x-spec p.x-com{font-size:15px!important;margin-top:6px!important}
.x-spec .x-sgo{margin-top:14px!important}
.x-thumb{aspect-ratio:2/1!important}
.x-lead{grid-template-columns:1fr 1.15fr!important;gap:22px!important}
.x-lead .x-thumb{aspect-ratio:2.2/1!important}
.rclinksec .w > *{padding-top:16px!important;padding-bottom:16px!important}

/* ---------- 5. Media Ratings ---------- */
/* Rated CH card: keeps its 16:9 movie-screen shape, at a narrower width; everything inside scales with the card */
.screenroom.x-room{padding:26px 0 28px!important}
@media(min-width:701px){
  /* sizes are the current card's, as a share of the card's inner width (1012px at full size) */
  .x-player{max-width:860px;margin:0 auto;container-type:inline-size;padding:min(43px,calc(5vw - 3px)) min(69px,calc(8vw - 5px))!important}
  .x-rk1{font-size:1.78cqi!important}
  .x-rmid{gap:5.5cqi!important;margin-top:2.77cqi!important}
  .x-rbox{border-width:.69cqi!important}
  .x-rbox b{font-size:18.5cqi!important}
  .x-rk2{font-size:1.85cqi!important;margin-top:1.71cqi!important}
  .x-radv{border-left-width:.59cqi!important;padding-left:4.55cqi!important}
  .x-radv p{font-size:2.56cqi!important}
  .x-rby{font-size:1.09cqi!important;margin-top:2.77cqi!important}
  .x-play{width:7.1cqi!important;height:7.1cqi!important;right:4.25cqi!important;top:3.95cqi!important}
}

.rc-filters{margin-top:16px!important}
.rc-group + .rc-group{margin-top:34px!important}
.rc-gh{font-size:var(--t-h4)!important}
/* the title cards and their covers stay at full size; only the space between groups is tighter */

/* ---------- 6. Resources ---------- */
.rsgrid .card.alarm.symcard::before{margin-bottom:18px!important}
.rsgrid .card{padding-top:22px;padding-bottom:20px}
.rsgrid .card.alarm.symcard{padding:0 0 18px!important}
.symcard .alead{margin:2px 0 10px!important}
.symcard ul{gap:4px!important}
.hot{padding:16px 18px 14px!important}
.hot h3{margin-bottom:10px!important}
.hot .avail{padding-top:10px!important}
.dlthumb{aspect-ratio:16/10!important;padding:12px!important}
.dl .dlin{padding:14px 16px!important}

/* ---------- 7. Short Film ---------- */
#about,#segment,#screen{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}

/* ---------- 8. news and question pages ---------- */
.artbody{padding-top:26px!important}
.artbody p{margin-bottom:.85em}

/* ---------- 9. footer ---------- */
footer{padding:36px 0 26px!important}
.ftop{gap:28px}
@media(min-width:820px){.ftop{column-gap:28px}}
@media(min-width:1000px){.ftop{column-gap:3px}}
.fleft .footsticker{width:140px!important}
.fnav a{padding:5px 0!important}
.fsites{margin-top:26px!important}
.fsite{padding-top:16px!important;padding-bottom:16px!important}
.fsite em{margin-top:8px!important}
.fbot{margin-top:22px!important;padding-top:16px!important}
/* hazard tape: same artwork at 3/4 size */
.haztape{height:44px!important;background-size:616px 44px!important;animation-name:hazrollc!important}
@keyframes hazrollc{from{background-position-x:0}to{background-position-x:-1232px}}

/* footer labels line up with the bottom of the SafeBAE logo at this sticker size */
@media(min-width:820px){
  .fleft{grid-template-rows:76px auto!important}
  .ftop .fnav{margin-top:41px!important}
}
/* Short Film livestream: at this size the heading fits on one line and runs across the frame's column,
   so the frame starts level with the first paragraph instead of being pulled up beside the heading */
@media(min-width:900px){#segment .fl-pn{margin-top:0!important}}

/* ---------- 10. resizing: the page holds its shape as the window narrows ---------- */
/* Home header: the locker photo keeps one size below 1100px wide, so narrowing the window crops it
   instead of zooming it in and out; above that it widens with the window. The two colour layers still fill the band. */
.band.b-lockers::before{background-size:100% 100%,100% 100%,max(100%,1100px) auto,max(100%,1100px) auto!important}
/* the paragraph stops short of the sticker instead of running under it (the sticker sits at the band's bottom right) */
@media(min-width:701px){
  .band.b-lockers .w > p:not(.kick){max-width:min(78ch,calc(100vw - clamp(16px,4.5vw,70px) - clamp(200px,21vw,300px) - 76px))!important}
}
/* phones: the sticker sits under the text; a little more room so its tilted corner clears the last line */
@media(max-width:700px){.band.b-lockers .w{padding-bottom:100px!important}}

/* Chart: the filter buttons and the colour key keep one arrangement per width range */
.lgs.w{width:15px!important;max-width:none!important;padding:0!important;margin:0!important}   /* the "w" swatch was picking up the page container's padding */
@media(max-width:1000px){.tglrow .legend{flex-basis:100%;margin:0!important}}                 /* key drops to its own line, left-aligned */
@media(max-width:600px){
  .tglrow{gap:10px!important}
  .tglrow .tgl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .tglrow .tbtn{padding:12px 6px;letter-spacing:.08em;text-align:center}
}
/* Chart: four number tiles in a row only when each has room; two by two below 1100px; one per row on phones */
@media(max-width:1100px){.spfacts{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.spfacts{grid-template-columns:minmax(0,1fr)!important}.spf{padding:14px 16px 14px!important}}
/* Seconds matter, phones: the clock sits above its stage text so the text gets the full width */
@media(max-width:600px){.sw2top{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}}
/* Media Ratings, 641–900px: each title keeps its cover on the left at its usual 260px, instead of switching
   early to the phone layout (a small cover centred in a wide empty frame above the card) */
@media(min-width:641px) and (max-width:900px){
  .rc-item:not(.full){--cw:260px;grid-template-columns:var(--cw) minmax(0,1fr)!important}
  .rc-item:not(.full) .rc-cover{display:block!important;padding:0!important;border-right:0!important;border-bottom:5px solid var(--hazink)!important}
  .rc-item:not(.full) .rc-cv{position:absolute!important;inset:0!important;width:auto!important;aspect-ratio:auto!important}
  .rc-item:not(.full) .rc-card{min-height:calc((var(--cw) - 5px) * 1.5 + 10px)!important}
}
/* Resources, "What to expect at the ER": five side-by-side columns only from 1280px; between 760 and 1279px
   each step is a row (its label beside its text) so nothing is squeezed and no step is left alone in a row */
@media(min-width:760px) and (max-width:1279px){
  #er .steps{grid-template-columns:minmax(0,1fr)!important}
  #er .step{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0 24px;align-items:start;padding:16px 18px 6px}
  #er .step b{margin:2px 0 0}
}
/* Resources, posters: two across down to 440px, so phones-in-landscape and small tablets don't get one huge poster per row */
@media(min-width:440px) and (max-width:699px){.dlgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* Footer link groups match each other at every width (from 1000px they already sit centred over the boxes) */
@media(max-width:819px){   /* stacked footer: both groups use the same two equal columns and a full-width rule */
  .ftop .fnav-site,.ftop .fnav-res{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:stretch!important;column-gap:24px!important;width:auto!important}
  .ftop .fnav-site a,.ftop .fnav-res a{white-space:normal!important}
}
@media(min-width:820px) and (max-width:999px){   /* beside the logo block: two equal columns, one link per line in each */
  .ftop{grid-template-columns:1.7fr 1fr 1fr!important}
  .ftop .fnav-site,.ftop .fnav-res{grid-template-columns:minmax(0,1fr)!important}
  .ftop .fnav-site a,.ftop .fnav-res a{white-space:normal!important}
}
/* Media Ratings, 641–900px in Compact: the cover sits beside the card here too, so the back sits over the front's box */
@media(min-width:641px) and (max-width:900px){.rc-item:not(.full) .rc-back{position:absolute;inset:0}}