/* ==========================================================

   PATRICK PRÜFER PHOTOGRAPHY

   ARCHITECTURE PORTFOLIO

   TYPOGRAPHY: ARCHIVO

========================================================== */



/* ==========================================================

   DESIGN SYSTEM

========================================================== */

/* ==========================================================
   LOKALE SCHRIFTARTEN
   ========================================================== */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo-VariableFont_wdth,wght.ttf");
    font-style: normal;
    font-weight: 300 600;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo-Italic-VariableFont_wdth,wght.ttf");
    font-style: italic;
    font-weight: 300 600;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Urbanist";
    src: url("../fonts/Urbanist-VariableFont_wght.ttf");
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
}

:root {

    --bg:

        #ecebe8;

    --surface:

        #f6f5f2;

    --ink:

        #15191b;

    --ink-soft:

        #6f6b66;

    --accent:

        #6d7880;

    --line:

        #d3d0ca;

    --white:

        #ffffff;

    --dark:

        #101416;



    --font:

        "Archivo",

        "Helvetica Neue",

        Helvetica,

        Arial,

        sans-serif;



    --page:

        clamp(

            28px,

            4.8vw,

            86px

        );



    --max-width:

        1740px;



    --ease:

        cubic-bezier(

            .22,

            .61,

            .36,

            1

        );

}





/* ==========================================================

   RESET

========================================================== */

*,

*::before,

*::after {

    box-sizing:

        border-box;

    margin:

        0;

    padding:

        0;

}



html {

    scroll-behavior:

        smooth;

    scroll-padding-top:

        130px;

}



body {

    background:

        var(--bg);

    color:

        var(--ink);

    font-family:

        var(--font);

    font-size:

        16px;

    line-height:

        1.5;

    font-weight:

        400;

    font-variation-settings:

        "wdth" 100;

    overflow-x:

        hidden;

    -webkit-font-smoothing:

        antialiased;

    -moz-osx-font-smoothing:

        grayscale;

    text-rendering:

        optimizeLegibility;

}



body.no-scroll {

    overflow:

        hidden;

}



img {

    display:

        block;

    width:

        100%;

    max-width:

        100%;

    height:

        auto;

}



a {

    color:

        inherit;

    text-decoration:

        none;

}



button {

    font:

        inherit;

    color:

        inherit;

}



::selection {

    background:

        var(--accent);

    color:

        var(--white);

}





/* ==========================================================

   ACCESSIBILITY

========================================================== */

.skip-link {

    position:

        fixed;

    top:

        15px;

    left:

        15px;

    z-index:

        9999;

    padding:

        10px

        14px;

    background:

        var(--ink);

    color:

        var(--white);

    transform:

        translateY(-200%);

    transition:

        transform

        250ms

        ease;

}



.skip-link:focus {

    transform:

        translateY(0);

}





/* ==========================================================

   HEADER

========================================================== */

.site-header {

    position:

        fixed;

    top:

        0;

    left:

        0;

    z-index:

        1000;

    width:

        100%;

    min-height:

        158px;

    padding:

        30px

        var(--page);

    display:

        flex;

    align-items:

        center;

    justify-content:

        space-between;

    gap:

        52px;

    border-bottom:

        1px solid

        transparent;

    transition:

        min-height

        400ms

        var(--ease),

        padding

        400ms

        var(--ease),

background

        400ms

        ease,

        border-color

        400ms

        ease;

}



.site-header.scrolled {

    min-height:

        106px;

    padding-top:

        18px;

    padding-bottom:

        18px;

    background:

        rgba(

            238,

            240,

            241,

            0.96

        );

    border-color:

        var(--line);

    backdrop-filter:

        blur(18px);

    -webkit-backdrop-filter:

        blur(18px);

}





/* ==========================================================

   WORDMARK

========================================================== */

.brand {

    position:

        relative;

    z-index:

        1002;

    display:

        inline-flex;

    flex-direction:

        column;

    align-items:

        flex-start;

    flex-shrink:

        0;

    gap:

        11px;

    font-family:

        var(--font);

}





/*

   PATRICK PRÜFER

   Beide Namen exakt gleich gewichtet.

   Kein Bold.

   Kein optischer Unterschied zwischen

   Vor- und Nachnamen.

*/

.brand-main {

    display:

        flex;

    align-items:

        baseline;

    gap:

        0.24em;

    font-family:

        var(--font);

    font-size:

        clamp(

            56px,

            4.25vw,

            82px

        );

    line-height:

        0.91;

    font-weight:

        400;

    letter-spacing:

        0.022em;

    font-variation-settings:

        "wdth" 95;

    white-space:

        nowrap;

}



.brand-first,

.brand-last {

    font-weight:

        400;

}





/* ==========================================================

   PHOTOGRAPHY

========================================================== */

.brand-sub {

    display:

        block;

    padding-left:

        2px;

    font-family:

        var(--font);

    font-size:

        clamp(

            10px,

            0.66vw,

            12px

        );

    line-height:

        1;

    font-weight:

        400;

    letter-spacing:

        0.19em;

    font-variation-settings:

        "wdth" 100;

    color:

        var(--accent);

}





/* ==========================================================

   DESKTOP NAVIGATION

========================================================== */

.desktop-navigation {

    display:

        flex;

    align-items:

        center;

    justify-content:

        flex-end;

    gap:

        clamp(

            36px,

            2.9vw,

            58px

        );

}



.desktop-navigation a {

    position:

        relative;

    display:

        flex;

    align-items:

        center;

    min-height:

        48px;

    padding:

        11px

        1px;

    font-family:

        var(--font);

    font-size:

        clamp(

            12px,

            0.82vw,

            14px

        );

    line-height:

        1;

    font-weight:

        400;

    letter-spacing:

        0.12em;

    font-variation-settings:

        "wdth" 98;

    color:

        var(--ink);

    transition:

        color

        250ms

        ease;

}



.desktop-navigation a:hover,

.desktop-navigation .nav-active {

    color:

        var(--accent);

}



.desktop-navigation a::after {

    content:

        "";

    position:

        absolute;

    left:

        0;

    bottom:

        3px;

    width:

        100%;

    height:

        1px;

    background:

        var(--accent);

    transform:

        scaleX(0);

    transform-origin:

        right center;

    transition:

        transform

        350ms

        var(--ease);

}



.desktop-navigation a:hover::after,

.desktop-navigation a:focus-visible::after,

.desktop-navigation .nav-active::after {

    transform:

        scaleX(1);

    transform-origin:

        left center;

}


/* ==========================================================

   PROJECT DROPDOWN

========================================================== */

.projects-menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 5px;
}

.projects-menu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 11px 1px;
    border: 0;
    background: transparent;
    font-family: var(--font);
    font-size: clamp(12px, 0.82vw, 14px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.12em;
    font-variation-settings: "wdth" 98;
    color: var(--ink);
    cursor: pointer;
    transition: color 250ms ease;
}

.projects-menu-chevron {
    display: block;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 260ms var(--ease), color 250ms ease;
}

.projects-menu-toggle:hover,
.projects-menu-toggle:focus-visible,
.projects-menu-toggle[aria-expanded="true"],
.projects-menu-toggle.nav-active {
    color: var(--accent);
}

.projects-menu-toggle:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

