/* ============================================================
   MY SWEET ESCAPE — SHARED STYLES
   Editorial / gallery-forward / warm with pink accents
   ============================================================ */

:root{
    /* palette — pink as accent, not dominant */
    --pink:#e91e63;
    --pink-soft:#fce4ec;
    --pink-bright:#ff2e88;
    --pink-glow:#ff6fb4;
    --cream:#faf6ed;
    --cream-warm:#f3ead8;
    --paper:#fffbf3;
    --ink:#1c1419;
    --ink-soft:#3d2f3a;
    --ink-faded:#7a6b76;
    --rule:rgba(28,20,25,.12);
    --rule-strong:rgba(28,20,25,.22);
    --shadow-sm: 0 4px 14px -4px rgba(28,20,25,.18);
    --shadow:    0 18px 48px -22px rgba(28,20,25,.32);
    --shadow-lg: 0 32px 70px -30px rgba(28,20,25,.42);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:18px;
    font-weight:400;
    line-height:1.55;
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
}

img,picture{max-width:100%;display:block}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* ============================================================
   TYPE SYSTEM
   ============================================================ */
.display{
    font-family:'Cormorant Garamond', serif;
    font-weight:300;
    letter-spacing:-0.01em;
    line-height:1;
}
.script{
    font-family:'Caveat', cursive;
    font-weight:600;
    color:var(--pink);
}
.eyebrow{
    font-family:'DM Mono', monospace;
    font-size:0.74rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--ink-faded);
    font-weight:500;
}
em{font-style:italic;color:var(--ink-soft)}

/* ============================================================
   NAV — pure black bar with neon logo
   ============================================================ */
.nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:50;
    background:#000;
    border-bottom:1px solid rgba(250,246,237,.08);
    transition:transform .35s ease;
}
.nav-inner{
    max-width:1320px;
    margin:0 auto;
    padding:.85rem 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    min-height:84px;
}
/* Neon logo + tagline beneath. Uses ::before for the logo image and
   re-shows the existing .lo-sub span as the white tagline. */
.nav-logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0;
    gap:.25rem;
    line-height:1;
}
.nav-logo .lo-main{display:none}
.nav-logo .lo-sub{
    display:block;
    font-family:'DM Mono', monospace;
    font-size:.6rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(250,246,237,.9);
    font-style:normal;
    font-weight:500;
    /* Pull right slightly to optically center under the script logo
       (script's first M starts in from the bbox edge) */
    padding-left:.4em;
}
.nav-logo::before{
    content:"";
    display:block;
    width:200px;
    height:48px;
    background:url('images/logo-neon.webp') center/contain no-repeat;
    transition:filter .25s ease;
}
.nav-logo:hover::before{
    filter:drop-shadow(0 0 10px rgba(255,46,136,.55));
}

.nav-links{
    display:flex;
    gap:2.2rem;
    align-items:center;
    font-family:'DM Mono', monospace;
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.nav-links a{
    position:relative;
    padding:.4rem 0;
    transition:color .25s;
    color:rgba(250,246,237,.72);
}
.nav-links a::after{
    content:"";
    position:absolute;
    left:50%;right:50%;
    bottom:-3px;
    height:1px;
    background:var(--pink-glow);
    transition:left .3s ease, right .3s ease;
}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after,
.nav-links a.current::after{left:0;right:0}
.nav-links a.current{color:var(--paper)}

.nav-inquire{
    font-family:'DM Mono', monospace;
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    background:var(--pink);
    color:var(--paper)!important;
    padding:.85rem 1.5rem;
    border-radius:0;
    transition:all .25s;
}
.nav-inquire::after{display:none!important}
.nav-inquire:hover{background:var(--pink-bright);color:var(--paper)!important;box-shadow:0 0 14px rgba(255,46,136,.4)}

.menu-toggle{
    display:none;
    background:transparent;
    width:34px;height:34px;
    position:relative;
}
.menu-toggle span{
    position:absolute;
    left:6px;right:6px;
    height:1.5px;
    background:var(--paper);
    transition:transform .3s, opacity .3s;
}
.menu-toggle span:nth-child(1){top:11px}
.menu-toggle span:nth-child(2){top:16px}
.menu-toggle span:nth-child(3){top:21px}
.menu-toggle.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ============================================================
   PAGE HEADER (used on subpages)
   ============================================================ */
.page-header{
    padding:9rem 2rem 4rem;
    text-align:center;
    max-width:1100px;
    margin:0 auto;
}
.page-header .eyebrow{
    display:block;
    margin-bottom:1.4rem;
}
.page-header h1{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(3rem, 7vw, 5.5rem);
    line-height:1;
    letter-spacing:-.015em;
    margin-bottom:1.5rem;
}
.page-header h1 em{
    font-style:italic;
    color:var(--ink);
}
.page-header h1 .script{
    font-size:1.05em;
    display:inline-block;
    transform:rotate(-2deg);
    margin:0 .2rem;
    line-height:.9;
}
.page-header .lede{
    font-size:1.2rem;
    max-width:640px;
    margin:0 auto;
    color:var(--ink-soft);
    font-style:italic;
}

/* ============================================================
   SECTION DIVIDERS / SHARED ELEMENTS
   ============================================================ */
.divider-rule{
    display:flex;
    align-items:center;
    gap:1.2rem;
    max-width:1100px;
    margin:0 auto;
    padding:0 2rem;
}
.divider-rule::before,
.divider-rule::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--rule);
}
.divider-rule .ornament{
    font-family:'Caveat',cursive;
    color:var(--pink);
    font-size:1.4rem;
    white-space:nowrap;
}

