/* =========================================================
   LUNARE PORTFOLIO — CLEAN STABLE CSS v3
   Structure:
   1. Base / theme
   2. Header / navigation
   3. Home page
   4. Works / gallery
   5. Text sections / footer
   6. Lightbox
   7. About page
   8. Series page
   9. Animations
   10. Mobile
   ========================================================= */

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

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

html.dark-theme-start,
html.dark-theme-start body{
    background:#0b0b0c;
    color:white;
}

body{
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.76), transparent 36%),
        radial-gradient(circle at 78% 18%, rgba(255,255,255,0.34), transparent 28%),
        radial-gradient(circle at bottom right, rgba(0,0,0,0.028), transparent 36%),
        #f5f1ea;

    color:#111;
    font-family:Arial, sans-serif;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    padding-top:120px;
    transition:background 0.4s ease, color 0.4s ease;
}

body.dark-theme{
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.045), transparent 36%),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,0.025), transparent 30%),
        radial-gradient(circle at bottom right, rgba(255,255,255,0.032), transparent 36%),
        #0b0b0c;

    color:white;
}

body:has(.about-hero){
    padding-top:60px;
}

body.no-scroll{
    overflow:hidden;
}

a{
    color:inherit;
}

img{
    display:block;
    user-select:none;
    -webkit-user-drag:none;

    transition:
        transform 1.2s cubic-bezier(.19,1,.22,1),
        opacity 0.8s ease,
        filter 0.8s ease;
}

img:hover{
    cursor:crosshair;
}

section{
    position:relative;
    isolation:isolate;
    scroll-margin-top:120px;
}

section::after{
    content:"";
    position:absolute;

    left:50%;
    bottom:-70px;

    transform:translateX(-50%);

    width:58%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,0.028),
            transparent
        );

    pointer-events:none;
}

body.dark-theme section::after{
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

/* =========================
   HEADER
   ========================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:72px;
    z-index:1000;

    padding:14px 26px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:
    linear-gradient(
        to bottom,
        rgba(245,243,238,0.62),
        rgba(245,243,238,0.18)
    );

border-bottom:1px solid rgba(255,255,255,0.22);

box-shadow:
    0 10px 46px rgba(0,0,0,0.045),
    0 1px 0 rgba(255,255,255,0.14) inset;

    animation:headerFade 1.2s ease;

    transition:
        background 0.7s ease,
        backdrop-filter 0.7s ease,
        border-color 0.7s ease,
        transform 0.7s cubic-bezier(.19,1,.22,1),
        opacity 0.7s ease,
        padding 0.4s ease,
        box-shadow 0.6s ease;
}

body.dark-theme .site-header{
    background:rgba(8,8,9,0.42);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.site-header.scrolled{
    padding:10px 34px;

    background:
        linear-gradient(
            to bottom,
            rgba(245,243,238,0.78),
            rgba(245,243,238,0.34)
        );

    box-shadow:
        0 12px 52px rgba(0,0,0,0.09),
        0 1px 0 rgba(255,255,255,0.18) inset;

    border-bottom:1px solid rgba(255,255,255,0.28);
}

.site-header.hide,
.site-header.header-hidden{
    transform:translateY(-120%);
}

.logo{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;

    transition:transform 0.4s ease, opacity 0.4s ease;
}

.logo img{
    width:100%;
    height:100%;
    object-fit:contain;

    transition:
        transform 0.6s ease,
        opacity 0.4s ease,
        filter 0.5s ease;
}

.logo:hover{
    transform:scale(1.08);
}

.logo:hover img{
    transform:rotate(-3deg) scale(1.02);
    opacity:0.82;
}

body.dark-theme .logo img{
    filter:invert(1);
}

body.dark-theme .logo:hover img{
    opacity:0.88;
}

.main-nav{
    display:flex;
    gap:32px;
}

.main-nav a{
    position:relative;
    text-decoration:none;
    color:inherit;

    font-size:13px;
    font-weight:300;
    letter-spacing:0.06em;
    opacity:0.72;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        letter-spacing 0.4s ease;
}

.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left;
    opacity:0.55;
    transition:transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.4s ease;
}

.main-nav a:hover,
.main-nav a.active{
    opacity:1;
    transform:translateY(-1px);
    letter-spacing:0.07em;
}

.main-nav a:hover::after{
    transform:scaleX(1);
    opacity:1;
}

.theme-toggle{
    padding:9px 16px;
    border:1px solid #111;
    border-radius:20px;
    background:none;
    color:inherit;

    cursor:pointer;
    font-size:12px;
    font-weight:300;
    letter-spacing:0.04em;

    transform:scale(0.92);
    transition:opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle:hover{
    opacity:0.82;
    transform:scale(0.92) translateY(-2px);
}

body.dark-theme .theme-toggle{
    border-color:white;
    color:white;
}

/* =========================
   HOME PAGE
   ========================= */

.page{
    padding-top:120px;
    overflow:hidden;
}

.intro{
    max-width:1320px;
    margin:0 auto;
    padding:0 80px 64px;

    will-change:transform;
}

.intro h1{
    margin-bottom:26px;

    font-size:clamp(72px, 8vw, 104px);

    font-weight:400;
    line-height:0.92;

    letter-spacing:-0.065em;

    transition:
        letter-spacing 1.2s cubic-bezier(.19,1,.22,1),
        opacity 0.8s ease;

    opacity:0.96;
}

.intro p{
    max-width:680px;

    margin-top:30px;

    font-size:26px;
    line-height:1.58;

    opacity:0.76;
}

.intro:hover h1{
    letter-spacing:-0.072em;
    opacity:1;
}

.intro:hover p{
    opacity:0.84;
}

.works{
    counter-reset:work;
    padding:160px 0 120px;
}

.works-intro{
    width:min(920px, 80%);

    margin:10px auto 136px;

    position:relative;
    z-index:2;
}

.works-intro .section-label{
    display:block;

    margin-bottom:20px;

    font-size:10px;

    letter-spacing:0.12em;

    text-transform:uppercase;

    opacity:0.42;
}

.works-intro h2{
    margin:0;

    font-size:clamp(46px, 6vw, 88px);

    line-height:0.92;

    font-weight:400;

    letter-spacing:-0.065em;

    opacity:0.96;
}

.work-item{
    width:96%;
    max-width:1380px;

    margin:0 auto 56px;

    position:relative;
    counter-increment:work;
    will-change:transform;

    transition:
        opacity 1.2s ease,
        transform 1.4s cubic-bezier(.19,1,.22,1),
        box-shadow 1s ease;
}

.narrow-work{
    width:62%;

    margin-left:auto;
    margin-right:auto;
}

.work-image{
    position:relative;
    overflow:hidden;
    line-height:0;
    border-radius:4px;
    box-shadow:
        0 12px 42px rgba(0,0,0,0.06),
        0 2px 12px rgba(0,0,0,0.04);
}

body.dark-theme .work-image{
    box-shadow:0 24px 80px rgba(0,0,0,0.42);
}

.work-image img{
    width:100%;
    max-width:94%;
    max-height:78vh;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:28px;

    object-fit:contain;
    border-radius:4px;

    opacity:0;
    animation:imageReveal 1.6s ease forwards;

    transition:
        transform 0.9s cubic-bezier(.19,1,.22,1),
        opacity 0.8s ease,
        filter 0.8s ease,
        box-shadow 1.8s ease;
}

.work-image img{
    max-width:100%;

    margin-bottom:0;

    cursor:zoom-in;

    display:block;

    box-shadow:
        0 10px 36px rgba(0,0,0,0.045),
        0 2px 12px rgba(0,0,0,0.028);

    transition:
        transform 1.4s cubic-bezier(.19,1,.22,1),
        filter 1s ease,
        box-shadow 1s ease,
        opacity 0.8s ease;
}

.work-item:hover .work-image img,
.work-item:hover img{

    transform:
        scale(1.024)
        translateY(-3px);

    opacity:0.985;

    filter:
        brightness(0.998)
        contrast(1.02)
        saturate(1.035);

    box-shadow:
        0 30px 90px rgba(0,0,0,0.10),
        0 10px 30px rgba(0,0,0,0.06);
}

body.dark-theme .works img,
body.dark-theme .work-image img{
    filter:brightness(0.92);
}

body.dark-theme .work-item:hover img{
    filter:brightness(0.88) contrast(1.01);
}

.work-overlay{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:220px;

    display:flex;
    align-items:flex-end;

    padding:32px 40px 52px;

    opacity:0;

    transform:
        translateY(16px);

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.68),
            rgba(0,0,0,0.18),
            rgba(0,0,0,0)
        );

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.19,1,.22,1);
}