.projects-menu-toggle[aria-expanded="true"] .projects-menu-chevron {
    margin-top: 4px;
    transform: rotate(225deg);
}

.projects-dropdown {
    position: absolute;
    right: var(--page);
    bottom: 14px;
    left: var(--page);
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 11px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 200ms ease, transform 280ms var(--ease);
}

.projects-dropdown[hidden] {
    display: none;
}

.projects-dropdown:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
}

.site-header.portfolio-menu-open {
    min-height: 224px;
    padding-bottom: 92px;
    background: rgba(238, 240, 241, 0.98);
    border-color: var(--line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header.scrolled.portfolio-menu-open {
    min-height: 174px;
    padding-bottom: 80px;
}

body.portfolio-menu-open main {
    margin-top: 66px;
}

@media (min-width: 761px) {
    body > main {
        transition: margin-top 400ms var(--ease);
    }
}

.desktop-navigation .projects-dropdown a {
    display: flex;
    justify-content: center;
    min-height: 52px;
    padding: 16px 12px 13px;
    font-family: var(--font);
    font-size: clamp(14px, 0.95vw, 16px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.115em;
    white-space: nowrap;
}

.desktop-navigation .projects-dropdown a:first-child {
    justify-content: flex-start;
    padding-left: 0;
}

.desktop-navigation .projects-dropdown a:last-child {
    justify-content: flex-end;
    padding-right: 0;
}

.desktop-navigation .projects-dropdown a:hover,
.desktop-navigation .projects-dropdown a:focus-visible,
.desktop-navigation .projects-dropdown a.is-current {
    color: var(--accent);
    background: transparent;
}

.desktop-navigation .projects-dropdown a::after {
    right: 12px;
    bottom: 5px;
    left: 12px;
    width: auto;
}

.desktop-navigation .projects-dropdown a:first-child::after {
    left: 0;
}

.desktop-navigation .projects-dropdown a:last-child::after {
    right: 0;
}

.desktop-navigation .projects-dropdown a.is-current::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.projects-dropdown-status {
    grid-column: 1 / -1;
    min-height: 52px;
    padding: 17px 0 13px;
    font-size: 11px;
    letter-spacing: 0.11em;
    white-space: nowrap;
    color: var(--ink);
    opacity: 0.55;
}

@media (min-width: 761px) and (max-width: 1050px) {
    .desktop-navigation .projects-dropdown a {
        font-size: 12.5px;
        letter-spacing: 0.08em;
    }
}

.mobile-project-menu,
.mobile-project-list {
    width: 100%;
}

.mobile-project-menu button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-brand, var(--font));
    font-weight: 400;
    cursor: pointer;
}

.mobile-project-menu button span:first-child {
    font-size: clamp(48px, 14vw, 86px);
    line-height: 1;
    font-variation-settings: "wdth" 96;
}

.mobile-project-menu button span:last-child {
    font-size: 28px;
    font-weight: 300;
    transition: transform 220ms var(--ease);
}

.mobile-project-menu button[aria-expanded="true"] span:last-child {
    transform: rotate(45deg);
}

.mobile-project-list {
    padding: 14px 0 8px 2px;
}

.mobile-project-list[hidden] {
    display: none;
}

.mobile-navigation .mobile-project-list a {
    display: block;
    padding: 7px 0;
    font-size: clamp(18px, 5vw, 25px);
    line-height: 1.15;
    letter-spacing: 0.08em;
}

.mobile-navigation .mobile-project-list a.is-current {
    color: var(--accent);
}





/* ==========================================================

   MOBILE MENU BUTTON

========================================================== */

.menu-button {

    display:

        none;

    position:

        relative;

    z-index:

        1002;

    width:

        44px;

    height:

        34px;

    border:

        0;

    background:

        transparent;

    cursor:

        pointer;

}



.menu-button span {

    position:

        absolute;

    right:

        0;

    width:

        36px;

    height:

        1px;

    background:

        var(--ink);

    transition:

        transform

        350ms

        var(--ease),

        top

        350ms

        var(--ease);

}



.menu-button span:first-child {

    top:

        10px;

}



.menu-button span:last-child {

    top:

        23px;

}



.menu-button.active span:first-child {

    top:

        16px;

    transform:

        rotate(45deg);

}



.menu-button.active span:last-child {

    top:

        16px;

    transform:

        rotate(-45deg);

}





/* ==========================================================

   MOBILE NAVIGATION

========================================================== */

.mobile-navigation {

    position:

        fixed;

    inset:

        0;

    z-index:

        900;

    display:

        none;

    background:

        var(--bg);

}



.mobile-navigation.open {

    display:

        block;

}



.mobile-nav-inner {

    height:

        100%;

    padding:

        160px

        var(--page)

        50px;

    display:

        flex;

    flex-direction:

        column;

    justify-content:

        center;

    align-items:

        flex-start;

    gap:

        18px;

}



.mobile-nav-label {

    margin-bottom:

        34px;

    font-size:

        10px;

    font-weight:

        400;

    letter-spacing:

        0.12em;

    color:

        var(--accent);

}



.mobile-navigation a {

    font-size:

        clamp(

            48px,

            14vw,

            86px

        );

    line-height:

        1;

    letter-spacing:

        0.01em;

    font-weight:

        400;

    font-variation-settings:

        "wdth" 96;

}





/* ==========================================================

   HERO

========================================================== */

.hero {

    position:

        relative;

    min-height:

        100svh;

    max-width:

        var(--max-width);

    margin:

        0 auto;

    padding:

        clamp(

            220px,

            22vh,

            270px

        )

        var(--page)

        58px;

}



.hero-grid {

    min-height:

        calc(

            100svh

            - 345px

        );

    display:

        grid;

    grid-template-columns:

        repeat(

            12,

            minmax(0, 1fr)

        );

    gap:

        clamp(

            20px,

            2.4vw,

            42px

        );

    align-items:

        center;

}





/* ==========================================================

   HERO TEXT

========================================================== */

.hero-content {

    grid-column:

        1 / span 5;

    padding-right:

        clamp(

            10px,

            2.5vw,

            50px

        );

}



.hero h1 {

    font-size:

        clamp(

            54px,

            6vw,

            104px

        );

    line-height:

        0.91;

    letter-spacing:

        -0.035em;

    font-weight:

        300;

    font-variation-settings:

        "wdth" 96;

}



.hero h1 span {

    color:

        var(--accent);

}



.hero-description {

    max-width:

        430px;

    margin-top:

        clamp(

            48px,

            7vh,

            80px

        );

    padding-top:

        20px;

    border-top:

        1px solid

        var(--line);

}



.hero-description p {

    font-size:

        14px;

    line-height:

        1.75;

    font-weight:

        400;

    color:

        var(--ink-soft);

}





/* ==========================================================

   HERO IMAGE

========================================================== */

.hero-visual {

    grid-column:

        7 / span 6;

}



.hero-image-wrap {

    overflow:

        hidden;

    background:

        #dce0e2;

}



.hero-image {

    width:

        100%;

    height:

        auto;

    object-fit:

        contain;

    animation:

        hero-in

        1.2s

        var(--ease)

        both;

}



@keyframes hero-in {

    from {

        opacity:

            0;

        transform:

            scale(1.012);

    }



    to {

        opacity:

            1;

        transform:

            scale(1);

    }

}



.hero-visual figcaption {

    display:

        flex;

    justify-content:

        space-between;

    padding-top:

        12px;

    font-size:

        9px;

    font-weight:

        400;

    letter-spacing:

        0.1em;

    color:

        var(--ink-soft);

}





/* ==========================================================

   VIEW WORK

========================================================== */

.hero-scroll {

    position:

        absolute;

    left:

        var(--page);

    bottom:

        38px;

    display:

        flex;

    align-items:

        center;

    gap:

        20px;

    font-size:

        10px;

    font-weight:

        400;

    letter-spacing:

        0.11em;

    color:

        var(--ink-soft);

}



.hero-scroll-line {

    width:

        65px;

    height:

        1px;

    background:

        var(--accent);

    transition:

        width

        350ms

        var(--ease);

}



.hero-scroll:hover

.hero-scroll-line {

    width:

        100px;

}





/* ==========================================================

   WORK

========================================================== */

.work {

    max-width:

        var(--max-width);

    margin:

        0 auto;

    padding:

        190px

        var(--page)

        130px;

}





/* ==========================================================

   WORK HEADING

========================================================== */

.work-heading {

    padding-top:

        27px;

    border-top:

        1px solid

        var(--line);

    display:

        grid;

    grid-template-columns:

        4fr

        8fr;

    gap:

        35px;

    margin-bottom:

        190px;

}



.section-meta {

    display:

        flex;

    gap:

        25px;

}



.section-index {

    font-size:

        10px;

    font-weight:

        400;

    letter-spacing:

        0.1em;

    color:

        var(--accent);

}



.section-label {

    font-size:

        10px;

    font-weight:

        400;

    letter-spacing:

        0.1em;

    color:

        var(--ink-soft);

}



.work-heading h2 {

    font-size:

        clamp(

            60px,

            8vw,

            138px

        );

    line-height:

        0.88;

    letter-spacing:

        -0.035em;

    font-weight:

        300;

    font-variation-settings:

        "wdth" 97;

}



.work-heading h2 span {

    color:

        var(--accent);

}





/* ==========================================================

   PROJECT

========================================================== */

.project {

    margin-bottom:

        clamp(

            190px,

            23vh,

            300px

        );

}



.project-header {

    padding-top:

        22px;

    margin-bottom:

        78px;

    border-top:

        1px solid

        var(--line);

    display:

        grid;

    grid-template-columns:

        1fr

        5fr

        3fr;

    gap:

        35px;

    align-items:

        start;

}



.project-index {

    font-size:

        10px;

    font-weight:

        400;

    letter-spacing:

        0.1em;

    color:

        var(--accent);

}



.project-title h3 {

    font-size:

        clamp(

            43px,

            4.8vw,

            78px

        );

    line-height:

        1;

    letter-spacing:

        -0.025em;

    font-weight:

        300;

    font-variation-settings:

        "wdth" 97;

}



.project-title span {

    display:

        block;

    margin-top:

        18px;

    font-size:

        9px;

    font-weight:

        400;

    letter-spacing:

        0.11em;

    color:

        var(--accent);

}



.project-header > p {

    max-width:

        350px;

    font-size:

        13px;

    line-height:

        1.75;

    color:

        var(--ink-soft);

}





/* ==========================================================

   DYNAMIC PORTFOLIO GALLERY

========================================================== */



/* ==========================================================

   PORTFOLIO STATES

========================================================== */

.portfolio-loading,

.portfolio-empty,

.portfolio-error {

    width:

        100%;

    padding:

        28px 0;

    border-top:

        1px solid

        var(--line);

    font-size:

        11px;

    line-height:

        1.6;

    font-weight:

        400;

    letter-spacing:

        0.08em;

    color:

        var(--ink-soft);

}



.portfolio-error {

    color:

        var(--accent);

}



/* ==========================================================

   PROJECT

========================================================== */

#portfolio-projects .project:last-child {

    margin-bottom:

        0;

}



