/* REM: Color palette: text, muted text, deep background, teal, gold, and divider line colors. */
:root {
--ink: #e9f1eb;
--muted: #9fb1aa;
--deep: #03100f;
--teal: #1eb6ad;
--gold: #d5a54a;
--line: rgba(206,232,221,.16);
}

/* REM: Global box sizing, smooth scrolling, body font and colors, and plain inherited link colors. */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--deep);
color: var(--ink);
font: 400 1rem/1.75 "DM Sans",sans-serif;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}

/* REM: Site header: brand mark and title on the left, navigation links on the right. */
.site-header {
position: absolute;
z-index: 20;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem clamp(1.25rem,5vw,5rem);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand {
display: flex;
gap: .8rem;
align-items: center;
font: 600 .84rem/1 "Cinzel",serif;
letter-spacing: .16em;
}
.brand-mark {
width: 1.55rem;
height: 1.55rem;
border: 1px solid var(--gold);
border-radius: 50%;
box-shadow: inset 0 0 0 5px var(--deep),inset 0 0 0 6px var(--teal);
}
nav {
display: flex;
align-items: center;
gap: 2rem;
font-size: .85rem;
}
nav a {
color: #c7d6d0;
}
nav a:hover {
color: white;
}
.nav-cta {
border: 1px solid rgba(213,165,74,.6);
padding: .55rem 1rem;
}

/* REM: Hero section: full-height opening screen with a starfield and a fade into the page at the bottom. */
.hero {
min-height: 100svh;
position: relative;
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: center;
padding: 8rem clamp(1.25rem,8vw,8rem) 5rem;
isolation: isolate;
background: radial-gradient(circle at 82% 42%,#134a45 0,rgba(8,39,37,.8) 21%,transparent 48%),linear-gradient(120deg,#020b0b,#061715 60%,#071f1d);
}
.starfield {
position: absolute;
inset: 0;
z-index: -2;
opacity: .52;
background-image: radial-gradient(#fff 1px,transparent 1px),radial-gradient(#9efff2 1px,transparent 1px);
background-size: 71px 71px,113px 113px;
background-position: 0 0,23px 40px;
mask-image: linear-gradient(to right,rgba(0,0,0,.65),black);
}
.hero:after {
content: "";
position: absolute;
inset: auto 0 0;
height: 13rem;
background: linear-gradient(transparent,var(--deep));
z-index: -1;
}

/* REM: Eyebrow labels and gold accent text. */
.eyebrow {
font-weight: 600;
font-size: .72rem;
letter-spacing: .32em;
color: #90ddd5;
margin: 0 0 1.4rem;
}
.gold {
color: var(--gold);
}

/* REM: Headings: display font, with the large hero title and its outlined ATLANTIS line. */
h1, h2, h3 {
font-family: "Cinzel",serif;
}
h1 {
font-size: clamp(3.8rem,8.6vw,9rem);
font-weight: 500;
line-height: .76;
letter-spacing: -.045em;
margin: 0;
filter: drop-shadow(0 8px 32px rgba(0,0,0,.5));
}
h1 em {
font-style: normal;
color: transparent;
-webkit-text-stroke: 1px var(--gold);
margin-left: .2em;
}

/* REM: Hero tagline and call-to-action buttons. */
.hook {
font-family: "Cinzel",serif;
font-size: clamp(1rem,1.5vw,1.35rem);
line-height: 1.55;
color: #c8d6d1;
margin: 2.5rem 0;
}
.actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.button {
min-height: 3.25rem;
padding: .8rem 1.45rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: .82rem;
letter-spacing: .08em;
text-transform: uppercase;
transition: .25s;
}
.primary {
background: var(--gold);
color: #0e1714;
}
.primary:hover {
background: #edc365;
transform: translateY(-2px);
}
.ghost {
border: 1px solid var(--line);
}
.ghost:hover {
border-color: var(--teal);
background: rgba(30,182,173,.08);
}

/* REM: Original orbital artwork: planet, rings, and citadel shapes. */
.orbital-art {
position: relative;
height: min(65vw,650px);
aspect-ratio: 1;
margin-left: -8%;
filter: drop-shadow(0 24px 35px rgba(0,0,0,.55));
}
.planet {
position: absolute;
inset: 22%;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%,#73c9bd 0,#276d67 12%,#103f3d 35%,#041514 72%);
box-shadow: inset -45px -55px 75px #010606,0 0 80px rgba(70,197,186,.25);
}
.ring {
position: absolute;
border: 1px solid rgba(117,230,215,.52);
border-radius: 50%;
transform: rotateX(66deg) rotateZ(-12deg);
box-shadow: 0 0 18px rgba(30,182,173,.18);
}
.ring-a {
inset: 9%;
}
.ring-b {
inset: 16%;
border-color: rgba(213,165,74,.65);
}
.ring-c {
inset: 24%;
border-width: 3px;
}
.citadel {
position: absolute;
left: 50%;
top: 48%;
width: 8%;
height: 15%;
transform: translate(-50%,-50%);
clip-path: polygon(50% 0,65% 58%,100% 100%,0 100%,35% 58%);
background: linear-gradient(90deg,#a07837,#f5dc8f,#755522);
box-shadow: 0 0 45px #e9b753;
}

/* REM: Scroll cue at the bottom of the hero. */
.scroll-cue {
position: absolute;
bottom: 1.2rem;
left: 50%;
transform: translateX(-50%);
font-size: .62rem;
letter-spacing: .28em;
color: #72948c;
}
.scroll-cue span {
color: var(--gold);
}

/* REM: Premise section: two-column layout, chapter number, copy, and quotation. */
.story-section {
max-width: 1280px;
margin: auto;
display: grid;
grid-template-columns: .35fr 1fr;
gap: 5rem;
padding: clamp(6rem,12vw,11rem) clamp(1.25rem,8vw,8rem);
border-bottom: 1px solid var(--line);
}
.chapter-no {
font: 500 clamp(6rem,14vw,13rem)/.8 "Cinzel",serif;
color: transparent;
-webkit-text-stroke: 1px rgba(213,165,74,.22);
}
.story-copy {
max-width: 760px;
}
.story-copy h2, .world-intro h2 {
font-size: clamp(2.4rem,4.5vw,4.8rem);
font-weight: 500;
line-height: 1.08;
margin: 0 0 2rem;
}
.story-copy>p:not(.eyebrow) {
font-size: clamp(1.05rem,1.4vw,1.25rem);
color: #b8c7c1;
}
.story-copy blockquote {
margin: 3rem 0 0;
padding: 1.5rem 0 1.5rem 2rem;
border-left: 2px solid var(--gold);
font: 500 clamp(1.2rem,2vw,1.7rem)/1.5 "Cinzel",serif;
color: #e8d29b;
}

/* REM: World section: introduction and the four timeline cards. */
.world-section {
padding: clamp(6rem,10vw,10rem) clamp(1.25rem,8vw,8rem);
background: linear-gradient(180deg,#03100f,#061b19);
}
.world-intro {
max-width: 780px;
margin-bottom: 4rem;
}
.world-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.world-grid article {
padding: 2rem;
min-height: 260px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: .3s;
}
.world-grid article:hover {
background: rgba(30,182,173,.07);
transform: translateY(-5px);
}
.world-grid span {
color: var(--gold);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.world-grid h3 {
font-size: 1.45rem;
margin: 3rem 0 1rem;
}
.world-grid p {
color: var(--muted);
line-height: 1.65;
}

/* REM: Release section: centered announcement, status badge, and domain line. */
.release-section {
position: relative;
text-align: center;
padding: clamp(8rem,14vw,14rem) 1.25rem;
overflow: hidden;
}
.release-section>*:not(.release-rings) {
position: relative;
z-index: 1;
}
.release-section h2 {
font-size: clamp(3.3rem,9vw,8.5rem);
font-weight: 500;
line-height: 1;
margin: .5rem 0 1.6rem;
color: #f3ead6;
}
.release-section>p:not(.eyebrow,.domain) {
max-width: 670px;
margin: 0 auto;
color: #aec0b9;
font-size: 1.12rem;
}
.release-rings {
position: absolute;
width: min(95vw,1000px);
aspect-ratio: 1;
border: 1px solid rgba(30,182,173,.18);
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 0 90px rgba(30,182,173,.035),0 0 0 180px rgba(213,165,74,.025),inset 0 0 150px rgba(30,182,173,.05);
}
.status {
margin: 3rem auto 0;
display: inline-flex;
align-items: center;
gap: .8rem;
border: 1px solid rgba(213,165,74,.5);
padding: .9rem 1.3rem;
font-size: .75rem;
letter-spacing: .16em;
color: #ecd69f;
}
.status span {
width: .5rem;
height: .5rem;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 15px var(--gold);
}
.domain {
margin-top: 4rem!important;
font: 500 .72rem/1 "Cinzel",serif;
letter-spacing: .38em;
color: #728a82;
}

/* REM: Footer: copyright link and return-to-top link. */
footer {
padding: 1.5rem clamp(1.25rem,5vw,5rem);
display: flex;
justify-content: space-between;
border-top: 1px solid var(--line);
font-size: .76rem;
color: #71857e;
}
footer a:hover {
color: var(--gold);
}

/* REM: Screens up to 900px: hide secondary nav links and stack the hero, story, and timeline layouts. */
@media(max-width:900px) {
nav a:not(.nav-cta) {
display: none;
}
.hero {
grid-template-columns: 1fr;
padding-top: 9rem;
}
.hero-copy {
z-index: 3;
}
.orbital-art {
position: absolute;
width: 88vw;
height: auto;
right: -35%;
top: 18%;
opacity: .6;
}
.story-section {
grid-template-columns: 1fr;
gap: 3rem;
}
.chapter-no {
font-size: 7rem;
}
.world-grid {
grid-template-columns: repeat(2,1fr);
}
}

/* REM: Screens up to 560px: compact header, hero, sections, and a single-column timeline. */
@media(max-width:560px) {
.site-header {
padding: 1.2rem;
}
.brand {
font-size: .7rem;
}
.nav-cta {
padding: .45rem .65rem;
}
.hero {
min-height: 820px;
padding: 8rem 1.2rem 5rem;
align-items: end;
}
.hero-copy {
padding-bottom: 4rem;
}
h1 {
font-size: 3.55rem;
}
.hook br {
display: none;
}
.orbital-art {
width: 122vw;
right: -46%;
top: 7%;
opacity: .72;
}
.scroll-cue {
display: none;
}
.story-section, .world-section {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.world-grid {
grid-template-columns: 1fr;
}
.world-grid article {
min-height: auto;
}
.release-section h2 {
font-size: 3rem;
}
.status {
font-size: .65rem;
letter-spacing: .1em;
}
footer {
gap: 1rem;
flex-direction: column;
}
}