/* =========================================================
   ALEXIA ESPITIA — MODEL PORTFOLIO
   Premium one-page landing
   FINAL VERSION
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root{
    --bg: #f6f0e7;
    --bg-soft: #fbf8f3;

    --nude: #d8b6a4;
    --nude-dark: #b98772;

    --sage: #9aa48f;
    --sage-dark: #74806d;

    --terracotta: #c98b73;
    --terracotta-dark: #a96f59;

    --graphite: #4a4745;
    --graphite-soft: #6f6966;

    --white: #ffffff;

    --border: rgba(74, 71, 69, 0.12);

    --shadow:
        0 20px 50px rgba(80, 65, 55, 0.12);

    --shadow-soft:
        0 12px 30px rgba(80, 65, 55, 0.08);

    --radius-lg: 32px;
    --radius-md: 22px;
    --radius-sm: 14px;

    --header-height: 84px;

    --transition: 0.35s ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

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

html{
    scroll-behavior: smooth;
}

body{
    font-family: "DM Sans", sans-serif;

    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(216, 182, 164, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 30%,
            rgba(154, 164, 143, 0.12),
            transparent 30%
        ),
        var(--bg);

    color: var(--graphite);

    min-height: 100vh;

    overflow-x: hidden;
}

body.lightbox-open{
    overflow: hidden;
}

img{
    display: block;

    max-width: 100%;

    -webkit-user-drag: none;

    user-select: none;
}

a{
    color: inherit;
}

button,
a{
    -webkit-tap-highlight-color: transparent;
}

button{
    font: inherit;
}


/* =========================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3{
    font-family: "Playfair Display", serif;

    font-weight: 500;
}

p{
    color: var(--graphite-soft);
}

::selection{
    background: var(--nude);

    color: var(--white);
}


/* =========================================================
   4. LOADER
   ========================================================= */

.site-loader{
    position: fixed;

    inset: 0;

    display: grid;

    place-items: center;

    background: var(--bg);

    z-index: 9999;

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

.site-loader.hidden{
    opacity: 0;

    visibility: hidden;
}

.loader-inner{
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;
}

.loader-name{
    font-family: "Playfair Display", serif;

    font-size: clamp(2rem, 4vw, 4rem);

    letter-spacing: 0.03em;

    color: var(--graphite);
}

.loader-line{
    width: 140px;

    height: 1px;

    background: rgba(74,71,69,0.15);

    overflow: hidden;

    position: relative;
}

.loader-line::after{
    content: "";

    position: absolute;

    top: 0;

    left: -50%;

    width: 50%;

    height: 100%;

    background: var(--terracotta);

    animation: loaderLine 1.2s ease-in-out infinite;
}

@keyframes loaderLine{

    100%{
        left: 100%;
    }

}


/* =========================================================
   5. HEADER
   ========================================================= */

.site-header{
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--header-height);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 5vw;

    z-index: 1000;

    transition:
        background .45s ease,
        box-shadow .45s ease,
        backdrop-filter .45s ease,
        height .45s ease;
}

.site-header.scrolled{
    background:
        rgba(246, 240, 231, 0.88);

    backdrop-filter: blur(18px);

    box-shadow:
        0 1px 0 rgba(74,71,69,0.08);
}

.brand{
    text-decoration: none;

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.45rem;

    color: var(--graphite);

    letter-spacing: 0.01em;
}

.main-nav{
    display: flex;

    align-items: center;

    gap: 34px;
}

.nav-link{
    position: relative;

    text-decoration: none;

    font-size: 0.82rem;

    font-weight: 500;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color: var(--graphite-soft);

    transition:
        color var(--transition);
}

.nav-link::after{
    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 1px;

    background:
        var(--terracotta);

    transition:
        width var(--transition);
}

.nav-link:hover,
.nav-link.active{
    color: var(--graphite);
}

.nav-link:hover::after,
.nav-link.active::after{
    width: 100%;
}

.menu-toggle{
    display: none;

    width: 44px;

    height: 44px;

    border: none;

    background: transparent;

    cursor: pointer;

    position: relative;
}

.menu-toggle span{
    position: absolute;

    left: 8px;

    width: 28px;

    height: 1px;

    background:
        var(--graphite);

    transition:
        transform var(--transition);
}