/* ==========================================================

   GALLERY

========================================================== */

.gallery {

    display:

        grid;

    grid-template-columns:

        repeat(

            12,

            minmax(0, 1fr)

        );

    column-gap:

        clamp(

            18px,

            2.2vw,

            36px

        );

    row-gap:

        clamp(

            70px,

            8vw,

            130px

        );

    align-items:

        start;

}



/* ==========================================================

   GALLERY ITEM

========================================================== */

.gallery-item {

    position:

        relative;

    grid-column:

        span 6;

    min-width:

        0;

    cursor:

        zoom-in;

}



/* ==========================================================

   IMAGE

========================================================== */

.gallery-item img {

    display:

        block;

    width:

        100%;

    height:

        auto;

    object-fit:

        contain;

    background:

        #dce0e2;

    transition:

        opacity

        300ms

        ease,

        transform

        500ms

        var(--ease);

}



.gallery-item:hover img {

    opacity:

        0.95;

    transform:

        translateY(-2px);

}



/* ==========================================================

   CAPTION

========================================================== */

.gallery-item figcaption {

    display:

        flex;

    justify-content:

        space-between;

    align-items:

        flex-start;

    gap:

        15px;

    padding-top:

        11px;

    font-size:

        9px;

    line-height:

        1.4;

    font-weight:

        400;

    letter-spacing:

        0.1em;

    color:

        var(--ink-soft);

}



/* ==========================================================

   FOUR OR MORE IMAGES

========================================================== */

.gallery-item:nth-child(6n + 1) {

    grid-column:

        1 / span 8;

}



.gallery-item:nth-child(6n + 2) {

    grid-column:

        9 / span 4;

    margin-top:

        clamp(

            60px,

            9vw,

            150px

        );

}



.gallery-item:nth-child(6n + 3) {

    grid-column:

        2 / span 5;

}



.gallery-item:nth-child(6n + 4) {

    grid-column:

        7 / span 6;

    margin-top:

        clamp(

            30px,

            4vw,

            75px

        );

}



.gallery-item:nth-child(6n + 5) {

    grid-column:

        1 / span 7;

}



.gallery-item:nth-child(6n + 6) {

    grid-column:

        8 / span 5;

    margin-top:

        clamp(

            65px,

            8vw,

            135px

        );

}



/* ==========================================================

   ONE IMAGE

========================================================== */

.gallery-item:only-child {

    grid-column:

        1 / span 9;

    margin-top:

        0;

}



/* ==========================================================

   TWO IMAGES

========================================================== */

.gallery-item:first-child:nth-last-child(2) {

    grid-column:

        1 / span 7;

    margin-top:

        0;

}



.gallery-item:first-child:nth-last-child(2)

+

.gallery-item {

    grid-column:

        8 / span 5;

    margin-top:

        clamp(

            60px,

            9vw,

            150px

        );

}



/* ==========================================================

   THREE IMAGES

========================================================== */

.gallery-item:first-child:nth-last-child(3) {

    grid-column:

        1 / span 8;

    margin-top:

        0;

}



.gallery-item:first-child:nth-last-child(3)

~

.gallery-item:nth-child(2) {

    grid-column:

        9 / span 4;

    margin-top:

        clamp(

            55px,

            8vw,

            135px

        );

}



.gallery-item:first-child:nth-last-child(3)

~

.gallery-item:nth-child(3) {

    grid-column:

        3 / span 8;

    margin-top:

        0;

}

/* ==========================================================

   ABOUT

========================================================== */

