/* Short Film page: Rated CH and Rated BAE */
.rcsec{background:var(--slate);color:#fff;padding-top:64px!important;padding-bottom:72px!important}
.rcsec h2{color:#fff;max-width:none}
.rcsec .kick{color:var(--mint)}
.rcsec .sublede.full{color:#c3dde2;max-width:none;width:100%}

.rc-filters{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 28px}
.rc-f{font:700 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;cursor:pointer;
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);transition:background .12s,color .12s,border-color .12s}
.rc-f:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.rc-f[aria-pressed="true"]{background:var(--yellow);color:var(--hazink);border-color:var(--yellow)}
.rc-f:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

.rc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.rc-card{perspective:1400px;min-height:380px;display:flex;min-width:0}
.rc-card.wide{grid-column:span 2}
.rc-card.full{grid-column:1/-1;min-height:0}
.rc-card[hidden]{display:none}
.rc-in{position:relative;flex:1;min-width:0;display:grid;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:var(--hazink);
  transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.9,.3,1)}
.rc-card.flipped .rc-in{transform:rotateY(180deg)}
.rc-in:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
.rc-front,.rc-back{grid-area:1/1;position:relative;display:flex;flex-direction:column;padding:30px 30px 24px;
  background:var(--yellow);border:5px solid var(--hazink);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.rc-front::after,.rc-back::after{content:"";position:absolute;inset:8px;border:2px solid var(--hazink);pointer-events:none}
.rc-back{transform:rotateY(180deg);background:#fff8cc}

.rc-top{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
.rc-rated{font:700 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase}
.rc-box{font:900 34px/.85 var(--disp);border:4px solid var(--hazink);padding:3px 8px 5px;letter-spacing:-.02em}
.rc-stamp{white-space:nowrap;font:900 12px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--hazink);background:var(--coral);
  border:3px solid var(--hazink);padding:7px 10px 6px;transform:rotate(-4deg);margin-left:auto}
.rc-t{display:block;margin-top:24px;font:900 clamp(26px,2.3vw,34px)/.98 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.rc-m{display:block;margin-top:10px;padding-bottom:14px;border-bottom:3px solid var(--hazink);font:700 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rc-s{display:block;margin-top:14px;font:500 18px/1.5 var(--serif)}
.rc-q{display:block;margin-top:20px;font:500 clamp(20px,1.9vw,26px)/1.45 var(--serif);font-style:italic;padding-left:22px;border-left:6px solid var(--hazink)}
.rc-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rc-two span{display:block;padding-top:10px;border-top:2px solid var(--hazink)}
.rc-flip{margin-top:auto;padding-top:20px;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.rc-flip i{font-style:normal;font-size:16px}
.rc-in:hover .rc-flip{text-decoration:underline;text-underline-offset:4px}
.rc-bt{display:block;font:900 22px/1.05 var(--disp);text-transform:uppercase;padding-bottom:12px;border-bottom:3px solid var(--hazink)}
.rc-bs{display:block;margin-top:14px;font:500 18px/1.55 var(--serif)}
.rc-src{display:block;margin-top:16px;font:500 13.5px/1.5 var(--serif);font-style:italic}

.rc-honest{margin-top:30px;background:var(--mint);color:var(--hazink);border:5px solid var(--hazink);padding:26px 30px 22px;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.rc-honest h3{margin:0;font-size:clamp(22px,2.2vw,30px);color:var(--hazink)}
.rc-honest ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.rc-honest li{border-top:3px solid var(--hazink);padding-top:10px;font:500 17px/1.45 var(--serif)}

@media (prefers-reduced-motion:reduce){.rc-in{transition:none}}
@media (max-width:1000px){.rc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rc-honest ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .rc-grid{grid-template-columns:minmax(0,1fr)}.rc-card.wide,.rc-card.full{grid-column:auto}.rc-stamp{white-space:normal}.rc-q{font-size:18px;padding-left:14px}.rc-two{grid-template-columns:1fr;gap:10px}
  .rc-honest ul{grid-template-columns:1fr}.rc-card{min-height:340px}
  .rc-stamp{margin-left:0}
}

/* Rated BAE: SafeBAE's positive rating */
.rc-card.bae .rc-front{background:var(--teal);color:#fff}
.rc-card.bae .rc-back{background:var(--aqua);color:var(--hazink)}
.rc-card.bae .rc-front::after{border-color:rgba(255,255,255,.7)}
.rc-card.bae .rc-box{border-color:var(--mint);color:var(--mint)}
.rc-card.bae .rc-m{border-bottom-color:var(--mint)}
.rc-card.bae .rc-q{border-left-color:var(--mint)}
.rc-card.bae .rc-stamp{background:var(--mint);color:var(--hazink)}
.rc-key{background:var(--teal)!important;color:#fff!important}
.rc-key h3{color:#fff!important}
.rc-key li{border-top-color:var(--mint)!important}
.rc-key li b{display:block;font:900 17px/1.1 var(--disp);text-transform:uppercase;color:var(--mint);margin-bottom:6px}
.rc-f.good[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--hazink)}

/* Stamp sits in the card's top-right corner so every rating row, CH or BAE, is the same height */
.rc-stamp{position:absolute;z-index:1;top:34px;right:26px;margin:0!important;max-width:calc(100% - 222px);white-space:normal;text-align:center;line-height:1.1}
@media (max-width:640px){.rc-stamp{top:30px;right:20px;max-width:calc(100% - 212px);font-size:11px}}

/* Flip: some browsers (Safari) show rotated or positioned children of the front mirrored
   through the back. Hide each face at the midpoint of the flip, and hide the stamp's back face. */
.rc-front,.rc-back{transition:visibility 0s linear .3s}
.rc-card:not(.flipped) .rc-back{visibility:hidden}
.rc-card.flipped .rc-front{visibility:hidden}
.rc-front *,.rc-back *{-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){.rc-front,.rc-back{transition:none}}

/* Learn More: one card that links to the ratings on the Short Film page */
.rclinksec{padding-top:0!important}
.rc-link{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;text-decoration:none;color:#fff;
  background:var(--slate);border:5px solid var(--hazink);padding:26px 30px;box-shadow:6px 6px 0 rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s}
.rc-link:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.35)}
.rc-link:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.rc-link .rc-pair{display:flex;gap:10px}
.rc-link .rc-box{font:900 34px/.85 var(--disp);padding:3px 8px 5px;border:4px solid var(--hazink);letter-spacing:-.02em}
.rc-link .rc-box.ch{background:var(--yellow);color:var(--hazink)}
.rc-link .rc-box.bae{background:var(--teal);color:var(--mint);border-color:var(--mint)}
.rc-link b{display:block;font:900 clamp(20px,2vw,28px)/1.05 var(--disp);text-transform:uppercase;color:#fff}
.rc-link span.rc-lt{display:block;margin-top:8px;font:400 17px/1.5 var(--serif);color:#c3dde2}
.rc-link .rc-go{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--hazink);background:var(--mint);border:3px solid var(--hazink);padding:14px 18px}
@media (max-width:760px){.rc-link{grid-template-columns:1fr;gap:16px}.rc-link .rc-go{justify-self:start}}

/* Screen and page groups */
.rc-group + .rc-group{margin-top:56px}
.rc-group[hidden]{display:none}
.rc-gh{display:flex;align-items:center;gap:18px;margin:0 0 22px;font:900 clamp(22px,2.2vw,30px)/1 var(--disp);text-transform:uppercase;color:#fff;letter-spacing:-.01em}
.rc-gh::after{content:"";flex:1;height:3px;background:rgba(255,255,255,.35)}
.rc-gl{margin:-8px 0 22px;font:400 18px/1.5 var(--serif);color:#c3dde2;max-width:none}

/* Reach line on the back of book cards */
.rc-reach{display:block;margin-top:14px;padding-top:10px;border-top:2px solid var(--hazink);font:500 15.5px/1.45 var(--serif)}
.rc-reach b{display:block;margin-bottom:4px;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}


/* Tags: a tag never gets narrower than its longest word. When the card is too narrow
   for the rating and the tag on one line, the tag drops to its own line under the rating. */
.rc-front{container-type:inline-size}
.rc-stamp{width:max-content;max-width:calc(100% - 236px)}
@container (max-width:300px){
  .rc-top{flex-wrap:wrap}
  .rc-top::after{content:"";order:2;flex-basis:100%;height:0}
  .rc-stamp{position:static;order:3;max-width:100%;margin:12px 0 0 2px!important;transform:rotate(-3deg);text-align:left}
}

/* Covers joined to cards, warning sticker and BAE stamp */
/* Each title: the full cover on the left and its card on the right, in one frame. Two titles per row on wide screens. */
.rc-grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;align-items:start}
.rc-item.full{grid-column:1/-1}
.rc-item{--cw:310px;display:grid;grid-template-columns:var(--cw) minmax(0,1fr);align-items:stretch;min-width:0;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.rc-item[hidden]{display:none}
/* the card is at least as tall as the full 2:3 cover (cover width minus its left border, plus top and bottom borders) */
.rc-item .rc-card{min-height:calc((var(--cw) - 5px) * 1.5 + 10px)}
.rc-item .rc-front,.rc-item .rc-back{box-shadow:none}
.rc-cover{position:relative;display:block;border:5px solid var(--hazink);border-right:0;background:var(--hazink);overflow:hidden}
.rc-cv{position:absolute;inset:0;display:block}
.rc-cimg{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
/* CH: the warning sticker, slapped onto the cover. Its spot and tilt come from
   ratedch-stickers (below): one of five spots, picked from the cover's file name. */
.mk-ch{position:absolute;z-index:2;width:62%;height:auto;left:var(--x,38%);top:var(--y,17%);
  transform:translate(-50%,-50%) rotate(var(--r,-5deg));filter:drop-shadow(2px 3px 0 rgba(13,13,13,.6))}
/* BAE: ink stamp; the image is a mask so the ink colour can change per cover */
.mk-stamp{position:absolute;z-index:2;width:58%;aspect-ratio:500/320;left:18px;bottom:18%;background:var(--mint);transform:rotate(-10deg);
  -webkit-mask:url(../img/rated/bae-stamp.webp) center/contain no-repeat;mask:url(../img/rated/bae-stamp.webp) center/contain no-repeat}
.mk-stamp.ink-dark{background:var(--logo);mix-blend-mode:multiply;bottom:auto;top:26%;left:20%}
.mk-stamp.at-galaxy-brain{width:46%;left:auto;right:16px;bottom:auto;top:57%}
.rc-item .rc-t{font-size:clamp(22px,1.7vw,26px);margin-top:18px}
.rc-item .rc-front{padding:26px 24px 20px}
.rc-item .rc-m{font-size:11px}
.rc-item.full .rc-t{font-size:clamp(28px,2.6vw,40px)}
/* back of the card: the scene first, then why it's rated */
.rc-item .rc-back{padding:26px 24px 20px}
.rc-item .rc-bt{font-size:21px;padding-bottom:12px}
.rc-scene{display:block;margin-top:12px;font:600 16.5px/1.45 var(--serif)}
.rc-item .rc-bs{margin-top:14px;font-size:18px;line-height:1.5}
.rc-item .rc-s{font-size:17px;line-height:1.5}
.rc-item .rc-reach{margin-top:14px;font-size:15.5px;line-height:1.45}
.rc-item .rc-src{margin-top:14px;font-size:13.5px;line-height:1.45}
.rc-item .rc-back .rc-flip{padding-top:12px}
.rc-item .rc-q{font-size:clamp(18px,1.6vw,22px)}
@media (max-width:1279px){.rc-grid2{grid-template-columns:minmax(0,1fr)}.rc-item.full{grid-column:auto}.rc-item{--cw:260px}}
@media (max-width:900px){
  /* narrow screens: the cover becomes the top of the same frame, at full size */
  .rc-item{grid-template-columns:minmax(0,1fr)}
  .rc-cover{border-right:5px solid var(--hazink);border-bottom:0;display:flex;justify-content:center;padding:20px 0}
  .rc-cv{position:relative;inset:auto;width:min(240px,62%);aspect-ratio:2/3}
  .rc-item .rc-card{min-height:0}
}

/* Two titles per row down to 1000px wide. Below about 1500px the covers, type and padding
   shrink smoothly with the screen; at 1000px it switches to one title per row. */
@media (min-width:1000px){
  .rc-grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:min(34px,calc(4px + 2vw))}
  .rc-item.full{grid-column:1/-1}
  .rc-grid2 .rc-item{--cw:min(310px,calc(4px + 20vw))}
  .rc-item .rc-front,.rc-item .rc-back{padding:min(26px,calc(4px + 1.5vw)) min(24px,calc(2px + 1.4vw)) min(20px,calc(3px + 1.2vw))}
  .rc-item .rc-box{font-size:min(34px,calc(6px + 2vw))}
  .rc-item .rc-rated{font-size:min(11px,calc(1.5px + .8vw))}
  .rc-item .rc-stamp{font-size:min(12px,calc(3px + .62vw))}
  .rc-item .rc-t{font-size:min(26px,calc(3px + 1.5vw));margin-top:min(18px,calc(2px + 1vw))}
  .rc-item .rc-m{font-size:min(11px,calc(1.5px + .8vw))}
  .rc-item .rc-s{font-size:min(17px,calc(4px + 1vw))}
  .rc-item .rc-bt{font-size:min(21px,calc(3px + 1.35vw))}
  .rc-item .rc-bs{font-size:min(18px,calc(4.5px + 1vw))}
  .rc-item .rc-reach{font-size:min(15.5px,calc(3.5px + .95vw))}
  .rc-item .rc-flip{font-size:min(11px,calc(1.5px + .8vw))}
  .rc-item.full .rc-t{font-size:min(40px,calc(6px + 2vw))}
  .rc-item .rc-q{font-size:min(22px,calc(5px + 1.15vw))}
}
@media (max-width:1279px) and (min-width:1000px){
  .rc-item .rc-front::after,.rc-item .rc-back::after{inset:6px}
  .rc-item .rc-box{border-width:3px;padding:2px 6px 4px}
  .rc-item .rc-stamp{padding:6px 7px 5px}
  .rc-item .rc-m{letter-spacing:.07em;margin-top:7px;padding-bottom:9px}
  .rc-item .rc-s{line-height:1.42;margin-top:9px}
  .rc-item .rc-bt{padding-bottom:9px}
  .rc-item .rc-bs,.rc-item .rc-reach{margin-top:10px}
  .rc-item .rc-flip{padding-top:10px}
}

/* Standalone ratings page */
.subhero.x-rated h1{font-size:min(66px,4.55vw);white-space:nowrap}
@media(max-width:900px){.subhero.x-rated h1{font-size:clamp(34px,9vw,60px);white-space:normal}}