/* Federico Donatone — "From the Sun to Brooklyn"
   One stylesheet for the whole experience: chrome, story frames, encounters,
   reader and the photographic ending. Reading sizes stay at 16 px or more. */

:root{
  --paper:#f2efe9;
  --amber:#e8b07a;
  --signal:#a4e8dc;
  --sans:"Geist", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --edge:clamp(20px, 3.4vw, 56px);
  --reading-top:106px;
  --reading-bottom:104px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:#000;font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  background:#000;color:var(--paper);
  font-family:var(--sans);font-weight:400;
  overflow-x:hidden;cursor:default;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:#2a1d12;color:#fff}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--signal);outline-offset:5px}
[hidden]{display:none!important}
html.reading{overflow:hidden}

/* ————— layers ————— */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.nogl #gl{background:radial-gradient(60% 48% at 50% 44%, #2a1a0c 0%, #000 70%)}
.vig{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background:radial-gradient(76% 62% at 50% 50%, rgba(0,0,0,0) 46%, rgba(0,0,0,.62) 100%)}
.grain{position:fixed;inset:-140px;z-index:3;pointer-events:none;opacity:.06;
  background-repeat:repeat;background-size:180px 180px}
/* lvh: the journey keeps its length while a phone's address bar slides in and out */
.scroller{height:max(2400vh,17000px);height:max(2400lvh,17000px);pointer-events:none}
#space-characters{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* The photographic ending: the original photograph resized for the web, colour profile kept; the matte matches its size. */
#portrait{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;contain:layout paint;will-change:opacity}
#portrait-photo{position:absolute;height:116vh;height:116svh;width:auto;max-width:none;
  right:-3vw;bottom:-21vh;bottom:-21svh;display:block;user-select:none;
  transform-origin:50% 100%;will-change:transform}
/* The cut-out is baked into the image's alpha channel. A CSS luminance mask is ignored by WebKit
   (every browser on iPhone), which showed the whole rectangle of the photograph. */
#portrait::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 76%,rgba(11,19,22,.14) 100%)}