.about {

    background:

        var(--surface);

    padding:

        165px

        max(

            var(--page),

            calc(

                (

                    100vw

                    - var(--max-width)

                )

                / 2

                +

                var(--page)

            )

        );

}



.section-top {

    padding-top:

        24px;

    border-top:

        1px solid

        var(--line);

    display:

        flex;

    gap:

        26px;

    margin-bottom:

        120px;

}



.about-grid {

    display:

        grid;

    grid-template-columns:

        repeat(

            12,

            minmax(0, 1fr)

        );

    gap:

        clamp(

            22px,

            2.5vw,

            44px

        );

    align-items:

        start;

}



.about-heading {

    grid-column:

        1 / span 5;

}



.about-heading h2 {

    font-size:

        clamp(

            54px,

            6.3vw,

            108px

        );

    line-height:

        0.9;

    letter-spacing:

        -0.035em;

    font-weight:

        300;

    font-variation-settings:

        "wdth" 97;

}



.about-heading h2 span {

    color:

        var(--accent);

}



.about-image {

    grid-column:

        6 / span 3;

}



.about-image img {

    width:

        100%;

    height:

        auto;

}



.about-copy {

    grid-column:

        9 / span 4;

}



.about-lead {

    margin-bottom:

        48px;

    font-size:

        clamp(

            20px,

            2vw,

            30px

        );

    line-height:

        1.35;

    font-weight:

        300;

}



.about-copy > p:not(.about-lead) {

    margin-bottom:

        24px;

    font-size:

        14px;

    line-height:

        1.8;

    color:

        var(--ink-soft);

}





/* ==========================================================

   CONTACT

========================================================== */

.contact {

    max-width:

        var(--max-width);

    margin:

        0 auto;

    padding:

        165px

        var(--page);

}



.contact-top {

    display:

        flex;

    gap:

        26px;

    padding-top:

        24px;

    border-top:

        1px solid

        var(--line);

    margin-bottom:

        110px;

}



.contact-grid {

    display:

        grid;

    grid-template-columns:

        6fr

        6fr;

    gap:

        75px;

}



.contact h2 {

    font-size:

        clamp(

            65px,

            8.3vw,

            142px

        );

    line-height:

        0.88;

    letter-spacing:

        -0.035em;

    font-weight:

        300;

    font-variation-settings:

        "wdth" 97;

}



.contact h2 span {

    color:

        var(--accent);

}



.contact-links {

    align-self:

        end;

    border-top:

        1px solid

        var(--line);

}



.contact-links a {

    display:

        grid;

    grid-template-columns:

        100px

        1fr

        auto;

    gap:

        20px;

    align-items:

        center;

    padding:

        24px 0;

    border-bottom:

        1px solid

        var(--line);

    transition:

        padding

        300ms

        var(--ease),

        color

        300ms

        ease;

}



.contact-links a:hover {

    padding-left:

        10px;

    color:

        var(--accent);

}



.contact-links span {

    font-size:

        9px;

    font-weight:

        400;

    letter-spacing:

        0.1em;

}



.contact-links strong {

    font-size:

        clamp(

            15px,

            1.4vw,

            21px

        );

    font-weight:

        400;

}



.contact-arrow {

    font-size:

        18px !important;

}





/* ==========================================================

   FOOTER

========================================================== */

.site-footer {

    padding:

        45px

        var(--page);

    border-top:

        1px solid

        var(--line);

    display:

        grid;

    grid-template-columns:

        1fr

        1fr

        auto;

    gap:

        30px;

    align-items:

        end;

    font-size:

        9px;

    letter-spacing:

        0.08em;

    color:

        var(--ink-soft);

}



.footer-brand {

    display:

        flex;

    flex-direction:

        column;

    gap:

        7px;

}



.footer-brand > span {

    font-size:

        18px;

    font-weight:

        400;

    letter-spacing:

        0.025em;

    font-variation-settings:

        "wdth" 95;

    color:

        var(--ink);

}



.footer-brand small {

    font-size:

        8px;

    font-weight:

        400;

    letter-spacing:

        0.16em;

    color:

        var(--accent);

}



.footer-center {

    display:

        flex;

    flex-direction:

        column;

    gap:

        9px;

}



.footer-center a {

    width:

        fit-content;

    transition:

        color

        200ms

        ease;

}



.footer-center a:hover {

    color:

        var(--accent);

}





/* ==========================================================

   IMPRESSUM

========================================================== */

.legal-page {

    min-height:

        calc(

            100vh

            - 150px

        );

    max-width:

        var(--max-width);

    margin:

        0 auto;

    padding:

        240px

        var(--page)

        160px;

}



.legal-intro {

    padding-bottom:

        70px;

    border-bottom:

        1px solid

        var(--line);

}



.legal-intro h1 {

    margin-top:

        28px;

    font-size:

        clamp(

            48px,

            7vw,

            112px

        );

    line-height:

        0.94;

    font-weight:

        300;

    letter-spacing:

        -0.035em;

    font-variation-settings:

        "wdth" 97;

}



.legal-layout {

    display:

        grid;

    grid-template-columns:

        3fr

        7fr;

    gap:

        clamp(

            50px,

            8vw,

            140px

        );

    padding-top:

        75px;

}



.legal-index {

    font-size:

        9px;

    font-weight:

        400;

    letter-spacing:

        0.1em;

    color:

        var(--accent);

}



.legal-content {

    max-width:

        760px;

}



.legal-content section {

    padding-bottom:

        50px;

    margin-bottom:

        50px;

    border-bottom:

        1px solid

        var(--line);

}



.legal-content h2 {

    margin-bottom:

        22px;

    font-size:

        clamp(

            22px,

            2vw,

            30px

        );

    font-weight:

        400;

    letter-spacing:

        -0.01em;

}



.legal-content p {

    margin-bottom:

        15px;

    font-size:

        15px;

    line-height:

        1.8;

    color:

        var(--ink-soft);

}



.legal-content a {

    text-decoration:

        underline;

    text-decoration-thickness:

        1px;

    text-underline-offset:

        4px;

}



.legal-back {

    display:

        inline-block;

    margin-top:

        32px;

    font-size:

        10px;

    font-weight:

        400;

    letter-spacing:

        0.1em;

    color:

        var(--accent);

    text-decoration:

        none !important;

}





/* ==========================================================

   REVEAL

========================================================== */

.reveal {

    opacity:

        0;

    transform:

        translateY(20px);

    transition:

        opacity

        800ms

        var(--ease),

        transform

        800ms

        var(--ease);

}



.reveal.visible {

    opacity:

        1;

    transform:

        translateY(0);

}





/* ==========================================================

   LIGHTBOX

========================================================== */

.lightbox {

    position:

        fixed;

    inset:

        0;

    z-index:

        5000;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    background:

        rgba(

            10,

            14,

            16,

            0.98

        );

    color:

        var(--white);

    opacity:

        0;

    visibility:

        hidden;

    pointer-events:

        none;

    transition:

        opacity

        300ms

        ease,

        visibility

        300ms

        ease;

}



.lightbox.open {

    opacity:

        1;

    visibility:

        visible;

    pointer-events:

        auto;

}



.lightbox-content {

    width:

        min(

            82vw,

            1400px

        );

    height:

        84vh;

    display:

        flex;

    flex-direction:

        column;

    justify-content:

        center;

}