.work-image:hover .work-overlay{
    opacity:1;
    transform:translateY(0);
}

.work-overlay p{
    max-width:420px;

    margin:0;

    color:rgba(255,255,255,0.82);

    font-size:13px;
    line-height:1.75;

    font-weight:300;

    letter-spacing:0.03em;

    opacity:0.78;

    text-shadow:0 1px 10px rgba(0,0,0,0.22);
}

.work-caption{
    width:min(900px, 88%);
    margin:28px auto 0;

    opacity:0.72;

    transform:translateY(0);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.19,1,.22,1),
        filter 0.7s ease;
}

.work-caption::before{
    content:"";
    display:block;

    width:52px;
    height:1px;

    margin-bottom:20px;

    background:currentColor;

    opacity:0.24;

    transition:
        width 0.7s cubic-bezier(.19,1,.22,1),
        opacity 0.7s ease;
}

.work-caption h3{
    margin:0 0 12px;

    font-size:30px;

    line-height:1.08;

    font-weight:400;

    letter-spacing:-0.042em;

    text-wrap:balance;
}

.work-caption h2::before{
    content:"0" counter(work) " / ";
    opacity:0.45;
    font-size:18px;
    margin-right:10px;
}

.work-caption p{
    margin:0;

    font-size:11px;

    line-height:1.9;

    letter-spacing:0.11em;

    text-transform:uppercase;

    font-weight:300;

    opacity:0.46;
}

.work-item:hover .work-caption{
    opacity:1;
    transform:translateY(-4px);
    filter:brightness(1.03);
}
 .work-item:hover .work-caption::before{
    width:78px;
    opacity:0.42;
}

.series-link-row{
    display:block;
    position:relative;
    z-index:10;
    width:fit-content;
    margin:8px 0 40px 18%;

    font-size:12px;
    text-decoration:none;
    letter-spacing:0.06em;
    text-transform:uppercase;
    opacity:0.72;

    transition:opacity 0.3s ease;
}

body:not(.dark-theme) .series-link-row{
    color:#777;
}

body.dark-theme .series-link-row{
    color:rgba(255,255,255,0.72);
}

.series-link-row:hover{
    opacity:1;
}

/* =========================
   TEXT SECTIONS / FOOTER
   ========================= */

.section-label{
    display:block;
    margin-bottom:18px;
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    opacity:0.38;
}

.text-section{
    max-width:1400px;
    margin:0 auto;
    padding:120px 80px;
    transition:transform 1.2s ease, opacity 1.2s ease;
}

.text-section h2{
    margin-bottom:26px;

    font-size:clamp(44px, 5vw, 62px);

    line-height:0.96;

    font-weight:400;

    letter-spacing:-0.055em;

    opacity:0.96;
}

.text-section p{
    font-size:21px;

    line-height:1.68;

    letter-spacing:0.005em;

    opacity:0.76;
}

.about-section,
.bio-section{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:80px;
    align-items:start;
}

.about-section p,
.bio-section p{
    max-width:620px;
    line-height:1.95;
}

.about-section p + p,
.bio-section p + p{
    margin-top:22px;
}

.about-section::before{
    content:"";
    display:block;
    width:72px;
    height:1px;
    margin-bottom:64px;
    background:currentColor;
    opacity:0.22;
    transition:opacity 0.6s ease, width 0.8s cubic-bezier(.22,1,.36,1);
}

.about-section:hover::before{
    opacity:0.42;
    width:96px;
}

.quote-section{
    max-width:700px;

    margin:80px auto 120px;

    padding:0 40px;

    text-align:center;

    opacity:0.82;

    transition:
        transform 1.2s ease,
        opacity 1.2s ease;
}

