/* Portfolio styles: visual system, layout, gallery, lightbox and responsive rules. */
:root{
    --bg:#0a0a0a;
    --text:#d0d0d0;
    --muted:#7a7a7a;
    --nav:#111;
    --border:#222;
    --contact-point:clamp(16px, 1.2vw, 21px);
    --gallery-title-size:calc(var(--contact-point) + 2px);
    --gallery-subtitle-size:calc(var(--gallery-title-size) * 0.5);
    --nav-point:calc(((clamp(16px, 1.2vw, 21px) - 2px) * 1.25) - 2px);
    --nav-signature-scale:1.875;
    --nav-side-width:calc(var(--nav-point) * 1.913 * var(--nav-signature-scale) * 1.078);
    --nav-control-axis-offset:0px;
    --nav-control-menu-left:40px;
    --nav-control-trigger-left:calc(var(--nav-control-menu-left) + var(--nav-side-width) * 1.7);
    --nav-control-available-height:calc(100svh - var(--nav-height));
    --nav-control-open-height:calc(var(--contact-point) * 18);
    --nav-height:0px;
    --nav-layout-height:calc(var(--nav-point) * 1.913 * var(--nav-signature-scale));
    --hero-start-height:calc(100svh - var(--nav-layout-height));
}

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

html,
body{
    width:100%;
    overflow-x:hidden;
    background:var(--bg);
}

html{
    scroll-behavior:smooth;
}

body{
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

a{
    color:var(--muted);
    text-decoration:none;
    transition:color 0.2s;
}

a:hover,
nav button:hover{
    color:white;
}

nav button.active{
    color:white;
}

.section-tab{
    display:flex;
    align-items:center;
    justify-content:center;
}

.section-tab-icon{
    display:none;
}

section{
    width:100%;
}

.hero{
    width:100%;
    height:var(--hero-start-height, auto);
    padding:0 40px;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.24), rgba(0,0,0,0.58)),
        var(--hero-banner-image, url("../gallery/illustration/concept-art/Nomad-cat.webp")) center/cover no-repeat;
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
}

.hero::before,
.hero::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    pointer-events:none;
    z-index:0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='210' height='210' filter='url(%23noise)' opacity='0.18'/%3E%3C/svg%3E"),
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 32%, rgba(0,0,0,0.07) 70%),
        rgba(255,255,255,0.04);
    background-blend-mode:overlay, normal, normal, normal;
    backdrop-filter:blur(12px) saturate(1.08) contrast(1.02);
    -webkit-backdrop-filter:blur(12px) saturate(1.08) contrast(1.02);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.08),
        inset 24px -24px 58px rgba(0,0,0,0.10);
}

.hero::before{
    top:0;
    height:var(--portfolio-mask-top, 0px);
}

.hero::after{
    top:calc(var(--portfolio-mask-bottom, 0px) - 1px);
    bottom:-3px;
}

.hero > *{
    position:relative;
    z-index:1;
}

.hero-content{
    width:100%;
}

.hero-contact-zone{
    width:100%;
    position:relative;
    z-index:4;
    margin-top:calc(var(--contact-point) * 0.58);
    pointer-events:auto;
}

.hero-intro{
    width:min(100%, calc(var(--contact-point) * 52));
    margin:calc(var(--contact-point) * 3.1 + var(--hero-intro-margin-adjust, 0px)) auto 0;
    min-height:calc(var(--contact-point) * 15.8 + var(--hero-landing-fill, 0px));
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:calc(var(--contact-point) * 1.58);
    color:var(--hero-foreground, white);
    opacity:0.75;
    text-align:center;
}

.hero-intro p{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc((var(--nav-point) - 2px) * 0.5 + 4px);
    font-style:normal;
    font-weight:400;
    line-height:calc(1.7em + var(--contact-point));
    letter-spacing:4px;
    text-transform:uppercase;
    text-shadow:0 0 calc(var(--contact-point) * 1.1) var(--hero-text-shadow, rgba(0,0,0,0.34));
    transition:color 0.25s ease, text-shadow 0.25s ease;
}

.hero-intro img{
    width:calc(var(--contact-point) * 5.2);
    max-width:34vw;
    height:auto;
    display:block;
    opacity:0.65;
    transition:filter 0.25s ease;
}

.hero.uses-dark-foreground .hero-intro img{
    filter:invert(1);
}

body[data-active-section="photo"] .hero-intro p{
    display:none;
}

.hero-carousel{
    position:absolute;
    top:calc(var(--contact-point) * 1.78 + 1px);
    bottom:auto;
    left:auto;
    right:40px;
    z-index:1;
    width:clamp(320px, 34vw, 640px);
    height:clamp(180px, 14.8vw, 274px);
    min-height:0;
    padding:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,0.08);
    box-shadow:0 18px 44px rgba(0,0,0,0.18);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.35s ease;
}

.hero-carousel-frame{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:0;
    width:100%;
    height:100%;
    overflow:visible;
    transition:opacity 0.08s ease;
}

.hero-carousel-frame path{
    fill:none;
    stroke:rgba(255,255,255,0.86);
    stroke-width:4px;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1;
    stroke-dashoffset:1;
}

.hero-carousel:hover .hero-carousel-frame{
    opacity:1;
}

.hero-carousel:hover .hero-carousel-frame path{
    animation:hero-carousel-border-draw 0.62s cubic-bezier(0.17, 0.84, 0.28, 1) forwards;
}

@keyframes hero-carousel-border-draw{
    to{
        stroke-dashoffset:0;
    }
}

.hero-carousel.is-ready{
    opacity:1;
    pointer-events:auto;
}

.hero-carousel-image{
    position:relative;
    z-index:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:opacity 0.35s ease;
}

.hero-carousel[data-orientation="vertical"] .hero-carousel-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.hero-carousel.is-changing .hero-carousel-image{
    opacity:0.35;
}

.hero-carousel-card{
    --hero-carousel-card-fade-start:0%;
    position:absolute;
    left:0;
    bottom:-1px;
    z-index:2;
    width:50%;
    min-height:auto;
    padding:calc(var(--contact-point) * 0.5) calc(var(--contact-point) * 0.425);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:calc(var(--contact-point) * 0.2);
    color:var(--adaptive-text-primary, #111);
    text-align:left;
    border-top-right-radius:10px;
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.144), rgba(255,255,255,0.032) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.144), rgba(255,255,255,0.048) 32%, rgba(0,0,0,0.064) 70%),
        rgba(255,255,255,0.128);
    backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    -webkit-backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.096),
        inset 24px -24px 58px rgba(0,0,0,0.096);
    mask-image:linear-gradient(
        to right,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,0) 100%
    );
    -webkit-mask-image:linear-gradient(
        to right,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,0) 100%
    );
}

.hero-carousel-card strong{
    overflow:hidden;
    font-family:Georgia, "Times New Roman", serif;
    font-size:calc(var(--gallery-title-size) * 0.5);
    font-style:italic;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 5px var(--adaptive-text-shadow, transparent);
    transition:color 0.25s ease, text-shadow 0.25s ease;
}

.hero-carousel-card span{
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--gallery-subtitle-size) * 0.5);
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--adaptive-text-secondary, #555);
    text-shadow:0 1px 5px var(--adaptive-text-shadow, transparent);
    transition:color 0.25s ease, text-shadow 0.25s ease;
}

.main-title{
    width:100%;
    position:relative;
    top:calc(var(--contact-point) + 1px);
    line-height:0.82;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    transform:none;
}

.main-title h1{
    margin-left:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:inherit;
    font-size:clamp(75px, 9.1vw, 175px);
    color:var(--hero-title-color, white);
    font-weight:900;
    letter-spacing:var(--contact-point);
    text-transform:uppercase;
    transition:color 0.25s ease;
}

.main-title h1 span:last-child{
    margin-left:0;
}

/* Prevent a first-paint flash before JavaScript has measured the mask bounds. */
.hero:not(.layout-ready)::before,
.hero:not(.layout-ready)::after{
    opacity:0;
}

.hero.layout-ready::before,
.hero.layout-ready::after{
    opacity:1;
}

.main-title h1 span:first-child{
    margin-left:clamp(14px, 1.2vw, 28px);
}

.portfolio-bar{
    margin-top:calc(30px + var(--contact-point) * 2.5);
    width:calc(100% + 80px);
    margin-left:-40px;
    display:flex;
    flex-direction:column;
}

.portfolio-bar h2{
    width:100%;
    background:rgba(255,255,255,0.493);
    color:rgba(0,0,0,0.62);
    padding:26px 40px;
    font-size:clamp(18px, 1.5vw, 28px);
    line-height:1;
    letter-spacing:15px;
    font-weight:900;
    text-transform:uppercase;
    text-align:right;
}

.contact{
    position:relative;
    z-index:10;
    pointer-events:auto;
    margin-top:0;
    margin-bottom:0;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:20px;
}

.contact-left{
    position:relative;
    z-index:11;
    pointer-events:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contact-left a{
    display:inline-flex;
    width:max-content;
    position:relative;
    z-index:2;
    pointer-events:auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc((var(--nav-point) - 2px) * 0.5);
    font-style:normal;
    font-weight:400;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--hero-foreground, white);
    text-shadow:0 0 0 var(--hero-text-shadow, rgba(0,0,0,0));
    transition:color 0.2s ease, text-shadow 0.2s ease;
}

.contact-left a:hover{
    color:var(--hero-foreground, white);
    text-shadow:
        0 0 8px rgba(255,255,255,0.55),
        0 0 18px rgba(255,255,255,0.24);
}

nav{
    --contact-point:var(--nav-point);
    width:100%;
    background:var(--nav);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    min-height:var(--nav-layout-height);
    padding:0 var(--contact-point);
    font-size:var(--nav-point);
    z-index:999;
}

nav.is-fixed{
    position:fixed;
    top:0;
    left:0;
}

.nav-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    padding-inline:calc(var(--nav-side-width) + var(--contact-point) * 4);
}

[data-section-hidden]{
    display:none !important;
}

.nsfw-toggle,
.theme-toggle{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:calc(var(--contact-point) * 0.28);
    color:#777;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--nav-point) * 0.42);
    font-weight:700;
    letter-spacing:1px;
    line-height:1;
    text-transform:uppercase;
    transform-origin:center;
}

.theme-toggle{
    flex-direction:column;
    opacity:0.42;
    transition:opacity 0.2s ease;
}

.theme-toggle:hover{
    opacity:0.78;
}

.nsfw-toggle input,
.theme-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.nsfw-switch{
    width:calc(var(--contact-point) * 2.15);
    height:calc(var(--contact-point) * 1.05);
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.48);
    border-radius:999px;
    cursor:pointer;
    box-shadow:inset 0 0 calc(var(--contact-point) * 0.45) rgba(255,255,255,0.07);
    transition:border-color 0.25s ease, background 0.25s ease;
}

