*{box-sizing:border-box}html{background:#03070a;color:#fff;font-family:Arial,sans-serif;scroll-behavior:smooth}body{margin:0;background:#03070a}header{position:fixed;z-index:20;top:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#061018e8;border-bottom:1px solid #ca6d4b;backdrop-filter:blur(18px)}header a{color:#fff;text-decoration:none;font-weight:900}.brand{font:900 22px monospace;letter-spacing:.08em}.langs{display:flex;gap:7px}.langs a{font:800 9px Arial;padding:8px 10px;border:1px solid #ffffff35;border-radius:20px}.hero{position:relative;height:min(900px,100svh);min-height:720px;overflow:hidden;display:flex;align-items:flex-end;padding:0 6% 7%;isolation:isolate}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#020506;z-index:-3}.hero:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,#020508e8 0%,transparent 48%),linear-gradient(90deg,#020508a8,transparent 48%)}.copy{max-width:1050px}.kicker,.meta{font:800 11px monospace;letter-spacing:.17em;color:#ff9a75}.copy h1{font-size:clamp(56px,9vw,150px);line-height:.8;letter-spacing:-.065em;margin:.18em 0}.copy p{font-size:clamp(18px,1.6vw,26px);line-height:1.45;max-width:780px}.gallery{padding:2px 0;background:#c96d4a;display:grid;gap:2px}.panel{position:relative;min-height:760px;overflow:hidden;background:#03070a}.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#020506}.panel:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#020508d0,transparent 48%)}.panel div{position:absolute;z-index:2;left:6%;bottom:7%;max-width:760px}.panel b{font-size:clamp(34px,5vw,78px);line-height:.9}.panel p{max-width:600px}.index{font:11px monospace;color:#ff9a75}.manifesto{padding:100px 6%;display:grid;grid-template-columns:1fr 1fr;gap:40px}.manifesto h2{font-size:clamp(44px,7vw,100px);line-height:.88;margin:0}.manifesto p{font-size:20px;line-height:1.5;color:#c9d3d7}.back{display:inline-block;margin-top:28px;padding:16px 24px;background:#ff765e;color:#071018;text-decoration:none;font-weight:900;border-radius:30px}@media(max-width:700px){header{padding:0 4%}.brand{font-size:16px}.langs a{padding:7px 6px}.hero{min-height:820px}.hero>img,.panel img{object-fit:cover}.copy h1{font-size:16vw}.panel{min-height:680px}.manifesto{grid-template-columns:1fr}}
/* V4 — full-bleed panoramas: full horizon, no contain bars, no image zoom */
.hero{display:block;height:auto;min-height:0;padding:0;overflow:hidden;background:#020507}
.hero>img{position:relative;inset:auto;display:block;width:100%;height:auto;max-width:none;object-fit:unset;background:transparent;z-index:-3;transform:none!important}
.hero .copy{position:absolute;z-index:3;left:6%;right:6%;bottom:7%;max-width:1050px}
.panel{min-height:0;height:auto;overflow:hidden;background:#020507}
.panel img{position:relative;inset:auto;display:block;width:100%;height:auto;max-width:none;object-fit:unset;background:transparent;transform:none!important}
.panel:after{z-index:1;pointer-events:none}
.panel div{z-index:2}
@media(max-width:700px){
 .hero{padding:0;min-height:0}
 .hero>img{width:100%;height:auto;object-fit:unset}
 .hero .copy{position:relative;left:auto;right:auto;bottom:auto;max-width:none;padding:28px 5% 38px;background:#020507}
 .hero:after{bottom:auto;height:56.3vw;background:linear-gradient(0deg,#020507aa,transparent 55%)}
 .copy h1{font-size:14vw}
 .panel{min-height:0}
 .panel img{width:100%;height:auto;object-fit:unset}
 .panel div{left:5%;bottom:7%}
}

/* V5 — text lives on the panorama; no plates, no darkening */
.hero:after,.panel:after{background:none!important}
.hero:before,.panel:before{
 z-index:1!important;pointer-events:none;
 background:
  radial-gradient(circle at 84% 19%,rgba(108,247,255,.78) 0 1px,transparent 2px),
  radial-gradient(circle at 13% 72%,rgba(255,132,86,.72) 0 1px,transparent 2px),
  linear-gradient(90deg,transparent 0 82%,rgba(112,247,255,.3) 82% 82.15%,transparent 82.15%),
  linear-gradient(0deg,transparent 0 17%,rgba(255,118,94,.3) 17% 17.15%,transparent 17.15%)!important;
 background-size:97px 83px,131px 109px,100% 100%,100% 100%!important;
 mix-blend-mode:screen;opacity:.72
}
.hero .copy,.panel div{background:transparent!important;color:#fff;text-shadow:0 2px 2px #000,0 0 5px #000,0 0 12px #000}
.hero h1,.panel b{-webkit-text-stroke:1px rgba(0,0,0,.72);paint-order:stroke fill}
.kicker,.meta,.index{-webkit-text-stroke:.35px #180804;text-shadow:0 1px 2px #000,0 0 6px #000}
@media(max-width:700px){
 .hero{position:relative}
 .hero .copy{position:absolute;left:4.5%;right:4.5%;bottom:4%;padding:0;background:transparent!important}
 .copy h1{font-size:8.7vw;line-height:.82;margin:.12em 0}
 .copy p{font-size:12px;line-height:1.25;margin:.55em 0 0;max-width:94%}
 .kicker,.meta{font-size:7px;letter-spacing:.1em}
 .panel b{font-size:9vw}
 .panel p{font-size:11px;margin:.35em 0}
}

/* V6 — every text section remains inside a full-width visual world */
.manifesto,.feedback{
 position:relative;isolation:isolate;overflow:hidden;
 background-color:#020507;
 background-image:var(--section-art);
 background-size:100% auto;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 text-shadow:0 2px 2px #000,0 0 5px #000,0 0 12px #000
}
.manifesto:before,.feedback:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 79% 22%,rgba(103,244,255,.7) 0 1px,transparent 2px),radial-gradient(circle at 17% 77%,rgba(255,122,83,.72) 0 1px,transparent 2px);background-size:103px 89px,137px 113px;mix-blend-mode:screen;pointer-events:none}
.manifesto h2,.feedback h2{-webkit-text-stroke:1px rgba(0,0,0,.75);paint-order:stroke fill}
.feedback input,.feedback textarea{background:rgba(2,5,7,.18);backdrop-filter:blur(2px);text-shadow:0 1px 2px #000}

/* V7 — DNA MUSIC v2: why the world sounds this way, the style, Earth twins, neighbours */
.world-sound,.world-twins{padding:90px 6%;background:#03070a;border-top:1px solid #ca6d4b55}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.world-sound article{padding:28px;border:1px solid #ffffff1f;border-radius:18px;background:linear-gradient(160deg,#0b1820,#05090c)}
.world-sound h2,.world-twins h2{font-size:clamp(24px,2.6vw,38px);line-height:1.05;margin:.35em 0 .5em;letter-spacing:-.02em}
.world-sound p{font-size:18px;line-height:1.55;color:#d3dde1;margin:0}
.ws-note{margin-top:28px!important;font:12px monospace!important;letter-spacing:.06em;color:#8fa3ab!important}
.twins-intro{max-width:760px;color:#c9d3d7;font-size:17px;line-height:1.5}
.twin-list{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.twin{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid #ffffff24;border-radius:16px;background:#071118}
.twin b{font-size:21px}
.twin span{color:#c9d3d7;line-height:1.45;font-size:15px}
.twin-link{margin-top:auto;color:#ff9a75;font:800 12px monospace;letter-spacing:.08em;text-decoration:none}
.twin-link:hover,.twin-link:focus-visible{text-decoration:underline}
.twin-concept{margin-top:auto;font:12px monospace!important;color:#8fa3ab!important}
.twin-more{color:#8fa3ab;font-size:14px;margin-top:22px}
.world-nav{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#c96d4a;padding:2px 0}
.world-nav a{display:block;padding:34px 6%;background:#03070a;color:#fff;text-decoration:none}
.world-nav a:last-child{text-align:end}
.world-nav small{display:block;font:800 11px monospace;letter-spacing:.14em;color:#ff9a75;margin-bottom:8px}
.world-nav b{font-size:clamp(20px,2.4vw,34px)}
.world-nav a:hover b,.world-nav a:focus-visible b{text-decoration:underline}
@media(max-width:900px){.ws-grid{grid-template-columns:1fr}.world-sound,.world-twins{padding:56px 5%}.world-sound p{font-size:16px}}
@media(max-width:600px){.world-nav{grid-template-columns:1fr}.world-nav a:last-child{text-align:start}}