.lightbox-content img {

    width:

        100%;

    height:

        calc(

            100%

            - 35px

        );

    object-fit:

        contain;

}



.lightbox-info {

    display:

        flex;

    justify-content:

        space-between;

    padding-top:

        12px;

    font-size:

        9px;

    letter-spacing:

        0.1em;

    color:

        #8d989f;

}



.lightbox-close,

.lightbox-prev,

.lightbox-next {

    position:

        absolute;

    z-index:

        5;

    border:

        0;

    background:

        transparent;

    color:

        var(--white);

    cursor:

        pointer;

}



.lightbox-close {

    top:

        25px;

    right:

        30px;

    font-size:

        38px;

    font-weight:

        300;

}



.lightbox-prev,

.lightbox-next {

    top:

        50%;

    transform:

        translateY(-50%);

    font-size:

        28px;

    font-weight:

        300;

}



.lightbox-prev {

    left:

        30px;

}



.lightbox-next {

    right:

        30px;

}





/* ==========================================================

   MEDIUM DESKTOP

========================================================== */

@media (

    max-width: 1250px

) {

    .site-header {

        min-height:

            136px;

    }



    .brand-main {

        font-size:

            clamp(

                44px,

                4.5vw,

                60px

            );

        gap:

            0.2em;

        letter-spacing:

            0.018em;

    }



    .brand-sub {

        font-size:

            9px;

    }



    .desktop-navigation {

        gap:

            24px;

    }



    .desktop-navigation a {

        font-size:

            11px;

        letter-spacing:

            0.09em;

    }



    .hero {

        padding-top:

            210px;

    }



    .hero-content {

        grid-column:

            1 / span 5;

    }



    .hero-visual {

        grid-column:

            6 / span 7;

    }



    .project-header {

        grid-template-columns:

            50px

            1fr;

    }



    .project-header > p {

        grid-column:

            2;

        margin-top:

            15px;

    }



    .about-heading {

        grid-column:

            1 / span 6;

    }



    .about-image {

        grid-column:

            7 / span 6;

    }



    .about-copy {

        grid-column:

            5 / span 8;

        margin-top:

            65px;

    }

}





/* ==========================================================

   MOBILE

========================================================== */

@media (

    max-width: 760px

) {

    :root {

        --page:

            20px;

    }



    html {

        scroll-padding-top:

            95px;

    }



    /* HEADER */

    .site-header {

        min-height:

            104px;

        padding:

            19px

            var(--page);

    }



    .site-header.scrolled {

        min-height:

            86px;

        padding:

            14px

            var(--page);

    }





    /* LOGO */

    .brand {

        gap:

            7px;

    }



    .brand-main {

        gap:

            0.2em;

        font-size:

            35px;

        line-height:

            0.94;

        font-weight:

            400;

        letter-spacing:

            0.018em;

        font-variation-settings:

            "wdth" 95;

    }



    .brand-first,

    .brand-last {

        font-weight:

            400;

    }



    .brand-sub {

        padding-left:

            1px;

        font-size:

            7.5px;

        font-weight:

            400;

        letter-spacing:

            0.15em;

    }





    /* NAVIGATION */

    .desktop-navigation {

        display:

            none;

    }



    .menu-button {

        display:

            block;

    }





    /* HERO */

    .hero {

        min-height:

            auto;

        padding:

            155px

            var(--page)

            90px;

    }



    .hero-grid {

        min-height:

            auto;

        display:

            flex;

        flex-direction:

            column;

        gap:

            75px;

    }



    .hero-content {

        width:

            100%;

        padding-right:

            0;

    }



    .hero h1 {

        font-size:

            clamp(

                52px,

                15vw,

                82px

            );

        line-height:

            0.92;

    }



    .hero-description {

        width:

            86%;

        margin-top:

            48px;

    }



    .hero-visual {

        width:

            100%;

    }



    .hero-scroll {

        display:

            none;

    }





    /* WORK */

    .work {

        padding:

            110px

            var(--page)

            85px;

    }



    .work-heading {

        grid-template-columns:

            1fr;

        gap:

            58px;

        margin-bottom:

            125px;

    }



    .work-heading h2 {

        font-size:

            clamp(

                60px,

                17vw,

                96px

            );

    }





    /* PROJECT */

    .project {

        margin-bottom:

            155px;

    }



    .project-header {

        grid-template-columns:

            35px

            1fr;

        gap:

            15px;

        margin-bottom:

            58px;

    }



    .project-title h3 {

        font-size:

            clamp(

                44px,

                12vw,

                68px

            );

    }



    .project-header > p {

        grid-column:

            2;

        max-width:

            95%;

    }





    /* GALLERY */

    .gallery {

        display:

            flex;

        flex-direction:

            column;

        gap:

            70px;

    }



    .gallery-item,

    .gallery-item:only-child,

    .gallery-item:nth-child(n) {

        width:

            100% !important;

        margin:

            0 !important;

        align-self:

            auto;

    }



    .gallery-item:nth-child(even) {

        width:

            84% !important;

        align-self:

            flex-end;

    }



    .gallery-item:nth-child(3n) {

        width:

            90% !important;

        align-self:

            flex-start;

    }



    .gallery-item img {

        width:

            100%;

        height:

            auto;

    }



    /* ABOUT */

    .about {

        padding:

            105px

            var(--page);

    }



    .section-top {

        margin-bottom:

            78px;

    }



    .about-grid {

        display:

            flex;

        flex-direction:

            column;

        gap:

            72px;

    }



    .about-heading h2 {

        font-size:

            clamp(

                56px,

                16vw,

                88px

            );

    }



    .about-image {

        width:

            80%;

    }



    .about-copy {

        width:

            100%;

        margin-top:

            0;

    }





    /* CONTACT */

    .contact {

        padding:

            105px

            var(--page);

    }



    .contact-top {

        margin-bottom:

            78px;

    }



    .contact-grid {

        grid-template-columns:

            1fr;

        gap:

            82px;

    }



    .contact h2 {

        font-size:

            clamp(

                64px,

                18vw,

                104px

            );

    }



    .contact-links a {

        grid-template-columns:

            65px

            1fr

            auto;

        gap:

            10px;

    }





    /* IMPRESSUM */

    .legal-page {

        padding:

            170px

            var(--page)

            105px;

    }



    .legal-layout {

        grid-template-columns:

            1fr;

        gap:

            52px;

    }



    .legal-intro h1 {

        font-size:

            clamp(

                42px,

                12vw,

                72px

            );

    }





    /* FOOTER */

    .site-footer {

        grid-template-columns:

            1fr;

        gap:

            24px;

        align-items:

            start;

    }





    /* LIGHTBOX */

    .lightbox-content {

        width:

            88vw;

        height:

            78vh;

    }



    .lightbox-prev {

        left:

            10px;

    }



    .lightbox-next {

        right:

            10px;

    }



    .lightbox-close {

        top:

            14px;

        right:

            18px;

    }

}





/* ==========================================================

   REDUCED MOTION

========================================================== */

@media (

    prefers-reduced-motion: reduce

) {

    html {

        scroll-behavior:

            auto;

    }



    *,

    *::before,

    *::after {

        animation-duration:

            0.01ms !important;

        transition-duration:

            0.01ms !important;

        animation-iteration-count:

            1 !important;

    }



    .reveal {

        opacity:

            1;

        transform:

            none;

    }

}