.nsfw-switch::before{
    content:"";
    position:absolute;
    top:50%;
    left:calc(var(--contact-point) * 0.12);
    width:calc(var(--contact-point) * 0.72);
    aspect-ratio:1;
    background:#666;
    border-radius:48% 52% 50% 50%;
    transform:translateY(-50%) scale(1);
    z-index:2;
    box-shadow:none;
    transition:
        left 0.34s cubic-bezier(0.18, 0.92, 0.18, 1),
        background 0.25s ease,
        transform 0.34s cubic-bezier(0.18, 0.92, 0.18, 1),
        border-radius 0.34s ease,
        box-shadow 0.2s ease;
}

.nsfw-switch::after{
    content:"";
    position:absolute;
    top:50%;
    left:calc(var(--contact-point) * 0.18);
    width:calc(var(--contact-point) * 0.65);
    height:calc(var(--contact-point) * 0.42);
    background:rgba(255,255,255,0.30);
    border-radius:999px;
    opacity:0;
    transform:translateY(-50%) scaleX(0.45);
    transform-origin:left center;
    z-index:1;
    filter:blur(0.5px);
}

.nsfw-toggle input:checked + .nsfw-switch{
    border-color:white;
    background:rgba(255,255,255,0.07);
}

.theme-toggle .nsfw-switch{
    background:rgba(255,255,255,0.025);
    border-color:rgba(255,255,255,0.28);
    box-shadow:inset 0 0 calc(var(--contact-point) * 0.45) rgba(255,255,255,0.04);
}

.theme-toggle .nsfw-switch::before{
    background:rgba(255,255,255,0.42);
}

.theme-toggle .nsfw-switch::after{
    background:rgba(255,255,255,0.18);
}

.nsfw-toggle input:checked + .nsfw-switch::before{
    left:calc(100% - var(--contact-point) * 0.84);
    background:white;
    border-radius:52% 48% 50% 50%;
    transform:translateY(-50%) scale(1.04);
    box-shadow:0 0 calc(var(--contact-point) * 0.32) rgba(255,255,255,0.28);
}

.nsfw-toggle input:checked + .nsfw-switch::after{
    animation:liquidTrailOn 0.40s cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

.nsfw-toggle input:not(:checked) + .nsfw-switch::after{
    animation:liquidTrailOff 0.40s cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

.theme-toggle input:checked + .nsfw-switch{
    border-color:rgba(255,255,255,0.78);
    background:rgba(255,255,255,0.08);
}

.theme-toggle input:checked + .nsfw-switch::before{
    left:calc(100% - var(--contact-point) * 0.84);
    background:white;
    border-radius:52% 48% 50% 50%;
    transform:translateY(-50%) scale(1.04);
    box-shadow:0 0 calc(var(--contact-point) * 0.32) rgba(255,255,255,0.28);
}

.theme-toggle input:checked + .nsfw-switch::after{
    background:rgba(255,255,255,0.30);
    animation:liquidTrailOn 0.40s cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

.theme-toggle input:not(:checked) + .nsfw-switch::after{
    animation:liquidTrailOff 0.40s cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

@keyframes liquidTrailOn{
    0%{
        left:calc(var(--contact-point) * 0.22);
        width:calc(var(--contact-point) * 0.42);
        opacity:0;
        transform:translateY(-50%) scaleX(0.2);
    }
    35%{
        left:calc(var(--contact-point) * 0.28);
        width:calc(var(--contact-point) * 1.45);
        opacity:0.72;
        transform:translateY(-50%) scaleX(1);
    }
    72%{
        left:calc(var(--contact-point) * 0.86);
        width:calc(var(--contact-point) * 0.82);
        opacity:0.28;
        transform:translateY(-50%) scaleX(0.72);
    }
    100%{
        left:calc(100% - var(--contact-point) * 0.86);
        width:calc(var(--contact-point) * 0.28);
        opacity:0;
        transform:translateY(-50%) scaleX(0.1);
    }
}

@keyframes liquidTrailOff{
    0%{
        left:calc(100% - var(--contact-point) * 0.56);
        width:calc(var(--contact-point) * 0.28);
        opacity:0;
        transform:translateY(-50%) scaleX(0.1);
        transform-origin:right center;
    }
    35%{
        left:calc(var(--contact-point) * 0.42);
        width:calc(var(--contact-point) * 1.45);
        opacity:0.58;
        transform:translateY(-50%) scaleX(1);
        transform-origin:right center;
    }
    72%{
        left:calc(var(--contact-point) * 0.26);
        width:calc(var(--contact-point) * 0.74);
        opacity:0.24;
        transform:translateY(-50%) scaleX(0.62);
        transform-origin:right center;
    }
    100%{
        left:calc(var(--contact-point) * 0.22);
        width:calc(var(--contact-point) * 0.28);
        opacity:0;
        transform:translateY(-50%) scaleX(0.1);
        transform-origin:right center;
    }
}

.nav-item{
    position:relative;
}

.nav-separator{
    margin:0 var(--contact-point);
    color:#666;
    line-height:1;
    user-select:none;
}

.nav-signature{
    width:var(--nav-side-width);
    height:calc(var(--nav-point) * 1.913 * var(--nav-signature-scale));
    position:absolute;
    top:50%;
    right:40px;
    display:flex;
    align-items:center;
    transform:translateY(-50%);
}

.nav-signature img{
    width:auto;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:contain;
}

.language-switcher{
    width:max-content;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--contact-point);
    flex:0 0 auto;
}

.language-switcher button{
    width:var(--nav-side-width);
    flex:0 0 var(--nav-side-width);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:calc(var(--contact-point) * 0.28);
    padding:0;
    border:0;
    letter-spacing:0;
    opacity:0.52;
    color:#777;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--nav-point) * 0.42);
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    transition:opacity 0.2s ease, color 0.2s ease;
}

.language-switcher img{
    width:100%;
    height:calc(var(--contact-point) * 1.05);
    display:block;
    object-fit:contain;
    pointer-events:none;
}

.language-switcher span{
    display:block;
    pointer-events:none;
}

.language-switcher button.active,
.language-switcher button:hover{
    opacity:1;
    color:white;
}

.nav-placeholder{
    display:none;
}

.nav-placeholder.active{
    display:block;
}

nav button{
    background:none;
    border:none;
    color:#666;
    font-size:1em;
    line-height:1;
    letter-spacing:4px;
    text-transform:uppercase;
    cursor:pointer;
    transition:color 0.2s;
}

.nav-control-panel{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
}

.nav-control-trigger{
    width:calc(var(--contact-point) * 1.18);
    height:calc(var(--contact-point) * 1.18);
    position:absolute;
    top:50%;
    left:var(--nav-control-trigger-left);
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,0.42);
    border-radius:50%;
    background:rgba(255,255,255,0.03);
    transform:translate(-50%, calc(-50% + var(--nav-control-axis-offset)));
    pointer-events:auto;
    opacity:0.68;
    transition:opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.nav-control-trigger:hover,
.nav-control-panel.is-open .nav-control-trigger{
    opacity:1;
    border-color:rgba(255,255,255,0.86);
    background:rgba(255,255,255,0.08);
}

.nav-control-trigger span{
    width:calc(var(--contact-point) * 0.16);
    aspect-ratio:1;
    display:block;
    border-radius:50%;
    background:rgba(255,255,255,0.84);
    box-shadow:
        calc(var(--contact-point) * -0.26) 0 rgba(255,255,255,0.84),
        calc(var(--contact-point) * 0.26) 0 rgba(255,255,255,0.84);
}

.nav-control-menu{
    width:max-content;
    max-width:calc(100vw - var(--nav-control-menu-left) - var(--contact-point));
    max-height:0;
    position:absolute;
    top:calc(var(--nav-height, 100%) - 1px);
    bottom:auto;
    left:var(--nav-control-menu-left);
    display:flex;
    flex-direction:column;
    gap:var(--contact-point);
    padding:0 calc(var(--contact-point) * 1.6);
    border:1px solid rgba(255,255,255,0.18);
    border-top:0;
    border-radius:0;
    background:#111;
    color:white;
    opacity:0;
    visibility:hidden;
    transform:translateY(0);
    transform-origin:top center;
    pointer-events:none;
    overflow:hidden;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 calc(var(--contact-point) * 1.25) calc(var(--contact-point) * 4) rgba(0,0,0,0.16);
    transition:
        max-height 0.46s cubic-bezier(0.16, 0.84, 0.22, 1),
        padding-top 0.46s cubic-bezier(0.16, 0.84, 0.22, 1),
        padding-bottom 0.46s cubic-bezier(0.16, 0.84, 0.22, 1),
        opacity 0.28s ease,
        visibility 0s linear 0.46s;
}


.nav-control-panel.opens-up > .nav-control-menu{
    top:auto;
    bottom:calc(var(--nav-height, 100%) - 1px);
    border-top:1px solid rgba(255,255,255,0.18);
    border-bottom:0;
    border-radius:0;
    transform-origin:bottom center;
}

nav .nav-control-panel.opens-up.is-open > .nav-control-menu{
    padding-top:calc(var(--contact-point) * 2);
    padding-bottom:calc(var(--contact-point) * 1.15);
}

nav .nav-control-panel.is-open > .nav-control-menu{
    max-height:var(--nav-control-open-height);
    padding-top:calc(var(--contact-point) * 1.15);
    padding-bottom:calc(var(--contact-point) * 2);
    opacity:1 !important;
    visibility:visible;
    transform:translateY(0) !important;
    pointer-events:auto;
    overflow-x:hidden;
    overflow-y:auto;
    transition-delay:0s;
}


.nav-control-menu .filter-divider{
    width:100%;
    height:1px;
    display:block;
    margin:calc(var(--contact-point) * 0.08) 0;
    background:rgba(255,255,255,0.52);
}

.nav-control-switches{
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    align-items:center;
    gap:calc(var(--contact-point) * 0.72);
}

.nav-control-menu .theme-toggle,
.nav-control-menu .nsfw-toggle{
    width:var(--nav-side-width);
    flex:0 0 auto;
    color:rgba(255,255,255,0.48);
    opacity:1;
    transform:none !important;
}

.nav-control-menu .language-switcher button{
    color:rgba(255,255,255,0.48);
    opacity:0.72;
}

.nav-control-menu .language-switcher button.active,
.nav-control-menu .language-switcher button:hover,
.nav-control-menu .theme-toggle:has(input:checked),
.nav-control-menu .nsfw-toggle:has(input:checked),
.nav-control-menu .theme-toggle:hover,
.nav-control-menu .nsfw-toggle:hover{
    color:white;
    opacity:1;
}

.nav-control-menu .nsfw-toggle input:not(:checked) + .nsfw-switch::before{
    background:rgba(255,255,255,0.42);
}

.filter-menu{
    width:var(--filter-menu-width, max-content);
    min-width:0;
    position:absolute;
    top:var(--filter-menu-top, 100%);
    left:50%;
    padding:var(--contact-point);
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    border-top:0;
    border-radius:0;
    box-shadow:0 18px 42px rgba(0,0,0,0.16);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.55);
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    transform:translate3d(-50%, 0, 0) scaleY(0.82);
    transform-origin:top center;
    isolation:isolate;
    backface-visibility:hidden;
    will-change:opacity, transform, max-height;
    pointer-events:none;
    transition:
        max-height 0.34s cubic-bezier(0.16, 0.88, 0.18, 1),
        opacity 0.22s ease,
        transform 0.34s cubic-bezier(0.16, 0.88, 0.18, 1),
        visibility 0s linear 0.34s;
    z-index:1000;
}

.filter-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    height:var(--filter-menu-top, 100%);
}

.nav-item.menu-open .filter-menu{
    max-height:calc(var(--contact-point) * 13);
    opacity:1;
    visibility:visible;
    transform:translate3d(-50%, 0, 0) scaleY(1);
    pointer-events:auto;
    transition-delay:0s;
}

.nav-item.menu-open .filter-menu:has(.gallery-timeline){
    max-height:min(calc(var(--contact-point) * 28), 78vh);
}

.filter-menu button{
    color:#242424;
    font-size:calc(var(--nav-point) * 0.52);
    line-height:1;
    letter-spacing:2px;
    text-align:left;
    white-space:nowrap;
    opacity:0.58;
    text-shadow:none;
}

.filter-menu button:hover,
.filter-menu button.active{
    color:#777;
    text-shadow:none;
    opacity:1;
}

.project-filter-list{
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.42);
    max-height:calc(var(--contact-point) * 7);
    overflow:auto;
    padding-right:calc(var(--contact-point) * 0.18);
}

