/* Styles for the server-rendered pages (world, changelog, studio, join). */
.world-hero { min-height: auto; padding: 56px 0 24px; }
.world-hero h1 { font-size: clamp(2.4rem, 7vw, 5rem); }
.world-cover img { width: 100%; height: auto; display: block; border: 1px solid var(--line2); box-shadow: 0 0 40px rgba(0, 240, 255, .15), 0 0 80px rgba(255, 43, 214, .1); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
@media (max-width: 860px) { .world-cover { order: -1; } }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.shot { margin: 0; border: 1px solid var(--line2); background: #07080d; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.shot figcaption { padding: 6px 10px; }
.video { margin-top: 14px; aspect-ratio: 16 / 9; border: 1px solid var(--line2); }
.video iframe, .video video { width: 100%; height: 100%; border: 0; display: block; }
.doc { max-width: 820px; }
.doc p, .doc li { color: #c9d6de; }
.cl-month { color: var(--magenta); text-transform: uppercase; letter-spacing: .16em; margin: 36px 0 12px; }
.cl-entry { padding: 0 0 16px 14px; border-left: 1px solid var(--line2); margin: 0 0 18px; }
.cl-entry p { margin: 4px 0 0; font-size: .95rem; }
.cl-entry:target { border-left-color: var(--cyan); }
.timeline { list-style: none; padding: 0; margin: 24px 0 0; border-left: 1px solid var(--line2); }
.timeline li { position: relative; padding: 0 0 22px 24px; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .45em; width: 9px; height: 9px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transform: rotate(45deg); }
.timeline .when { color: var(--magenta); text-transform: uppercase; letter-spacing: .12em; display: block; margin-bottom: 2px; }
.timeline p { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; }
.fact { border: 1px solid var(--line2); background: var(--card); padding: 16px 18px; }
.fact b { display: block; font: 700 1.6rem var(--display); color: var(--cyan); }
.fact span { color: var(--muted); font-size: .9rem; }
form.join { max-width: 680px; display: grid; gap: 14px; margin-top: 24px; }
form.join label { display: block; color: var(--muted); font-size: .9rem; }
form.join input, form.join select, form.join textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .45); color: var(--fg); font: 16px/1.5 var(--sans); }
form.join input:focus, form.join select:focus, form.join textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 240, 255, .25); }
form.join .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { form.join .two { grid-template-columns: 1fr; } }
form.join button { justify-self: start; cursor: pointer; border: 0; }
form.join .hp { position: absolute; left: -9999px; }
.form-msg { border-left: 2px solid var(--cyan); padding: 10px 14px; background: rgba(0, 0, 0, .4); }
.form-msg.err { border-left-color: var(--red); }
.form-msg.ok { border-left-color: var(--ok); }
.kit { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 16px; }
.kit img { height: 72px; width: auto; border: 1px solid var(--line2); background: #000; padding: 8px; }
.qr-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 24px; }
.qr-row img { border: 1px solid var(--line2); background: #05060a; }
.qr-row p { margin: 0 0 6px; }
.strip { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 16px; border: 1px solid var(--line2); border-left: 3px solid var(--cyan); background: rgba(0, 0, 0, .45); font-size: .78rem; letter-spacing: .04em; }
.strip .muted { text-transform: uppercase; margin-right: 6px; }
.svc-steps { padding-left: 22px; color: #c9d6de; } .svc-steps li { margin: 6px 0; }
.feature-group-list { list-style: none; padding: 0; margin: 0; color: #c9d6de; } .feature-group-list li { margin: 6px 0; padding-left: 18px; position: relative; } .feature-group-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); transform: rotate(45deg); }