:root {
    --bg: #07080c;
    --bg-deep: #05060a;
    --ink: #F5F3EE;
    --ink-soft: #D2CDC4;
    --muted: #9A948A;
    --line: #2A2D36;
    --card: #12141a;
    --accent: #7ec8ff;
    --accent-warm: #D4A06A;
    --accent-deep: #E0B484;
    --live: #7DB88A;
    --font-display: "Outfit", system-ui, sans-serif;
    --font-serif: "Fraunces", Georgia, serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --header-h: 4.25rem;
}

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

html,
body {
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    color-scheme: dark;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-display);
    overflow: hidden;
    background: #05060a;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 72%, transparent), transparent);
}

.header-inner {
    width: min(1200px, calc(100% - 2.5rem));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
}

.logo-mark {
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 0.45rem;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.85rem;
    font-weight: 700;
}

.logo-text {
    font-size: 0.95rem;
}

.site-nav {
    display: flex;
    gap: 1.25rem;
}

/* Reads over whichever part of the painting is behind the header, so it carries
   its own contrast rather than relying on the header scrim alone. */
.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--ink) 88%, transparent);
    text-shadow: 0 1px 10px #000, 0 0 24px #000;
    transition: color 0.2s;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--ink);
}

.lab {
    position: relative;
    height: 100svh;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
}

/* Bleeds the painting into the letterbox instead of leaving hard black bars. */
.lab::before {
    content: "";
    position: absolute;
    inset: -6%;
    background-image: var(--lab-image, none);
    background-size: cover;
    background-position: center;
    filter: blur(46px) brightness(0.42) saturate(0.75);
    z-index: 0;
}

html[data-sky="night"] { --lab-image: url("images/lab-night.jpg"); }
html[data-sky="day"] { --lab-image: url("images/lab-day.jpg"); }

/* The artwork defines the stage: the scene box matches the 3:2 source image,
   so every overlay below can be positioned in image coordinates. */
.lab-scene {
    position: relative;
    width: min(100vw, calc(100svh * 3 / 2));
    aspect-ratio: 3 / 2;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 0 80px 20px color-mix(in oklab, black 65%, transparent);
    /* No scale here: a fractional composite scale resamples the whole stage,
       softening the artwork and every glyph drawn on it. The parallax shift is
       small enough that the blurred backdrop covers what it uncovers. */
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    will-change: transform;
    /* cqw lets every overlay scale with the painting instead of the viewport. */
    container-type: inline-size;
}

.lab-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transition: opacity 1.2s ease;
}

html[data-sky="night"] .lab-photo--night,
html[data-sky="day"] .lab-photo--day {
    opacity: 1;
}

/* Sits over the moon / sun already painted into the window. */
.sky-glow {
    position: absolute;
    left: 18.5%;
    top: 16.9%;
    width: 7%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in oklab, #cfe6ff 42%, transparent) 0%, transparent 62%);
    animation: sky-breathe 7s ease-in-out infinite;
}