.project-filter-list:empty{
    display:none;
}

.project-filter-list button{
    color:#242424;
    font-size:calc(var(--nav-point) * 0.44);
    opacity:0.58;
}

.project-filter-list button:hover,
.project-filter-list button.active{
    color:#777;
    opacity:1;
}

.project-filter-list button::before{
    content:"-";
    margin-right:calc(var(--contact-point) * 0.28);
}

.filter-divider{
    width:100%;
    height:1px;
    margin:calc(var(--contact-point) * 0.2) 0;
    background:rgba(0,0,0,0.18);
}

.social-float{
    --rotate-x:0deg;
    --rotate-y:0deg;
    --lift:0px;
    --social-float-top:50%;
    position:fixed;
    top:50%;
    right:0;
    bottom:auto;
    z-index:5;
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    gap:0;
    transform:
        translateY(-50%)
        perspective(900px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y))
        translateY(var(--lift))
        translateX(100%);
    transform-style:preserve-3d;
    opacity:0;
    pointer-events:none;
    transition:
        opacity 0.24s ease,
        transform 0.34s cubic-bezier(0.16, 0.88, 0.18, 1);
}

.social-float.is-nav-attached{
    top:50%;
    z-index:5;
    opacity:1;
    pointer-events:auto;
    transition-delay:0s;
    transform:
        translateY(-50%)
        perspective(900px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y))
        translateY(var(--lift))
        translateX(0);
}

.social-float-trigger{
    width:auto;
    min-width:0;
    min-height:0;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:white;
    opacity:0.92;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    cursor:pointer;
    transition:opacity 0.2s ease;
}

.social-float-trigger:hover,
.social-float.is-open .social-float-trigger{
    opacity:1;
    background:transparent;
}

.social-float-trigger span{
    display:block;
    padding:calc(var(--contact-point) * 0.42) calc(var(--contact-point) * 0.32);
    background:#51c4cb;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 1.05 - 2px);
    font-weight:700;
    line-height:1;
    letter-spacing:1px;
    text-transform:uppercase;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    white-space:nowrap;
}

.social-float-menu{
    width:calc(var(--contact-point) * 10.5);
    max-width:calc(100vw - var(--contact-point) * 5.2);
    max-height:0;
    align-self:flex-start;
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.55);
    padding:0 var(--contact-point);
    border:1px solid rgba(255,255,255,0.42);
    border-radius:0;
    background:rgba(81,196,203,0.58);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.16),
        inset 24px -24px 58px rgba(0,0,0,0.16),
        0 18px 42px rgba(0,0,0,0.22);
    backdrop-filter:blur(16px) saturate(1.18) contrast(1.05);
    -webkit-backdrop-filter:blur(16px) saturate(1.18) contrast(1.05);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(calc(var(--contact-point) * 0.45)) scaleX(0.9);
    transform-origin:right center;
    transition:
        max-height 0.34s cubic-bezier(0.16, 0.88, 0.18, 1),
        padding-top 0.34s cubic-bezier(0.16, 0.88, 0.18, 1),
        padding-bottom 0.34s cubic-bezier(0.16, 0.88, 0.18, 1),
        opacity 0.22s ease,
        transform 0.34s cubic-bezier(0.16, 0.88, 0.18, 1),
        visibility 0s linear 0.34s;
}

.social-float.is-open .social-float-menu{
    max-height:calc(var(--contact-point) * 7);
    padding-top:var(--contact-point);
    padding-bottom:var(--contact-point);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0) scaleX(1);
    transition-delay:0s;
}

.social-float-menu a{
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--nav-point) * 0.52);
    font-weight:700;
    line-height:1;
    letter-spacing:2px;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}

.social-float-menu a + a{
    padding-top:calc(var(--contact-point) * 0.55);
    border-top:1px solid rgba(255,255,255,0.62);
}

.social-float-menu a:hover{
    color:white;
    text-shadow:0 0 10px rgba(255,255,255,0.72);
}

.back-to-top{
    position:fixed;
    left:50%;
    bottom:calc(var(--contact-point) * 1.1);
    z-index:820;
    border:0;
    background:transparent;
    color:var(--text-muted);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.48);
    font-weight:900;
    letter-spacing:calc(var(--contact-point) * 0.22);
    line-height:1;
    text-transform:uppercase;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, calc(var(--contact-point) * 0.5));
    transition:
        color 0.24s ease,
        opacity 0.28s ease,
        transform 0.28s ease;
}

.back-to-top.is-visible{
    opacity:0.42;
    pointer-events:auto;
    transform:translate(-50%, 0);
}

.back-to-top:hover,
.back-to-top:focus-visible{
    color:var(--text-strong);
    opacity:1;
}

.gallery-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.36);
    padding-left:calc(var(--contact-point) * 0.92);
}

.gallery-timeline::before{
    content:"";
    position:absolute;
    top:calc(var(--contact-point) * 0.32);
    bottom:calc(var(--contact-point) * 0.32);
    left:calc(var(--contact-point) * 0.28);
    width:1px;
    background:rgba(0,0,0,0.24);
}

.gallery-timeline .timeline-year{
    position:relative;
    color:#242424;
    font-size:calc(var(--nav-point) * 0.46);
    letter-spacing:2px;
    opacity:0.58;
}

.gallery-timeline .timeline-year:hover,
.gallery-timeline .timeline-year.active{
    color:#777;
    opacity:1;
}

.gallery-timeline .timeline-year::before{
    content:"";
    position:absolute;
    top:50%;
    left:calc(var(--contact-point) * -0.76);
    width:calc(var(--contact-point) * 0.28);
    aspect-ratio:1;
    border:1px solid rgba(0,0,0,0.42);
    border-radius:50%;
    background:#fff;
    transform:translateY(-50%);
}

.gallery-timeline .timeline-year:hover::before,
.gallery-timeline .timeline-year.active::before{
    background:#111;
}

.section{
    position:relative;
    z-index:1;
    display:none;
    padding:calc(var(--contact-point) * 3) 40px 60px;
    background:#f4f4f4;
}

.section.showing-project-detail{
    position:relative;
    padding:
        calc(var(--contact-point) * 2.25)
        calc(40px + var(--contact-point))
        var(--contact-point)
        calc(40px + var(--contact-point));
}

.section.showing-project-detail::before{
    content:"";
    position:absolute;
    inset:var(--contact-point) 40px;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:0;
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045) 32%, rgba(0,0,0,0.11) 70%),
        rgba(28,28,30,0.135);
    backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    -webkit-backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.08),
        inset 24px -24px 58px rgba(0,0,0,0.18),
        0 18px 48px rgba(0,0,0,0.18);
    pointer-events:none;
}

.section.showing-project-detail.project-opening::before{
    animation:projectPanelOpen 0.58s cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

.section.active{
    display:block;
    min-height:calc(100vh - var(--nav-height));
}

.project-view-header{
    display:none;
}

.section.showing-project-detail .project-view-header{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:calc(var(--contact-point) * 1.5);
    color:#111;
}

.section.showing-project-detail.project-opening .project-view-header{
    animation:projectHeaderOpen 0.48s cubic-bezier(0.16, 0.88, 0.18, 1) 0.08s both;
}

.project-view-header h2{
    font-family:Georgia, "Times New Roman", serif;
    font-size:var(--gallery-title-size);
    font-style:italic;
    line-height:1.15;
}

.project-view-header p{
    margin-top:calc(var(--contact-point) * 0.25);
    color:#555;
    font-family:Arial, Helvetica, sans-serif;
    font-size:var(--gallery-subtitle-size);
    line-height:1.35;
}

.project-view-close{
    width:calc(var(--contact-point) * 1.1);
    aspect-ratio:1;
    border:0;
    background:none;
    color:#111;
    font-size:calc(var(--contact-point) * 1.35);
    font-weight:200;
    line-height:1;
    cursor:pointer;
}

.gallery{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-auto-rows:1px;
    grid-auto-flow:dense;
    gap:calc(var(--contact-point) * 0.18);
    align-items:start;
}

.section.showing-projects .gallery{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.gallery-item{
    --rotate-x:0deg;
    --rotate-y:0deg;
    --lift:0px;
    position:relative;
    margin-bottom:0;
    display:block;
    width:100%;
    text-align:center;
    cursor:pointer;
    transform:
        perspective(900px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y))
        translateY(var(--lift));
    transform-style:preserve-3d;
    will-change:transform;
}

.section.showing-project-detail.project-opening .gallery-item:not(.project-card){
    animation:projectItemOpen 0.46s cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

.section.showing-project-detail.project-opening .gallery-item:not(.project-card):nth-child(2n){
    animation-delay:0.04s;
}

.section.showing-project-detail.project-opening .gallery-item:not(.project-card):nth-child(3n){
    animation-delay:0.08s;
}

@keyframes projectPanelOpen{
    0%{
        opacity:0;
        transform:scaleX(0.94) scaleY(0.88);
        transform-origin:top center;
        filter:blur(2px);
    }
    100%{
        opacity:1;
        transform:scale(1);
        filter:blur(0);
    }
}

@keyframes projectHeaderOpen{
    0%{
        opacity:0;
        transform:translateY(calc(var(--contact-point) * -0.55));
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes projectItemOpen{
    0%{
        opacity:0;
        transform:
            perspective(900px)
            rotateX(0deg)
            rotateY(0deg)
            translateY(calc(var(--contact-point) * 0.65))
            scale(0.985);
    }
    100%{
        opacity:1;
        transform:
            perspective(900px)
            rotateX(var(--rotate-x))
            rotateY(var(--rotate-y))
            translateY(var(--lift))
            scale(1);
    }
}

.gallery-media{
    width:100%;
    max-width:100%;
    position:relative;
    display:block;
    margin:0 auto;
    line-height:0;
    overflow:hidden;
    border-radius:0;
}
.gallery-media::after,
.project-preview::after,
.hero-carousel::after,
.lightbox-stage::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:inherit;
    background:rgba(255,255,255,0.001);
    pointer-events:auto;
    transition-delay:0s;
}

.gallery-media::after{
    border-radius:0;
}
[data-protected-image]{
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    user-select:none;
}

.lightbox-stage::after{
    z-index:2;
}

.gallery img{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
    margin-bottom:0;
    background:white;
    border:0;
    border-radius:0;
    box-shadow:none;
    filter:grayscale(10%);
    object-fit:cover;
    transition:
        filter 0.25s,
        box-shadow 0.25s;
}

.gallery-item:hover img{
    filter:grayscale(0%);
    box-shadow:none;
}

body:not(.nsfw-visible-off) .gallery-item.is-nsfw img{
    filter:blur(32px) saturate(1.24) contrast(1.08) grayscale(8%) !important;
}

body:not(.nsfw-visible-off) .gallery-item.is-nsfw:hover img{
    filter:blur(32px) saturate(1.24) contrast(1.08) grayscale(0%) !important;
}


.gallery-nsfw{
    --nsfw-text-color:#050505;
    z-index:3;
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--contact-point);
    border-radius:0;
    overflow:hidden;
    isolation:isolate;
    background:rgba(255,255,255,0.16);
    backdrop-filter:blur(32px) saturate(1.24) contrast(1.08);
    -webkit-backdrop-filter:blur(32px) saturate(1.24) contrast(1.08);
    color:var(--nsfw-text-color);
    text-align:center;
    pointer-events:none;
    transition:opacity 0.2s ease;
}

body.nsfw-visible-off .gallery-nsfw{
    opacity:0;
}

.gallery-nsfw-content{
    position:relative;
    z-index:1;
    line-height:1.35;
}

.gallery-nsfw strong{
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 1.2);
    font-weight:900;
    line-height:1;
    letter-spacing:2px;
}

.gallery-nsfw span{
    display:block;
    margin-top:calc(var(--contact-point) * 0.45);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.55);
    line-height:1.35;
    text-transform:uppercase;
}

