@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--night:#080b0d;--paper:#f6f4ec;--ink:#192b2d;--coral:#f37465;--muted:#a9b4b5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--night);color:var(--paper);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--coral);outline-offset:7px}.skip{position:absolute;top:-100px;left:20px;z-index:9;padding:15px;background:var(--paper);color:var(--ink)}.skip:focus{top:15px}.header{position:absolute;z-index:2;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:34px 5vw}.wordmark{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:700;letter-spacing:-1.8px}.wordmark span{color:var(--coral)}nav{display:flex;gap:34px;font-size:14px}nav a{color:#bdc6c5}nav a:hover{color:#fff}.darkness{position:relative;min-height:850px;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:150px 24px 110px;overflow:hidden}.scene{position:relative;width:360px;height:210px;flex-shrink:0;margin-bottom:22px}.eye-wrap{position:absolute;left:157px;top:68px;width:145px;height:87px}.eyes{width:100%;height:100%;animation:blink 8s infinite;transform-origin:center}.bubbles{position:absolute;left:33px;top:32px;width:130px;height:140px;opacity:.55;animation:float 7s ease-in-out infinite}.hero-copy{text-align:center}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;line-height:1.8}.hero-copy .eyebrow{color:var(--muted);margin:0 0 21px}h1,h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-2.4px;font-weight:500}h1{font-size:clamp(42px,5.2vw,74px);line-height:1.07;margin:0}h1 em{font-style:normal;color:var(--coral)}.read-link{display:inline-flex;align-items:center;gap:38px;font-size:15px;border-bottom:1px solid #5b6768;padding:17px 0 12px;margin-top:27px}.read-link:hover{border-color:var(--coral);color:var(--coral)}.hero-bottom{position:absolute;bottom:28px;left:5vw;right:5vw;display:flex;justify-content:space-between;color:#879597;font-size:12px}.hero-bottom span:last-child{letter-spacing:1.5px}.comic-section{background:var(--paper);color:var(--ink);padding:80px max(24px,calc((100vw - 1120px)/2)) 75px;scroll-margin-top:0}.section-top{display:flex;justify-content:space-between;gap:18px;align-items:center}.issue{font-size:12px;letter-spacing:1px;color:#5b6869}h2{font-size:clamp(32px,4vw,52px);line-height:1.1;margin:24px 0 35px}.comic-frame{background:#e4efec;border:2px solid var(--ink);padding:40px 45px;min-height:390px;position:relative}.dialogue{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}.dialogue p{font-size:clamp(17px,1.7vw,22px);line-height:1.4;margin:0}.dialogue b{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;font-weight:600;color:#506865}.cast{display:flex;justify-content:space-around;align-items:center;gap:25px;min-height:210px;margin-top:15px}.cast img{width:38%;max-height:260px;object-fit:contain}.comic-note{font-size:15px;color:#526564;margin:20px 0 0}.idea{max-width:1220px;margin:auto;padding:90px 50px 100px;display:grid;grid-template-columns:1fr 1fr;gap:20px 85px}.idea>.eyebrow{grid-column:1/-1;color:var(--coral)}.idea h2{margin:0}.idea div p{font-size:18px;line-height:1.65;margin:0 0 20px;color:#b9c4c4}.idea .future{font-size:15px;color:#8b9d9d;border-top:1px solid #293536;padding-top:22px}footer{border-top:1px solid #293536;margin:0 5vw;padding:30px 0 40px;display:flex;justify-content:space-between;align-items:center}footer>span{font-size:13px;color:#9baaaa}@keyframes blink{0%,44%,47%,100%{transform:scaleY(1)}45%,46%{transform:scaleY(.06)}}@keyframes float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-8px)}}@media(max-width:650px){.header{padding:25px 24px}.wordmark{font-size:28px}nav{gap:20px}.darkness{padding-top:110px;min-height:780px;min-height:100svh}.scene{transform:scale(.9);margin-bottom:0;height:180px}.hero-bottom{left:24px;right:24px}.hero-bottom span:last-child{display:none}.hero-bottom span{font-size:12px}.eyebrow{font-size:11px;letter-spacing:1.4px}.comic-section{padding:50px 20px}.section-top{display:block}.issue{display:block;margin-top:10px}.comic-frame{padding:25px 22px}.dialogue{grid-template-columns:1fr;gap:20px}.dialogue b{margin-bottom:5px}.dialogue p{font-size:18px}.cast{min-height:160px;gap:0}.cast img{width:50%;max-height:160px}.idea{padding:55px 24px;grid-template-columns:1fr;gap:22px}.idea h2{margin-bottom:6px}h1,h2{letter-spacing:-1.6px}footer{margin:0 24px;align-items:flex-start;gap:25px}footer>span{text-align:right;max-width:130px;line-height:1.5}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.eyes,.bubbles{animation:none}}
/* Motion uses the existing vector eyes and anglerfish. */
.scene{z-index:1;overflow:visible}.eye-wrap{transition:none}.eyes{animation:none;transition:transform .09s ease-in-out;transform-origin:50% 54%}.eyes.is-blinking{transform:scaleY(.035)}.pupil{transition:transform .28s ease-in-out}.bubble-stream{position:absolute;left:94px;top:135px;width:1px;height:1px;pointer-events:none}.rising-bubble{position:absolute;left:var(--offset);top:0;width:var(--size);height:var(--size);border:1.4px solid #b3d3d8;border-radius:50%;opacity:0;animation:bubble-rise var(--duration) linear var(--delay) infinite;will-change:transform,opacity}.hero-copy{position:relative;z-index:2}.lantern-guest{position:absolute;right:-76px;top:20%;width:330px;aspect-ratio:1.2;pointer-events:none;transform:rotate(-9deg);animation:guest-drift 19s ease-in-out infinite}.lantern-guest img{width:100%;height:auto;opacity:0;animation:guest-appear 19s ease-in-out infinite}.lantern-light{position:absolute;left:27.3%;top:28.75%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff7b1 0%,#fff7b1 8%,#edce754a 19%,#dfc87312 44%,transparent 70%);opacity:0;animation:lamp-on 19s ease-in-out infinite}.motion-paused .rising-bubble,.motion-paused .lantern-guest,.motion-paused .lantern-guest img,.motion-paused .lantern-light{animation-play-state:paused}
@keyframes bubble-rise{0%{transform:translate(0,0) scale(.55);opacity:0}8%{opacity:.48}22%{transform:translate(15px,-65px) scale(.75)}42%{transform:translate(-16px,-138px) scale(.92);opacity:.65}62%{transform:translate(19px,-216px) scale(1.08)}80%{transform:translate(-9px,-282px) scale(1.15);opacity:.3}100%{transform:translate(12px,-370px) scale(1.25);opacity:0}}
@keyframes lamp-on{0%,15%,45%,100%{opacity:0}20%,37%{opacity:.9}24%{opacity:.6}28%{opacity:1}}
@keyframes guest-appear{0%,15%,45%,100%{opacity:0}22%,37%{opacity:.29}}
@keyframes guest-drift{0%,100%{transform:translate(15px,5px) rotate(-9deg)}30%{transform:translate(-7px,-9px) rotate(-7deg)}65%{transform:translate(7px,8px) rotate(-10deg)}}
@media(max-width:650px){.lantern-guest{width:220px;right:-76px;top:15%}.rising-bubble{border-width:1.3px}}
@media(prefers-reduced-motion:reduce){.eyes,.pupil{transition:none}.rising-bubble,.lantern-guest,.lantern-guest img,.lantern-light{animation:none}.rising-bubble{display:none}.rising-bubble:nth-child(-n+3){display:block;opacity:.5}.rising-bubble:nth-child(1){transform:translate(0,-15px)}.rising-bubble:nth-child(2){transform:translate(8px,-60px)}.rising-bubble:nth-child(3){transform:translate(-4px,-110px)}.lantern-guest img{opacity:.11}.lantern-light{opacity:.18}}

/* Each visitor shares the lamp clock; relocation happens while it is dark. */
.lantern-guest{top:13%;right:-50px}
.lantern-guest[data-spot="right-low"]{top:25%;right:-35px}
.lantern-guest[data-spot^="left"]{right:auto;left:-55px}
.lantern-guest[data-spot="left-high"]{top:12%}
.lantern-guest[data-spot="left-low"]{top:26%}
.lantern-guest .revealed-companion{position:absolute;width:65%;left:-42%;top:-6%;opacity:0;animation:companion-appear 19s ease-in-out infinite;mask-image:radial-gradient(ellipse at 76% 52%,#000 12%,#000a 48%,transparent 75%)}
.light-spill{position:absolute;left:-43%;top:-7%;width:99%;height:70%;border-radius:50%;background:radial-gradient(ellipse at 68% 50%,#ecd78a0d,transparent 68%);opacity:0;animation:lamp-on 19s ease-in-out infinite}
.lantern-guest[data-spot^="left"] .angler{transform:scaleX(-1)}
.lantern-guest[data-spot^="left"] .lantern-light{left:72.7%}
.lantern-guest[data-spot^="left"] .revealed-companion{left:auto;right:-42%;mask-image:radial-gradient(ellipse at 24% 52%,#000 12%,#000a 48%,transparent 75%)}
.lantern-guest[data-spot^="left"] .light-spill{left:auto;right:-43%;transform:scaleX(-1)}
@keyframes companion-appear{0%,18%,45%,100%{opacity:0}24%,35%{opacity:.56}39%{opacity:.22}}
.motion-paused .light-spill{animation-play-state:paused}
@media(max-width:650px){.lantern-guest{width:200px;right:-35px;top:11%}.lantern-guest[data-spot="right-low"]{top:19%;right:-40px}.lantern-guest[data-spot^="left"]{left:-45px}.lantern-guest[data-spot="left-high"]{top:10%}.lantern-guest[data-spot="left-low"]{top:18%}}
@media(prefers-reduced-motion:reduce){.light-spill,.lantern-guest .revealed-companion{animation:none}.lantern-guest .revealed-companion{opacity:.16}}

/* The torch always points back towards the anglerfish's lamp. */
.lantern-guest[data-spot^="left"][data-visitor="taschenlampe"] .revealed-companion{transform:scaleX(-1);mask-image:radial-gradient(ellipse at 76% 52%,#000 12%,#000a 48%,transparent 75%)}

.lantern-guest[data-visitor="taucher"] .revealed-companion{width:80%;left:-40%;top:-6%;mask-image:none}
.lantern-guest[data-spot^="left"][data-visitor="taucher"] .revealed-companion{left:auto;right:-40%;transform:scaleX(-1)}