/* The landing. Seven scenes, one at a time, nothing scrolls.

   The wording, the order and the look are the approved design and are not the
   developer's to edit: the seven headlines are asserted string for string in
   tests/test_cinema.py, so a tidy-up that "improves" a line fails the suite
   instead of shipping. Everything past the landing is a deck, drawn by
   app/jude.js from the server, and none of it is styled here. */

:root{
  --deep:#0b0c0c; --ink:#071722; --blue:#0a689c; --cyan:#18a3e9;
  --light:#63ddff; --pale:#dff6ff; --red:#c8102e;
  --muted:#bec8cf; --paper-muted:#486373;
  --signature:linear-gradient(100deg,#064163 0%,#0a689c 55%,#18a3e9 100%);
  --space:clamp(22px,5vw,88px);
  --mast:clamp(96px,13vh,132px);
  --controls:72px;
}

body[data-mode="cinema"]{
  background:#0b0c0c; color:#fff;
  font-family:Arial,"Liberation Sans",Helvetica,sans-serif;
  font-variant-numeric:tabular-nums;
  height:100dvh; overflow:hidden;                       /* the law */
}
body[data-mode="cinema"] #stage,
body[data-mode="cinema"] .mast,
body[data-mode="cinema"] .dots{display:none}
body[data-mode="app"] .site-mast,
body[data-mode="app"] .cinema{display:none}

/* ---------------------------------------------------------- the masthead */
/* The masthead sets its own height from the lockup, so the band is always in
   proportion to the name inside it. The lockup keeps its shape at every width
   because it is one SVG on a fixed viewBox: that is the whole reason it is
   not HTML text. */
.site-mast{
  background:#000;
  display:flex; align-items:center;
  padding:clamp(13px,2.3vh,26px) var(--space);
}
.site-mast a{display:block;max-width:100%}
.site-mast img{display:block;width:clamp(232px,29vw,620px);height:auto}

/* ------------------------------------------------------------ the scenes */
.cinema{
  height:100%; min-height:0;
  display:grid; grid-template-rows:minmax(0,1fr) var(--controls);
  background:var(--surface,linear-gradient(106deg,#0b0c0c 0%,#0b0e10 48%,#10232f 100%));
  transition:background .18s ease,color .18s ease;
}
.scene{
  min-height:0; overflow:hidden;                        /* the law, per scene */
  padding:clamp(18px,3vh,40px) calc(var(--space) + 30px)
          clamp(12px,2vh,32px) var(--space);
  display:flex; align-items:center;
}
.scene[hidden]{display:none!important}
.scene-copy{min-width:0}
.opening .scene-copy{max-width:940px}
.eyebrow{
  font-size:10px; line-height:1.5; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--local-muted,var(--muted)); margin:0 0 clamp(8px,1.6vh,17px);
}
.scene h1,.scene h2{
  font-size:clamp(30px,4.1vw,66px); line-height:1.06; font-weight:750;
  letter-spacing:-.045em; margin:0; text-wrap:pretty;
}
.opening-title{max-width:25ch}
.scene h2{max-width:20ch}
.verse{
  font-size:clamp(15px,1.3vw,19px); line-height:1.6;
  color:var(--local-muted,var(--muted));
  margin:clamp(10px,2vh,21px) 0 0; max-width:48ch;
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(14px,3vh,29px)}
.button{
  min-height:48px; padding:12px 23px;
  display:inline-flex; align-items:center; justify-content:center; gap:18px;
  font:700 14px/1 inherit; border:1px solid transparent; border-radius:2px;
  cursor:pointer;
}
.button.primary{background:var(--light);color:#04222f;border-color:var(--light)}
.button.primary.dark-text{background:var(--ink);color:#fff;border-color:var(--ink)}
.button.secondary{background:none;color:inherit;border-color:currentColor}
.button:focus-visible,.destinations a:focus-visible,.scene-dots button:focus-visible,
.deck-controls button:focus-visible,.site-mast a:focus-visible{
  outline:3px solid var(--light);outline-offset:3px}

.duet{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,7vw,110px);align-items:center}
.visual{position:relative;min-width:0;max-width:600px;width:100%;justify-self:end}
.visual svg{display:block;width:100%;height:auto}
.example{
  display:block;font-size:10px;color:var(--local-muted,var(--muted));
  letter-spacing:.045em;line-height:1.5;margin-bottom:clamp(8px,2vh,23px);
}
.scene[data-tone="paper"]{
  --local-muted:#486373;color:var(--ink);
  background:radial-gradient(ellipse at 98% 88%,#c8eefd 0%,transparent 57%),
             linear-gradient(110deg,#fff 15%,#f5fcff 100%);
}
.scene[data-tone="cyan"]{
  --local-muted:#315c73;color:var(--ink);
  background:radial-gradient(ellipse at 20% 10%,#fff 0%,transparent 62%),
             linear-gradient(118deg,#e7f8ff 8%,#b4e5fb 70%,#8cd6f7 100%);
}
.scene[data-tone="night"]{background:linear-gradient(106deg,#0b0c0c 0%,#0b0e10 48%,#10232f 100%)}

/* The one number on the money scene is the headline, and it opens. */
.number-link{border:0;background:none;padding:0;display:block;color:inherit;text-align:left;cursor:pointer}
.number{font-size:clamp(44px,6.9vw,100px);font-weight:750;letter-spacing:-.06em;line-height:1.08;display:block}
.number-label{font-size:13px;color:#315c73;margin-top:8px;display:block}
.scenario-row{border-top:1px solid #83bbd7;margin-top:8px}
.scenario-button{
  min-height:44px;width:100%;border:0;background:none;color:#124e70;
  display:flex;justify-content:space-between;align-items:center;font:inherit;cursor:pointer}

.destinations{display:flex;flex-direction:column;margin-top:clamp(14px,3vh,35px);max-width:430px}
.destinations a{
  display:flex;justify-content:space-between;align-items:center;
  min-height:56px;padding:clamp(8px,1.6vh,17px) 0;
  border-top:1px solid #79afce;font-size:clamp(16px,1.6vw,20px);color:inherit;text-decoration:none}
.destinations a:last-child{border-bottom:1px solid #79afce}

.scene-dots{position:fixed;top:calc(var(--mast) + 50%);right:12px;transform:translateY(-50%);z-index:30;display:grid}
.scene-dots button{width:30px;height:30px;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.scene-dots i{width:6px;height:6px;background:currentColor;opacity:.35;border-radius:50%}
.scene-dots button[aria-current="true"] i{width:9px;height:9px;background:#63ddff;opacity:1;box-shadow:0 0 15px #63ddff6b}

.deck-controls{
  height:var(--controls);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 var(--space);color:inherit}
.deck-controls button{
  min-height:44px;background:none;border:0;color:inherit;font:700 13px/1 inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px}
.deck-controls button[disabled]{opacity:.35;cursor:default}
.deck-controls .next{justify-self:center}
.scene-count{justify-self:end;font-size:10px;letter-spacing:.13em;opacity:.7}

/* ---- the phone. The duet becomes one column: words, then the picture. ---- */
@media (max-width:760px){
  .duet{grid-template-columns:1fr;gap:clamp(12px,2.5vh,26px);align-content:center}
  .visual{justify-self:start;max-width:100%}
  .scene h2{max-width:16ch}
  .verse{display:none}                 /* the picture says it on a phone */
  .scene-dots{display:none}
}
@media (max-height:560px){
  .verse{display:none}
  .example{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The controls and the dots sit on whichever scene is showing, so they take
   the ink of that scene's tone. White on a paper scene is an invisible
   control, which is the same as not having one. */
body[data-tone="paper"] .deck-controls,
body[data-tone="cyan"] .deck-controls,
body[data-tone="paper"] .scene-dots,
body[data-tone="cyan"] .scene-dots{color:var(--ink)}
body[data-tone="night"] .deck-controls,
body[data-tone="night"] .scene-dots{color:#fff}
.cinema{color:#fff}