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

:root {
    --black: #000;
    --white: #fff;
    --red: #d41222;
    --gray: #666;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--black);
    color: var(--black);
    font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow: hidden;
}

#landing {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--black);
}

/* ── Logo SVG ── */

#landing-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(140px, 22vw, 200px);
    height: clamp(140px, 22vw, 200px);
    margin-left: calc(clamp(140px, 22vw, 200px) / -2);
    margin-top: calc(clamp(140px, 22vw, 200px) / -2);
    overflow: visible;
    z-index: 10;
    cursor: pointer;
    will-change: transform;
}

#landing.is-open #landing-logo {
    cursor: default;
}

.logo-fill {
    fill: var(--white);
}

#pieces {
    opacity: 0;
    overflow: visible;
}

/* Each piece is <g class="piece-unit"><rect class="piece-hit">
   <path class="piece"></g> (built in landing.js) — the path is purely
   visual. The rect was meant to be the interactive element (a plain filled
   rectangle hit-tests unambiguously everywhere, unlike a transparent stroke,
   which Safari doesn't reliably treat as "painted" the way Firefox does) —
   but once open, every piece sits transformed way outside the small SVG
   element's own box, and WebKit simply never hit-tests SVG content past
   that box, however overflow:visible renders it or pointer-events is set on
   the content itself. So the rect works in Firefox/Chrome but not Safari;
   the actual cross-browser interactive surface is the plain-HTML nav-item
   label (see .nav-item's padding in the nav rules below), which has none
   of that ceiling. is-hovered here is toggled from JS on the label's own
   hover, not from the rect — see landing.js. */
.piece-unit {
    transform-origin: center center;
    transform-box: fill-box;
}

.piece {
    fill: var(--black);
    pointer-events: none;
}

.piece-hit {
    fill: transparent;
    pointer-events: none;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.shard-group {
    pointer-events: none;
}

#landing.is-open .piece-hit {
    pointer-events: all;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    #landing.is-open .piece-hit:hover ~ .piece {
        fill: var(--red);
    }

    #landing.is-open .piece.is-hovered {
        fill: var(--red);
    }
}

/* ── Navigation labels ── */

.nav {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.nav-item {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--red);
    opacity: 0;
    pointer-events: none;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

#landing.is-open .nav-item {
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .nav-item:hover .nav-label {
        background: #ff1a2e;
    }
}

/* Once open, pieces are transformed far outside the small SVG element's own
   box, relying on overflow:visible to still render — but WebKit never
   hit-tests SVG content past that box no matter what pointer-events say on
   the content itself, so the piece's own shape (or its padded hit-rect) is
   never reliably clickable/hoverable there, only in Firefox/Chrome. The
   label lives in plain HTML outside the SVG entirely, so it has none of
   that ceiling — padding its own invisible hit area out to comfortably
   cover the piece makes the label (not the piece silhouette) the one
   interactive surface that's actually reliable everywhere. Real touch
   testing on iOS additionally showed taps on the rotated, irregular piece
   shapes themselves miss unpredictably even where hit-testing does reach
   them, so the same padding applies at every size, not just touch.  */
.nav-item {
    padding: 3.5rem;
}

@media (max-width: 640px) {
    .nav-item {
        padding: 5rem;
    }
}

.nav-label {
    display: inline-block;
    font-family: "Space Mono", "Courier New", monospace;
    font-size: clamp(0.58rem, 1vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: var(--red);
    padding: 0.25em 0.42em;
}

/* ── Brand mark ── */

.brand-mark {
    position: fixed;
    top: clamp(1.2rem, 3.5vh, 2rem);
    left: clamp(1.2rem, 3.5vw, 2rem);
    z-index: 25;
    font-family: "Unbounded", "Space Grotesk", sans-serif;
    font-weight: 800;
    font-size: clamp(0.8rem, 1.3vw, 1rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--black);
    opacity: 0;
    pointer-events: none;
}

/* ── Hero centre ── */

.hero {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 15;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    width: auto;
    max-width: 82vw;
}

.hero-title {
    margin: 0;
    font-family: "Newsreader", "Space Grotesk", serif;
    font-weight: 500;
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    letter-spacing: 0;
    color: var(--black);
}

.hero-phonetic {
    margin: 0.3rem 0 0;
    font-family: "Space Mono", monospace;
    font-style: italic;
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
    letter-spacing: 0.05em;
    color: var(--red);
}

.hero-tagline {
    margin: 0.6rem auto 0;
    max-width: clamp(16rem, 40vw, 26rem);
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--gray);
}