/* Visual-first public site: worlds, wikis, systems and build log. */
.studio-v2 {
    --studio-night: #080d18;
    --studio-panel: #101a2b;
    --studio-cream: #f5f1e8;
    --studio-muted: #aeb9c8;
    --studio-line: rgba(245, 241, 232, 0.16);
    --world-accent: var(--ats-sunset-orange);
}

.studio-home {
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(30rem, 1.28fr);
    min-height: min(45rem, calc(100vh - 7rem));
    overflow: hidden;
    border-radius: var(--ats-radius-lg);
    background: var(--studio-night);
    box-shadow: var(--ats-shadow-lg);
    color: var(--studio-cream);
}

.studio-home__intro {
    display: grid;
    align-content: space-between;
    gap: var(--ats-space-7);
    padding: clamp(2rem, 5vw, 4.5rem);
    background: linear-gradient(145deg, rgba(79, 159, 232, 0.12), transparent 46%);
}

.studio-home__copy { display: grid; gap: var(--ats-space-5); }
.studio-home h1 { max-width: 10ch; color: var(--studio-cream); }
.studio-home .lede { max-width: 34rem; color: var(--studio-muted); }
.studio-home__routes { display: flex; flex-wrap: wrap; gap: var(--ats-space-2); }
.studio-home__routes span,
.project-meta span,
.development-tag {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--studio-line);
    color: var(--studio-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-home__selection {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ats-space-3) var(--ats-space-4);
    align-items: center;
    padding-top: var(--ats-space-5);
    border-top: 1px solid var(--studio-line);
}

.studio-home__selection > span {
    color: var(--world-accent);
    font: 700 2.6rem/1 var(--ats-font-display);
}

.studio-home__selection :where(strong, small) { display: block; }
.studio-home__selection strong { color: var(--studio-cream); }
.studio-home__selection small { margin-top: var(--ats-space-1); color: var(--studio-muted); }
.studio-home__selection a { grid-column: 2; width: fit-content; color: var(--world-accent); font-weight: 800; }

.studio-world-stage {
    position: relative;
    min-height: 42rem;
    overflow: hidden;
    border-left: 1px solid var(--studio-line);
    background:
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--world-accent) 25%, transparent), transparent 12%, transparent 27%),
        radial-gradient(circle at 50% 48%, transparent 0 27%, rgba(245, 241, 232, 0.1) 27.1% 27.4%, transparent 27.6%),
        radial-gradient(circle at 50% 48%, transparent 0 43%, rgba(245, 241, 232, 0.07) 43.1% 43.3%, transparent 43.5%),
        var(--studio-panel);
}

.studio-world-stage__core {
    position: absolute;
    top: 48%; left: 50%;
    display: grid;
    width: clamp(6rem, 12vw, 8rem);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--world-accent);
    color: var(--studio-night);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.studio-world-stage__node {
    position: absolute;
    display: grid;
    width: min(12rem, 31%);
    min-height: 6rem;
    align-content: center;
    gap: var(--ats-space-1);
    padding: var(--ats-space-4);
    border: 1px solid var(--studio-line);
    background: rgba(8, 13, 24, 0.9);
    color: var(--studio-cream);
    text-align: left;
    transition: 180ms ease;
}