/* ==========================================================
   PROJECT DETAIL PAGE
   ========================================================== */

.project-page {
    background: var(--bg, #f2f2ef);
    color: var(--text, #111111);
}

.project-detail-loading,
.project-detail-error {
    min-height: 70vh;
    padding: clamp(160px, 18vw, 260px) clamp(24px, 5vw, 80px) 100px;
}

.project-detail-loading p {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soft, #777);
}

.project-detail-error {
    max-width: 900px;
}

.project-detail-error-label {
    margin: 0 0 30px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft, #777);
}

.project-detail-error h1 {
    max-width: 800px;
    margin: 0 0 28px;
    font-size: clamp(38px, 6vw, 90px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.project-detail-error > p:not(.project-detail-error-label) {
    max-width: 520px;
    margin: 0 0 40px;
    font-size: 14px;
    line-height: 1.7;
}

.project-detail-error a {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-detail-intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2.2vw, 36px);
    padding: clamp(150px, 15vw, 230px) clamp(24px, 4vw, 64px) clamp(80px, 9vw, 150px);
}

.project-detail-back {
    grid-column: 1 / span 12;
    margin-bottom: clamp(60px, 8vw, 120px);
}

.project-detail-back a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: opacity 180ms ease, transform 180ms ease;
}

.project-detail-back a:hover {
    opacity: 0.55;
    transform: translateX(-3px);
}

.project-detail-heading {
    grid-column: 1 / span 8;
}

.project-detail-kicker {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 26px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft, #747474);
}

.project-detail-kicker span + span::before {
    content: "—";
    margin-right: 22px;
}

.project-detail-heading h1 {
    max-width: 1100px;
    margin: 0;
    font-family: "Archivo", sans-serif;
    font-size: clamp(54px, 9vw, 150px);
    font-weight: 400;
    font-stretch: 90%;
    line-height: 0.83;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.project-detail-subtitle {
    max-width: 620px;
    margin: clamp(28px, 3.5vw, 55px) 0 0;
    font-size: clamp(15px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.project-detail-description {
    grid-column: 8 / span 5;
    align-self: end;
    max-width: 560px;
    margin-top: clamp(70px, 10vw, 150px);
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.7;
}

.project-detail-metadata {
    grid-column: 1 / span 12;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 clamp(20px, 3vw, 55px);
    margin: clamp(90px, 11vw, 170px) 0 0;
    padding: 0;
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.18));
}

.project-detail-metadata-row {
    min-width: 0;
    padding: 17px 0 26px;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.18));
}

.project-detail-metadata dt {
    margin: 0 0 9px;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--soft, #747474);
}

.project-detail-metadata dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.project-detail-featured {
    padding: 0 clamp(24px, 4vw, 64px) clamp(120px, 14vw, 220px);
}

.project-featured-figure {
    width: 100%;
    margin: 0;
    cursor: zoom-in;
}

.project-featured-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    background: #dfe1e1;
}

.project-featured-figure figcaption {
    max-width: 760px;
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--soft, #747474);
}

.project-detail-gallery-section {
    overflow: hidden;
    padding: 0 clamp(24px, 4vw, 64px) clamp(150px, 16vw, 260px);
}

.project-detail-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2.2vw, 36px);
    row-gap: clamp(90px, 12vw, 200px);
}

.project-detail-gallery-item {
    position: relative;
    min-width: 0;
    margin: 0;
    cursor: zoom-in;
}

.project-detail-gallery-item:nth-child(6n + 1) {
    grid-column: 1 / span 7;
}

.project-detail-gallery-item:nth-child(6n + 2) {
    grid-column: 9 / span 4;
    margin-top: clamp(70px, 11vw, 180px);
}

.project-detail-gallery-item:nth-child(6n + 3) {
    grid-column: 3 / span 8;
}

.project-detail-gallery-item:nth-child(6n + 4) {
    grid-column: 1 / span 5;
    margin-top: clamp(30px, 5vw, 90px);
}

.project-detail-gallery-item:nth-child(6n + 5) {
    grid-column: 7 / span 6;
}

.project-detail-gallery-item:nth-child(6n + 6) {
    grid-column: 2 / span 9;
}

.project-detail-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    background: #dfe1e1;
    transition: opacity 250ms ease, transform 350ms ease;
}

.project-detail-gallery-item:hover img {
    opacity: 0.94;
    transform: translateY(-2px);
}

.project-detail-gallery-item figcaption {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-top: 11px;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soft, #747474);
}

.project-detail-gallery-item figcaption span:first-child {
    max-width: 70%;
}

.project-detail-navigation {
    padding: 0 clamp(24px, 4vw, 64px) clamp(80px, 9vw, 140px);
}

.project-detail-all-projects {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(24px, 3vw, 45px) 0;
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.18));
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.18));
    font-size: clamp(22px, 3.2vw, 50px);
    font-weight: 400;
    letter-spacing: -0.035em;
    transition: opacity 180ms ease;
}

.project-detail-all-projects:hover {
    opacity: 0.52;
}

.project-featured-figure:focus-visible,
.project-detail-gallery-item:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 6px;
}

@media (max-width: 1000px) {
    .project-detail-heading {
        grid-column: 1 / span 10;
    }

    .project-detail-description {
        grid-column: 6 / span 7;
    }

    .project-detail-metadata {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .project-detail-intro {
        display: block;
        padding: 120px 18px 80px;
    }

    .project-detail-back {
        margin-bottom: 65px;
    }

    .project-detail-kicker {
        margin-bottom: 18px;
    }

    .project-detail-heading h1 {
        font-size: clamp(46px, 15vw, 78px);
        line-height: 0.88;
        letter-spacing: -0.055em;
    }

    .project-detail-subtitle {
        margin-top: 24px;
        font-size: 15px;
    }

    .project-detail-description {
        max-width: none;
        margin-top: 60px;
        font-size: 14px;
        line-height: 1.65;
    }

    .project-detail-metadata {
        display: block;
        margin-top: 70px;
    }

    .project-detail-metadata-row {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 20px;
        padding: 13px 0;
    }

    .project-detail-metadata dt {
        margin: 2px 0 0;
    }

    .project-detail-metadata dd {
        font-size: 12px;
    }

    .project-detail-featured {
        padding: 0 18px 100px;
    }

    .project-featured-figure img {
        max-height: none;
    }

    .project-detail-gallery-section {
        padding: 0 18px 120px;
    }

    .project-detail-gallery {
        display: flex;
        flex-direction: column;
        gap: 85px;
    }

    .project-detail-gallery-item,
    .project-detail-gallery-item:nth-child(n) {
        width: 100%;
        margin: 0;
    }

    .project-detail-gallery-item:nth-child(even) {
        width: 86%;
        align-self: flex-end;
    }

    .project-detail-gallery-item:nth-child(3n) {
        width: 92%;
        align-self: flex-start;
    }

    .project-detail-navigation {
        padding: 0 18px 80px;
    }

    .project-detail-all-projects {
        font-size: 27px;
    }

    .project-detail-loading,
    .project-detail-error {
        padding: 130px 18px 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-detail-gallery-item img,
    .project-detail-back a,
    .project-detail-all-projects {
        transition: none;
    }
}

/* ==========================================================
   PROJECT DETAIL – PREVIOUS / ALL / NEXT NAVIGATION
   ========================================================== */

.project-nav-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.18));
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.18));
}

