/* Scared Stiff — composition.
   How the page's existing art is placed, sized and paired. Loaded after guide.css,
   library-upgrades.css, scared-v3.css, guide-navigation.css and shot-map.css.
   Palette and type come from scared-v3.css; nothing here adds a colour or a font.
   The gutter matches the running column (main is 1240px with 40px padding). */

body.scared{--scared-gutter:max(40px,calc((100vw - 1240px) / 2 + 40px))}

/* ---------- 1. Hero: the pinup runs the full width; the title rises out of its fog ---------- */
body.scared .opening.cinematic{overflow:visible}
body.scared .opening.cinematic .art{width:100%;max-width:none;height:clamp(420px,66vh,700px);max-height:none;
  object-fit:cover;object-position:62% 18%;margin:0;
  -webkit-mask-image:linear-gradient(#000 42%,transparent 92%);mask-image:linear-gradient(#000 42%,transparent 92%)}
body.scared .opening.cinematic .intro{position:relative;margin-top:-120px;padding-top:0}
@media (max-width:640px){
  body.scared .opening.cinematic .art{height:clamp(360px,58vh,480px);object-position:70% 20%}
  body.scared .opening.cinematic .intro{margin-top:-90px;padding-top:0}
}

/* ---------- 2. Act I: a full-width title card; the word overlaps the picture's faded edge ---------- */
body.scared #act-learn{margin-top:120px}
body.scared #act-learn>a{width:100%;max-width:none;margin:0}
body.scared #act-learn img{width:100%;height:clamp(440px,74vh,820px);object-fit:cover;object-position:50% 28%;
  -webkit-mask-image:linear-gradient(#000 55%,transparent 93%);mask-image:linear-gradient(#000 55%,transparent 93%)}
body.scared #act-learn figcaption{position:relative;width:auto;max-width:none;margin:-104px 0 0;padding:0 var(--scared-gutter);text-align:left}

/* ---------- 3. Acts II and III: split spreads, the picture bleeding off one edge ---------- */
body.scared #act-plan,body.scared #act-finish{display:grid;align-items:center;gap:0 clamp(32px,4vw,64px);margin-top:170px}
body.scared #act-plan{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
body.scared #act-finish{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
body.scared #act-plan>a,body.scared #act-finish>a{width:100%;max-width:none;margin:0;grid-row:1}
body.scared #act-plan>a{grid-column:1}
body.scared #act-finish>a{grid-column:2}
body.scared #act-plan img,body.scared #act-finish img{width:100%;height:clamp(420px,72vh,760px);object-fit:cover}
body.scared #act-plan img{object-position:82% 50%}
body.scared #act-finish img{object-position:50% 30%}
body.scared #act-plan figcaption,body.scared #act-finish figcaption{grid-row:1;width:auto;max-width:none;margin:0;padding:24px 0;text-align:left}
body.scared #act-plan figcaption{grid-column:2;padding-right:var(--scared-gutter)}
body.scared #act-finish figcaption{grid-column:1;padding-left:var(--scared-gutter)}
body.scared #act-plan strong,body.scared #act-finish strong{font-size:clamp(64px,7.6vw,112px)}
body.scared #act-learn figcaption p,body.scared #act-plan figcaption p,body.scared #act-finish figcaption p{margin-left:0;margin-right:0}
body.scared #act-learn .act-toc,body.scared #act-plan .act-toc,body.scared #act-finish .act-toc{justify-content:flex-start}
@media (max-width:900px){
  body.scared #act-learn img{height:clamp(320px,56vh,520px)}
  body.scared #act-learn figcaption{margin-top:-72px}
  body.scared #act-plan,body.scared #act-finish{grid-template-columns:1fr;gap:0;margin-top:110px}
  body.scared #act-plan>a,body.scared #act-finish>a{grid-column:1;grid-row:1}
  body.scared #act-plan figcaption,body.scared #act-finish figcaption{grid-column:1;grid-row:2;padding:40px var(--scared-gutter) 0}
  body.scared #act-plan img,body.scared #act-finish img{height:clamp(300px,52vh,480px)}
  body.scared #act-plan img{object-position:70% 50%}
}

/* ---------- 4. The playfield: a shot map, wider than the text column. The table in the
   centre, the shots on its left down the left and on its right down the right, each
   with the piece of the table it names. ---------- */
body.scared section.bleed>.shot-map{max-width:none;margin:36px 0 40px}
@media (min-width:1360px){body.scared section.bleed>.shot-map{margin-inline:-80px}}
body.scared .shot-map{gap:32px}
@media (min-width:1101px){body.scared .shot-map{grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(240px,300px)}}
@media (max-width:1100px){body.scared .shot-map{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:700px){body.scared .shot-map{grid-template-columns:1fr}}
body.scared .shot-map__field{top:calc(var(--guide-reader-header,64px) + var(--guide-reader-height,56px) + 16px)}
body.scared .shot-map__field img{border-radius:8px;border:0;box-shadow:none}
body.scared .shot-map__field figcaption{padding:14px 0 0;font:14px/1.6 'Arial Narrow',Arial,sans-serif;color:var(--muted)}
body.scared .shot-map__field figcaption a{display:inline;min-height:0}
body.scared .shot-map__side{gap:0}
body.scared .shot-map .shot{border-top:1px solid var(--line);border-bottom:0;padding:16px 0 10px;margin:0}
body.scared .shot-map .shot:first-child{border-top:0;padding-top:0}
body.scared .shot-map .shot summary{font-size:18px;line-height:1.35;padding:0 0 10px;min-height:0}
body.scared .shot-map .shot p{font-size:15px;line-height:1.55;padding-top:0;margin:0 0 8px}
body.scared .shot-map .shot-crop{margin:2px 0 12px;border-radius:6px;border:1px solid var(--line)}
body.scared #shots>.note{margin-top:8px}
@media (max-width:1100px){body.scared .shot-map__side{gap:0}}
@media (max-width:700px){body.scared .shot-map .shot-map__side--right .shot:first-child{border-top:1px solid var(--line);padding-top:16px}}

/* ---------- 5. Coffin or crate: each multiball article opens on the thing it aims at ---------- */
body.scared #first-ball .shot-crop{margin:4px 0 18px;border-radius:6px;border:1px solid var(--line)}

/* ---------- 6. The Spider wheel, small, beside the heading that discusses it ---------- */
body.scared #spider .section-heading{grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:center}
body.scared .spider-marker{margin:0;width:250px;justify-self:end;text-align:center}
body.scared .spider-marker img{display:block;width:220px;height:220px;margin:0 auto;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
body.scared .spider-marker figcaption{margin:12px 0 0;font:13px/1.5 'Arial Narrow',Arial,sans-serif;color:var(--muted)}
@media (max-width:700px){
  body.scared #spider .section-heading{grid-template-columns:1fr;gap:20px}
  body.scared .spider-marker{width:auto;justify-self:start;display:flex;align-items:center;gap:16px;text-align:left}
  body.scared .spider-marker img{width:120px;height:120px;margin:0;flex:none}
  body.scared .spider-marker figcaption{margin:0;max-width:26ch}
}

/* ---------- 7. The editorial plate: a full-width spread; the caption sits in its fog ---------- */
body.scared .scared-practical-art{display:block;position:relative;width:100vw;max-width:none;margin:150px 0 150px calc(50% - 50vw);
  background:none;border:0;border-radius:0;box-shadow:none;overflow:hidden}
body.scared .scared-practical-art a{display:block;width:100%}
body.scared .scared-practical-art img{display:block;width:100%;height:min(80vh,calc(100vw * .56));max-height:none;object-fit:cover;object-position:50% 40%}
body.scared .scared-practical-art figcaption{position:absolute;inset:0 auto 0 0;width:min(52%,680px);display:flex;flex-direction:column;justify-content:center;
  padding:40px 180px 40px var(--scared-gutter);
  background:linear-gradient(90deg,rgba(11,6,20,.94) 0%,rgba(11,6,20,.94) 66%,rgba(11,6,20,0) 100%)}
body.scared .scared-practical-art figcaption strong{display:block;font-size:30px;line-height:1.1;margin-bottom:14px}
body.scared .scared-practical-art figcaption p{margin:0;font-size:17px;line-height:1.6;max-width:34ch}
@media (max-width:900px){
  body.scared .scared-practical-art{margin-top:96px;margin-bottom:96px}
  body.scared .scared-practical-art img{height:clamp(260px,52vw,420px);object-position:60% 40%}
  body.scared .scared-practical-art figcaption{position:static;width:auto;display:block;padding:24px var(--scared-gutter) 0;background:none}
}

/* ---------- 8. The finale: full column width, with its caption overlapping the corner ---------- */
body.scared .scared-finale-spread{display:block;position:relative;width:100%;max-width:none;margin:120px 0 0;
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body.scared .scared-finale-spread a{display:block}
body.scared .scared-finale-spread img{display:block;width:100%;height:auto;max-height:none;object-fit:fill;border-radius:8px}
body.scared .scared-finale-spread figcaption{position:relative;width:min(560px,calc(100% - 24px));margin:-84px 24px 0 auto;padding:30px 34px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px}
body.scared .scared-finale-spread figcaption strong{display:block;font-size:28px;line-height:1.1;margin-bottom:12px}
body.scared .scared-finale-spread figcaption p{margin:0;font-size:16px;line-height:1.6}
@media (max-width:900px){
  body.scared .scared-finale-spread{margin-top:80px}
  body.scared .scared-finale-spread figcaption{width:auto;margin:-40px 16px 0;padding:22px 24px}
}

/* ---------- 9. The finale rules, with the Stiff-O-Meter plate running down beside them ---------- */
body.scared main>section#finale{display:grid;grid-template-columns:minmax(0,1fr) 320px!important;gap:0 64px!important;align-items:start}
body.scared #finale>*{grid-column:1;min-width:0}
body.scared #finale .finale-plate{grid-column:2;grid-row:3/span 5;margin:6px 0 0}
body.scared #finale .finale-plate img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
body.scared #finale .finale-plate figcaption{margin:12px 0 0;font:14px/1.6 'Arial Narrow',Arial,sans-serif;color:var(--muted)}
body.scared #finale .quiz{grid-column:1/-1;margin-top:34px}
@media (max-width:900px){
  body.scared main>section#finale{grid-template-columns:1fr!important;gap:0!important}
  body.scared #finale .finale-plate{grid-column:1;grid-row:auto;max-width:320px;margin:10px 0 26px}
}

/* ---------- 10. Watch: the video still and its notes side by side ---------- */
body.scared .watch-grid{grid-template-columns:1fr}
body.scared .watch-grid article{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:8px 48px;align-items:start}
body.scared .watch-grid .watch-image{grid-column:1;grid-row:1/span 3;margin:0}
body.scared .watch-grid article>h3,body.scared .watch-grid article>p,body.scared .watch-grid article>a:not(.watch-image){grid-column:2}
body.scared .watch-grid article>h3{margin-top:4px}
@media (max-width:900px){
  body.scared .watch-grid article{grid-template-columns:1fr;gap:0}
  body.scared .watch-grid .watch-image{grid-column:1;grid-row:auto;margin-bottom:18px}
  body.scared .watch-grid article>h3,body.scared .watch-grid article>p,body.scared .watch-grid article>a:not(.watch-image){grid-column:1}
}

@media print{
  body.scared .opening.cinematic .art,body.scared #act-learn img{mask-image:none;-webkit-mask-image:none}
  body.scared .scared-practical-art figcaption{position:static;background:none}
}