.lightbox-nsfw::before{
    content:"";
    position:absolute;
    inset:calc(var(--contact-point) * -1);
    z-index:-1;
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.30), rgba(255,255,255,0.08) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08) 32%, rgba(0,0,0,0.12) 70%),
        rgba(255,255,255,0.16);
    backdrop-filter:blur(32px) saturate(1.24) contrast(1.08);
    -webkit-backdrop-filter:blur(32px) saturate(1.24) contrast(1.08);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.16),
        inset 24px -24px 58px rgba(0,0,0,0.16);
}

.gallery-caption{
    position:absolute;
    left:0;
    bottom:0;
    z-index:4;
    width:66%;
    max-width:100%;
    margin:0;
    padding:calc(var(--contact-point) * 0.62) calc(var(--contact-point) * 0.72);
    color:var(--adaptive-text-primary, #111);
    text-align:left;
    opacity:0;
    transform:translateY(calc(var(--contact-point) * 0.55));
    border-top-right-radius:0;
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.144), rgba(255,255,255,0.032) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.144), rgba(255,255,255,0.048) 32%, rgba(0,0,0,0.064) 70%),
        rgba(255,255,255,0.128);
    backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    -webkit-backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.096),
        inset 24px -24px 58px rgba(0,0,0,0.096);
    mask-image:linear-gradient(to right, rgba(0,0,0,1) 0, rgba(0,0,0,1) 64%, rgba(0,0,0,0) 100%);
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,1) 0, rgba(0,0,0,1) 64%, rgba(0,0,0,0) 100%);
    pointer-events:none;
    transition:opacity 0.24s ease, transform 0.24s ease;
}

.gallery-item:hover .gallery-caption{
    opacity:1;
    transform:translateY(0);
}

.gallery-caption h3{
    width:100%;
    overflow:hidden;
    color:var(--adaptive-text-primary, #111);
    font-family:Georgia, "Times New Roman", serif;
    font-size:calc(var(--gallery-title-size) * 0.9);
    font-style:italic;
    font-weight:700;
    line-height:1.15;
    opacity:0.8;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 5px var(--adaptive-text-shadow, transparent);
    transition:color 0.25s ease, text-shadow 0.25s ease;
}

.gallery-caption p{
    width:100%;
    overflow:hidden;
    margin-top:calc(var(--contact-point) * 0.18);
    color:var(--adaptive-text-secondary, #555);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--gallery-subtitle-size) * 0.9);
    line-height:1.25;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 5px var(--adaptive-text-shadow, transparent);
    transition:color 0.25s ease, text-shadow 0.25s ease;
}

.project-card{
    cursor:pointer;
}

.project-preview{
    width:100%;
    aspect-ratio:1 / 1;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(0,0,0,0.14);
    border-radius:0;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,0.16);
    transition:border-color 0.34s ease, box-shadow 0.34s ease;
}

.gallery-empty{
    grid-column:1 / -1;
    min-height:clamp(180px, 32vh, 360px);
    display:grid;
    place-items:center;
    color:rgba(15,15,15,0.55);
    font-size:var(--nav-font-size);
    letter-spacing:var(--nav-letter-spacing);
    text-transform:uppercase;
}

body.theme-dark .gallery-empty{
    color:rgba(255,255,255,0.62);
}

.project-card:hover .project-preview{
    border-color:rgba(0,0,0,0.28);
    box-shadow:0 16px 34px rgba(0,0,0,0.24);
}

.project-thumbnails{
    height:75%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(0, 1fr));
    gap:1px;
    background:rgba(255,255,255,0.16);
    overflow:hidden;
}

.project-thumbnails img{
    width:100%;
    height:100%;
    display:block;
    border:0;
    border-radius:0;
    margin:0;
    object-fit:cover;
    object-position:center;
    filter:grayscale(10%);
    box-shadow:none;
}

.project-card:hover .project-thumbnails img{
    filter:grayscale(0%);
    box-shadow:none;
}

.project-thumbnails.is-empty{
    background:linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.08));
}

.project-glass{
    position:absolute;
    left:0;
    right:0;
    top:75%;
    bottom:0;
    border-top:1px solid rgba(0,0,0,0.14);
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:calc(var(--contact-point) * 0.7) calc(var(--contact-point) * 2.2) calc(var(--contact-point) * 0.7) var(--contact-point);
    text-align:left;
}

.project-glass::after{
    content:"→";
    position:absolute;
    top:50%;
    right:var(--contact-point);
    color:rgba(17,17,17,0.48);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--gallery-title-size) * 0.82);
    line-height:1;
    transform:translateY(-50%);
    transition:color 0.3s ease, transform 0.3s ease;
}

.project-card:hover .project-glass::after{
    color:#111;
    transform:translate(3px, -50%);
}

.project-glass h3{
    width:100%;
    max-width:100%;
    color:#111;
    font-family:Georgia, "Times New Roman", serif;
    font-size:var(--gallery-title-size);
    font-style:italic;
    font-weight:700;
    line-height:1.15;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.project-glass p{
    margin-top:calc(var(--contact-point) * 0.35);
    color:#4a4a4a;
    font-family:Arial, Helvetica, sans-serif;
    font-size:var(--gallery-subtitle-size);
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.gallery img.format-vertical{
    aspect-ratio:3 / 4;
}

.gallery img.format-horizontal{
    aspect-ratio:16 / 9;
}

.gallery img.format-square{
    aspect-ratio:1 / 1;
}

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(8,8,8,0.92);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:99999;
    overflow:hidden;
    padding:var(--lightbox-top-space, var(--contact-point)) 0 calc(var(--contact-point) * 0.85);
}

.lightbox img{
    max-width:var(--lightbox-image-max-width, 90vw);
    max-height:var(--lightbox-image-max-height, 72vh);
    display:block;
    transform-origin:center;
    transition:transform 0.1s;
    pointer-events:none;
}

.lightbox.is-dragging img{
    transition:none;
}

.lightbox-stage{
    width:fit-content;
    max-width:var(--lightbox-image-max-width, 90vw);
    max-height:var(--lightbox-image-max-height, 72vh);
    position:relative;
    display:block;
    line-height:0;
    overflow:hidden;
    cursor:zoom-in;
    touch-action:none;
    user-select:none;
}

.lightbox.is-zoomed .lightbox-stage{
    cursor:zoom-out;
}

.lightbox.is-dragging .lightbox-stage{
    cursor:grabbing;
}

.lightbox-caption{
    width:var(--lightbox-caption-width, calc(100vw - var(--contact-point) * 2));
    max-width:var(--lightbox-caption-width, calc(100vw - var(--contact-point) * 2));
    display:block;
    margin:calc(var(--contact-point) * 0.65) auto 0;
    text-align:center;
    color:white;
}

.lightbox-caption-text{
    min-width:0;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.lightbox-caption h3{
    width:100%;
    margin:0;
    text-align:center;
    font-family:Georgia, "Times New Roman", serif;
    font-size:var(--gallery-title-size);
    font-style:italic;
    line-height:1.15;
    color:rgba(255,255,255,0.88);
}

.lightbox-caption p{
    width:100%;
    margin:calc(var(--contact-point) * 0.25) 0 0;
    text-align:center;
    color:rgba(255,255,255,0.68);
    font-size:var(--gallery-subtitle-size);
    line-height:1.35;
}

.lightbox-arrow{
    width:calc(var(--contact-point) * 0.8);
    aspect-ratio:1;
    border:none;
    padding:0;
    background:none;
    position:fixed;
    top:50%;
    cursor:pointer;
    transform:translateY(-50%);
}

.lightbox-arrow.prev{
    left:calc(var(--contact-point) * 2);
}

.lightbox-arrow.next{
    right:calc(var(--contact-point) * 2);
}

.lightbox-arrow::before{
    content:"";
    position:absolute;
    inset:0;
    border-top:2px solid rgba(255,255,255,0.78);
    border-left:2px solid rgba(255,255,255,0.78);
}

.lightbox-arrow.prev::before{
    transform:rotate(-45deg);
}

.lightbox-arrow.next::before{
    transform:rotate(135deg);
}


.lightbox-nsfw{
    --nsfw-text-color:#050505;
    z-index:3;
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:var(--contact-point);
    overflow:hidden;
    isolation:isolate;
    background:transparent;
    color:var(--nsfw-text-color);
    text-align:center;
    cursor:pointer;
    line-height:1.35;
}

.lightbox-nsfw.visible{
    display:flex;
}

.lightbox-nsfw > div{
    position:relative;
    z-index:1;
    line-height:1.35;
}

.lightbox-nsfw strong{
    display:block;
    font-size:calc(var(--contact-point) * 1.4);
    font-weight:900;
    letter-spacing:2px;
    line-height:1;
}

.lightbox-nsfw span{
    display:block;
    margin-top:calc(var(--contact-point) * 0.45);
    font-size:calc(var(--contact-point) * 0.65);
    line-height:1.35;
    text-transform:uppercase;
}

body.theme-dark{
    --bg:#0f0f0f;
    --text:#ededed;
    --muted:#c8c8c8;
}

body.theme-dark .section{
    background:#525252;
}

body.theme-dark .section.showing-project-detail::before{
    border-color:rgba(255,255,255,0.28);
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.18), rgba(255,255,255,0.06) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06) 32%, rgba(0,0,0,0.20) 70%),
        rgba(72,72,72,0.36);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.08),
        inset 24px -24px 58px rgba(0,0,0,0.24),
        0 18px 48px rgba(0,0,0,0.24);
}

