:root {
    --ocean: #0B1D2A;
    --cream: #F8F6F2;
    --sand: #E6D3B3;
    --sunset: #C46A3A;
    --stone: #8A8F94;
    --sea: #5A7D8C;
    --ink: #07131C;
    --mist: rgba(248, 246, 242, 0.72);
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at top left, rgba(90, 125, 140, 0.16), transparent 22%),
        linear-gradient(180deg, #f8f6f2 0%, #f4efe7 100%);
    color: var(--ocean);
}

.site-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.42) 1px, transparent 1px),
        radial-gradient(circle at 78% 68%, rgba(11, 29, 42, 0.08) 1px, transparent 1px);
    background-size: 22px 22px, 28px 28px;
    opacity: 0.18;
    mix-blend-mode: multiply;
    z-index: 0;
}

.content-layer {
    position: relative;
    z-index: 1;
}

.hero-overlay {
    background:
        linear-gradient(180deg, rgba(7, 19, 28, 0.74) 0%, rgba(7, 19, 28, 0.3) 40%, rgba(196, 106, 58, 0.18) 100%),
        linear-gradient(90deg, rgba(7, 19, 28, 0.58) 0%, rgba(7, 19, 28, 0.12) 54%, rgba(7, 19, 28, 0) 100%);
}

.section-label {
    letter-spacing: 0.34em;
}

.nav-scrolled {
    background: rgba(248, 246, 242, 0.88);
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 40px rgba(7, 19, 28, 0.08);
}

.glass-card {
    background: rgba(248, 246, 242, 0.13);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.soft-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(11, 29, 42, 0.08);
    box-shadow: 0 26px 56px rgba(7, 19, 28, 0.08);
}

.ambient-border {
    position: relative;
}

.ambient-border::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.editorial-panel {
    background:
        linear-gradient(180deg, rgba(7, 19, 28, 0.98), rgba(11, 29, 42, 0.92)),
        radial-gradient(circle at top right, rgba(196, 106, 58, 0.28), transparent 32%);
}

.sand-panel {
    background:
        linear-gradient(180deg, rgba(230, 211, 179, 0.34), rgba(255, 255, 255, 0.56));
}

.story-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(11, 29, 42, 0), rgba(11, 29, 42, 0.18), rgba(11, 29, 42, 0));
}

.image-zoom img,
.image-zoom {
    transition: transform 0.9s cubic-bezier(.22, 1, .36, 1), filter 0.5s ease;
}

.image-zoom:hover img,
.image-zoom:hover {
    transform: scale(1.035);
}

.image-zoom:hover img {
    filter: saturate(1.04);
}

.hero-parallax {
    will-change: transform;
}

.page-hero {
    min-height: 68vh;
}

.page-hero.tall {
    min-height: 84vh;
}

.masonry {
    column-gap: 1.25rem;
    column-count: 1;
}

@media (min-width: 768px) {
    .masonry {
        column-count: 2;
    }
}

@media (min-width: 1280px) {
    .masonry {
        column-count: 3;
    }
}

.masonry > * {
    break-inside: avoid;
    margin-bottom: 1.25rem;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.82s cubic-bezier(.22, 1, .36, 1), transform 0.82s cubic-bezier(.22, 1, .36, 1);
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.status-pill {
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.status-pill.available {
    background: rgba(56, 112, 82, 0.12);
    color: #2E5E45;
}

.status-pill.unavailable {
    background: rgba(180, 76, 52, 0.12);
    color: #8F422C;
}

.status-pill.pending {
    background: rgba(11, 29, 42, 0.08);
    color: var(--ocean);
}

.btn-primary {
    background: var(--sunset);
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(196, 106, 58, 0.26);
}

.btn-secondary {
    background: var(--ocean);
    color: #fff;
}

.booking-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.room-stat {
    border: 1px solid rgba(11, 29, 42, 0.08);
    background: rgba(255, 255, 255, 0.64);
}

.quote-panel {
    background:
        linear-gradient(180deg, rgba(7, 19, 28, 0.96), rgba(11, 29, 42, 0.9)),
        radial-gradient(circle at top right, rgba(196, 106, 58, 0.24), transparent 30%);
}

.footer-gradient {
    background: linear-gradient(180deg, #091722 0%, #07131C 100%);
}

.image-caption {
    position: absolute;
    inset-inline: 1.25rem;
    bottom: 1.25rem;
    color: #fff;
    text-shadow: 0 6px 20px rgba(7, 19, 28, 0.34);
}

.grain-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 75% 78%, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 18px 18px, 22px 22px;
}