.studio-world-stage__node span { color: var(--studio-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.studio-world-stage__node:hover,
.studio-world-stage__node[aria-pressed='true'] { border-color: var(--node-accent); background: color-mix(in srgb, var(--node-accent) 14%, var(--studio-night)); color: var(--studio-cream); transform: translateY(-0.3rem); }
.studio-world-stage__node[data-world='seven'] { --node-accent: #d8ae62; top: 10%; left: 7%; }
.studio-world-stage__node[data-world='crownfall'] { --node-accent: #ae81d7; top: 13%; right: 7%; }
.studio-world-stage__node[data-world='horde'] { --node-accent: #69bd78; bottom: 10%; left: 8%; }
.studio-world-stage__node[data-world='morphlings'] { --node-accent: #56c6d2; right: 8%; bottom: 8%; }
.studio-world-stage__caption { position: absolute; right: var(--ats-space-4); bottom: var(--ats-space-4); color: var(--studio-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.visual-route-grid,
.world-poster-grid,
.system-grid,
.build-log-grid,
.wiki-route-grid { display: grid; gap: var(--ats-space-5); }
.visual-route-grid,
.build-log-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.world-poster-grid,
.system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.visual-route {
    position: relative;
    display: grid;
    min-height: 15rem;
    overflow: hidden;
    align-content: end;
    gap: var(--ats-space-2);
    padding: var(--ats-space-5);
    border: 1px solid rgba(7, 26, 53, 0.14);
    background: var(--ats-white);
    color: var(--ats-ink);
}
.visual-route::before { position: absolute; inset: 0 0 45%; background: radial-gradient(circle at 72% 35%, var(--route-colour, var(--ats-sky-blue)) 0 8%, transparent 9%), linear-gradient(145deg, color-mix(in srgb, var(--route-colour, var(--ats-sky-blue)) 42%, var(--ats-midnight)), var(--ats-midnight)); content: ''; }
.visual-route:nth-child(2) { --route-colour: var(--ats-sea-green); }
.visual-route:nth-child(3) { --route-colour: var(--ats-sunset-orange); }
.visual-route :where(span, strong) { position: relative; }
.visual-route span { color: var(--ats-ink-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.visual-route strong { font: 700 1.35rem/1.2 var(--ats-font-display); }

.v2-page-header { display: grid; max-width: 62rem; gap: var(--ats-space-4); padding-block: clamp(1rem, 4vw, 3rem); }

.world-poster {
    --poster-colour: var(--ats-sky-blue);
    position: relative;
    display: grid;
    min-height: clamp(24rem, 42vw, 34rem);
    overflow: hidden;
    align-content: end;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--ats-radius-lg);
    background: linear-gradient(transparent 28%, rgba(7, 13, 24, 0.92) 82%), radial-gradient(circle at 68% 24%, var(--poster-colour) 0 5%, transparent 6%), radial-gradient(circle at 68% 24%, color-mix(in srgb, var(--poster-colour) 32%, transparent) 0 20%, transparent 45%), var(--ats-midnight);
    box-shadow: var(--ats-shadow-lg);
}
.world-poster--seven { --poster-colour: #d8ae62; }
.world-poster--crownfall { --poster-colour: #a874d4; }
.world-poster--horde { --poster-colour: #5dbb72; }
.world-poster--morphlings { --poster-colour: #4fc4d1; }
.world-poster::before { position: absolute; top: -18%; right: -8%; width: 58%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--poster-colour) 70%, transparent); border-radius: 50%; content: ''; }
.world-poster__content { position: relative; display: grid; gap: var(--ats-space-3); }
.world-poster :where(h2, p, a) { color: var(--ats-warm-white); }
.world-poster h2 { font-size: clamp(2rem, 5vw, 4rem); }
.project-meta,
.project-actions { display: flex; flex-wrap: wrap; gap: var(--ats-space-2); }
.project-meta span { color: var(--ats-warm-white); }
.project-actions a { min-height: 2.75rem; padding: 0.6rem 0.9rem; border: 1px solid rgba(245, 241, 232, 0.35); font-weight: 800; }
.project-actions a:first-child { border-color: var(--poster-colour); background: var(--poster-colour); color: var(--ats-midnight); }

.system-card {
    display: grid;
    min-height: 33rem;
    align-content: space-between;
    gap: var(--ats-space-6);
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--ats-radius-lg);
    background: var(--studio-night);
    color: var(--studio-cream);
    box-shadow: var(--ats-shadow-lg);
}
.system-card :where(h2, p) { color: var(--studio-cream); }
.system-card p { color: var(--studio-muted); }
.dice-visual,
.terrain-visual { display: grid; min-height: 18rem; place-items: center; perspective: 50rem; }
.dice-face { display: grid; width: clamp(8rem, 18vw, 12rem); aspect-ratio: 1; place-items: center; background: linear-gradient(145deg, var(--ats-sunset-orange), #b9572a); box-shadow: 1.8rem 2rem 0 #3a2130; color: var(--ats-midnight); font: 700 4rem/1 var(--ats-font-display); transform: rotateX(54deg) rotateZ(40deg); }
.terrain-grid { display: grid; grid-template-columns: repeat(6, minmax(1.7rem, 3rem)); gap: 0.22rem; transform: rotateX(58deg) rotateZ(-42deg); }
.terrain-grid i { aspect-ratio: 1; background: color-mix(in srgb, var(--ats-sea-green) var(--tone, 58%), var(--ats-midnight)); box-shadow: var(--lift, 0.2rem) var(--lift, 0.2rem) 0 #172b2d; transform: translateZ(var(--lift, 0.2rem)); }
.terrain-grid i.path { background: var(--ats-sunset-orange); }
.development-tag { width: fit-content; }

.build-log-card { display: grid; min-height: 26rem; overflow: hidden; align-content: end; padding: var(--ats-space-5); border-radius: var(--ats-radius-lg); background: linear-gradient(transparent 30%, rgba(7, 26, 53, 0.94)), repeating-linear-gradient(135deg, rgba(245, 241, 232, 0.07) 0 1rem, transparent 1rem 2rem), var(--ats-deep-blue); color: var(--ats-warm-white); }
.build-log-card:nth-child(2) { background-color: #345e59; }
.build-log-card:nth-child(3) { background-color: #784238; }
.build-log-card :where(h2, p) { color: var(--ats-warm-white); }
.build-log-card p { color: #ced8e3; }

.project-world { --project-colour: var(--ats-sky-blue); }
.project-world--crownfall { --project-colour: #a874d4; }
.project-world--horde { --project-colour: #5dbb72; }
.project-world--morphlings { --project-colour: #4fc4d1; }
.project-world__hero { position: relative; display: grid; min-height: min(43rem, calc(100vh - 7rem)); overflow: hidden; align-content: end; padding: clamp(2rem, 7vw, 6rem); border-radius: var(--ats-radius-lg); background: linear-gradient(90deg, rgba(7, 13, 24, 0.96), rgba(7, 13, 24, 0.42)), radial-gradient(circle at 70% 35%, var(--project-colour) 0 5%, transparent 6%), radial-gradient(circle at 70% 35%, color-mix(in srgb, var(--project-colour) 34%, transparent) 0 21%, transparent 43%), var(--ats-midnight); box-shadow: var(--ats-shadow-lg); }
.project-world__hero::after { position: absolute; top: 15%; right: 10%; width: min(26rem, 38%); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--project-colour) 64%, transparent); border-radius: 50%; content: ''; }
.project-world__copy { position: relative; z-index: 1; display: grid; max-width: 48rem; gap: var(--ats-space-4); }
.project-world__copy :where(h1, p) { color: var(--ats-warm-white); }
.project-world__copy p { color: #cbd2dc; }
.project-world__copy .button-primary { border-color: var(--project-colour); background: var(--project-colour); color: var(--ats-midnight); }
.project-world__copy .button-secondary { border-color: rgba(245, 241, 232, 0.5); color: var(--ats-warm-white); }

.wiki-page { --wiki-colour: var(--ats-sky-blue); }
.wiki-page--seven { --wiki-colour: #d8ae62; }
.wiki-page--crownfall { --wiki-colour: #a874d4; }
.wiki-page--horde { --wiki-colour: #5dbb72; }
.wiki-page--morphlings { --wiki-colour: #4fc4d1; }
.wiki-map { display: grid; min-height: 31rem; place-items: center; border-radius: var(--ats-radius-lg); background: radial-gradient(circle, color-mix(in srgb, var(--wiki-colour) 18%, transparent), transparent 23%), radial-gradient(circle, transparent 0 31%, rgba(7, 26, 53, 0.12) 31.2% 31.4%, transparent 31.6%), var(--ats-white); }
.wiki-map__core { display: grid; width: 9rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--wiki-colour); color: var(--ats-midnight); font: 700 1.2rem/1.2 var(--ats-font-display); text-align: center; }
.wiki-route-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wiki-route { display: grid; min-height: 10rem; align-content: space-between; gap: var(--ats-space-3); padding: var(--ats-space-4); border-top: 0.2rem solid var(--wiki-colour); background: var(--ats-white); }
.wiki-route span { color: var(--ats-ink-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 64rem) {
    .studio-home { grid-template-columns: 1fr; }
    .studio-home__intro { min-height: 29rem; }
    .studio-world-stage { min-height: 37rem; border-top: 1px solid var(--studio-line); border-left: 0; }
    .wiki-route-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
    .visual-route-grid, .world-poster-grid, .system-grid, .build-log-grid { grid-template-columns: 1fr; }
    .world-poster { min-height: 27rem; }
    .system-card { min-height: 29rem; }
    .wiki-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
    .studio-home__intro { min-height: 31rem; padding: var(--ats-space-5); }
    .studio-world-stage { display: grid; min-height: 0; gap: var(--ats-space-2); padding: var(--ats-space-3); background: var(--studio-panel); }
    .studio-world-stage__core, .studio-world-stage__caption { display: none; }
    .studio-world-stage__node { position: static; width: 100%; min-height: 5rem; }
    .studio-world-stage__node:hover, .studio-world-stage__node[aria-pressed='true'] { transform: none; }
    .wiki-route-grid { grid-template-columns: 1fr; }
    .terrain-grid { grid-template-columns: repeat(6, minmax(1.45rem, 2rem)); }
}