body.theme-dark .project-view-header h2,
body.theme-dark .project-view-close{
    color:#f2f2f2;
}

body.theme-dark .project-view-header p{
    color:#dedede;
}

body.theme-dark .gallery img{
    box-shadow:0 14px 34px rgba(0,0,0,0.36);
}

body.theme-dark .gallery-item:hover img{
    box-shadow:0 20px 42px rgba(0,0,0,0.48);
}

body.theme-dark .project-preview{
    border-color:rgba(255,255,255,0.20);
    background:#181818;
    box-shadow:0 12px 28px rgba(0,0,0,0.42);
}

body.theme-dark .project-thumbnails{
    background:rgba(0,0,0,0.16);
}

body.theme-dark .project-glass{
    border-top-color:rgba(255,255,255,0.18);
    background:#181818;
}

body.theme-dark .project-glass h3{
    color:#f2f2f2;
}

body.theme-dark .project-glass p{
    color:#bdbdbd;
}

body.theme-dark .project-glass::after{
    color:rgba(255,255,255,0.48);
}

body.theme-dark .project-card:hover .project-preview{
    border-color:rgba(255,255,255,0.36);
    box-shadow:0 18px 38px rgba(0,0,0,0.54);
}

body.theme-dark .project-card:hover .project-glass::after{
    color:#fff;
}

body.theme-dark .lightbox{
    background:rgba(8,8,8,0.92);
}

body.theme-dark .lightbox-caption,
body.theme-dark .lightbox-caption h3{
    color:rgba(255,255,255,0.88);
}

body.theme-dark .lightbox-caption p{
    color:rgba(255,255,255,0.68);
}

body.theme-dark .lightbox-arrow::before{
    border-color:#e8e8e8;
}

.close{
    width:calc(var(--contact-point) * 0.9);
    height:calc(var(--contact-point) * 0.9);
    position:absolute;
    top:calc(var(--contact-point) * 1.25);
    right:calc(var(--contact-point) * 2.25);
    display:grid;
    place-items:center;
    border:0;
    background:none;
    font-size:calc(var(--contact-point) * 0.9);
    font-weight:200;
    line-height:1;
    color:#fff;
    cursor:pointer;
    user-select:none;
    z-index:6;
}



body.nsfw-notice-open > :not(.nsfw-notice){
    filter:blur(12px) saturate(1.04) contrast(1.01);
    transition:filter 0.24s ease;
}

body.nsfw-notice-open{
    overflow:hidden;
}
.nsfw-notice{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:calc(var(--contact-point) * 0.45) var(--contact-point);
    background:rgba(0,0,0,0.08);
    backdrop-filter:blur(12px) saturate(1.04) contrast(1.01);
    -webkit-backdrop-filter:blur(12px) saturate(1.04) contrast(1.01);
}

.nsfw-notice.is-open{
    display:flex;
}

.nsfw-notice-panel{
    width:min(88vw, calc(var(--contact-point) * 28));
    position:relative;
    padding:calc(var(--contact-point) * 1.15);
    border:1px solid rgba(0,0,0,0.08);
    border-radius:0;
    background:#fff;
    color:#111;
    text-align:center;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 calc(var(--contact-point) * 0.85) calc(var(--contact-point) * 3.2) rgba(0,0,0,0.16);
}

.nsfw-notice-languages{
    position:absolute;
    top:calc(var(--contact-point) * 0.65);
    right:calc(var(--contact-point) * 0.65);
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.26);
}

.nsfw-notice-language{
    width:calc(var(--contact-point) * 1.35);
    height:calc(var(--contact-point) * 0.88);
    padding:calc(var(--contact-point) * 0.08);
    border:1px solid transparent;
    background:transparent;
    opacity:0.42;
    cursor:pointer;
    transition:opacity 0.18s ease, border-color 0.18s ease;
}

.nsfw-notice-language img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    pointer-events:none;
}

.nsfw-notice-language:hover,
.nsfw-notice-language:focus-visible,
.nsfw-notice-language.active{
    border-color:rgba(0,0,0,0.32);
    opacity:1;
}

.nsfw-notice-panel h2{
    margin:0 0 calc(var(--contact-point) * 0.65);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.72);
    font-weight:900;
    letter-spacing:3px;
    line-height:1.25;
    text-transform:uppercase;
}

.nsfw-notice-panel p{
    margin:0 auto calc(var(--contact-point) * 0.58);
    max-width:calc(var(--contact-point) * 23);
    color:rgba(0,0,0,0.72);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.52);
    line-height:1.52;
    letter-spacing:0.8px;
}

.nsfw-notice-panel small{
    display:block;
    margin:0 auto calc(var(--contact-point) * 0.85);
    max-width:calc(var(--contact-point) * 21);
    color:rgba(0,0,0,0.48);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.42);
    line-height:1.45;
    letter-spacing:0.6px;
}

.nsfw-notice-actions{
    display:flex;
    justify-content:center;
}

.nsfw-notice-switch{
    width:min(100%, calc(var(--contact-point) * 12.5));
    min-height:calc(var(--contact-point) * 2.9);
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    border:1px solid rgba(0,0,0,0.18);
    border-radius:999px;
    background:#fff;
    color:#111;
    cursor:pointer;
    isolation:isolate;
    box-shadow:0 calc(var(--contact-point) * 0.38) calc(var(--contact-point) * 1.5) rgba(0,0,0,0.10);
    transition:border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.nsfw-notice-switch:hover{
    border-color:rgba(0,0,0,0.42);
    background:#fff;
    transform:translateY(-1px);
}

.nsfw-notice-switch-thumb{
    position:absolute;
    top:50%;
    left:calc(var(--contact-point) * 0.38);
    z-index:0;
    width:calc(50% - var(--contact-point) * 0.5);
    height:calc(100% - var(--contact-point) * 0.58);
    border-radius:999px;
    background:rgba(0,0,0,0.10);
    transform:translateY(-50%);
    box-shadow:none;
    transition:left 0.32s cubic-bezier(0.16, 0.88, 0.18, 1), background 0.22s ease;
}

.nsfw-notice-switch.is-on .nsfw-notice-switch-thumb{
    left:calc(50% + var(--contact-point) * 0.12);
    background:rgba(0,0,0,0.18);
}

.nsfw-notice-option{
    position:relative;
    z-index:1;
    min-height:calc(var(--contact-point) * 2.9);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:calc(var(--contact-point) * 0.18);
    font-family:Arial, Helvetica, sans-serif;
    pointer-events:none;
    user-select:none;
}

.nsfw-notice-option strong{
    font-size:calc(var(--contact-point) * 1.05);
    font-weight:900;
    line-height:1;
    letter-spacing:0;
}

.nsfw-notice-option em{
    font-size:calc(var(--contact-point) * 0.42);
    font-style:normal;
    font-weight:900;
    line-height:1;
    letter-spacing:2px;
}

.nsfw-notice-option-off{
    color:rgba(0,0,0,0.38);
}

.nsfw-notice-option-on{
    color:#111;
}

.nsfw-notice-switch:not(.is-on) .nsfw-notice-option-off{
    color:#111;
}

.nsfw-notice-switch:not(.is-on) .nsfw-notice-option-on{
    color:rgba(0,0,0,0.38);
}

@media(max-width:640px){
    .nsfw-notice-panel{
        padding-top:calc(var(--contact-point) * 3.2);
    }

    .nsfw-notice-languages{
        top:calc(var(--contact-point) * 0.7);
        right:calc(var(--contact-point) * 0.7);
    }

    .nsfw-notice-language{
        width:calc(var(--contact-point) * 1.7);
        height:calc(var(--contact-point) * 1.05);
    }

    .nsfw-notice-switch{
        width:min(100%, calc(var(--contact-point) * 16));
        min-height:calc(var(--contact-point) * 4);
    }
}

/* Popup module */
.popup{
    position:fixed;
    inset:0;
    z-index:99998;
    display:none;
    align-items:center;
    justify-content:center;
    padding:var(--contact-point);
    background:rgba(0,0,0,0.24);
}

.popup.is-open{
    display:flex;
}

.popup-panel{
    width:min(92vw, calc(var(--contact-point) * 20));
    position:relative;
    padding:calc(var(--contact-point) * 1.25);
    border:1px solid rgba(255,255,255,0.32);
    border-radius:10px;
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045) 32%, rgba(0,0,0,0.11) 70%),
        rgba(28,28,30,0.135);
    backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    -webkit-backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.08),
        inset 24px -24px 58px rgba(0,0,0,0.18),
        0 24px 60px rgba(0,0,0,0.28);
    transition:
        background 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease;
}

.popup-panel.is-error{
    border-color:rgba(255,80,80,0.72);
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,120,120,0.18), rgba(255,255,255,0.045) 32%, rgba(120,0,0,0.18) 70%),
        rgba(120,12,12,0.28);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.08),
        inset 24px -24px 58px rgba(80,0,0,0.24),
        0 24px 60px rgba(120,0,0,0.30);
}

.popup-empty .popup-panel{
    width:min(94vw, calc(var(--contact-point) * 42));
    min-height:calc(var(--contact-point) * 24);
}

.popup-browser{
    display:flex;
    flex-direction:column;
    gap:var(--contact-point);
    min-height:calc(var(--contact-point) * 21);
    padding-top:calc(var(--contact-point) * 1.4);
}

.popup-browser-toolbar{
    display:flex;
    align-items:center;
    gap:calc(var(--contact-point) * 0.7);
}

.popup-browser-toolbar button{
    min-height:calc(var(--contact-point) * 1.6);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:8px;
    background:rgba(17,17,17,0.52);
    color:white;
    padding:0 calc(var(--contact-point) * 0.7);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.5);
    font-weight:700;
    letter-spacing:1px;
    cursor:pointer;
}

.popup-browser-toolbar button:disabled{
    opacity:0.35;
    cursor:not-allowed;
}