.menu-toggle span:first-child{
    top: 17px;
}

.menu-toggle span:last-child{
    top: 26px;
}


/* =========================================================
   6. SECTION GLOBALS
   ========================================================= */

.section{
    position: relative;

    min-height: 100vh;

    padding:
        calc(var(--header-height) + 50px)
        6vw
        90px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

section[id]{
    scroll-margin-top:
        var(--header-height);
}

.section-heading{
    max-width: 720px;

    margin-bottom: 55px;
}

.section-heading.centered{
    text-align: center;

    margin-left: auto;

    margin-right: auto;
}

.section-number{
    display: inline-block;

    font-size: 0.72rem;

    letter-spacing: 0.16em;

    color: var(--terracotta);

    margin-bottom: 12px;
}

.section-kicker{
    font-size: 0.78rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: var(--sage-dark);

    margin-bottom: 12px;
}

.section-heading h2{
    font-size:
        clamp(3rem, 6vw, 6.6rem);

    line-height: 0.95;

    color: var(--graphite);
}


/* =========================================================
   7. HERO / PORTADA
   ========================================================= */

.hero-section{
    overflow: hidden;
}

.hero-background-accent{
    position: absolute;

    width:
        min(46vw, 680px);

    aspect-ratio: 1;

    right: -8vw;

    top: 8vh;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(216,182,164,0.35),
            rgba(154,164,143,0.18)
        );

    filter: blur(4px);

    opacity: 0.85;

    z-index: 0;
}

.hero-grid{
    width:
        min(1500px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    align-items: center;

    gap: 7vw;

    position: relative;

    z-index: 1;
}

.hero-copy{
    padding-left: 2vw;
}

.eyebrow{
    display: block;

    font-size: 0.78rem;

    font-weight: 500;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--sage-dark);

    margin-bottom: 26px;
}

.hero-title{
    line-height: 0.82;

    margin-bottom: 38px;
}

.hero-name,
.hero-surname{
    display: block;
}

.hero-name{
    font-size:
        clamp(5rem, 9vw, 10rem);

    color:
        var(--terracotta-dark);
}

.hero-surname{
    margin-left: 7vw;

    font-size:
        clamp(4.2rem, 8vw, 9rem);

    font-style: italic;

    color: var(--graphite);
}

.hero-intro{
    max-width: 620px;

    font-size:
        clamp(1rem, 1.25vw, 1.18rem);

    line-height: 1.85;
}

.hero-actions{
    display: flex;

    gap: 15px;

    margin-top: 38px;
}


/* =========================================================
   8. BUTTONS
   ========================================================= */

.btn{
    min-height: 50px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 0 28px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 0.82rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition);

    position: relative;

    overflow: hidden;

    isolation: isolate;
}

.btn::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.28) 45%,
            transparent 70%
        );

    transform:
        translateX(-130%);

    transition:
        transform .7s ease;

    z-index:-1;
}

.btn:hover::before{
    transform:
        translateX(130%);
}

.btn:hover{
    transform:
        translateY(-3px);
}

.btn-primary{
    background:
        var(--nude-dark);

    color: var(--white);
}

.btn-primary:hover{
    background:
        var(--terracotta-dark);
}

.btn-ghost{
    border:
        1px solid var(--border);

    background:
        rgba(255,255,255,0.25);

    color: var(--graphite);
}

