html{scroll-behavior:smooth}
body{margin:0;background:#06090c}
a{color:#66b2ff}a:hover{color:#ffffff}
.geo *{box-sizing:border-box}
.geo ::selection{background:#007bff;color:#fff}
.geo a:focus-visible,.geo button:focus-visible{outline:2px solid #d4af37;outline-offset:4px}
/* the short gold rule that opens a section */
.rule{display:block;width:44px;height:2px;margin:0 0 26px;background:#d4af37}

/* buttons: a pill with a round arrow cap, in the family of the mark's rings */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:7px 7px 7px 28px;border-radius:34px;border:1px solid transparent;font-family:'Martian Mono',monospace;font-size:12px;line-height:1.45;letter-spacing:.13em;text-transform:uppercase;text-align:left;text-decoration:none;text-wrap:balance;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .3s,border-color .3s,color .3s}
.btn .go{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:background .3s,color .3s,border-color .3s}
.btn .go svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .go svg{transform:translateX(3px)}
.btn:hover .go--down svg{transform:translateY(3px)}
.btn--solid{background:#fff;color:#06090c;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 16px 36px -12px rgba(0,123,255,.9)}
.btn--solid .go{background:#0068d6;color:#fff}
.btn--solid:hover{color:#06090c;box-shadow:0 0 0 1px #fff,0 20px 44px -10px #007bff}
.btn--solid:hover .go{background:#d4af37;color:#06090c}
/* a band of light crosses the main button every few seconds */
.btn--solid::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,rgba(0,123,255,0),rgba(0,123,255,.22),rgba(0,123,255,0));transform:translateX(-130%) skewX(-20deg);animation:btnsheen 6.5s ease-in-out infinite;pointer-events:none}
@keyframes btnsheen{0%,62%{transform:translateX(-130%) skewX(-20deg)}92%,100%{transform:translateX(430%) skewX(-20deg)}}
.btn--line{background:rgba(6,9,12,.45);border-color:rgba(255,255,255,.42);color:#fff}
.btn--line .go{border:1px solid rgba(255,255,255,.5)}
.btn--line:hover{background:rgba(6,9,12,.7);border-color:#fff;color:#fff}
.btn--line:hover .go{background:#fff;border-color:#fff;color:#06090c}
.nav a{color:#fff;text-decoration:none;font-family:'Martian Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 4px;border-bottom:1px solid transparent;min-width:44px;text-align:center}
.nav a:hover{color:#fff;border-bottom-color:#d4af37}

/* Motion rules for this page: anything that loops moves only by transform or opacity, so it is drawn once and
   then just moved; and every loop stops while its section is off screen (the script marks it data-off). */
@keyframes turn{to{transform:rotate(360deg)}}
[data-off] :not(.rv),[data-off] :not(.rv)::before,[data-off] :not(.rv)::after{animation-play-state:paused}

/* hero: a night sky, the glass observatory, and the mark as the thing it is looking at */
.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.14)}
.stars{position:absolute;left:0;right:0;top:0;height:900px;pointer-events:none;background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 140px,#cfe4ff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 230px 190px,#fff,transparent),radial-gradient(1px 1px at 280px 90px,#9cc7ff,transparent),radial-gradient(1.5px 1.5px at 120px 250px,#fff,transparent),radial-gradient(1px 1px at 40px 210px,#fff,transparent);background-size:300px 300px;transform:translateY(calc(var(--sy,0) * .42px));animation:twinkle 5.3s ease-in-out infinite}
.stars--b{background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 140px,#cfe4ff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 230px 190px,#fff,transparent),radial-gradient(1px 1px at 280px 90px,#9cc7ff,transparent),radial-gradient(1.5px 1.5px at 120px 250px,#fff,transparent),radial-gradient(1px 1px at 40px 210px,#fff,transparent),radial-gradient(1.8px 1.8px at 60px 80px,#fff,transparent),radial-gradient(5px 5px at 60px 80px,rgba(150,195,255,.5),transparent),radial-gradient(2.2px 2.2px at 310px 240px,#e4edff,transparent),radial-gradient(6px 6px at 310px 240px,rgba(150,195,255,.45),transparent),radial-gradient(1.8px 1.8px at 190px 420px,#fff,transparent),radial-gradient(5px 5px at 190px 420px,rgba(150,195,255,.5),transparent),radial-gradient(1.6px 1.6px at 440px 120px,#fff,transparent);background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px;background-position:130px 70px,130px 70px,130px 70px,130px 70px,130px 70px,130px 70px,130px 70px,40px 90px,40px 90px,40px 90px,40px 90px,40px 90px,40px 90px,40px 90px;transform:translateY(calc(var(--sy,0) * .3px));animation-duration:7.9s;animation-delay:-4s}
.stars--still{height:100%;transform:none;animation:none;opacity:.28}
/* THE LIVING SKY. Every photograph with a sky is three layers: its sky with the stars taken out; a wheel of real stars, lifted from the
   photographs themselves, that turns slowly; and the photograph's own foreground in front. So every star moves, all together, and the
   stars pass behind the dome, the mountains and the frame of the glass roof. A wheel is drawn once and then only turned.
   --st is the width of one repeat of the star sheet; --sp is the time one turn takes. */
.swheel{position:absolute;aspect-ratio:1;background:url(/img/stars.webp) 0 0 / var(--st,40%) auto;animation:turn var(--sp,300s) linear infinite reverse}
/* a second sheet of the same stars, set differently, fades in and out over the first: the twinkle */
.swheel::after{content:"";position:absolute;inset:0;background:url(/img/stars.webp) 37% 61% / calc(var(--st,40%) * 1.37) auto;animation:twinkle 5.3s ease-in-out infinite}
/* Above the photograph the hero's sky stays dark, with only a few stars, so the words read clearly. Those few ride a wheel that turns
   about a point high above the dome (--wx, --wy), the way the night sky turns about its pole. The wheel is a square big enough to cover the sky from that
   point; a frame the size of the sky cuts it off. --spt is the time one turn takes up here; --sph the time inside the photograph. */
.hero{--gut:clamp(20px,3.6vw,64px);--pw:min(80vw,1180px);--mw:clamp(240px,27vw,420px);--wx:calc(100% - var(--pw) * .215);--wy:calc(64px + clamp(300px,30vw,460px) / 2);--wd:calc(175vw + 700px);--spt:760s;--sph:760s}
.skyclip{position:absolute;left:0;right:0;top:0;height:900px;overflow:hidden;pointer-events:none;transform:translateY(calc(var(--sy,0) * .36px))}
.wheel{position:absolute;left:var(--wx);top:var(--wy);width:var(--wd);height:var(--wd);margin:calc(var(--wd) / -2) 0 0 calc(var(--wd) / -2);animation:turn var(--spt) linear infinite reverse}
.wheel .stars{inset:0;height:auto;transform:none}
/* Inside the hero photograph the real stars turn about the same point. How fast a star crosses the screen grows with its distance from
   that point, and on a phone the photograph lies well below it; so there this wheel is given a longer turn (--sph), and its stars cross
   the screen at the same pace as the ones above. */
.swheel--hero{left:78.5%;top:12.6%;width:180%;margin:-90% 0 0 -90%;--st:42%;--sp:var(--sph)}
/* Single soft clouds. Each drifts along its own line and fades in and out at the ends of it, so no cloud is ever cut off by an edge.
   --pa is how solid it is, --px how far it travels (in its own widths). */
.puff{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(212,224,255,var(--pa,.3)),rgba(212,224,255,0) 68%);opacity:0;animation:puff 90s linear infinite}
@keyframes puff{0%{opacity:0;transform:translateX(0)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(var(--px,-200%))}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.85}}
@keyframes twinkle2{0%,100%{opacity:.9}40%{opacity:.1}70%{opacity:.6}}
/* single stars that flare with a glint, each on its own beat; a shooting star now and then; one slow satellite */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform:translateY(calc(var(--sy,0) * .34px))}
.tw{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(170,205,255,.65);animation:tw 7s ease-in-out infinite}
.tw::before,.tw::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1px;margin:-.5px 0 0 -6.5px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0))}
.tw::after{transform:rotate(90deg)}
/* mostly a faint point; twice in each cycle it flares briefly */
@keyframes tw{0%,100%{opacity:.08;transform:scale(.4)}7%{opacity:.7;transform:scale(1)}15%{opacity:.12;transform:scale(.45)}57%{opacity:.08;transform:scale(.4)}64%{opacity:.55;transform:scale(.85)}72%{opacity:.08;transform:scale(.4)}}
/* The hero's three shooting stars (two above, one inside the photograph) share one 24-second cycle, eight seconds apart, so two are
   never in the sky at once. */
.shoot{position:absolute;left:66%;top:90px;width:170px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(215,232,255,.95),rgba(215,232,255,0));opacity:0;animation:shoot 24s linear 2s infinite}
.shoot--b{left:38%;top:230px;width:120px;animation:shootb 24s linear 10s infinite}
.kb .shoot--p{left:66%;top:28%;width:11%;animation:shootp 24s linear 18s infinite}
@keyframes shoot{0%{opacity:0;transform:rotate(-22deg) translateX(0)}.45%{opacity:1}2.8%{opacity:1}4.1%{opacity:0;transform:rotate(-22deg) translateX(-560px)}100%{opacity:0;transform:rotate(-22deg) translateX(-560px)}}
@keyframes shootb{0%{opacity:0;transform:rotate(-34deg) translateX(0)}.5%{opacity:.9}3.1%{opacity:.9}4.8%{opacity:0;transform:rotate(-34deg) translateX(-420px)}100%{opacity:0;transform:rotate(-34deg) translateX(-420px)}}
@keyframes shootp{0%{opacity:0;transform:rotate(-24deg) translateX(0)}.35%{opacity:1}2%{opacity:1}3%{opacity:0;transform:rotate(-24deg) translateX(-320%)}100%{opacity:0;transform:rotate(-24deg) translateX(-320%)}}
.sat{position:absolute;left:4%;top:300px;width:2px;height:2px;border-radius:50%;background:#e6eeff;box-shadow:0 0 4px rgba(200,220,255,.9);opacity:0;animation:sat 38s linear 6s infinite}
@keyframes sat{0%{opacity:0;transform:translate(0,0)}4%{opacity:.85}42%{opacity:.85}46%{opacity:0;transform:translate(64vw,-150px)}100%{opacity:0;transform:translate(64vw,-150px)}}
.photo{position:absolute;right:0;bottom:0;width:var(--pw);aspect-ratio:3/2;pointer-events:none;transform:translateY(calc(var(--sy,0) * .14px));will-change:transform}
.photo-in{position:absolute;inset:0;transform:translate(calc(var(--px,0) * -14px),calc(var(--py,0) * -8px));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kb{position:absolute;inset:0;transform-origin:82% 52%;animation:drift 36s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 26%,#000 54%),linear-gradient(to bottom,transparent 0%,#000 34%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 26%,#000 54%),linear-gradient(to bottom,transparent 0%,#000 34%);mask-composite:intersect}
.kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes drift{from{transform:scale(1) translateX(0)}to{transform:scale(1.07) translateX(-1%)}}
.lamp{position:absolute;left:68%;top:35%;width:30%;height:32%;background:radial-gradient(ellipse at center,rgba(255,206,130,.4),rgba(255,206,130,0) 66%);animation:lamp 5s ease-in-out infinite}
@keyframes lamp{0%,100%{opacity:.1}50%{opacity:1}}
/* the photograph, alive: the Milky Way breathes, its stars flicker, mist drifts over the cloud sea, light slides across the glass */
.mw{position:absolute;left:9%;top:22%;width:64%;height:26%;transform:rotate(38deg);background:radial-gradient(ellipse at center,rgba(150,195,255,.26),rgba(150,195,255,0) 66%);animation:mw 9s ease-in-out infinite}
@keyframes mw{0%,100%{opacity:.08}50%{opacity:1}}
.mist{position:absolute;left:2%;top:70%;width:40%;height:24%;background:radial-gradient(ellipse at center,rgba(205,220,255,.2),rgba(205,220,255,0) 68%);animation:mist 26s ease-in-out infinite alternate}
.mist--b{left:20%;top:78%;width:36%;height:20%;background:radial-gradient(ellipse at center,rgba(215,226,255,.16),rgba(215,226,255,0) 68%);animation-duration:38s;animation-direction:alternate-reverse}
@keyframes mist{from{transform:translateX(-9%)}to{transform:translateX(14%)}}
/* cloud drifts through without end: two soft banks, the nearer one quicker, crossing the sea of cloud and the foot of the dome.
   Each bank is a pattern that repeats, moved along by exactly one repeat, so there is never a jump. */
.cloud{position:absolute;left:-10%;top:67%;width:240%;height:33%;background-repeat:repeat-x;background-size:50% 100%;background-image:radial-gradient(ellipse 13% 36% at 12% 62%,rgba(208,222,255,.26),rgba(208,222,255,0) 70%),radial-gradient(ellipse 18% 42% at 38% 48%,rgba(208,222,255,.2),rgba(208,222,255,0) 70%),radial-gradient(ellipse 11% 30% at 61% 70%,rgba(208,222,255,.26),rgba(208,222,255,0) 70%),radial-gradient(ellipse 15% 38% at 85% 44%,rgba(208,222,255,.18),rgba(208,222,255,0) 70%);animation:cloudx 96s linear infinite}
.cloud--b{top:57%;height:27%;background-image:radial-gradient(ellipse 16% 40% at 20% 55%,rgba(200,214,250,.15),rgba(200,214,250,0) 70%),radial-gradient(ellipse 12% 34% at 52% 40%,rgba(200,214,250,.13),rgba(200,214,250,0) 70%),radial-gradient(ellipse 17% 44% at 80% 62%,rgba(200,214,250,.15),rgba(200,214,250,0) 70%);animation-duration:158s}
@keyframes cloudx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sheen{position:absolute;left:68.9%;top:36.4%;width:27.4%;height:24.6%;border-radius:50% 50% 0 0 / 100% 100% 0 0;overflow:hidden}
.sheen::before{content:"";position:absolute;left:-22%;top:-10%;width:11%;height:120%;background:linear-gradient(90deg,rgba(255,208,140,0),rgba(255,208,140,.15) 34%,rgba(255,232,188,.3) 50%,rgba(255,208,140,.15) 66%,rgba(255,208,140,0));transform:skewX(-18deg) translateX(0);animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,58%{transform:skewX(-18deg) translateX(0)}86%,100%{transform:skewX(-18deg) translateX(1180%)}}
.gl{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:#fff;box-shadow:0 0 7px 2px rgba(255,236,190,.95);opacity:0;animation:gl 7s ease-in-out infinite}
.gl::before,.gl::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:1px;margin:-.5px 0 0 -8.5px;background:linear-gradient(90deg,rgba(255,244,214,0),rgba(255,244,214,.95),rgba(255,244,214,0))}
.gl::after{transform:rotate(90deg)}
@keyframes gl{0%,70%,100%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1.15)}90%{opacity:0;transform:scale(.4)}}
.beam{position:absolute;left:78.5%;bottom:61%;width:26%;height:92%;margin-left:-13%;background:conic-gradient(from -9deg at 50% 100%,rgba(102,178,255,0) 0deg,rgba(102,178,255,.32) 9deg,rgba(102,178,255,0) 18deg,rgba(102,178,255,0) 360deg);-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 45%,transparent 92%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 45%,transparent 92%);animation:beam 7s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.35}50%{opacity:1}}
/* The mark, on wide screens: it stands straight above the dome with a set gap between them, to the right of the headline, and touches
   neither. It is tied to the photograph, not to the words: its lowest ring is 44px above the highest the dome's top ever reaches
   (the dome's top is 33.2% down the photograph when the slow zoom is at its fullest, so 44.53% of the photograph's width above
   the hero's foot), and the rings fill 90% of the mark's box. The headline's size (8vw) and the mark's (27vw) are set together
   so the longest line stops short of the rings: change one and check the other.
   On phones and tablets (further down) there is no room beside the words, so the mark sits behind the headline, level with its
   middle: there it is placed inside the box that holds the small line and the headline (.hh-box); 21px is half the small line.
   --pw is the photograph's width, --mw the mark's, --gut the side gutter of the header and the hero, which run nearer the edges
   of the screen than the sections below. */
.hh-box > p,.hh-box > h1,.hero-pad > div.up{position:relative;z-index:1}
.nb{white-space:nowrap}
.hero-art{position:absolute;right:calc(var(--pw) * .215 - var(--mw) / 2);bottom:calc(var(--pw) * .4453 + 44px - var(--mw) * .05);width:var(--mw);aspect-ratio:1;pointer-events:none;transform:translateY(calc(var(--sy,0) * -.2px)) scale(calc(1 + var(--sy,0) * .0004));will-change:transform}
.hero-art-in{position:absolute;inset:0;transform:translate(calc(var(--px,0) * 22px),calc(var(--py,0) * 14px));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(0,123,255,.36),rgba(0,123,255,0) 64%);animation:halo 6s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(.88);opacity:.55}50%{transform:scale(1.08);opacity:1}}
.rays{position:absolute;inset:-12%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(102,178,255,.11) 0deg 1.6deg,rgba(102,178,255,0) 1.6deg 25.714deg);-webkit-mask-image:radial-gradient(circle,transparent 16%,#000 30%,transparent 66%);mask-image:radial-gradient(circle,transparent 16%,#000 30%,transparent 66%);animation:turn 140s linear infinite reverse}
.spin{position:absolute;inset:0;animation:turn 180s linear infinite}
.spin svg,.pzs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hr{fill:none;stroke:rgba(255,255,255,.36);stroke-width:.7;stroke-dasharray:579;stroke-dashoffset:579;animation:draw 2.6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* one ring of the mark, as a box: used lit in blue (hero and the seven outcomes) and as the track of a travelling light */
.lit,.orb{position:absolute;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;pointer-events:none}
.lit{border:1.5px solid #1f88ff;box-shadow:0 0 16px rgba(0,123,255,.75),inset 0 0 16px rgba(0,123,255,.45);opacity:0;transition:opacity 1.4s}
.lit.on{opacity:1}
.orb{animation:turn 9s linear infinite}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.3px solid #fff;-webkit-mask-image:conic-gradient(from 0deg,transparent 0deg 332deg,#000 360deg);mask-image:conic-gradient(from 0deg,transparent 0deg 332deg,#000 360deg);opacity:.9}
.orb::after{content:"";position:absolute;left:50%;top:0;width:5px;height:5px;margin:-2px 0 0 -2.5px;border-radius:50%;background:#e8c65a;box-shadow:0 0 8px 2px rgba(212,175,55,.85)}
.core{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#d4af37;box-shadow:0 0 12px 3px rgba(212,175,55,.6)}
.pz{fill:none;stroke:#66b2ff;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transform-origin:200px 200px}
.pz.a{animation:pza 1.5s ease-out}
.pz.b{animation:pzb 1.5s ease-out}
@keyframes pza{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(9)}}
@keyframes pzb{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(9)}}

/* the headline keeps her blue; a soft glow of the same blue sits behind it */
.hh{margin:0;max-width:1180px;font-family:'Antonio',sans-serif;font-weight:700;font-size:clamp(50px,8vw,124px);line-height:.98;letter-spacing:-.005em;text-transform:uppercase;color:#007bff;text-shadow:0 0 34px rgba(0,123,255,.3)}

/* hero entrance: the resting state is visible, so the words can never be left hidden */
.up{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* scroll reveal where the browser supports it; fully visible everywhere else */
@supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  @keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}

/* a photograph in a frame: it drifts inside the frame as the page moves, and a dark veil lifts as it nears the middle of the screen */
.band{position:relative;overflow:hidden;height:clamp(280px,40vw,580px);background:#04070b;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.band--road{height:clamp(300px,46vw,680px)}
.band-in{position:absolute;left:0;right:0;top:-14%;height:128%;transform:translateY(calc(var(--o,0) * 1px));will-change:transform}
.band-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a box the exact size and place a band's photograph needs to cover its frame; the photograph and everything laid over it live inside, so each light lands on the right spot */
.band--road .band-in{container-type:size}
.ibox{position:absolute;left:50%;top:50%;width:100%;height:100%;width:max(100cqw,150cqh);height:max(100cqh,66.667cqw);transform:translate(-50%,-50%)}
.veil{position:absolute;inset:0;background:#04070c;opacity:calc(.8 - var(--c,1) * .8);pointer-events:none}
/* The glowing seam. It breathes, and a tight band of light runs along it, with a fainter one behind. All three only brighten what is
   already bright, so the light stays inside the blue seam (and flares the gold flecks as it passes) while the dark stone stays dark. */
.sglow{position:absolute;left:0;right:0;top:38.5%;height:13%;background:linear-gradient(180deg,rgba(104,118,150,0),rgba(104,118,150,.62) 28%,rgba(104,118,150,.62) 72%,rgba(104,118,150,0));mix-blend-mode:color-dodge;animation:mw 5.5s ease-in-out infinite}
.sweep{position:absolute;left:0;top:38.5%;width:14%;height:13%;background:radial-gradient(ellipse 50% 62% at center,rgba(132,144,168,.98),rgba(132,144,168,.55) 42%,rgba(132,144,168,0) 100%);mix-blend-mode:color-dodge;animation:sweep 4.4s linear infinite}
.sweep--b{width:8%;opacity:.7;animation-duration:7.1s;animation-delay:-2.6s}
@keyframes sweep{from{transform:translateX(-110%)}to{transform:translateX(830%)}}
/* the line between the two halves of the page: no photograph (Kate, 2026-10-13), so the band is only as tall as its words */
.band--strata{height:auto;padding-bottom:clamp(28px,5vw,76px)}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,12,.95) 0%,rgba(4,7,12,.84) 30%,rgba(4,7,12,0) 60%)}

/* the layer stack: the top layer holds its place and the others rise from below to meet it, the missing layer last.
   Nothing ever travels upward out of the stack, so it cannot run into the words above it. */
.stack-wrap{flex:1 1 380px;min-width:0;padding:36px 0 40px}
.stack{display:flex;flex-direction:column;align-items:stretch}
.lrow{display:flex;align-items:center;gap:18px;height:46px;position:relative;transform:translateY(calc((1 - var(--p,1)) * var(--d,0px)));will-change:transform}
.lrow:nth-child(2){--d:26px}.lrow:nth-child(3){--d:56px}.lrow:nth-child(4){--d:90px}
.lrow:nth-child(5){--d:180px;opacity:calc(.15 + var(--p,1) * .85)}
.lhold{flex:0 0 250px;height:46px;position:relative}
.plate{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;transform:scaleY(.4695) rotate(45deg);border:1px solid rgba(255,255,255,.5);background:rgba(10,20,28,.9)}
.plate--geo{border-color:#66b2ff;background:rgba(0,123,255,.34);box-shadow:0 0 34px rgba(0,123,255,.5)}
.plate--geo::after{content:"";position:absolute;inset:0;box-shadow:0 0 90px 10px rgba(0,123,255,.9);opacity:0;animation:glow 3.6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:0}50%{opacity:1}}
.ltick{flex:0 0 38px;height:1px;background:rgba(255,255,255,.35)}
.ltick--geo{background:#66b2ff}

/* claim lifecycle */
.life{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
.rail{position:absolute;left:8.33%;right:8.33%;top:9px;height:1px;background:rgba(255,255,255,.22);overflow:hidden}
.rail span{position:absolute;top:0;left:0;width:22%;height:1px;background:linear-gradient(90deg,transparent,#66b2ff,#fff);animation:run 5s linear infinite}
@keyframes run{from{transform:translateX(-100%)}to{transform:translateX(455%)}}
.node{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:0 6px}
.dot{width:19px;height:19px;border-radius:50%;border:1px solid #66b2ff;background:#06090c;position:relative;z-index:1}
.dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#007bff}

/* seven rings, seven outcomes: the mark stands on the plateau and each ring answers to its number */
.scene{position:relative;overflow:hidden;aspect-ratio:4/5;max-width:560px;margin:0 auto;background:#04070b;border:1px solid rgba(255,255,255,.14)}
/* the plateau photograph, alive: it drifts behind the mark as the page moves and slowly breathes; its stars flicker, the Milky Way glows,
   mist crosses the ridgelines, light runs over the wet rock, and every ring the mark lights sends a ripple across the pool beneath it.
   Everything laid over the photograph is placed in the photograph's own box, so it stays on the right star and the right pool. */
.scene-in{position:absolute;top:-6%;left:-67.6%;width:210%;height:112%;transform:translateY(calc(var(--o,0) * .34px));will-change:transform}
.scene-kb{position:absolute;inset:0;transform-origin:56% 80%;animation:skb 44s ease-in-out infinite alternate}
@keyframes skb{from{transform:scale(1)}to{transform:scale(1.06)}}
.scene-kb>img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
/* its stars turn about the mark standing on the plateau */
.swheel--plat{left:56%;top:44%;width:84%;margin:-42% 0 0 -42%;--st:90%}
.smw{position:absolute;left:54%;top:10%;width:46%;height:22%;transform:rotate(43deg);background:radial-gradient(ellipse at center,rgba(150,190,255,.3),rgba(150,190,255,0) 66%);animation:mw 9s ease-in-out infinite}
.shoot--s{left:63%;top:8%;width:9%;animation:shoots 19s linear 5s infinite}
@keyframes shoots{0%{opacity:0;transform:rotate(-24deg) translateX(0)}.7%{opacity:1}4%{opacity:1}6%{opacity:0;transform:rotate(-24deg) translateX(-320%)}100%{opacity:0;transform:rotate(-24deg) translateX(-320%)}}
.pool{position:absolute;left:38%;top:63%;width:36%;height:34%;background:radial-gradient(ellipse at center,rgba(0,123,255,.26),rgba(0,123,255,0) 66%);animation:mw 7s ease-in-out infinite}
.gcol{position:absolute;left:53.4%;top:69%;width:5.4%;height:26%;background:radial-gradient(ellipse at center,rgba(255,205,130,.42),rgba(255,205,130,0) 70%);animation:lamp 4.6s ease-in-out infinite}
/* thin lines of light that slide across the water and fade, each on its own beat */
.wl{position:absolute;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,rgba(170,215,255,0),rgba(170,215,255,.95),rgba(170,215,255,0));opacity:0;animation:wl 5.5s ease-in-out infinite}
.wl--g{background:linear-gradient(90deg,rgba(255,222,160,0),rgba(255,222,160,.95),rgba(255,222,160,0))}
@keyframes wl{0%,100%{opacity:0;transform:translateX(-22%) scaleX(.5)}45%{opacity:.58;transform:translateX(4%) scaleX(1)}72%{opacity:0;transform:translateX(22%) scaleX(.7)}}
/* the ripple: two rings lying flat on the water, sent out each time the active ring changes */
.rip{position:absolute;left:56%;top:81%;width:40%;aspect-ratio:4.4;border-radius:50%;border:2px solid rgba(160,210,255,.98);box-shadow:0 0 14px rgba(0,123,255,.55);opacity:0;transform:translate(-50%,-50%) scale(.08)}
.rip.a{animation:ripa 2.8s cubic-bezier(.2,.6,.3,1)}
.rip.b{animation:ripb 2.8s cubic-bezier(.2,.6,.3,1)}
.rip--2.a,.rip--2.b{animation-delay:.42s}
@keyframes ripa{0%{opacity:.95;transform:translate(-50%,-50%) scale(.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes ripb{0%{opacity:.95;transform:translate(-50%,-50%) scale(.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
/* More life in the wet ground. Two fields of small soft lights slide across it in different directions and only what already shines answers
   them, so the reflections glitter like light on moving water while the dark rock stays dark. Slow rings keep spreading from under the mark,
   and now and then a drop lands in one of the pools. */
.wet{position:absolute;left:26%;top:66%;width:60%;height:34%;overflow:hidden}
.glit{position:absolute;inset:-60px;background-image:radial-gradient(circle at 22% 30%,rgba(118,128,150,.55),rgba(118,128,150,0) 24%),radial-gradient(circle at 70% 64%,rgba(118,128,150,.45),rgba(118,128,150,0) 20%);background-size:30px 22px;mix-blend-mode:color-dodge;animation:glit 2.4s linear infinite}
.glit--b{background-size:44px 30px;animation:glitb 3.9s linear infinite}
@keyframes glit{from{transform:translate(0,0)}to{transform:translate(-30px,-22px)}}
@keyframes glitb{from{transform:translate(0,0)}to{transform:translate(44px,-30px)}}
.rip0{position:absolute;left:56%;top:81%;width:30%;aspect-ratio:4.4;border-radius:50%;border:1px solid rgba(150,205,255,.6);opacity:0;transform:translate(-50%,-50%) scale(.08);animation:rip0 6.4s linear infinite}
.rip0--b{animation-delay:-3.2s}
@keyframes rip0{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}8%{opacity:.36}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.drip{position:absolute;width:5.4%;aspect-ratio:3.6;border-radius:50%;border:1px solid rgba(176,218,255,.95);opacity:0;transform:translate(-50%,-50%) scale(.1);animation:drip 6s ease-out infinite}
@keyframes drip{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}3%{opacity:.6}26%{opacity:0;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.scene .veil{opacity:calc(.7 - var(--c,1) * .7)}
.shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 58% at 50% 41%,rgba(4,7,12,.62) 0%,rgba(4,7,12,.4) 55%,rgba(4,7,12,.12) 100%)}
.rose{position:absolute;left:11%;top:12.1%;width:78%;aspect-ratio:1}
.rose svg{display:block;width:100%;height:100%;overflow:visible;-webkit-box-reflect:below -14.4% linear-gradient(to bottom,transparent 52%,rgba(255,255,255,.26))}
.ring{fill:none;stroke:rgba(255,255,255,.36);stroke-width:1.1;transition:stroke .45s,stroke-width .45s}
.ring.seen{stroke:rgba(255,255,255,.74)}
.ring.on{stroke:#4a9dff;stroke-width:2.4}
.rb{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(6,9,12,.82);color:#c3ced6;font-family:'Martian Mono',monospace;font-size:11px;letter-spacing:.06em;cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .3s}
.rb:hover{border-color:#fff;color:#fff}
.rb.seen{border-color:rgba(255,255,255,.8);color:#fff}
.rb.on{background:#0068d6;border-color:#66b2ff;color:#fff;transform:scale(1.14)}
.said{display:none}
.said b{display:block;font-weight:500}
.said b::first-letter{text-transform:uppercase}
.oc{display:flex;align-items:baseline;gap:20px;width:100%;min-height:58px;padding:16px 0;background:none;border:0;border-top:1px solid rgba(255,255,255,.14);color:#a9b7c2;font-family:'Instrument Sans',sans-serif;font-size:19px;line-height:1.35;text-align:left;cursor:pointer;transition:color .3s,padding .3s}
.oc span{font-family:'Martian Mono',monospace;font-size:11px;letter-spacing:.14em;color:#7d8d99;transition:color .3s}
.oc:hover{color:#fff}
.oc.on{color:#fff;padding-left:14px}
.oc.on span{color:#d4af37}
.oc b{display:block;font-weight:400}
.oc b::first-letter{text-transform:uppercase}

/* audiences */
.tape{display:flex;overflow:hidden;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.tape div{display:flex;flex:0 0 auto;gap:56px;padding:26px 28px;animation:tape 46s linear infinite}
.tape:hover div{animation-play-state:paused}
.tape p{margin:0;white-space:nowrap;font-family:'Antonio',sans-serif;font-weight:600;font-size:34px;letter-spacing:.02em;text-transform:uppercase;color:#d4af37}
@keyframes tape{to{transform:translateX(-100%)}}
/* the five capabilities: dark glass cards, each with a small diagram drawn in the rings-and-dots of the mark.
   A card is "live" (data-on, set by the script) while most of it is on screen: its diagram resolves, its corner lights, its base line fills. */
.caps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cap{position:relative;overflow:hidden;padding:20px 20px 24px;display:flex;flex-direction:column;gap:16px;background:linear-gradient(155deg,#0f1d29 0%,#080d12 58%,#06090c 100%);border:1px solid rgba(255,255,255,.13);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.cap:nth-child(2){--dl:.1s}.cap:nth-child(3){--dl:.2s}.cap:nth-child(4){--dl:.3s}.cap:nth-child(5){--dl:.4s}
.cap::before{content:"";position:absolute;inset:0;background:radial-gradient(210px circle at var(--mx,30%) var(--my,10%),rgba(0,123,255,.22),rgba(0,123,255,0) 70%);opacity:0;transition:opacity .6s var(--dl,0s);pointer-events:none}
.cap[data-on]::before,.cap:hover::before{opacity:1}
.cap::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,#007bff,#66b2ff);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.7,.2,1) var(--dl,0s)}
.cap[data-on]::after{transform:scaleX(1)}
.cap:hover{transform:translateY(-6px);border-color:rgba(102,178,255,.5)}
.cap-top{position:relative;display:flex}
.cap-t{position:relative;margin:0;font-weight:600;font-size:clamp(15.5px,1.22vw,17.5px);line-height:1.27;color:#fff}
.gly{flex:0 0 auto;width:76px;height:76px;margin:0 0 0 -6px;overflow:visible}
.gly *{fill:none;stroke:rgba(255,255,255,.78);stroke-width:1.8;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--dl,0s),opacity .9s var(--dl,0s),stroke .9s var(--dl,0s),fill .9s var(--dl,0s),stroke-dasharray .9s cubic-bezier(.2,.7,.2,1) var(--dl,0s)}
.gly .ga{stroke:#66b2ff}
.gly .gd{fill:#d4af37;stroke:none}
.gly .pt{fill:rgba(255,255,255,.5);stroke:none}
.gly .dm{stroke:rgba(255,255,255,.34)}
.g4 line{stroke-width:2.6}
/* 01 rules: ragged lines of text become even rows of cells */
.g1 .l1{stroke-dasharray:43 100}.g1 .l2{stroke-dasharray:26 100}.g1 .l3{stroke-dasharray:36 100}.g1 .l4{stroke-dasharray:19 100}
.g1 .gd{transform:scale(0)}
[data-on] .g1 .l1,[data-on] .g1 .l2,[data-on] .g1 .l3,[data-on] .g1 .l4{stroke-dasharray:8 4;stroke:#66b2ff}
[data-on] .g1 .gd{transform:scale(1)}
/* 02 point of care: the sight closes on its point */
.g2 .o{transform:scale(1.22) rotate(40deg);stroke-dasharray:6 8;opacity:.5}
.g2 .n{transform:translateY(-9px)}.g2 .e{transform:translateX(9px)}.g2 .s{transform:translateY(9px)}.g2 .w{transform:translateX(-9px)}
.g2 .i{opacity:.35}
.g2 .gd{transform:scale(0)}
[data-on] .g2 .o{transform:none;stroke-dasharray:14 0;opacity:1}
[data-on] .g2 .n,[data-on] .g2 .e,[data-on] .g2 .s,[data-on] .g2 .w{transform:none}
[data-on] .g2 .i{opacity:1}
[data-on] .g2 .gd{transform:scale(1)}
/* 03 individualized review: the lens settles on one claim among many */
.g3 .lens{transform:translate(30px,30px)}
[data-on] .g3 .lens{transform:translate(70px,50px)}
[data-on] .g3 .hit{fill:#d4af37;transform:scale(1.9)}
/* 04 normalization: loose strokes fall into a grid */
.g4 .a{transform:translate(-9px,7px) rotate(64deg)}.g4 .b{transform:translate(6px,-10px) rotate(-38deg)}.g4 .c{transform:translate(11px,5px) rotate(118deg)}
.g4 .d{transform:translate(-7px,-5px) rotate(-71deg)}.g4 .e{transform:translate(4px,9px) rotate(27deg)}.g4 .f{transform:translate(-12px,-2px) rotate(151deg)}
.g4 .g{transform:translate(5px,11px) rotate(-19deg)}.g4 .h{transform:translate(-8px,-11px) rotate(83deg)}.g4 .i{transform:translate(10px,-7px) rotate(-56deg)}
[data-on] .g4 line{transform:none}
[data-on] .g4 .e{stroke:#d4af37}
/* 05 integration: two rings come together */
.g5 .a{transform:translateX(-13px)}.g5 .b{transform:translateX(13px)}
.g5 .in{transform:translateX(-10px);opacity:.3}.g5 .out{transform:translateX(10px);opacity:.3}
.g5 .gd{transform:scale(0)}
[data-on] .g5 .a,[data-on] .g5 .b,[data-on] .g5 .in,[data-on] .g5 .out{transform:none;opacity:1}
[data-on] .g5 .gd{transform:scale(1)}

/* adoption: the road to the observatory lights up as the page moves, and the three phases fill with it */
.road{position:absolute;inset:0;width:100%;height:100%}
/* the road's stars turn about a point high above the left of the picture, so they drift across the dawn */
.swheel--road{left:30%;top:-30%;width:170%;margin:-85% 0 0 -85%;--st:45%;--sp:800s}
/* the country behind the road, alive: stars and the Milky Way above, the first sun breathing on the horizon, cloud drifting in the valleys,
   and the observatory's own light, which wavers like a lamp and now and then sends a thin beam upward */
.dawn{position:absolute;left:0;top:26%;width:72%;height:14%;background:radial-gradient(ellipse 50% 50% at 38% 64%,rgba(255,176,96,.4),rgba(255,176,96,0) 100%);animation:lamp 9s ease-in-out infinite}
.sunspot{position:absolute;left:27.2%;top:35.4%;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:50%;background:radial-gradient(circle,rgba(255,228,176,.78),rgba(255,192,112,.26) 30%,rgba(255,192,112,0) 68%);animation:halo 7s ease-in-out infinite}
/* cloud at several depths drifts through the valleys and across the far ridges, the nearest quickest (single clouds: see .puff) */
/* the sun comes up with the road: as the lanterns light, its glow strengthens and lifts a little; thin rays fan out from it and breathe */
.sunrise{position:absolute;inset:0;opacity:calc(.5 + var(--p,1) * .5);transform:translateY(calc((1 - var(--p,1)) * 1.6%))}
.ray{position:absolute;left:27.2%;top:35.4%;height:2.2%;margin-top:-.73%;transform-origin:0 50%;transform:rotate(var(--a,-30deg));background:linear-gradient(90deg,rgba(255,208,144,.55),rgba(255,208,144,0));filter:blur(5px);opacity:.3;animation:ray 9s ease-in-out infinite}
@keyframes ray{0%,100%{opacity:.12}50%{opacity:.8}}
/* one slow satellite crosses the stars */
.rsat{position:absolute;left:30%;top:12%;width:2px;height:2px;border-radius:50%;background:#e6eeff;box-shadow:0 0 4px rgba(200,220,255,.9);opacity:0;animation:rsat 44s linear 3s infinite}
@keyframes rsat{0%{opacity:0;transform:translate(0,0)}4%{opacity:.85}50%{opacity:.85}54%{opacity:0;transform:translate(40cqw,5cqw)}100%{opacity:0;transform:translate(40cqw,5cqw)}}
.dlamp{position:absolute;left:86.7%;top:23.4%;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;background:radial-gradient(circle,rgba(255,216,144,.62),rgba(255,198,112,.2) 34%,rgba(255,198,112,0) 68%);animation:flick 5.2s linear infinite}
@keyframes flick{0%,100%{opacity:.5}9%{opacity:.95}13%{opacity:.6}19%{opacity:1}34%{opacity:.7}52%{opacity:.92}58%{opacity:.45}71%{opacity:.88}86%{opacity:.6}}
.dbeam{position:absolute;left:86.2%;top:1%;width:1.1%;height:20.5%;border-radius:2px;background:linear-gradient(to top,rgba(255,228,172,.6),rgba(255,228,172,0));animation:dbeam 11s ease-in-out infinite}
@keyframes dbeam{0%,52%,100%{opacity:0}64%{opacity:1}76%{opacity:.55}84%{opacity:.9}94%{opacity:0}}
.road-glow,.road-core{fill:none;stroke-linecap:round;stroke-dasharray:1px;stroke-dashoffset:calc((1 - var(--p,1)) * 1px)}
.road-glow{stroke:rgba(255,196,110,.2);stroke-width:13}
.road-core{stroke:rgba(255,228,176,.85);stroke-width:2.2}
.lan{opacity:clamp(0,calc((var(--p,1) - var(--t,0)) * 40 + 1),1)}
.lan--dome{opacity:clamp(0,calc((var(--p,1) - var(--t,0)) * 40 + 1),.8)}
.path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.step{padding:26px 24px 0 0;border-top:1px solid rgba(255,255,255,.3);position:relative}
/* the three phases play on a loop: each gold line draws in turn, its name lights when the line arrives, all three hold, then it begins again.
   With motion off the lines simply sit drawn and the names lit. */
.step::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:#d4af37;z-index:1;animation:pd1 7.5s ease-out infinite}
.step::after{content:"";position:absolute;left:0;top:-2px;width:100%;height:3px;background:linear-gradient(90deg,#d4af37 0%,#d4af37 90%,#fff3cc 100%);box-shadow:0 0 12px rgba(212,175,55,.7);transform-origin:0 50%;animation:ph1 7.5s cubic-bezier(.45,0,.2,1) infinite}
.step h3{animation:pt1 7.5s linear infinite}
.step:nth-child(2)::before{animation-name:pd2}.step:nth-child(2)::after{animation-name:ph2}.step:nth-child(2) h3{animation-name:pt2}
.step:nth-child(3)::before{animation-name:pd3}.step:nth-child(3)::after{animation-name:ph3}.step:nth-child(3) h3{animation-name:pt3}
@keyframes ph1{0%{transform:scaleX(0);opacity:1}20%{transform:scaleX(1);opacity:1}88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes ph2{0%,20%{transform:scaleX(0);opacity:1}40%{transform:scaleX(1);opacity:1}88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes ph3{0%,40%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes pt1{0%,6%{opacity:.36}20%{opacity:1}90%{opacity:1}100%{opacity:.36}}
@keyframes pt2{0%,26%{opacity:.36}40%{opacity:1}90%{opacity:1}100%{opacity:.36}}
@keyframes pt3{0%,46%{opacity:.36}60%{opacity:1}90%{opacity:1}100%{opacity:.36}}
@keyframes pd1{0%{transform:scale(1)}5%{transform:scale(1.9)}12%,100%{transform:scale(1)}}
@keyframes pd2{0%,20%{transform:scale(1)}25%{transform:scale(1.9)}32%,100%{transform:scale(1)}}
@keyframes pd3{0%,40%{transform:scale(1)}45%{transform:scale(1.9)}52%,100%{transform:scale(1)}}

/* posts */
.post{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;gap:24px;align-items:center;padding:30px 0;border-top:1px solid rgba(255,255,255,.14);text-decoration:none;color:#fff;transition:padding .3s,color .3s}
.post:hover{padding-left:16px;color:#66b2ff}
.post svg{opacity:.45;transition:opacity .3s,transform .3s}
.post:hover svg{opacity:1;transform:translateX(6px)}

/* closing: looking up through the dome, with the mark in the opening */
.cta-photo{position:absolute;top:0;bottom:0;left:0;width:150%;pointer-events:none;transform:translateY(calc(var(--o,0) * .22px));will-change:transform}
.sway{position:absolute;inset:-6%;container-type:size;transform-origin:50% 43%;animation:sway 60s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2.5deg) scale(1.02)}to{transform:rotate(2.5deg) scale(1.06)}}
/* a box the exact size and place of the photograph as shown, so whatever is laid over it lands on the right star and the right opening */
.imgbox{position:absolute;left:50%;top:50%;width:100%;height:100%;width:max(100cqw,150cqh);height:max(100cqh,66.667cqw);transform:translate(-50%,-50%)}
.imgbox>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The sky seen through the glass really turns now, against the turning of the mark: the Milky Way and every star with it, behind the
   frame of the dome (which is its own layer in front). Light still travels down the Milky Way, and turns with it. */
.dsky{position:absolute;left:50.46%;top:42.77%;width:92%;aspect-ratio:1;margin:-46% 0 0 -46%;border-radius:50%;background:url(/img/stars.webp) 0 0 / 82% auto,url(/img/dome-sky.webp) center / 100% 100% no-repeat;animation:turn 240s linear infinite reverse}
.dsky::after{content:"";position:absolute;inset:12%;background:url(/img/stars.webp) 37% 61% / 112% auto;animation:twinkle 5.3s ease-in-out infinite}
.dflow{position:absolute;left:31%;top:32%;width:18%;aspect-ratio:1.5;margin:-6% 0 0 -9%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(120,176,255,.3),rgba(120,176,255,0) 68%);opacity:0;animation:dflow 8.5s linear infinite}
.dflow--b{animation-delay:-4.25s}
@keyframes dflow{0%{opacity:0;transform:translate(0,0)}14%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translate(211%,302%)}}
.cglow{position:absolute;bottom:-6%;width:36%;height:38%;background:radial-gradient(ellipse at center,rgba(255,190,110,.34),rgba(255,190,110,0) 66%);animation:lamp 6s ease-in-out infinite}
.cglow--l{left:-12%}
.cglow--r{right:-12%;animation-delay:-3s}
/* A soft beam turns from the opening like a lighthouse and the stars it crosses flare. Meteors and one slow satellite cross the sky.
   All of it lies behind the frame of the dome. */
.scan{position:absolute;left:50.46%;top:42.77%;width:50%;height:29.1%;margin-top:-9.7%;transform-origin:0 50%;background:conic-gradient(from 79deg at 0% 50%,rgba(150,196,255,0) 0deg,rgba(150,196,255,.16) 11deg,rgba(150,196,255,0) 22deg,rgba(150,196,255,0) 360deg);animation:turn 46s linear infinite reverse}
/* the dome's four shooting stars share one 30-second cycle, evenly spaced, so two never cross at once */
.cmet{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(220,234,255,.95),rgba(220,234,255,0));opacity:0}
.cmet--a{left:70%;top:9%;width:12%;animation:cmeta 30s linear 2s infinite}
.cmet--b{left:66%;top:50%;width:9%;animation:cmetb 30s linear 17s infinite}
.cmet--c{left:57%;top:14%;width:8%;animation:cmetc 30s linear 24.5s infinite}
@keyframes cmeta{0%{opacity:0;transform:rotate(-31deg) translateX(0)}.2%{opacity:1}1.7%{opacity:1}2.4%{opacity:0;transform:rotate(-31deg) translateX(-330%)}100%{opacity:0;transform:rotate(-31deg) translateX(-330%)}}
@keyframes cmetb{0%{opacity:0;transform:rotate(-14deg) translateX(0)}.4%{opacity:.9}2.6%{opacity:.9}3.7%{opacity:0;transform:rotate(-14deg) translateX(-320%)}100%{opacity:0;transform:rotate(-14deg) translateX(-320%)}}
@keyframes cmetc{0%{opacity:0;transform:rotate(-42deg) translateX(0)}.3%{opacity:.95}2%{opacity:.95}2.8%{opacity:0;transform:rotate(-42deg) translateX(-300%)}100%{opacity:0;transform:rotate(-42deg) translateX(-300%)}}
.csat{position:absolute;left:29%;top:31%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#e6eeff;box-shadow:0 0 5px rgba(200,220,255,.9);opacity:0;animation:csat 36s linear 5s infinite}
@keyframes csat{0%{opacity:0;transform:translate(0,0)}3%{opacity:1}58%{opacity:1}62%{opacity:0;transform:translate(42cqw,-7cqw)}100%{opacity:0;transform:translate(42cqw,-7cqw)}}
/* the opening itself: a shooting star crosses the sky seen through it, behind the mark */
.hole{position:absolute;left:41.634%;top:29.541%;width:17.643%;aspect-ratio:1;border-radius:50%;overflow:hidden}
.hole .shoot{left:66%;top:20%;width:40%;animation:shootc 30s linear 9.5s infinite}
@keyframes shootc{0%{opacity:0;transform:rotate(-28deg) translateX(0)}.6%{opacity:1}2.8%{opacity:1}4%{opacity:0;transform:rotate(-28deg) translateX(-250%)}100%{opacity:0;transform:rotate(-28deg) translateX(-250%)}}
/* the mark as ironwork, in the colour and weight of the dome's own frame, set exactly into the opening; it turns slowly, and a little more as the page moves */
.eye-wrap{position:absolute;left:40.885%;top:28.418%;width:19.141%;aspect-ratio:1}
.eye-spin{position:absolute;inset:0;animation:turn 220s linear infinite}
.eye-rot{position:absolute;inset:0}
.eye{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eye circle{fill:none}
.eye .eye-iron{stroke:#110906;stroke-width:7.5}
.eye .eye-edge{stroke:rgba(172,128,82,.38);stroke-width:1}
.eye .eye-hub{fill:#110906;stroke:rgba(172,128,82,.38);stroke-width:1}
.eye .eye-dot{fill:#d4af37}
.veil--cta{background:linear-gradient(90deg,rgba(4,7,12,.95) 0%,rgba(4,7,12,.82) 40%,rgba(4,7,12,.1) 100%);opacity:calc(1 - var(--c,1) * .32)}
.mail{color:#fff;text-decoration:none;border-bottom:2px solid #007bff;transition:color .3s,border-color .3s;display:inline-block;padding:9px 0 3px}
.mail:hover{color:#d4af37;border-bottom-color:#d4af37}
/* the form: a console of dark glass at the foot of the dome, under the email address. Each field is a line that lights as you write on it. */
.cf{position:relative;max-width:1080px;margin-top:clamp(40px,5vw,72px);padding:clamp(24px,2.8vw,40px);background:linear-gradient(180deg,rgba(14,26,37,.86) 0%,rgba(6,10,14,.94) 100%);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 70px -24px rgba(0,123,255,.45)}
.cf::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:linear-gradient(90deg,#d4af37 0,#d4af37 44px,#007bff 44px,rgba(0,123,255,0) 74%)}
.cf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 30px;align-items:end;margin:0}
.fld{position:relative;display:block;min-width:0}
.fld span{display:block;font-family:'Martian Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#a9b7c2;transition:color .3s}
.fld span i{margin-left:5px;font-style:normal;color:#d4af37}
.fld input,.fld textarea{display:block;width:100%;margin:0;padding:10px 2px 12px;border:0;border-bottom:1px solid rgba(255,255,255,.36);border-radius:0;background:transparent;color:#fff;font-family:'Instrument Sans',system-ui,sans-serif;font-size:18px;line-height:1.4;-webkit-appearance:none;appearance:none;transition:background .3s}
.fld textarea{height:calc(2.8em + 22px);resize:none}
.fld input:focus,.fld textarea:focus{outline:none;background:linear-gradient(180deg,rgba(0,123,255,0),rgba(0,123,255,.12))}
.fld::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,#007bff,#66b2ff);box-shadow:0 0 12px rgba(0,123,255,.8);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.fld:focus-within::after{transform:scaleX(1)}
.fld:focus-within span{color:#66b2ff}
.fld input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 60px #0b151d inset;caret-color:#fff}
.fld--msg{grid-column:span 2}
.cf-go .btn{display:flex;width:100%}
/* after the button: the seven rings draw and a gold tick lands. No words of Kate's are needed for it. */
.cf-done{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 0;text-align:center}
.cf-ok{width:128px;height:128px;overflow:visible}
.cf-ok circle{fill:none;stroke:rgba(102,178,255,.7);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:579;stroke-dashoffset:579;animation:draw 1.4s cubic-bezier(.6,0,.2,1) forwards}
.cf-ok .cf-check{fill:none;stroke:#d4af37;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220;animation:draw .6s cubic-bezier(.6,0,.2,1) 1.2s forwards}
.cf-note{margin:0;font-family:'Martian Mono',monospace;font-size:11px;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:#a9b7c2}
.cf-err{margin:14px 0 0;font-size:15px;line-height:1.5;color:#ffb4a8}
.cf-go .btn:disabled{opacity:.6;cursor:progress}
.cf-back{width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#c3ced6;cursor:pointer;transition:border-color .2s,color .2s}
.cf-back:hover{border-color:#fff;color:#fff}
.foot a{color:#a9b7c2;text-decoration:none}
.foot a:hover{color:#fff}

/* the assistant: a launcher that carries the mark, and a panel of dark glass that opens above it */
.gc{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:60;font-family:'Instrument Sans',system-ui,sans-serif}
.gc-fab{position:relative;display:flex;align-items:center;gap:10px;height:60px;padding:0 22px 0 8px;border-radius:30px;border:1px solid rgba(102,178,255,.6);background:linear-gradient(160deg,#12222f,#070b10);color:#fff;font-family:'Martian Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 26px rgba(0,123,255,.38);transition:transform .3s,border-color .3s,opacity .3s}
.gc-fab:hover{transform:translateY(-3px);border-color:#fff}
.gc-fab::before{content:"";position:absolute;inset:-1px;border-radius:30px;border:1px solid rgba(102,178,255,.75);pointer-events:none;animation:gcpulse 3.6s ease-out infinite}
@keyframes gcpulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.14,1.42);opacity:0}}
.gc-rose{flex:0 0 auto;width:44px;height:44px;animation:turn 44s linear infinite}
.gc-rose circle,.gc-mark circle{fill:none;stroke:#fff;stroke-width:1.1;vector-effect:non-scaling-stroke}
.gc-rose .gc-gold,.gc-mark .gc-gold{fill:#d4af37;stroke:none}
.gc-panel{position:absolute;right:0;bottom:76px;width:min(404px,calc(100vw - 28px));height:min(640px,calc(100vh - 130px));display:flex;flex-direction:column;overflow:hidden;border-radius:14px;border:1px solid rgba(102,178,255,.34);background:linear-gradient(180deg,#0e1b27 0%,#070b10 44%,#06090c 100%);box-shadow:0 30px 80px rgba(0,0,0,.72),0 0 44px rgba(0,123,255,.2);opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:100% 100%;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
.gc.open .gc-panel{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
.gc-head{position:relative;display:flex;align-items:center;gap:12px;padding:12px 10px 12px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:radial-gradient(120% 150% at 0% 0%,rgba(0,123,255,.26),rgba(0,123,255,0) 62%)}
.gc-mark{flex:0 0 auto;width:40px;height:40px}
.gc-mark circle{stroke:rgba(255,255,255,.78)}
/* while it is answering, the seven rings of the mark light one after another */
.gc-mark.busy circle:not(.gc-gold){animation:gcring 1.4s linear infinite}
.gc-mark.busy circle:nth-child(2){animation-delay:.2s}.gc-mark.busy circle:nth-child(3){animation-delay:.4s}.gc-mark.busy circle:nth-child(4){animation-delay:.6s}.gc-mark.busy circle:nth-child(5){animation-delay:.8s}.gc-mark.busy circle:nth-child(6){animation-delay:1s}.gc-mark.busy circle:nth-child(7){animation-delay:1.2s}
@keyframes gcring{0%,30%,100%{stroke:rgba(255,255,255,.35)}12%{stroke:#66b2ff}}
.gc-name{margin:0;font-family:'Antonio',sans-serif;font-weight:600;font-size:19px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.gc-sub{margin:4px 0 0;font-family:'Martian Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#d4af37}
.gc-x{margin-left:auto;flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#c3ced6;cursor:pointer;transition:background .2s,color .2s}
.gc-x:hover{background:rgba(255,255,255,.09);color:#fff}
.gc-log{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.gc-row{display:flex;animation:gcin .4s cubic-bezier(.2,.7,.2,1) both}
.gc-row.me{justify-content:flex-end}
@keyframes gcin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gc-bub{max-width:88%;padding:12px 14px;border-radius:14px 14px 14px 4px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);color:#e6edf2;font-size:15.5px;line-height:1.5}
.gc-row.me .gc-bub{border-radius:14px 14px 4px 14px;border-color:transparent;background:#0068d6;color:#fff}
.gc-txt{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.gc-cta{display:inline-flex;align-items:center;margin-top:12px;min-height:44px;padding:8px 18px;border-radius:22px;background:#fff;color:#06090c;font-family:'Martian Mono',monospace;font-size:10.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.gc-cta:hover{background:#d4af37;color:#06090c}
.gc-src{margin:10px 0 0;font-family:'Martian Mono',monospace;font-size:9.5px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:#8b9aa6}
.gc-dots{display:flex;gap:6px;padding:5px 2px}
.gc-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid #66b2ff;animation:gcdot 1.1s ease-in-out infinite}
.gc-dots i:nth-child(2){animation-delay:.15s}.gc-dots i:nth-child(3){animation-delay:.3s}
@keyframes gcdot{0%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1.15);opacity:1}}
.gc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px 12px}
.gc-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:22px;border:1px solid rgba(102,178,255,.5);background:rgba(0,123,255,.09);color:#dbe9ff;font-family:'Instrument Sans',sans-serif;font-size:14px;line-height:1.2;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.gc-chip:hover{background:#0068d6;border-color:#66b2ff;color:#fff}
/* once the conversation has started the suggestions become one row you can slide, leaving the room to the answers */
.gc-chips.roll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.gc-chips.roll::-webkit-scrollbar{display:none}
.gc-chips.roll .gc-chip{flex:0 0 auto;white-space:nowrap}
.gc-form{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,.1);background:rgba(4,7,12,.6)}
.gc-in{flex:1 1 auto;min-width:0;height:46px;padding:0 16px;border-radius:23px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;font-family:'Instrument Sans',sans-serif;font-size:16px}
.gc-in::placeholder{color:#8b9aa6}
.gc-in:focus{outline:none;border-color:#66b2ff;box-shadow:0 0 0 3px rgba(0,123,255,.28)}
.gc-send{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;background:#0068d6;color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.gc-send:hover{background:#007bff;transform:translateX(2px)}
.gc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a one-time nudge above the launcher, once the visitor has started down the page: one question, ready to ask with a tap */
.gc-tease{position:absolute;right:0;bottom:74px;display:flex;align-items:center;padding:3px 2px 3px 8px;border-radius:25px 25px 6px 25px;border:1px solid rgba(102,178,255,.55);background:linear-gradient(160deg,#14273a,#070b10);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 22px rgba(0,123,255,.3);white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:100% 100%;transition:opacity .35s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s .4s}
.gc-tease.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s}
.gc-tease-q{min-height:44px;padding:0 6px 0 10px;border:0;background:transparent;color:#fff;font-family:'Instrument Sans',system-ui,sans-serif;font-size:15.5px;font-weight:500;cursor:pointer}
.gc-tease-x{flex:0 0 40px;width:40px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#8b9aa6;cursor:pointer}
.gc-tease-x:hover{color:#fff}
@media (max-width:700px){
  /* on a phone the launcher keeps its words, so it reads as something to tap, and the panel is a sheet across the bottom */
  .gc-fab{height:54px;padding:0 18px 0 6px;font-size:11.5px;letter-spacing:.12em}
  .gc-rose{width:42px;height:42px}
  .gc-tease{bottom:66px}
  .gc-panel{position:fixed;left:8px;right:8px;bottom:8px;width:auto;height:min(78vh,620px);transform-origin:50% 100%}
  .gc.open .gc-fab{opacity:0;pointer-events:none}
}

@media (min-width:701px) and (max-width:1000px){
  /* a tablet: three cards, then two wider ones, so the grid has no empty corner */
  .caps{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cap{grid-column:span 2}
  .cap:nth-child(n+4){grid-column:span 3}
  .cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fld--msg,.cf-go{grid-column:1 / -1}
  .cf-go .btn{width:auto;display:inline-flex}
}
@media (max-width:700px){
  /* a phone: a true grid, two by two, everything on the screen; the fifth card runs the full width beneath them */
  .caps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cap{padding:16px 15px 20px;gap:12px}
  .cap:nth-child(5){grid-column:1 / -1;flex-direction:row;align-items:center;gap:14px;padding:12px 16px 14px}
  .gly{width:58px;height:58px;margin-left:-4px}
  .cap-t{font-size:15px;line-height:1.26;overflow-wrap:break-word}
  .cf{padding:24px 18px 20px}
  .cf-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .fld--msg{grid-column:auto}
  .btn--solid{display:flex;width:100%}
}
@media (max-width:1200px){
  .lhold{flex-basis:190px}
  .plate{width:130px;height:130px;margin:-65px 0 0 -65px}
  .ltick{flex-basis:20px}
  .lrow:not(:nth-child(5)) p{font-size:14px !important;line-height:1.15 !important}
}
@media (max-width:900px){
  /* phones draw every layer at three times the size, so the sky keeps two star layers there and leans on the single stars */
  .hero{--wx:calc(100% - min(0px,22vw - 123px) - min(230vw,900px) * .215);--wy:calc(70px + min(78vw,400px) / 2);--wd:calc(120vw + 700px);--spt:380s;--sph:820s}
  .skyclip{height:720px}
  .swheel--hero{top:-58%}
  .photo{width:min(230vw,900px);right:min(0px,calc(22vw - 123px))}
  .hh-box{position:relative;z-index:0}
  .hero-art{z-index:-1;bottom:auto;top:calc(50% + 21px);width:min(78vw,400px);margin-top:calc(min(78vw,400px) / -2);right:calc(min(0px,22vw - 123px) + min(230vw,900px) * .215 - min(78vw,400px) / 2 - var(--gut))}
  .hero-pad{padding-bottom:calc(min(153vw,600px) * .64 + 30px) !important}
  .bl{width:38px !important;height:38px !important;margin-right:-6px}
  .bw{font-size:11px !important;letter-spacing:.06em !important}
  .nav{gap:10px !important}
  .nav a{letter-spacing:.08em;font-size:11px}
  .m-hide{display:none}
  .btn{min-height:56px;padding:6px 6px 6px 22px;gap:12px;font-size:11.5px;letter-spacing:.09em}
  /* on a phone the headline sits over the mark: the mark steps back a little and the letters carry a dark edge, so the words stay in front */
  .hh{font-size:max(50px,9.2vw);text-shadow:0 0 3px #06090c,0 0 10px #06090c,0 0 22px #06090c,0 0 44px rgba(6,9,12,.85)}
  .hero .hr{stroke:rgba(255,255,255,.26)}
  .hero .halo{background:radial-gradient(circle,rgba(0,123,255,.24),rgba(0,123,255,0) 64%)}
  .hero-art .lit{border-color:rgba(31,136,255,.8);box-shadow:0 0 12px rgba(0,123,255,.5),inset 0 0 12px rgba(0,123,255,.3)}
  .stack-wrap{padding:14px 0 26px}
  .life{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .rail{display:none}
  .path{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .step{padding-bottom:22px}
  .lhold{flex-basis:150px}
  .plate{width:104px;height:104px;margin:-52px 0 0 -52px}
  .lrow{gap:10px}
  .ltick{flex-basis:14px}
  .post{grid-template-columns:minmax(0,1fr) 28px;gap:10px 16px}
  .post time{grid-column:1 / -1}
  .tape p{font-size:24px}
  .list7{display:none}
  .said{display:block}
  .band--road .band-in{left:auto;right:min(0px,calc((100% - clamp(300px,46vw,680px) * 1.92) * .18));width:calc(clamp(300px,46vw,680px) * 1.92);min-width:100%}
  .cta-photo{left:-60%;width:220%;bottom:auto;height:calc(220vw / 1.5)}
  .veil--cta{background:linear-gradient(180deg,rgba(4,7,12,.1) 0%,rgba(4,7,12,.3) 34vw,#04070b 112vw,#04070b 100%);opacity:1}
  .cta-pad{padding-top:104vw !important}
  .cta-h{max-width:none !important}
}
@media (max-width:360px){
  /* the smallest phones: the headline, the menu row, the card titles and the email address each give up a little size so nothing touches the edge or breaks mid-word */
  .hh{font-size:13.6vw}
  .bw{font-size:10.5px !important;letter-spacing:0 !important}
  .brand{gap:10px !important}
  .bl{width:34px !important;height:34px !important;margin-right:-4px}
  .nav{gap:6px !important}
  .nav a{font-size:10.5px;letter-spacing:.05em}
  .cap{padding:14px 12px 18px}
  .cap-t{font-size:13.5px}
  .em{font-size:6vw !important}
  .mail{padding:13px 0 7px}
  .lhold{flex-basis:116px}
  .plate{width:88px;height:88px;margin:-44px 0 0 -44px}
  .lrow:nth-child(5) p{font-size:11px !important;letter-spacing:.08em !important}
}
@media (max-width:340px){
  /* the very smallest phones: the mark alone stands for the name in the menu row (the name stays there for screen readers) */
  .bw{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .brand{min-width:44px}
  .bl{margin-right:0 !important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .geo *,.geo *::before,.geo *::after{animation:none !important;transition:none !important}
  .hr,.cf-ok circle,.cf-ok .cf-check{stroke-dashoffset:0}
  .sweep,.glit,.rip0,.drip,.scan,.dflow,.rsat,.puff{display:none}
}
[hidden]{display:none !important}