/* Site-wide refresh: serif display headings, ink/gold accents. Public pages only (admin keeps main.css as-is).
   Loaded straight after main.css, so page stylesheets (booking.css, apartment-view.css, home-refresh.css) still win on equal specificity. */
:root {
    --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --color-ink: #17303a;
    --color-gold: #c8a978;
    --color-gold-light: #ecdcc0;
}

body { font-variant-numeric: lining-nums; }

/* Logo block */
.logo {
    background-color: #fbf8f2;
    border-bottom: 3px solid var(--color-gold);
    box-shadow: 0 10px 28px rgba(23, 48, 58, 0.12), 0 2px 6px rgba(23, 48, 58, 0.06);
}
.logo:hover { box-shadow: 0 14px 32px rgba(23, 48, 58, 0.16), 0 3px 8px rgba(23, 48, 58, 0.08); }
.logo { text-align: center; text-decoration: none; }
@media (min-width: 992px) {
    .logo { padding: 1.1rem 2rem 0.85rem; }
}
.logo-mark { position: relative; display: block; width: max-content; margin: 0 auto; isolation: isolate; }
.logo .logo-tagline {
    display: block;
    width: min-content;
    min-width: 100%;
    margin: 0.3rem auto 0;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.15;
    color: #4b4131;
    text-decoration: none;
}
@media (max-width: 991px) {
    .logo-tagline { display: none; }
}
/* Percent insets match the square artwork's position inside logo.png (671×787) */
.logo-mark::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 3.2%;
    right: 7.2%;
    bottom: 23.5%;
    left: 8%;
    box-shadow: 0 9px 14px -4px rgba(23, 48, 58, 0.6), 3px 5px 7px rgba(23, 48, 58, 0.28);
}

/* Base: zero specificity, so any existing size/colour rule still applies */
:where(h1, h2, h3) {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Headings */
.section-title {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-ink);
}
.section-label,
.section-header h6,
.section-header h6.section-label {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-ink);
}
p.section-label {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
}
.content-main h2 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    font-weight: 500;
    line-height: 1.05;
    color: var(--color-ink);
}
.cta-section h2 {
    font-size: clamp(2.1rem, 4.5vw, 3.2rem);
    font-weight: 500;
    color: var(--color-ink);
}
.property-card h3 { font-size: 1.9rem; font-weight: 500; color: var(--color-ink); }
.feature-item h3,
.thing-card h3 { font-size: 1.75rem; }
.arrangement-item h4 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-ink);
}
.feature-item-modern h4 {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--color-ink);
}
.destination-cta h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--color-ink); }
/* Hero banners */
.hero::before {
    background:
        linear-gradient(90deg, rgba(14, 28, 34, 0.5) 0%, rgba(14, 28, 34, 0) 70%),
        linear-gradient(180deg, rgba(14, 28, 34, 0.2) 0%, rgba(14, 28, 34, 0.3) 45%, rgba(14, 28, 34, 0.7) 100%);
}
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.02;
    font-weight: 500;
}
.hero-location {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    color: var(--color-gold-light);
    opacity: 1;
}
.hero-location::before {
    content: '';
    flex: 0 0 56px;
    height: 1px;
    background: var(--color-gold);
}

/* Buttons */
.btn {
    padding: 1.05rem 2rem;
    background-color: var(--color-ink);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}
.btn:hover,
.btn:focus {
    background-color: var(--color-sea);
}
.btn-secondary {
    background-color: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-ink);
    color: #fff;
}
.btn-large { padding: 1.2rem 2.4rem; font-size: 0.85rem; }

/* Booking portal + apartment pop-up (selectors prefixed with body to win over booking.css / apartment-view.css) */
body .book-hero h1 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 500; color: var(--color-ink); }
body .portal-section h1 { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 500; color: var(--color-ink); }
body .results-heading h2 { font-size: 2rem; font-weight: 500; color: var(--color-ink); }
body .card-panel h2,
body .id-callout h2,
body .guest-booking h2 { font-size: 1.55rem; font-weight: 600; color: var(--color-ink); }
body .unavailable-heading { font-size: 1.5rem; font-weight: 500; }
body .change-compare h3 { font-family: inherit; font-weight: 600; letter-spacing: 0.08em; line-height: inherit; }
body .apt-head h2 { font-size: 2.1rem; font-weight: 500; color: var(--color-ink); }
body .apt-main h3,
body .apt-stay h3 { font-size: 1.45rem; font-weight: 600; color: var(--color-ink); }

@media (max-width: 640px) {
    .btn { padding: 0.95rem 1.5rem; font-size: 0.8rem; letter-spacing: 0.12em; }
    body .apt-head h2 { font-size: 1.65rem; }
}