.project-nav-slot {
    min-width: 0;
}

.project-nav-slot-next {
    text-align: right;
}

.project-nav-card {
    display: flex;
    min-height: clamp(150px, 15vw, 235px);
    padding: clamp(28px, 4vw, 58px) clamp(10px, 2vw, 30px);
    flex-direction: column;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    transition: opacity 180ms ease;
}

.project-nav-previous {
    padding-left: 0;
}

.project-nav-next {
    align-items: flex-end;
    padding-right: 0;
}

.project-nav-card:hover,
.project-nav-all:hover {
    opacity: 0.5;
}

.project-nav-direction {
    display: block;
    margin-bottom: clamp(20px, 2.5vw, 38px);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soft, #747474);
}

.project-nav-title {
    display: block;
    max-width: 100%;
    font-size: clamp(25px, 3.3vw, 52px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
}

.project-nav-category {
    display: block;
    margin-top: 14px;
    font-size: 8px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soft, #747474);
}

.project-nav-all {
    display: flex;
    min-width: clamp(150px, 17vw, 250px);
    padding: 30px clamp(20px, 3vw, 50px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-left: 1px solid var(--line, rgba(0, 0, 0, 0.18));
    border-right: 1px solid var(--line, rgba(0, 0, 0, 0.18));
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: opacity 180ms ease;
}

.project-nav-all span:last-child {
    font-size: 16px;
    line-height: 1;
}

.project-nav-card:focus-visible,
.project-nav-all:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 7px;
}

@media (max-width: 760px) {
    .project-nav-grid {
        grid-template-columns: 1fr 1fr;
    }

    .project-nav-slot-previous {
        grid-column: 1;
        grid-row: 1;
    }

    .project-nav-slot-next {
        grid-column: 2;
        grid-row: 1;
        border-left: 1px solid var(--line, rgba(0, 0, 0, 0.18));
    }

    .project-nav-card {
        min-height: 160px;
        padding: 25px 16px;
    }

    .project-nav-previous {
        padding-left: 0;
    }

    .project-nav-next {
        padding-right: 0;
    }

    .project-nav-direction {
        margin-bottom: 28px;
        font-size: 8px;
    }

    .project-nav-title {
        font-size: clamp(22px, 7vw, 34px);
    }

    .project-nav-category {
        font-size: 7px;
    }

    .project-nav-all {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        min-height: 72px;
        padding: 20px 0;
        flex-direction: row;
        justify-content: space-between;
        border-top: 1px solid var(--line, rgba(0, 0, 0, 0.18));
        border-left: 0;
        border-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-nav-card,
    .project-nav-all {
        transition: none;
    }
}


/* ==========================================================
   PROJECT NAVIGATION – SUBTLE IMAGE PREVIEW
   ========================================================== */

.project-nav-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.project-nav-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.project-nav-preview {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: clamp(130px, 15vw, 235px);
    max-height: 78%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.985);
    transition:
        opacity 260ms ease,
        transform 420ms var(--ease, ease);
}

.project-nav-preview img {
    display: block;
    width: 100%;
    max-height: clamp(95px, 11vw, 165px);
    object-fit: cover;
    filter: grayscale(100%);
}

.project-nav-previous .project-nav-preview {
    right: clamp(8px, 1.8vw, 28px);
}

.project-nav-next .project-nav-preview {
    left: clamp(8px, 1.8vw, 28px);
}

.project-nav-card:hover {
    opacity: 1;
}

.project-nav-card:hover .project-nav-preview,
.project-nav-card:focus-visible .project-nav-preview {
    opacity: 0.28;
    transform: translateY(-50%) scale(1);
}

.project-nav-card:hover .project-nav-content,
.project-nav-card:focus-visible .project-nav-content {
    opacity: 0.68;
}

.project-nav-content {
    transition: opacity 220ms ease;
}

@media (max-width: 760px) {
    .project-nav-preview {
        display: none;
    }

    .project-nav-card:hover .project-nav-content,
    .project-nav-card:focus-visible .project-nav-content {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body > main,
    .projects-dropdown,
    .projects-menu-chevron {
        transition: none;
    }

    .project-nav-preview,
    .project-nav-content {
        transition: none;
    }
}


/* ==========================================================
   WRITING / PUBLICATIONS
   ========================================================== */

.visually-hidden {
    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;
}

.writing-page,
.article-page {
    background: var(--bg);
    color: var(--ink);
}

.writing-main,
.article-main {
    max-width: var(--max-width);
    margin: 0 auto;
}

.writing-intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2.2vw, 36px);
    padding: clamp(170px, 16vw, 245px) var(--page) clamp(95px, 10vw, 155px);
}

.writing-intro-meta {
    grid-column: 1 / span 12;
    display: flex;
    gap: 24px;
    margin-bottom: clamp(48px, 6vw, 90px);
}

.writing-intro h1 {
    grid-column: 1 / span 9;
    margin: 0;
    font-size: clamp(72px, 10vw, 165px);
    font-weight: 300;
    line-height: 0.88;
    letter-spacing: -0.055em;
    font-variation-settings: "wdth" 96;
}

.writing-intro > p {
    grid-column: 9 / span 4;
    align-self: end;
    max-width: 360px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.writing-list-section {
    padding: 0 var(--page) clamp(140px, 15vw, 230px);
}

.writing-list {
    border-top: 1px solid var(--line);
}

.writing-state {
    margin: 0;
    padding: clamp(34px, 4vw, 58px) 0;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.writing-state-error {
    color: var(--accent);
}

.writing-list-item {
    border-bottom: 1px solid var(--line);
}

.writing-list-link {
    display: grid;
    grid-template-columns: minmax(100px, 1.3fr) minmax(0, 7fr) minmax(120px, 2fr);
    gap: clamp(24px, 3vw, 50px);
    padding: clamp(34px, 4vw, 62px) 0;
    align-items: start;
    transition: opacity 220ms ease, transform 280ms var(--ease);
}

.writing-list-link:hover {
    opacity: 0.58;
}

.writing-list-link:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 8px;
}

.writing-list-meta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 7px;
    font-size: 8px;
    line-height: 1.3;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.writing-list-main {
    min-width: 0;
}

.writing-list-main h2 {
    margin: 0;
    max-width: 1000px;
    font-size: clamp(35px, 4.7vw, 78px);
    font-weight: 300;
    line-height: 0.96;
    letter-spacing: -0.04em;
    font-variation-settings: "wdth" 97;
}

.writing-list-subtitle {
    max-width: 760px;
    margin: 18px 0 0;
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.45;
}

.writing-list-excerpt {
    max-width: 670px;
    margin: 24px 0 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink-soft);
}

.writing-list-side {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    padding-top: 7px;
    text-align: right;
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.writing-list-arrow {
    font-size: 19px;
    line-height: 1;
    color: var(--ink);
    transition: transform 280ms var(--ease);
}

.writing-list-link:hover .writing-list-arrow {
    transform: translate(4px, -4px);
}


/* ==========================================================
   ARTICLE
   ========================================================== */

.article-loading,
.article-error {
    min-height: 70vh;
    padding: clamp(170px, 17vw, 245px) var(--page) 120px;
}

.article-loading {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.article-detail {
    padding: clamp(160px, 15vw, 225px) var(--page) 0;
}

.article-back {
    margin-bottom: clamp(60px, 7vw, 110px);
}

.article-back a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 9px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition: opacity 180ms ease, transform 180ms ease;
}

.article-back a:hover {
    opacity: 0.55;
    transform: translateX(-3px);
}

.article-header {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2.2vw, 36px);
    padding-bottom: clamp(90px, 10vw, 155px);
    border-bottom: 1px solid var(--line);
}