.quote-section p{
    max-width:460px;

    margin:0 auto;

    font-size:15px;

    line-height:2;

    font-style:italic;

    font-weight:300;

    letter-spacing:0.035em;

    opacity:0.54;
}

.contact-link{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid currentColor;
    opacity:0.72;
    transition:opacity 0.4s ease, letter-spacing 0.4s ease;
}

.contact-link:hover{
    opacity:1;
    letter-spacing:0.03em;
}

.site-footer{
    width:min(1180px, 88%);
    margin:180px auto 60px;
    padding-top:34px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-top:1px solid currentColor;
    opacity:0.38;

    font-size:12px;
    letter-spacing:0.04em;
}

.back-to-top{
    color:inherit;
    text-decoration:none;
    transition:opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover{
    opacity:1;
    transform:translateY(-2px);
}

/* =========================
   LIGHTBOX
   ========================= */

.lightbox{
    position:fixed;
    inset:0;
    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(circle at center,
        rgba(255,255,255,0.03),
        transparent 42%),
        rgba(0,0,0,0.965);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    opacity:0;
    visibility:hidden;

    cursor:zoom-out;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease,
        backdrop-filter 0.6s ease;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox-content{
    position:relative;

    max-width:94vw;
    max-height:94vh;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:18px;

    box-shadow:
        0 0 40px rgba(255,255,255,0.025),
        0 0 120px rgba(255,255,255,0.015);
}

.lightbox img{
    max-width:94%;
    max-height:88vh;
    object-fit:contain;
    cursor:default;
    opacity:0;
    transform:scale(0.972);
    transition:opacity 0.45s ease, transform 0.45s ease;
    box-shadow:0 30px 80px rgba(0,0,0,0.45);
}

.lightbox.active img{
    opacity:1;
    transform:scale(1);
}

.lightbox-close{
    position:absolute;
    top:28px;
    right:32px;
    border:none;
    background:none;
    color:white;
    font-size:34px;
    font-weight:200;
    cursor:crosshair;
    opacity:0.7;
    transition:opacity 0.3s ease, transform 0.3s ease;
}

.lightbox-close:hover{
    opacity:1;
    transform:rotate(90deg);
}

.lightbox-nav{
    position:fixed;
    top:50%;
    z-index:30;

    transform:translateY(-50%);

    background:none;
    border:none;

    color:white;

    font-size:48px;
    font-weight:200;

    cursor:pointer;

    opacity:0.22;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.lightbox-nav:hover{
    opacity:0.72;
    transform:translateY(-50%) scale(1.04);
}

.lightbox-nav.prev{
    left:24px;
}

.lightbox-nav.next{
    right:24px;
}

.lightbox-caption{
    margin-top:22px;

    color:rgba(255,255,255,0.78);

    font-size:12px;
    font-weight:300;
    letter-spacing:0.04em;
    line-height:1.6;

    text-align:center;

    transition:opacity 0.4s ease;
}

.lightbox-caption strong{
    display:block;

    margin-bottom:4px;

    font-weight:400;
    font-size:13px;

    color:rgba(255,255,255,0.92);
}

.lightbox-counter{
    margin-top:10px;

    color:rgba(255,255,255,0.34);

    font-size:11px;
    font-weight:300;
    letter-spacing:0.08em;
}

.lightbox,
.lightbox *{
    user-select:none;
}

/* =========================
   ABOUT PAGE
   ========================= */
.about-hero{
    width:min(1160px, 86%);

    margin:0 auto 140px;

    padding-top:70px;

    box-sizing:border-box;
}


.about-hero{
    width:min(1120px, 84%);

    margin:0 auto 140px;

    padding-top:90px;

    box-sizing:border-box;
}

.about-hero-inner{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:90px;
    align-items:center;
}

.about-portrait{
    width:100%;
    margin:0;
}

.about-portrait img{
    width:100%;

    max-width:420px;

    height:auto;
}

.about-hero .section-label,
.about-hero h1,
.about-hero p{
    grid-column:2;
    margin-left:0;
}

.about-hero h1{
    margin:-40px 0 34px;
    font-size:56px;
    line-height:0.95;
    font-weight:400;
    letter-spacing:-0.04em;
    text-wrap:balance;
    text-rendering:optimizeLegibility;
}

.about-hero p{
    max-width:460px;
    font-size:18px;
    line-height:1.9;
    opacity:0.72;
    text-rendering:optimizeLegibility;
}

body.dark-theme .about-hero p,
body.dark-theme .about-text p{
    opacity:0.88;
}

.cinematic-image{
    width:min(1240px, 92%);

    margin:120px auto 140px;

    overflow:hidden;
}

.cinematic-image img{
    width:100%;

    max-height:820px;

    height:auto;

    object-fit:cover;

    object-position:center;

    border-radius:2px;

    transition:
        transform 2.2s ease,
        filter 1.2s ease;
}

.cinematic-image:hover img{
    transform:scale(1.03);
}

.about-text{
    width:min(760px, 86%);
    margin:10px auto 180px;
}

.about-text p{
    margin:0 0 34px;
    max-width:680px;

    font-size:16px;
    line-height:1.85;

    opacity:0.78;

    text-rendering:optimizeLegibility;
}

/* =========================
   SERIES PAGE
   ========================= */

.series-page{
    position:relative;
    overflow:hidden;
}

.series-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 46%);
    opacity:0.6;
}

.series-intro{
    max-width:920px;
    margin:0 auto 100px;
    padding:0 80px;
    opacity:1;
    transform:none;
}

.series-label{
    margin-bottom:22px;
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    opacity:0.45;
}

.series-intro h1{
    margin:18px 0 40px;
    font-size:clamp(46px, 5.6vw, 82px);
    line-height:1.02;
    font-weight:400;
    letter-spacing:-0.02em;
}

.series-intro p{
    max-width:760px;
    margin-bottom:26px;
    font-size:26px;
    line-height:1.65;
    opacity:0.78;
}

.series-works{
    width:100%;
}

.series-work{
    width:min(1120px, 86%);
    margin:0 auto 130px;
    position:relative;
    overflow:visible;
}

.series-work img{
    width:100%;
    max-height:82vh;
    object-fit:contain;
    border-radius:4px;
    transform:scale(1);
    filter:brightness(0.985) contrast(1.01) saturate(0.985);
    transition:transform 1.2s cubic-bezier(.19,1,.22,1), filter 0.8s ease;
}

.series-work:hover img{
    transform:scale(1.012);
    filter:brightness(1) contrast(1.02) saturate(1.01);
}

.series-work:hover .series-caption{
    opacity:0.92;
    transform:translateY(-3px);
}

.series-work:nth-of-type(2n){
    width:min(980px, 82%);
}

.series-work.wide{
    width:min(1180px, 88%);
}

.series-work.wide img{
    width:100%;
}

.series-work.final{
    width:min(1180px, 88%);
    margin-top:120px;
    margin-bottom:220px;
}

.series-work.left{
    margin-left:6%;
    margin-right:auto;
}

.series-work.right{
    margin-left:auto;
    margin-right:6%;
}

.series-caption{
    width:min(720px, 88%);
    margin:30px auto 0;

    opacity:0.72;

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.19,1,.22,1);
}

