@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root{--bg:#080808;--panel:#121212;--text:#f5f2ea;--muted:#aaa69c;--gold:#d5ab4c;--gold2:#f0cf78;--line:rgba(213,171,76,.22);--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 50% -10%,rgba(213,171,76,.14),transparent 32rem),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gold2);outline-offset:4px;border-radius:4px}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--gold2);color:#111;padding:.65rem 1rem;border-radius:8px;font-weight:700}
.skip-link:focus{top:1rem}
header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;max-width:var(--max);margin:auto;padding:1.2rem 1.5rem;background:rgba(8,8,8,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.wordmark{color:var(--gold2);font-weight:800;letter-spacing:.18em}
nav{display:flex;gap:1.4rem}
nav a,.footer-links a{color:var(--muted);font-size:.92rem;transition:color .2s ease}
nav a:hover,.footer-links a:hover{color:var(--gold2)}
.hero{min-height:78vh;display:grid;place-content:center;text-align:center;padding:7rem 1.5rem 5rem}
.eyebrow,.label{color:var(--gold);font-size:.76rem;font-weight:700;letter-spacing:.2em}
h1,h2{font-family:"Playfair Display",Georgia,serif}
h1{max-width:980px;margin:.8rem auto 1.2rem;font-size:clamp(3rem,7vw,6.5rem);line-height:.99;letter-spacing:-.04em}
h1 span{color:var(--gold2)}
.lead{max-width:650px;margin:auto;color:#d2cec4;font-size:clamp(1rem,2vw,1.25rem)}
.buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.button{min-width:190px;padding:.9rem 1.25rem;border:1px solid var(--gold);border-radius:999px;font-weight:700;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.primary{background:var(--gold);color:#111}
.secondary{color:var(--gold2)}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(213,171,76,.16)}
.micro{margin-top:1.25rem;color:#817d74;font-size:.82rem}
.section{max-width:var(--max);margin:auto;padding:6.5rem 1.5rem;border-top:1px solid var(--line);scroll-margin-top:90px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem}
.split h2,.philosophy h2{margin:.8rem 0 0;font-size:clamp(2.2rem,4vw,4rem);line-height:1.08}
.split p{color:#c1bdb4}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.cards article{min-height:230px;padding:1.7rem;background:linear-gradient(145deg,#161616,#101010);border:1px solid var(--line);border-radius:20px;transition:transform .2s ease,border-color .2s ease}
.cards article:hover{transform:translateY(-3px);border-color:rgba(240,207,120,.42)}
.cards b{color:var(--gold2);font-size:1.5rem}
.cards h3{margin:2.4rem 0 .5rem}
.cards p{color:var(--muted)}
.games{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:2rem}
.games span{display:grid;place-items:center;min-height:95px;padding:1rem;text-align:center;background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:14px;transition:transform .2s ease,border-color .2s ease}
.games span:hover{transform:translateY(-2px);border-color:var(--line)}
.worlds-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:end;margin-top:.8rem}
.worlds-intro h2{margin:0;font-size:clamp(2.2rem,4vw,4rem);line-height:1.08}
.worlds-intro p{margin:0;color:#c1bdb4;max-width:540px}
.world-card{position:relative;isolation:isolate;margin-top:2.5rem;padding:2rem 2rem 4.4rem;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;aspect-ratio:1744/976;background:url('/abyssal-tides-world-001-hero.png') center/cover no-repeat;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.world-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.72) 42%,rgba(8,8,8,.28) 72%,rgba(8,8,8,.38) 100%);pointer-events:none}
.world-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.world-copy,.world-status{position:relative;z-index:2}
.world-number{margin:0;color:var(--gold);font-size:.76rem;font-weight:700;letter-spacing:.2em}
.world-card h3{margin:.65rem 0 .7rem;font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,4vw,3.4rem);line-height:1.05}
.world-card p:not(.world-number){max-width:620px;margin-bottom:0;color:#d0ccc2;text-shadow:0 1px 16px rgba(0,0,0,.65)}
.world-status{flex:0 0 auto;padding:.7rem 1rem;background:rgba(8,8,8,.62);border:1px solid rgba(240,207,120,.35);border-radius:999px;color:var(--gold2);font-size:.72rem;font-weight:700;letter-spacing:.14em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.philosophy{padding:9rem 1.5rem;text-align:center;background:linear-gradient(180deg,transparent,rgba(213,171,76,.07),transparent);border-top:1px solid var(--line)}
.philosophy p{color:var(--gold);text-transform:uppercase;letter-spacing:.12em}
footer{max-width:var(--max);margin:auto;padding:3rem 1.5rem 4rem;display:grid;grid-template-columns:1fr auto;gap:1rem;border-top:1px solid var(--line)}
footer strong{color:var(--gold2);letter-spacing:.12em}
footer p{margin:.25rem 0;color:var(--muted)}
.footer-links{display:flex;gap:1.2rem}
.copyright{grid-column:1/-1;font-size:.8rem}

@media(max-width:760px){
  nav{display:none}
  .section{padding:4.5rem 1.2rem}
  .split,.cards,.games,.worlds-intro{grid-template-columns:1fr}
  .split,.worlds-intro{gap:1.25rem}
  .worlds-intro h2{font-size:clamp(2.7rem,11vw,4rem)}
  .worlds-intro p{font-size:1rem;line-height:1.55}
  .world-card{aspect-ratio:auto;align-items:flex-start;flex-direction:column;justify-content:flex-start;gap:1rem;min-height:0;margin-top:2rem;padding:56vw 1.35rem 1.4rem;background-color:#0b0b0b;background-image:url('/abyssal-tides-world-001-hero.png');background-position:top center;background-size:100% auto;background-repeat:no-repeat;border-radius:18px}
  .world-card::after{background:linear-gradient(180deg,rgba(8,8,8,0) 0%,rgba(8,8,8,.08) 42%,rgba(8,8,8,.92) 58%,#0b0b0b 100%)}
  .world-video{height:56vw;object-position:center top}
  .world-card h3{font-size:clamp(2.25rem,10vw,3.2rem);margin:.3rem 0 .35rem}
  .world-number{font-size:.72rem}
  .world-card p:not(.world-number){font-size:1rem;line-height:1.5;color:#d7d3ca;text-shadow:none}
  .world-status{margin-top:.35rem;align-self:flex-start;padding:.7rem 1rem;background:#0d0d0d;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero{min-height:72vh;padding-top:5.5rem}
  footer{grid-template-columns:1fr}
  .footer-links{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .world-video{display:none}
}