.article-kicker {
    grid-column: 1 / span 12;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 25px;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.article-kicker span[hidden] {
    display: none;
}

.article-kicker span:not([hidden]) + span:not([hidden])::before {
    content: "—";
    margin-right: 18px;
}

.article-header h1 {
    grid-column: 1 / span 10;
    max-width: 1250px;
    margin: 0;
    font-size: clamp(54px, 8.4vw, 140px);
    font-weight: 300;
    line-height: 0.88;
    letter-spacing: -0.055em;
    font-variation-settings: "wdth" 96;
    text-wrap: balance;
}

.article-subtitle {
    grid-column: 1 / span 8;
    max-width: 800px;
    margin: clamp(30px, 4vw, 55px) 0 0;
    font-size: clamp(18px, 1.8vw, 28px);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.article-excerpt {
    grid-column: 8 / span 5;
    max-width: 520px;
    margin: clamp(55px, 7vw, 100px) 0 0;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.75;
    color: var(--ink-soft);
}

.article-content {
    width: min(100%, 860px);
    margin: 0 auto;
    padding: clamp(90px, 10vw, 150px) 0 clamp(120px, 13vw, 200px);
}

.article-content p {
    margin: 0 0 1.55em;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.82;
    letter-spacing: -0.005em;
}

.article-content h2 {
    margin: clamp(70px, 8vw, 115px) 0 28px;
    font-size: clamp(31px, 3.3vw, 52px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.article-content h3 {
    margin: clamp(55px, 6vw, 85px) 0 22px;
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.article-content blockquote {
    margin: clamp(50px, 6vw, 80px) 0;
    padding: 8px 0 8px clamp(24px, 3vw, 42px);
    border-left: 1px solid var(--ink);
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -0.02em;
}

.article-content ul {
    margin: 0 0 1.8em;
    padding-left: 1.2em;
}

.article-content li {
    margin-bottom: 0.65em;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.7;
}

.article-footer-nav {
    padding-bottom: clamp(80px, 9vw, 140px);
}

.article-footer-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(25px, 3vw, 44px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: clamp(24px, 3.2vw, 50px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
    transition: opacity 180ms ease;
}

.article-footer-nav a:hover {
    opacity: 0.52;
}

.article-error {
    max-width: 1000px;
}

.article-error-label {
    margin: 0 0 30px;
    font-size: 9px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.article-error h1 {
    max-width: 850px;
    margin: 0 0 30px;
    font-size: clamp(42px, 6vw, 94px);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.article-error > p:not(.article-error-label) {
    max-width: 520px;
    margin: 0 0 40px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.article-error a {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


@media (max-width: 760px) {
    .writing-intro {
        display: block;
        padding: 135px var(--page) 80px;
    }

    .writing-intro-meta {
        margin-bottom: 48px;
    }

    .writing-intro h1 {
        font-size: clamp(62px, 21vw, 100px);
        line-height: 0.9;
    }

    .writing-intro > p {
        max-width: 300px;
        margin-top: 35px;
        font-size: 13px;
    }

    .writing-list-section {
        padding: 0 var(--page) 100px;
    }

    .writing-list-link {
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 15px;
        padding: 30px 0;
    }

    .writing-list-meta {
        gap: 7px;
        padding-top: 4px;
        font-size: 7px;
    }

    .writing-list-main h2 {
        font-size: clamp(31px, 10vw, 46px);
    }

    .writing-list-subtitle {
        margin-top: 12px;
        font-size: 14px;
    }

    .writing-list-excerpt {
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.65;
    }

    .writing-list-side {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 0;
        padding-top: 8px;
        text-align: left;
    }

    .writing-list-arrow {
        font-size: 16px;
    }

    .article-detail {
        padding: 120px var(--page) 0;
    }

    .article-back {
        margin-bottom: 55px;
    }

    .article-header {
        display: block;
        padding-bottom: 70px;
    }

    .article-kicker {
        gap: 10px;
        margin-bottom: 20px;
        font-size: 8px;
    }

    .article-kicker span:not([hidden]) + span:not([hidden])::before {
        margin-right: 10px;
    }

    .article-header h1 {
        font-size: clamp(46px, 14vw, 76px);
        line-height: 0.91;
    }

    .article-subtitle {
        margin-top: 25px;
        font-size: 18px;
    }

    .article-excerpt {
        max-width: none;
        margin-top: 42px;
        font-size: 14px;
    }

    .article-content {
        padding: 70px 0 95px;
    }

    .article-content p,
    .article-content li {
        font-size: 16px;
        line-height: 1.75;
    }

    .article-content h2 {
        margin-top: 60px;
        font-size: 30px;
    }

    .article-content h3 {
        margin-top: 48px;
        font-size: 22px;
    }

    .article-content blockquote {
        margin: 45px 0;
        font-size: 21px;
    }

    .article-footer-nav {
        padding-bottom: 75px;
    }

    .article-footer-nav a {
        font-size: 27px;
    }

    .article-loading,
    .article-error {
        padding: 130px var(--page) 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .writing-list-link,
    .writing-list-arrow,
    .article-back a,
    .article-footer-nav a {
        transition: none;
    }
}

/* ==========================================================
   CALIFORNIA SUNRISE – STARTSEITE
   Der Verlauf gilt nur für den Hero. Writing, Artikel und
   Projektseiten bleiben auf neutralem Hintergrund.
   ========================================================== */

body:not(.writing-page):not(.article-page):not(.project-page) .hero {
    isolation: isolate;
}

body:not(.writing-page):not(.article-page):not(.project-page) .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        #c9ddea 0%,
        #d8e4eb 18%,
        #e7e9e7 38%,
        #f0e6e0 55%,
        #f3d7c9 72%,
        #efb99c 100%
    );
    pointer-events: none;
}

.brand,
.brand-main,
.brand-first,
.brand-last,
.brand-sub,
.desktop-navigation a,
.hero h1 {
    font-family: "Urbanist", var(--font);
}

.hero h1 {
    font-size: clamp(54px, 6vw, 104px);
    line-height: 0.91;
    letter-spacing: -0.035em;
    font-weight: 400;
}

.hero h1 span {
    color: #506873;
}

.hero-description {
    border-top-color: rgba(80, 104, 115, 0.22);
}

.hero-scroll {
    color: #5f6b70;
}

.hero-scroll-line {
    background: #506873;
}

/* Writing und Artikel bewusst neutral halten. */
.writing-page,
.article-page,
.project-page {
    background: var(--bg);
}

@media (max-width: 760px) {
    body:not(.writing-page):not(.article-page):not(.project-page) .hero::before {
        background: linear-gradient(
            180deg,
            #d2e1eb 0%,
            #e0e8ec 22%,
            #eceae6 48%,
            #f2ded3 72%,
            #efc2aa 100%
        );
    }
}