/* The new site's shared pages: the same tokens, type and calm as the films. */
:root{
  --ground:#0A0F16; --panel:#121A24; --panel2:#16202C; --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.14);
  --ink:#EEF3FA; --ink-2:#A3B1C2; --ink-3:#7D8C9F;
  --cham:#C9B98F; --platinum:#D9DEE5; --green:#3ECF8E; --red:#E5484D;
  --arrive:cubic-bezier(.2,.7,.2,1);
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
  --serif:"Instrument Serif", "Times New Roman", Georgia, serif;
  --gutter:clamp(16px, 4vw, 40px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:20px; line-height:1.55; overflow-x:hidden; -webkit-text-size-adjust:100%}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.frame{max-width:1240px; margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right))}

/* The header and footer: rl-nav.css, the same component on every page. */

/* Page hero */
.phero{padding:clamp(40px, 8vh, 96px) 0 clamp(28px, 5vh, 56px)}
.kicker{margin:0 0 14px; font-size:17px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cham)}
.phero h1{margin:0; max-width:18ch; font-family:var(--serif); font-weight:400; font-size:clamp(48px, 6.4vw, 92px); line-height:.98; letter-spacing:-.015em; text-wrap:balance}
.phero h1 em{font-style:italic}
.lede{margin:22px 0 0; max-width:56ch; font-size:clamp(20px, 1.7vw, 23px); line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.lede b{color:var(--ink); font-weight:600}

/* Bands */
.band{border-top:1px solid var(--hair); padding:clamp(40px, 7vh, 80px) 0}
.band h2{margin:0; max-width:24ch; font-family:var(--serif); font-weight:400; font-size:clamp(36px, 4.2vw, 60px); line-height:1.02; letter-spacing:-.01em; text-wrap:balance}
.band h2 em{font-style:italic}
.band > p, .band .prose p{max-width:62ch; margin:16px 0 0; font-size:20px; color:var(--ink-2); text-wrap:pretty}
.band .prose p b{color:var(--ink); font-weight:600}
.two{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 4vw, 64px); align-items:start}
@media (max-width:900px){ .two{grid-template-columns:minmax(0, 1fr)} }

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:clamp(24px, 4vh, 40px)}
.cards.c2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.cards.c4{grid-template-columns:repeat(4, minmax(0, 1fr))}
@media (max-width:1000px){ .cards, .cards.c4{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:640px){ .cards, .cards.c2, .cards.c4{grid-template-columns:minmax(0, 1fr)} }
.card{display:flex; flex-direction:column; gap:8px; padding:22px 22px 24px; border-radius:18px; background:var(--panel); border:1px solid var(--hair); text-decoration:none; transition:border-color .3s var(--arrive), transform .3s var(--arrive)}
a.card:hover{border-color:rgba(201,185,143,.5); transform:translateY(-2px)}
.card .ck{font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cham)}
.card b{font-size:22px; font-weight:600; line-height:1.3; letter-spacing:-.005em; color:var(--ink); text-wrap:balance}
.card span{font-size:18px; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.card .go{margin-top:auto; padding-top:10px; font-size:17px; color:var(--cham)}
.card img{border-radius:12px; margin-bottom:6px; aspect-ratio:16/10; object-fit:cover; width:100%}

/* The numbers that stand behind the words */
.stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; margin-top:clamp(24px, 4vh, 40px); border-radius:18px; overflow:hidden; background:var(--hair); border:1px solid var(--hair)}
@media (max-width:1000px){ .stats{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:560px){ .stats{grid-template-columns:minmax(0, 1fr)} }
.stat{padding:22px 22px 24px; background:var(--panel)}
.stat b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(40px, 4vw, 56px); line-height:1; color:var(--ink)}
.stat span{display:block; margin-top:10px; font-size:18px; line-height:1.45; color:var(--ink)}
.stat small{display:block; margin-top:8px; font-size:16px; line-height:1.4; color:var(--ink-3)}
.stat small a{color:var(--ink-2)}

/* Buttons */
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{display:inline-flex; align-items:center; min-height:48px; padding:12px 22px; border-radius:999px; border:1px solid rgba(201,185,143,.6); color:var(--ink); background:transparent; text-decoration:none; font-size:18px; font-weight:500; cursor:pointer}
.btn:hover{background:rgba(201,185,143,.08)}
.btn.p{background:var(--cham); border-color:var(--cham); color:var(--ground); font-weight:600}
.btn.p:hover{background:#D6C8A2}

/* Lists and the library */
.ticks{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; max-width:62ch}
.ticks li{position:relative; padding-left:28px; font-size:19px; color:var(--ink-2)}
.ticks li::before{content:""; position:absolute; left:2px; top:.62em; width:10px; height:10px; border-radius:50%; background:var(--cham); box-shadow:0 0 8px rgba(201,185,143,.6)}
.ticks li b{color:var(--ink); font-weight:600}
.lib{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:28px}
@media (max-width:1000px){ .lib{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:640px){ .lib{grid-template-columns:minmax(0, 1fr)} }
.shelf{padding:22px; border-radius:18px; background:var(--panel); border:1px solid var(--hair)}
.shelf h3{margin:0; font-size:22px; font-weight:600; line-height:1.25}
.shelf p{margin:6px 0 0; font-size:17px; color:var(--ink-2)}
.shelf ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px}
.shelf li a{display:block; padding:8px 0; border-top:1px solid var(--hair); font-size:17px; color:var(--ink); text-decoration:none}
.shelf li a:hover{color:var(--cham)}
.shelf .more{display:inline-block; margin-top:12px; font-size:17px; color:var(--cham); text-decoration:none}

/* Quotes and notes */
.pull{margin:clamp(26px, 4vh, 40px) 0 0; max-width:30ch; font-family:var(--serif); font-size:clamp(32px, 3.4vw, 48px); line-height:1.08; text-wrap:balance}
.note{margin-top:22px; max-width:70ch; font-size:16px; color:var(--ink-3)}
.src{margin:18px 0 0; padding-left:20px; max-width:80ch; font-size:16px; color:var(--ink-3)}
.src li{margin:6px 0}
.src a{color:var(--ink-2)}
.fig{border-radius:18px; overflow:hidden; border:1px solid var(--hair)}
.fig img{width:100%; aspect-ratio:4/3; object-fit:cover}

/* What a live demo arrives as: her words from the SignalDrop page. */
.band .prose p.sd-what{margin-top:22px; font-size:22px; line-height:1.45; color:var(--ink)}
.band .prose p.sd-tag{margin-top:10px; font-family:var(--serif); font-style:italic; font-size:clamp(26px, 2.4vw, 32px); line-height:1.2; color:var(--cham)}
.prose a b{font-weight:600}

/* The last band sits clear of the footer. */
main > .band:last-child, main > section:last-child{padding-bottom:clamp(48px, 9vh, 96px)}

@media (prefers-reduced-motion:reduce){ .card{transition:none} a.card:hover{transform:none} }
.sov{display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:9px 16px; border-radius:999px; border:1px solid var(--hair2); background:var(--panel); font-size:16px; font-weight:600; color:var(--ink)}
.sov svg{width:18px; height:18px; flex:none; color:var(--cham)}