.popup-browser-toolbar [data-popup-upload-status]{
    flex:1;
}

.popup-browser-toolbar .popup-select-visible{
    width:calc(var(--contact-point) * 1.6);
    min-width:calc(var(--contact-point) * 1.6);
    padding:0;
    border-radius:50%;
    font-size:calc(var(--contact-point) * 0.75);
}

.popup-browser-toolbar .popup-select-visible.is-active{
    background:rgba(255,255,255,0.88);
    color:#111;
}

.popup-browser-toolbar span{
    color:rgba(255,255,255,0.68);
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.5);
    line-height:1.2;
}

.popup-browser-path{
    min-height:calc(var(--contact-point) * 1.6);
    padding:calc(var(--contact-point) * 0.45) calc(var(--contact-point) * 0.7);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:8px;
    background:rgba(17,17,17,0.40);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.55);
    font-weight:700;
    letter-spacing:1px;
    line-height:1.25;
    text-transform:uppercase;
}

.popup-browser-content{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(calc(var(--contact-point) * 6), 1fr));
    gap:calc(var(--contact-point) * 0.75);
    max-height:calc(82vh - var(--contact-point) * 9);
    overflow:auto;
    padding-right:calc(var(--contact-point) * 0.25);
}

.popup-browser-item{
    min-height:calc(var(--contact-point) * 5.6);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:calc(var(--contact-point) * 1.45);
    padding:calc(var(--contact-point) * 0.65);
    border:1px solid rgba(255,255,255,0.24);
    border-radius:8px;
    background:rgba(17,17,17,0.42);
    color:white;
    cursor:pointer;
    text-align:center;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.24s ease;
}

.popup-browser-item.is-selected{
    background:rgba(255,255,255,0.20);
    border-color:rgba(255,255,255,0.9);
    box-shadow:0 0 0 1px rgba(255,255,255,0.34);
}

.popup-browser-check{
    position:absolute;
    top:calc(var(--contact-point) * 0.35);
    right:calc(var(--contact-point) * 0.35);
    width:calc(var(--contact-point) * 0.95);
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,0.52);
    border-radius:50%;
    color:transparent;
    font-size:calc(var(--contact-point) * 0.52);
    font-weight:900;
    line-height:1;
    pointer-events:none;
}

.popup-browser-item.is-selected .popup-browser-check{
    background:white;
    color:#111;
    border-color:white;
}

.popup-browser-item:hover{
    background:rgba(255,255,255,0.13);
    border-color:rgba(255,255,255,0.54);
    transform:translateY(-2px);
}

.popup-browser-item.is-drop-target,
.popup-browser-content.is-drop-target{
    background:rgba(255,255,255,0.16);
    outline:1px dashed rgba(255,255,255,0.78);
    outline-offset:calc(var(--contact-point) * -0.25);
}

.popup-browser-icon{
    width:calc(var(--contact-point) * 2.3);
    aspect-ratio:1.28;
    position:relative;
    border:1px solid rgba(255,255,255,0.58);
    border-radius:6px;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0.06)),
        rgba(17,17,17,0.42);
}

.popup-browser-icon::before{
    content:"";
    position:absolute;
    left:12%;
    top:-18%;
    width:42%;
    height:30%;
    border:1px solid rgba(255,255,255,0.58);
    border-bottom:0;
    border-radius:5px 5px 0 0;
    background:rgba(17,17,17,0.62);
}

.popup-browser-thumb{
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:7px;
    background:rgba(0,0,0,0.25);
}

.popup-browser-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.popup-browser-name{
    max-width:100%;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.55);
    font-weight:700;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.popup-browser-meta{
    color:rgba(255,255,255,0.68);
    font-size:calc(var(--contact-point) * 0.45);
    line-height:1.2;
}

.popup-browser-back{
    border-style:dashed;
}

.popup-file-editor,
.popup-folder-editor,
.popup-upload-intake{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:var(--contact-point);
    background:rgba(0,0,0,0.18);
}

.popup-file-editor.is-open,
.popup-folder-editor.is-open,
.popup-upload-intake.is-open,
.popup-upload-review.is-open{
    display:flex;
}

.popup-file-editor-panel{
    width:min(90%, calc(var(--contact-point) * 24));
    position:relative;
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.75);
    padding:calc(var(--contact-point) * 1.35);
    border:1px solid rgba(255,255,255,0.32);
    border-radius:10px;
    background:
        radial-gradient(circle at 82% 10%, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 24%, transparent 46%),
        linear-gradient(142deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045) 32%, rgba(0,0,0,0.11) 70%),
        rgba(28,28,30,0.22);
    backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    -webkit-backdrop-filter:blur(16px) saturate(1.12) contrast(1.04);
    box-shadow:
        inset -36px 32px 68px rgba(255,255,255,0.08),
        inset 24px -24px 58px rgba(0,0,0,0.18),
        0 24px 60px rgba(0,0,0,0.28);
}

.popup-file-editor label,
.popup-folder-editor label{
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.3);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.55);
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.popup-file-editor input[type="text"],
.popup-folder-editor input[type="text"]{
    width:100%;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:8px;
    padding:calc(var(--contact-point) * 0.45) calc(var(--contact-point) * 0.6);
    background:rgba(17,17,17,0.48);
    color:white;
    font:inherit;
    text-transform:none;
}

.popup-file-check{
    flex-direction:row !important;
    align-items:center;
}

.popup-file-check input{
    width:calc(var(--contact-point) * 0.8);
    aspect-ratio:1;
}

.popup-file-preview{
    padding:calc(var(--contact-point) * 0.6);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:8px;
    background:rgba(17,17,17,0.38);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
}

.popup-file-preview span{
    display:block;
    margin-bottom:calc(var(--contact-point) * 0.25);
    color:rgba(255,255,255,0.62);
    font-size:calc(var(--contact-point) * 0.45);
    font-weight:700;
    letter-spacing:1px;
}

.popup-file-preview strong{
    display:block;
    font-size:calc(var(--contact-point) * 0.55);
    line-height:1.35;
    overflow-wrap:anywhere;
}

.popup-upload-review{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:var(--contact-point);
    background:rgba(0,0,0,0.18);
}

.popup-upload-review-panel{
    width:min(92%, calc(var(--contact-point) * 32));
}

.popup-upload-list{
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.55);
    max-height:calc(var(--contact-point) * 18);
    overflow:auto;
}

.popup-upload-row{
    display:grid;
    grid-template-columns:1fr auto minmax(calc(var(--contact-point) * 7), 0.8fr);
    gap:calc(var(--contact-point) * 0.55);
    align-items:center;
    padding:calc(var(--contact-point) * 0.55);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:8px;
    background:rgba(17,17,17,0.38);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
}

.popup-upload-row strong{
    font-size:calc(var(--contact-point) * 0.52);
    line-height:1.25;
    overflow-wrap:anywhere;
}

.popup-upload-row label{
    display:flex;
    align-items:center;
    gap:calc(var(--contact-point) * 0.3);
    font-size:calc(var(--contact-point) * 0.48);
    font-weight:700;
}

.popup-upload-row input[type="text"]{
    min-width:0;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:8px;
    padding:calc(var(--contact-point) * 0.35) calc(var(--contact-point) * 0.45);
    background:rgba(17,17,17,0.48);
    color:white;
    font-size:calc(var(--contact-point) * 0.48);
}

.popup-delete-row{
    grid-template-columns:1fr;
}

.popup-delete-row span{
    color:rgba(255,255,255,0.66);
    font-size:calc(var(--contact-point) * 0.46);
    line-height:1.25;
    overflow-wrap:anywhere;
}

.popup-close{
    position:absolute;
    top:calc(var(--contact-point) * 0.55);
    right:calc(var(--contact-point) * 0.65);
    border:0;
    background:none;
    color:white;
    font-size:calc(var(--contact-point) * 1.15);
    font-weight:200;
    line-height:1;
    cursor:pointer;
}

.popup-view{
    display:none;
}

.popup-view.active{
    display:block;
}

.popup-message{
    margin:calc(var(--contact-point) * 0.5) calc(var(--contact-point) * 1.5) var(--contact-point);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.62);
    font-weight:700;
    line-height:1.25;
    letter-spacing:2px;
    text-align:center;
    text-transform:uppercase;
}

.popup-display{
    min-height:calc(var(--contact-point) * 1.6);
    margin:calc(var(--contact-point) * 0.55) calc(var(--contact-point) * 1.5) var(--contact-point);
    border-bottom:1px solid rgba(255,255,255,0.35);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.9);
    font-weight:700;
    line-height:1.6;
    letter-spacing:2px;
    text-align:center;
}

.popup-keypad{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:calc(var(--contact-point) * 0.55);
}

.popup-keypad button,
.popup-actions button{
    min-height:calc(var(--contact-point) * 2);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:8px;
    background:rgba(17,17,17,0.52);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:calc(var(--contact-point) * 0.75);
    font-weight:700;
    letter-spacing:2px;
    cursor:pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.popup-keypad button:hover,
.popup-actions button:hover{
    background:rgba(255,255,255,0.16);
    border-color:rgba(255,255,255,0.58);
    transform:translateY(-1px);
}

.popup-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
    gap:calc(var(--contact-point) * 0.55);
    margin-top:var(--contact-point);
}

@media(max-width:980px){
    .hero{
        height:auto;
        min-height:auto;
        padding-top:20px;
    }

    .hero-content{
        display:contents;
    }

    .main-title{
        order:1;
        top:0;
        max-width:100%;
        overflow:hidden;
    }

    .main-title h1{
        font-size:clamp(52px, 10vw, 92px);
        letter-spacing:clamp(6px, 1.4vw, 12px);
        white-space:nowrap;
    }

    .main-title h1 span:first-child,
    .main-title h1 span:last-child{
        margin-left:0;
    }

    .hero-carousel{
        order:2;
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        width:100%;
        height:clamp(110px, 20vw, 170px);
        margin-top:calc(var(--contact-point) * 3.25);
    }

    .portfolio-bar{
        order:3;
        margin-top:calc(var(--contact-point) * 3.25);
    }

    .hero-intro{
        order:4;
    }

    .hero-contact-zone{
        order:5;
    }
}