html[data-sky="day"] .sky-glow {
    left: 20%;
    top: 16.6%;
    width: 12%;
    background: radial-gradient(circle, color-mix(in oklab, #ffd48a 45%, transparent) 0%, transparent 64%);
}

/* Each .screen is pinned to a monitor that exists in the painting. */
.screens {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* No fill: a tinted box would read as a rectangle floating over the painting
   wherever the traced bounds miss the bezel by a pixel. */
.screen {
    position: absolute;
    overflow: hidden;
    mix-blend-mode: screen;
}

/* Coordinates traced from the glowing text areas of the source painting. Now
   that Caelum faces the wall, nothing of his overlaps the top two rows, so each
   feed gets the full width of its bezel. */
.screen--m1 { left: 60.8%; top: 12.2%; width: 7.4%; height: 9.7%; }
.screen--m2 { left: 72.2%; top: 11.1%; width: 7.7%; height: 10.4%; }
.screen--m3 { left: 61.2%; top: 25.1%; width: 7.4%; height: 9.2%; }
.screen--m4 { left: 70.3%; top: 24.7%; width: 8.2%; height: 10.2%; }
.screen--m5 { left: 81.3%; top: 24.9%; width: 7.3%; height: 9.4%; }

.screen-feed {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.46cqw;
    line-height: 1.5;
    color: #8ce8ff;
    text-shadow: 0 0 0.25cqw color-mix(in oklab, #8ce8ff 70%, transparent);
    white-space: pre;
    transform: translateY(0);
    transition: transform 0.9s linear;
}

.hotspot {
    position: absolute;
    z-index: 4;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
    opacity: 0.35;
    transition: opacity 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.hotspot:hover,
.hotspot:focus-visible {
    opacity: 1;
    transform: scale(1.12);
    box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 45%, transparent);
}

.hotspot-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8cqw;
    letter-spacing: 0.06em;
    background: color-mix(in oklab, #0b1018 78%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label {
    opacity: 1;
}

.hotspot--window {
    left: 30%;
    top: 26%;
    width: 1.7%;
    aspect-ratio: 1;
}

.hotspot--printer {
    left: 32%;
    top: 46%;
    width: 1.7%;
    aspect-ratio: 1;
}

.hotspot--chair {
    left: 13%;
    top: 63%;
    width: 1.7%;
    aspect-ratio: 1;
}

/* Traced to the projector puck painted on the desk, so the plate stands in the
   cone of light coming off it. */
.hologram {
    position: absolute;
    z-index: 7;
    width: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    animation: hologram-float 6s ease-in-out infinite;
}

/* Centred on the emitter puck (55.2%) and floating far enough above it that the
   caption clears the puck's top edge at 75.6% rather than printing across it. */
.hologram--nimlo { left: 51.2%; top: 43.5%; animation-duration: 7.1s; animation-delay: -1.6s; }

/* Hidden while its clone is flying to the centre of the screen. */
.hologram.is-launching {
    opacity: 0;
}

/* Troutt is the open sketchbook painted on the desk rather than a projection —
   this is just the hit area, the lighting and the label over it. */
.notebook {
    position: absolute;
    left: 27.6%;
    top: 75.4%;
    width: 24.3%;
    height: 18.7%;
    z-index: 7;
    background: none;
}

.notebook-glow {
    position: absolute;
    inset: -18% -8%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 68%);
    /* Faintly lit at rest so touch users can tell the book is a control. */
    opacity: 0.3;
    transition: opacity 0.3s;
}

.notebook:hover .notebook-glow,
.notebook:focus-visible .notebook-glow {
    opacity: 1;
}

/* Above the book, not below it: the book runs to 94% of the scene and the label
   would hang off the bottom edge. */
.notebook .hologram-caption {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.4cqw);
    width: 100%;
    transform: translateX(-50%);
}

/* The projector cone rising off the desk. */
.hologram::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2.5cqw;
    width: 150%;
    height: 105%;
    transform: translateX(-50%);
    clip-path: polygon(50% 100%, 42% 100%, 0 0, 100% 0, 58% 100%);
    background: linear-gradient(to top, color-mix(in oklab, var(--accent) 26%, transparent), transparent 85%);
    filter: blur(0.3cqw);
    pointer-events: none;
}

.hologram-plate {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0.35cqw;
    overflow: hidden;
    border: 0.08cqw solid color-mix(in oklab, var(--accent) 65%, transparent);
    box-shadow:
        0 0 1.6cqw color-mix(in oklab, var(--accent) 40%, transparent),
        inset 0 0 1.2cqw color-mix(in oklab, var(--accent) 30%, transparent);
    background: #04121c;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

/* Full screenshot, never cropped. */
.hologram-plate img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.94;
    filter: saturate(1.2) contrast(1.05);
}

.hologram-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, color-mix(in oklab, var(--accent) 16%, transparent), transparent 45%, color-mix(in oklab, var(--accent) 20%, transparent)),
        repeating-linear-gradient(
            to bottom,
            color-mix(in oklab, #8fe6ff 14%, transparent) 0 0.08cqw,
            transparent 0.08cqw 0.24cqw
        );
    mix-blend-mode: screen;
}

.hologram-base {
    width: 70%;
    height: 0.7cqw;
    margin-top: 0.4cqw;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in oklab, var(--accent) 70%, transparent) 0%, transparent 70%);
    filter: blur(0.15cqw);
}

.hologram-caption {
    text-align: center;
    text-shadow: 0 0.15cqw 0.6cqw #000;
    /* Wider than the narrow plate it sits under, so it never wraps. */
    white-space: nowrap;
}

