/* jspace.it — pagina minimale: logo, dominio, slogan. Nessuna risorsa esterna (font in /fonts). */
/* Layout: un solo blocco al centro dello schermo; inchiostro ginepro su fondo scuro, rame per il punto in orbita. */

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/fonts/bricolage-grotesque-wght.woff2') format('woff2');
    font-weight: 300 800;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

:root {
    --bg: #0e1716;
    --ink: #e3ece9;
    --muted: #8fa49e;
    --ring: #2b3c39;
    --juniper: #5fb3a4;
    --copper: #e08c4f;
    --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    color-scheme: dark;
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #eef2f0;
        --ink: #14302b;
        --muted: #556b65;
        --ring: #c9d6d1;
        --juniper: #1f5b52;
        --copper: #b5652b;
        color-scheme: light;
    }
}

html,
body {
    height: 100%;
    margin: 0;
}
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--display);
}

.stage {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
    padding: max(24px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
        max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

.mark {
    width: clamp(96px, 18vw, 150px);
    height: auto;
    overflow: visible;
}
.ring {
    fill: none;
    stroke: var(--ring);
    stroke-width: 2;
}
.j {
    fill: none;
    stroke: var(--juniper);
    stroke-width: 10;
    stroke-linecap: round;
}
.dot {
    fill: var(--copper);
}
.orbit {
    transform-origin: 60px 60px;
    animation: orbita 14s linear infinite;
}
@keyframes orbita {
    to {
        transform: rotate(360deg);
    }
}

.domain {
    margin: 0;
    font-weight: 700;
    font-size: clamp(44px, 9vw, 96px);
    letter-spacing: -0.035em;
    line-height: 1;
}
.domain span {
    color: var(--juniper);
}

.slogan {
    margin: 0;
    font-family: var(--mono);
    font-size: clamp(14px, 2vw, 18px);
    letter-spacing: 0.04em;
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .orbit {
        animation: none;
        transform: rotate(40deg);
    }
}