/* buttons */
.btn{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    font-family:'DM Mono', monospace;
    font-size:.78rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    padding:1.05rem 1.9rem;
    transition:all .3s ease;
    cursor:pointer;
    border:none;
    font-weight:500;
}
.btn-primary{
    background:var(--ink);
    color:var(--cream);
}
.btn-primary:hover{
    background:var(--pink);
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}
.btn-secondary{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--ink);
}
.btn-secondary:hover{
    background:var(--ink);
    color:var(--cream);
    transform:translateY(-2px);
}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(4px)}

/* link arrow */
.link-arrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-family:'DM Mono', monospace;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink);
    border-bottom:1px solid var(--ink);
    padding-bottom:.3rem;
    transition:all .25s;
}
.link-arrow:hover{
    color:var(--pink);
    border-bottom-color:var(--pink);
    gap:.8rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
    background:var(--ink);
    color:var(--cream);
    padding:5rem 2rem 2rem;
    margin-top:6rem;
}
.footer-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;
    gap:2.5rem;
    padding-bottom:3rem;
    border-bottom:1px solid rgba(250,246,237,.12);
}
.footer-brand .footer-logo{
    font-family:'Cormorant Garamond',serif;
    font-weight:400;
    font-style:italic;
    font-size:2rem;
    line-height:1;
    margin-bottom:.6rem;
    color:var(--paper);
}
.footer-brand .footer-tag{
    font-family:'DM Mono', monospace;
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--pink-glow);
    margin-bottom:1.2rem;
}
.footer-brand p{
    color:rgba(250,246,237,.65);
    font-size:1rem;
    line-height:1.6;
    max-width:340px;
}
.footer-col h5{
    font-family:'DM Mono', monospace;
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--pink-glow);
    margin-bottom:1.4rem;
    font-weight:500;
}
.footer-col a, .footer-col p{
    display:block;
    color:rgba(250,246,237,.78);
    font-size:1rem;
    margin-bottom:.55rem;
    transition:color .2s;
    font-family:'Cormorant Garamond',serif;
}
.footer-col a:hover{color:var(--pink-glow)}
.footer-bottom{
    max-width:1180px;
    margin:0 auto;
    padding-top:1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    font-family:'DM Mono', monospace;
    font-size:.68rem;
    letter-spacing:.16em;
    color:rgba(250,246,237,.45);
}
.footer-socials{display:flex;gap:.55rem}
.footer-social{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:rgba(250,246,237,.06);
    color:rgba(250,246,237,.8);
    transition:all .2s;
}
.footer-social:hover{
    background:var(--pink);
    color:var(--paper);
    transform:translateY(-2px);
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s ease, transform .9s ease;
}
.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

/* ============================================================
   LIGHTBOX (used on portfolio)
   ============================================================ */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(15,8,12,.94);
    backdrop-filter:blur(8px);
    z-index:200;
    display:none;
    align-items:center;justify-content:center;
    padding:2rem;
    opacity:0;
    transition:opacity .3s;
}
.lightbox.open{display:flex;opacity:1}
.lightbox-inner{
    max-width:90vw;
    max-height:90vh;
    position:relative;
}
.lightbox img{
    max-width:90vw;
    max-height:84vh;
    object-fit:contain;
}
.lightbox-caption{
    text-align:center;
    color:var(--cream);
    font-family:'DM Mono', monospace;
    font-size:.78rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-top:1rem;
}
.lightbox-close{
    position:absolute;
    top:-3.2rem;right:0;
    background:transparent;
    color:var(--cream);
    font-size:1.6rem;
    width:42px;height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;justify-content:center;
    transition:background .2s;
}
.lightbox-close:hover{background:rgba(250,246,237,.1)}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width:1080px){
    /* Footer: collapse to brand + 2x2 link columns rather than cramming 5 across */
    .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
    .footer-grid .footer-brand{grid-row:span 2}
}

@media (max-width:880px){
    body{font-size:17px}
    .nav-inner{padding:.7rem 1.2rem;min-height:72px;align-items:center}
    .nav-logo{gap:.2rem}
    .nav-logo::before{width:160px;height:38px}
    .nav-logo .lo-sub{font-size:.52rem;letter-spacing:.24em}
    .nav-links{
        position:fixed;
        inset:72px 0 auto 0;
        flex-direction:column;
        background:#000;
        padding:2rem 1.5rem;
        gap:1.4rem;
        border-bottom:1px solid rgba(250,246,237,.08);
        transform:translateY(-110%);
        transition:transform .35s ease;
        align-items:flex-start;
        font-size:.85rem;
    }
    .nav-links.open{transform:translateY(0)}
    .nav-inquire{align-self:stretch;text-align:center}
    .menu-toggle{display:block}

    .page-header{padding:7rem 1.2rem 2.5rem}
    footer{padding:3.5rem 1.2rem 1.5rem}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
    .footer-brand{grid-column:1 / -1;grid-row:auto}
    .footer-bottom{flex-direction:column;text-align:center}
}

@media (max-width:440px){
    .nav-logo::before{width:130px;height:32px}
}