/* Earth in Orbit: globe hero, the year in debt, starfield, chapter bar, three orbits, Orbit One: Munich */
main{position:relative}
.stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* ---------- hero: globe (Nachtrag 5, G1) ----------
   Desktop: full-bleed scene, globe right of centre, text bottom left.
   Phones: globe stage on top, text below on a dark gradient, no hint.
   object-position of .globe-still must match data-ref-d / data-ref-m
   (src/pages/earth-in-orbit.js); canvas and labels use the same framing. */
.orbit-hero{position:relative;height:100vh;height:100svh;max-height:1000px;min-height:620px;overflow:hidden;background:#05070a}
.globe-stage{position:absolute;inset:0;overflow:hidden}
.globe-still,#globe{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.globe-still{object-fit:cover;object-position:60% 50%;max-width:none}
#globe{opacity:0;transition:opacity .7s ease;touch-action:pan-y;cursor:grab}
#globe:active{cursor:grabbing}
.orbit-hero.live #globe{opacity:1}
.globe-labels{position:absolute;inset:0;pointer-events:none}
.globe-labels .lab{position:absolute;left:0;top:0;transform:translate(var(--x,0),var(--y,0)) translate(10px,-50%);font-size:12px;line-height:1.3;color:var(--text);white-space:nowrap;
  text-shadow:0 0 6px #000,0 0 2px #000,0 0 1px #000;opacity:0;transition:opacity .3s}
.globe-labels .lab.on{opacity:1}
/* The dots are part of the scene (and of the still); labels only carry the text. */
.globe-labels .lab.flip{transform:translate(var(--x,0),var(--y,0)) translate(calc(-100% - 10px),-50%)}
.globe-labels .lab.below{transform:translate(var(--x,0),var(--y,0)) translate(-50%,10px)}

html:not(.js) .globe-labels{display:none}
.orbit-hero .core{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:56px;pointer-events:none}
/* Text over moving imagery: at least rgba(13,13,11,.72) behind it (here the darker hero ground at .78), soft edges. */
.orbit-hero .core-in{display:grid;gap:18px;justify-items:start;width:max-content;max-width:100%;background:rgba(5,7,10,.78);box-shadow:0 0 56px 44px rgba(5,7,10,.78);pointer-events:auto}
.orbit-hero h1{font-size:clamp(46px,7.2vw,124px)}
.orbit-hero .lede{max-width:30ch;font-size:clamp(18px,1.6vw,22px)}
.orbit-hero .kicker{color:var(--text-dim)}
.orbit-hero .hint{position:absolute;right:var(--gut-r);bottom:24px;z-index:3;margin:0;max-width:30ch;text-align:right;color:var(--text-dim);
  background:rgba(5,7,10,.78);box-shadow:0 0 24px 16px rgba(5,7,10,.78);pointer-events:none}
@media (max-width:1100px) and (min-width:701px){.orbit-hero .hint{display:none}}
@media (max-width:700px){
  .orbit-hero{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column}
  .globe-stage{position:relative;inset:auto;height:min(143.6vw,72svh);flex:none}
  .globe-still{object-position:50% 50%}
  .orbit-hero .core{position:relative;margin-top:-56px;padding:56px var(--gut-r) 32px var(--gut);background:linear-gradient(to bottom,rgba(5,7,10,0),rgba(5,7,10,.95) 56px)}
  .orbit-hero .core-in{width:auto;background:none;box-shadow:none}
  .orbit-hero .hint{display:none}
}

/* ---------- the year in debt (Nachtrag 5, G2): sticky ring, scroll = day of 2025 ---------- */
.overshoot{position:relative;height:260vh;border-top:1px solid var(--line)}
.os-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;overflow:hidden;padding-top:64px}
.os-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;width:100%}
.os-ring{position:relative;width:min(64vh,540px,86vw);aspect-ratio:1;margin-inline:auto}
.os-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.os-center{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:6px} /* full-width lines: a changing date does not move the box (CLS) */
.os-day{font-family:var(--display);font-weight:800;font-stretch:115%;font-variation-settings:"wdth" 115;font-size:clamp(30px,4.6vw,58px);line-height:1;text-transform:uppercase}
.os-state{letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.os-state.over{color:var(--red-on-ink)}
.os-side{display:grid;gap:18px;max-width:46ch}
.os-side h2{font-size:clamp(34px,5vw,80px)}
.os-legend{list-style:none;margin:0;padding:0;display:flex;gap:10px 22px;flex-wrap:wrap}
.os-legend li{display:flex;align-items:center;gap:8px}
.os-legend i{width:22px;height:6px;display:inline-block;background:var(--green)}
.os-legend i.r{background:var(--red)}
.os-side a{text-underline-offset:.2em}
@media (max-width:900px){
  .os-grid{grid-template-columns:1fr;gap:18px}
  .os-ring{width:min(34svh,64vw)}
  .os-side{gap:12px;font-size:16px;line-height:1.5}
  .os-side h2{font-size:clamp(30px,8vw,48px)}
}

/* ---------- intro ---------- */
.eio-facts{display:grid;gap:18px;align-content:start}

/* ---------- chapter bar (Nachtrag 7, 3.1): sticks under the header once the year ring has passed ---------- */
:root{--hd-h:74px;--bar-h:48px}
@media (max-width:1100px){:root{--hd-h:76px}}
.eio-nav{position:sticky;top:calc(var(--hd-h) + env(safe-area-inset-top,0px));z-index:40;background:var(--ink);border-block:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.eio-nav::-webkit-scrollbar{display:none}
.eio-nav ol{list-style:none;margin-block:0;display:flex;gap:28px;min-height:calc(var(--bar-h) - 2px);align-items:stretch}
.eio-nav li{display:flex;flex:none}
.eio-nav a{position:relative;display:flex;align-items:center;white-space:nowrap;text-decoration:none;color:var(--text)}
/* The seam of the main menu (C3) in the chapter's colour. */
.eio-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 11px);clip-path:inset(0 100% 0 0);transition:clip-path .45s steps(9,end)}
.eio-nav a:hover::after,.eio-nav a:focus-visible::after,.eio-nav a[aria-current]::after{clip-path:inset(0 0 0 0)}
.eio-nav a:focus-visible{outline-offset:-3px}
.chapter{scroll-margin-top:calc(var(--hd-h) + var(--bar-h) + env(safe-area-inset-top,0px))}

