:root {
    color-scheme: light;
    --ink: #14213d;
    --muted: #718096;
    --site-primary: #246bfe;
    --site-primary-dark: #1d56cb;
    --site-primary-soft: #e1ebff;
    --site-primary-rgb: 36, 107, 254;
    --site-primary-contrast: #fff;
    --site-button: #17233d;
    --site-button-dark: #121c31;
    --site-button-soft: #dfe2e7;
    --site-button-rgb: 23, 35, 61;
    --site-button-contrast: #fff;
    --accent: var(--site-primary);
    --paper: #ffffff;
}

html {
    scroll-behavior: smooth;
}

.site-secondary-content[data-menu-section] {
    scroll-margin-top: 6.25rem;
}

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior: none;
}

body {
    font-family: "Chivo", Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--site-primary-rgb), 0.09), transparent 26rem),
        radial-gradient(circle at 82% 84%, rgba(var(--site-primary-rgb), 0.06), transparent 28rem),
        #f7f9fc;
}

.construction-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    overflow: hidden;
    position: relative;
}

.construction-shell::before {
    content: "";
    position: absolute;
    width: clamp(18rem, 36vw, 34rem);
    aspect-ratio: 1;
    top: clamp(-7rem, -8vw, -4rem);
    right: clamp(-6rem, -5vw, -2.5rem);
    background: url("../images/main-content/studio-symbol-hd.png") center / contain no-repeat;
    opacity: 0.13;
    pointer-events: none;
}

.construction-card {
    width: min(100%, 40rem);
    text-align: center;
    padding: clamp(2.5rem, 8vw, 5rem) 2rem;
    position: relative;
    z-index: 1;
}

.construction-logo-frame {
    display: grid;
    width: min(10rem, 45vw);
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    margin: 0 auto 2rem;
    border: 1px solid rgba(20, 33, 61, 0.07);
    background: rgba(255, 255, 255, 0.72);
}

.construction-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-shape-square {
    border-radius: 0;
}

.logo-shape-rounded {
    border-radius: 14%;
}

.logo-shape-circle {
    border-radius: 50%;
}

.construction-mark,
.miniature-mark {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.28rem;
}

.construction-mark {
    width: 4.5rem;
    height: 4.5rem;
    padding: 1.15rem;
    border-radius: 1.4rem;
    margin-bottom: 2rem;
    background: var(--ink);
    box-shadow: 0 1rem 2.4rem rgba(20, 33, 61, 0.18);
}

.construction-mark span,
.miniature-mark span {
    width: 0.38rem;
    border-radius: 999px;
    background: #fff;
}

.construction-mark span:nth-child(1),
.miniature-mark span:nth-child(1) {
    height: 48%;
}

.construction-mark span:nth-child(2),
.miniature-mark span:nth-child(2) {
    height: 100%;
    background: var(--site-primary);
}

.construction-mark span:nth-child(3),
.miniature-mark span:nth-child(3) {
    height: 72%;
}

.construction-name {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: 0.77rem;
    line-height: 1.2;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.19em;
}

.construction-subtitle {
    max-width: 32rem;
    margin: -0.35rem auto 1.25rem;
    color: color-mix(in srgb, var(--ink) 66%, transparent);
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    line-height: 1.5;
}

.construction-card h1 {
    margin: 0;
    font-size: clamp(2.1rem, 6.8vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.055em;
    font-weight: 680;
}

.public-link {
    display: inline-flex;
    margin-top: 2rem;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 650;
}

.public-link:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
    .construction-card {
        animation: reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes reveal {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}