.series-caption span{
    display:block;
    margin-bottom:14px;
    font-size:13px;
    letter-spacing:0.08em;
    opacity:0.42;
}

.series-caption h2{
    margin:12px 0 16px;

    font-size:40px;
    line-height:1.08;

    font-weight:400;

    letter-spacing:-0.035em;
}

.series-caption p{
    max-width:620px;
    font-size:15px;
    line-height:1.75;
    opacity:0.66;
}

.series-note{
    width:min(640px, 84%);

    margin:48px auto 120px;
    padding-top:28px;

    border-top:1px solid rgba(120,120,120,0.14);

    font-size:0.95rem;
    line-height:1.8;

    font-style:normal;
    font-weight:300;

    text-align:left;

    opacity:0.42;
}

.series-detail{
    width:min(760px, 86%);

    margin:120px auto 160px;

    opacity:0.9;

    position:relative;
}

.series-detail::before{
    content:"detail";
    position:absolute;
    left:-70px;
    top:0;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    opacity:0.22;
}

.series-detail img{
    width:100%;

    border-radius:3px;

    box-shadow:
        0 18px 54px rgba(0,0,0,0.055),
        0 4px 18px rgba(0,0,0,0.035);

    filter:
        brightness(0.992)
        contrast(0.99)
        saturate(0.96);

    transition:
        transform 1.6s cubic-bezier(.19,1,.22,1),
        filter 1.2s ease,
        box-shadow 1.2s ease;
}

.series-detail:hover img{
    transform:
        scale(1.01)
        translateY(-2px);

    filter:
        brightness(1.004)
        contrast(1.018)
        saturate(0.985);

    box-shadow:
        0 24px 70px rgba(0,0,0,0.075),
        0 8px 26px rgba(0,0,0,0.045);
}

.series-detail p{
    max-width:520px;
    margin-top:26px;
    font-size:14px;
    line-height:1.8;
    opacity:0.52;
}

body.dark-theme .series-work img,
body.dark-theme .series-detail img{
    filter:brightness(0.9) contrast(1.05) saturate(0.9);
}

body.dark-theme .series-work:hover img{
    filter:brightness(0.98) contrast(1.06) saturate(1);
}

body.dark-theme .series-caption p{
    opacity:0.72;
}

body.dark-theme .series-note{
    opacity:0.5;
}

body.dark-theme .series-page::before{
    background:radial-gradient(circle at center, transparent 45%, rgba(0,0,0,0.22));
    opacity:0.9;
}

/* =========================
   ANIMATIONS
   ========================= */

.fade-in,
.reveal,
.scroll-rise{
    opacity:0;

    transform:
        translateY(48px)
        scale(0.985);

    filter:none;

    transition:
        transform 1.7s cubic-bezier(.16,1,.3,1),
        opacity 1.4s ease;

    will-change:
        transform,
        opacity,
        filter;
}

.fade-in.visible,
.reveal.active,
.scroll-rise.is-visible{
    opacity:1;

    transform:
        translateY(0)
        scale(1);

    filter:blur(0);
}

.intro,
.work-item,
.text-section,
.quote-section{
    opacity:0;
    transform:translateY(18px);

    transition:
        opacity 1.1s ease,
        transform 1.1s ease;
}

.text-section.visible,
.quote-section.visible{
    opacity:1;
    transform:none;
}