.btn-ghost:hover{
    border-color:
        var(--nude-dark);

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


/* =========================================================
   9. HERO IMAGE
   ========================================================= */

.hero-visual{
    display: flex;

    justify-content: center;
}

.hero-image-frame{
    position: relative;

    width:
        min(100%, 620px);

    border-radius:
        260px 260px 34px 34px;

    overflow: hidden;

    box-shadow:
        var(--shadow);

    background:
        var(--bg-soft);

    transition:
        transform .7s
        cubic-bezier(.2,.8,.2,1),

        box-shadow .7s ease;
}

.hero-image-frame:hover{
    transform:
        translateY(-7px);

    box-shadow:
        0 35px 80px
        rgba(80,65,55,.18);
}

.hero-image{
    width: 100%;

    height:
        min(72vh, 820px);

    object-fit: cover;

    transition:
        transform 1s ease;
}

.hero-image-frame:hover
.hero-image{
    transform:
        scale(1.025);
}

.hero-image-label{
    position: absolute;

    bottom: 24px;

    left: 24px;

    padding:
        11px 18px;

    border-radius: 999px;

    background:
        rgba(246,240,231,0.74);

    backdrop-filter:
        blur(12px);

    color:
        var(--graphite);

    font-family:
        "Playfair Display",
        serif;

    font-style: italic;

    transition:
        transform .4s ease,
        background .4s ease;
}

.hero-image-frame:hover
.hero-image-label{
    transform:
        translateY(-3px);

    background:
        rgba(246,240,231,.88);
}

.scroll-indicator{
    position: absolute;

    left: 6vw;

    bottom: 30px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color:
        var(--graphite-soft);

    font-size: 0.72rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.scroll-indicator i{
    color:
        var(--terracotta);
}


/* =========================================================
   10. ABOUT ME
   ========================================================= */

.about-section{
    background:
        linear-gradient(
            90deg,
            rgba(154,164,143,0.10),
            transparent 35%
        );
}

.about-layout{
    width:
        min(1450px, 100%);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(500px, 1.05fr)
        minmax(360px, 0.95fr);

    gap: 7vw;

    align-items: center;
}

.about-gallery{
    min-height: 680px;

    position: relative;
}

.about-photo{
    position: absolute;

    overflow: hidden;

    box-shadow:
        var(--shadow-soft);

    background:
        var(--white);

    transition:
        transform .6s
        cubic-bezier(.2,.8,.2,1),

        box-shadow .6s ease;
}

.about-photo:hover{
    z-index: 10;

    box-shadow:
        0 30px 70px
        rgba(80,65,55,.18);
}

.about-photo img{
    width: 100%;

    height: 100%;

    object-fit: cover;
}

.about-photo-main{
    width: 56%;

    height: 78%;

    left: 9%;

    top: 8%;

    transform:
        rotate(-3deg);

    border-radius: 8px;
}

.about-photo-secondary{
    width: 40%;

    height: 50%;

    right: 3%;

    top: 2%;

    transform:
        rotate(4deg);

    border-radius: 8px;
}

.about-photo-third{
    width: 36%;

    height: 42%;

    right: 4%;

    bottom: 3%;

    transform:
        rotate(-2deg);

    border-radius: 8px;
}

.about-photo-main:hover{
    transform:
        rotate(-1deg)
        translateY(-10px)
        scale(1.02);
}

.about-photo-secondary:hover{
    transform:
        rotate(2deg)
        translateY(-10px)
        scale(1.02);
}

.about-photo-third:hover{
    transform:
        rotate(-1deg)
        translateY(-10px)
        scale(1.02);
}

.about-copy{
    max-width: 600px;
}

.about-accent{
    display: inline-block;

    color:
        var(--sage-dark);

    font-size: 0.78rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    margin-bottom: 26px;
}

.about-copy p{
    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(1.5rem, 2.4vw, 2.35rem);

    line-height: 1.5;

    margin-bottom: 26px;

    color:
        var(--graphite);
}

.about-signature{
    margin-top: 35px;

    font-family:
        "Playfair Display",
        serif;

    font-style: italic;

    font-size: 3.2rem;

    color:
        var(--terracotta-dark);
}


/* =========================================================
   11. POLAROIDS / MEDIDAS
   ========================================================= */

.polaroids-section{
    background:
        var(--bg-soft);
}

.polaroids-grid{
    width:
        min(1450px, 100%);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1.25fr
        0.75fr;

    gap: 55px;

    align-items: center;
}

.measurements-images{
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}

.measure-photo{
    overflow: hidden;

    background:
        var(--white);

    padding:
        10px 10px 36px;

    box-shadow:
        var(--shadow-soft);

    transform-origin: center;

    transition:
        transform var(--transition);
}

.measure-photo:nth-child(1){
    transform:
        rotate(-2deg);
}

.measure-photo:nth-child(2){
    transform:
        rotate(1.5deg);
}

.measure-photo:nth-child(3){
    transform:
        rotate(-1deg);
}

.measure-photo:hover{
    transform:
        translateY(-8px)
        rotate(0deg);
}

.measure-photo img{
    width: 100%;

    height: 520px;

    object-fit: cover;
}

.measurements-panel{
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 26px;

    padding: 40px;

    border:
        1px solid var(--border);

    background:
        rgba(255,255,255,0.55);

    backdrop-filter:
        blur(12px);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-soft);
}

.measurement-language{
    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    margin-bottom: 26px;

    border-radius: 50%;

    background:
        var(--sage);

    color:
        var(--white);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.1em;
}

.measurement-list{
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.measurement-list > div{
    padding-bottom: 13px;

    border-bottom:
        1px solid var(--border);
}

.measurement-list dt{
    font-size: 0.72rem;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--graphite-soft);

    margin-bottom: 5px;
}

.measurement-list dd{
    font-family:
        "Playfair Display",
        serif;

    font-size: 1.6rem;

    color:
        var(--graphite);
}

.measurement-divider{
    width: 1px;

    height: 100%;

    background:
        var(--border);
}


/* =========================================================
   12. PORTFOLIO
   ========================================================= */

.portfolio-section{
    min-height: auto;

    padding-bottom: 130px;
}

.portfolio-heading-wrap{
    width:
        min(1450px, 100%);

    margin:
        0 auto 40px;

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap: 40px;
}

.portfolio-intro{
    max-width: 500px;

    margin-bottom: 55px;

    font-size: 1.05rem;

    line-height: 1.75;
}

.portfolio-grid{
    width:
        min(1450px, 100%);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    gap: 20px;
}

.portfolio-card{
    position: relative;

    min-height: 420px;

    overflow: hidden;

    cursor: pointer;

    border-radius:
        var(--radius-md);

    background: #ded7ce;

    box-shadow:
        var(--shadow-soft);

    transition:
        transform .55s
        cubic-bezier(.2,.8,.2,1),

        box-shadow .55s ease;
}

.portfolio-card:hover{
    transform:
        translateY(-7px);

    box-shadow:
        0 30px 70px
        rgba(70,55,48,.17);
}

.portfolio-card:nth-child(6n + 1),
.portfolio-card:nth-child(6n + 4){
    grid-column:
        span 7;
}

.portfolio-card:nth-child(6n + 2),
.portfolio-card:nth-child(6n + 3),
.portfolio-card:nth-child(6n + 5),
.portfolio-card:nth-child(6n + 6){
    grid-column:
        span 5;
}

.portfolio-card:nth-child(4n){
    min-height: 520px;
}

.portfolio-card-image{
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}

.portfolio-card::after{
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(32,29,27,0.72),
            rgba(32,29,27,0.04) 55%
        );

    transition:
        background var(--transition);
}

