:root{
    --pink:#D7A49A;
    --pink-light:#E2B7AA;
    --terracotta:#C38B80;
    --white:#fff;
    --black:#111;
    --grey:#737373;
    --cream:#f6f1ee;
    --max:1400px;
    --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background:var(--white);
    color:var(--black);
    line-height:1.5;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   NAV
   ========================================================= */

.nav{
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 35px;
    color:var(--white);
    transition:.5s var(--ease);
    transition-property:background,color,padding;
}

.nav.scrolled{
    background:rgba(255,255,255,.94);
    color:var(--black);
    padding-top:14px;
    padding-bottom:14px;
    backdrop-filter:blur(10px);
}

.nav-logo{
    font-size:14px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.nav-menu{
    display:flex;
    gap:30px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.nav-menu a{
    position:relative;
}

.nav-menu a:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:1px;
    background:currentColor;
    transition:.3s;
}

.nav-menu a:hover:after{
    width:100%;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    position:relative;
    height:100svh;
    min-height:650px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--pink);
}

.hero-image{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(17,17,17,.58),
            rgba(17,17,17,.12)
        ),
        url("../images/kupecky-dom.jpg") center/cover;
    transform:scale(1.04);
    animation:heroZoom 14s ease-out forwards;
}

@keyframes heroZoom{
    from{
        transform:scale(1.08);
    }
    to{
        transform:scale(1);
    }
}

.hero-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:var(--max);
    margin:auto;
    padding:80px 40px 70px;
    color:var(--white);
}

.hero-kicker{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.22em;
    margin-bottom:20px;
}

.hero h1{
    max-width:1050px;
    font-size:clamp(50px,8vw,125px);
    line-height:.88;
    font-weight:800;
    letter-spacing:-.055em;
    text-transform:uppercase;
}

.hero-subtitle{
    max-width:620px;
    margin-top:30px;
    font-size:clamp(16px,2vw,22px);
    line-height:1.35;
}

.scroll-indicator{
    position:absolute;
    right:40px;
    bottom:45px;
    display:flex;
    align-items:center;
    gap:15px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#fff;
}

.scroll-line{
    width:55px;
    height:1px;
    background:#fff;
}


/* =========================================================
   INTRO
   ========================================================= */

.intro{
    padding:150px 40px;
    background:var(--pink);
}

.intro-inner{
    max-width:var(--max);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
}

.section-number{
    font-size:13px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.intro h2{
    font-size:clamp(42px,6vw,85px);
    line-height:.95;
    letter-spacing:-.045em;
}

.intro-text{
    align-self:end;
    max-width:550px;
    font-size:19px;
    line-height:1.55;
}


/* =========================================================
   EVENTS
   ========================================================= */

.events{
    background:#fff;
}

.events-header{
    max-width:var(--max);
    margin:auto;
    padding:120px 40px 70px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}

.events-header h2{
    font-size:clamp(50px,7vw,100px);
    line-height:.85;
    letter-spacing:-.06em;
}

.events-header p{
    max-width:340px;
    font-size:14px;
    color:var(--grey);
}


/* =========================================================
   EVENT CARD
   ========================================================= */

.event{
    position:relative;
    padding:110px 40px;
    overflow:hidden;
}

.event:nth-child(even){
    background:var(--cream);
}

.event-inner{
    max-width:var(--max);
    margin:auto;
    display:grid;
    grid-template-columns:minmax(260px,.8fr) minmax(300px,1.2fr);
    gap:clamp(50px,9vw,150px);
    align-items:center;
}

.event:nth-child(even) .event-inner{
    grid-template-columns:minmax(300px,1.2fr) minmax(260px,.8fr);
}

.event:nth-child(even) .event-image{
    order:-1;
}

.event-date{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:30px;
}

.event-day{
    font-size:clamp(75px,10vw,145px);
    line-height:.72;
    font-weight:800;
    letter-spacing:-.08em;
}

.event-range{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:clamp(65px,9vw,130px);
    line-height:.72;
    font-weight:800;
    letter-spacing:-.08em;
}

.event-range span{
    font-size:.45em;
    font-weight:400;
    letter-spacing:0;
}

.event-range-full{
    font-size:clamp(32px,4vw,58px);
    line-height:1;
    font-weight:800;
    letter-spacing:-.05em;
    white-space:nowrap;
}

.event-month{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    padding-top:7px;
}

.event-title{
    font-size:clamp(35px,5vw,70px);
    line-height:.95;
    letter-spacing:-.045em;
    margin-bottom:25px;
}

.event-description{
    max-width:650px;
    font-size:17px;
    line-height:1.6;
    margin-bottom:30px;
}

.event-info{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.event-info span{
    display:inline-block;
    padding:9px 13px;
    background:var(--pink-light);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.event-image{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
}

.event-image img{
    width:min(100%,560px);
    aspect-ratio:1/1.414;
    object-fit:cover;
    box-shadow:0 25px 70px rgba(0,0,0,.12);
    transition:
        transform .8s var(--ease),
        box-shadow .8s var(--ease);
}

.event:hover .event-image img{
    transform:translateY(-8px) rotate(-1deg);
    box-shadow:0 35px 90px rgba(0,0,0,.18);
}


/* =========================================================
   PAST EVENT
   ========================================================= */

.event.past{
    opacity:.48;
    filter:grayscale(1);
}

.event.past .event-info span{
    background:#d8d8d8;
    color:#666;
}

.event.past .event-image img{
    filter:grayscale(1);
}

.event.past:hover .event-image img{
    transform:none;
    box-shadow:0 25px 70px rgba(0,0,0,.08);
}


/* =========================================================
   POSTER FALLBACK
   ========================================================= */

.poster-fallback{
    width:min(100%,560px);
    aspect-ratio:1/1.414;
    background:
        linear-gradient(
            145deg,
            var(--terracotta),
            var(--pink-light)
        );
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px;
    text-align:center;
    font-weight:800;
    font-size:clamp(22px,3vw,42px);
    text-transform:uppercase;
    letter-spacing:-.04em;
}


/* =========================================================
   RESERVATION BUTTON
   ========================================================= */

.event-actions{
    margin-top:25px;
}

.reserve-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 20px;
    background:var(--black);
    color:#fff;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    transition:
        background .3s,
        transform .3s;
}

.reserve-button:hover{
    background:var(--terracotta);
    transform:translateY(-2px);
}


/* =========================================================
   RECURRING CALENDAR
   ========================================================= */

.calendar-wrap{
    margin-top:35px;
    padding-top:30px;
    border-top:1px solid rgba(17,17,17,.18);
}

.calendar-head{
    display:grid;
    grid-template-columns:45px 1fr 45px;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.calendar-heading{
    text-align:center;
}

.calendar-kicker{
    margin-bottom:3px;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--grey);
}

.calendar-title{
    font-size:22px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.035em;
    text-transform:uppercase;
}

.calendar-nav{
    width:45px;
    height:45px;
    border:1px solid rgba(17,17,17,.2);
    background:transparent;
    color:var(--black);
    cursor:pointer;
    font-size:20px;
    transition:.25s;
}

.calendar-nav:hover:not(:disabled){
    background:var(--black);
    color:#fff;
}

.calendar-nav:disabled{
    opacity:.25;
    cursor:default;
}

.calendar-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
    margin-bottom:5px;
}

.calendar-weekday{
    padding:7px 3px;
    text-align:center;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--grey);
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
}

