/* /screenplays/ : the hub and the script readers (generated by build/build_screenplays.py) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hub ---------- */
.sp-hero { min-height: auto; }
.sp-hero::after { background: radial-gradient(900px 520px at 15% 85%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), linear-gradient(180deg, #0d0b1f 0%, var(--bg) 100%); }
.sp-hero .pp-hero-in { grid-template-columns: minmax(220px, 400px) 1fr; align-items: center; }
.sp-covers { position: relative; aspect-ratio: 1 / 1.05; }
.sp-covers img { position: absolute; width: 50%; top: 8%; }
.sp-covers .sp-p0 { left: 0; transform: rotate(-8deg); z-index: 2; }
.sp-covers .sp-p1 { left: 25%; top: 0; transform: rotate(1deg); z-index: 3; }
.sp-covers .sp-p2 { left: 50%; transform: rotate(8deg); z-index: 1; }

.sp-essay { max-width: 46em; }
.sp-essay h3 { font: 800 clamp(19px, 2vw, 24px)/1.2 var(--display); text-transform: uppercase; margin: 2.1em 0 .7em; }
.sp-essay h3:first-child { margin-top: 0; }
.sp-essay p { margin: 0 0 1.05em; color: #d9dcf3; text-wrap: pretty; }
.sp-essay p b { color: #fff; }
.sp-essay a { color: var(--accent); }
.sp-sig { font: 700 13px/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) !important; margin-top: 2em !important; }
.sp-origins { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-origins li { border-left: 3px solid var(--accent); background: rgba(255,255,255,.03); padding: 14px 18px; display: grid; gap: 4px; }
.sp-origins b { font: 800 15px/1.2 var(--display); color: var(--accent); }
.sp-origins span { color: #d9dcf3; font-size: 16px; line-height: 1.55; }
.sp-pages { border-collapse: collapse; width: 100%; max-width: 34em; margin: 0 0 1.1em; font: 400 15px/1.4 var(--mono); }
.sp-pages th, .sp-pages td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sp-pages th:first-child { text-align: left; }
.sp-pages thead th { color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sp-pages tbody th { font-weight: 700; color: #fff; }
.sp-pages td:nth-child(3) { color: var(--accent); font-weight: 700; }
.sp-rules { margin: 0; padding: 0 0 0 1.2em; color: #d9dcf3; }
.sp-rules li { margin: 0 0 .45em; }
.sp-rules li::marker { color: var(--accent); }

.sp-cards { display: grid; gap: 22px; }
.sp-card { display: grid; grid-template-columns: 170px 1fr; gap: clamp(18px, 3vw, 32px); align-items: start; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: rgba(255,255,255,.03); padding: clamp(16px, 2.4vw, 26px); }
.sp-card img { border-radius: 3px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.sp-card h3 { font: 800 clamp(24px, 3vw, 36px)/1 var(--display); text-transform: uppercase; margin: 8px 0 10px; }
.sp-card p { margin: 0 0 10px; color: #c9cdea; font-size: 16px; line-height: 1.55; }
.sp-card .sp-tag { font-style: italic; color: #fff; font-size: 18px; }
.sp-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sp-btns .btn { padding: 12px 15px; font-size: 12px; }

.sp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sp-tabs button { font: 700 13px/1 var(--mono); letter-spacing: .1em; padding: 13px 18px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.04); color: var(--dim); cursor: pointer; }
.sp-tabs button:hover { color: var(--ink); border-color: var(--accent); }
.sp-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #0b0a16; }
.sp-frame { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #e9e6dc; }
.sp-frame iframe { display: block; width: 100%; height: min(82vh, 980px); min-height: 520px; border: 0; }
.sp-note { color: var(--dim); font-size: 14px; margin: 10px 0 0; }

@media (max-width: 760px) {
  .sp-hero .pp-hero-in { grid-template-columns: 1fr; }
  .sp-covers { max-width: 320px; width: 100%; }
  .sp-card { grid-template-columns: 1fr; }
  .sp-card img { width: 140px; }
  .sp-pages { font-size: 13px; }
  .sp-pages th, .sp-pages td { padding: 9px 6px; }
}

/* ---------- reader ---------- */
body.rd { background: #24222e; }
.rd-bar { gap: 10px; }
.rd-name { font: 800 13px/1 var(--display); letter-spacing: .04em; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tools { display: flex; align-items: center; gap: 14px !important; flex-wrap: nowrap !important; }
.rd-tools a { color: var(--ink) !important; white-space: nowrap; }
.rd-tools a:hover { color: var(--accent) !important; }
.rd-jump select { font: 700 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 3px; padding: 7px 8px; max-width: 150px; }
.rd-jump option { color: #111; background: #fff; }
.rd-full { display: none; }
.rd-progress { position: sticky; top: 41px; z-index: 39; height: 3px; background: rgba(255,255,255,.06); }
.rd-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.rd-resume { position: fixed; right: 16px; bottom: 18px; z-index: 50; font: 700 12px/1 var(--mono); letter-spacing: .1em; padding: 13px 16px; border-radius: 3px; border: 0; background: var(--accent); color: #0b0a16; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
body.embed .rd-back, body.embed .pp-foot, body.embed .rd-end { display: none; }
body.embed .rd-full { display: inline; }
body.embed .rd-progress { top: 41px; }

.rd-desk { padding: clamp(14px, 4vw, 48px) clamp(10px, 3vw, 24px) 40px; }
.paper {
  position: relative; max-width: 8.5in; margin: 0 auto; background: #fdfcf7; color: #16151a;
  font: 400 16px/1.25 'Courier Prime', 'Courier New', Courier, monospace;
  padding: 1in 1in 1in 1.5in; box-shadow: 0 20px 60px rgba(0,0,0,.45);
  -webkit-user-select: text; user-select: text;
}
.paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420'%3E%3Ctext x='280' y='225' text-anchor='middle' transform='rotate(-38 280 210)' font-family='Helvetica,Arial,sans-serif' font-weight='700' font-size='34' letter-spacing='2' fill='%23000' fill-opacity='0.075'%3EORBITAL RANCH STUDIOS%3C/text%3E%3C/svg%3E");
  background-repeat: repeat; background-position: center top;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.paper p, .paper h1, .paper h3 { font-size: 1em; }
.paper > *, .paper .dl p, .tp > * { margin: 0; }
.paper > * + * { margin-top: 1.25em; }
.tp { text-align: center; min-height: 7.5in; position: relative; padding-top: 2.6in; border-bottom: 1px dashed #c9c5b6; margin-bottom: 1in; }
.tp h1 { font-weight: 700; text-transform: uppercase; }
.tp > p { margin-top: 1.25em; }
.tp > h1 + p { margin-top: 3.75em; }
.tp > .tp-src { margin-top: 3.75em; }
.tp .tp-c { position: absolute; left: 0; bottom: .6in; margin: 0; }
.paper > .sh { margin-top: 2.5em; }
.sh { font-weight: 700; text-transform: uppercase; position: relative; scroll-margin-top: 70px; }
.sn { position: absolute; left: -3.2em; width: 2.6em; text-align: right; font-weight: 400; color: #9a968a; font-size: .8em; top: .15em; }
.ac { max-width: 60ch; }
.cue { margin-left: 22ch !important; text-transform: uppercase; }
.par { margin-left: 16ch !important; max-width: 25ch; }
.ln { margin-left: 10ch !important; max-width: 35ch; }
.tr { text-align: right; text-transform: uppercase; }
.ce { text-align: center; font-weight: 700; }
.rd-end { max-width: 8.5in; margin: 26px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 760px) {
  .paper { font-size: 14.5px; padding: 26px 18px 40px 30px; }
  .tp { min-height: 0; padding: 40px 0 70px; margin-bottom: 36px; }
  .tp > .tp-c { position: static; margin-top: 50px; font-size: .85em; }
  .sn { left: -2.3em; width: 2em; }
  .cue { margin-left: 30% !important; }
  .par { margin-left: 18% !important; max-width: none; }
  .ln { margin-left: 10% !important; max-width: none; margin-right: 6%; }
  .rd-name { display: none; }
  .rd-tools { gap: 10px !important; }
  .rd-jump select { max-width: 112px; }
}

@media print {
  .rd-bar, .rd-progress, .rd-resume, .rd-end, .pp-foot { display: none !important; }
  body.rd { background: #fff; }
  .rd-desk { padding: 0; }
  .paper { box-shadow: none; padding: 0; max-width: none; }
  .tp { break-after: page; border: 0; }
  .sn { display: none; }
}

/* ---------- how-i-work ---------- */
.hw-hero .pp-hero-in { grid-template-columns: 1fr; padding-top: clamp(50px, 9vh, 90px); }
.hw-tools th, .hw-tools td { text-align: left !important; }
.hw-tools td { color: #d9dcf3; font-family: var(--body); font-size: 15px; }
.hw-tools th[scope="row"] { white-space: nowrap; }
.hw-ata { margin: 10px 0 0; padding: clamp(22px, 4vw, 40px); background: #fdfcf7; color: #1d1b22; border-radius: 3px; box-shadow: 0 20px 50px rgba(0,0,0,.45); font: 400 16px/1.6 Georgia, 'Times New Roman', serif; max-width: 36em; }
.hw-ata p { color: #1d1b22 !important; margin: 0 0 1em; }
.hw-ata p:last-child { margin-bottom: 0; }
.hw-ata-k { font: 700 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #6b6676; margin-bottom: 16px; text-align: center; }
@media (max-width: 760px) { .hw-tools th[scope="row"] { white-space: normal; } }

/* ---------- Before the Robots (/screenplays/originals/, build/build_originals.py) ---------- */
.btr-hero .pp-hero-in { grid-template-columns: 1fr; padding-top: clamp(50px, 9vh, 90px); }
.btr-card { grid-template-columns: 200px 1fr; }
.btr-mini { display: flex; flex-direction: column; align-items: center; text-align: center; aspect-ratio: 8.5 / 11; padding: 26% 8% 6%; background: #fdfcf7; color: #16151a; font: 400 12px/1.35 'Courier Prime', 'Courier New', Courier, monospace; text-decoration: none; border-radius: 2px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.btr-card a.btr-mini, .btr-card a.btr-mini b, .btr-card a.btr-mini i, .btr-card a.btr-mini span { color: #16151a; }
.btr-mini b { font-weight: 700; text-decoration: underline; }
.btr-mini i { font-style: normal; margin-top: .7em; }
.btr-mini span { margin-top: 1.6em; }
.btr-card a.btr-mini em { font-style: normal; margin-top: auto; color: #55525c; }
.btr-mini:hover { outline: 2px solid var(--accent); }
.btr-card .sp-tag { font-size: 17px; line-height: 1.5; }
.btr-then b { color: var(--accent); font-weight: 700; }
.btr-rated { color: var(--dim) !important; font-size: 14px !important; }
.btr .paper .btr-pg { text-align: right; color: #55525c; margin-top: 2.5em; padding-top: .5em; border-top: 1px dashed #c9c5b6; }
.btr .paper .btr-pg-x { padding: 0; margin: 0; border: 0; }
.btr .paper .btr-c { text-align: center; }
.btr .paper .btr-r { text-align: right; }
.btr .paper .ac u, .btr .paper .ln u { text-underline-offset: 2px; }
.btr .tp .btr-tpd { position: absolute; right: 0; bottom: 1.1in; text-align: right; }
.btr .tp .btr-tpd p { margin: 0; }
.btr .rd-resume { max-width: calc(100vw - 32px); }
@media (max-width: 760px) {
  .btr-card { grid-template-columns: 1fr; }
  .btr-mini { width: 180px; padding-top: 18%; font-size: 11.5px; }
  .btr .tp .btr-tpd { position: static; text-align: center; margin-top: 40px; }
}
@media print { .btr .paper .btr-pg { border: 0; } }
.btr-pitch .paper { font-family: Arial, Helvetica, sans-serif; line-height: 1.5; padding: 1in; }
.btr-pitch .paper .ac { max-width: none; }
.btr-pitch .tp h1, .btr-pitch .tp > p { font-family: 'Courier Prime', 'Courier New', Courier, monospace; }
@media (max-width: 760px) { .btr-pitch .paper { padding: 26px 20px 40px; } }