:root {
    --srkpt-bg: #ffffff !important;
    --srkpt-text: #0a0a0a !important;
    --srkpt-soft: rgba(10, 10, 10, 0.68) !important;
    --srkpt-quiet: rgba(10, 10, 10, 0.42) !important;
    --srkpt-line: rgba(10, 10, 10, 0.12) !important;
    --srkpt-line-strong: rgba(10, 10, 10, 0.20) !important;
    --srkpt-accent: #5A4A40 !important;
    --srkpt-display: 'Cinzel', 'Trajan Pro', serif !important;
    --srkpt-serif: 'Cormorant Garamond', 'Times New Roman', serif !important;
    --srkpt-ui: 'Outfit', system-ui, sans-serif !important;
    --srkpt-ease: cubic-bezier(.22, .61, .36, 1) !important;
}

.srkpt-section {
    background: var(--srkpt-bg) !important;
    padding: clamp(10px, 1vw, 96px) clamp(24px, 3vw, 40px) !important;
    color: var(--srkpt-text) !important;
    -webkit-font-smoothing: antialiased !important;
}

.srkpt-wrap {
    max-width: var(--srkpt-max, 1280px) !important;
    margin: 0 auto !important;
}

.srkpt-select-label {
    text-align: center !important;
    font-family: var(--srkpt-ui) !important;
    font-size: 10px !important;
    letter-spacing: .36em !important;
    text-transform: uppercase !important;
    color: var(--srkpt-quiet) !important;
    font-weight: 500 !important;
    margin-bottom: 30px !important;
}

/* Tabs */
.srkpt-tabs {
    display: flex !important;
    justify-content: center !important;
    border-top: 1px solid var(--srkpt-line-strong) !important;
    border-bottom: 1px solid var(--srkpt-line-strong) !important;
    margin-bottom: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.srkpt-tabs::-webkit-scrollbar {
    display: none !important;
}

.srkpt-tab {
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    min-width: 275px !important;
    padding: 24px 32px !important;
    cursor: pointer !important;
    text-align: center !important;
    position: relative !important;
    transition: background .35s var(--srkpt-ease), opacity .35s var(--srkpt-ease) !important;
}

.srkpt-tab:hover {
    background: rgba(10, 10, 10, .03) !important;
}

.srkpt-tab.is-active {
    background: rgba(10, 10, 10, .04) !important;
    border: 0px !important !important;
}

.srkpt-tab::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -1px !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--srkpt-text) !important;
    transform: translateX(-50%) !important;
    transition: width .35s var(--srkpt-ease) !important;
}

.srkpt-tab:hover::after,
.srkpt-tab.is-active::after {
    width: 100% !important;
}

.srkpt-tab-kicker {
    display: block !important;
    font-family: var(--srkpt-ui) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: .34em !important;
    text-transform: uppercase !important;
    color: rgba(10, 10, 10, .30) !important;
    margin-bottom: 10px !important;
}

