/* ============================================================================
   The Worlds of Clayton Taylor Wood — series hub / index.
   A dark, elegant "gallery of doors" that links to the six immersive series
   landing pages. Each card carries its own series accent colour.
   ============================================================================ */
:root{
  --bg: #08080f;
  --bg-2: #0e0e18;
  --card: #12121f;
  --ink: #eef1f8;
  --dim: #a6adc4;
  --faint: #6f7690;
  --line: rgba(150,160,210,0.14);
  --maxw: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --display: "Cinzel", "Spectral", Georgia, serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }

/* ambient multi-colour glow — all the worlds at once */
.bg-field{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 30% at 12% 0%, rgba(67,226,255,.14), transparent 70%),
    radial-gradient(38% 30% at 40% -4%, rgba(229,72,77,.12), transparent 70%),
    radial-gradient(38% 30% at 66% -2%, rgba(227,168,62,.12), transparent 70%),
    radial-gradient(38% 30% at 90% 2%, rgba(185,140,255,.13), transparent 70%),
    radial-gradient(50% 40% at 20% 100%, rgba(63,214,160,.10), transparent 70%),
    radial-gradient(50% 40% at 85% 100%, rgba(236,72,153,.10), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 60%, var(--bg));
}

/* ── header ─────────────────────────────────────────────────────────────── */
header.hub-head{
  max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,9vw,6rem) clamp(1.2rem,4vw,2rem) 1.5rem;
  text-align:center;
}
.hub-eyebrow{
  font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--faint); margin:0 0 1.2rem;
}
.hub-title{
  font-family:var(--display); font-weight:700; line-height:1.08;
  font-size:clamp(2.2rem,6vw,4rem); margin:0 0 1.1rem;
  background:linear-gradient(100deg,#7fd7ff,#f0a8ac,#f3c877,#c9adff,#7fe6c0);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hub-sub{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--dim); max-width:60ch; margin:0 auto; }

/* ── grid ───────────────────────────────────────────────────────────────── */
main{ max-width:var(--maxw); margin:0 auto; padding:1.5rem clamp(1.2rem,4vw,2rem) 2rem; }
.hub-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
  gap:1.3rem; margin:2rem 0;
}
.world{
  --c:#8aa0d0;
  display:grid; grid-template-columns:120px 1fr; gap:1.3rem; align-items:stretch;
  text-decoration:none; color:inherit;
  background:linear-gradient(180deg, var(--card), var(--bg-2));
  border:1px solid var(--line); border-radius:16px; padding:1.15rem;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:transform .2s var(--ease), border-color .2s, box-shadow .3s;
}
.world:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--c) 20%, transparent);
}
.world-cover{ position:relative; width:120px; aspect-ratio:2/3; border-radius:7px; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.55); background:#000; }
.world-cover img{ width:100%; height:100%; object-fit:cover; }
.world-cover::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); border-radius:7px; }
.world-body{ display:flex; flex-direction:column; }
.world-name{ font-family:var(--display); font-weight:700; font-size:1.3rem; line-height:1.15; margin:.1rem 0 .1rem; color:var(--c); }
.world-hook{ font-size:.96rem; color:var(--ink); line-height:1.5; margin:.35rem 0 .7rem; }
.world-meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; }
.chip{ font-family:var(--display); font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--c) 40%, transparent);
  color:color-mix(in srgb, var(--c) 80%, var(--ink)); white-space:nowrap; }
.chip.status{ background:color-mix(in srgb, var(--c) 14%, transparent); border-color:transparent; color:color-mix(in srgb, var(--c) 88%, #fff); }
.world-go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c); }
.world-go .arr{ transition:transform .2s var(--ease); }
.world:hover .world-go .arr{ transform:translateX(4px); }

@media (max-width:460px){
  .world{ grid-template-columns:88px 1fr; gap:1rem; }
  .world-cover{ width:88px; }
}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer.hub-foot{ text-align:center; padding:2.5rem 1.5rem 4rem; border-top:1px solid var(--line); margin-top:1.5rem; }
.hub-foot p{ color:var(--dim); font-size:.95rem; margin:0 0 1rem; }
.hub-foot a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; transition:color .2s, border-color .2s; }
.hub-foot a:hover{ color:#fff; border-color:currentColor; }
.hub-legal{ color:var(--faint); font-size:.78rem; margin-top:1.4rem!important; }