.portfolio-card:hover
.portfolio-card-image{
    transform:
        scale(1.06);
}

.portfolio-card:hover::after{
    background:
        linear-gradient(
            to top,
            rgba(32,29,27,0.80),
            rgba(32,29,27,0.10) 65%
        );
}

.portfolio-card-copy{
    position: absolute;

    left: 28px;

    right: 28px;

    bottom: 26px;

    z-index: 2;

    color: white;

    transition:
        transform .55s
        cubic-bezier(.2,.8,.2,1);
}

.portfolio-card:hover
.portfolio-card-copy{
    transform:
        translateY(-7px);
}

.portfolio-card-copy h3{
    font-size:
        clamp(1.8rem, 3vw, 3.4rem);

    line-height: 1;

    margin-bottom: 8px;
}

.portfolio-card-copy p{
    color:
        rgba(255,255,255,0.80);

    font-size: 0.72rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.portfolio-card-index{
    position: absolute;

    top: 22px;

    right: 22px;

    z-index: 3;

    min-width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 999px;

    background:
        rgba(246,240,231,0.72);

    backdrop-filter:
        blur(10px);

    color:
        var(--graphite);

    font-size: 0.75rem;

    transition:
        transform .45s ease,
        background .45s ease;
}

.portfolio-card:hover
.portfolio-card-index{
    transform:
        rotate(6deg)
        scale(1.08);

    background:
        rgba(246,240,231,.92);
}


/* =========================================================
   13. CONTACT
   ========================================================= */

.contact-section{
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(216,182,164,0.24),
            rgba(154,164,143,0.16)
        );
}