/* ---------- chapter opening (3.2) ---------- */
.orbit{position:relative}
.ch-open{position:relative;height:min(90vh,820px);min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-2)}
@supports (height:1svh){.ch-open{height:min(90svh,820px)}}
.ch-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Same rule as the film heroes: at least .72 behind the text. */
.ch-open::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(13,13,11,.86) 0%,rgba(13,13,11,.74) 62%,rgba(13,13,11,.2) 100%)}
@media (max-width:900px){.ch-open::after{background:rgba(13,13,11,.74)}}
.ch-in{position:relative;z-index:2;width:100%;padding-block:40px 56px;display:grid;gap:16px;justify-items:start}
.ch-n{color:var(--accent)}
.ch-title{position:relative;max-width:100%;margin-block:30px}
.ch-title h2{position:relative;font-size:clamp(38px,6vw,96px)}
.ch-q{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,44px);line-height:1.15;max-width:24ch}
.ch-lead{max-width:var(--measure)}
.ch-f{color:var(--text-dim)}
/* The ring tilts around the title and turns once when the opening comes into view. */
.orbit-ring{position:absolute;left:50%;top:50%;width:calc(100% + clamp(24px,8vw,140px));aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px solid var(--accent);transform:rotateX(76deg);pointer-events:none}
.orbit-ring::after{content:"";position:absolute;left:50%;top:-16px;width:12px;height:32px;margin-left:-6px;border-radius:50%;background:var(--accent)}
.orbit-ring.turn{animation:ring-turn 14s linear 1 both}
@keyframes ring-turn{from{transform:rotateX(76deg) rotateZ(0)}to{transform:rotateX(76deg) rotateZ(360deg)}}