.srkpt-tab-title {
    display: block !important;
    font-family: var(--srkpt-serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    letter-spacing: .20em !important;
    text-transform: uppercase !important;
    color: rgba(10, 10, 10, .55) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    transition: color .35s ease !important;
}

.srkpt-tab:hover .srkpt-tab-title {
    color: rgba(10, 10, 10, .85) !important;
}

.srkpt-tab.is-active .srkpt-tab-title {
    color: var(--srkpt-text) !important;
}

/* Panels */
.srkpt-panels {
    position: relative !important;
}

.srkpt-panel {
    display: none !important;
    grid-template-columns: 1.04fr .96fr !important;
    min-height: 610px !important;
    border-bottom: 1px solid var(--srkpt-line) !important;
    animation: srkptFade .55s var(--srkpt-ease) both !important;
}

.srkpt-panel.is-active {
    display: grid !important;
}

@keyframes srkptFade {
    from {
        opacity: 0 !important;
        transform: translateY(14px) !important;
    }

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

.srkpt-photo-wrap {
    min-height: 610px !important;
    background: #f4f4f2 !important;
    overflow: hidden !important;
}

.srkpt-photo {
    height: 100% !important;
    min-height: 610px !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 1.2s var(--srkpt-ease) !important;
    filter: none !important;
}

.srkpt-panel.is-active .srkpt-photo {
    animation: srkptPhotoIn 1.1s var(--srkpt-ease) both !important;
}

@keyframes srkptPhotoIn {
    from {
        transform: scale(1.035) !important;
    }

    to {
        transform: scale(1) !important;
    }
}

.srkpt-photo-placeholder {
    background: linear-gradient(135deg, #ddd, #f8f8f8) !important;
}

.srkpt-body {
    padding: clamp(48px, 5.5vw, 72px) clamp(34px, 5vw, 56px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: #ffffff !important;
}

.srkpt-location {
    font-family: var(--srkpt-ui) !important;
    font-size: 10px !important;
    letter-spacing: .38em !important;
    text-transform: uppercase !important;
    color: rgba(90, 74, 64, .6) !important;
    font-weight: 500 !important;
    margin-bottom: 22px !important;
}

.srkpt-body h3 {
    font-family: var(--srkpt-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(34px, 3.15vw, 46px) !important;
    line-height: 1.08 !important;
    color: rgba(10, 10, 10, .82) !important;
    letter-spacing: -.02em !important;
    margin: 0 0 22px !important;
}

.srkpt-copy {
    font-family: var(--srkpt-serif) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: rgba(10, 10, 10, .55) !important;
    font-weight: 400 !important;
}

.srkpt-copy p {
    margin: 0 0 18px !important;
}

.srkpt-copy p:first-child::first-letter {
    font-family: var(--srkpt-serif) !important;
    font-style: italic !important;
    font-size: 3.8em !important;
    float: left !important;
    line-height: .82 !important;
    margin: 6px 10px 0 0 !important;
    color: rgba(90, 74, 64, .58) !important;
    font-weight: 500 !important;
}

.srkpt-cats {
    list-style: none !important;
    margin: 34px 0 0 !important;
    padding: 26px 0 0 !important;
    border-top: 1px solid var(--srkpt-line) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 34px !important;
}

.srkpt-cats li {
    position: relative !important;
    padding-left: 20px !important;
    font-family: var(--srkpt-ui) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(10, 10, 10, .58) !important;
    font-weight: 400 !important;
}

.srkpt-cats li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: .72em !important;
    width: 4px !important;
    height: 4px !important;
    background: rgba(10, 10, 10, .56) !important;
    border-radius: 50% !important;
}

/* Content Animation */
.srkpt-panel.is-active .srkpt-location,
.srkpt-panel.is-active h3,
.srkpt-panel.is-active .srkpt-copy,
.srkpt-panel.is-active .srkpt-cats {
    animation: srkptUp .8s var(--srkpt-ease) both !important;
}

.srkpt-panel.is-active h3 {
    animation-delay: .08s !important;
}

.srkpt-panel.is-active .srkpt-copy {
    animation-delay: .16s !important;
}

.srkpt-panel.is-active .srkpt-cats {
    animation-delay: .25s !important;
}

@keyframes srkptUp {
    from {
        opacity: 0 !important;
        transform: translateY(24px) !important;
    }

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

/* Tablet */
@media (max-width: 1024px) {
    .srkpt-section {
        padding: 50px 24px !important;
    }

    .srkpt-tabs {
        justify-content: flex-start !important;
    }

    .srkpt-tab {
        min-width: 230px !important;
    }

    .srkpt-panel.is-active {
        grid-template-columns: 1fr !important;
    }

    .srkpt-panel,
    .srkpt-photo-wrap,
    .srkpt-photo {
        min-height: 0 !important;
    }

    .srkpt-photo-wrap {
        aspect-ratio: 16 / 10 !important;
    }

    .srkpt-photo {
        height: 100% !important;
        min-height: 0 !important;
    }

    .srkpt-body {
        padding: 42px 28px 50px !important;
    }

    .srkpt-cats {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .srkpt-section {
        padding: 42px 18px !important;
    }

    .srkpt-select-label {
        font-size: 9px !important;
        letter-spacing: .28em !important;
        margin-bottom: 20px !important;
    }

    .srkpt-tabs {
        display: block !important;
        border-top: 1px solid var(--srkpt-line) !important;
        border-bottom: 0 !important;
        overflow: visible !important;
    }

    .srkpt-tab {
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
        padding: 18px 16px !important;
        border-bottom: 1px solid var(--srkpt-line) !important;
    }

    .srkpt-tab::after {
        left: 0 !important;
        transform: none !important;
        width: 3px !important;
        height: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        transition: height .35s var(--srkpt-ease) !important;
    }

    .srkpt-tab:hover::after,
    .srkpt-tab.is-active::after {
        height: 100% !important;
        width: 3px !important;
    }

    .srkpt-tab-kicker {
        font-size: 8px !important;
        margin-bottom: 6px !important;
    }

    .srkpt-tab-title {
        white-space: normal !important;
        font-size: 16px !important;
        letter-spacing: .16em !important;
    }

    .srkpt-photo-wrap {
        aspect-ratio: 4 / 3 !important;
    }

    .srkpt-body {
        padding: 32px 4px 36px !important;
    }

    .srkpt-body h3 {
        font-size: 32px !important;
    }

    .srkpt-copy {
        font-size: 15px !important;
    }

    .srkpt-cats {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 26px !important;
        padding-top: 22px !important;
    }

    .srkpt-cats li {
        font-size: 13.5px !important;
    }
}