.contact-inner{
    width:
        min(1350px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(380px, 1.1fr);

    gap: 8vw;

    align-items: center;
}

.contact-copy h2{
    font-size:
        clamp(4rem, 7vw, 8rem);

    line-height: 0.95;

    margin-bottom: 35px;
}

.contact-thanks{
    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(1.8rem, 3vw, 3rem);

    color:
        var(--terracotta-dark);

    margin-bottom: 24px;
}

.contact-description{
    max-width: 540px;

    line-height: 1.8;
}

.contact-links{
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.contact-card{
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 20px;

    align-items: center;

    padding: 24px;

    border-radius:
        var(--radius-md);

    text-decoration: none;

    background:
        rgba(255,255,255,0.60);

    border:
        1px solid
        rgba(255,255,255,0.7);

    backdrop-filter:
        blur(15px);

    box-shadow:
        var(--shadow-soft);

    transition:
        transform var(--transition),
        background var(--transition);

    position: relative;

    overflow: hidden;
}

.contact-card:hover{
    transform:
        translateX(8px);

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

.contact-card::after{
    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

    background:
        rgba(201,139,115,.10);

    transition:
        width .55s ease,
        height .55s ease;
}

.contact-card:hover::after{
    width:220px;

    height:220px;
}

.contact-icon,
.contact-info,
.contact-arrow{
    position:relative;

    z-index:2;
}

.contact-icon{
    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--nude);

    color:
        var(--white);

    font-size: 1.35rem;

    transition:
        transform .4s ease,
        background .4s ease;
}

.contact-card:hover
.contact-icon{
    transform:
        scale(1.08);

    background:
        var(--terracotta);
}

.contact-info{
    display: flex;

    flex-direction: column;

    min-width: 0;
}

.contact-info small{
    margin-bottom: 4px;

    color:
        var(--graphite-soft);

    font-size: 0.7rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.contact-info strong{
    color:
        var(--graphite);

    font-size: 1rem;

    overflow-wrap: anywhere;
}

.contact-arrow{
    color:
        var(--terracotta-dark);
}

.contact-decoration{
    position: absolute;

    right: -2vw;

    bottom: -2vw;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(5rem, 12vw, 14rem);

    white-space: nowrap;

    color:
        rgba(74,71,69,0.045);

    pointer-events: none;
}


/* =========================================================
   14. FOOTER
   ========================================================= */

.site-footer{
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap: 30px;

    padding:
        38px 6vw;

    border-top:
        1px solid var(--border);

    background:
        var(--bg);
}

.footer-brand{
    font-family:
        "Playfair Display",
        serif;

    font-size: 1.55rem;

    color:
        var(--graphite);
}

.footer-meta{
    text-align: right;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.footer-meta p{
    font-size: 0.72rem;

    letter-spacing: 0.05em;

    color:
        var(--graphite-soft);
}


/* =========================================================
   15. LIGHTBOX — RESPONSIVE IMAGE VIEWER
   ========================================================= */

.lightbox{
    position: fixed;

    inset: 0;

    z-index: 3000;

    visibility: hidden;

    opacity: 0;

    transition:
        visibility var(--transition),
        opacity var(--transition);
}

.lightbox.open{
    visibility: visible;

    opacity: 1;
}

.lightbox-backdrop{
    position: absolute;

    inset: 0;

    background:
        rgba(35,31,29,0.90);

    backdrop-filter:
        blur(10px);
}


/* ----- Main dialog ----- */

.lightbox-dialog{
    position: relative;

    z-index: 1;

    width:
        min(1200px, calc(100% - 40px));

    height:
        calc(100vh - 40px);

    height:
        calc(100dvh - 40px);

    max-height:
        920px;

    margin:
        20px auto;

    display: flex;

    flex-direction: column;

    background:
        var(--bg-soft);

    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.30);

    transform:
        translateY(18px)
        scale(.985);

    transition:
        transform .4s
        cubic-bezier(.2,.8,.2,1);
}

.lightbox.open
.lightbox-dialog{
    transform:
        translateY(0)
        scale(1);
}


/* ----- Close button ----- */

.lightbox-close{
    position: absolute;

    top: 18px;

    right: 18px;

    z-index: 10;

    width: 46px;

    height: 46px;

    display: grid;

    place-items: center;

    border: none;

    border-radius: 50%;

    background:
        rgba(246,240,231,0.88);

    color:
        var(--graphite);

    cursor: pointer;

    font-size: 1.1rem;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.10);

    transition:
        transform .25s ease,
        background .25s ease;
}

.lightbox-close:hover{
    transform:
        rotate(5deg)
        scale(1.05);

    background:
        var(--white);
}


/* ----- Image viewing area ----- */

.lightbox-media{
    position: relative;

    flex:
        1 1 0;

    min-height: 0;

    min-width: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        18px 72px;

    background:
        #e9e1d7;

    overflow: hidden;
}


/*
   Subtle background treatment.

   This is especially useful when a portrait image
   leaves free space on both sides.
*/

.lightbox-media::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.34),
            transparent 68%
        );

    pointer-events:none;
}


