/* chokinghazard.org: design review changes (loads after revised.css) */

/* ---------- 01 contrast: small text on light backgrounds ---------- */
:root{--ink3:#4f6f78}
.kick,.case,.fqtag,.nk,.dtk,.step b,.truth .tagline,.evsrc a,.nlink{color:#1d5a66}
.wallband.feedband .kick{color:#1d5a66}
.why .kick,.dark .kick,.voices .kick,.vibe .kick,.subhero .kick,.screenroom .kick,.band .kick,.kick.lite{color:var(--mint)}
.hero.fizz .kick{color:var(--yellow)!important}
.fbot,.fbot3{color:#b9d3d8!important}
.vibe{background-color:#1d5a66}

/* ---------- shared: header buttons ---------- */
.xb{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:17px 24px;border:3px solid #08171c;background:var(--mint);color:#08171c;box-shadow:4px 4px 0 rgba(0,0,0,.55);
  transition:transform .12s ease,box-shadow .12s ease,background .12s;cursor:pointer;white-space:nowrap}
.xb:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.55)}
.xb:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.55)}
.xb.s2{background:transparent;color:#fff;border-color:#fff;box-shadow:none}
.xb.s2:hover{background:#fff;color:var(--slate);transform:none}
.x-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
@media(max-width:560px){.x-ctas .xb{width:100%;white-space:normal;text-align:center}}

/* ---------- 06/07 subpage headers ---------- */
.subhero.x-sub{padding:70px 0 64px}
.subhero.x-sub h1{font-size:clamp(40px,5.6vw,76px);line-height:.92;max-width:none;width:100%}
.subhero.x-sub .subhero-lede.full{max-width:none;width:100%}
.x-util{font-size:clamp(26px,2.6vw,36px)!important;line-height:1!important;max-width:none!important;letter-spacing:-.01em}

/* ---------- 07 short film: sign-up in the header ---------- */
.subhero.x-film h1{font-size:min(66px,4.55vw);white-space:nowrap}
@media(max-width:900px){.subhero.x-film h1{font-size:clamp(34px,9vw,60px);white-space:normal}}
.x-notify{margin-top:30px;width:100%}
.x-notify label{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:10px}
.x-nfrm{display:flex;gap:14px;width:100%}
.x-nfrm input[type=email]{flex:1;min-width:0;padding:16px;font:400 17px/1 var(--serif);border:3px solid #fff;background:#12303a;color:#fff}
.x-nfrm input[type=email]::placeholder{color:#9fc0c7}
@media(max-width:560px){.x-nfrm{flex-direction:column}}

/* ---------- 07 short film: rating card is the player's opening frame ---------- */
.screenroom.x-room{padding:46px 0 50px}
.x-player{position:relative;aspect-ratio:16/9;background:var(--yellow);border:5px solid var(--hazink);display:flex;flex-direction:column;justify-content:center;padding:5% 8%}
.x-player::after{content:"";position:absolute;inset:12px;border:3px solid var(--hazink);pointer-events:none}
.x-rate{position:relative;z-index:1;color:var(--hazink)}
.x-rk1{display:block;font:700 clamp(11px,1.3vw,18px)/1 var(--mono);letter-spacing:.3em;text-transform:uppercase}
.x-rmid{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;margin-top:clamp(14px,2vw,28px)}
.x-rstack{display:flex;flex-direction:column;align-items:center}
.x-rbox{display:inline-block;border:clamp(4px,.5vw,7px) solid var(--hazink);padding:.05em .18em .09em}
.x-rbox b{display:block;font:900 clamp(64px,13vw,190px)/.84 var(--disp);letter-spacing:-.03em}
.x-rk2{display:block;margin-top:clamp(8px,1.2vw,18px);text-align:center;font:700 clamp(10px,1.3vw,19px)/1 var(--mono);letter-spacing:.36em;text-transform:uppercase}
.x-radv{border-left:clamp(3px,.45vw,6px) solid var(--hazink);padding-left:clamp(16px,3.2vw,48px)}
.x-radv p{margin:0;font:700 clamp(12px,1.8vw,26px)/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.x-rby{display:block;margin-top:clamp(12px,2vw,28px);text-align:right;font:700 clamp(8px,.8vw,11px)/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.x-play{position:absolute;z-index:2;right:clamp(18px,3vw,44px);top:clamp(18px,3vw,40px);width:clamp(44px,5vw,74px);height:clamp(44px,5vw,74px);border-radius:50%;background:var(--hazink);display:flex;align-items:center;justify-content:center}
.x-play::before{content:"";border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--yellow);margin-left:5px;transform:scale(.8)}
@media(max-width:700px){
  .x-player{aspect-ratio:auto;padding:34px 24px 28px}
  .x-rmid{grid-template-columns:1fr;justify-items:start}
  .x-rstack{align-items:flex-start}
  .x-radv{border-left:0;border-top:4px solid var(--hazink);padding:14px 0 0}
  .x-play{display:none}
}

/* ---------- 13 exhibit feed: arrows in line with the heading ---------- */
.x-fhead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.x-fhead h2{margin:0}
.x-farrows{display:flex;gap:8px;flex:none;padding-bottom:6px}
.x-fhead h2{flex:1 1 auto;min-width:0}
.x-ib{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:3px solid var(--hazink);
  box-shadow:3px 3px 0 var(--hazink);font:700 24px/1 var(--mono);color:var(--hazink);cursor:pointer;transition:transform .1s,box-shadow .1s,background .1s}
.x-ib:hover{background:var(--yellow);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hazink)}
.x-ib:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hazink)}
.x-ib:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media(max-width:560px){.x-fhead{flex-direction:column;align-items:flex-start;gap:14px}.x-ib{width:46px;height:46px;font-size:20px}}

/* ---------- 14 medical help: two columns, same height ---------- */
.x-med{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}
.x-medl,.x-medr{display:flex;flex-direction:column;gap:6px}
.x-med .card{margin:0}
.x-medl>:last-child,.x-medr>:last-child{flex:1 1 auto}
.x-911{background:var(--hazink);color:var(--yellow);padding:22px 28px}
.x-911 b,.x-later b{display:block;font:900 22px/1.1 var(--disp);text-transform:uppercase;margin-bottom:8px}
.x-911 p{margin:0;font:500 16.5px/1.55 var(--serif);color:var(--yellow)}
.x-later{background:#fff;border:3px solid var(--hazink);padding:20px 26px}
.x-later b{font-size:19px;color:var(--ink)}
.x-later p{margin:0;font:400 16.5px/1.55 var(--serif);color:var(--ink)}
.x-med .xb.lt{margin-top:22px;border-color:var(--hazink);box-shadow:4px 4px 0 var(--hazink)}
@media(max-width:900px){.x-med{grid-template-columns:1fr}.x-medl>:last-child,.x-medr>:last-child{flex:none}}

/* ---------- 17 learn more: one card, built like the Force Facts label ---------- */
.x-dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}
.x-ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.x-spec{position:relative;display:flex;flex-direction:column;background:#fff;border:3px solid #000;padding:26px 20px 18px;text-decoration:none;color:var(--ink);transition:background .15s,transform .15s}
.x-spec::before{content:"";position:absolute;left:12px;right:12px;top:12px;height:8px;background:#000}
.x-spec:hover{background:var(--yellow);transform:translateY(-2px)}
.x-spec:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.x-sk{display:block;margin-top:10px;padding-bottom:10px;border-bottom:1px solid #000;font:700 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#1d5a66}
.x-spec:hover .x-sk{color:var(--hazink)}
.x-spec b,.x-spec .x-st{display:block;margin:12px 0 0;font:900 20px/1.12 var(--disp);text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
.x-spec .x-by{margin:10px 0 0;font:600 13px/1.4 var(--mono);color:var(--ink2)}
.x-spec p.x-com{margin:10px 0 0;font:400 16px/1.5 var(--serif);color:var(--ink2)}
.x-sgo{margin-top:auto;padding-top:12px;border-top:4px solid #000;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.x-spec .x-sgo{margin-top:22px}
.x-spec>.x-sgo:last-child{margin-top:auto}
.x-spec .x-pad{flex:1 1 auto;min-height:18px}
.x-thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;margin:12px 0 2px;background:repeating-linear-gradient(-45deg,#ececec 0 10px,#f7f7f7 10px 20px);border:1px solid #000;font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#6d7f85}
.x-lead{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start;background:var(--aqua)}
.x-lead .x-thumb{margin:10px 0 0}
.x-lead .x-st{font-size:clamp(22px,2.4vw,30px)}
.x-lead>div{display:flex;flex-direction:column;height:100%}
@media(max-width:1000px){.x-dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.x-dgrid,.x-ngrid{grid-template-columns:1fr}.x-lead{grid-template-columns:1fr;gap:6px}}

/* ---------- 19 resources: guide boxes, two columns, same height ---------- */
.x-guides{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:3px;align-items:stretch}
.x-gcol{display:flex;flex-direction:column;gap:3px}
.x-gcol .card{margin:0}
.x-gcol>.card:last-child{flex:1 1 auto}
@media(max-width:900px){.x-guides{grid-template-columns:1fr}.x-gcol>.card:last-child{flex:none}}