.hologram-name {
    display: block;
    font-size: 1.7cqw;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hologram-meta {
    display: block;
    font-size: 0.95cqw;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.hologram:hover .hologram-plate,
.hologram:focus-visible .hologram-plate {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 0 34px color-mix(in oklab, var(--accent) 55%, transparent);
}

@keyframes hologram-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

@keyframes sky-breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.sheet {
    width: min(980px, calc(100% - 1.5rem));
    max-height: min(86vh, 900px);
    margin: auto;
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: color-mix(in oklab, var(--card) 92%, #000);
    color: var(--ink);
    box-shadow: 0 30px 80px color-mix(in oklab, black 55%, transparent);
}

/* Picks up where the hologram's flight to centre screen leaves off. */
.sheet[open] {
    animation: sheet-expand 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Opened without a flight leading into it, so it just fades up in place. */
.sheet--plain[open] {
    animation: sheet-fade 0.3s ease;
}

.sheet::backdrop {
    background: color-mix(in oklab, #05060a 62%, transparent);
    backdrop-filter: blur(8px);
}

.sheet[open]::backdrop {
    animation: sheet-fade 0.42s ease;
}

.sheet.is-closing,
.sheet.is-closing::backdrop {
    animation: sheet-out 0.24s ease forwards;
}

@keyframes sheet-expand {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sheet-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* The plate copy that flies from the desk to the centre of the screen. */
.hologram-fly {
    position: fixed;
    z-index: 60;
    margin: 0;
    overflow: hidden;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in oklab, var(--accent) 65%, transparent);
    box-shadow: 0 0 40px color-mix(in oklab, var(--accent) 45%, transparent);
    background: #04121c;
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity;
}

.hologram-fly img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sheet--copy {
    width: min(560px, calc(100% - 1.5rem));
}

.sheet-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1rem 0;
}

.sheet-close {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.sheet-close:hover {
    color: var(--ink);
}

.sheet-body {
    padding: 0 1.5rem 1.75rem;
    overflow: auto;
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    color: var(--accent-warm);
    margin-bottom: 0.7rem;
}

.sheet-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.sheet-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.sheet-lead {
    font-size: 1.2rem;
    color: var(--ink-soft);
    margin-bottom: 0.7rem;
}

.sheet-copy {
    color: var(--muted);
    margin-bottom: 1.4rem;
    max-width: 40rem;
}

.principles {
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.principles li {
    padding-left: 0.9rem;
    border-left: 2px solid color-mix(in oklab, var(--accent-warm) 55%, transparent);
}

.principles span {
    color: var(--accent-deep);
    font-weight: 600;
}

.product-status {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.product-status--live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--live);
    border-color: color-mix(in oklab, var(--live) 35%, var(--line));
    background: color-mix(in oklab, var(--live) 8%, transparent);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
}

.version-pill {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent-warm) 16%, var(--card));
    color: var(--accent-deep);
    border: 1px solid color-mix(in oklab, var(--accent-warm) 35%, var(--line));
    vertical-align: middle;
}

.showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.showcase--five {
    grid-template-columns: repeat(5, 1fr);
}

.phone {
    margin: 0;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-deep);
}

.download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.25rem;
    border-radius: 0.85rem;
    background: var(--ink);
    color: var(--bg);
    transition: transform 0.25s var(--ease-out), opacity 0.25s;
}

.store-btn:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.store-btn span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.15;
}

.store-btn small {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.store-btn--soon {
    background: color-mix(in oklab, var(--card) 70%, var(--line));
    color: var(--ink-soft);
    border: 1px solid var(--line);
    cursor: default;
}

.store-btn--soon:hover {
    transform: none;
    opacity: 1;
}

.contact-mail {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.site-footer {
    position: fixed;
    right: 1.25rem;
    bottom: 0.7rem;
    z-index: 6;
    pointer-events: none;
}

.copyright {
    font-size: 0.7rem;
    color: color-mix(in oklab, var(--muted) 80%, transparent);
}

@media (max-width: 820px) {
    .logo-text {
        display: none;
    }

    .hotspot {
        display: none;
    }

    .showcase,
    .showcase--five {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer {
        display: none;
    }
}

/* Portrait: the notebook and the hologram sit between 27% and 60% of the
   painting, wider than a phone can show at full height. Blow the scene up only
   as far as that slice allows, centre on it, and let the blurred backdrop fill
   the bands above and below. */
@media (max-aspect-ratio: 5 / 4) {
    .lab-scene {
        --scene-w: min(195vw, 150svh);
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--scene-w);
        height: calc(var(--scene-w) / 1.5);
        transform: translate(-50.7%, -50%);
        box-shadow: none;
    }

    /* Keep the kicker over the visible slice rather than the scene's midpoint. */
    /* cqw shrinks with the scene, so the type needs winding back up by hand. */
    .screen-feed {
        font-size: 0.75cqw;
    }

    .hologram-name { font-size: 2.6cqw; }
    .hologram-meta { font-size: 1.5cqw; }
    .hotspot-label { font-size: 1.3cqw; }
}

@media (prefers-reduced-motion: reduce) {
    .lab-scene {
        --px: 0;
        --py: 0;
    }

    .sky-glow,
    .hologram,
    .screen-feed {
        animation: none;
        transition: none;
    }
}