/*
   IMPORTANT:
   The image is never forced to 100% width or height.

   max-width + max-height allow each image to preserve
   its original aspect ratio whether portrait,
   landscape or square.
*/

.lightbox-media img{
    position: relative;

    z-index: 1;

    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    object-position: center;

    opacity: 1;

    transition:
        opacity .25s ease,
        transform .5s ease;

    filter:
        drop-shadow(
            0 12px 25px
            rgba(40,35,32,.10)
        );
}


/* ----- Previous / next arrows ----- */

.lightbox-nav{
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 5;

    width: 50px;

    height: 50px;

    display: grid;

    place-items: center;

    border: none;

    border-radius: 50%;

    background:
        rgba(246,240,231,0.86);

    color:
        var(--graphite);

    cursor: pointer;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.08);

    transition:
        background var(--transition),
        transform var(--transition);
}

.lightbox-nav:hover{
    background:
        var(--white);
}

.lightbox-prev{
    left: 16px;
}

.lightbox-next{
    right: 16px;
}


/* ----- Caption ----- */

.lightbox-caption{
    flex:
        0 0 auto;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 30px;

    padding:
        18px 28px 14px;

    background:
        var(--bg-soft);

    border-top:
        1px solid
        rgba(74,71,69,.07);
}

.lightbox-caption h3{
    margin-top: 4px;

    font-size:
        clamp(1.35rem, 2vw, 1.8rem);

    line-height: 1.1;
}

.lightbox-subtitle{
    font-size: 0.68rem;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--sage-dark);
}

.lightbox-counter{
    flex: 0 0 auto;

    color:
        var(--graphite-soft);

    font-size: 0.8rem;
}


/* ----- Thumbnails ----- */

.lightbox-thumbnails{
    flex:
        0 0 auto;

    display: flex;

    gap: 10px;

    min-height: 0;

    padding:
        0 28px 18px;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        var(--nude)
        transparent;
}

.lightbox-thumbnails::-webkit-scrollbar{
    height: 5px;
}

.lightbox-thumbnails::-webkit-scrollbar-track{
    background:
        transparent;
}

.lightbox-thumbnails::-webkit-scrollbar-thumb{
    background:
        var(--nude);

    border-radius:
        999px;
}