/* ---------- artists (3.3) ---------- */
.artist{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line-2);display:grid;gap:36px}
.artist:first-child{border-top:0}
.a-top{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px 48px;align-items:start}
.a-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ink-2)}
.a-body{display:grid;gap:12px;justify-items:start}
.a-body > *{max-width:var(--measure)}
.artist h3{font-size:clamp(22px,2.2vw,30px);font-weight:700}
.a-line{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.8vw,40px);line-height:1.18;margin-block:8px 4px;max-width:20em}
/* Without JS the text stays open: only html.js collapses it. */
.js .a-more{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility .3s}
.js .a-more.open{grid-template-rows:1fr;visibility:visible}
.a-more > div{overflow:hidden;min-height:0}
.a-toggle{display:inline-flex;gap:10px;align-items:center;min-height:44px;padding:0;background:none;border:0;border-bottom:2px solid var(--accent);color:var(--text);font:700 14px var(--body);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.a-toggle span{display:inline-block;font-size:18px;line-height:1;transition:transform .3s ease}
.a-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.a-quote{margin:14px 0 2px;font-size:clamp(19px,1.6vw,23px);line-height:1.45}
.a-links{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:6px}
.a-links a.more{border-color:var(--accent);padding-block:6px 4px}
@media (max-width:820px){.a-top{grid-template-columns:1fr}.a-portrait{width:62%;min-width:200px}}

/* Ribbon band (Orbit 3) */
.eio-band{position:relative;min-height:min(70vh,620px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-2)}
.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eio-band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,11,.92) 0%,rgba(13,13,11,.76) 42%,rgba(13,13,11,.15) 75%)}
.eio-band .wrap{position:relative;z-index:2;width:100%;padding-block:120px 44px;display:grid;gap:10px}
.band-t{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,44px);line-height:1.15;max-width:22em}
.eio-band .a-links a.more{border-color:var(--yellow)}

/* ---------- Orbit One: Munich (3.4) ---------- */
.munich{padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--line)}
.munich .wrap{display:grid;gap:18px}
.mu-head{display:grid;gap:18px;justify-items:start;margin-bottom:28px}
.mu-head h2{font-size:clamp(38px,6vw,96px)}
.mu-head .lede{max-width:var(--measure)}
.gal{--g:12px;display:grid;gap:var(--g);width:100%;max-width:1120px}
.gal-row{display:flex;gap:var(--g);align-items:flex-start}
.gal-row.first{align-items:stretch}
.gal-stack{flex:66.67 1 0;min-width:0;display:grid;grid-template-rows:1fr 1fr;gap:var(--g)}
.gal-i{position:relative;display:block;flex:75 1 0;min-width:0;padding:0;border:0;background:var(--ink-2);cursor:zoom-in;overflow:hidden}
.gal-i.p{aspect-ratio:3/4}
.gal-i.l{aspect-ratio:4/3;flex-grow:133.33}
.gal-stack .gal-i{aspect-ratio:auto;width:100%}
.gal-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gal-i:hover img{transform:scale(1.03)}
.gal-i:focus-visible{outline-offset:-3px}
@media (max-width:700px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-row,.gal-stack{display:contents}
  .gal-i.l,.gal-i.big{grid-column:1 / -1}
  .gal-stack .gal-i{aspect-ratio:4/3}
}

/* Guestbook: five pages fanned out; hover, focus or a tap brings one forward. */
.gb-h{font-size:clamp(28px,3.4vw,48px);font-weight:800;font-stretch:112%;margin-top:clamp(56px,7vw,96px)}
.fan{--w:clamp(150px,20vw,270px);--o:calc(var(--w) * .42);display:flex;justify-content:center;padding-block:36px 44px}
.pg{flex:0 0 var(--w);min-width:0;margin-left:calc(var(--o) * -1);padding:0;border:0;background:var(--ink-2);cursor:zoom-in;box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .2s ease}
.pg:first-child{margin-left:0}
.pg img{width:100%}
.pg:nth-child(1){--r:-6deg;--y:12px}.pg:nth-child(2){--r:-3deg;--y:4px}.pg:nth-child(3){--r:0deg;--y:0px}.pg:nth-child(4){--r:3deg;--y:4px}.pg:nth-child(5){--r:6deg;--y:12px}
.pg{transform:translateY(var(--y)) rotate(var(--r))}
.pg.front,.pg:focus-visible{position:relative;z-index:6;transform:translateY(-14px) rotate(0deg)}
@media (hover:hover){.pg:hover{position:relative;z-index:6;transform:translateY(-14px) rotate(0deg)}}
@media (max-width:700px){.fan{--w:calc((100vw - 48px) / 2.4);--o:calc(var(--w) * .65)}}
.mu-artists{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:4px 22px}
.mu-artists a{text-underline-offset:.2em}

/* ---------- Join the Orbit ---------- */
.eio-end{display:grid;gap:22px;justify-items:start;border-top:1px solid var(--line)}
.eio-end h2{font-size:clamp(34px,5vw,80px);max-width:16ch}
.eio-end .lede{max-width:var(--measure)}
.eio-end .btns{margin-top:12px}

/* ---------- no JS: every picture and page is simply there ---------- */
html:not(.js) img[data-defer]{display:none}
html:not(.js) .fan{flex-wrap:wrap;gap:16px}
html:not(.js) .pg{margin-left:0;transform:none}