/* ————— header ————— */
header{position:fixed;top:0;left:0;right:0;z-index:20;height:84px;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--edge);pointer-events:none;
  background:linear-gradient(#050a12c9,transparent)}
/* The mark: an orbit whose planet travels with the scroll and closes on the centre, home.
   Under the name, the distance still to cover, from the Sun to the lawn in Brooklyn. */
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.orbit{width:38px;height:38px;flex-shrink:0;overflow:visible}
.orbit-path{fill:none;stroke:#e8b07a;stroke-opacity:.45;stroke-width:1.2;stroke-dasharray:2 3}
.orbit-home{fill:#a4e8dc;filter:drop-shadow(0 0 4px rgba(164,232,220,.8))}
.orbit-planet{fill:#e8b07a;filter:drop-shadow(0 0 5px rgba(232,176,122,.9))}
.brand-text{display:flex;flex-direction:column;gap:3px;line-height:1.1}
.brand b{font-weight:500;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:#e6e1d9}
.brand .distance{font-family:var(--mono);font-size:16px;letter-spacing:.02em;color:#bcefe5;font-variant-numeric:tabular-nums;white-space:nowrap}
.route-status{display:flex;align-items:center;gap:16px;font-size:16px;color:#f4f4ed}
.route-status b{font-size:16px;font-weight:400;letter-spacing:.04em;color:#bcefe5}
.route-status .route-index{font-size:16px;font-variant-numeric:tabular-nums;color:#d8dcdf}

/* ————— story frames ————— */
.stage{position:fixed;inset:var(--reading-top) 0 var(--reading-bottom);z-index:10;pointer-events:none}
.act{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--edge);opacity:0;visibility:hidden;will-change:opacity}
.act::before{content:'';position:fixed;inset:calc(-1 * var(--reading-top)) 30% calc(-1 * var(--reading-bottom)) 0;z-index:-1;
  background:linear-gradient(90deg,#02070fd9,rgba(2,7,15,.50) 64%,transparent);pointer-events:none}
.act.center::before{right:0;background:radial-gradient(ellipse at 50% 50%,#02070f7a,transparent 75%)}
.act.portrait-seal::before{right:28%;background:linear-gradient(90deg,#030a13df,rgba(3,10,19,.48) 55%,transparent)}
.act .inner{width:min(620px,51vw);max-width:100%;max-height:100%}
.act.center{align-items:center;text-align:center}
.act.center .inner{width:min(1050px,100%);margin:auto;text-align:center}
.act.portrait-seal .inner{width:min(740px,55vw)}

.story-page{position:relative;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;
  scrollbar-width:thin;scrollbar-color:var(--signal) transparent;
  animation:story-arrival .32s ease both}
@keyframes story-arrival{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.label,.kicker,.seal-name{display:block;font-family:var(--mono);font-size:16px;font-weight:500;
  line-height:1.55;letter-spacing:.055em;color:#dedfdc;margin-bottom:22px}
.kicker{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.name{font-weight:300;font-size:clamp(54px,8vw,114px);line-height:1.02;letter-spacing:-.045em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.55),0 0 80px rgba(0,0,0,.35)}
.name b{font-weight:500}
.say{font-weight:400;font-size:clamp(30px,3.7vw,56px);line-height:1.14;letter-spacing:-.03em;color:#f4f1ec;
  text-wrap:pretty;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.say .q{color:#d2d8dc}
.say .w{color:var(--amber)}
.sub,.intro-sub{margin-top:22px;font-weight:400;font-size:20px;line-height:1.55;letter-spacing:.002em;
  color:#e3e5e5;max-width:46ch;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.sub{text-wrap:pretty}
.intro-sub{margin-left:auto;margin-right:auto;max-width:56ch;letter-spacing:.01em;text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* data rows and the ten-orbit timeline */
.rows,.strip{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:100%}
.row,.st{display:block;min-width:0;padding:20px 0 0;border-top:1px solid #b9ced447}
.st{padding-right:10px}
.row i,.st i{display:block;font-style:normal;font-family:var(--mono);font-size:17px;line-height:1.45;
  letter-spacing:.025em;color:#f3bc8c;margin-bottom:10px}
.row b,.st b{display:block;font-weight:500;font-size:23px;line-height:1.35;letter-spacing:-.02em;color:#f5f5ee}
.row b em{font-style:normal;font-weight:400;color:var(--amber)}
.row s,.st s{display:block;text-decoration:none;margin-top:12px;font-size:18px;line-height:1.55;font-weight:400;color:#d6dce0}
.st s{line-height:1.5}

.page-position{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:16px;line-height:1.5;color:#b8c9cc}
.page-position span{margin-right:8px}
.page-position i{display:inline-block;width:22px;height:3px;border-radius:2px;background:#91b0ba40}
.page-position i.on{background:var(--signal)}

/* the ending: a quote beside the photograph */
.seal{font-weight:400;font-size:clamp(30px,3.5vw,54px);line-height:1.13;letter-spacing:-.03em;color:#f4f1ec;
  text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.7)}
.act.portrait-seal .seal-name{max-width:40ch;line-height:1.5;letter-spacing:.025em;color:#d7d5cc}
.colophon{margin-top:24px;font-family:var(--mono);font-weight:400;font-size:16px;line-height:1.8;letter-spacing:.01em;
  color:#e7e9e8;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.colophon a{display:inline-block;min-height:32px;color:#fff;text-decoration:none;pointer-events:auto;
  border-bottom:1px solid rgba(255,255,255,.25)}

/* ————— controls ————— */
#journey-controls{position:fixed;inset:auto 0 0;z-index:24;display:flex;align-items:center;gap:12px;
  padding:18px var(--edge) max(20px,env(safe-area-inset-bottom));pointer-events:none;
  background:linear-gradient(0deg,#02060fee 50%,#02060fa6 80%,transparent)}
#journey-controls button{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:10px 18px;border:1px solid #d4e2e557;border-radius:100px;background:#08101cd9;color:#f2f4ef;
  font-size:16px;font-weight:400;line-height:1.4;letter-spacing:.015em;cursor:pointer;white-space:nowrap}
#journey-controls button:hover{background:#16332f;border-color:#a5e9dc}
#journey-controls .next-stop{background:#c5eddf;color:#082a26;border-color:#c5eddf}
.tour{font-family:var(--mono)}
.tour .dot{width:22px;height:22px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}
.tour .dot::before{content:"";width:0;height:0;margin-left:2px;border-left:5px solid currentColor;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transition:.35s}
.tour.playing .dot::before{width:5px;height:6px;margin:0;border:0;background:currentColor;box-shadow:inset 0 0 0 1px #000;
  clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,62% 0,100% 0,100% 100%,62% 100%,62% 0)}
.journey-track{position:absolute;top:0;left:var(--edge);right:var(--edge);height:2px;background:#8dbdc52e;overflow:hidden}
.journey-track i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#ecb67d,#b6eee2)}
.journey-hint{margin-left:auto;color:#d2dce0;font-size:16px}

/* ————— start cue: how to begin, impossible to miss ————— */
.scroll-cue{position:fixed;left:50%;bottom:calc(var(--reading-bottom) + 10px);z-index:22;transform:translate(-50%,12px);
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 30px 12px;border:1px solid rgba(164,232,220,.45);border-radius:28px;
  background:rgba(4,10,20,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.45);
  color:#f4f1ec;font:inherit;cursor:pointer;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
.scroll-cue.on{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .8s ease .6s,transform .8s ease .6s,visibility 0s}
.scroll-cue:hover{border-color:#a4e8dc;background:rgba(10,30,34,.75)}.scroll-cue:hover .cue-text{color:#fff}
.cue-text{font-family:var(--mono);font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:#bcefe5;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.cue-mouse{display:block;width:28px;height:44px;border:2px solid #f4f1ec;border-radius:16px;position:relative;box-shadow:0 0 18px rgba(164,232,220,.35)}
.cue-mouse i{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#a4e8dc;animation:cue-wheel 1.6s ease-in-out infinite}
.cue-icon{display:block;position:relative;flex-shrink:0}
.cue-finger{display:block;width:28px;height:44px;border-radius:14px;border:2px solid rgba(244,241,236,.5);position:relative;overflow:hidden}
.cue-finger::after{content:'';position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#f4f1ec;box-shadow:0 0 12px rgba(164,232,220,.9);animation:cue-swipe 1.8s ease-in-out infinite}
.cue-arrows{display:flex;flex-direction:column;align-items:center;gap:0}
.cue-arrows i{display:block;width:14px;height:14px;margin-top:-6px;border-right:2px solid #e8b07a;border-bottom:2px solid #e8b07a;transform:rotate(45deg);animation:cue-arrow 1.6s ease-in-out infinite}
.cue-arrows i+i{animation-delay:.2s}
@keyframes cue-wheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@keyframes cue-swipe{0%{transform:translateY(28px);opacity:0}25%{opacity:1}80%{transform:translateY(4px);opacity:1}100%{transform:translateY(2px);opacity:0}}
@keyframes cue-arrow{0%,100%{opacity:.25;transform:translateY(-4px) rotate(45deg)}50%{opacity:1;transform:translateY(4px) rotate(45deg)}}
html.rm .cue-mouse i,html.rm .cue-finger::after,html.rm .cue-arrows i{animation:none}
@media (prefers-reduced-motion:reduce){.cue-mouse i,.cue-finger::after,.cue-arrows i{animation:none}}

@media (max-height:700px){
  .scroll-cue{flex-direction:row;gap:12px;padding:9px 18px;bottom:calc(var(--reading-bottom) - 2px)}
  .cue-text{font-size:16px}
  .cue-mouse,.cue-finger{width:22px;height:34px}
  .cue-arrows{display:none}
}

/* ————— encounters ————— */
#encounter{position:fixed;left:var(--edge);bottom:150px;width:min(520px,44vw);z-index:12;color:#f7f5ee;pointer-events:auto}
#encounter::before{content:'';position:absolute;inset:-30px -22px -22px;z-index:-1;border-radius:24px;pointer-events:none;
  background:linear-gradient(90deg,#02070fed,#02070fa6);filter:blur(18px)}
#encounter .transmission{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:16px;line-height:1.5;color:var(--signal)}
#encounter .transmission::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 16px var(--signal)}
#encounter h2{font-size:clamp(32px,4vw,62px);line-height:1.06;font-weight:400;letter-spacing:-.035em;max-width:14ch}
#encounter p{margin-top:22px;font-size:20px;line-height:1.55;max-width:34ch;color:#e3e8ea}
#encounter button{margin-top:24px;padding:15px 24px;border:1px solid #a1e8d9;border-radius:100px;background:#c4f7e9;color:#083f36;
  font-size:18px;line-height:1.3;font-weight:500;cursor:pointer}
#encounter button:hover{background:#edfff9;transform:translateY(-2px)}
#encounter[data-kind='duck'] button{background:#f5d289;color:#3c2a05;border-color:#ffe0a0}
#encounter .discovery{color:#ffe3aa}

/* ————— reader ————— */
#reader{width:min(860px,calc(100vw - 32px));max-height:calc(100svh - 40px);margin:auto;padding:0;
  color:#f1f3ed;background:#07111d;border:1px solid #c1deda55;border-radius:20px;box-shadow:0 40px 150px #000b}
#reader::backdrop{background:#010813c9;backdrop-filter:blur(12px)}
.reader-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 28px;background:#07111df5;border-bottom:1px solid #b2d1d52b}
.reader-bar strong{font-size:20px;font-weight:500}
.reader-bar button{padding:10px 16px;border:1px solid #c1deda55;border-radius:100px;background:none;color:#fff;font-size:18px;cursor:pointer}
.reader-body{padding:30px clamp(22px,5vw,58px) 48px;font-size:20px;line-height:1.65}
.reader-body section{margin-bottom:54px}
.reader-body h2{margin:0 0 22px;font-size:32px;line-height:1.22;letter-spacing:-.02em;font-weight:500}
.reader-body h3{margin-top:26px;font-size:23px;line-height:1.4;font-weight:500}
.reader-body p{margin-top:15px;font-size:20px;line-height:1.65;color:#e2e7ea}
.reader-body a{color:#b4eddf}
.reader-body .reader-label{margin-bottom:16px;font-size:16px;color:#f0c697}
.reader-body small{font-size:18px;line-height:1.6}
.reader-body .find{margin-bottom:16px;padding:20px;border:1px solid #87c1b85c;border-radius:14px;font-size:18px}
.reader-body .reader-links{display:flex;gap:24px;flex-wrap:wrap}

/* ————— loader ————— */
.loader{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#000;pointer-events:none;
  font-family:var(--mono);font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:#a29c93;
  transition:opacity 1.2s ease,visibility 0s}
.loader.off{opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s 1.2s}
.loader i{display:block;width:120px;height:1px;margin-top:14px;background:#2c2a27;overflow:hidden}
.loader i::after{content:"";display:block;height:100%;width:var(--w,0%);background:var(--amber);transition:width .3s}
/* indeterminate while the opening scripts download, and while New York is fetched and built */
.loader.pending i::after{width:36%;transition:none;animation:loader-pending 1.3s ease-in-out infinite}
@keyframes loader-pending{from{transform:translateX(-100%)}to{transform:translateX(280%)}}

/* ————— opt-in review panel (?qa=1) ————— */
#city-review{pointer-events:none}
#city-review select{pointer-events:auto}

/* ————— motion preferences ————— */
html.rm .story-page{animation:none}
html.rm .loader.pending i::after{animation:none;transform:translateX(90%)}
@media (prefers-reduced-motion:reduce){.story-page{animation:none}.loader.pending i::after{animation:none;transform:translateX(90%)}}

/* ————— viewports ————— */
@media (max-width:900px){
  :root{--reading-top:100px;--reading-bottom:102px}
  .act .inner{width:min(600px,100%)}
  .act::before{right:0;background:linear-gradient(90deg,#02070fd9,rgba(2,7,15,.61) 65%,rgba(2,7,15,.28))}
  .say{font-size:clamp(28px,5.8vw,42px)}
  .sub,.intro-sub{margin-top:18px;font-size:18px;line-height:1.55}
  .rows,.strip{grid-template-columns:1fr;gap:22px}
  .row,.st{padding-top:15px}
  .row b{font-size:22px}
  .row s,.st s{margin-top:8px}
  .row s{line-height:1.45}
  .label,.kicker{margin-bottom:20px}
  .act.portrait-seal{justify-content:flex-start}
  .act.portrait-seal .inner{width:100%}
  .act.portrait-seal::before{right:0;background:linear-gradient(#030a13eb,#030a13c9 28%,transparent 60%)}
  .seal{font-size:clamp(28px,5.8vw,40px);max-width:22ch}
  .act.portrait-seal .seal-name{margin-bottom:16px;line-height:1.45;max-width:42ch}
  .colophon{margin-top:18px;line-height:1.65;max-width:38ch}
  .journey-hint{display:none}
  #encounter{left:var(--edge);right:var(--edge);bottom:var(--reading-bottom);width:auto}
  /* the landing happens at the bottom of a tall screen: its caption reads at the top */
  #encounter[data-kind='landing']{top:var(--reading-top);bottom:auto}
  #encounter h2{font-size:34px;max-width:18ch}
  #encounter p{margin-top:12px;font-size:18px;line-height:1.45;max-width:34ch}
  #encounter .transmission{margin-bottom:12px}
  #encounter button{margin-top:18px;padding:12px 20px;font-size:18px}
  .brand b{font-size:16px;letter-spacing:.035em}
  .route-status{gap:10px}
  .route-status b{display:none}
  .reader-body,.reader-body p{font-size:18px}
}
@media (max-width:420px){
  :root{--edge:18px;--reading-top:90px;--reading-bottom:92px}
  header{height:76px;padding:18px var(--edge)}
  .brand{gap:9px}
  .brand b{letter-spacing:0;font-size:16px}
  .name{font-size:54px}
  .row b{font-size:21px}
  .label,.kicker{margin-bottom:16px}
  .page-position{margin-top:18px}
  #journey-controls{padding:15px var(--edge) 18px;gap:10px}
  #journey-controls button{padding:10px 15px;min-height:44px}
  #journey-controls .next-stop{padding:10px 13px}
  #encounter h2{font-size:30px}
  #encounter p{font-size:18px}
  .reader-bar{padding:15px 20px}
  .reader-bar strong{font-size:18px}
}
@media (max-width:360px){
  #journey-controls{gap:6px}
  #journey-controls button{padding:10px 11px}
  #journey-controls .tour .dot{display:none}
  .brand b{font-size:16px;letter-spacing:-.025em}
  .route-status .route-index{font-size:16px}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  /* short landscape screens: the cue sits in the control bar, on the right */
  .scroll-cue,.scroll-cue.on{left:auto;right:var(--edge);bottom:max(12px,env(safe-area-inset-bottom));transform:none;z-index:25}
  .journey-hint{display:none}
  :root{--reading-top:86px;--reading-bottom:78px}
  header{height:70px;padding:18px var(--edge)}
  .act .inner{width:min(580px,60vw)}
  .say{font-size:28px}
  .sub,.intro-sub{font-size:18px;line-height:1.4}
  .label,.seal-name{margin-bottom:12px}
  .rows,.strip{grid-template-columns:1fr}
  .page-position{margin-top:12px}
  .act.portrait-seal{justify-content:center}
  .seal{font-size:28px}
  .act.portrait-seal .seal-name{line-height:1.3}
  .colophon{margin-top:12px;line-height:1.45}
  #journey-controls{padding-top:10px;padding-bottom:12px}
  #encounter{left:var(--edge);bottom:var(--reading-bottom);width:52vw}
  #encounter h2{font-size:30px}
  #encounter p{margin-top:8px;font-size:18px;line-height:1.3}
  #encounter button{margin-top:12px;padding:10px 16px;font-size:16px}
  #encounter .transmission{margin-bottom:8px}
}
/* The photograph in portrait viewports; on phones the script positions it under the copy. */
@media (max-aspect-ratio:1/1){
  #portrait-photo{height:74vh;height:74svh;bottom:-5vh;bottom:-5svh;right:calc(50% - 29.2vh);right:calc(50% - 29.2svh)}
}
@media (min-aspect-ratio:1/2) and (max-aspect-ratio:1/1){
  #portrait-photo{height:96vh;height:96svh;right:calc(50% - 36svh);bottom:-21svh}
}
@media (min-aspect-ratio:1/1) and (max-aspect-ratio:3/2){
  #portrait-photo{height:105vh;height:105svh;bottom:-18svh;right:-6vw}
}
@media (max-aspect-ratio:1/1) and (max-height:720px){
  #portrait-photo{height:78vh;height:78svh;right:calc(50% - 29.25svh);bottom:-14svh}
}