.calendar-day{
    position:relative;
    min-height:62px;
    padding:8px;
    border:1px solid rgba(17,17,17,.08);
    background:#fff;
    color:var(--black);
    text-align:left;
    cursor:pointer;
    font-family:inherit;
    transition:.2s;
}

.calendar-day:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.calendar-day.is-empty{
    border-color:transparent;
    background:transparent;
    cursor:default;
}

.calendar-day.is-empty:hover{
    transform:none;
    box-shadow:none;
}

.calendar-day-number{
    display:block;
    font-size:16px;
    font-weight:800;
    line-height:1;
}

.calendar-day-state{
    display:block;
    margin-top:7px;
    font-size:7px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.calendar-day.available{
    background:var(--pink-light);
    border-color:var(--pink);
}

.calendar-day.available .calendar-day-state{
    color:#67443d;
}

.calendar-day.full{
    background:#e8e8e8;
    color:#666;
}

.calendar-day.cancelled{
    background:#d8d8d8;
    color:#666;
}

.calendar-day.completed{
    background:#ededed;
    color:#777;
}

.calendar-day.today{
    box-shadow:inset 0 0 0 2px var(--terracotta);
}

.calendar-day.selected{
    background:var(--terracotta);
    color:#fff;
}

.calendar-day.selected .calendar-day-state{
    color:#fff;
}

.calendar-details{
    margin-top:15px;
    padding:18px;
    background:var(--cream);
    min-height:60px;
}

.calendar-details-empty{
    font-size:12px;
    color:var(--grey);
}

.calendar-detail-title{
    margin-bottom:12px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.calendar-term{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px 0;
    border-top:1px solid rgba(17,17,17,.12);
}

.calendar-term:first-child{
    border-top:0;
    padding-top:0;
}

.calendar-term:last-child{
    padding-bottom:0;
}

.calendar-term-main{
    min-width:0;
}

.calendar-term-time{
    font-size:17px;
    font-weight:800;
}

.calendar-term-capacity{
    margin-top:3px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--grey);
}

.calendar-term-status{
    flex-shrink:0;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.calendar-term-status.available{
    color:#68453e;
}

.calendar-term-status.full,
.calendar-term-status.cancelled,
.calendar-term-status.completed{
    color:#777;
}

.calendar-term .reserve-button{
    padding:9px 12px;
    font-size:9px;
}


/* =========================================================
   MONTH DIVIDER
   ========================================================= */

.month-divider{
    padding:80px 40px;
    background:var(--terracotta);
    color:#fff;
}

.month-divider-inner{
    max-width:var(--max);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.month-divider h2{
    font-size:clamp(50px,8vw,120px);
    line-height:.85;
    letter-spacing:-.07em;
    text-transform:uppercase;
}

.month-divider span{
    font-size:13px;
    letter-spacing:.15em;
    text-transform:uppercase;
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery-section{
    padding:130px 40px;
    background:var(--black);
    color:#fff;
}

.gallery-header{
    max-width:var(--max);
    margin:0 auto 70px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}

.gallery-header h2{
    font-size:clamp(50px,7vw,100px);
    line-height:.85;
    letter-spacing:-.06em;
}

.gallery-header p{
    max-width:300px;
    color:#aaa;
    font-size:14px;
}

.gallery{
    max-width:var(--max);
    margin:auto;
    columns:3;
    column-gap:15px;
}

.gallery-item{
    position:relative;
    margin-bottom:15px;
    break-inside:avoid;
    overflow:hidden;
    background:var(--terracotta);
}

.gallery-item img{
    width:100%;
    transition:
        transform .8s var(--ease),
        opacity .5s;
}

.gallery-item:hover img{
    transform:scale(1.05);
    opacity:.75;
}

.gallery-caption{
    position:absolute;
    left:15px;
    bottom:15px;
    padding:8px 12px;
    background:rgba(17,17,17,.8);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-strip{
    padding:90px 40px;
    background:var(--pink-light);
}

.contact-inner{
    max-width:var(--max);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:40px;
}

.contact-block small{
    display:block;
    margin-bottom:10px;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.contact-block p{
    font-size:15px;
    line-height:1.55;
}

.contact-block a{
    text-decoration:underline;
    text-underline-offset:4px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    background:var(--pink-light);
    color:var(--black);
    padding:0 40px 35px;
}

.footer-inner{
    max-width:var(--max);
    margin:auto;
}

.footer-title{
    max-width:950px;
    font-size:clamp(50px,8vw,120px);
    line-height:.85;
    font-weight:800;
    letter-spacing:-.07em;
    text-transform:uppercase;
}

.footer-bottom{
    margin-top:90px;
    padding-top:20px;
    border-top:1px solid rgba(17,17,17,.25);
    display:flex;
    justify-content:space-between;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:
        opacity 1s var(--ease),
        transform 1s var(--ease);
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .nav{
        padding:18px 20px;
    }

    .nav-menu{
        gap:15px;
        font-size:10px;
    }

    .hero-content{
        padding:50px 20px;
    }

    .scroll-indicator{
        display:none;
    }

    .intro{
        padding:90px 20px;
    }

    .intro-inner{
        grid-template-columns:1fr;
        gap:40px;
    }

    .events-header{
        padding:90px 20px 50px;
        display:block;
    }

    .events-header p{
        margin-top:30px;
    }

    .event{
        padding:80px 20px;
    }

    .event-inner,
    .event:nth-child(even) .event-inner{
        grid-template-columns:1fr;
        gap:50px;
    }

    .event:nth-child(even) .event-image{
        order:0;
    }

    .event-image img{
        width:min(100%,500px);
    }

    .month-divider{
        padding:60px 20px;
    }

    .month-divider-inner{
        display:block;
    }

    .month-divider span{
        display:block;
        margin-top:20px;
    }

    .gallery-section{
        padding:90px 20px;
    }

    .gallery-header{
        display:block;
    }

    .gallery-header p{
        margin-top:30px;
    }

    .gallery{
        columns:2;
    }

    .contact-strip{
        padding:70px 20px;
    }

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

    footer{
        padding:0 20px 30px;
    }

    .footer-bottom{
        margin-top:70px;
        display:block;
    }

    .footer-bottom span{
        display:block;
        margin-bottom:10px;
    }

    .calendar-day{
        min-height:55px;
        padding:6px;
    }
}


@media(max-width:550px){

    .nav-logo{
        font-size:11px;
    }

    .nav-menu a:nth-child(2){
        display:none;
    }

    .hero{
        min-height:600px;
    }

    .hero h1{
        font-size:52px;
    }

    .hero-subtitle{
        font-size:16px;
    }

    .event-day{
        font-size:90px;
    }

    .event-range{
        font-size:82px;
    }

    .event-title{
        font-size:38px;
    }

    .event-description{
        font-size:15px;
    }

    .gallery{
        columns:1;
    }

    .footer-title{
        font-size:55px;
    }

    .calendar-head{
        grid-template-columns:38px 1fr 38px;
    }

    .calendar-nav{
        width:38px;
        height:38px;
    }

    .calendar-title{
        font-size:18px;
    }

    .calendar-day{
        min-height:48px;
        padding:5px;
    }

    .calendar-day-number{
        font-size:14px;
    }

    .calendar-day-state{
        display:none;
    }

    .calendar-weekday{
        font-size:8px;
    }

    .calendar-term{
        display:block;
    }

    .calendar-term .reserve-button{
        margin-top:10px;
    }
}


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

    html{
        scroll-behavior:auto;
    }

    *,
    *:before,
    *:after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}