@layer reset, base, components, pages, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
    ul, ol { margin: 0; padding: 0; }
    img, picture { display: block; max-width: 100%; }
    button, input, textarea, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
}

@layer base {
    :root {
        --bg: #080b10;
        --bg-soft: #0c1017;
        --panel: #11161f;
        --panel-2: #151b25;
        --line: rgba(255, 255, 255, .11);
        --line-strong: rgba(255, 255, 255, .22);
        --text: #f3f5f7;
        --muted: #9aa4b2;
        --muted-2: #707b8a;
        --accent: #77f2cf;
        --shell: 1240px;
        --shell-wide: 1580px;
        --header-height: 78px;
        --radius: 18px;
        --ease: cubic-bezier(.2, .8, .2, 1);
        color-scheme: dark;
        font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--text);
    }

    body {
        min-width: 320px;
        overflow-x: clip;
        background:
            radial-gradient(circle at 80% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem),
            var(--bg);
        color: var(--text);
        line-height: 1.6;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    body::before {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        content: "";
        opacity: .18;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
    }

    a { color: inherit; text-decoration: none; }
    button { color: inherit; }
    ::selection { background: color-mix(in srgb, var(--accent) 75%, #fff); color: #07110e; }

    h1, h2, h3 {
        font-weight: 650;
        line-height: .98;
        letter-spacing: -.045em;
        text-wrap: balance;
    }

    p { text-wrap: pretty; }

    .shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
    .shell-wide { width: min(calc(100% - 32px), var(--shell-wide)); margin-inline: auto; }

    .skip-link {
        position: fixed;
        left: 12px;
        top: -100px;
        z-index: 1000;
        padding: 10px 14px;
        border-radius: 8px;
        background: var(--accent);
        color: #06100d;
        font-weight: 750;
    }
    .skip-link:focus { top: 12px; }

    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@layer components {
    .site-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 100;
        height: var(--header-height);
        border-bottom: 1px solid transparent;
        transition: background .35s var(--ease), border-color .35s var(--ease), height .35s var(--ease), backdrop-filter .35s var(--ease);
    }

    .site-header.is-scrolled {
        height: 66px;
        border-color: var(--line);
        background: rgba(8, 11, 16, .78);
        backdrop-filter: blur(22px) saturate(140%);
    }

    .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .16em;
    }

    .brand-mark { position: relative; display: inline-grid; grid-template-columns: repeat(3, 4px); gap: 3px; width: 18px; height: 22px; align-items: end; }
    .brand-mark i { display: block; width: 4px; background: var(--accent); border-radius: 4px; transform: skewY(-22deg); }
    .brand-mark i:nth-child(1) { height: 12px; opacity: .55; }
    .brand-mark i:nth-child(2) { height: 21px; }
    .brand-mark i:nth-child(3) { height: 16px; opacity: .78; }

    .site-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); }
    .site-nav a {
        position: relative;
        color: #d5dae1;
        font-size: 13px;
        font-weight: 620;
        letter-spacing: .02em;
        transition: color .2s ease;
    }
    .site-nav a::after {
        position: absolute;
        left: 0;
        bottom: -9px;
        width: 100%;
        height: 1px;
        content: "";
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .3s var(--ease);
    }
    .site-nav a:hover { color: #fff; }
    .site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

    .nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
    .nav-toggle span { display: block; width: 21px; height: 1px; margin: 6px auto; background: #fff; transition: transform .25s ease; }

    .eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--accent);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .17em;
        line-height: 1.2;
        text-transform: uppercase;
    }
    .eyebrow::before { width: 23px; height: 1px; content: ""; background: currentColor; }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        min-height: 52px;
        padding: 0 22px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 760;
        letter-spacing: .01em;
        transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary { background: var(--accent); color: #04110d; box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 18%, transparent); }
    .button-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
    .button-light { background: #f3f5f7; color: #0a0d12; }

    .text-link {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding-block: 8px;
        border-bottom: 1px solid var(--line-strong);
        color: #e7e9ec;
        font-size: 13px;
        font-weight: 650;
        transition: border-color .25s ease, color .25s ease;
    }
    .text-link:hover { color: var(--accent); border-color: var(--accent); }

    .public-flashes {
        position: fixed;
        top: 86px;
        right: 20px;
        z-index: 200;
        display: grid;
        gap: 10px;
        width: min(420px, calc(100% - 40px));
    }
    .public-flash {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 15px 18px;
        border: 1px solid var(--line-strong);
        border-radius: 13px;
        background: rgba(18, 24, 33, .96);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
        backdrop-filter: blur(16px);
        animation: flashIn .4s var(--ease) both;
    }
    .public-flash-success { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
    .public-flash-error { border-color: rgba(255, 116, 116, .45); }
    .public-flash button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 22px; }
    .public-flash.is-leaving { opacity: 0; transform: translateY(-8px); transition: .22s ease; }

    .prose { color: #c2c8d0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.85; }
    .prose > * + * { margin-top: 1.25em; }
    .prose h2 { margin-top: 2.2em; color: #fff; font-size: clamp(28px, 4vw, 48px); }
    .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

    .site-footer { padding: 80px 0 46px; border-top: 1px solid var(--line); background: #07090d; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 60px; }
    .brand-footer { margin-bottom: 22px; }
    .footer-grid > div:first-child p { max-width: 380px; color: var(--muted); font-size: 14px; }
    .footer-links, .footer-meta { display: grid; align-content: start; gap: 12px; font-size: 13px; }
    .footer-links a, .footer-meta a { color: #c7ccd3; transition: color .2s ease; }
    .footer-links a:hover, .footer-meta a:hover { color: var(--accent); }
    .footer-meta { color: var(--muted-2); }

    .lightbox {
        position: fixed;
        inset: 0;
        z-index: 500;
        display: grid;
        place-items: center;
        padding: 66px 80px;
        background: rgba(2, 4, 7, .96);
        opacity: 0;
        transition: opacity .25s ease;
    }
    .lightbox[hidden] { display: none; }
    .lightbox.is-open { opacity: 1; }
    .lightbox figure { display: grid; place-items: center; max-width: 100%; max-height: 100%; }
    .lightbox img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
    .lightbox figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }
    .lightbox button { position: absolute; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .04); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
    .lightbox button:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .09); }
    .lightbox-close { top: 20px; right: 20px; width: 46px; height: 46px; font-size: 26px; }
    .lightbox-prev, .lightbox-next { top: 50%; width: 50px; height: 50px; transform: translateY(-50%); }
    .lightbox-prev { left: 20px; }
    .lightbox-next { right: 20px; }
    .lightbox-open { overflow: hidden; }

    .reveal-item { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
    .reveal-item.is-visible { opacity: 1; transform: none; }
}

@layer pages {
    .hero {
        position: relative;
        min-height: min(920px, 100svh);
        padding: calc(var(--header-height) + 70px) 0 76px;
        overflow: clip;
        border-bottom: 1px solid var(--line);
    }

    .hero::before {
        position: absolute;
        inset: 0;
        content: "";
        pointer-events: none;
        background:
            linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.035) 50%, transparent calc(50% + 1px)),
            linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
        background-size: 100% 100%, 100% 100px;
        mask-image: linear-gradient(to bottom, #000, transparent 85%);
    }

    .hero-glow {
        position: absolute;
        top: -280px;
        right: -220px;
        width: 800px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
        filter: blur(10px);
        pointer-events: none;
    }

    .hero-grid {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr);
        align-items: center;
        gap: clamp(50px, 7vw, 110px);
        min-height: 680px;
    }

    .hero-copy { position: relative; z-index: 3; }
    .hero-copy h1 { max-width: 720px; margin: 29px 0 26px; font-size: clamp(62px, 7.3vw, 114px); }
    .hero-copy h1::first-line { color: #fff; }
    .hero-lead { max-width: 560px; color: #aeb7c3; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.65; }
    .hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
    .hero-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 74px; color: var(--muted-2); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
    .hero-facts span { display: flex; align-items: center; gap: 9px; }
    .hero-facts span::before { width: 4px; height: 4px; border-radius: 50%; content: ""; background: var(--accent); }

    .hero-stage {
        --mx: 0;
        --my: 0;
        position: relative;
        height: min(680px, 70vw);
        min-height: 580px;
        perspective: 1200px;
    }

    .hero-card {
        position: absolute;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.15);
        background: var(--panel);
        box-shadow: 0 28px 80px rgba(0,0,0,.5);
        transition: transform .8s var(--ease), border-color .25s ease, filter .25s ease;
        will-change: transform;
    }
    .hero-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgba(3,5,8,.85), transparent 45%); }
    .hero-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .3s ease; }
    .hero-card > span { position: absolute; z-index: 2; inset: auto 20px 18px; display: grid; gap: 2px; }
    .hero-card b { font-size: 14px; letter-spacing: -.01em; }
    .hero-card small { color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
    .hero-card:hover { z-index: 6; border-color: color-mix(in srgb, var(--accent) 55%, white 10%); }
    .hero-card:hover img { transform: scale(1.035); }

    .hero-card-1 { z-index: 3; top: 6%; left: 5%; width: 69%; height: 69%; transform: translate(calc(var(--mx) * -12px), calc(var(--my) * -12px)) rotate(-2.5deg); }
    .hero-card-2 { z-index: 2; top: 29%; right: -4%; width: 58%; height: 58%; transform: translate(calc(var(--mx) * 18px), calc(var(--my) * 18px)) rotate(4deg); }
    .hero-card-3 { z-index: 4; left: 1%; bottom: 0; width: 44%; height: 42%; transform: translate(calc(var(--mx) * -25px), calc(var(--my) * 21px)) rotate(2deg); }

    .hero-orbit {
        position: absolute;
        top: 8%;
        right: -14%;
        width: 78%;
        aspect-ratio: 1;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 50%;
        pointer-events: none;
    }
    .hero-orbit::before { position: absolute; top: 22%; left: -5px; width: 9px; height: 9px; border-radius: 50%; content: ""; background: var(--accent); box-shadow: 0 0 25px var(--accent); }

    .statement { padding: clamp(84px, 10vw, 150px) 0; }
    .statement-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; }
    .statement-grid > p:last-child { max-width: 900px; color: #d9dde3; font-size: clamp(28px, 4.2vw, 58px); font-weight: 560; line-height: 1.16; letter-spacing: -.04em; }

    .works-section { padding: 20px 0 clamp(100px, 13vw, 190px); }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
    .section-heading h2 { margin-top: 15px; font-size: clamp(44px, 6vw, 80px); }
    .section-heading > p { padding-bottom: 8px; color: var(--muted-2); font-size: 12px; letter-spacing: .06em; }

    .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px; padding-block: 18px; border-block: 1px solid var(--line); }
    .filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    .filter-buttons button {
        min-height: 38px;
        padding: 0 15px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-size: 12px;
        font-weight: 680;
        transition: .22s ease;
    }
    .filter-buttons button:hover { color: #fff; }
    .filter-buttons button.is-active { border-color: var(--line-strong); background: rgba(255,255,255,.06); color: #fff; }

    .search-field { position: relative; flex: 0 1 250px; }
    .search-field input { width: 100%; height: 40px; padding: 0 38px 0 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: #fff; font-size: 12px; }
    .search-field input:focus { border-color: var(--accent); }
    .search-field i { position: absolute; right: 5px; top: 11px; width: 14px; height: 14px; border: 1px solid var(--muted); border-radius: 50%; }
    .search-field i::after { position: absolute; right: -4px; bottom: -3px; width: 6px; height: 1px; content: ""; background: var(--muted); transform: rotate(45deg); }

    .artwork-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
        gap: clamp(30px, 4vw, 62px) clamp(18px, 2.8vw, 38px);
        align-items: start;
    }
    .artwork-card { container-type: inline-size; content-visibility: auto; contain-intrinsic-size: 500px 620px; transition: opacity .25s ease, transform .25s ease; }
    .artwork-card.is-filtered-out { display: none; }
    .artwork-card a { display: block; }
    .artwork-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel); }
    .artwork-media::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
    .artwork-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s ease; }
    .artwork-card:nth-child(3n + 2) .artwork-media { aspect-ratio: 1 / 1.18; }
    .artwork-card:nth-child(4n) .artwork-media { aspect-ratio: 1 / 1.05; }
    .artwork-card-featured { grid-column: span 2; }
    .artwork-card-featured .artwork-media { aspect-ratio: 1.5 / 1; }
    .artwork-card:hover .artwork-media img { transform: scale(1.035); filter: saturate(1.06) contrast(1.03); }
    .artwork-index { position: absolute; z-index: 2; top: 15px; left: 15px; display: grid; place-items: center; min-width: 34px; height: 25px; padding: 0 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(7,9,13,.55); backdrop-filter: blur(10px); color: #fff; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
    .artwork-open { position: absolute; z-index: 2; right: 15px; bottom: 15px; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: rgba(8,11,16,.72); backdrop-filter: blur(12px); transform: translateY(8px); opacity: 0; transition: .3s var(--ease); }
    .artwork-card:hover .artwork-open { transform: none; opacity: 1; }
    .artwork-info { display: grid; grid-template-columns: 1fr auto; gap: 22px; padding-top: 17px; border-top: 1px solid transparent; }
    .artwork-info h3 { margin-bottom: 8px; font-size: clamp(22px, 7cqw, 31px); }
    .artwork-info p { max-width: 450px; color: var(--muted); font-size: 13px; line-height: 1.55; }
    .artwork-meta { display: grid; justify-items: end; align-content: start; gap: 3px; color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
    .empty-filter { padding: 70px 0; color: var(--muted); text-align: center; }

    .cta-section { padding-bottom: clamp(90px, 12vw, 170px); }
    .cta-panel {
        position: relative;
        display: grid;
        grid-template-columns: 1.25fr .8fr auto;
        align-items: end;
        gap: 50px;
        overflow: hidden;
        padding: clamp(38px, 6vw, 74px);
        background: var(--accent);
        color: #06110e;
    }
    .cta-panel::after { position: absolute; right: -100px; top: -160px; width: 400px; height: 400px; border: 1px solid rgba(6,17,14,.18); border-radius: 50%; content: ""; }
    .cta-panel .eyebrow { color: #06110e; }
    .cta-panel h2 { margin-top: 18px; font-size: clamp(43px, 5vw, 72px); }
    .cta-panel > p { position: relative; z-index: 1; color: rgba(6,17,14,.7); font-size: 15px; line-height: 1.7; }
    .cta-panel .button { position: relative; z-index: 1; white-space: nowrap; }

    .project-page { padding-top: calc(var(--header-height) + 70px); }
    .project-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; padding-bottom: 56px; }
    .project-title h1 { max-width: 1050px; margin: 25px 0 24px; font-size: clamp(60px, 9vw, 138px); }
    .project-title > p:last-child { max-width: 760px; color: var(--muted); font-size: clamp(17px, 2vw, 23px); }
    .project-tags { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; max-width: 300px; }
    .project-tags span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .project-cover { width: 100%; }
    .image-button { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: var(--panel); cursor: zoom-in; }
    .project-cover .image-button { max-height: 88svh; }
    .image-button img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
    .image-button:hover img { transform: scale(1.012); }
    .image-zoom { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 15px; padding: 12px 16px; border-radius: 999px; background: rgba(7,9,13,.72); backdrop-filter: blur(12px); font-size: 11px; font-weight: 700; }

    .project-body-grid { display: grid; grid-template-columns: minmax(190px, .42fr) minmax(0, 1.3fr); gap: clamp(60px, 10vw, 150px); padding-block: clamp(80px, 11vw, 150px); }
    .project-meta-panel { position: sticky; top: 100px; align-self: start; }
    .project-meta-panel dl { border-top: 1px solid var(--line); }
    .project-meta-panel dl div { padding: 16px 0; border-bottom: 1px solid var(--line); }
    .project-meta-panel dt { margin-bottom: 3px; color: var(--muted-2); font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
    .project-meta-panel dd { color: #dce0e5; font-size: 13px; }
    .share-button { display: flex; justify-content: space-between; width: 100%; margin-top: 22px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); font-size: 12px; }
    .share-button:hover { color: var(--accent); border-color: var(--accent); }
    .project-copy { max-width: 840px; }

    .project-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.6vw, 24px); padding-bottom: clamp(100px, 13vw, 190px); }
    .project-image { grid-column: span 6; margin: 0; }
    .project-image:nth-child(5n + 1) { grid-column: 1 / -1; }
    .project-image:nth-child(5n + 2) { grid-column: 1 / span 5; }
    .project-image:nth-child(5n + 3) { grid-column: 6 / -1; }
    .project-image:nth-child(5n + 4) { grid-column: 2 / span 7; }
    .project-image:nth-child(5n + 5) { grid-column: 9 / -1; align-self: end; }
    .project-image img { aspect-ratio: auto; max-height: 85svh; object-fit: cover; }
    .project-image figcaption { padding: 9px 2px 0; color: var(--muted-2); font-size: 11px; }

    .project-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding-block: 50px 80px; border-top: 1px solid var(--line); }
    .project-nav a { display: grid; gap: 4px; }
    .project-nav small { color: var(--muted-2); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
    .project-nav strong { font-size: 15px; }
    .project-nav .align-right { justify-items: end; text-align: right; }
    .project-nav-all { display: grid !important; grid-template-columns: repeat(2, 5px); gap: 4px !important; place-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; }
    .project-nav-all i { width: 5px; height: 5px; background: var(--muted); }

    .about-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 90px; padding-top: calc(var(--header-height) + 105px); padding-bottom: 80px; }
    .about-hero h1 { max-width: 940px; margin-top: 28px; font-size: clamp(58px, 8vw, 116px); }
    .about-hero > p { padding-bottom: 10px; color: var(--muted); font-size: clamp(17px, 1.7vw, 21px); }
    .about-image { overflow: hidden; height: min(72svh, 820px); }
    .about-image img { width: 100%; height: 100%; object-fit: cover; }
    .about-grid { display: grid; grid-template-columns: .55fr 1.25fr; gap: 100px; padding-block: clamp(90px, 12vw, 160px); }
    .about-grid h2 { margin-top: 20px; font-size: clamp(40px, 5vw, 70px); }
    .capabilities { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); margin-bottom: clamp(100px, 13vw, 180px); }
    .capabilities article { padding: 50px 38px 60px; border-right: 1px solid var(--line); }
    .capabilities article:last-child { border-right: 0; }
    .capabilities article > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
    .capabilities h3 { margin: 60px 0 16px; font-size: 28px; }
    .capabilities p { color: var(--muted); font-size: 14px; }

    .field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .checkbox { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .checkbox input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
    .checkbox a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

    .page-hero { padding-top: calc(var(--header-height) + 100px); padding-bottom: 65px; border-bottom: 1px solid var(--line); }
    .page-hero h1 { margin-top: 24px; font-size: clamp(58px, 8vw, 110px); }
    .page-hero > p:last-child { max-width: 720px; margin-top: 22px; color: var(--muted); font-size: 18px; }
    .page-content { max-width: 880px; padding-top: 75px; padding-bottom: 130px; white-space: normal; }

    .error-page { display: grid; place-items: center; min-height: 85svh; padding: 120px 20px; text-align: center; }
    .error-page span { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
    .error-page h1 { margin: 20px 0; font-size: clamp(60px, 10vw, 150px); }
    .error-page p { max-width: 540px; margin-bottom: 36px; color: var(--muted); }
}

@layer utilities {
    [hidden] { display: none !important; }

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

    @media (max-width: 1050px) {
        .hero-grid { grid-template-columns: 1fr; min-height: auto; }
        .hero-copy { max-width: 800px; padding-top: 30px; }
        .hero-stage { width: min(100%, 760px); height: 650px; margin-inline: auto; }
        .hero-facts { margin-top: 48px; }
        .cta-panel { grid-template-columns: 1fr 1fr; }
        .cta-panel .button { grid-column: 2; justify-self: start; }
        .project-header { grid-template-columns: 1fr; }
        .project-tags { justify-content: start; max-width: none; }
    }

    @media (max-width: 820px) {
        :root { --header-height: 68px; }
        .shell { width: min(calc(100% - 28px), var(--shell)); }
        .shell-wide { width: calc(100% - 16px); }
        .nav-toggle { display: block; position: relative; z-index: 102; }
        .site-nav {
            position: fixed;
            inset: 0;
            z-index: 101;
            display: grid;
            place-content: center;
            gap: 28px;
            background: rgba(7,9,13,.97);
            backdrop-filter: blur(18px);
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease;
        }
        .site-nav a { font-size: 32px; font-weight: 620; letter-spacing: -.03em; text-align: center; }
        .nav-open .site-nav { opacity: 1; pointer-events: auto; }
        .nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
        .nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
        .nav-open { overflow: hidden; }

        .hero { min-height: auto; padding-bottom: 55px; }
        .hero-copy h1 { font-size: clamp(54px, 15vw, 88px); }
        .hero-stage { height: 560px; min-height: 0; }
        .statement-grid > p:last-child { font-size: clamp(30px, 7.6vw, 48px); }
        .section-heading { align-items: start; flex-direction: column; }
        .filter-bar { align-items: stretch; flex-direction: column; }
        .search-field { flex-basis: auto; }
        .artwork-card-featured { grid-column: auto; }
        .artwork-card-featured .artwork-media { aspect-ratio: 4 / 5; }
        .artwork-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
        .cta-panel { grid-template-columns: 1fr; }
        .cta-panel .button { grid-column: 1; }
        .project-body-grid { grid-template-columns: 1fr; gap: 52px; }
        .project-meta-panel { position: static; }
        .project-gallery { grid-template-columns: repeat(2, 1fr); }
        .project-image, .project-image:nth-child(n) { grid-column: auto; }
        .project-image:nth-child(3n + 1) { grid-column: 1 / -1; }
        .about-hero > p { max-width: 680px; }
        .about-image { height: 55svh; }
        .capabilities { grid-template-columns: 1fr; }
        .capabilities article { border-right: 0; border-bottom: 1px solid var(--line); }
        .capabilities article:last-child { border-bottom: 0; }
        .capabilities h3 { margin-top: 30px; }
        .footer-grid { grid-template-columns: 1fr 1fr; }
        .footer-grid > div:first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 560px) {
        .hero { padding-top: calc(var(--header-height) + 48px); }
        .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
        .hero-facts { gap: 10px 18px; margin-top: 38px; }
        .hero-stage { height: 455px; margin-top: 15px; }
        .hero-card-1 { left: 1%; width: 78%; height: 64%; }
        .hero-card-2 { right: -8%; width: 59%; height: 50%; }
        .hero-card-3 { left: 2%; width: 51%; height: 38%; }
        .statement { padding: 75px 0; }
        .artwork-grid { display: grid; grid-template-columns: 1fr; }
        .artwork-info { grid-template-columns: 1fr; }
        .artwork-meta { display: flex; justify-items: start; justify-content: space-between; }
        .cta-panel { width: calc(100% - 20px); padding: 36px 24px; }
        .project-page { padding-top: calc(var(--header-height) + 48px); }
        .project-header { padding-bottom: 36px; }
        .project-title h1 { font-size: clamp(50px, 17vw, 80px); }
        .project-gallery { display: block; }
        .project-image + .project-image { margin-top: 10px; }
        .project-nav { grid-template-columns: 1fr 1fr; }
        .project-nav-all { display: none !important; }
        .field-row { grid-template-columns: 1fr; }
        .footer-grid { grid-template-columns: 1fr; gap: 38px; }
        .footer-grid > div:first-child { grid-column: auto; }
        .lightbox { padding: 70px 12px; }
        .lightbox-prev, .lightbox-next { top: auto; bottom: 14px; transform: none; }
        .lightbox-prev { left: calc(50% - 58px); }
        .lightbox-next { right: calc(50% - 58px); }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        .reveal-item { opacity: 1; transform: none; }
    }
}

/* Inhalte bleiben ohne scrollabhängige Sichtbarkeitslogik vollständig zugänglich. */
.reveal-item,
.reveal-item.is-visible {
    opacity: 1;
    transform: none;
}

.artwork-media picture,
.image-button picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* WERKHALLE 2.0 – adaptive portfolio presentation */
.brand > small {
    margin-left: -4px;
    color: var(--muted-2);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: none;
}

.hero-stage-empty {
    display: grid;
    place-items: center;
}

.empty-canvas {
    position: relative;
    width: min(92%, 560px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    padding: clamp(28px, 5vw, 56px);
    border: 1px solid var(--line);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 38%),
        #0c1118;
    box-shadow: 0 38px 90px rgba(0, 0, 0, .32);
}
.empty-canvas::before {
    position: absolute;
    inset: 12%;
    content: "";
    border: 1px solid rgba(255,255,255,.08);
    transform: rotate(-7deg);
}
.empty-canvas-code { position: relative; z-index: 2; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.empty-canvas strong { position: absolute; z-index: 2; left: 10%; bottom: 16%; max-width: 70%; font-size: clamp(34px, 5vw, 64px); line-height: .94; letter-spacing: -.055em; }
.empty-canvas small { position: absolute; z-index: 2; left: 10%; bottom: 9%; color: var(--muted); font-size: 12px; }
.empty-canvas-line { position: absolute; height: 1px; background: rgba(255,255,255,.16); transform-origin: left; }
.empty-canvas-line-a { left: 18%; top: 35%; width: 68%; transform: rotate(-29deg); }
.empty-canvas-line-b { left: 28%; top: 56%; width: 58%; transform: rotate(17deg); }
.empty-canvas-dot { position: absolute; right: 17%; top: 18%; width: 13px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 35px color-mix(in srgb, var(--accent) 70%, transparent); }

.artwork-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    grid-auto-flow: dense;
}
.artwork-card:nth-child(n) .artwork-media { aspect-ratio: 4 / 5; }
.artwork-card--landscape .artwork-media { aspect-ratio: 4 / 3; }
.artwork-card--panorama .artwork-media { aspect-ratio: 16 / 9; }
.artwork-card--square .artwork-media { aspect-ratio: 1; }
.artwork-card--portrait .artwork-media { aspect-ratio: 4 / 5; }
.artwork-card-featured { grid-column: span 2; }
.artwork-card-featured.artwork-card--landscape .artwork-media,
.artwork-card-featured.artwork-card--panorama .artwork-media { aspect-ratio: 16 / 9; }
.artwork-media img {
    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}
@container (max-width: 360px) {
    .artwork-info { grid-template-columns: 1fr; gap: 14px; }
    .artwork-meta { display: flex; justify-content: space-between; }
}

.portfolio-empty-state {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    padding: clamp(42px, 7vw, 88px);
    border: 1px solid var(--line);
    background: linear-gradient(125deg, rgba(255,255,255,.025), transparent 48%), var(--bg-soft);
}
.portfolio-empty-state::after {
    position: absolute;
    right: -10%;
    bottom: -55%;
    width: min(60vw, 720px);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: 50%;
    content: "";
}
.portfolio-empty-state > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.portfolio-empty-state h3 { max-width: 650px; margin: 54px 0 20px; font-size: clamp(46px, 7vw, 92px); }
.portfolio-empty-state p { max-width: 650px; color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); }

