/* Direction · SCOPE × ORDER. Loaded only with ?dir=scope-order.
   Blackout for the page and the letterbox bars. Two colors: Linen for everything read,
   a lit wine (5.7:1 on Blackout) for the rubric: roles and the outlet. Pure fades out of
   black; one grammar for every section. The footer is K180's part of the page, in Walnut. */
/* No scroll anchoring (check-polish, September 30): in Safari's engine it misfired while sections fade in and threw a
   brisk scroll from the credits straight to the footer. Nothing above the reader changes size after load. */
html[data-dir="scope-order"]{overflow-anchor:none}
html[data-dir="scope-order"]{
  --so-black:#090D0C; --so-linen:#E8E0CC; --so-linen-2:#B3AB97; --so-linen-3:#8C8575;
  --so-red:#CA7268; --so-rule:#E8E0CC1A; --so-rule-2:#E8E0CC33; --so-walnut:#3B2A22;
  --so-display:var(--lab-display, Georgia, 'Times New Roman', serif);
  --so-text:var(--lab-text, Georgia, 'Times New Roman', serif);
  --so-italic:var(--lab-text, Georgia, 'Times New Roman', serif);
  --so-ui:var(--lab-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  background:var(--so-black);
}
/* Frank Ruhl Libre has no italic. In route C the rubric borrows the display face's true italic. */
html[data-dir="scope-order"][data-type="c"]{--so-italic:var(--lab-display, Georgia, serif)}
html[data-dir="scope-order"] body{background:var(--so-black);color:var(--so-linen)}
html[data-dir="scope-order"] .runway{background:var(--so-black)}
html[data-dir="scope-order"] #lab-stage{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--so-black)}
html[data-dir="scope-order"] main>section:not(#scene),html[data-dir="scope-order"] footer{background:transparent!important;color:var(--so-linen);border:0!important;position:relative}
/* A bounce past the end of the page shows the footer's Walnut, not a band of black (lab-dir-scope-order.js sets .so-end). */
html[data-dir="scope-order"].so-end{background:var(--so-walnut)}
html[data-dir="scope-order"] .lab-grain{--lab-grain:.05}
html[data-dir="scope-order"] ::selection{background:#6E1423;color:#FFF6E6;text-shadow:none}
/* The Doom Scroll scrollbar: a thin linen sliver on the night, which warms to lamp ocher under the hand. */
html[data-dir="scope-order"]::-webkit-scrollbar{width:10px;height:10px;background:var(--so-black)}
html[data-dir="scope-order"]::-webkit-scrollbar-track{background:var(--so-black)}
html[data-dir="scope-order"]::-webkit-scrollbar-thumb{background:#8C857566;border:3px solid var(--so-black);border-radius:10px;min-height:48px}
html[data-dir="scope-order"]::-webkit-scrollbar-thumb:hover{background:#B98A52}
html[data-dir="scope-order"]::-webkit-scrollbar-thumb:active{background:#E8E0CC}
html[data-dir="scope-order"]::-webkit-scrollbar-corner{background:var(--so-black)}
@supports (-moz-appearance:none){html[data-dir="scope-order"]{scrollbar-color:#8C8575 var(--so-black);scrollbar-width:thin}}

/* The exit settles into a 2.39:1 letterbox (the bars are the page itself). */
html[data-dir="scope-order"] #aperture{--inset-x:0px!important;--radius:0px!important;--inset-top:var(--so-bar,0px)!important;--inset-bottom:var(--so-bar,0px)!important}
html[data-dir="scope-order"] #world{--inner-scale:1!important;--inner-y:0px!important}
/* On a portrait screen the scope band would land on the table itself; the camera tilts up to
   the wall as the bars close, so the band shows the room, not the spill beside the matzah. */
@media (max-aspect-ratio:1/1){html[data-dir="scope-order"] #world{--inner-y:calc(var(--so-bar,0px) * .62)!important}}
/* The room's pictures are scenery, not files to keep: on an iPhone a long press on them opened the save and share menu
   (Codex audit; pitch.dog, September 30). Images only, so the hero's button and links take their taps as before. */
html[data-dir="scope-order"] #scene img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}

/* Header: sits in the top bar like a title-safe line. */
html[data-dir="scope-order"] body.editorial-view #header{background:#090D0Cdb!important;color:var(--so-linen)!important;border-bottom:1px solid #E8E0CC0F!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-dir="scope-order"] body.editorial-view #header nav{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-dir="scope-order"] body.editorial-view .sound{color:var(--so-linen)!important}

/* Kickers: centered, a short rule either side. */
html[data-dir="scope-order"] .kicker{justify-content:center;gap:26px;color:var(--so-linen-2);font-family:var(--so-ui)}
html[data-dir="scope-order"] .kicker::before{content:'';flex:0 0 56px;height:1px;background:var(--so-rule-2)}
html[data-dir="scope-order"] .kicker i{flex:0 0 56px;opacity:1;background:var(--so-rule-2)}
html[data-dir="scope-order"] .ph{display:inline-block;margin-top:18px;padding:1px 6px;border:1px dashed #CA726866;border-radius:4px;font:9px/1.6 var(--so-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--so-red)}

/* ---------- Arrows: drawn, not typed ----------
   pitch.dog, September 30: our fonts carry ↑ and ↓ but not ↗ or →, so an iPhone drew ↗ from its emoji font, a blue
   box. Every arrow in the interface is now one line drawing, the hero button's (scene.css .beat-next svg: no fill,
   a hairline stroke, round caps and joins), cut out of the text's own color: <span class="ds-arrow ds-arrow--out"
   aria-hidden="true"></span> for ↗, ds-arrow--up for ↑. It is sized to the text and sits on the capitals' middle,
   in a line of text or in a flex row alike. */
:root{
  --ds-arrow-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5l7-7M5 2.5h4.5V7'/%3E%3C/svg%3E");
  --ds-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6h9M7 2.5 10.5 6 7 9.5'/%3E%3C/svg%3E");
  --ds-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5v-9M2.5 5 6 1.5 9.5 5'/%3E%3C/svg%3E");
}
.ds-arrow{display:inline-block;flex:none;align-self:center;width:.85em;height:.85em;vertical-align:-.08em;background:currentColor;
  -webkit-mask:var(--ds-arrow-out) center/contain no-repeat;mask:var(--ds-arrow-out) center/contain no-repeat}
.ds-arrow--up{-webkit-mask-image:var(--ds-arrow-up);mask-image:var(--ds-arrow-up)}
.ds-arrow--right{-webkit-mask-image:var(--ds-arrow-right);mask-image:var(--ds-arrow-right)}
@media (forced-colors:active){.ds-arrow,html[data-dir="scope-order"] .editorial-link::after{forced-color-adjust:none}}

/* ---------- One rhythm between sections ----------
   pitch.dog, September 30: about half the empty space there was. --so-gap is each side's half of the black between one
   section's last line and the next one's first: about 92 px on a screen 1100 px tall, 82 at 900, 56 on a phone (below).
   Every section takes it top and bottom; #film takes it at the bottom only (its top is the hero's). */
html[data-dir="scope-order"]{--so-gap:clamp(75px,calc(37.5px + 5vh),100px)}
html[data-dir="scope-order"] #film{padding-bottom:var(--so-gap)}

/* ---------- Cast: one billing card ---------- */
/* The card no longer fills a screen (it centered the names in nearly 900 px of black); it is as tall as its names, and
   the names' own margin and the credits' padding are the space between them, less than between two sections. */
html[data-dir="scope-order"] #cast{padding:var(--so-gap) var(--gutter)}
html[data-dir="scope-order"] .so-billing{display:flex;flex-direction:column;justify-content:center;align-items:center}
html[data-dir="scope-order"] .so-billing .kicker{width:100%;margin-bottom:clamp(40px,6.5vh,76px)}
html[data-dir="scope-order"] .cast-names{display:flex;flex-direction:column;align-items:center;gap:.06em;margin:0 0 clamp(34px,5.5vh,62px);padding:0;
  font-family:var(--so-display);font-size:clamp(46px,5.5vw,94px);font-weight:400;line-height:1.08;letter-spacing:-.03em}
html[data-dir="scope-order"] .cast-names li{display:contents}
html[data-dir="scope-order"] .cast-rule{display:none}
html[data-dir="scope-order"] .cast-names .person-link{color:var(--so-linen);white-space:nowrap;transition:color 500ms ease,background-size 520ms cubic-bezier(.16,1,.3,1)}
@media(hover:hover){html[data-dir="scope-order"] .cast-names a.person-link:hover{color:#FFF6E6}}
html[data-dir="scope-order"] .also{margin:0 auto;max-width:40ch;text-align:center;font:italic 400 clamp(17px,1.45vw,22px)/1.55 var(--so-italic);color:var(--so-linen-2)}
html[data-dir="scope-order"] .also .person-link{color:var(--so-linen);font-style:normal}
html[data-dir="scope-order"] .also .person-link em{font-style:italic}

/* ---------- Credits: the end crawl, in two colors ---------- */
html[data-dir="scope-order"] .credits-layout{max-width:1000px;margin:0 auto;padding-top:clamp(30px,6vh,70px)}
html[data-dir="scope-order"] .credits-layout h3{position:static;width:auto;height:auto;clip-path:none;overflow:visible;text-align:center;font:11px/1.5 var(--so-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--so-linen-2);margin-bottom:46px;padding:0}
html[data-dir="scope-order"] dl>div{grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,44px);border:0;padding:9px 0;align-items:baseline}
html[data-dir="scope-order"] #cast dl>div:last-child{padding-bottom:0}   /* the section's own padding is the gap below */
html[data-dir="scope-order"] dt{text-align:right;font:italic 400 clamp(16px,1.3vw,19px)/1.4 var(--so-italic);letter-spacing:0;text-transform:none;color:var(--so-red);padding-top:0}
html[data-dir="scope-order"] dd{text-align:left;font:400 clamp(20px,1.75vw,26px)/1.35 var(--so-text);letter-spacing:-.015em;color:var(--so-linen)}
/* Names in the cast and the credits (Kay, September 30): nothing underlined at rest; on hover or keyboard focus one hairline
   draws in from the left. (The base stylesheet's hover underline had doubled it in the credits.) */
html[data-dir="scope-order"] .person-link{text-decoration:none}@media(hover:hover){html[data-dir="scope-order"] .person-link:hover{text-decoration:none}}
/* Only real links (the names with an IMDb page) answer the pointer: seven cast names are plain text for now. */
html[data-dir="scope-order"] a.person-link{position:relative;padding-bottom:.12em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 520ms cubic-bezier(.16,1,.3,1)}
/* On touch screens a name's tap area reaches about 44 px (check-polish, September 30). */
@media(pointer:coarse){html[data-dir="scope-order"] a.person-link::before{content:'';position:absolute;inset:-.45em -.15em}}
@media(hover:hover){html[data-dir="scope-order"] a.person-link:hover{background-size:100% 1px}}
/* Keyboard focus: the same line, thicker, and no ring (the ring doubled it and crossed the commas in the credits). */
html[data-dir="scope-order"] a.person-link:focus-visible{outline:none;background-size:100% 2px}
/* Inside the About K180 paragraph the names keep their faint underline (Kay, September 30: as is), which brightens on
   hover; the drawn line stays off there, so there is never a second line. */
html[data-dir="scope-order"] #producer-copy a.person-link{background:none;padding-bottom:0}
html[data-dir="scope-order"] #producer-copy a.person-link:focus-visible{text-decoration-thickness:2px}
/* The title card's director credit: the same, no underline until a pointer is on it (Kay, September 30). */
html[data-dir="scope-order"] .final-credit a{text-decoration:none;padding-bottom:.12em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 520ms cubic-bezier(.16,1,.3,1)}
html[data-dir="scope-order"] .final-credit a:focus-visible{background-size:100% 1px}@media(hover:hover){html[data-dir="scope-order"] .final-credit a:hover{background-size:100% 1px}}

/* ---------- Press: a single title card ---------- */
html[data-dir="scope-order"] #press{padding:var(--so-gap) var(--gutter);scroll-margin-top:90px}
html[data-dir="scope-order"] .so-press{max-width:1100px;margin:0 auto;text-align:center}
html[data-dir="scope-order"] .so-press .kicker{margin-bottom:clamp(46px,7vh,80px)}
html[data-dir="scope-order"] .so-meta{display:flex;justify-content:center;align-items:baseline;gap:14px;font:11px/1.4 var(--so-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--so-linen-3)}
html[data-dir="scope-order"] .so-meta time{font-variant-numeric:tabular-nums}
html[data-dir="scope-order"] .so-outlet{color:var(--so-red)}
html[data-dir="scope-order"] .so-headline{max-width:25ch;margin:26px auto 0;font:400 clamp(30px,3.3vw,54px)/1.1 var(--so-display);letter-spacing:-.035em;text-wrap:balance;color:var(--so-linen)}
html[data-dir="scope-order"] .so-headline a{padding-block:.2em;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:transparent;transition:color 400ms ease,text-decoration-color 400ms ease}
@media(hover:hover){html[data-dir="scope-order"] .so-headline a:hover{color:#FFF6E6;text-decoration-color:currentColor}}
html[data-dir="scope-order"] .so-headline a:focus-visible{outline:none;color:#FFF6E6;text-decoration-color:currentColor;text-decoration-thickness:2px}
html[data-dir="scope-order"] .so-arrow{font:400 .34em/1 var(--so-ui);vertical-align:1.25em;color:var(--so-linen-3);transition:color 400ms ease}
@media(hover:hover){html[data-dir="scope-order"] .so-headline a:hover .so-arrow{color:var(--so-linen)}}
html[data-dir="scope-order"] .so-quote{max-width:34ch;margin:26px auto 0;font:italic 400 clamp(18px,1.5vw,22px)/1.5 var(--so-italic);color:var(--so-linen-2)}
/* Past the home page's eight stories and eight laurels, a quiet link to the full page (Kay, October 12, 2026). */
html[data-dir="scope-order"] .so-all,html[data-dir="scope-order"] .awards-all{margin:clamp(40px,6vh,56px) 0 0;text-align:center}
html[data-dir="scope-order"] .so-more{margin:44px auto 0;max-width:40ch;font:italic 400 clamp(16px,1.25vw,19px)/1.5 var(--so-italic);color:var(--so-linen-3)}
/* "Read on Deadline ↗": every story opens the article itself, in a new tab. */
html[data-dir="scope-order"] .so-read{margin:clamp(22px,3.2vh,34px) 0 0}
/* "Read on Deadline" is set like "Meet K180" in the next section (check-polish, September 30): the same size, weight, color
   and rule underneath. */
html[data-dir="scope-order"] .so-read-link{position:relative;display:inline-flex;align-items:center;gap:12px;padding:10px 0;font:400 11px/1 var(--so-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--so-linen);text-decoration:none;border-bottom:1px solid var(--so-rule-2);transition:border-color 400ms ease}
html[data-dir="scope-order"] .so-read-link::before{content:'';position:absolute;inset:-7px 0}
html[data-dir="scope-order"] .so-read-link:focus-visible{border-color:var(--so-linen)}@media(hover:hover){html[data-dir="scope-order"] .so-read-link:hover{border-color:var(--so-linen)}}
html[data-dir="scope-order"] .so-read-link:focus-visible{outline:none}
html[data-dir="scope-order"] .so-read-link .ds-arrow{margin-left:0}
html[data-dir="scope-order"] .so-r-end{display:flex;gap:18px;align-items:baseline;justify-content:flex-end}
html[data-dir="scope-order"] .so-r-end .so-read-link{min-height:0;padding:0;font-size:11px}
/* The list's "Read" is small type: its tap area reaches 44 px tall (and a little wider), invisibly. Where it meets the
   headline above, both open the same article. */
html[data-dir="scope-order"] .so-r-end .so-read-link::before{inset:-16px -8px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html[data-dir="scope-order"] .so-rest{list-style:none;max-width:980px;margin:clamp(60px,9vh,96px) auto 0;padding:0;text-align:left}
html[data-dir="scope-order"] .so-rest li{display:grid;grid-template-columns:1fr 1.6fr .6fr;gap:30px;align-items:baseline;padding:12px 0;border-top:1px solid var(--so-rule)}
html[data-dir="scope-order"] .so-r-outlet{text-align:right;font:italic 400 17px/1.4 var(--so-italic);color:var(--so-red)}
html[data-dir="scope-order"] .so-r-title{font:19px/1.4 var(--so-text);color:var(--so-linen)}
html[data-dir="scope-order"] .so-rest time{font:12px var(--so-ui);color:var(--so-linen-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Awards: only with real news, set like the crawl ---------- */
html[data-dir="scope-order"] #awards{padding:var(--so-gap) var(--gutter);text-align:center}
html[data-dir="scope-order"] #awards .kicker{margin-bottom:40px}
html[data-dir="scope-order"] .award-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:12px;font:clamp(20px,1.75vw,26px)/1.4 var(--so-text);color:var(--so-linen)}
html[data-dir="scope-order"] .award-label{font:italic 400 .8em var(--so-italic);color:var(--so-red)}

/* ---------- K180: a studio ident ---------- */
html[data-dir="scope-order"] #about-k180{padding:var(--so-gap) var(--gutter);color:var(--so-linen)!important}
html[data-dir="scope-order"] #about-k180 .kicker{margin-bottom:clamp(50px,8vh,90px)}
html[data-dir="scope-order"] .k180-logo{width:clamp(180px,19vw,270px);margin:0 auto clamp(46px,7vh,72px)}
/* The last tap areas on phones reach 44 px (check-polish, September 30), with invisible extenders: nothing moves. */
html[data-dir="scope-order"] .k180-logo{position:relative}
html[data-dir="scope-order"] .k180-logo::before{content:'';position:absolute;inset:-4px 0}
html[data-dir="scope-order"] .editorial-link::before{inset:-7px 0}
html[data-dir="scope-order"] header .home::before{content:'';position:absolute;inset:-11px -2px}
html[data-dir="scope-order"] header nav a::before{content:'';position:absolute;inset:-8px -6px}
html[data-dir="scope-order"] footer>div a::before{inset:-15px -6px}
html[data-dir="scope-order"] .k180-logo span{background:var(--so-linen)}
html[data-dir="scope-order"] #producer-copy{display:block;max-width:640px;margin:0 auto}
html[data-dir="scope-order"] #producer-copy>.section-headline{max-width:none;margin:0 0 40px;text-align:center;font:400 clamp(34px,3.4vw,56px)/1.08 var(--so-display);letter-spacing:-.035em;color:var(--so-linen);text-wrap:balance}
html[data-dir="scope-order"] .producer #producer-copy>p{max-width:none;margin:0 0 24px;font:400 clamp(18px,1.35vw,21px)/1.62 var(--so-text);color:var(--so-linen-2)}
html[data-dir="scope-order"] #producer-copy p .person-link,html[data-dir="scope-order"] #producer-copy p em{color:var(--so-linen)}
/* Links in the paragraph carry a quiet underline, so they read as links without relying on color alone. */
html[data-dir="scope-order"] #producer-copy p a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#E8E0CC66;text-underline-offset:.24em;transition:text-decoration-color 300ms ease}
html[data-dir="scope-order"] #producer-copy p a:focus-visible{text-decoration-color:currentColor}@media(hover:hover){html[data-dir="scope-order"] #producer-copy p a:hover{text-decoration-color:currentColor}}
/* The "Privacy" link beside the sign-up forms (check-polish, September 30: it read as plain text). */
html[data-dir="scope-order"] #signup p a,html[data-dir="scope-order"] .signup-pop .pop-small a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#E8E0CC66;text-underline-offset:.24em;transition:color 300ms ease,text-decoration-color 300ms ease}
@media(hover:hover){html[data-dir="scope-order"] #signup p a:hover,html[data-dir="scope-order"] .signup-pop .pop-small a:hover{color:#FFF6E6;text-decoration-color:currentColor}}
html[data-dir="scope-order"] #signup p a:focus-visible,html[data-dir="scope-order"] .signup-pop .pop-small a:focus-visible{outline:none;color:#FFF6E6;text-decoration-color:currentColor;text-decoration-thickness:2px}
html[data-dir="scope-order"] .producer-links{justify-content:center;margin-top:12px}
html[data-dir="scope-order"] .editorial-link{color:var(--so-linen);border-color:var(--so-rule-2);transition:border-color 400ms ease}
/* "Meet K180" and "Listen to their podcast" draw their arrow in CSS (scene.css .editorial-link:after), so it takes the
   same drawing here. */
html[data-dir="scope-order"] .editorial-link::after{content:'';flex:none;width:.85em;height:.85em;background:currentColor;
  -webkit-mask:var(--ds-arrow-out) center/contain no-repeat;mask:var(--ds-arrow-out) center/contain no-repeat}
@media(hover:hover){html[data-dir="scope-order"] .editorial-link:hover{border-color:var(--so-linen)}}
html[data-dir="scope-order"] .editorial-link:focus-visible{outline:none;border-color:var(--so-linen)}

/* ---------- Signup: the last card before the lights come up ---------- */
html[data-dir="scope-order"] #updates{padding:var(--so-gap) var(--gutter)}
html[data-dir="scope-order"] #updates .vertical-rule{background:var(--so-rule-2)}
html[data-dir="scope-order"] #updates h2{font-family:var(--so-display);font-weight:400;color:var(--so-linen)}
html[data-dir="scope-order"] #updates>p{color:var(--so-linen-2)}
html[data-dir="scope-order"] #signup{max-width:520px;margin:56px auto 0;text-align:left}
html[data-dir="scope-order"] #signup label{color:var(--so-linen-2)}
html[data-dir="scope-order"] #signup input{background:transparent;color:var(--so-linen);border-color:#7A7467;caret-color:var(--so-linen)}
/* Empty fields must still read as fields: #7A7467 is 4.2:1 on the night and 3.9:1 on the card (WCAG non-text 3:1). */
html[data-dir="scope-order"] .signup-pop input{border-color:#7A7467}
html[data-dir="scope-order"] #signup input:focus{border-color:var(--so-linen);outline:none}
html[data-dir="scope-order"] #signup input:-webkit-autofill{-webkit-text-fill-color:var(--so-linen);box-shadow:0 0 0 100px var(--so-black) inset}
html[data-dir="scope-order"] #signup input[aria-invalid=true]{border-color:var(--so-red)}
html[data-dir="scope-order"] #signup button{opacity:1;background:transparent;color:var(--so-linen);border:1px solid #E8E0CC70;transition:background-color 500ms ease,color 500ms ease,border-color 500ms ease,transform 160ms ease-out}
@media(hover:hover){html[data-dir="scope-order"] #signup button:hover{background:var(--so-linen);color:var(--so-black);border-color:var(--so-linen)}}
html[data-dir="scope-order"] #signup button:active{transform:scale(.98)}
html[data-dir="scope-order"] #signup button:focus-visible{outline:1px solid var(--so-linen);outline-offset:4px}
html[data-dir="scope-order"] #signup p{color:var(--so-linen-3)}
html[data-dir="scope-order"] #signup-feedback{color:var(--so-linen-2)}
html[data-dir="scope-order"] #signup-feedback:empty{margin:0}

/* ---------- The footer: K180's part of the page, in Walnut ----------
   pitch.dog, 29 September: no window, just the home; its own color; one centered axis. Two groups: the home and
   the links, then the small print (contacts, privacy, copyright) set close together. Linen on Walnut reads at
   10.4:1, the softer Linen-2 at 6:1. The grain (z-index 25) stays on top. */
html[data-dir="scope-order"] footer{background:var(--so-walnut)!important;flex-direction:column;align-items:center;gap:0;padding:var(--so-gap) var(--gutter) clamp(48px,7vh,72px);text-align:center}
html[data-dir="scope-order"] footer>span{font-family:var(--so-display);line-height:1;color:var(--so-linen)}
html[data-dir="scope-order"] .footer-home{color:inherit;transition:color 300ms ease}
@media(hover:hover){html[data-dir="scope-order"] .footer-home:hover{color:#FFF6E6}}
html[data-dir="scope-order"] .footer-home:focus-visible{outline:1px solid currentColor;outline-offset:6px}
html[data-dir="scope-order"] footer>div{width:auto;justify-content:center;flex-wrap:wrap;gap:12px 32px;margin-top:28px}
/* One row of links (Kay, September 30): the site's own, then Instagram, K180's press contact and the privacy page, set
   alike and never underlined; on a phone the row wraps. The privacy page says what the site counts. */
html[data-dir="scope-order"] footer>div a{color:var(--so-linen-2);transition:color 300ms ease}
@media(hover:hover){html[data-dir="scope-order"] footer>div a:hover{color:var(--so-linen)}}
html[data-dir="scope-order"] footer .footer-note,html[data-dir="scope-order"] footer .privacy-note{flex-basis:auto;max-width:60ch;margin:10px 0 0;text-align:center;text-wrap:balance;color:var(--so-linen-2)}
html[data-dir="scope-order"] footer>div+.footer-note{margin-top:clamp(48px,7vh,64px)}
/* The small print is where a journalist looks for a contact: 13 px, not 11. */
html[data-dir="scope-order"] footer>p{font-size:13px;line-height:1.6}

/* ---------- Phones ---------- */
@media (max-width:760px),(max-width:1000px) and (orientation:portrait){
  /* The sections' phone rhythm: 56 px each side, about 112 px of black between sections (pitch.dog, September 30; it
     was 96 and 100, about 200 px). The cast no longer climbs a bar's height up the page: that was for the framed still
     it once followed, and with the synopsis in between it slid the names up under the synopsis. */
  html[data-dir="scope-order"]{--so-gap:56px}
  html[data-dir="scope-order"] .credits-layout{padding-top:32px}
  html[data-dir="scope-order"] .cast-names{font-size:clamp(34px,9.4vw,60px);gap:.1em}
  html[data-dir="scope-order"] .kicker::before,html[data-dir="scope-order"] .kicker i{flex-basis:30px}
  html[data-dir="scope-order"] dl>div{grid-template-columns:1fr;gap:2px;padding:10px 0;text-align:center}
  html[data-dir="scope-order"] dt,html[data-dir="scope-order"] dd{text-align:center}
  html[data-dir="scope-order"] .so-headline{font-size:clamp(30px,8.4vw,44px);line-height:1.1;text-wrap:pretty}
  html[data-dir="scope-order"] .so-meta{flex-wrap:wrap;gap:6px 12px}
@media(max-width:420px){html[data-dir="scope-order"] .so-meta{flex-direction:column;align-items:center}html[data-dir="scope-order"] .so-meta .so-dot{display:none}}
  html[data-dir="scope-order"] .so-rest li{grid-template-columns:1fr;gap:4px;text-align:center}
  html[data-dir="scope-order"] .so-r-outlet{text-align:center}
  html[data-dir="scope-order"] #producer-copy>.section-headline{margin-bottom:28px}
}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){html[data-dir="scope-order"] .so-r-end{justify-content:center}}
/* A section that takes the focus when a link or the button leads to it (#film, #cast …, tabindex -1) is a place, not a
   control: no focus ring around the whole section, which drew two stray lines across the page (pitch.dog, September 30).
   The next Tab starts from there, as before. */
main>section[tabindex="-1"]:focus,#scene[tabindex="-1"]:focus{outline:none}