@media(max-width:640px){
    :root{
        --contact-point:clamp(12px, 3.15vw, 15px);
        --nav-point:clamp(11px, calc(3.25vw - 2px), 14px);
        --nav-signature-scale:1.475;
    }

    .hero{
        height:auto;
        min-height:auto;
        padding:18px 20px 0;
    }

    .main-title{
        top:0;
        line-height:0.9;
        max-width:100%;
        overflow:hidden;
    }

    .main-title h1{
        font-size:clamp(42px, 13vw, 58px);
        letter-spacing:clamp(4px, 1.2vw, 6px);
        white-space:nowrap;
    }

    .main-title h1 span:first-child{
        margin-left:0;
    }

    .main-title h1 span:last-child{
        margin-left:0;
    }

    .portfolio-bar{
        margin-top:calc(var(--contact-point) * 3.2);
        width:100vw;
        margin-left:-20px;
    }

    .portfolio-bar h2{
        padding:calc(var(--contact-point) * 1.15) 20px;
        text-align:center;
        letter-spacing:6px;
        font-size:clamp(14px, 3.5vw, 18px);
    }

    .hero-carousel{
        position:relative;
        top:auto;
        left:20px;
        right:20px;
        width:calc(100% - 40px);
        height:clamp(92px, 27vw, 128px);
        margin-top:var(--contact-point);
        min-height:0;
    }

    .hero-carousel-card{
        width:62%;
        padding:calc(var(--contact-point) * 0.38) calc(var(--contact-point) * 0.45);
    }

    .hero-carousel-card strong{
        font-size:calc(var(--gallery-title-size) * 0.46);
    }

    .hero-carousel-card span{
        font-size:calc(var(--gallery-subtitle-size) * 0.46);
    }

    .hero-intro{
        width:100%;
        margin-top:calc(var(--contact-point) * 1.35);
        gap:calc(var(--contact-point) * 1.45);
    }

    .hero-intro p{
        font-size:clamp(13px, calc(2.15vw + 4px), 15px);
        line-height:calc(1.45em + var(--contact-point));
        letter-spacing:2.4px;
        max-width:100%;
    }

    .hero-intro img{
        width:calc(var(--contact-point) * 4.2);
        max-width:22vw;
    }

    .hero-contact-zone{
        margin-top:calc(var(--contact-point) * 0.45);
    }

    nav{
        min-height:calc(var(--nav-point) * 5.9);
        padding:calc(var(--nav-point) * 0.58) var(--nav-point);
    }

    .nav-links{
        width:auto;
        max-width:none;
        position:absolute;
        top:50%;
        left:28%;
        right:28%;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:space-between;
        padding-inline:0;
        line-height:1;
        transform:translateY(-50%);
    }

    .nav-separator{
        display:none;
    }

    .nav-signature{
        width:calc(var(--nav-point) * 2.5);
        height:calc(var(--nav-point) * 2.5);
        right:var(--nav-point);
        justify-content:center;
    }

    .nav-signature img{
        max-width:100%;
        max-height:100%;
    }

    .nav-control-trigger{
        width:calc(var(--nav-point) * 2);
        height:calc(var(--nav-point) * 2);
    }

    nav button{
        font-size:var(--nav-point);
        letter-spacing:2px;
        line-height:1;
    }

    .section-tab{
        width:calc(var(--nav-point) * 2);
        aspect-ratio:1;
        padding:0;
    }

    .section-tab-label{
        display:none;
    }

    .section-tab-icon{
        width:100%;
        height:100%;
        display:block;
        object-fit:contain;
        filter:invert(1);
        opacity:0.52;
        pointer-events:none;
        transition:opacity 0.2s ease;
    }

    .section-tab.active .section-tab-icon,
    .section-tab:hover .section-tab-icon{
        opacity:1;
    }

    .section{
        padding:calc(var(--contact-point) * 3) 20px 30px;
    }

    .gallery{
        grid-template-columns:1fr;
    }

    .section.showing-projects .gallery{
        grid-template-columns:1fr;
    }

    .project-card{
        width:100%;
    }

    .project-preview{
        width:100%;
        min-height:0;
        aspect-ratio:1 / 1;
    }

    .project-thumbnails{
        height:75%;
    }

    .project-glass{
        top:75%;
    }

    .contact{
    position:relative;
    z-index:10;
    pointer-events:auto;
    margin-top:0;
        margin-bottom:0;
    }

    .contact-left{
        gap:calc(var(--contact-point) * 0.65);
    }

    .contact-left a{
        font-size:calc((var(--nav-point) - 2px) * 0.5);
        letter-spacing:2px;
    }

    .close{
        top:10px;
        right:20px;
        font-size:24px;
    }

    .lightbox-caption{
    width:var(--lightbox-caption-width, calc(100vw - var(--contact-point) * 2));
    max-width:var(--lightbox-caption-width, calc(100vw - var(--contact-point) * 2));
    display:block;
    margin:calc(var(--contact-point) * 0.65) auto 0;
    text-align:center;
}
    .lightbox-caption h3{
        font-size:calc(var(--gallery-title-size) * 0.82);
    }

    .lightbox-caption p{
        font-size:calc(var(--gallery-subtitle-size) * 0.88);
    }

    .lightbox-arrow{
        width:calc(var(--contact-point) * 0.82);
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        transform:none;
        align-self:center;
        justify-self:center;
    }

    .lightbox-arrow.prev{
        left:auto;
    }

    .lightbox-arrow.next{
        right:auto;
    }
}

.popup-upload-intake-panel{
    width:min(92%, calc(var(--contact-point) * 34));
}

.popup-upload-dropzone{
    min-height:calc(var(--contact-point) * 8);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:calc(var(--contact-point) * 1.45);
    padding:calc(var(--contact-point) * 1.2);
    border:1px dashed rgba(255,255,255,0.42);
    border-radius:10px;
    background:rgba(255,255,255,0.08);
    text-align:center;
    color:white;
    overflow:hidden;
}

.popup-upload-dropzone.is-drop-target{
    background:rgba(255,255,255,0.18);
    border-color:rgba(255,255,255,0.85);
}

.popup-upload-dropzone span{
    font-size:calc(var(--contact-point) * 0.72);
    font-weight:800;
    letter-spacing:0.18em;
}

.popup-upload-dropzone small{
    max-width:calc(var(--contact-point) * 22);
    color:rgba(255,255,255,0.62);
    font-size:calc(var(--contact-point) * 0.48);
    line-height:1.35;
}

.popup-upload-dropzone input{
    display:none;
}

.popup-upload-dropzone button{
    min-height:calc(var(--contact-point) * 1.6);
    border:1px solid rgba(255,255,255,0.3);
    border-radius:8px;
    padding:0 calc(var(--contact-point) * 0.8);
    background:rgba(255,255,255,0.1);
    color:white;
    cursor:pointer;
}

.popup-upload-previews{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(calc(var(--contact-point) * 4.8), 1fr));
    gap:calc(var(--contact-point) * 0.55);
    max-height:calc(var(--contact-point) * 10);
    overflow:auto;
}

.popup-upload-preview{
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.25);
    min-width:0;
    color:white;
}

.popup-upload-preview img{
    width:100%;
    aspect-ratio:4 / 3;
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:cover;
    border-radius:8px;
    background:rgba(255,255,255,0.12);
}

.popup-upload-preview span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(255,255,255,0.72);
    font-size:calc(var(--contact-point) * 0.42);
}

.popup-upload-progress{
    display:flex;
    flex-direction:column;
    gap:calc(var(--contact-point) * 0.35);
    color:rgba(255,255,255,0.78);
    font-size:calc(var(--contact-point) * 0.48);
}

.popup-upload-progress[hidden]{
    display:none;
}

.popup-upload-progress i{
    height:calc(var(--contact-point) * 0.28);
    width:100%;
    position:relative;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,0.16);
}

.popup-upload-progress i::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:var(--progress, 0%);
    background:white;
    border-radius:inherit;
    transition:width 0.18s ease;
}

:where(a, button, input, [role="button"], [tabindex]):focus-visible{
    outline:2px solid currentColor;
    outline-offset:3px;
}

.gallery-item:focus-visible{
    z-index:5;
}

.gallery-item:focus-visible .gallery-caption{
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        transition-delay:0ms !important;
    }
}

/* Accessibility and responsive QA hardening. Keep these overrides last. */
:root{
    --hero-start-height:clamp(620px, 82svh, 760px);
}

nav button{
    color:#a8a8a8;
}

.nav-separator{
    color:#8a8a8a;
}

.filter-menu button,
.project-filter-list button,
.gallery-timeline .timeline-year{
    color:#555;
    opacity:1;
}

.filter-menu button:hover,
.filter-menu button.active,
.project-filter-list button:hover,
.project-filter-list button.active,
.gallery-timeline .timeline-year:hover,
.gallery-timeline .timeline-year.active{
    color:#111;
}

.nsfw-toggle:focus-within .nsfw-switch,
.theme-toggle:focus-within .nsfw-switch{
    outline:3px solid #fff;
    outline-offset:4px;
    box-shadow:0 0 0 2px #111;
}

.filter-menu button,
.project-filter-list button,
.gallery-timeline .timeline-year,
.social-float-menu a{
    min-height:44px;
    display:flex;
    align-items:center;
}

.project-view-close,
.close,
.lightbox-arrow,
.back-to-top{
    min-width:44px;
    min-height:44px;
}

.close{
    width:44px;
    height:44px;
}

.back-to-top{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
}

.contact-left a{
    min-height:32px;
    align-items:center;
    font-size:clamp(12px, calc((var(--nav-point) - 2px) * 0.5), 16px);
    line-height:1.35;
}

.lightbox{
    overscroll-behavior:contain;
    padding:
        max(var(--lightbox-top-space, var(--contact-point)), env(safe-area-inset-top))
        max(var(--contact-point), env(safe-area-inset-right))
        max(calc(var(--contact-point) * 0.85), env(safe-area-inset-bottom))
        max(var(--contact-point), env(safe-area-inset-left));
}

body:has(.lightbox[aria-hidden="false"]){
    overflow:hidden;
    overscroll-behavior:none;
}

.lightbox-stage{
    flex:0 1 auto;
    margin-inline:auto;
}

.lightbox-caption h3{
    font-size:clamp(18px, var(--gallery-title-size), 28px);
}

.lightbox-caption p{
    font-size:clamp(14px, var(--gallery-subtitle-size), 18px);
}

.nsfw-notice{
    padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    overflow:auto;
    overscroll-behavior:contain;
}

.nsfw-notice-panel{
    width:min(92vw, 620px);
    max-height:calc(100dvh - 32px);
    overflow:auto;
    padding:clamp(24px, 4vw, 48px);
}

.nsfw-notice-panel h2{
    padding-inline:44px;
    font-size:clamp(18px, calc(var(--contact-point) * 0.92), 26px);
    line-height:1.3;
}

.nsfw-notice-panel p{
    max-width:52ch;
    font-size:clamp(15px, calc(var(--contact-point) * 0.68), 18px);
    line-height:1.6;
}

.nsfw-notice-panel small{
    max-width:54ch;
    color:#555;
    font-size:clamp(13px, calc(var(--contact-point) * 0.54), 16px);
    line-height:1.55;
}

.nsfw-notice-language{
    width:44px;
    height:44px;
    padding:8px;
}

.nsfw-notice-switch{
    width:min(100%, 360px);
    min-height:64px;
}

.nsfw-notice-option{
    min-height:62px;
}

.nsfw-notice-option em{
    font-size:12px;
    letter-spacing:1px;
}