.project-cover-stage {
    margin-bottom: clamp(70px, 9vw, 132px);
}
.project-cover-frame {
    position: relative;
}
.project-cover-button {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: #05070a;
    cursor: zoom-in;
}
.project-cover-button img {
    width: 100%;
    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}
.project-cover-stage--fit-cover .project-cover-button {
    height: min(82svh, 980px);
}
.project-cover-stage--fit-cover .project-cover-button picture,
.project-cover-stage--fit-cover .project-cover-button img {
    width: 100%;
    height: 100%;
}
.project-cover-stage--fit-cover .project-cover-button img { object-fit: cover; }
.project-cover-stage--fit-contain .project-cover-button picture { height: auto; }
.project-cover-stage--fit-contain .project-cover-button img {
    width: auto;
    max-width: 100%;
    max-height: 88svh;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}
.project-cover-stage--contained .project-cover-frame,
.project-cover-stage--editorial .project-cover-frame {
    padding: clamp(14px, 2vw, 30px);
    border: 1px solid var(--line);
    background: #0c1016;
}
.project-cover-stage--contained.project-cover-stage--portrait .project-cover-frame,
.project-cover-stage--contained.project-cover-stage--square .project-cover-frame {
    width: min(calc(100% - 32px), 1040px);
    margin-inline: auto;
}
.project-cover-stage--contained.project-cover-stage--fit-cover .project-cover-button { height: min(78svh, 920px); }
.project-cover-stage--editorial .project-cover-frame { width: min(calc(100% - 32px), 1420px); margin-inline: auto; }
.project-cover-stage--editorial.project-cover-stage--fit-cover .project-cover-button { height: min(72svh, 860px); }
.project-cover-stage--immersive .project-cover-frame { width: 100%; }
.project-cover-stage--immersive.project-cover-stage--fit-cover .project-cover-button { height: min(88svh, 1080px); }
.image-utility-bar,
.project-image-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 10px;
    color: var(--muted-2);
    font-size: 10px;
    letter-spacing: .04em;
}
.image-utility-bar a,
.project-image-meta a { color: #bcc4cf; transition: color .2s ease; }
.image-utility-bar a:hover,
.project-image-meta a:hover { color: var(--accent); }

.project-gallery {
    grid-auto-flow: dense;
    align-items: start;
}
.project-image,
.project-image:nth-child(n) { grid-column: span 8; }
.project-image.image-layout-full { grid-column: 1 / -1; }
.project-image.image-layout-wide { grid-column: span 10; }
.project-image.image-layout-standard { grid-column: span 8; }
.project-image.image-layout-half { grid-column: span 6; }
.project-image.image-layout-half:nth-child(odd):last-child { grid-column: 4 / span 6; }
.project-image:nth-child(even).image-layout-wide { grid-column: 3 / -1; }
.project-image:nth-child(even).image-layout-standard { grid-column: 5 / -1; }
.project-image .image-button,
.project-image .image-button picture { height: auto; }
.project-image img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}
.project-image--portrait.image-layout-auto { grid-column: span 5; }
.project-image--square.image-layout-auto { grid-column: span 6; }
.project-image--landscape.image-layout-auto { grid-column: span 8; }
.project-image--panorama.image-layout-auto { grid-column: 1 / -1; }

