/* Creature from the Black Lagoon — lagoon-black ground, drive-in neon pink accent, popcorn gold.
   Tokens follow the guide-themes.css contract and were solved to the same WCAG targets:
     ink/bg 14.1:1 · muted/bg 7.1:1 · accent-ink/bg 7.3:1 (6.3:1 on paper) · line-ui/bg 4.4:1 · white/accent 6.1:1
   Linked only from creature-black-lagoon.html. */
body.creature{--bg:#071412;--paper:#0f241f;--ink:#d5e2dc;--muted:#88a59a;--line:#1f3d35;--line-ui:#3e8672;--accent:#b82268;--accent-ink:#ff6fb0;--bone:#c6b07a}
.creature .opening{border-color:#3e8672}

/* Drive-in composition: panoramic arrival, poster-like film build, lagoon finale. */
body.creature{--creature-gutter:max(40px,calc((100vw - 1240px)/2 + 40px))}
body.creature .opening.cinematic{overflow:visible}
body.creature .opening.cinematic .art{width:100%;max-width:none;height:clamp(430px,67vh,710px);max-height:none;object-fit:cover;object-position:50% 36%;margin:0;-webkit-mask-image:linear-gradient(#000 46%,transparent 94%);mask-image:linear-gradient(#000 46%,transparent 94%)}
body.creature .opening.cinematic .intro{position:relative;margin-top:-116px;padding-top:0}
body.creature .field-graphic--first-ball-route{position:relative;width:100vw;max-width:none;margin:50px 0 58px calc(50% - 50vw);border:0;border-radius:0;background:none;overflow:hidden}
body.creature .field-graphic--first-ball-route img{width:100%;height:clamp(430px,70vh,740px);object-fit:cover;object-position:50% 52%}
body.creature .field-graphic--first-ball-route figcaption{position:absolute;inset:auto auto 0 0;width:min(50%,660px);padding:88px 150px 42px var(--creature-gutter);background:linear-gradient(90deg,rgba(7,20,18,.96) 0%,rgba(7,20,18,.9) 68%,transparent);font-size:17px}
body.creature .field-graphic--main-progression{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);width:100vw;max-width:none;margin:96px 0 60px calc(50% - 50vw);border:0;border-radius:0;background:none;align-items:stretch}
body.creature .field-graphic--main-progression img{grid-column:2;grid-row:1;width:100%;height:clamp(430px,70vh,740px);object-fit:cover;object-position:50% 46%}
body.creature .field-graphic--main-progression figcaption{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:44px 54px 44px var(--creature-gutter);font-size:17px}
body.creature .field-graphic--multiball-flow{position:relative;width:100%;max-width:none;margin:88px 0 42px;border:0;background:none;overflow:visible}
body.creature .field-graphic--multiball-flow img{width:100%;height:auto;border-radius:8px}
body.creature .field-graphic--multiball-flow figcaption{position:relative;width:min(600px,calc(100% - 30px));margin:-80px 18px 0 auto;padding:28px 34px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:16px}
@media(max-width:900px){body.creature .opening.cinematic .art{height:clamp(360px,58vh,490px)}body.creature .opening.cinematic .intro{margin-top:-88px}body.creature .field-graphic--first-ball-route img{height:clamp(300px,62vw,470px)}body.creature .field-graphic--first-ball-route figcaption{position:static;width:auto;padding:24px var(--creature-gutter) 0;background:none}body.creature .field-graphic--main-progression{grid-template-columns:1fr;margin-top:70px}body.creature .field-graphic--main-progression img{grid-column:1;grid-row:1;height:clamp(300px,62vw,470px)}body.creature .field-graphic--main-progression figcaption{grid-column:1;grid-row:2;padding:24px var(--creature-gutter) 0}}