:root{
--surface-primary:#07090d;
--surface-secondary:#0d141c;
--surface-tertiary:#141d27;
--surface-card-accent:rgba(100,214,197,0.22);
--brand-mint:#64d6c5;
--brand-violet:#8b7cff;
--detail-gold:#e8c77b;
--text-primary:#f2eee5;
--text-secondary:#9aa5ae;
--border-primary:#211a2d;

--font-heading:"Cormorant Garamond",serif;
--font-body:"Inter","Segoe UI",Arial,sans-serif;

--step-1:clamp(2.2rem,4vw,3.2rem);
--step-2:clamp(1.8rem,3vw,2.2rem);
--step-3:clamp(1.3rem,2.2vw,1.5rem);
--step-4:1.15rem;
--step-5:1rem;
--step-6:0.92rem;

--space-1:0.5rem;
--space-2:1rem;
--space-3:2rem;
--space-4:3rem;
--space-5:4.5rem;
--space-6:7rem;

--radius-card:10px;
--radius-panel:6px;

--container-max:1180px;
--container-pad:clamp(1rem,3vw,3rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
min-height:100vh;
background:
radial-gradient(circle at 12% 8%,rgba(100,214,197,.055),transparent 28rem),
radial-gradient(circle at 88% 22%,rgba(139,124,255,.06),transparent 30rem),
var(--surface-primary);
color:var(--text-primary);
font-family:var(--font-body);
font-size:var(--step-5);
line-height:1.6;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;height:auto;display:block;}

svg{display:block;max-width:100%;}

a{
color:var(--text-primary);
text-decoration:none;
transition:color .2s ease,background .2s ease;
}

a:hover{color:var(--brand-mint);}

button,input,textarea,select{
font:inherit;
color:inherit;
background:none;
border:none;
}

button{cursor:pointer;}

:focus-visible{
outline:1px solid var(--detail-gold);
outline-offset:2px;
}

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
font-weight:600;
line-height:1.15;
letter-spacing:0.01em;
margin-block-end:var(--space-2);
}

h1{font-size:var(--step-1);}
h2{font-size:var(--step-2);}
h3{font-size:var(--step-3);}
h4{font-size:var(--step-4);}
h5{font-size:var(--step-5);}
h6{font-size:var(--step-6);}

p{
margin-block-end:var(--space-2);
color:var(--text-secondary);
}

strong{color:var(--text-primary);font-weight:600;}

ul,ol{
margin-block-end:var(--space-2);
padding-inline-start:1.2em;
}

blockquote{
margin-block-end:var(--space-3);
padding-left:var(--space-2);
border-left:1px solid var(--border-primary);
color:var(--text-secondary);
}

section{margin-block-end:clamp(4.5rem,9vw,var(--space-6));}

.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--container-pad);
}

.surface{
background:var(--surface-secondary);
border:1px solid var(--border-primary);
}

.panel{
background:var(--surface-tertiary);
border:1px solid var(--border-primary);
border-radius:var(--radius-panel);
padding:var(--space-3);
}

.card{
background:var(--surface-tertiary);
border:1px solid var(--border-primary);
border-radius:var(--radius-card);
padding:var(--space-3);
position:relative;
overflow:hidden;
}

.card:nth-child(3n+2){
background:linear-gradient(145deg,rgba(139,124,255,.08),transparent 55%),var(--surface-tertiary);
}

.card:nth-child(3n){
background:linear-gradient(145deg,rgba(232,199,123,.055),transparent 52%),var(--surface-tertiary);
}

.card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 20% 10%,var(--surface-card-accent),transparent 60%);
opacity:.6;
pointer-events:none;
}

.card:hover::before{opacity:1;}

.card > *:last-child{margin-bottom:0;}

.button,.cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
padding:.75rem 1.5rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
background:var(--brand-mint);
color:#000;
border-radius:var(--radius-panel);
transition:background .25s ease,color .25s ease,transform .2s ease;
}

.button:hover,.cta:hover{
background:var(--brand-violet);
color:#fff;
}

.button:active,.cta:active{transform:scale(.98);}

.flex{
display:flex;
gap:var(--space-2);
}

.flex-col{flex-direction:column;}

.flex-wrap{flex-wrap:wrap;}

.flex > *{min-width:0;}

.grid-auto{
display:grid;
gap:var(--space-3);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.grid-auto > *{min-width:0;}

hr{
border:none;
border-top:1px solid var(--border-primary);
margin-block:var(--space-3);
}

small{font-size:var(--step-6);color:var(--text-secondary);}

@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important;scroll-behavior:auto;}
}

ul { list-style: none !important; } .nav-toggle { flex-direction: column; }

/* Shared editorial rhythm and contextual page ending */
main{overflow:hidden}
main > section:first-child{padding-top:clamp(3rem,7vw,6.5rem)}
main > section:first-child h1{max-width:18ch;text-wrap:balance}
main > section:first-child p{max-width:66ch}

.eyebrow{
display:inline-block;
margin-bottom:var(--space-2);
color:var(--brand-mint);
font-size:.72rem;
font-weight:600;
letter-spacing:.22em;
text-transform:uppercase;
}

.page-explorer{
margin-bottom:0;
padding-block:clamp(4rem,8vw,7rem);
border-top:1px solid var(--border-primary);
background:
linear-gradient(115deg,rgba(100,214,197,.08),transparent 38%),
linear-gradient(300deg,rgba(139,124,255,.08),transparent 44%),
var(--surface-secondary);
}

.page-explorer__inner{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
gap:clamp(2rem,6vw,6rem);
align-items:start;
}

.page-explorer__intro{position:sticky;top:110px}
.page-explorer__intro h2{max-width:12ch;font-size:clamp(2.1rem,4vw,3.5rem)}
.page-explorer__intro p{max-width:52ch}
.page-explorer__links{border-top:1px solid rgba(242,238,229,.18)}

.page-explorer__link{
display:grid;
grid-template-columns:3rem minmax(0,1fr) auto;
gap:var(--space-2);
align-items:center;
min-height:7rem;
padding:var(--space-2);
border-bottom:1px solid rgba(242,238,229,.18);
transition:background .25s ease,padding .25s ease,color .25s ease;
}

.page-explorer__link:hover{
padding-inline:var(--space-3);
background:rgba(100,214,197,.07);
color:var(--text-primary);
}

.page-explorer__number{color:var(--detail-gold);font-family:var(--font-heading);font-size:1.2rem}
.page-explorer__link strong{display:block;font-family:var(--font-heading);font-size:clamp(1.35rem,2vw,1.7rem)}
.page-explorer__link small{display:block;margin-top:.2rem}
.page-explorer__arrow{font-size:1.4rem;color:var(--brand-mint)}

@media(max-width:760px){
.page-explorer__inner{grid-template-columns:1fr}
.page-explorer__intro{position:static}
.page-explorer__link{grid-template-columns:2.2rem minmax(0,1fr) auto;min-height:6rem;padding-inline:0}
.page-explorer__link:hover{padding-inline:.5rem}
}