@keyframes headerFade{
    from{
        opacity:0;
        transform:translateY(-30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes imageReveal{
    from{
        opacity:0;
        transform:scale(1.022);
        filter:brightness(0.96);
    }

    to{
        opacity:1;
        transform:scale(1);
        filter:brightness(1);
    }
}

/* =========================
   MOBILE
   ========================= */

@media (max-width:900px){
    .about-hero{
        width:88%;
        padding-top:40px;
        margin-bottom:100px;
    }

    .about-hero-inner{
        grid-template-columns:1fr;
        gap:36px;
    }

   .about-portrait{
    display:block;
    grid-column:auto;
    width:100%;
    margin:0;
}

    .about-portrait img{
        display:block;
        width:100%;
        max-width:320px;
        height:auto;
    }

    .about-hero .section-label,
    .about-hero h1,
    .about-hero p{
        grid-column:auto;
    }

    .about-hero h1{
        margin:0 0 28px;
        font-size:42px;
        line-height:1;
    }

    .about-hero p,
    .about-text p{
        font-size:18px;
    }
}

@media (max-width:768px){

    body{
        padding-top:92px;
    }

    .work-large,
.work-medium{
    margin-bottom:84px;
}

.work-caption{
    padding-bottom:0;
}

.work-item{
    margin-bottom:72px !important;
}

    section{
        scroll-margin-top:90px;
    }

    .site-header{
        padding:16px 18px;
        height:auto;
        align-items:center;
    }

    .logo{
        width:34px;
        height:34px;
    }

    .main-nav{
        gap:14px;
    }

    .main-nav a{
        font-size:12px;
    }

    .theme-toggle{
        padding:7px 10px;
        font-size:11px;
    }

    .page{
    padding-top:118px;
}

    .intro{
    padding:0 26px 72px;
}

    .intro h1{
    font-size:50px;
    line-height:0.96;
    margin-bottom:26px;
    letter-spacing:-0.06em;
}

    .intro p{
    font-size:18px;
    line-height:1.62;
    opacity:0.76;
}

    .works{
    padding-top:96px;
}

    .work-item{
    width:92%;
    margin:0 auto 104px;
}

    .work-image::after{
        display:none;
    }

    .work-caption{
        padding:20px 24px 0;
    }

    .about-section,
    .bio-section{
        display:block;
    }

    .about-section h2,
    .bio-section h2{
        margin-bottom:24px;
    }

    .text-section{
    padding:90px 80px;
}

    .text-section h2{
        font-size:42px;
    }

    .text-section p{
        font-size:24px;
    }

    .site-footer{
        margin:120px auto 44px;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        font-size:11px;
    }

    .lightbox{
        padding:72px 14px 32px;
    }

    .lightbox img{
        max-width:92vw;
        max-height:76vh;
    }

    .lightbox-content{
        max-width:92vw;
        max-height:88vh;
    }

    .lightbox-nav{
        font-size:34px;
        opacity:0.32;
    }

    .lightbox-nav.prev{
        left:10px;
    }

    .lightbox-nav.next{
        right:10px;
    }

    .lightbox-close{
        top:18px;
        right:20px;
        font-size:34px;
    }

    .lightbox-caption{
        margin-top:8px;
        font-size:12px;
        line-height:1.45;
    }

    .lightbox-counter{
        font-size:10px;
        opacity:0.32;
    }

    .series-page{
        padding-top:80px;
    }

    .series-intro{
        width:min(820px, 86%);
        margin:60px auto 60px;
        padding:0;
        text-align:left;
    }

    .series-intro h1{
        font-size:clamp(46px, 12vw, 64px);
    }

    .series-intro p{
        max-width:680px;
        font-size:18px;
        line-height:1.75;
        opacity:0.72;
    }

    .series-work,
    .series-work:nth-of-type(2n),
    .series-work.wide,
    .series-work.final,
    .series-work.left,
    .series-work.right{
        width:94% !important;
        max-width:none;
        margin:0 auto 80px !important;
    }

    .series-work img,
    .series-work.wide img{
        width:100%;
        max-height:none;
    }

    .series-caption{
        width:100%;
        padding:0 24px;
        margin-top:24px;
    }

    .series-caption h2{
        margin:8px 0 14px;
        font-size:clamp(28px, 8vw, 52px);
        line-height:1.05;
        font-weight:400;
        letter-spacing:-0.05em;
    }

    .series-note{
        margin:40px auto 120px;
        padding:0 24px;
        font-size:18px;
    }

    .series-detail{
        width:86%;
        margin:90px auto 120px;
    }

    .series-detail::before{
        display:none;
    }
}

/* GLOBAL INTERACTION CALMNESS */

a,
button{
    transition:
        opacity 0.45s ease,
        color 0.45s ease,
        border-color 0.45s ease,
        transform 0.45s cubic-bezier(.19,1,.22,1);
}

button{
    font-family:inherit;
}

/* ABOUT EDITORIAL GRID */

.studio-grid{
    width:min(1240px, 90%);

    margin:160px auto 130px;

    display:grid;

    grid-template-columns:1.15fr 0.85fr;

    gap:96px;

    align-items:start;
}

.studio-grid .cinematic-image{
    margin:0;
}

.studio-grid-left img{
    aspect-ratio:auto;

    object-fit:contain;

    background:rgba(255,255,255,0.22);
}

.studio-grid-left{
    transform:translateY(-26px);
}

.studio-grid-right{
    padding-top:260px;

    width:82%;
    margin-left:auto;

    transform:none;
}

.studio-grid-right img{
    aspect-ratio:auto;

    object-fit:contain;

    background:rgba(255,255,255,0.22);
}

.about-note{
    width:min(700px, 78%);

    margin:-20px auto 170px;

    text-align:center;
}

.about-note p{
    font-size:24px;

    line-height:1.8;

    letter-spacing:0.01em;

    opacity:0.68;
}

.about-ending-image{
    width:min(1220px, 92%);

    margin:60px auto 180px;
}

/* ABOUT IMAGE ATMOSPHERE */

.studio-grid img,
.about-ending-image img{
    transition:
        transform 1.4s cubic-bezier(.19,1,.22,1),
        filter 1.2s ease,
        box-shadow 1.2s ease;
}

.studio-grid img:hover,
.about-ending-image img:hover{
    transform:
        scale(1.012)
        translateY(-2px);

    filter:
        brightness(1.01)
        contrast(1.015)
        saturate(1.02);

    box-shadow:
        0 24px 70px rgba(0,0,0,0.075),
        0 8px 26px rgba(0,0,0,0.045);
}

/* CONTACT FORM */

.contacts-section{
    max-width:720px;
}

.contact-intro{
    max-width:620px;
}

.contact-form{
    width:min(560px, 100%);
    margin-top:42px;

    display:flex;
    flex-direction:column;
    gap:22px;

    color:inherit;
}

.contact-form input,
.contact-form textarea{
    width:100%;

    padding:0 0 16px;

    border:none;
    border-bottom:1px solid currentColor;

    background:transparent;

    color:inherit;

    font:inherit;
    font-size:16px;
    line-height:1.6;

    outline:none;

    opacity:0.78;

    transition:
        border-color 0.5s ease,
        opacity 0.5s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:currentColor;
    opacity:0.38;
}

.contact-form input:focus,
.contact-form textarea:focus{
    opacity:1;
}

.contact-form textarea{
    resize:vertical;
    min-height:110px;
}

.contact-form button{
    align-self:flex-start;

    margin-top:10px;
    padding:14px 26px;

    background:transparent;

    border:1px solid currentColor;
    border-radius:999px;

    color:inherit;

    font:inherit;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;

    cursor:pointer;

    opacity:0.68;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        background 0.5s ease;
}

.contact-form button:hover{
    opacity:1;
    transform:translateY(-2px);
    background:rgba(0,0,0,0.035);
}

body.dark-theme .contact-form button:hover{
    background:rgba(255,255,255,0.06);
}

.form-success-message{
    display:none;

    margin-top:12px;

    font-size:14px;
    line-height:1.7;

    opacity:0.55;
}

.form-success-message.visible{
    display:block;
}

body.dark-theme .contact-form input:-webkit-autofill,
body.dark-theme .contact-form input:-webkit-autofill:hover,
body.dark-theme .contact-form input:-webkit-autofill:focus{
    -webkit-text-fill-color:#f5f5f0 !important;
    caret-color:#f5f5f0 !important;
    -webkit-box-shadow:0 0 0 1000px #0b0b0c inset !important;
    box-shadow:0 0 0 1000px #0b0b0c inset !important;
}

body:not(.dark-theme) .contact-form input:-webkit-autofill,
body:not(.dark-theme) .contact-form input:-webkit-autofill:hover,
body:not(.dark-theme) .contact-form input:-webkit-autofill:focus{
    -webkit-text-fill-color:#111 !important;
    caret-color:#111 !important;
    -webkit-box-shadow:0 0 0 1000px #f5f1ea inset !important;
    box-shadow:0 0 0 1000px #f5f1ea inset !important;
}
/* ABOUT CONTACT SECTION FIX */

.contact-section{
    width:min(760px, 88%);
    margin:220px auto 180px;
}

.contact-inner{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.contact-section h2{
    margin:18px 0 28px;
    font-size:54px;
    line-height:0.95;
    font-weight:400;
    letter-spacing:-0.04em;
}

.contact-text{
    max-width:420px;
    margin:0 0 56px;
    font-size:18px;
    line-height:1.9;
    opacity:0.72;
}

.footer-note-link{
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;

    color:inherit;
    text-decoration:none;

    opacity:0.45;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.footer-note-link:hover{
    opacity:1;
    transform:translateY(-1px);
}

/* SOFT PAGE LOAD */
body{
    animation:pageFadeIn 0.9s ease forwards;
}

@keyframes pageFadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

/* IMAGE REVEAL */

.cinematic-image,
.work-item{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

.cinematic-image.visible,
.work-item.visible{
    opacity:1;
    transform:translateY(0);
}

/* GALLERY PAUSE */

.gallery-pause{
    width:100%;

    padding:
        70px 40px
        80px;

    display:flex;
    justify-content:center;

    text-align:center;
}

.gallery-pause::before{
    content:"";

    width:64px;
    height:1px;

    background:rgba(0,0,0,0.14);

    display:block;

    margin:0 auto 42px;
}

.gallery-pause p{
    max-width:620px;

    font-size:28px;
    line-height:1.6;

    letter-spacing:-0.03em;

    opacity:0.42;
}

/* HERO WORK */

.hero-work{
    width:92%;
}

.hero-work .work-image{
    max-width:1400px;
    margin:0 auto;
}

.hero-work .work-image img{
    width:100%;

    max-height:920px;

    object-fit:cover;
}

.hero-work .work-caption{
    padding-top:42px;
}

/* CLOSING NOTE */

.closing-note{
    padding:
        120px 40px
        180px;

    text-align:center;
}

.closing-note p{
    max-width:620px;

    margin:0 auto;

    font-size:24px;
    line-height:1.65;

    letter-spacing:-0.025em;

    opacity:0.46;
}

/* SERIES LINK */

.series-link{
    display:inline-block;

    margin:
        8px 0
        12px;

    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;

    color:inherit;
    text-decoration:none;

    opacity:0.42;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.series-link:hover{
    opacity:1;
    transform:translateY(-1px);
}

/* SERIES MARKER */

.series-marker{
    width:76%;

    margin:
        -150px auto
        150px;

    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;

    opacity:0.34;
}

/* ATMOSPHERIC FRAGMENT */

.atmospheric-fragment{
    width:24%;

    margin:
        -10px
        0
        170px
        16%;

    opacity:0.82;
}

.atmospheric-fragment img{
    width:100%;
    display:block;

    border-radius:2px;
}

/* Work size system */

.work-large{
    width:min(92vw, 1400px);

    margin-left:auto;
    margin-right:auto;

    margin-bottom:160px;
}

.work-medium{
    width:min(86vw, 1100px);

    margin-left:auto;
    margin-right:auto;

    margin-bottom:120px;
}

.narrow-work{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:110px;
}

/* Optional composition offsets */

.offset-left{
    margin-left:4%;
    margin-right:auto;
}

.offset-right{
    margin-left:auto;
    margin-right:4%;
}

.offset-center{
    margin-left:auto;
    margin-right:auto;

    transform:translateX(2%);
}

.offset-left-soft{
    margin-left:8%;
    margin-right:auto;
}

.offset-right-soft{
    margin-left:auto;
    margin-right:8%;
}

/* ==================================================
   SERIES INDEX
================================================== */

.series-index-page{
    max-width:1200px;
    margin:0 auto;
    padding:
        120px 48px
        180px;
}

.series-list{
    margin-top:56px;
}

.series-entry{
    padding:
        56px 0
        64px;

    border-top:
        1px solid rgba(0,0,0,0.08);

    max-width:760px;

    transition:
        transform 0.5s ease,
        opacity 0.5s ease;
}

.series-entry:last-child{
    border-bottom:
        1px solid rgba(0,0,0,0.08);
}

.series-status{
    display:block;

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:0.14em;

    text-transform:uppercase;

    opacity:0.46;
}

.series-entry h2{
    margin:0 0 18px;

    font-size:56px;

    line-height:0.96;

    font-weight:400;

    letter-spacing:-0.05em;
}

.series-entry-link{
    color:inherit;
    text-decoration:none;

    display:block;
}

.clickable-series{
    cursor:pointer;
}

.series-entry p{
    max-width:560px;

    margin:0;

    font-size:17px;

    line-height:1.8;

    opacity:0.68;
}

.series-entry:hover{
    transform:translateX(10px);
}

.current-series h2{
    opacity:1;
}

.muted-series{
    opacity:0.72;
}

.work-fragment{
    width:min(62vw, 720px);

    margin-left:auto;
    margin-right:auto;

    margin-bottom:140px;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

.work-image img{
    transition:
        transform 1.8s cubic-bezier(.19,1,.22,1),
        filter 0.8s ease;

    will-change:
        transform,
        filter;
}

.work-image:hover img{
    transform:scale(1.012);
}

/* =========================================
   FINAL FIXES / SERIES / LIGHTBOX
========================================= */

/* SERIES PAGE */

.series-works .series-work{
    width:min(1120px, 86vw) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.series-works .series-work.wide{
    width:min(980px, 92vw) !important;
}

.series-works .series-work.final{
    width:min(1040px, 94vw) !important;
    margin-top:120px !important;
    margin-bottom:220px !important;
}

.series-works .series-work img{
    width:100% !important;
    max-height:76vh;
    object-fit:contain;
    cursor:zoom-in;
    transition:
        transform 0.9s ease,
        filter 0.9s ease;
}

.series-works .series-work:hover img{
    transform:scale(1.012);
    filter:contrast(1.03) saturate(1.02);
}

.series-work.final img{
    max-height:720px;
    object-fit:cover;
}

.series-work:nth-of-type(2){
    width:min(860px, 88%) !important;
}

.series-work:nth-of-type(3){
    width:min(760px, 84%) !important;
}

.series-note{
    margin:120px auto;
    max-width:520px;
}

.series-detail{
    width:min(340px, 74vw) !important;
    margin:120px auto !important;
}

.series-detail img{
    width:100% !important;
    max-height:70vh;
    object-fit:contain;
    display:block;
}

.series-detail p{
    font-size:11px;
    line-height:1.7;
    opacity:0.72;
    margin-top:18px;
}

.series-caption p{
    line-height:1.7;
}

/* MAIN GALLERY LIGHTBOX */

.lightbox{
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:rgba(8,8,8,0.92) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.lightbox.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.lightbox-content{
    max-height:90vh !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

.lightbox .lightbox-content img{
    max-height:76vh !important;
    max-width:86vw !important;
    width:auto !important;
    height:auto !important;

    object-fit:contain !important;

    box-shadow:0 20px 70px rgba(0,0,0,0.45) !important;
}

.lightbox-caption,
.lightbox-counter{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
}

.lightbox-caption{
    flex-shrink:0 !important;

    margin-top:18px !important;

    color:rgba(255,255,255,0.78) !important;

    text-align:center !important;

    font-size:12px !important;
    line-height:1.6 !important;
}

.lightbox-counter{
    margin-top:8px !important;

    color:rgba(255,255,255,0.38) !important;

    font-size:11px !important;
}

/* SERIES PAGE SIMPLE LIGHTBOX */

.art-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(8,8,8,0.92);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.art-lightbox.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.art-lightbox img{
    max-width:92vw;
    max-height:92vh;
    width:auto;
    height:auto;

    object-fit:contain;

    box-shadow:0 20px 70px rgba(0,0,0,0.45);

    cursor:zoom-out;
}

/* ABOUT HERO TEXT FIX */

.about-hero .section-label,
.about-hero h1,
.about-hero p{
    grid-column:2 !important;
}

.about-hero .section-label{
    align-self:start;
    margin-top:0 !important;
}

.about-hero h1{
    margin:42px 0 34px !important;
}

.about-hero p{
    margin-top:0 !important;
}

/* ABOUT LAYOUT FIX */

.about-portrait{
    grid-column:1;
}

.about-copy{
    grid-column:2;
    align-self:center;
    max-width:520px;
}

.about-copy .section-label{
    margin-bottom:26px;
}

.about-copy h1{
    margin-bottom:34px;
}

.art-lightbox-counter{
    position:fixed;

    bottom:18px;
    left:50%;

    transform:translateX(-50%);

    color:rgba(255,255,255,0.58);

    font-size:12px;
    letter-spacing:0.12em;

    pointer-events:none;

    z-index:100001;
}

.art-lightbox-arrow{
    position:fixed;
    top:50%;
    z-index:100001;

    transform:translateY(-50%);

    border:none;
    background:transparent;

    color:rgba(255,255,255,0.42);

    font-size:42px;
    font-weight:200;

    cursor:pointer;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        color 0.35s ease;
}

.art-lightbox-arrow:hover{
    color:rgba(255,255,255,0.86);
    transform:translateY(-50%) scale(1.08);
}

.art-lightbox-prev{
    left:34px;
}

.art-lightbox-next{
    right:34px;
}

.art-lightbox-close{
    position:fixed;

    top:34px;
    right:38px;

    z-index:100001;

    width:44px;
    height:44px;

    border:none;
    background:transparent;

    color:rgba(255,255,255,0.72);

    font-size:34px;
    line-height:1;

    cursor:pointer;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        color 0.25s ease;
}

.art-lightbox-close:hover{
    color:white;
    transform:scale(1.08);
}

.seo-description{
    width:min(760px, 84%);
    margin:0 auto 80px;
}

.seo-description p{
    font-size:15px;
    line-height:1.8;
    opacity:0.42;
}

.seo-description{
    width:min(760px, 84%);
    margin:0 auto 90px;
}

.seo-description p{
    font-size:15px;
    line-height:1.9;

    opacity:0.42;

    text-align:left;
}

@media (max-width:900px){
    .about-copy{
        grid-column:auto !important;
        padding-top:0 !important;
    }

    .about-portrait{
        display:block !important;
        grid-column:auto !important;
        order:0 !important;
    }

    .about-portrait img{
        display:block !important;
        width:100% !important;
        max-width:320px !important;
        height:auto !important;
    }
}

#contacts{
    scroll-margin-top:140px;
}

.series-note-en{
    margin-top:42px;

    max-width:420px;

    font-size:12px;
    line-height:1.7;

    color:rgba(255,255,255,0.34);
}

body:not(.dark-theme) .series-note-en{
    color:rgba(0,0,0,0.28);
}

.series-note-en{
    font-size:17Ыpx !important;
    color:rgba(0,0,0,0.5) !important;
}

body.dark-theme .seo-description p{
    color:rgba(255,255,255,0.45);
}

body.dark-theme .series-index-page .series-note-en{
    color:rgba(255,255,255,0.45) !important;
}

.about-link{
    display:inline-block;
    margin-top:18px;

    font-size:13px;
    text-decoration:none;

    opacity:0.65;

    transition:opacity 0.3s ease;
}

.about-link:hover{
    opacity:1;
}

.site-info-section::before{
    display:none;
}

.site-info-section{
    padding-bottom:60px;
}

.bio-section{
    padding-top:60px;
}

/*==================================================
NOTES
==================================================*/

.notes-page{
    width:min(1380px,92%);
    margin:0 auto;
    padding:180px 0 120px;
}

.notes-intro{
    max-width:560px;
    margin-bottom:80px;
}

.notes-intro h1{
    margin:10px 0 18px;
    font-size:clamp(60px,6vw,82px);
    font-weight:400;
    letter-spacing:-0.05em;
}

.notes-intro p:not(.section-label){
    font-size:21px;
    line-height:1.75;
    max-width:500px;
}

.notes-viewer{
    width:100%;
}

.note{
    display:block;
}

.note-heading{
    display:flex;
    align-items:baseline;
    gap:18px;

    margin-bottom:34px;
}

.note-heading h2{
    margin:0;

    font-size:52px;
    font-weight:400;
    letter-spacing:-0.04em;
}

.note-heading p{
    margin:0;

    font-size:19px;
    opacity:.58;
}

.note-layout{
    display:grid;
    grid-template-columns:minmax(0,2.1fr) 290px;
    gap:20px;
    align-items:center;

    max-width:980px;
    margin:0 auto;
}

.note-main-image img{
    width:100%;
    max-height:46vh;
    display:block;
    object-fit:contain;
}

.note-side-images{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    width:100%;
}

.note-side-images img{
    width:100%;
    max-height:22vh;
    display:block;
    height:auto;
    object-fit:contain;
}

.notes-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:26px;
    margin-top:28px;
}

.notes-arrow{
    border:none;
    background:none;
    cursor:pointer;
    font-size:28px;
    color:inherit;
}

.notes-counter{
    font-size:15px;
    opacity:.55;
}

.notes-intro{
    margin-bottom:46px;
}

.notes-page{
    padding:130px 0 80px;
}

.note{
    max-width:1120px;
    margin:0 auto;
}

.note-heading{
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:24px;
}

/* NOTES — tablet / narrow screens */

@media (max-width:900px){

    .notes-page{
        width:88%;
        padding:105px 0 54px;
    }

    .notes-intro{
        margin-bottom:32px;
    }

    .notes-intro h1{
        font-size:46px;
    }

    .note-heading{
        display:block;
        margin-bottom:18px;
    }

    .note-heading h2{
        font-size:34px;
    }

    .note-heading p{
        margin-top:6px;
        font-size:15px;
        line-height:1.45;
    }

    .note-layout{
        display:block;
        max-width:100%;
    }

    .note-main-image img{
        width:100%;
        max-height:38vh;
    }

    .note-side-images{
        width:max-content;
        max-width:100%;
        margin:12px auto 0;

        display:grid;
        grid-template-columns:auto auto;
        gap:10px;
        justify-content:center;
    }

    .note-side-images img{
        width:auto;
        max-width:42vw;
        max-height:18vh;
    }

    .notes-controls{
        margin-top:22px;
    }
}

/* NOTES — mobile compact version */

@media (max-width:700px){

    .notes-page{
        width:88%;
        padding:86px 0 42px;
    }

    .notes-intro{
        display:none;
    }

    .note-heading{
        margin-bottom:14px;
    }

    .note-heading h2{
        font-size:38px;
    }

    .note-heading p{
        margin-top:6px;
        font-size:16px;
        line-height:1.4;
    }

    .note-main-image img{
        max-height:34vh;
    }

    .note-side-images{
        margin-top:10px;
        gap:8px;
    }

    .note-side-images img{
        max-width:42vw;
        max-height:15vh;
    }

    .notes-controls{
        margin-top:18px;
    }
}

/* NOTES — phone landscape compact version */

@media (max-width:950px) and (orientation:landscape){

.notes-page{
    padding-top:18px !important;
    padding-bottom:18px !important;
}

.note-heading::before{
    margin-bottom:8px !important;
}

.note-heading{
    margin-bottom:8px !important;
}

.note-heading h2{
    font-size:26px !important;
}

.note-heading p{
    font-size:13px !important;
    margin-top:2px !important;
}

.note-main-image{
    max-width:420px !important;
}

.note-main-image img{
    max-height:22vh !important;
}

.note-side-images{
    max-width:420px !important;
    margin:6px auto 0 !important;
    gap:6px !important;
}

.note-side-images img{
    max-width:28vw !important;
    max-height:14vh !important;
}

.notes-controls{
    margin-top:8px !important;
}
}

/* NOTES — mobile label */

@media (max-width:700px),
       (max-width:950px) and (orientation:landscape){

    .note-heading::before{
        content:"визуальные записи / рабочие поиски";
        display:block;
        margin-bottom:22px;
        font-size:12px;
        letter-spacing:0.26em;
        text-transform:uppercase;
        opacity:0.45;
    }
}

/* NOTES — phone landscape one-screen layout */

@media (max-width:950px) and (orientation:landscape){

    .notes-page{
        width:88% !important;
        padding:24px 0 20px !important;
    }

    .notes-intro{
        display:none !important;
    }

    .note{
        max-width:100% !important;
    }

    .note-heading{
        max-width:100% !important;
        margin:0 0 10px !important;
    }

    .note-heading h2{
        font-size:28px !important;
        line-height:1 !important;
    }

    .note-heading p{
        font-size:13px !important;
        margin-top:4px !important;
    }

    .note-layout{
        display:grid !important;
        grid-template-columns:minmax(0,1.6fr) minmax(0,0.9fr) !important;
        gap:12px !important;
        align-items:start !important;
        max-width:760px !important;
        margin:0 auto !important;
    }

    .note-main-image img{
        width:100% !important;
        max-height:38vh !important;
        object-fit:contain !important;
    }

    .note-side-images{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        margin:0 !important;
        width:100% !important;
    }

    .note-side-images img{
        width:100% !important;
        max-height:18vh !important;
        object-fit:contain !important;
    }

    .notes-controls{
        margin-top:10px !important;
    }
}
/* HEADER — keep visible on mobile */

@media (max-width:700px){

    .site-header,
    .site-header.hide,
    .site-header.header-hidden{
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }
}