@media(max-width:640px){
    :root{
        --gallery-title-size:var(--contact-point);
        --gallery-subtitle-size:calc((var(--contact-point) + 2px) * 0.5 - 2px);
    }

    :root{
        --contact-point:clamp(14px, 3.8vw, 16px);
        --nav-point:clamp(12px, 3.2vw, 14px);
        --nav-side-width:44px;
    }

    .hero{
        padding:
            max(16px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            0
            max(16px, env(safe-area-inset-left));
    }

    .main-title h1{
        font-size:clamp(39px, 12.2vw, 56px);
        letter-spacing:clamp(3px, 1vw, 5px);
    }

    .hero-carousel{
        left:0;
        right:0;
        width:100%;
        height:clamp(112px, 31vw, 142px);
        margin-top:clamp(18px, 5vw, 28px);
    }

    .hero-carousel-card{
        width:min(78%, 310px);
        padding:8px 10px;
    }

    .hero-carousel-card strong{
        font-size:clamp(14px, calc(var(--gallery-title-size) * 0.72), 18px);
    }

    .hero-carousel-card span{
        font-size:clamp(12px, calc(var(--gallery-subtitle-size) * 0.78), 15px);
    }

    .portfolio-bar{
        width:calc(100% + max(16px, env(safe-area-inset-left)) + max(16px, env(safe-area-inset-right)));
        margin-left:calc(max(16px, env(safe-area-inset-left)) * -1);
        margin-top:clamp(24px, 8vw, 38px);
    }

    .portfolio-bar h2{
        padding:18px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
        font-size:clamp(16px, 4vw, 19px);
        letter-spacing:clamp(4px, 1.5vw, 6px);
    }

    .hero-intro{
        min-height:auto;
        margin-top:24px;
        gap:20px;
    }

    .hero-intro p{
        font-size:clamp(14px, 3.8vw, 16px);
        line-height:1.75;
    }

    .contact-left a{
        min-height:44px;
        font-size:13px;
        letter-spacing:1.5px;
    }

    nav{
        min-height:68px;
        padding:
            6px
            max(8px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .nav-links{
        left:52px;
        right:52px;
        gap:2px;
    }

    .section-tab{
        width:auto;
        min-width:0;
        min-height:52px;
        flex:1 1 0;
        aspect-ratio:auto;
        flex-direction:column;
        gap:3px;
        padding:3px 1px;
    }

    .section-tab-label{
        display:block;
        max-width:100%;
        overflow:hidden;
        font-size:clamp(8px, 2.55vw, 11px);
        line-height:1.1;
        letter-spacing:0;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .section-tab-icon{
        width:25px;
        height:25px;
        flex:0 0 25px;
    }

    .nav-signature{
        width:44px;
        height:44px;
        right:max(4px, env(safe-area-inset-right));
    }

    .nav-control-trigger{
        width:44px;
        height:44px;
        left:calc(max(4px, env(safe-area-inset-left)) + 22px) !important;
    }

    .nav-control-menu{
        width:min(280px, calc(100vw - 16px));
        max-width:calc(100vw - 16px);
        left:max(8px, env(safe-area-inset-left)) !important;
        gap:14px;
        padding-inline:20px;
        font-size:14px;
    }

    nav .nav-control-panel.is-open > .nav-control-menu{
        max-height:min(var(--nav-control-open-height), calc(100dvh - 84px));
        padding-top:18px;
        padding-bottom:max(18px, env(safe-area-inset-bottom));
    }

    .nav-control-switches{
        gap:12px;
    }

    .nav-control-menu .theme-toggle,
    .nav-control-menu .nsfw-toggle,
    .nav-control-menu .language-switcher button{
        width:100%;
        min-height:52px;
        justify-content:center;
        font-size:12px;
    }

    .nav-control-menu .language-switcher{
        width:100%;
        gap:8px;
    }

    .nav-control-menu .language-switcher button{
        flex:1 1 0;
        min-width:0;
    }

    .nsfw-switch{
        width:48px;
        height:28px;
        flex:0 0 auto;
    }

    .nsfw-switch::before{
        left:3px;
        width:22px;
        height:22px;
    }

    .nsfw-toggle input:checked + .nsfw-switch::before,
    .theme-toggle input:checked + .nsfw-switch::before{
        left:23px;
    }

    .filter-menu{
        width:min(280px, calc(100vw - 16px));
        max-width:calc(100vw - 16px);
        padding:12px;
        gap:4px;
    }

    .filter-menu button,
    .project-filter-list button,
    .gallery-timeline .timeline-year{
        min-height:44px;
        font-size:13px;
        line-height:1.3;
        white-space:normal;
    }

    .section{
        padding:32px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
    }

    .section.showing-project-detail{
        padding:28px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
    }

    .section.showing-project-detail::before{
        inset:10px max(8px, env(safe-area-inset-right)) 10px max(8px, env(safe-area-inset-left));
    }

    .project-view-close{
        width:44px;
        height:44px;
        flex:0 0 44px;
    }

    .lightbox{
        justify-content:center;
        overflow:hidden;
        padding:
            max(58px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .lightbox-stage{
        width:fit-content;
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100dvh - 190px) !important;
        margin:auto auto 0;
    }

    .lightbox img{
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100dvh - 190px) !important;
        object-fit:contain;
        object-position:center;
    }

    .lightbox-caption{
        width:min(100%, 620px) !important;
        max-width:min(100%, 620px) !important;
        min-height:84px;
        display:grid;
        grid-template-columns:48px minmax(0, 1fr) 48px;
        align-items:center;
        gap:6px;
        margin:8px auto auto;
    }

    .lightbox-caption h3{
        font-size:clamp(18px, 5vw, 22px);
        line-height:1.2;
    }

    .lightbox-caption p{
        margin-top:4px;
        font-size:clamp(14px, 3.8vw, 17px);
        line-height:1.4;
    }

    .lightbox-arrow{
        width:44px;
        height:44px;
        position:relative;
        top:auto;
        left:auto !important;
        right:auto !important;
        align-self:center;
        justify-self:center;
        transform:none;
    }

    .lightbox-arrow::before{
        inset:12px;
    }

    .close{
        top:max(6px, env(safe-area-inset-top));
        right:max(6px, env(safe-area-inset-right));
        font-size:32px;
    }

    .nsfw-notice-panel{
        width:100%;
        padding:76px 20px 24px;
    }

    .nsfw-notice-panel h2{
        padding-inline:0;
        font-size:20px;
        letter-spacing:2px;
    }

    .nsfw-notice-panel p{
        font-size:15px;
    }

    .nsfw-notice-panel small{
        font-size:13px;
    }

    .nsfw-notice-languages{
        top:12px;
        right:12px;
        flex-direction:row;
    }

    .nsfw-notice-language{
        width:44px;
        height:44px;
    }

    .nsfw-notice-switch{
        min-height:68px;
    }

    .social-float-trigger{
        min-width:44px;
        min-height:44px;
    }

    .social-float-trigger span{
        min-height:44px;
        padding:10px 8px;
        font-size:14px;
    }

    .social-float-menu a{
        min-height:44px;
        font-size:13px;
    }

    .social-float.is-open .social-float-menu{
        max-height:240px;
    }
}

@media(max-width:360px){
    .nav-links{
        left:48px;
        right:48px;
    }

    .section-tab-label{
        font-size:8px;
    }

    .main-title h1{
        font-size:clamp(36px, 11.7vw, 42px);
        letter-spacing:2px;
    }

    .lightbox-caption{
        grid-template-columns:44px minmax(0, 1fr) 44px;
        gap:2px;
    }
}

@media(max-height:520px) and (orientation:landscape){
    .hero{
        min-height:auto;
    }

    .hero-intro{
        min-height:auto;
        margin-top:18px;
    }

    .lightbox{
        padding:
            max(8px, env(safe-area-inset-top))
            max(58px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(58px, env(safe-area-inset-left));
    }

    .lightbox-stage,
    .lightbox img{
        max-height:calc(100dvh - 92px) !important;
    }

    .lightbox-caption{
        min-height:68px;
        margin-top:4px;
    }

    .lightbox-caption h3{
        font-size:17px;
    }

    .lightbox-caption p{
        font-size:13px;
    }

    .nsfw-notice-panel{
        max-height:calc(100dvh - 16px);
        padding-top:60px;
    }
}

/* Final mobile overrides: 2px smaller type without moving side controls. */
@media(max-width:640px){
    .main-title h1{
        font-size:clamp(37px, calc(12.2vw - 2px), 54px);
    }

    .hero-carousel-card strong{
        font-size:clamp(12px, calc(var(--gallery-title-size) * 0.72), 16px);
    }

    .hero-carousel-card span{
        font-size:clamp(10px, calc(var(--gallery-subtitle-size) * 0.78), 13px);
    }

    .portfolio-bar h2{
        font-size:clamp(14px, calc(4vw - 2px), 17px);
    }

    .hero-intro p{
        font-size:clamp(12px, calc(3.8vw - 2px), 14px);
    }

    .contact-left a{
        font-size:11px;
    }

    .nav-links{
        width:max-content;
        left:50%;
        right:auto;
        justify-content:center;
        gap:clamp(8px, 3vw, 14px);
        transform:translate(-50%, -50%);
    }

    .section-tab{
        min-width:72px;
        flex:0 0 auto;
        align-items:center;
        justify-content:center;
    }

    .section-tab-label{
        font-size:clamp(6px, calc(2.55vw - 2px), 9px);
    }

    .nav-control-trigger{
        width:44px;
        height:44px;
        border:0;
        background:transparent;
    }

    .nav-control-trigger::before{
        content:"";
        width:34px;
        height:34px;
        position:absolute;
        inset:50% auto auto 50%;
        border:1px solid rgba(255,255,255,0.42);
        border-radius:50%;
        background:rgba(255,255,255,0.03);
        transform:translate(-50%, -50%);
        transition:border-color 0.2s ease, background 0.2s ease;
    }

    .nav-control-trigger span{
        position:relative;
        z-index:1;
    }

    .nav-control-trigger:hover,
    .nav-control-panel.is-open .nav-control-trigger{
        border-color:transparent;
        background:transparent;
    }

    .nav-control-trigger:hover::before,
    .nav-control-panel.is-open .nav-control-trigger::before{
        border-color:rgba(255,255,255,0.86);
        background:rgba(255,255,255,0.08);
    }

    .nav-control-menu{
        font-size:12px;
    }

    .nav-control-menu .theme-toggle,
    .nav-control-menu .nsfw-toggle,
    .nav-control-menu .language-switcher button{
        font-size:10px;
    }

    .filter-menu button,
    .project-filter-list button,
    .gallery-timeline .timeline-year{
        font-size:11px;
    }

    .social-float-trigger span{
        font-size:12px;
    }

    .social-float-menu a{
        font-size:11px;
    }
}

@media(max-width:360px){
    .nav-links{
        left:50%;
        right:auto;
    }

    .section-tab-label{
        font-size:6px;
    }

    .main-title h1{
        font-size:clamp(34px, calc(11.7vw - 2px), 40px);
    }
}