.creation-note,
.rights-note,
.artwork-rights-strip {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.025);
}
.creation-note { margin-top: 52px; padding: 24px 26px; }
.creation-note > span { display: block; margin-bottom: 8px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.creation-note p { color: #c7ced7; font-size: 14px; }
.artwork-rights-strip { display: grid; grid-template-columns: .3fr 1fr; gap: 40px; margin-bottom: clamp(90px, 12vw, 160px); padding: 28px 32px; }
.artwork-rights-strip span { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.artwork-rights-strip p { color: var(--muted); font-size: 13px; }

.about-signal {
    position: relative;
    min-height: min(68svh, 760px);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 40px;
    padding: clamp(34px, 6vw, 86px);
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 25%),
        linear-gradient(145deg, #101722, #080b10 70%);
}
.about-signal-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.about-signal-copy,
.about-signal-terminal { position: relative; z-index: 2; }
.about-signal-copy > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.about-signal-copy strong { display: block; margin: 30px 0; font-size: clamp(68px, 11vw, 170px); line-height: .72; letter-spacing: -.075em; }
.about-signal-copy small { color: var(--muted); font-size: 12px; }
.about-signal-terminal {
    display: grid;
    gap: 12px;
    align-self: center;
    padding: 28px;
    border: 1px solid var(--line);
    background: rgba(5,8,12,.72);
    backdrop-filter: blur(15px);
    color: #aab5c2;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}
.capabilities-four { grid-template-columns: repeat(4, 1fr); }
.about-art-process {
    display: grid;
    grid-template-columns: .68fr 1.32fr;
    gap: clamp(50px, 9vw, 130px);
    padding-bottom: clamp(110px, 14vw, 190px);
}
.about-art-process-heading h2 { max-width: 560px; margin-top: 24px; font-size: clamp(44px, 6vw, 82px); }
.rights-note { margin-top: 45px; padding: 26px 28px; }
.rights-note strong { display: block; margin-bottom: 8px; color: #fff; }
.rights-note p { margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 1050px) {
    .capabilities-four { grid-template-columns: repeat(2, 1fr); }
    .capabilities-four article:nth-child(2) { border-right: 0; }
    .capabilities-four article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .about-signal { grid-template-columns: 1fr; }
    .about-signal-terminal { width: min(100%, 540px); }
}

@media (max-width: 820px) {
    .brand > small { display: none; }
    .artwork-card-featured { grid-column: auto; }
    .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-image,
    .project-image:nth-child(n),
    .project-image:nth-child(even).image-layout-wide,
    .project-image:nth-child(even).image-layout-standard { grid-column: 1 / -1; }
    .project-image.image-layout-half,
    .project-image.image-layout-half:nth-child(odd):last-child { grid-column: span 1; }
    .project-image--portrait.image-layout-auto,
    .project-image--square.image-layout-auto { grid-column: span 1; }
    .project-cover-stage--fit-cover .project-cover-button,
    .project-cover-stage--immersive.project-cover-stage--fit-cover .project-cover-button,
    .project-cover-stage--contained.project-cover-stage--fit-cover .project-cover-button,
    .project-cover-stage--editorial.project-cover-stage--fit-cover .project-cover-button { height: min(72svh, 760px); }
    .artwork-rights-strip,
    .about-art-process { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 560px) {
    .empty-canvas { width: 88%; }
    .project-cover-stage--contained .project-cover-frame,
    .project-cover-stage--editorial .project-cover-frame { padding: 8px; }
    .image-utility-bar,
    .project-image-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
    .project-gallery { display: grid; grid-template-columns: 1fr; }
    .project-image,
    .project-image:nth-child(n),
    .project-image.image-layout-half,
    .project-image--portrait.image-layout-auto,
    .project-image--square.image-layout-auto { grid-column: 1; }
    .capabilities-four { grid-template-columns: 1fr; }
    .capabilities-four article { border-right: 0; border-bottom: 1px solid var(--line); }
    .about-signal { min-height: 620px; padding: 28px; }
    .about-signal-copy strong { font-size: clamp(68px, 24vw, 110px); }
    .about-signal-terminal { padding: 20px; font-size: 10px; }
}

/* Mobile containment safeguards: intrinsic placeholders must never define page width. */
.project-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.project-image .image-button,
.project-image picture,
.project-image img { max-width: 100%; }

@media (max-width: 820px) {
    .statement-grid,
    .about-hero,
    .about-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
    .about-hero > * { min-width: 0; }
}