:root {
  --ink: #121212;
  --paper: #f3f1eb;
  --line: rgba(18, 18, 18, .18);
  --orange: #ff5b37;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", sans-serif; }
a { color: inherit; }

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

.lab-nav { height: 74px; padding: 0 3vw; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.lab-logo { font: 800 17px/1 "Manrope", sans-serif; text-decoration: none; letter-spacing: -.03em; }
.lab-logo span { font: 400 10px/1 "DM Mono", monospace; margin-left: 8px; }
.lab-nav p { margin: 0; }
.lab-status { justify-self: end; }
.lab-status i { display: inline-block; width: 7px; height: 7px; background: #55d66b; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 0 4px rgba(85,214,107,.15); }

.lab-hero { min-height: 720px; height: calc(100vh - 74px); padding: 7vh 7vw 4vh; display: grid; grid-template-columns: 1.05fr .95fr; gap: 5vw; align-items: center; overflow: hidden; }
.kicker { font: 500 10px/1 "DM Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }
.lab-hero__copy { max-width: 750px; position: relative; z-index: 2; }
.lab-hero h1 { margin: 24px 0 25px; max-width: 740px; font-size: clamp(54px, 6.7vw, 108px); line-height: .91; letter-spacing: -.075em; }
.lab-hero h1 em { color: var(--orange); font-style: normal; }
.lab-hero__copy > p { margin: 0; max-width: 590px; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; color: #454545; }
.lab-arrow { display: inline-flex; gap: 60px; margin-top: 45px; padding-bottom: 9px; border-bottom: 1px solid; text-decoration: none; font: 500 11px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.lab-arrow span { transition: transform .25s; }.lab-arrow:hover span { transform: translateY(5px); }
.lab-product { position: relative; height: min(650px, 77vh); display: grid; place-items: center; }
.lab-product::before { content:""; position:absolute; width: min(35vw, 530px); aspect-ratio:1; border: 1px solid var(--line); border-radius:50%; box-shadow: 0 0 0 55px rgba(18,18,18,.025), 0 0 0 110px rgba(18,18,18,.018); }
.lab-product img { position: relative; z-index:1; height: 78%; max-width: 83%; transform: rotate(4deg); filter: drop-shadow(0 30px 24px rgba(41,26,12,.13)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: rotate(1deg) translateY(-14px); } }
.orbit { position: absolute; z-index:2; padding: 8px 11px; background: var(--ink); color: #fff; font: 500 9px/1 "DM Mono", monospace; letter-spacing:.12em; }
.orbit-a { top:13%; left:8%; transform:rotate(-8deg); }.orbit-b { top:34%; right:2%; transform:rotate(6deg); background:#8e4f2d; }.orbit-c { bottom:22%; left:0; background:#0b57e3; }.orbit-d { bottom:8%; right:16%; background:#382719; }.orbit-e { top:6%; right:25%; background:#ff4e94; }.orbit-f { bottom:38%; right:-1%; background:#2f6458; transform:rotate(-4deg); }

.lab-facts { min-height: 72px; border-block: 1px solid var(--line); display: grid; grid-template-columns: repeat(6,1fr); align-items:center; }
.lab-facts span { height:100%; display:grid; place-items:center; border-right:1px solid var(--line); font: 500 10px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.lab-facts span:last-child{border:0;}

.worlds { padding: 120px 3vw 40px; }
.worlds__header { padding: 0 3vw 60px; display:flex; justify-content:space-between; align-items:end; }
.worlds__header p { margin:0; max-width:460px; color:#555; line-height:1.6; }
.world-card { min-height: 580px; display:grid; grid-template-columns: 70px 1.5fr 1fr; border-top: 1px solid var(--line); padding: 20px 0 60px; gap: 3vw; }
.world-number { font: 400 12px/1 "DM Mono", monospace; }
.world-preview { min-height: 470px; overflow:hidden; }
.world-copy { padding: 70px 5vw 20px 0; align-self:center; }
.world-copy > span { font: 500 9px/1 "DM Mono",monospace; letter-spacing:.15em; text-transform:uppercase; }
.world-copy h2 { font-size:clamp(48px,5vw,82px); letter-spacing:-.06em; line-height:1; margin:18px 0; }
.world-copy p { color:#555; font-size:16px; line-height:1.7; max-width:440px; }
.world-copy a { display:flex; justify-content:space-between; margin-top:35px; padding:15px 0; border-bottom:1px solid; text-decoration:none; font-size:13px; font-weight:700; }
.world-copy a b { transition:transform .2s; }.world-copy a:hover b { transform:translate(4px,-4px); }

.mini-system,.mini-gisela,.mini-institut,.mini-maison,.mini-pop,.mini-alltag{height:100%; min-height:470px; position:relative; overflow:hidden;}
.mini-system{background:#070b0d;color:#a9ff43;padding:34px;font:12px "DM Mono",monospace;background-image:linear-gradient(rgba(169,255,67,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(169,255,67,.08) 1px,transparent 1px);background-size:38px 38px}.mini-system span{border:1px solid;padding:8px}.mini-system i{position:absolute;width:270px;height:270px;border:1px solid;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 50px rgba(169,255,67,.2),inset 0 0 45px rgba(169,255,67,.15)}.mini-system b{position:absolute;bottom:35px;left:35px;font-size:38px;line-height:.9;letter-spacing:-.06em}
.mini-gisela{background:#f6e8cb;color:#67362a;padding:36px;background-image:radial-gradient(#d7b98d 1px,transparent 1px);background-size:18px 18px}.mini-gisela span{font:25px cursive}.mini-gisela b{display:block;margin-top:65px;font:700 48px/1.02 Georgia,serif;transform:rotate(-2deg)}.mini-gisela i{position:absolute;right:60px;bottom:50px;font:normal 100px/1 Georgia;color:#e9972e}
.mini-institut{background:#f7f7f3;color:#111;padding:30px;border:1px solid #ccc}.mini-institut:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.9%,#ddd 50%,transparent 50.1%),linear-gradient(transparent 49.9%,#ddd 50%,transparent 50.1%)}.mini-institut span{font:700 13px Arial;position:relative}.mini-institut b{position:absolute;left:30px;bottom:35px;font:800 46px/.88 Arial;letter-spacing:-.07em}.mini-institut i{position:absolute;right:30px;top:30px;width:60px;height:60px;background:#1455d9;border-radius:50%}
.mini-maison{background:#2e261e;color:#e5d8c5;padding:45px}.mini-maison:after{content:"";position:absolute;width:210px;height:300px;right:13%;top:22%;border-radius:48% 48% 8px 8px;background:linear-gradient(145deg,#b8a281,#65523f);box-shadow:-65px 90px 0 #a45836}.mini-maison span{font:24px Georgia,serif;font-style:italic}.mini-maison b{position:absolute;left:45px;bottom:38px;font:normal 49px/.95 Georgia,serif;letter-spacing:-.03em;z-index:2}.mini-maison i{position:absolute;right:30px;bottom:28px;font:italic 100px Georgia,serif;opacity:.12}
.mini-pop{background:#ffe342;color:#111;padding:32px;border:3px solid}.mini-pop:before{content:"";position:absolute;width:180px;height:180px;border:3px solid;border-radius:50%;background:#ff75ad;right:35px;top:45px;box-shadow:10px 10px 0 #111}.mini-pop span{font:900 60px/.75 Arial;letter-spacing:-.09em;position:relative;z-index:1}.mini-pop b{position:absolute;left:32px;bottom:30px;background:#fff;padding:12px;border:3px solid;box-shadow:8px 8px 0 #58afff;font:900 24px/.9 Arial;transform:rotate(-3deg)}.mini-pop i{position:absolute;right:80px;bottom:65px;font:normal 80px Arial;transform:rotate(13deg)}
.mini-alltag{background:linear-gradient(90deg,rgba(240,245,242,.97) 0 49%,rgba(240,245,242,.08) 70%),url("photos/morrow-alltag-morgen.webp") center/cover;color:#294239;padding:45px}.mini-alltag span{display:inline-block;background:#2f6458;color:#fff;border-radius:3px;padding:7px 10px;font:700 8px Arial;text-transform:uppercase;letter-spacing:.08em}.mini-alltag b{display:block;width:55%;margin-top:55px;font:700 43px/1.03 Georgia,serif;letter-spacing:-.04em}.mini-alltag i{display:inline-block;margin-top:30px;background:#e66a3b;color:#fff;border-radius:4px;padding:12px 17px;font:normal 700 10px Arial}

.lab-footer { margin-top:50px; padding:30px 3vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; font:400 10px/1.4 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.lab-footer p{margin:0}.lab-footer a{text-decoration:none}

@media (max-width: 800px) {
  .lab-nav { grid-template-columns:1fr auto; }.lab-nav p{display:none}.lab-status{font-size:0}.lab-status i{margin:0}
  .lab-hero { height:auto; min-height:0; padding:70px 6vw 30px; grid-template-columns:1fr; }.lab-hero h1{font-size:58px}.lab-product{height:520px}.lab-product::before{width:75vw}.lab-product img{height:82%}
  .lab-facts { display:flex; overflow-x:auto; }.lab-facts span{min-width:160px; padding:26px 15px}
  .worlds{padding:80px 5vw 20px}.worlds__header{padding:0 0 45px;display:block}.worlds__header p{margin-top:18px}
  .world-card{grid-template-columns:35px 1fr;gap:10px;padding-bottom:70px}.world-preview{grid-column:1/-1;grid-row:2;min-height:390px}.world-copy{grid-column:2;padding:20px 0}.mini-system,.mini-gisela,.mini-institut,.mini-maison,.mini-pop,.mini-alltag{min-height:390px}.world-copy h2{font-size:52px}.mini-alltag{padding:30px}.mini-alltag b{font-size:34px;width:70%}
  .lab-footer{display:block}.lab-footer a{display:inline-block;margin-top:20px}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.lab-product img{animation:none} }