.lightbox-thumb{
    width: 56px;

    height: 70px;

    flex:
        0 0 auto;

    border:
        2px solid transparent;

    padding: 0;

    background:
        transparent;

    cursor: pointer;

    opacity: 0.55;

    overflow: hidden;

    border-radius: 4px;

    transition:
        opacity var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.lightbox-thumb:hover{
    opacity: .85;

    transform:
        translateY(-2px);
}

.lightbox-thumb.active{
    opacity: 1;

    border-color:
        var(--terracotta);
}

.lightbox-thumb img{
    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* =========================================================
   16. SCROLL REVEAL
   ========================================================= */

.reveal{
    opacity: 0;

    transform:
        translateY(30px);

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

.reveal.visible{
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   17. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
.portfolio-card:focus-visible{
    outline:
        2px solid
        var(--terracotta-dark);

    outline-offset:4px;
}


/* =========================================================
   18. TABLETS / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px){

    .hero-grid{
        grid-template-columns:
            1fr 1fr;

        gap: 40px;
    }

    .hero-copy{
        padding-left: 0;
    }

    .hero-name{
        font-size:
            clamp(4.8rem, 9vw, 7rem);
    }

    .hero-surname{
        margin-left: 0;
    }

    .about-layout{
        grid-template-columns:
            1fr;
    }

    .about-gallery{
        width:
            min(750px, 100%);

        margin:
            0 auto;
    }

    .about-copy{
        margin:
            0 auto;

        text-align:
            center;
    }

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

    .measurements-images{
        max-width: 900px;

        margin:
            0 auto;
    }

    .measurements-panel{
        max-width: 700px;

        width: 100%;

        margin:
            0 auto;
    }

    .portfolio-heading-wrap{
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .portfolio-intro{
        margin-bottom: 0;
    }

    .contact-inner{
        grid-template-columns:
            1fr;

        gap: 50px;
    }

}


/* =========================================================
   19. MOBILE NAV + TABLET
   ========================================================= */

@media (max-width: 820px){

    :root{
        --header-height: 72px;
    }

    .site-header{
        padding:
            0 22px;
    }

    .menu-toggle{
        display: block;

        z-index: 1002;
    }

    .main-nav{
        position: fixed;

        inset: 0;

        display: flex;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            center;

        gap: 30px;

        background:
            rgba(246,240,231,0.97);

        backdrop-filter:
            blur(18px);

        transform:
            translateX(100%);

        transition:
            transform 0.45s ease;

        z-index: 1001;
    }

    .main-nav.open{
        transform:
            translateX(0);
    }

    .nav-link{
        font-family:
            "Playfair Display",
            serif;

        font-size: 2.3rem;

        letter-spacing: 0;

        text-transform: none;
    }

    .menu-toggle.open
    span:first-child{
        transform:
            translateY(4.5px)
            rotate(45deg);
    }

    .menu-toggle.open
    span:last-child{
        transform:
            translateY(-4.5px)
            rotate(-45deg);
    }

    .section{
        min-height: auto;

        padding:
            calc(var(--header-height) + 45px)
            22px
            80px;
    }

    .hero-section{
        min-height: 100vh;
    }

    .hero-grid{
        grid-template-columns:
            1fr;

        gap: 45px;
    }

    .hero-copy{
        text-align: center;
    }

    .hero-intro{
        margin-left: auto;

        margin-right: auto;
    }

    .hero-actions{
        justify-content:
            center;
    }

    .hero-surname{
        margin-left: 0;
    }

    .hero-image-frame{
        max-width: 520px;

        margin:
            0 auto;
    }

    .hero-image{
        height: 70vh;

        max-height: 680px;
    }

    .scroll-indicator{
        display: none;
    }

    .about-gallery{
        min-height: 570px;
    }

    .measurements-images{
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .measure-photo img{
        height: 390px;
    }

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

    .portfolio-card,
    .portfolio-card:nth-child(n){
        grid-column: auto;

        min-height: 420px;
    }

    .contact-copy{
        text-align: center;
    }

    .contact-description{
        margin-left: auto;

        margin-right: auto;
    }

    .site-footer{
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .footer-meta{
        text-align: left;
    }


    /* Lightbox tablet */

    .lightbox-dialog{
        width:
            calc(100% - 24px);

        height:
            calc(100vh - 24px);

        height:
            calc(100dvh - 24px);

        margin:
            12px auto;

        border-radius:
            20px;
    }

    .lightbox-media{
        padding:
            16px 62px;
    }

}


/* =========================================================
   20. MOBILE
   ========================================================= */

@media (max-width: 600px){

    .brand{
        font-size: 1.25rem;
    }

    .hero-section{
        padding-top:
            calc(
                var(--header-height)
                + 35px
            );
    }

    .hero-grid{
        gap:35px;
    }

    .eyebrow{
        margin-bottom: 18px;
    }

    .hero-title{
        margin-bottom: 28px;
    }

    .hero-name{
        font-size:
            clamp(
                4.5rem,
                22vw,
                6.5rem
            );
    }

    .hero-surname{
        font-size:
            clamp(
                3.8rem,
                18vw,
                5.7rem
            );
    }

    .hero-intro{
        font-size:.98rem;

        line-height:1.75;
    }

    .hero-actions{
        flex-direction:
            column;
    }

    .btn{
        width: 100%;
    }

    .hero-image-frame{
        border-radius:
            170px
            170px
            24px
            24px;
    }

    .hero-image{
        height: 62vh;
    }

    .hero-image-label{
        bottom: 16px;

        left: 16px;
    }

    .section-heading{
        margin-bottom: 40px;
    }

    .section-heading h2{
        font-size:
            clamp(
                3.3rem,
                17vw,
                5rem
            );
    }

    .about-gallery{
        min-height: 430px;
    }

    .about-photo-main{
        width: 58%;

        height: 76%;

        left: 2%;
    }

    .about-photo-secondary{
        width: 43%;

        height: 48%;

        right: 0;
    }

    .about-photo-third{
        width: 41%;

        height: 42%;

        right: 0;
    }

    .about-copy p{
        font-size: 1.45rem;
    }

    .measurements-images{
        grid-template-columns:
            1fr;

        gap: 20px;
    }

    .measure-photo{
        max-width: 330px;

        width: 100%;

        margin:
            0 auto;
    }

    .measure-photo img{
        height: 470px;
    }

    .measurements-panel{
        grid-template-columns:
            1fr;

        gap: 35px;

        padding:
            28px 22px;
    }

    .measurement-divider{
        width: 100%;

        height: 1px;
    }

    .measurement-language{
        margin-left: auto;

        margin-right: auto;
    }

    .measurement-column{
        text-align: center;
    }

    .portfolio-grid{
        grid-template-columns:
            1fr;

        gap: 16px;
    }

    .portfolio-card,
    .portfolio-card:nth-child(n){
        min-height:
            min(128vw, 600px);
    }

    .portfolio-card:hover{
        transform:none;
    }

    .portfolio-card-copy{
        left: 20px;

        right: 20px;

        bottom: 20px;
    }

    .portfolio-card-copy h3{
        font-size: 2.4rem;
    }

    .contact-section{
        text-align: center;
    }

    .contact-card{
        text-align: left;

        grid-template-columns:
            auto 1fr;
    }

    .contact-card:hover{
        transform:none;
    }

    .contact-arrow{
        display: none;
    }

    .contact-decoration{
        font-size: 5rem;
    }


    /* =====================================================
       MOBILE LIGHTBOX
       Full screen responsive viewer
       ===================================================== */

    .lightbox-dialog{
        width: 100%;

        height: 100vh;

        height: 100dvh;

        max-height: none;

        margin: 0;

        border-radius: 0;
    }


    /*
       This area receives all remaining height
       after caption and thumbnails.
    */

    .lightbox-media{
        flex:
            1 1 0;

        min-height: 0;

        max-height: none;

        padding:
            60px
            10px
            10px;
    }


    /*
       Portrait, landscape and square photographs
       remain fully visible.
    */

    .lightbox-media img{
        width: auto;

        height: auto;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;

        object-position: center;
    }

    .lightbox-close{
        top: 10px;

        right: 10px;

        width: 42px;

        height: 42px;
    }

    .lightbox-nav{
        width: 42px;

        height: 42px;

        background:
            rgba(
                246,
                240,
                231,
                .88
            );
    }

    .lightbox-prev{
        left: 8px;
    }

    .lightbox-next{
        right: 8px;
    }

    .lightbox-caption{
        flex:
            0 0 auto;

        padding:
            13px
            18px
            10px;

        align-items:
            flex-start;
    }

    .lightbox-caption h3{
        font-size: 1.35rem;
    }

    .lightbox-subtitle{
        font-size: .61rem;
    }

    .lightbox-thumbnails{
        flex:
            0 0 auto;

        padding:
            0
            18px
            max(
                14px,
                env(
                    safe-area-inset-bottom
                )
            );

        gap: 8px;
    }

    .lightbox-thumb{
        width: 50px;

        height: 63px;
    }

}


/* =========================================================
   21. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px){

    .lightbox-media{
        padding:
            56px
            5px
            8px;
    }

    .lightbox-caption{
        padding:
            10px 14px 8px;
    }

    .lightbox-caption h3{
        font-size: 1.2rem;
    }

    .lightbox-thumbnails{
        padding-left: 14px;

        padding-right: 14px;
    }

    .lightbox-thumb{
        width: 46px;

        height: 58px;
    }

}


/* =========================================================
   22. LARGE SCREENS
   ========================================================= */

@media (min-width: 1400px){

    /*
       Prevent portrait photographs from becoming
       unnecessarily huge on very large monitors.
    */

    .lightbox-media img{
        max-width:
            min(100%, 1000px);
    }

}


/* =========================================================
   23. REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
){

    *,
    *::before,
    *::after{
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }

}