/* ============================================================
   THE CABANAS LAMU — editorial island journal
   Light theme only. Paper, palm, ocean, coral.
============================================================ */
:root {
    /* Type scale (fluid) */
    --text-xs: clamp(.72rem, .68rem + .2vw, .8rem);
    --text-sm: clamp(.85rem, .8rem + .25vw, .95rem);
    --text-base: clamp(.95rem, .9rem + .2vw, 1.05rem);
    --text-lg: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    --text-xl: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
    --text-2xl: clamp(2.2rem, 1.6rem + 2.5vw, 3.8rem);
    --text-3xl: clamp(3rem, 1.8rem + 5vw, 6.5rem);
    --text-hero: clamp(4.2rem, 1rem + 11vw, 12rem);

    /* Spacing */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-8: 3rem;
    --s-10: 4rem;
    --s-12: 6rem;
    --s-16: 8rem;
    --s-20: 12rem;

    /* Paper palette — sun-bleached, earth & sea */
    --paper: #f4ece0;

    /* coral stone — warm off-white */
    --paper-deep: #ebdfcc;

    /* slightly deeper paper */
    --paper-soft: #f9f3ea;

    /* lighter wash for cards */
    --sand: #e1cdb0;
    --palm: #39525a;

    /* slate-teal accent — primary */
    --palm-soft: #5a727a;
    --sage: #6f8773;

    /* nature/sustainability moments */
    --ocean: #39525a;

    /* unified with new palm */
    --ocean-deep: #233a47;
    --ink: #1f1a14;

    /* sun-faded near-black */
    --ink-soft: #5a4f40;
    --ink-mute: #8a7c69;
    --coral: #e0a088;

    /* soft hero coral — primary accent */
    --coral-soft: #e0a088;
    --coral-deep: #c75a3c;

    /* burnt coral, kept for rare contrast use */
    --amber: #d8a25c;
    --line: color-mix(in oklab, var(--ink) 18%, transparent);
    --line-soft: color-mix(in oklab, var(--ink) 10%, transparent);

    /* Fonts — Anonymous Pro body, Fraunces editorial display, Sacramento for handwritten accents */
    --font-body: 'Anonymous Pro', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --font-hand: 'Sacramento', 'Snell Roundhand', cursive;
    --content: 1240px;
    --content-narrow: 880px;
    --t-quick: 200ms cubic-bezier(.2,.8,.2,1);
    --t-slow: 900ms cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   TYPOGRAPHY HELPERS
============================================================ */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: -.005em;
    color: var(--ink);
    text-wrap: balance;
}

h2 {
    font-size: var(--text-2xl);
    line-height: 1.06;
}

h3 {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.2;
}

/* Italic display accents take coral now (was palm) */
h2 em,
h3 em {
    font-style: italic;
    color: var(--coral);
    font-weight: 300;
}

p {
    line-height: 1.75;
    max-width: 62ch;
}

/* Body text in Anonymous Pro is mono-rhythmic; the spacing on long copy is tighter */
p,
li {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink-soft);
}

.lede {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 36ch;
}

.handwritten {
    font-family: var(--font-hand);
    font-weight: 500;
    font-size: 1.45rem;
    letter-spacing: .01em;
    color: var(--ink-soft);
    line-height: 1.2;
}

.handwritten em {
    font-style: italic;
    opacity: .75;
}

/* Editorial section number labels — "001 · The Place" with a thin rule */
.section-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}

.section-label::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .4;
}

.section-label--light {
    color: rgba(244,236,224,.78);
}

.section-label--light::before {
    background: currentColor;
}

.kicker {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--palm);
    border-bottom: 1px solid color-mix(in oklab, var(--palm) 40%, transparent);
    padding-bottom: 2px;
    transition: gap var(--t-quick), color var(--t-quick);
}

.link-arrow:hover {
    gap: var(--s-3);
    color: var(--coral);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 1em 1.8em;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    white-space: nowrap;
    transition: background var(--t-quick), color var(--t-quick), gap var(--t-quick), border-color var(--t-quick);
}

.btn:hover {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--paper);
    gap: var(--s-4);
}

.btn--filled {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.btn--filled:hover {
    background: var(--coral);
    border-color: var(--coral);
}

.btn--light {
    color: var(--paper);
    border-color: var(--paper);
}

.btn--light:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

.btn--ghost {
    border-color: var(--line);
    color: var(--ink-soft);
}

.shell {
    max-width: var(--content);
    margin: 16px auto 20px;
    padding-inline: clamp(var(--s-5), 5vw, var(--s-12));
    padding-top: 14px;
    padding-bottom: 14px;
}

.shell-narrow,
.shell-prose {
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding-inline: clamp(var(--s-5), 5vw, var(--s-12));
}

/* ============================================================
   NAV — thin, transparent over hero, paper-blur on scroll
============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) clamp(var(--s-5), 4vw, var(--s-10));
    font-size: var(--text-sm);
    color: var(--paper);
    transition: background var(--t-slow), color var(--t-slow), backdrop-filter var(--t-slow), padding var(--t-slow), border-color var(--t-slow);
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled,
.site-header.is-solid {
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    color: var(--ink);
    backdrop-filter: blur(10px);
    padding-block: var(--s-3);
    border-bottom-color: var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: .02em;
    color: inherit;
}

.brand svg {
    width: 26px;
    height: 26px;
    color: currentColor;
}

.brand-mark-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}

.brand-mark-text .top {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
}

.brand-mark-text .bottom {
    font-family: var(--font-body);
    font-size: .68rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: .85;
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--s-4), 2.4vw, var(--s-8));
}

.nav a {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: var(--s-2) 0;
    color: inherit;
}

.nav a:not(.cta-pill)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width var(--t-quick);
}

.nav a:not(.cta-pill):hover::after {
    width: 100%;
}

.cta-pill {
    border: 1px solid currentColor;
    padding: .55em 1.2em !important;
    border-radius: 999px;
    transition: background var(--t-quick), color var(--t-quick);
}

.cta-pill:hover {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--paper);
}

.menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.menu-btn span {
    display: block;
    height: 1px;
    width: 22px;
    background: currentColor;
    transition: transform var(--t-quick);
}

@media (max-width: 940px) {
    .menu-btn {
        display: flex;
    }

    .nav {
        display: none;
    }
}

/* MOBILE NAV — slides down */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--paper);
    color: var(--ink);
    padding: clamp(var(--s-12), 18vh, var(--s-20)) var(--s-6) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    transform: translateY(-101%);
    transition: transform var(--t-slow);
    overflow-y: auto;
    visibility: hidden;
}

.mobile-nav.is-open {
    visibility: visible;
}

.mobile-nav.is-open {
    transform: translateY(0);
}

.mobile-nav a {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--ink);
}

.mobile-nav .close {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 32px;
    color: var(--ink);
}

/* ============================================================
   HERO — cinematic image with stacked, indented title
============================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    color: var(--paper);
    isolation: isolate;
}

.hero-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    animation: heroZoom 14s ease-out forwards;
}

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

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      rgba(31,26,20,.45) 0%,
      rgba(31,26,20,.15) 35%,
      rgba(31,26,20,0)  55%,
      rgba(31,26,20,.6) 100%),
    linear-gradient(85deg,
      rgba(58,90,110,.18) 0%,
      transparent 60%);
}

.hero-inner {
    position: relative;
    min-height: 100svh;
    padding: clamp(var(--s-16), 18vh, var(--s-20)) clamp(var(--s-5), 5vw, var(--s-12)) clamp(var(--s-12), 14vh, var(--s-16));
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-content: end;
    max-width: 1240px;
}

.hero-inner .kicker {
    grid-row: 1;
    align-self: end;
    color: rgba(244,236,224,.85);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.8rem, 1rem + 6.2vw, 7.5rem);
    line-height: 1.02;
    margin-block: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    color: var(--paper);
    text-wrap: balance;
    max-width: 18ch;
}

.hero-title-line {
    display: block;
    opacity: 0;
    transform: translateY(40px);
    animation: heroLine 1.2s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-title-line--1 {
    animation-delay: .15s;
}

.hero-title-line--2 {
    animation-delay: .4s;
    padding-left: clamp(var(--s-6), 8vw, var(--s-16));
}

.hero-title-line--3 {
    animation-delay: .65s;
    padding-left: clamp(var(--s-3), 4vw, var(--s-8));
    color: var(--coral-soft);
    font-style: italic;
    font-weight: 300;
    text-align: center;
}

.hero-title em {
    font-weight: 300;
    position: relative;
    font-style: normal;
}

.hero-title em::after {
    content: "";
    position: absolute;
    left: -.05em;
    bottom: 0;
    width: 105%;
    height: 0;
    background: currentColor;
    opacity: .35;
}

@keyframes heroLine {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem);
    max-width: 40ch;
    line-height: 1.5;
    color: rgba(244,236,224,.92);
    opacity: 0;
    animation: heroLine 1s 1s forwards;
}

.hero-meta {
    margin-top: var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(244,236,224,.75);
    opacity: 0;
    animation: heroLine 1s 1.2s forwards;
}

/* Hand-written corner notes & coordinates */
.hero-hand {
    position: absolute;
    font-family: var(--font-hand);
    font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
    color: rgba(244,236,224,.78);
    pointer-events: none;
    opacity: 0;
    animation: heroLine 1.4s 1.4s forwards;
}

.hero-hand--top {
    top: clamp(80px, 14vh, 160px);
    right: clamp(var(--s-5), 6vw, var(--s-12));

    /* per brief: handwritten accents are horizontally straight, not angled */
}

.hero-hand em {
    font-style: italic;
    opacity: .72;
}

.hero-coord {
    position: absolute;
    bottom: clamp(var(--s-5), 5vh, var(--s-8));
    right: clamp(var(--s-5), 6vw, var(--s-12));
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(244,236,224,.7);
    opacity: 0;
    animation: heroLine 1.2s 1.6s forwards;
}

.hero-scroll {
    position: absolute;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(244,236,224,.7);
    opacity: 0;
    animation: heroLine 1s 1.8s forwards;
}

.hero-scroll svg {
    animation: scrollBob 2s ease-in-out infinite;
}

@keyframes scrollBob {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* Compact hero variant for interior pages */
.page-hero {
    position: relative;
    min-height: 70svh;
    overflow: hidden;
    color: var(--paper);
    isolation: isolate;
}

.page-hero img.hero-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroZoom 14s ease-out forwards;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      rgba(20,16,12,.6) 0%,
      rgba(20,16,12,.35) 30%,
      rgba(20,16,12,.78) 100%),
    radial-gradient(ellipse at 18% 75%, rgba(20,16,12,.55) 0%, transparent 55%);
}

.page-hero-inner {
    height: 70svh;
    padding: 16vh clamp(var(--s-5), 5vw, var(--s-12)) var(--s-10);
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-content: end;
}

.page-hero-inner .crumbs {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(244,236,224,.8);
    align-self: end;
}

.page-hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem);
    line-height: 1;
    color: var(--paper);
    margin-block: var(--s-4) var(--s-4);
    max-width: 18ch;
}

.page-hero h1 em {
    font-style: italic;
    color: var(--coral-soft);
}

.page-hero .hero-sub {
    margin-bottom: var(--s-4);
    color: #f4ece0;
    font-size: var(--text-base);
    line-height: 1.6;
    text-shadow: 0 1px 18px rgba(20,16,12,.85), 0 1px 3px rgba(20,16,12,.7);
    max-width: 56ch;
    opacity: .96;
}

.page-hero .hero-coord {
    bottom: var(--s-6);
}

/* ============================================================
   SECTION SCAFFOLDING
============================================================ */
section {
    padding-block: clamp(var(--s-12), 14vh, var(--s-20));
}

.section-head {
    display: grid;
    gap: var(--s-4);
    max-width: 56ch;
    margin-bottom: var(--s-12);
}

.section-head h2 {
    font-size: var(--text-3xl);
    margin-top: var(--s-3);
    font-weight: 300;
}

.section-intro {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-lg);
    color: var(--ink-soft);
    line-height: 1.5;
}

/* Wave divider */
.divider-wave {
    display: block;
    width: 80px;
    margin: 0 auto;
    color: var(--palm-soft);
    opacity: .6;
}

.divider-rule {
    display: block;
    width: 80px;
    height: 1px;
    margin: var(--s-5) auto;
    background: var(--line);
}

/* ============================================================
   SECTION 2 — RHYTHM
============================================================ */
.rhythm {
    text-align: center;
    background: var(--paper-soft);
    border-block: 1px solid var(--line-soft);
}

.rhythm h2 {
    font-size: var(--text-3xl);
    margin-block: var(--s-5) var(--s-5);
    font-weight: 300;
}

.rhythm h2 em {
    color: var(--palm);
}

.rhythm p {
    margin-inline: auto;
    max-width: 56ch;
    margin-bottom: var(--s-4);
}

.rhythm .signature {
    margin-top: var(--s-8);
    color: var(--ink-soft);
    display: inline-block;
}

/* ============================================================
   EDITORIAL TWO-UP — text + image, alternating
============================================================ */
.editorial-two {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(var(--s-8), 6vw, var(--s-16));
    align-items: center;
}

.editorial-two.reverse {
    grid-template-columns: 1.05fr 1fr;
    direction: rtl;
}

.editorial-two.reverse > * {
    direction: ltr;
}

.editorial-two .ed-text > * + * {
    margin-top: var(--s-4);
}

.editorial-two .ed-text h2 {
    font-size: var(--text-2xl);
    margin-top: var(--s-4);
}

.editorial-two .ed-text .section-label {
    margin-bottom: var(--s-4);
}

.editorial-two .ed-img {
    position: relative;
}

.editorial-two .ed-img figure {
    position: relative;
    margin: 0;
}

.editorial-two .ed-img img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: 50% 30%;
    filter: saturate(.95) contrast(1.02);
}

.editorial-two .ed-img figcaption {
    font-family: var(--font-hand);
    font-size: clamp(1.2rem, 1rem + .5vw, 1.6rem);
    color: var(--ink-soft);
    margin-top: var(--s-3);
    padding: 0;
    background: none;
    box-shadow: none;
    line-height: 1.35;
    text-align: left;
    max-width: 100%;
}

.editorial-two.reverse .ed-img figcaption {
    text-align: right;
}

@media (max-width: 800px) {
    .editorial-two,
    .editorial-two.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: var(--s-8);
    }

    /* Keep portraits as portraits on mobile — no forced landscape crop that
       chops heads or feet. Source photos are 4:5 / 3:4 so let them breathe. */
    .editorial-two .ed-img img {
        aspect-ratio: 4/5;
        max-height: 70vh;
        object-position: 50% 30%;
    }
}

/* ============================================================
   A DAY — sun-path animation + four cards
============================================================ */
.day {
    background: var(--paper);
}

.day-header {
    text-align: center;
    margin-inline: auto;
    max-width: 56ch;
    margin-bottom: var(--s-8);
}

.day-header h2 {
    font-size: var(--text-2xl);
    margin-top: var(--s-3);
}

.sun-path {
    position: relative;
    height: 130px;
    margin: var(--s-6) auto var(--s-10);
    max-width: 1000px;
}

.sun-path svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.sun-path .arc {
    fill: none;
    stroke: var(--amber);
    stroke-width: 1.2;
    stroke-dasharray: 4 6;
    opacity: .55;
    vector-effect: non-scaling-stroke;
}

/* Sun dot is now an SVG <g> animated with <animateMotion> in the markup.
   Both glow + core are drawn inside the SVG so they track the arc accurately
   on any viewport (desktop, tablet, mobile). */
.sun-path .sun-dot-glow {
    fill: var(--amber);
    opacity: .35;
    filter: blur(2px);
}

.sun-path .sun-dot-core {
    fill: var(--amber);
}

@media (max-width: 760px) {
    .sun-path {
        height: 90px;
        margin: var(--s-4) auto var(--s-8);
    }
}

.day-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
}

.day-card {
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
    padding: var(--s-6);
    display: grid;
    gap: var(--s-3);
    position: relative;
    transition: transform var(--t-quick), box-shadow var(--t-quick);
}

.day-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -28px rgba(31,26,20,.35);
}

.day-card .icon {
    width: 28px;
    height: 28px;
    color: var(--palm);
}

.day-card .time {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    color: var(--coral);
    line-height: 1;
}

.day-card h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--ink);
}

.day-card p {
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .day-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .day-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CHOOSE YOUR LAMU — 4 hero cards
============================================================ */
.choose {
    background: var(--paper-deep);
    border-block: 1px solid var(--line-soft);
}

.choose .choose-header {
    text-align: center;
    margin-bottom: var(--s-10);
    margin-inline: auto;
    max-width: 60ch;
}

.choose .choose-header h2 {
    font-size: var(--text-2xl);
    margin-top: var(--s-3);
    font-weight: 300;
}

.choose .choose-header h2 em {
    color: var(--coral);
}

.choose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}

.choose-card {
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
}

.choose-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) brightness(.78);
    transition: transform 1.6s var(--t-slow), filter var(--t-slow);
}

.choose-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31,26,20,.7) 0%, rgba(31,26,20,.15) 50%, transparent 100%);
    pointer-events: none;
}

.choose-card:hover img {
    transform: scale(1.05);
    filter: saturate(1) brightness(.85);
}

.choose-card-text {
    position: absolute;
    left: var(--s-5);
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: 1;
}

.choose-card .num {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .35em;
    color: var(--coral-soft);
    margin-bottom: var(--s-3);
}

.choose-card h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-lg);
    color: var(--paper);
    line-height: 1.15;
    margin-bottom: var(--s-3);
}

.choose-card p {
    font-size: var(--text-sm);
    color: rgba(244,236,224,.85);
}

/* 6-column variant for the expanded "Six Ways" grid */
.choose-grid--six {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s-3);
}

.choose-grid--six .choose-card {
    aspect-ratio: 3/5;
}

.choose-grid--six .choose-card-text {
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-4);
}

.choose-grid--six .choose-card .num {
    font-size: 10px;
    letter-spacing: .25em;
    margin-bottom: var(--s-2);
}

.choose-grid--six .choose-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--s-2);
}

.choose-grid--six .choose-card p {
    font-size: 11px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1280px) {
    .choose-grid--six {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-5);
    }

    .choose-grid--six .choose-card {
        aspect-ratio: 3/4;
    }

    .choose-grid--six .choose-card-text {
        left: var(--s-5);
        right: var(--s-5);
        bottom: var(--s-5);
    }

    .choose-grid--six .choose-card h3 {
        font-size: var(--text-lg);
    }

    .choose-grid--six .choose-card p {
        font-size: var(--text-sm);
        -webkit-line-clamp: unset;
    }

    .choose-grid--six .choose-card .num {
        font-size: var(--text-xs);
        letter-spacing: .35em;
    }
}

@media (max-width: 1080px) {
    .choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .choose-grid--six {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px)  {
    .choose-grid--six {
        grid-template-columns: repeat(2, 1fr);
    }

    .choose-grid--six .choose-card {
        aspect-ratio: 4/5;
    }
}

@media (max-width: 560px)  {
    .choose-grid {
        grid-template-columns: 1fr;
    }

    .choose-grid--six {
        grid-template-columns: 1fr;
    }

    .choose-grid--six .choose-card {
        aspect-ratio: 3/2;
    }
}

/* ============================================================
   FOOD / WELLNESS / SUSTAINABILITY / STORY — share editorial-two
============================================================ */
.food,
.wellness,
.story {
    background: var(--paper);
}

.food .ed-text h2 em {
    color: var(--coral);
    font-weight: 300;
}

/* softened, more natural sage/palm — the original --palm felt forest-heavy */
.sus {
    background: #6f8773;
    color: var(--paper-soft);
}

.sus .section-label {
    color: rgba(244,236,224,.82);
}

.sus .section-label::before {
    background: rgba(244,236,224,.55);
}

.sus h2 {
    color: var(--paper);
}

.sus h2 em {
    color: var(--coral-soft);
}

.sus p {
    color: rgba(244,236,224,.88);
}

.sus .ed-img figcaption {
    background: none;
    color: #e0d7d7;
    box-shadow: none;
}

.sus-pillars {
    margin-top: var(--s-12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
}

.sus-pillar {
    display: grid;
    gap: var(--s-3);
}

.sus-pillar .icon {
    width: 28px;
    height: 28px;
    color: var(--coral-soft);
}

.sus-pillar h3 {
    color: var(--paper);
    font-size: var(--text-lg);
    font-weight: 400;
}

.sus-pillar p {
    color: #000000;
    font-size: var(--text-sm);
}

/* ============================================================
   ISLAND HOME (002) — "Not just another island retreat"
============================================================ */
.island-home {
    background: var(--paper);
    border-block: 1px solid var(--line-soft);
}

.island-home .ed-text h2 em {
    color: var(--coral);
    font-style: italic;
    font-weight: 300;
}

.island-home-quote {
    margin: var(--s-8) 0 0;
    padding: var(--s-5) 0 var(--s-3) var(--s-6);
    border-left: 2px solid var(--coral-soft);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-xl);
    line-height: 1.4;
    color: var(--ink);
}

.island-home-quote p {
    margin: 0 0 var(--s-3);
}

.island-home-quote cite {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-sm);
    letter-spacing: .04em;
    color: var(--ink-soft);
}

.island-home-quote cite a {
    color: inherit;
    border-bottom: 1px solid currentColor;
}

.island-home-quote cite a:hover {
    color: var(--coral);
}

.island-home .ed-img figcaption {
    font-family: var(--font-hand);
    font-size: 1.4rem;
}

@media (max-width: 900px) {
    .sus-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .sus-pillars {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ISLAND BENTO — image grid with handwritten labels
============================================================ */
.island {
    background: var(--paper-soft);
    border-block: 1px solid var(--line-soft);
}

.island .section-head {
    text-align: center;
    margin-inline: auto;
}

.island-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: var(--s-4);
}

.island-tile {
    position: relative;
    overflow: hidden;
}

.island-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--t-slow);
    filter: saturate(.95);
}

.island-tile:hover img {
    transform: scale(1.05);
}

.island-tile.tall {
    grid-row: span 2;
}

.island-tile.wide {
    grid-column: span 2;
}

.island-tile-label {
    position: absolute;
    left: var(--s-3);
    bottom: var(--s-3);
    font-family: var(--font-hand);
    font-size: 1.5rem;
    color: var(--paper);
    background: rgba(31,26,20,.55);
    padding: 2px 10px;
    border-radius: 1px;
}

@media (max-width: 900px) {
    .island-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .island-tile.wide,
    .island-tile.tall {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ============================================================
   BOAT-MAP — animated dhow journey
============================================================ */
.boat-map {
    background: var(--paper-deep);
    border-block: 1px solid var(--line-soft);
    position: relative;
    overflow: hidden;
}

.boat-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(31,26,20,.04) 1.2px, transparent 1.2px);
    background-size: 16px 16px;
    pointer-events: none;
}

.boat-map > * {
    position: relative;
}

.boat-map-header {
    text-align: center;
    margin-bottom: var(--s-10);
    margin-inline: auto;
    max-width: 56ch;
}

.boat-map-header h2 {
    font-size: var(--text-2xl);
    margin-top: var(--s-3);
    font-weight: 300;
}

.boat-map-header h2 em {
    color: var(--coral);
}

.boat-map-svg {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: block;
    color: var(--ocean);
}

.boat-route {
    fill: none;
    stroke: var(--ocean);
    stroke-width: 1.4;
    stroke-dasharray: 4 6;
    opacity: .55;
}

.dhow-marker {
    fill: var(--ocean);
}

@keyframes dhow-glide {
    to {
        offset-distance: 100%;
    }
}

/* ============================================================
   STORY — long-form reading
============================================================ */
.story-prose {
    max-width: 60ch;
    margin: 0 auto;
}

.story-prose p {
    margin-bottom: var(--s-5);
}

.story-prose h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-xl);
    margin-block: var(--s-8) var(--s-4);
    color: var(--ink);
    font-weight: 300;
}

.story-prose blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-xl);
    line-height: 1.3;
    color: var(--palm);
    border-left: 1px solid var(--palm);
    padding-left: var(--s-6);
    margin-block: var(--s-8);
    max-width: 28ch;
}

/* ============================================================
   PROSE — long-form editorial article body (Story, etc.)
============================================================ */
.prose {
    font-family: var(--font-body);
}

.prose > p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.85;
    color: var(--ink);
    margin: 30px 0 var(--s-5);
    max-width: 64ch;
}

.prose > p:first-of-type {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: var(--s-7);
}

.prose h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-3xl);
    line-height: 1.1;
    color: var(--ink);
    margin: var(--s-12) 0 var(--s-5);
    letter-spacing: -.01em;
}

.prose h2 em {
    font-style: italic;
    color: var(--coral);
}

.prose blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-2xl);
    line-height: 1.3;
    color: var(--palm);
    margin: var(--s-10) 0;
    padding-left: var(--s-5);
    border-left: 2px solid var(--coral);
    max-width: 38ch;
}

.prose blockquote em {
    color: var(--coral);
}

.prose .handwritten {
    font-family: var(--font-hand);
    color: var(--ink-soft);
    font-size: 1.5rem;
    line-height: 1.3;
}

.prose ul,
.prose ol {
    font-size: var(--text-base);
    line-height: 1.85;
    color: var(--ink);
    margin: 0 0 var(--s-5);
    padding-left: var(--s-5);
    max-width: 60ch;
}

.prose ul li,
.prose ol li {
    margin-bottom: var(--s-2);
}

/* ============================================================
   EXPERIENCE / WELLNESS / FOOD — editorial card grid
============================================================ */
.exp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--s-8), 4.5vw, var(--s-12)) clamp(var(--s-5), 3vw, var(--s-8));
    align-items: start;
}

.exp-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.exp-card img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    filter: saturate(.96) contrast(1.02);
    margin-bottom: var(--s-2);
    transition: transform 1.2s var(--t-slow);
}

.exp-card:hover img {
    transform: scale(1.015);
}

.exp-card h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-xl);
    line-height: 1.15;
    color: var(--ink);
    margin: 0;
}

.exp-card p {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.exp-card .section-label {
    color: var(--coral);
    margin: var(--s-1) 0 0;
}

/* All cards uniform aspect for clean horizontal rows */
@media (max-width: 900px) {
    .exp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-8) var(--s-5);
    }
}

@media (max-width: 560px) {
    .exp-grid {
        grid-template-columns: 1fr;
        gap: var(--s-8);
    }
}

/* ============================================================
   STAY page — magazine spreads of cabanas
============================================================ */
.cabanas-list {
    max-width: var(--content);
    margin: 0 auto;
}

.cabana {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-6);
    align-items: center;
    padding-block: clamp(var(--s-10), 12vh, var(--s-16));
    border-bottom: 1px solid var(--line);
}

.cabana:last-of-type {
    border-bottom: none;
}

.cabana-img {
    position: relative;
}

.cabana-img img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    filter: saturate(.95) contrast(1.02);
    transition: transform 1.4s var(--t-slow);
}

.cabana-img:hover img {
    transform: scale(1.02);
}

.cabana-caption {
    position: absolute;
    font-family: var(--font-hand);
    font-size: 1.5rem;
    padding: 4px 12px;
    background: var(--paper);
    color: var(--ink-soft);
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(31,26,20,.06);
}

.cabana--left .cabana-img {
    grid-column: 1 / span 7;
}

.cabana--left .cabana-text {
    grid-column: 9 / span 4;
}

.cabana--left .cabana-caption {
    bottom: -22px;
    right: -16px;
}

.cabana--right .cabana-img {
    grid-column: 6 / span 7;
    grid-row: 1;
}

.cabana--right .cabana-text {
    grid-column: 1 / span 4;
    grid-row: 1;
    padding-right: var(--s-5);
}

.cabana--right .cabana-caption {
    bottom: -22px;
    left: -16px;
}

/* alternate aspect ratios for visual rhythm */
.cabana:nth-of-type(2) .cabana-img img {
    aspect-ratio: 5/6;
}

.cabana:nth-of-type(3) .cabana-img img {
    aspect-ratio: 4/3;
}

.cabana:nth-of-type(5) .cabana-img img {
    aspect-ratio: 4/3;
}

.cabana-num {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .3em;
    color: var(--coral);
    margin-bottom: var(--s-2);
}

.cabana-name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 300;
    line-height: 1;
    margin-bottom: var(--s-4);
}

.cabana-meaning {
    display: block;
    margin-top: var(--s-2);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.cabana-text p {
    margin-bottom: var(--s-3);
}

.cabana-text em {
    font-style: italic;
    color: var(--palm);
    font-family: var(--font-display);
}

.cabana-detail {
    margin-top: var(--s-5);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

@media (max-width: 800px) {
    .cabana {
        grid-template-columns: 1fr;
        gap: var(--s-5);
        padding-block: var(--s-10);
    }

    .cabana--left .cabana-img,
    .cabana--right .cabana-img,
    .cabana--left .cabana-text,
    .cabana--right .cabana-text {
        grid-column: 1 / -1;
        grid-row: auto;
        transform: none;
        padding-right: 0;
    }

    .cabana-img img {
        aspect-ratio: 4/3 !important;
    }

    .cabana-caption {
        bottom: -18px !important;
        left: 12px !important;
        right: auto !important;
    }
}

/* ============================================================
   EXPERIENCE / WELLNESS / FOOD interior pages — card grids
============================================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}

.card-grid--two {
    grid-template-columns: repeat(2, 1fr);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    transition: transform var(--t-quick), box-shadow var(--t-quick);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -28px rgba(31,26,20,.4);
}

.card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    filter: saturate(.95);
    transition: transform 1.6s var(--t-slow);
}

.card:hover img {
    transform: scale(1.04);
}

.card-body {
    padding: var(--s-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.card-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--coral);
}

.card h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: 1.2;
    color: var(--ink);
}

.card p {
    font-size: var(--text-sm);
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .card-grid,
    .card-grid--two {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   JOURNAL grid (homepage and journal page)
============================================================ */
.journal-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: var(--s-10);
    gap: var(--s-5);
}

.journal-header h2 {
    font-size: var(--text-2xl);
    margin-top: var(--s-3);
    font-weight: 300;
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
}

.journal-card {
    display: grid;
    gap: var(--s-3);
}

.journal-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    filter: saturate(.95);
    transition: transform 1.6s var(--t-slow);
}

.journal-card:hover img {
    transform: scale(1.03);
}

.journal-card .meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--coral);
    margin-top: var(--s-3);
}

.journal-card h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: 1.2;
}

.journal-card p {
    font-size: var(--text-sm);
}

.journal-card .read-more {
    margin-top: var(--s-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

@media (max-width: 800px) {
    .journal-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FAQ
============================================================ */
.faq {
    background: var(--paper-soft);
    border-block: 1px solid var(--line-soft);
}

.faq h2 {
    text-align: center;
    font-size: var(--text-2xl);
    margin-block: var(--s-3) var(--s-8);
    font-weight: 300;
}

.faq-list {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-8);
}

.faq-item {
    border-bottom: 1px solid var(--line);
    padding-block: var(--s-4);
}

.faq-item summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--ink);
    list-style: none;
}

.faq-item summary::after {
    content: "+";
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--coral);
    transition: transform var(--t-quick);
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item p {
    margin-top: var(--s-3);
    max-width: 64ch;
}

/* ============================================================
   ENQUIRE — full-bleed, dark-overlaid, paper inputs
============================================================ */
.enquire {
    position: relative;
    isolation: isolate;
    color: var(--paper);
    overflow: hidden;
    display: grid;
    align-items: center;
    padding-block: clamp(var(--s-12), 14vh, var(--s-20));
}

.enquire::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('./assets/photos/dji_20260120175333_0029_d.jpg');
    background-size: cover;
    background-position: center;
}

.enquire::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(31,26,20,.55), rgba(31,26,20,.7));
}

.enquire-header {
    text-align: center;
    margin-bottom: var(--s-10);
    margin-inline: auto;
    max-width: 56ch;
    color: var(--paper);
}

.enquire-header h2 {
    color: var(--paper);
    font-size: var(--text-3xl);
    font-weight: 300;
    margin-top: var(--s-3);
}

.enquire-header h2 em {
    color: var(--coral-soft);
}

.enquire-header p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: rgba(244,236,224,.88);
    margin-top: var(--s-4);
}

.enquire .section-label {
    color: rgba(244,236,224,.78);
    justify-content: center;
}

.enquire .section-label::before {
    background: currentColor;
}

.form {
    display: grid;
    gap: var(--s-5);
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.form .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}

.form .field {
    display: grid;
    gap: var(--s-2);
}

.form label,
.form .field-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(244,236,224,.7);
}

.form input,
.form select,
.form textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(244,236,224,.4);
    padding: var(--s-3) 0;
    color: var(--paper);
    font-family: var(--font-display);
    font-size: var(--text-base);
    width: 100%;
    transition: border-color var(--t-quick);
}

.form select {
    color-scheme: dark;
}

.form input::placeholder,
.form textarea::placeholder {
    color: rgba(244,236,224,.45);
    font-style: italic;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--coral-soft);
}

.form textarea {
    resize: vertical;
    min-height: 96px;
}

.form .btn-send {
    margin-top: var(--s-5);
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 1em 2em;
    border: 1px solid var(--paper);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--paper);
    background: transparent;
    transition: background var(--t-quick), color var(--t-quick), gap var(--t-quick);
    cursor: pointer;
}

.form .btn-send:hover {
    background: var(--coral);
    border-color: var(--coral);
    gap: var(--s-4);
}

.form-foot {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    color: rgba(244,236,224,.5);
    margin-top: var(--s-4);
    text-align: center;
}

.enquire-sign {
    margin-top: var(--s-10);
    font-family: var(--font-hand);
    font-size: 2.4rem;
    text-align: right;
    color: var(--coral-soft);
}

@media (max-width: 700px) {
    .form .row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FOOTER
============================================================ */
/* FOOTER on cream — matches header. Adds watercolour map flourish. */
.site-footer {
    background: var(--paper);
    color: var(--ink-soft);
    padding: var(--s-12) clamp(var(--s-5), 5vw, var(--s-12)) var(--s-6);
    font-size: var(--text-sm);
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    /* hand-drawn ink rule that crosses the top of the footer */
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    height: 1px;
    width: 100%;
    background: var(--line-soft);
}

.foot-watermark {
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: clamp(280px, 32vw, 460px);
    opacity: .14;
    pointer-events: none;
    filter: saturate(.85);
    mix-blend-mode: multiply;
}

.foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-8);
    padding-bottom: var(--s-10);
    border-bottom: 1px solid var(--line-soft);
    position: relative;
    z-index: 1;
}

.site-footer .brand {
    color: var(--ink);
}

.site-footer h4 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
    margin-bottom: var(--s-3);
}

.site-footer a {
    display: block;
    margin-bottom: var(--s-2);
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--ink-soft);
    transition: color var(--t-quick);
}

.site-footer a:hover {
    color: var(--coral);
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-xs);
    color: var(--ink-mute);
    position: relative;
    z-index: 1;
}

@media (max-width: 800px) {
    .foot-grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer .brand-block {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   SCROLL REVEAL — light-touch
============================================================ */
.js-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--t-slow), transform 1s var(--t-slow);
}

.js-ready .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    padding-top: 0px;
    margin-bottom: 6px;
    padding-bottom: 0px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .hero-title-line,
    .hero-sub,
    .hero-meta,
    .hero-hand,
    .hero-coord,
    .hero-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    .js-ready .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   FOOTPRINTS — animated SVG trail (scroll-aware)
============================================================ */
.footprints {
    position: absolute;
    pointer-events: none;
    opacity: .35;
    color: var(--ink-soft);
}

.footprints path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: footprintsDraw 3.4s ease-out forwards;
}

@keyframes footprintsDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ============================================================
   WELLNESS — editorial collage with handwritten mantra fragments
   Uses CSS grid + asymmetric placement, paper-textured caption blocks
============================================================ */
.wellness-mantra {
    background: var(--paper);
    padding-block: clamp(var(--s-12), 8vw, var(--s-20));
    position: relative;
    overflow: hidden;
}

.wellness-mantra--2 {
    background: #efe4cf;
}

.wellness-mantra--3 {
    background: var(--paper-soft);
}

.collage {
    display: grid;
    gap: clamp(var(--s-3), 1.6vw, var(--s-6));
}

/* Shared photo treatment */
.collage-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.collage-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.95) contrast(1.02);
}

.collage-photo figcaption {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--paper);
    background: rgba(31,26,20,.55);
    padding: 4px 10px;
    letter-spacing: .01em;
    backdrop-filter: blur(2px);
}

/* Paper-textured handwritten mantra block */
.collage-paper {
    background: linear-gradient(180deg, #faf2e5 0%, #f4ebd8 100%);
    background-image: radial-gradient(circle at 20% 30%, rgba(165,140,95,.045) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(165,140,95,.05) 0 1px, transparent 1px),
    linear-gradient(180deg, #faf2e5 0%, #f4ebd8 100%);
    background-size: 7px 7px, 9px 9px, auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(var(--s-6), 3vw, var(--s-10));
    box-shadow: inset 0 0 50px rgba(165,140,95,.06);
    border: 1px solid rgba(165,140,95,.1);
}

.collage-paper--lg {
    min-height: 320px;
}

.collage-paper--md {
    min-height: 220px;
}

/* "Hand-typed" — typewriter feel using Anonymous Pro, lowercase, generous leading */
.hand-typed {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.3vw, 1.35rem);
    line-height: 2.0;
    letter-spacing: .01em;
    color: var(--ink);
    margin: 0;
    max-width: 32ch;
    text-transform: lowercase;
}

.hand-typed em {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    color: var(--coral);
}

/* COLLAGE 1 — paper-LARGE on left, photo top-right, photo bottom-right */
.collage--1 {
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "paper photoA"
    "paper photoB";
}

.collage--1 .collage-paper {
    grid-area: paper;
}

.collage--1 .collage-photo--a {
    grid-area: photoA;
    aspect-ratio: 4/3;
}

.collage--1 .collage-photo--b {
    grid-area: photoB;
    aspect-ratio: 4/3;
}

/* COLLAGE 2 — large left photo, paper top-right, two photos stacked right-bottom */
.collage--2 {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "photoC paper"
    "photoC photoD"
    "photoE photoE";
    grid-template-rows: 220px 280px 360px;
}

.collage--2 .collage-photo--c {
    grid-area: photoC;
}

.collage--2 .collage-paper {
    grid-area: paper;
}

.collage--2 .collage-photo--d {
    grid-area: photoD;
}

.collage--2 .collage-photo--e {
    grid-area: photoE;
}

.collage--2 .collage-photo--c img,
.collage--2 .collage-photo--d img,
.collage--2 .collage-photo--e img {
    height: 100%;
}

/* COLLAGE 3 — paper top-left, three photos in a flowing bento */
.collage--3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 280px 360px;
    grid-template-areas: "paper  photoF photoG"
    "photoH photoH photoG";
}

.collage--3 .collage-paper {
    grid-area: paper;
}

.collage--3 .collage-photo--f {
    grid-area: photoF;
}

.collage--3 .collage-photo--g {
    grid-area: photoG;
}

.collage--3 .collage-photo--h {
    grid-area: photoH;
}

.collage--3 .collage-photo img {
    height: 100%;
}

/* MOBILE — stack everything */
@media (max-width: 800px) {
    .collage--1,
    .collage--2,
    .collage--3 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        grid-auto-rows: auto;
        grid-auto-flow: row;
    }

    .collage--1 .collage-paper,
    .collage--1 .collage-photo,
    .collage--2 .collage-paper,
    .collage--2 .collage-photo,
    .collage--3 .collage-paper,
    .collage--3 .collage-photo {
        grid-area: auto;
    }

    .collage--2 .collage-photo--c,
    .collage--2 .collage-photo--d,
    .collage--2 .collage-photo--e,
    .collage--3 .collage-photo--f,
    .collage--3 .collage-photo--g,
    .collage--3 .collage-photo--h {
        aspect-ratio: 4/3;
        height: auto;
    }

    .collage--2 .collage-photo--c img,
    .collage--2 .collage-photo--d img,
    .collage--2 .collage-photo--e img,
    .collage--3 .collage-photo img {
        height: 100%;
    }

    .collage-paper--lg {
        min-height: 240px;
    }

    .hand-typed {
        font-size: 1.05rem;
        line-height: 1.85;
        max-width: 28ch;
    }
}

/* ============================================================
   STAY — per-cabana editorial: name plate + sensory specs
   Builds on .collage / .collage-paper / .hand-typed system.
============================================================ */
.cabana-plate {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid rgba(31,26,20,.12);
}

.cabana-plate .num {
    font-family: var(--font-body);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--coral);
}

.cabana-plate .name {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    line-height: 1;
    margin: 0;
    color: var(--ink);
}

.cabana-plate .meaning {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--coral);
    margin: 0;
    line-height: 1;
}

.cabana-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0 0;
}

.cabana-specs li {
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    background: rgba(31,26,20,.06);
    padding: 5px 10px;
    border-radius: 2px;
}

/* Stay-page: let paper block grow tall enough to hold plate + mantra + specs */
.collage-paper.cabana-paper {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--s-3);
    min-height: 100%;
}

/* On Stay, allow paper-row to grow with content rather than be clipped at fixed row height */
.cabana-section .collage--2 {
    grid-template-rows: minmax(280px, auto) 280px 360px;
}

.cabana-section .collage--3 {
    grid-template-rows: minmax(320px, auto) 360px;
}

.cabana-section .collage--1 {
    grid-template-rows: auto auto;
}

/* Alternate paper background tints per section so the page doesn't feel uniform */
.cabana-section {
    padding-block: clamp(var(--s-12), 8vw, var(--s-20));
    position: relative;
    overflow: hidden;
}

.cabana-section--1 {
    background: var(--paper);
}

.cabana-section--2 {
    background: var(--paper-soft);
}

.cabana-section--3 {
    background: #efe4cf;
}

.cabana-section--4 {
    background: var(--paper);
}

.cabana-section--5 {
    background: var(--paper-soft);
}

.cabana-section--6 {
    background: #efe4cf;
}

.cabana-section--7 {
    background: var(--paper);
}

/* Editorial divider with cabana count, between sections */
.stay-divider {
    text-align: center;
    padding-block: var(--s-8);
    background: var(--paper);
}

.stay-divider .mark {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    color: var(--coral);
    letter-spacing: .03em;
}

.stay-divider .rule {
    display: block;
    width: 1px;
    height: 32px;
    background: rgba(31,26,20,.2);
    margin: var(--s-3) auto;
}

/* ============================================================
   CABANA GALLERY — 4-photo editorial grid below each collage
   Renders a 4-photo mix of portrait + landscape per cabana,
   giving 2 (existing collage) + 4 (this grid) = 6 photos total.
   Layouts alternate left/right per cabana via --gallery--N variants.
============================================================ */
.cabana-gallery {
    margin-top: var(--s-10);
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 320px 320px;
    grid-template-areas: "p1 p1 p2 p3"
        "p1 p1 p4 p4";
}

/* Alt layout — flips the tall portrait to the right side */
.cabana-gallery--alt {
    grid-template-areas: "p2 p3 p1 p1"
        "p4 p4 p1 p1";
}

/* Third variant — split tall + two landscapes + one square */
.cabana-gallery--split {
    grid-template-areas: "p1 p2 p2 p3"
        "p1 p4 p4 p3";
}

.cabana-gallery .g-p1 {
    grid-area: p1;
}

.cabana-gallery .g-p2 {
    grid-area: p2;
}

.cabana-gallery .g-p3 {
    grid-area: p3;
}

.cabana-gallery .g-p4 {
    grid-area: p4;
}

.cabana-gallery figure {
    margin: 0;
    overflow: hidden;
    background: var(--paper-soft);
    border-radius: 2px;
    position: relative;
}

.cabana-gallery figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .9s ease;
}

.cabana-gallery figure:hover img {
    transform: scale(1.03);
}

/* Optional caption — tiny editorial tag bottom-left */
.cabana-gallery figcaption {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-family: var(--font-mono, 'Anonymous Pro', monospace);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(31,26,20,.55);
    padding: 3px 8px;
    border-radius: 1px;
    pointer-events: none;
}

/* Tablet: shrink rows */
@media (max-width: 1100px) {
    .cabana-gallery {
        grid-template-rows: 260px 260px;
    }
}

/* Mobile: collapse to a simple 2-column stack, keep all 4 visible */
@media (max-width: 720px) {
    .cabana-gallery,
    .cabana-gallery--alt,
    .cabana-gallery--split {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 220px 220px;
        grid-template-areas: "p1 p1"
            "p2 p3"
            "p4 p4";
        gap: var(--s-3);
    }

    .cabana-gallery--alt {
        grid-template-areas: "p1 p1"
            "p3 p2"
            "p4 p4";
    }
}

/* ============================================================
   ROUND 4 — hand-drawn pencil/watercolour animations
   Subtle, lightweight, performance-friendly, reduced-motion safe
============================================================ */
/* shared sketch lines */
.sketch {
    color: var(--ink);
    opacity: .55;
}

.sketch--soft {
    opacity: .35;
}

.sketch path,
.sketch line,
.sketch polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Section 001 — illustration zones */
.rhythm {
    position: relative;
    overflow: hidden;
    margin-top: 0px;
}

.rhythm-illos {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.rhythm-illos > * {
    position: absolute;
}

.illo-dhow {
    left: 2vw;
    top: 18%;
    width: clamp(180px, 22vw, 320px);
    color: var(--ink);
    opacity: .65;
}

.illo-island {
    right: 2vw;
    top: 22%;
    width: clamp(160px, 20vw, 280px);
}

.rhythm > .container {
    position: relative;
    z-index: 1;
}

/* Pencil-line waves drift */
@keyframes waveDrift {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-40px);
    }
}

.illo-dhow .waves {
    animation: waveDrift 7s ease-in-out infinite alternate;
}

/* Dhow rocks gently */
@keyframes dhowRock {
    0%,
    100% {
        transform: translate(0, 0) rotate(-1.8deg);
    }

    50% {
        transform: translate(8px, -3px) rotate(.6deg);
    }
}

.illo-dhow .vessel {
    transform-origin: 50% 80%;
    animation: dhowRock 6s ease-in-out infinite;
}

/* Palm sway on island */
@keyframes palmSway {
    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2.5deg);
    }
}

.illo-island .palm-fronds {
    transform-origin: 50% 92%;
    animation: palmSway 5.5s ease-in-out infinite;
}

@keyframes islandWaves {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-30px);
    }
}

.illo-island .island-waves {
    animation: islandWaves 9s ease-in-out infinite alternate;
}

/* Section 008 pinboard — watercolour map */
.pinboard {
    position: relative;
    background: radial-gradient(ellipse at 30% 20%, rgba(0,0,0,.04), transparent 60%),
    var(--paper-deep);
    padding: clamp(var(--s-8), 6vw, var(--s-12)) clamp(var(--s-5), 5vw, var(--s-12));
    border-radius: 2px;
    box-shadow: inset 0 0 80px rgba(31,26,20,.05);
}

.pinboard::before {
    /* faint corkboard texture using radial dots */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(31,26,20,.08) 1px, transparent 1.4px);
    background-size: 14px 14px;
    opacity: .4;
    pointer-events: none;
    border-radius: inherit;
}

.pinboard-card {
    position: relative;
    background: #fffdf6;
    padding: 14px 14px 18px;
    box-shadow: 0 18px 40px -12px rgba(31,26,20,.18), 0 2px 6px rgba(31,26,20,.08);
    margin: 0 auto;
    max-width: 880px;
    transform: rotate(-.6deg);
    transition: transform var(--t-slow);
}

.pinboard-card:hover {
    transform: rotate(0deg);
}

.pinboard-card img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(.95);
}

.pinboard-card .pin {
    position: absolute;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 35% 30%, #d8745c, #8a3a26 70%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.3), inset -2px -3px 4px rgba(0,0,0,.25);
}

.pinboard-card .pin--tl {
    top: -8px;
    left: 30px;
}

.pinboard-card .pin--tr {
    top: -8px;
    right: 30px;
}

.pinboard-card .caption {
    margin-top: 10px;
    font-family: var(--font-hand);
    font-size: 1.7rem;
    color: var(--ink-soft);
    text-align: center;
}

/* Section 008 seabird — drifts across */
@keyframes birdGlide {
    0% {
        transform: translate(-10vw, 20px) rotate(-3deg);
    }

    50% {
        transform: translate(45vw, -10px) rotate(2deg);
    }

    100% {
        transform: translate(110vw, 30px) rotate(-2deg);
    }
}

.illo-bird {
    position: absolute;
    top: 8%;
    left: 0;
    width: 70px;
    color: var(--ink);
    opacity: .5;
    animation: birdGlide 22s linear infinite;
    pointer-events: none;
}

@keyframes wingFlap {
    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(.6);
    }
}

.illo-bird .wing {
    transform-origin: center;
    animation: wingFlap 1.3s ease-in-out infinite;
}

/* Crab — Section 013 */
.illo-crab-zone {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    overflow: hidden;
}

@keyframes crabScuttle {
    0% {
        transform: translateX(-90px) scaleX(1);
    }

    47% {
        transform: translateX(60vw) scaleX(1);
    }

    50% {
        transform: translateX(60vw) scaleX(-1);
    }

    97% {
        transform: translateX(-90px) scaleX(-1);
    }

    100% {
        transform: translateX(-90px) scaleX(1);
    }
}

@keyframes crabWobble {
    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-3px) rotate(2deg);
    }

    75% {
        transform: translateY(-3px) rotate(-2deg);
    }
}

.illo-crab {
    position: absolute;
    bottom: 0;
    width: 60px;
    color: var(--ink);
    opacity: .55;
    animation: crabScuttle 28s linear infinite;
}

.illo-crab .body {
    display: inline-block;
    animation: crabWobble .6s ease-in-out infinite;
    transform-origin: center;
}

/* Reduced motion — kill non-essential animations */
@media (prefers-reduced-motion: reduce) {
    .illo-dhow .waves,
    .illo-dhow .vessel,
    .illo-island .palm-fronds,
    .illo-island .island-waves,
    .illo-bird,
    .illo-bird .wing,
    .illo-crab,
    .illo-crab .body {
        animation: none !important;
    }
}

/* ============================================================
   ROUND 4 — Cabana naming story (Stay page)
============================================================ */
.naming-story {
    background: var(--paper-soft);
    padding: clamp(var(--s-10), 7vw, var(--s-16)) clamp(var(--s-5), 5vw, var(--s-12));
    text-align: center;
}

.naming-story-inner {
    max-width: 720px;
    margin: 0 auto;
}

.naming-story .quote {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
    line-height: 1.35;
    color: var(--ink);
    font-weight: 300;
}

.naming-story .quote em {
    font-style: italic;
    color: var(--coral);
    font-weight: 300;
}

.naming-story .signature {
    margin-top: var(--s-6);
    font-family: var(--font-hand);
    font-size: 2rem;
    color: var(--ink-soft);
}

/* ============================================================
   ROUND 4 — Swahili craft / natural materials block
============================================================ */
.craft {
    padding: clamp(var(--s-12), 8vw, var(--s-20)) clamp(var(--s-5), 5vw, var(--s-12));
}

.craft-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--s-6), 4vw, var(--s-10));
    margin-top: var(--s-10);
    align-items: start;
}

.craft-card {
    display: flex;
    flex-direction: column;
}

.craft-card-img {
    aspect-ratio: 4 / 5;
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--s-5);
    background: var(--paper-soft);
}

.craft-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}

.craft-card:hover .craft-card-img img {
    transform: scale(1.04);
}

.craft-card-h {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.7rem, 1.2rem + 1vw, 2.2rem);
    margin: 0 0 var(--s-1);
    letter-spacing: -0.01em;
}

.craft-card-meta {
    font-family: var(--font-hand);
    font-size: clamp(1.3rem, 1rem + .4vw, 1.6rem);
    color: var(--coral);
    margin: 0 0 var(--s-3);
    line-height: 1;
}

.craft-card p {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin: 0;
}

@media (max-width: 800px) {
    .craft-grid {
        grid-template-columns: 1fr;
    }

    .craft-card-img {
        aspect-ratio: 16 / 10;
    }
}

/* ============================================================
   ROUND 4 — Polaroid wall (Experience: People who make the magic)
============================================================ */
.polaroid-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: clamp(var(--s-4), 2.5vw, var(--s-8));
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(var(--s-8), 5vw, var(--s-16)) clamp(var(--s-4), 4vw, var(--s-10));
}

@media (min-width: 600px) {
    .polaroid-board {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
}

.polaroid-section {
    background: repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 90px),
    linear-gradient(180deg, #d4b896 0%, #c8a880 100%);
    padding: clamp(var(--s-12), 8vw, var(--s-20)) 0;
}

.polaroid-section .section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-10);
    padding: 0 var(--s-5);
}

.polaroid-h {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.4rem);
    line-height: 1.05;
    color: #fffdf6;
    letter-spacing: -.01em;
}

.polaroid-h em {
    color: var(--coral);
    font-style: italic;
    font-weight: 300;
}

.polaroid-section .section-head .lede {
    color: rgba(255,253,246,.85);
}

.polaroid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(var(--s-5), 3vw, var(--s-8));
    max-width: 1280px;
    margin: 0 auto;
}

.polaroid {
    background: #fffdf6;
    padding: 12px 12px 16px;
    box-shadow: 0 12px 28px -8px rgba(31,26,20,.25), 0 2px 4px rgba(31,26,20,.1);
    position: relative;
    transition: transform var(--t-slow);
}

.polaroid:nth-child(3n) {
    transform: rotate(-1.4deg);
}

.polaroid:nth-child(3n+1) {
    transform: rotate(.8deg);
}

.polaroid:nth-child(3n+2) {
    transform: rotate(-.6deg) translateY(8px);
}

.polaroid:hover {
    transform: rotate(0) translateY(-4px);
    z-index: 5;
}

.polaroid .photo {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(160deg, #efe2c9 0%, #d8c4a0 100%);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.polaroid .photo::before {
    content: attr(data-initial);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    color: rgba(31,26,20,.22);
    letter-spacing: -.02em;
    font-style: italic;
    font-weight: 300;
}

.polaroid--family .photo {
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(160deg, #f3c9b8 0%, #d68f73 100%);
}

.polaroid--family .photo::before {
    color: rgba(255,255,255,.7);
}

.polaroid .photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.2), transparent 50%);
}

.polaroid .name {
    margin-top: 10px;
    font-family: var(--font-hand);
    font-size: 1.65rem;
    text-align: center;
    color: var(--ink);
}

.polaroid .pin {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 35% 30%, #6c8f9c, #2c4a55 70%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.35), inset -2px -3px 3px rgba(0,0,0,.25);
}

/* ============================================================
   ROUND 4 — Retreat hosts block (Wellness)
============================================================ */
.retreat-hosts {
    background: var(--paper-deep);
    padding: clamp(var(--s-12), 8vw, var(--s-20)) clamp(var(--s-5), 5vw, var(--s-12));
}

.retreat-hosts-inner {
    max-width: var(--content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(var(--s-8), 5vw, var(--s-16));
    align-items: center;
}

.retreat-hosts h2 {
    font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem);
}

.retreat-hosts h2 em {
    color: var(--coral);
    font-style: italic;
    font-weight: 300;
}

.retreat-hosts .ed-img {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.retreat-hosts .ed-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.retreat-hosts .points {
    list-style: none;
    padding: 0;
    margin-top: var(--s-5);
    display: grid;
    gap: var(--s-3);
}

.retreat-hosts .points li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--s-3);
    font-size: var(--text-base);
    color: var(--ink-soft);
}

.retreat-hosts .points li::before {
    content: "·";
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: .5;
    color: var(--coral);
}

@media (max-width: 800px) {
    .retreat-hosts-inner {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ROUND 4 — Dramatic stay hero override
============================================================ */
.stay-hero-v2 {
    position: relative;
    height: 92vh;
    min-height: 620px;
    overflow: hidden;
}

.stay-hero-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) contrast(1.05);
}

.stay-hero-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
}

.stay-hero-v2 .copy {
    position: absolute;
    left: clamp(var(--s-5), 5vw, var(--s-12));
    bottom: clamp(var(--s-8), 8vh, var(--s-12));
    z-index: 2;
    color: var(--paper);
    max-width: 720px;
}

.stay-hero-v2 .eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(244,236,224,.7);
}

.stay-hero-v2 h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.6rem, 1rem + 5vw, 5.5rem);
    line-height: 1.02;
    color: var(--paper);
    margin-top: var(--s-3);
}

.stay-hero-v2 h1 em {
    font-style: italic;
    color: var(--coral-soft);
    font-weight: 300;
}

.stay-hero-v2 .lede {
    color: rgba(244,236,224,.85);
    margin-top: var(--s-4);
}

/* Hero logo (homepage) */
.hero-logo {
    position: absolute;
    top: clamp(20px, 4vh, 40px);
    left: clamp(var(--s-5), 5vw, var(--s-10));
    z-index: 3;
    width: clamp(80px, 9vw, 130px);
    height: auto;
    opacity: .92;
}

/* karibu — top right hand text on hero (sits below the top menu) */
.hero-karibu {
    position: absolute;
    top: clamp(96px, 13vh, 150px);
    right: clamp(var(--s-5), 6vw, var(--s-12));
    z-index: 3;
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 1rem + 1.4vw, 2.6rem);
    color: var(--paper);
    text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* =====================================================
   ROUND 4 — additional component CSS
===================================================== */
/* hero-inner variant when logo is used (homepage) */
.hero-inner--logo .hero-logo + .hero-sub {
    margin-top: var(--s-5);
}

.hero-inner--logo {
    /* keep original layout, the logo replaces text */
    text-align: left;
}

/* hero-karibu — em sub-text */
.hero-karibu-em {
    font-style: italic;
    opacity: .85;
    display: inline-block;
    margin-left: .3em;
}

/* Naming story — heading + signature centred */
.naming-story-h {
    font-size: clamp(1.8rem, 1rem + 2.2vw, 3rem);
    font-weight: 300;
    margin-top: var(--s-3);
    text-align: center;
}

.naming-story-quote {
    margin: var(--s-8) 0 0;
    padding: var(--s-6) var(--s-8);
    border-left: 2px solid var(--coral);
    background: var(--paper-soft);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: clamp(1.1rem, .85rem + .7vw, 1.4rem);
    line-height: 1.5;
    color: var(--ink);
    border-radius: 4px;
}

.naming-story-quote p {
    margin: 0;
}

.naming-story-sig {
    margin-top: var(--s-6);
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .04em;
    color: var(--palm);
}

/* Craft section heading */
.craft-h {
    font-size: clamp(1.8rem, 1rem + 2.2vw, 3rem);
    font-weight: 300;
    margin-top: var(--s-3);
}

/* Dhow pricing cards (experience page) */
.dhow-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-6);
    margin-top: var(--s-10);
}

.dhow-card {
    background: var(--paper);
    border: 1px solid rgba(31,26,20,.1);
    padding: var(--s-7) var(--s-6);
    border-radius: 6px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.dhow-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -16px rgba(31,26,20,.25);
}

.dhow-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0 0 var(--s-2);
}

.dhow-card .dhow-pax {
    font-family: 'Anonymous Pro', monospace;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 var(--s-4);
}

.dhow-card .dhow-price {
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--palm);
    margin: 0 0 var(--s-4);
}

.dhow-card .dhow-price em {
    font-style: italic;
    color: var(--coral);
    font-size: 2.1rem;
}

.dhow-card .dhow-unit {
    font-size: .9rem;
    font-style: normal;
    color: var(--ink-soft);
    font-family: 'Anonymous Pro', monospace;
}

.dhow-card p:last-child {
    font-size: .95rem;
    color: var(--ink);
    opacity: .85;
    line-height: 1.55;
    margin: 0;
}

/* Polaroid section — overall */
.polaroid-section {
    background: linear-gradient(180deg, #f1e3c8 0%, #ead8b3 100%);
    padding: var(--s-16) 0;
    position: relative;
}

.polaroid-h {
    font-size: clamp(1.8rem, 1rem + 2.2vw, 3rem);
    font-weight: 300;
}

/* Highlight family polaroids (Anna, Shawn) */
.polaroid--family .photo {
    background: linear-gradient(135deg, #c75a3c 0%, #8e3d24 100%);
}

.polaroid--family .photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.2), transparent 60%);
}

/* Retreat hosts grid + card */
.retreat-hosts {
    background: var(--paper-deep);
    padding: var(--s-16) 0;
}

.retreat-hosts-h {
    font-size: clamp(2rem, 1rem + 2.6vw, 3.2rem);
    font-weight: 300;
}

.retreat-hosts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
}

.retreat-card {
    background: var(--paper);
    padding: var(--s-7) var(--s-7);
    border-radius: 4px;
    border-top: 3px solid var(--palm);
}

.retreat-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 1.3rem;
    margin: 0 0 var(--s-3);
    color: var(--palm);
}

.retreat-card p {
    font-size: .98rem;
    line-height: 1.6;
    margin: 0;
    color: var(--ink);
    opacity: .9;
}

.retreat-hosts-cta {
    text-align: center;
    margin-top: var(--s-12);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.retreat-hosts-cta p {
    margin-bottom: var(--s-6);
}

@media (max-width: 800px) {
    .retreat-hosts-grid {
        grid-template-columns: 1fr;
    }
}

/* Pinboard fallback pins for tl/tr already exist; ensure no orphan bl/br */
/* If hero-inner--logo center-aligned for mobile */
@media (max-width: 800px) {
    .hero-inner--logo {
        text-align: center;
    }

    .hero-logo {
        left: 50%;
        transform: translateX(-50%);
    }

    .hero-karibu {
        font-size: 1.7rem;
    }
}

/* ============================================================
   ROUND 5 — Header brand image logo + scroll variant
============================================================ */
.brand-logo {
    height: 56px;
    width: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.brand-logo--dark {
    display: none;
}

.site-header.is-scrolled .brand-logo--light,
.site-header.is-solid .brand-logo--light {
    display: none;
}

.site-header.is-scrolled .brand-logo--dark,
.site-header.is-solid .brand-logo--dark {
    display: block;
}

@media (max-width: 800px) {
    .brand-logo {
        height: 44px;
    }
}

/* ============================================================
   ROUND 5 — Watercolour map (Section 008): clean, no box
============================================================ */
.watercolour-map {
    margin: var(--s-10) auto 0;
    text-align: center;
    max-width: 720px;
}

.watercolour-map img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 620px;
    margin: 0 auto;
    background: transparent;
    mix-blend-mode: multiply;

    /* lets the watercolour blend into cream */
}

.watercolour-map figcaption {
    font-family: var(--font-hand);
    font-size: clamp(1.2rem, 1rem + .4vw, 1.5rem);
    color: var(--ink-soft);
    margin-top: var(--s-3);
    background: none;
    padding: 0;
    box-shadow: none;
}

@media (max-width: 800px) {
    .watercolour-map img {
        max-width: 100%;
    }
}

/* === Round 6 — Footer brand logo === */
.foot-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--s-4);
    text-decoration: none;
    color: inherit;
}

.foot-logo {
    height: 64px;
    width: auto;
    display: block;
}

@media (max-width: 800px) {
    .foot-logo {
        height: 52px;
    }
}

/* === Round 6 — Kilindini Dhow image-led section === */
.dhow-hero {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 0;
    background: var(--paper-soft);
    align-items: stretch;
}

.dhow-hero-img {
    margin: 0;
    overflow: hidden;
    position: relative;
    min-height: clamp(420px, 60vh, 720px);
}

.dhow-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    display: block;
    transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}

.dhow-hero:hover .dhow-hero-img img {
    transform: scale(1.025);
}

.dhow-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--s-10), 6vw, var(--s-16)) clamp(var(--s-6), 5vw, var(--s-12));
    max-width: 56ch;
}

.dhow-hero-text h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 1.4rem + 1.6vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: var(--s-3) 0 var(--s-5);
    font-style: normal;
    color: #000000;
}

.dhow-hero-text h2 em {
    font-style: italic;
    color: var(--coral);
}

.dhow-hero-text p {
    margin: 0 0 var(--s-4);
    color: var(--ink-soft);
    line-height: 1.7;
    font-size: var(16px);
}

.dhow-hero-line {
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 1.2rem + .6vw, 2.2rem);
    color: var(--palm);
    margin-top: var(--s-3) !important;
    line-height: 1;
}

.dhow-hero-cta {
    align-self: flex-start;
    margin-top: var(--s-5);
}

@media (max-width: 900px) {
    .dhow-hero {
        grid-template-columns: 1fr;
    }

    .dhow-hero-img {
        min-height: 0;
        aspect-ratio: 4/5;
        width: 100%;
    }

    .dhow-hero-img img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-position: 50% 30%;
    }

    .dhow-hero-text {
        padding: var(--s-10) clamp(var(--s-5), 5vw, var(--s-8));
    }
}

/* === Round 6 — Wellness reimagined === */
.wellness-intent {
    padding: clamp(var(--s-12), 9vw, var(--s-20)) clamp(var(--s-5), 5vw, var(--s-12));
}

.wellness-lede {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.8rem, 1.2rem + 1.6vw, 3.2rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--ink);
    max-width: 22ch;
    margin: var(--s-6) auto 0;
}

.wellness-lede em {
    font-style: italic;
    color: var(--coral);
}

.wellness-lede-hand {
    margin-top: var(--s-6) !important;
    font-size: clamp(1.6rem, 1.2rem + .6vw, 2.2rem);
    color: var(--palm);
    line-height: 1;
}

.wellness-triptych {
    padding: clamp(var(--s-12), 8vw, var(--s-20)) clamp(var(--s-5), 5vw, var(--s-12));
}

.triptych {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(var(--s-10), 6vw, 96px);
    row-gap: var(--s-12);
    align-items: start;
}

.triptych-pillar {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.triptych-img {
    margin: 0 0 var(--s-6);
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.triptych-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}

.triptych-pillar:hover .triptych-img img {
    transform: scale(1.025);
}

.triptych-num {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--coral);
    margin: 0 0 var(--s-2);
}

.triptych-h {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.8rem, 1.3rem + 1vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s-4);
}

.triptych-h em {
    font-style: italic;
    color: var(--coral);
}

.triptych-pillar p:not(.triptych-num):not(.triptych-hand) {
    font-size: var(--text-base);
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0 0 var(--s-4);
}

.triptych-hand {
    font-family: var(--font-hand);
    font-size: clamp(1.4rem, 1.1rem + .4vw, 1.8rem);
    color: var(--palm);
    margin: var(--s-2) 0 0 !important;
    line-height: 1;
}

@media (max-width: 900px) {
    .triptych {
        grid-template-columns: 1fr;
        gap: var(--s-12);
    }

    .triptych-img {
        aspect-ratio: 16/10;
    }
}

/* === Round 7 — Wellness pool: reduce image dominance === */
.dhow-hero.wellness-pool {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    padding: clamp(var(--s-10), 6vw, var(--s-16)) clamp(var(--s-6), 5vw, var(--s-12));
    gap: clamp(var(--s-8), 5vw, var(--s-14));
    background: var(--paper-soft);
}

.dhow-hero.wellness-pool .dhow-hero-img {
    min-height: clamp(360px, 48vh, 560px);
    aspect-ratio: 4/5;
    border-radius: 2px;
}

.dhow-hero.wellness-pool .dhow-hero-text {
    padding: 0;
}

@media (max-width: 900px) {
    .dhow-hero.wellness-pool {
        grid-template-columns: 1fr;
        gap: var(--s-8);
    }

    .dhow-hero.wellness-pool .dhow-hero-img {
        aspect-ratio: 4/3;
        min-height: 50vh;
    }
}

/* ============================================================
   JOURNAL POSTS — long-form article pages
============================================================ */
.post-meta-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 var(--s-8);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid rgba(31,26,20,.12);
}

.post-meta-strip span {
    display: inline-flex;
    align-items: center;
}

.post-meta-strip .dot {
    width: 4px;
    height: 4px;
    background: var(--coral);
    border-radius: 50%;
    margin: 0 var(--s-2);
}

.post-figure {
    margin: var(--s-10) 0;
}

.post-figure img {
    width: 100%;
    border-radius: 2px;
    display: block;
}

.post-figure figcaption {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    text-align: center;
    margin-top: var(--s-3);
}

.post-signoff {
    margin-top: var(--s-12);
    padding-top: var(--s-8);
    border-top: 1px solid rgba(31,26,20,.12);
    text-align: center;
}

.post-signoff .handwritten {
    font-family: var(--font-hand);
    color: var(--coral);
    font-size: 2.2rem;
    line-height: 1;
    display: block;
    margin-bottom: var(--s-3);
}

.post-signoff p {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-soft);
    font-size: var(--text-base);
    margin: 0;
}

.post-back {
    margin-top: var(--s-10);
    text-align: center;
}

.post-back a {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--coral);
    padding-bottom: 2px;
    transition: color .25s ease;
}

.post-back a:hover {
    color: var(--coral);
}

.related-posts {
    background: var(--paper-soft);
    padding: var(--s-16) 0;
    margin-top: var(--s-16);
}

.related-posts .section-head {
    text-align: center;
    margin-bottom: var(--s-10);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-8);
}

@media (max-width: 800px) {
    .related-grid {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }

    .post-meta-strip {
        font-size: 10px;
        gap: var(--s-2);
    }
}

/* ============================================================
   ROUND 9 — Three-way contact, Instagram strip, Blue Rhino,
   Kilindini Dhow page
   ============================================================ */
/* THREE-WAY CONTACT (used on home + book) */
.contact-three {
    background: var(--paper-soft);
    border-block: 1px solid var(--line-soft);
}

.contact-three .contact-head {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto var(--s-10);
}

.contact-three .contact-head h2 {
    font-size: var(--text-3xl);
    font-weight: 300;
    margin-top: var(--s-3);
    line-height: 1.05;
    font-style: normal;

    /* Round 9: Get in Touch heading should not be italic */
}

/* Round 9: keep the coral colour on the inner phrase, but remove italics. */
.contact-three .contact-head h2 em {
    color: var(--coral);
    font-style: normal;
}

.contact-three .contact-head p {
    margin-top: var(--s-4);
    color: var(--ink-soft);
    font-size: var(--text-base);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}

.contact-card {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    padding: var(--s-8) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    transition: border-color var(--t-mid), transform var(--t-mid);
}

.contact-card:hover {
    border-color: var(--coral);
    transform: translateY(-3px);
}

.contact-card .num {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .35em;
    color: var(--coral-deep);
    margin-bottom: var(--s-2);
}

.contact-card h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-xl);
    color: var(--ink);
    line-height: 1.15;
}

.contact-card .lede {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin-bottom: var(--s-3);
    line-height: 1.5;
}

/* Round 9: enlarge the actual contact details (emails + phone numbers)
   for easier reading on home + book pages. */
.contact-card a {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    font-weight: 400;
    letter-spacing: .005em;
    text-decoration: none;
    border-bottom: 1px solid rgba(31,26,20,.22);
    padding-bottom: 4px;
    transition: color var(--t-mid), border-color var(--t-mid);
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
}

.contact-card a:hover {
    color: var(--coral-deep);
    border-color: var(--coral);
}

.contact-card .contact-lines {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: auto;
    min-width: 0;
}

@media (max-width: 600px) {
    .contact-card a {
        font-size: 1rem;
    }
}

.contact-three .contact-foot {
    text-align: center;
    margin-top: var(--s-10);
}

.contact-three .contact-foot .handwritten {
    font-size: 1.4rem;
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .contact-three .contact-head h2 {
        font-size: var(--text-2xl);
    }
}

/* ─────────────────────────────────────────────────────────
   INSTAGRAM CAROUSEL
   Manual feed, paginated. Edit posts in #ig-posts-data (index.html).
   ───────────────────────────────────────────────────────── */
.insta-carousel {
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    padding-block: var(--s-12) var(--s-10);
    overflow: hidden;
}

.insta-carousel .insta-head {
    text-align: center;
    margin-bottom: var(--s-8);
}

.insta-carousel .insta-head h2 {
    font-size: var(--text-2xl);
    font-weight: 300;
    margin-top: var(--s-3);
}

.insta-carousel .insta-head h2 em {
    color: var(--coral);
    font-style: italic;
}

.insta-carousel .insta-head .handle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--s-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: .1em;
    color: var(--coral-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(199,90,60,.3);
    padding-bottom: 3px;
    transition: color var(--t-mid), border-color var(--t-mid);
}

.insta-carousel .insta-head .handle .ig-glyph {
    width: 16px;
    height: 16px;
}

.insta-carousel .insta-head .handle:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.insta-stage {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: var(--s-3);
}

.insta-viewport {
    overflow: hidden;
    width: 100%;
}

.insta-track {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--s-3);
    transition: transform 700ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.insta-slide {
    flex: 0 0 calc((100% - (var(--s-3) * (var(--ig-per-page,4) - 1))) / var(--ig-per-page,4));
    min-width: 0;
}

.insta-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ink);
    border-radius: 2px;
}

.insta-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95);
    transition: transform 1.2s var(--t-slow), filter var(--t-slow);
}

.insta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31,26,20,0) 40%, rgba(31,26,20,.55) 100%);
    opacity: 0;
    transition: opacity var(--t-mid);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    color: #fff;
    pointer-events: none;
}

.insta-overlay .ig-mark {
    width: 20px;
    height: 20px;
    align-self: flex-end;
    color: rgba(255,255,255,.95);
}

.insta-caption {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: .03em;
    margin: 0;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.insta-tile:hover img {
    transform: scale(1.05);
    filter: saturate(1.05);
}

.insta-tile:hover .insta-overlay,
.insta-tile:focus-visible .insta-overlay {
    opacity: 1;
}

.insta-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-mid), border-color var(--t-mid), color var(--t-mid), opacity var(--t-mid);
}

.insta-arrow svg {
    width: 18px;
    height: 18px;
}

.insta-arrow:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.insta-arrow[disabled] {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.insta-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--s-6);
}

.insta-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(31,26,20,.18);
    cursor: pointer;
    padding: 0;
    transition: background var(--t-mid), transform var(--t-mid);
}

.insta-dot:hover {
    background: rgba(31,26,20,.4);
}

.insta-dot.is-active {
    background: var(--coral-deep);
    transform: scale(1.4);
}

.insta-foot {
    text-align: center;
    margin-top: var(--s-6);
}

.insta-foot .btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 12px 22px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    transition: background var(--t-mid), color var(--t-mid);
}

.insta-foot .btn-pill:hover {
    background: var(--ink);
    color: var(--paper);
}

.insta-foot .btn-pill .arrow {
    transition: transform var(--t-mid);
}

.insta-foot .btn-pill:hover .arrow {
    transform: translateX(3px);
}

@media (max-width: 760px) {
    .insta-stage {
        grid-template-columns: 38px 1fr 38px;
        gap: var(--s-2);
    }

    .insta-arrow {
        width: 38px;
        height: 38px;
    }

    .insta-track {
        gap: var(--s-2);
    }

    .insta-slide {
        flex-basis: calc((100% - (var(--s-2) * (var(--ig-per-page,3) - 1))) / var(--ig-per-page,3));
    }
}

@media (max-width: 520px) {
    .insta-arrow {
        display: none;
    }

    .insta-stage {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   BLUE RHINO SECTION (on stay page) — editorial collage
   ============================================================ */
.br-section {
    position: relative;
    background: var(--paper);
    border-block: 1px solid var(--line-soft);
    padding-block: var(--s-12);
    overflow: hidden;
}

.br-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: 58%;
    background: var(--paper-deep);
    z-index: 0;
}

.br-bg::after {
    /* a faint hand-painted grain at the bottom edge */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--line-soft);
    opacity: .8;
}

.br-shell {
    position: relative;
    z-index: 1;
}

/* Header row — section label + oversized italic title + lede */
.br-head {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-10);
    align-items: end;
    margin-bottom: var(--s-10);
}

.br-head-left .section-label {
    margin-bottom: var(--s-4);
}

.br-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.br-title em {
    font-style: italic;
    color: var(--coral-deep);
    font-weight: 300;
}

.br-head-right {
    padding-bottom: 0.4rem;
}

.br-lede {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 var(--s-3);
    max-width: 56ch;
}

.br-lede a {
    color: var(--ink);
    border-bottom: 1px solid var(--coral);
    padding-bottom: 1px;
    transition: color var(--t-mid), border-color var(--t-mid);
}

.br-lede a:hover {
    color: var(--coral-deep);
    border-color: var(--coral-deep);
}

.br-lede--soft {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-base);
    color: var(--ink-soft);
    letter-spacing: 0.005em;
}

/* Image stage — five-tile asymmetric editorial collage */
.br-stage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: var(--s-3);
    margin-bottom: var(--s-12);
}

.br-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
}

.br-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s var(--t-slow);
}

.br-tile:hover img {
    transform: scale(1.04);
}

.br-tile figcaption {
    position: absolute;
    left: var(--s-3);
    bottom: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: rgba(244, 236, 224, 0.94);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--ink);
    max-width: calc(100% - var(--s-6));
}

.br-tag {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--coral-deep);
    font-size: 0.95rem;
    letter-spacing: 0;
}

/* Asymmetric placement on a 12-col grid:
     col 1-4  rows 1-7  : tall (i)         portrait, hand-carved table
     col 5-7  rows 1-4  : lamp (ii)        portrait, brass crane on books
     col 8-12 rows 1-5  : hero (iii)       landscape, sheepskin butterfly
     col 5-9  rows 5-7  : wide (iv)        landscape, cowhide butterfly
     col 10-12 rows 5-7 : small (v)        portrait, lamp through ferns */
.br-tile--tall {
    grid-column: 1 / span 4;
    grid-row: 1 / span 7;
}

.br-tile--lamp {
    grid-column: 5 / span 3;
    grid-row: 1 / span 4;
}

.br-tile--hero {
    grid-column: 8 / span 5;
    grid-row: 1 / span 5;
}

.br-tile--wide {
    grid-column: 5 / span 5;
    grid-row: 5 / span 3;
}

.br-tile--small {
    grid-column: 10 / span 3;
    grid-row: 6 / span 2;
}

/* Voice panel — the Blue Rhino note */
.br-voice {
    max-width: 64ch;
    margin: 0 auto var(--s-10);
    padding: var(--s-8) var(--s-7);
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
    text-align: center;
    position: relative;
}

.br-voice-mark {
    display: inline-flex;
    color: var(--coral-deep);
    margin-bottom: var(--s-3);
}

.br-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 var(--s-4);
}

.br-voice-body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 auto var(--s-4);
}

.br-voice-line {
    font-family: var(--font-handwritten, var(--font-display));
    font-size: 1.35rem;
    color: var(--coral-deep);
    margin: 0;
}

/* CTA strip */
.br-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-5);
    flex-wrap: wrap;
    text-align: center;
    margin-top: var(--s-10);
}

.br-cta--center {
    justify-content: center;
}

.br-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 0.85rem 1.4rem;
    border: 1px solid var(--ink);
    background: transparent;
    transition: background var(--t-mid), color var(--t-mid);
}

.br-cta-primary:hover {
    background: var(--ink);
    color: var(--paper);
}

.br-cta-primary svg {
    transition: transform var(--t-mid);
}

.br-cta-primary:hover svg {
    transform: translateX(3px);
}

.br-cta-divider {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--line-soft);
}

.br-cta-aside {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    max-width: 42ch;
}

@media (max-width: 960px) {
    .br-head {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }

    .br-stage {
        grid-auto-rows: 70px;
        gap: var(--s-2);
    }
}

@media (max-width: 700px) {
    .br-section {
        padding-block: var(--s-10);
    }

    .br-bg {
        height: 38%;
    }

    .br-stage {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
    }

    .br-tile {
        aspect-ratio: 4 / 5;
    }

    .br-tile--tall {
        grid-column: 1 / span 6;
        aspect-ratio: 3 / 4;
    }

    .br-tile--lamp {
        grid-column: 1 / span 3;
    }

    .br-tile--hero {
        grid-column: 4 / span 3;
    }

    .br-tile--wide {
        grid-column: 1 / span 6;
        aspect-ratio: 16 / 10;
    }

    .br-tile--small {
        grid-column: 1 / span 6;
        aspect-ratio: 16 / 10;
    }

    .br-tile--tall,
    .br-tile--lamp,
    .br-tile--hero,
    .br-tile--wide,
    .br-tile--small {
        grid-row: auto;
    }

    .br-voice {
        padding: var(--s-6) var(--s-4);
    }

    .br-cta {
        flex-direction: column;
        gap: var(--s-3);
    }

    .br-cta-divider {
        display: none;
    }
}

/* KILINDINI DHOW PAGE */
.kil-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--paper);
}

.kil-hero .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.92) brightness(.7);
    z-index: 0;
}

.kil-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31,26,20,.25) 0%, rgba(31,26,20,.15) 40%, rgba(31,26,20,.78) 100%);
    z-index: 1;
}

.kil-hero-inner {
    position: relative;
    z-index: 2;
    padding: var(--s-12) var(--s-8) var(--s-12);
    max-width: 880px;
}

.kil-hero .crumbs {
    color: rgba(244,236,224,.7);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: var(--s-4);
}

.kil-hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.04;
    color: var(--paper);
    margin-bottom: var(--s-4);
}

.kil-hero h1 em {
    color: var(--coral-soft, #f0c4ad);
    font-style: italic;
    font-weight: 300;
}

.kil-hero .hero-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-lg);
    color: rgba(244,236,224,.92);
    max-width: 56ch;
    line-height: 1.45;
}

/* Kilindini experiences (3-card pricing) */
.kil-exp {
    background: var(--paper);
}

.kil-exp .kil-exp-head {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto var(--s-10);
}

.kil-exp-head h2 {
    font-size: var(--text-3xl);
    font-weight: 300;
    margin-top: var(--s-3);
    line-height: 1.05;
}

.kil-exp-head h2 em {
    color: var(--coral);
}

.kil-exp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-10);
}

.kil-card {
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
    padding: 5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: 0;
}

.kil-card:hover {
    border-color: rgba(31,26,20,0.18);
    box-shadow: 0 24px 48px -32px rgba(31,26,20,0.18);
    transform: translateY(-2px);
}

.kil-card .kil-card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--ink);
}

.kil-card .kil-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--t-slow);
}

.kil-card:hover .kil-card-img img {
    transform: scale(1.05);
}

.kil-card-body {
    padding: var(--s-8) var(--s-7) var(--s-7);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--s-3);
}

.kil-card .kicker {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--coral-deep);
    margin: 0 0 var(--s-2);
    display: inline-flex;
    align-items: center;
}

.kil-card .kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--coral-deep);
    margin-right: 0.7em;
    opacity: 0.7;
}

.kil-card h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    margin: 0 0 var(--s-2);
    line-height: 1.12;
    letter-spacing: -0.005em;
    padding-left: 55px;
}

.kil-card h3 em {
    color: var(--coral);
    font-weight: 400;
    margin-right: -1px;
    padding-right: 0px;
    margin-left: 2px;
}

.kil-card p {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 26px 0 var(--s-5);
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 27px;
}

.kil-card .kil-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: auto;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-soft);
    gap: var(--s-3);
}

.kil-card .kil-pax {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.kil-card .kil-price {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}

@media (max-width: 900px) {
    .kil-exp-grid {
        grid-template-columns: 1fr;
        gap: var(--s-8);
    }

    .kil-exp-head h2 {
        font-size: var(--text-2xl);
    }
}

/* Kilindini full-width sail image */
.kil-feature-img {
    margin: 0;
}

.kil-feature-img img {
    width: 100%;
    height: clamp(360px, 60vh, 640px);
    object-fit: cover;
    object-position: center;
    display: block;
}

.kil-feature-img figcaption {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .25em;
    color: var(--ink-soft);
    text-align: center;
    padding: var(--s-3) 0;
    background: var(--paper);
    text-transform: uppercase;
}

/* Kilindini — on-board spec list */
.kil-spec {
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.kil-spec li {
    position: relative;
    padding-left: var(--s-5);
    font-size: var(--text-base);
    color: var(--ink);
    line-height: 1.55;
}

.kil-spec li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 14px;
    height: 1px;
    background: var(--coral-deep);
}

/* Kilindini — crew cards */
.kil-crew-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-12);
    max-width: 980px;
    margin: 0 auto;
}

.kil-crew-card {
    background: transparent;
    border: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.kil-crew-card figure {
    margin: 0 0 var(--s-6);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--paper-deep);
    border: 1px solid var(--line-soft);
}

.kil-crew-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s var(--t-slow);
}

.kil-crew-card:hover figure img {
    transform: scale(1.04);
}

.kil-crew-body {
    padding: 0 var(--s-1);
}

.kil-crew-body .kicker {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--coral-deep);
    margin: 0 0 var(--s-3);
    display: inline-flex;
    align-items: center;
}

.kil-crew-body .kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--coral-deep);
    margin-right: 0.7em;
    opacity: 0.7;
}

.kil-crew-body p:not(.kicker) {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink);
    line-height: 1.7;
    margin: 0;
    max-width: 42ch;
}

@media (max-width: 720px) {
    .kil-crew-grid {
        grid-template-columns: 1fr;
        gap: var(--s-10);
    }

    .kil-crew-card figure {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================
   WELLNESS — Round 8 redesign
   ========================================= */
/* 001 · Opening */
.well-open {
    padding-block: var(--s-12);
}

.well-lede {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.35;
    color: var(--ink);
    margin: var(--s-5) 0 var(--s-6);
    letter-spacing: -0.01em;
}

.well-lede em {
    font-style: italic;
    color: var(--coral-deep);
}

.well-lede-sub {
    font-size: var(--text-base);
    color: var(--ink-soft);
    line-height: 1.7;
    max-width: 56ch;
    margin: 0 auto var(--s-6);
}

.well-lede-sub em {
    font-style: italic;
    color: var(--ink);
}

.well-lede-hand {
    font-size: 1.5rem;
    color: var(--coral-deep);
    margin-top: var(--s-4);
}

/* 002 · Atlas */
.well-atlas {
    padding-block: var(--s-14);
}

.atlas-grid {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(31,26,20,0.12);
}

.atlas-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: start;
    gap: var(--s-5);
    padding: var(--s-7) 0;
    border-bottom: 1px solid rgba(31,26,20,0.12);
    transition: background 0.4s ease;
    margin-top: 9px;
    margin-bottom: 0px;
}

.atlas-row:hover {
    background: rgba(224,160,136,0.05);
}

.atlas-num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(6px);
    color: var(--coral-deep);
    line-height: 1;
    padding-top: 0.25em;
}

.atlas-text h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-xl);
    color: var(--ink);
    margin: 0 0 var(--s-2);
    letter-spacing: -0.01em;
}

.atlas-text p {
    font-size: var(--text-base);
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0;
    max-width: 50ch;
}

.atlas-tag {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--coral-deep);
    padding-top: 0.6em;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .atlas-row {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        gap: var(--s-3) var(--s-4);
        padding: var(--s-5) 0;
    }

    .atlas-num {
        font-size: var(--text-xl);
    }

    .atlas-tag {
        grid-column: 2;
        padding-top: 0;
        font-size: 0.7rem;
    }
}

/* 003 · Zen Den — reuses .dhow-hero structure, additional tone */
.dhow-hero.well-zen {
    background: var(--paper-deep);
}

.dhow-hero.well-zen .dhow-hero-img {
    flex: 0 0 56%;
}

.dhow-hero.well-zen .dhow-hero-text {
    flex: 1;
}

@media (max-width: 880px) {
    .dhow-hero.well-zen .dhow-hero-img {
        flex: 0 0 auto;
    }
}

/* 004 · Anna — uses editorial-two; nothing extra needed */
/* Pull quote — already styled inline */
/* 005 · The Menu / List */
.well-list {
    padding-block: var(--s-14);
}

.well-list-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-8);
    max-width: 1100px;
    margin: 0 auto;
}

.well-list-col h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-xl);
    color: var(--coral);
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid rgba(199,90,60,0.25);
}

.well-list-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.well-list-col li {
    font-size: var(--text-base);
    color: var(--ink);
    line-height: 1.5;
    padding-left: var(--s-4);
    position: relative;
}

.well-list-col li::before {
    content: "·";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--coral-deep);
    font-weight: 700;
}

.well-list-foot {
    text-align: center;
    margin-top: var(--s-12);
    font-size: var(--text-base);
    color: var(--ink-soft);
    max-width: 56ch;
    margin-inline: auto;
}

.well-list-foot em {
    font-style: italic;
    color: var(--ink);
}

@media (max-width: 960px) {
    .well-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-7);
    }
}

@media (max-width: 540px) {
    .well-list-grid {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
}

/* 007 · Hosts — reuses editorial-two; just spacing tone */
.well-hosts {
    padding-block: var(--s-14);
}

/* 008 · CTA — uses inline styles */
/* =========================================
   SUSTAINABILITY — Round 9 expansion
   ========================================= */
/* Numbers — small honest dashboard */
.sus-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    max-width: 1080px;
    margin: 0 auto;
}

.sus-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-7) var(--s-4);
    background: var(--paper);
    border: 1px solid var(--line-soft);
}

.sus-stat-num {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1;
}

.sus-stat-lab {
    margin-top: var(--s-3);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Materials — three-column editorial */
.sus-mats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-10);
    max-width: 1100px;
    margin: 0 auto;
    padding-inline: var(--s-4);
}

.sus-mat {
    padding: var(--s-10) var(--s-8);
    background: var(--paper);
    border: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
}

.sus-mat-num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--coral-deep);
    margin-bottom: var(--s-3);
}

.sus-mat h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 0 var(--s-4);
    color: var(--ink);
}

.sus-mat p {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0;
}

@media (max-width: 900px) {
    .sus-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .sus-mats {
        grid-template-columns: 1fr;
        gap: var(--s-6);
        padding-inline: var(--s-3);
    }

    .sus-mat {
        padding: var(--s-8) var(--s-6);
    }
}

@media (max-width: 480px) {
    .sus-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MUKIMA MANOR — sister property (home, 015)
   Mirrors the Blue Rhino editorial pattern,
   tuned for four photographs.
============================================ */
.muk-section {
    position: relative;
    background: var(--paper);
    border-block: 1px solid var(--line-soft);
    padding-block: var(--s-12);
    overflow: hidden;
}

.muk-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: 58%;
    background: var(--paper-deep);
    z-index: 0;
}

.muk-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--line-soft);
    opacity: .8;
}

.muk-shell {
    position: relative;
    z-index: 1;
}

/* Header */
.muk-head {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-10);
    align-items: end;
    margin-bottom: var(--s-10);
}

.muk-head-left .section-label {
    margin-bottom: var(--s-4);
}

.muk-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.muk-title em {
    font-style: italic;
    color: var(--coral-deep);
    font-weight: 300;
}

.muk-head-right {
    padding-bottom: 0.4rem;
}

.muk-lede {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 var(--s-3);
    max-width: 56ch;
}

.muk-lede a {
    color: var(--ink);
    border-bottom: 1px solid var(--coral);
    padding-bottom: 1px;
    transition: color var(--t-mid), border-color var(--t-mid);
}

.muk-lede a:hover {
    color: var(--coral-deep);
    border-color: var(--coral-deep);
}

.muk-lede--soft {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-base);
    color: var(--ink-soft);
    letter-spacing: 0.005em;
}

/* Image stage — 4-tile asymmetric editorial collage on a 12-col grid:
     col 1-7  rows 1-7 : house     (tall hero, manor exterior)
     col 8-12 rows 1-3 : mountain  (wide, Mt Kenya across the lake)
     col 8-12 rows 4-5 : dining    (mid, arched window dining)
     col 8-12 rows 6-7 : aerial    (mid, drone pool view) */
.muk-stage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: var(--s-3);
    margin-bottom: var(--s-10);
}

.muk-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
}

.muk-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s var(--t-slow);
}

.muk-tile:hover img {
    transform: scale(1.04);
}

.muk-tile--house {
    grid-column: 1 / span 7;
    grid-row: 1 / span 7;
}

.muk-tile--mountain {
    grid-column: 8 / span 5;
    grid-row: 1 / span 3;
}

.muk-tile--dining {
    grid-column: 8 / span 5;
    grid-row: 4 / span 2;
}

.muk-tile--aerial {
    grid-column: 8 / span 5;
    grid-row: 6 / span 2;
}

/* CTA */
.muk-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-5);
    flex-wrap: wrap;
    text-align: center;
    margin-top: var(--s-10);
}

.muk-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 0.85rem 1.4rem;
    border: 1px solid var(--ink);
    background: transparent;
    transition: background var(--t-mid), color var(--t-mid);
}

.muk-cta-primary:hover {
    background: var(--ink);
    color: var(--paper);
}

.muk-cta-primary svg {
    transition: transform var(--t-mid);
}

.muk-cta-primary:hover svg {
    transform: translateX(3px);
}

@media (max-width: 960px) {
    .muk-head {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }

    .muk-stage {
        grid-auto-rows: 70px;
        gap: var(--s-2);
    }
}

@media (max-width: 700px) {
    .muk-section {
        padding-block: var(--s-10);
    }

    .muk-bg {
        height: 38%;
    }

    .muk-stage {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
        gap: var(--s-3);
    }

    .muk-tile {
        aspect-ratio: 4 / 5;
    }

    .muk-tile--house {
        grid-column: 1 / span 6;
        aspect-ratio: 4 / 5;
    }

    .muk-tile--mountain {
        grid-column: 1 / span 6;
        aspect-ratio: 16 / 10;
    }

    .muk-tile--dining {
        grid-column: 1 / span 3;
        aspect-ratio: 4 / 5;
    }

    .muk-tile--aerial {
        grid-column: 4 / span 3;
        aspect-ratio: 4 / 5;
    }

    .muk-tile--house,
    .muk-tile--mountain,
    .muk-tile--dining,
    .muk-tile--aerial {
        grid-row: auto;
    }
}

/* ============================================================
   PRESS STRIP — As featured in
   Quiet editorial band of publication wordmarks, between hero
   and 001 · The Origin. Marquee on desktop, grid on mobile.
   ============================================================ */
.press-strip {
    background: var(--paper);
    padding: clamp(var(--s-10), 8vw, var(--s-14)) 0 clamp(var(--s-8), 6vw, var(--s-12));
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    position: relative;
}

.press-strip-label {
    justify-content: center;
    display: flex;
    margin: 0 auto clamp(var(--s-7), 5vw, var(--s-10));
}

.press-strip-label::before,
.press-strip-label::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .4;
}

.press-strip-label::after {
    margin-left: var(--s-3);
}

/* Desktop: continuous marquee */
.press-marquee {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.press-track {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(var(--s-8), 6vw, var(--s-12));
    padding: 0;
    margin: 0;
    width: max-content;
    animation: press-marquee 70s linear infinite;
}

@keyframes press-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-100% / 2), 0, 0);
    }
}

.press-strip:hover .press-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .press-track {
        animation: none;
    }
}

.press-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(48px, 5vw, 64px);
    min-width: clamp(140px, 14vw, 200px);
    color: var(--ink);
    opacity: .72;
    transition: opacity .3s ease;
    white-space: nowrap;
}

.press-item:hover {
    opacity: 1;
}

.press-item > span {
    line-height: 1;
    display: inline-block;
    text-rendering: geometricPrecision;
}

/* Per-publication wordmark styling.
   All shaped to roughly equal x-height (~22-26px) and tonal weight.
   Mix of serif/sans gives editorial credibility, not corporate uniformity.
   When real logo files are available, swap the <span> for an <img>. */
/* Bodoni high-contrast serif — for the Vogue/CN-style mastheads */
.press-item--conde > span,
.press-item--country > span,
.press-item--dossier > span {
    font-family: 'Bodoni Moda', 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-optical-sizing: auto;
    font-variation-settings: 'opsz' 72;
}

.press-item--conde > span {
    font-size: clamp(15px, 1.4vw, 18px);
    letter-spacing: .015em;
}

.press-item--country > span {
    font-size: clamp(18px, 1.65vw, 22px);
    font-variant: small-caps;
    letter-spacing: .04em;
}

.press-item--dossier > span {
    font-size: clamp(22px, 2.1vw, 28px);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 400;
}

/* Daily Mail / Mail on Sunday — classic English newspaper serif, italic stress */
.press-item--mos > span,
.press-item--dailymail > span {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-variation-settings: 'opsz' 144;
    font-size: clamp(18px, 1.65vw, 22px);
    letter-spacing: -.005em;
}

/* The Independent — bold italic, news-stand presence */
.press-item--indy > span {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(18px, 1.7vw, 22px);
    letter-spacing: -.01em;
    font-variation-settings: 'opsz' 144;
}

/* The Scotsman — formal, small caps */
.press-item--scotsman > span {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: clamp(18px, 1.7vw, 22px);
    letter-spacing: .08em;
}

/* Secret Trips — soft italic, travel-magazine */
.press-item--secret > span {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(19px, 1.75vw, 24px);
    letter-spacing: .005em;
    font-variation-settings: 'opsz' 144;
}

/* Cabana — interiors magazine, decorative small-caps with wide tracking */
.press-item--cabana > span {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: clamp(19px, 1.8vw, 24px);
    letter-spacing: .22em;
    text-transform: lowercase;
}

/* Rough Guides — bold italic, slightly travel-bookish */
.press-item--rough > span {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(18px, 1.7vw, 22px);
    letter-spacing: 0;
    font-variation-settings: 'opsz' 144;
}

/* Modern sans wordmarks — Yolo, Konfekt, Cultural Union use mono/sans */
.press-item--yolo > span,
.press-item--konfekt > span,
.press-item--cu > span {
    font-family: 'Anonymous Pro', ui-monospace, 'SF Mono', Menlo, monospace;
    font-weight: 700;
    text-transform: uppercase;
}

.press-item--yolo > span {
    font-size: clamp(20px, 1.9vw, 26px);
    letter-spacing: .22em;
}

.press-item--konfekt > span {
    font-size: clamp(17px, 1.55vw, 21px);
    letter-spacing: .26em;
    font-weight: 400;
}

.press-item--cu > span {
    font-size: clamp(13px, 1.2vw, 16px);
    letter-spacing: .32em;
    font-weight: 400;
}

/* Mobile: keep the marquee scrolling — just tighten timing and sizing */
@media (max-width: 720px) {
    .press-track {
        gap: clamp(var(--s-6), 7vw, var(--s-8));
        animation-duration: 50s;
    }

    .press-item {
        height: 44px;
        min-width: clamp(120px, 38vw, 160px);
    }

    .press-item > span {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

}

@media (max-width: 420px) {
    .press-track {
        gap: clamp(var(--s-5), 6vw, var(--s-7));
        animation-duration: 45s;
    }

    .press-item {
        height: 40px;
        min-width: clamp(110px, 36vw, 150px);
    }

    .press-item > span {
        font-size: 13px;
    }
}

/* ============================================================
   003 · BLUE RHINO WHISPER  (home page — subtle credit)
   A small, italic editorial line acknowledging Blue Rhino Africa
   as the source of collected pieces. Designed to feel like a
   private note in a magazine rather than a callout or ad.
   ============================================================ */
.br-whisper {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 350;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 52ch;
    margin-top: calc(var(--s-4, 1rem) * -0.35);
    padding-left: 0.95rem;
    border-left: 1px solid rgba(199, 90, 60, 0.28);
    letter-spacing: 0.005em;
}

.br-whisper a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 400;
    background-image: linear-gradient(transparent calc(100% - 1px), var(--coral-deep) 1px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 0.05em;
    transition: color 0.35s ease, background-size 0.35s ease;
}

.br-whisper a:hover,
.br-whisper a:focus-visible {
    color: var(--coral-deep);
    background-size: 100% calc(100% - 1px);
}

@media (max-width: 720px) {
    .br-whisper {
        padding-left: 0.75rem;
        font-size: 0.92rem;
    }
}

/* ============================================================
   COORDINATE LINKS  (subtle anchor wrapping for hero + footer coords)
   ============================================================ */
a.hero-coord {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.35s ease, opacity 0.35s ease;
}
a.hero-coord:hover,
a.hero-coord:focus-visible {
    color: rgba(244,236,224,1);
    opacity: 1;
}

.footer-coord-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 1px;
    transition: border-color 0.35s ease, color 0.35s ease;
}
.footer-coord-link:hover,
.footer-coord-link:focus-visible {
    border-bottom-color: rgba(255,255,255,0.55);
    color: inherit;
}


/* ============================================================
   Round 21 — perf & a11y overrides (appended, do not edit above)
============================================================ */

/* LCP fix — hero karibu paints synchronously, no JS gate */
.hero-karibu, .hero-karibu * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
.hero-karibu-em { opacity: .85; }

/* A11y — 44x44 minimum tap targets on mobile for inline nav/footer links */
@media (max-width: 720px) {
    .nav a,
    .footer-links a,
    .site-footer a,
    .foot-meta a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 .25em;
    }
    .insta-arrow,
    .ig-prev,
    .ig-next {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================
   Round 21b — Mobile image framing tightening
   - Make portrait crops less dominant on small screens
   - Bulletproof press marquee animation
============================================================ */

@media (max-width: 720px) {
    /* Editorial-two: 4/5 portrait → 5/4 gentle landscape
       Default object-position is 'center top' so heads stay intact.
       Per-section overrides below tune the framing for specific photos. */
    .editorial-two .ed-img img {
        aspect-ratio: 5/4 !important;
        max-height: 45vh !important;
        object-position: 50% 25%;
    }

    /* Home page section 002 (door / makuti shot) — user wants slightly taller */
    .island-home .editorial-two .ed-img img {
        aspect-ratio: 4/4 !important;       /* square → ~327px on mobile (up from 262px) */
        max-height: 55vh !important;
        object-position: 50% 30%;
    }

    /* Wellness — YANNA section (well-yanna): tall vinyasa pose, need to keep feet
       Image is 1600×2000 portrait, full-body yoga pose */
    .well-yanna .editorial-two .ed-img img {
        aspect-ratio: 4/5 !important;       /* portrait — show the whole figure */
        max-height: 60vh !important;
        object-position: 50% 50%;
    }

    /* Wellness — ANNA section (well-anna): head-and-shoulders portrait
       Image is 1080×1619, head near top */
    .well-anna .editorial-two .ed-img img {
        aspect-ratio: 4/5 !important;
        max-height: 60vh !important;
        object-position: 50% 15%;
    }

    /* Dhow-hero default (activities 002 — Kilindini dhow) — gentler landscape */
    .dhow-hero-img {
        aspect-ratio: 16/10 !important;
        max-height: 38vh !important;
    }
    .dhow-hero-img img {
        object-position: 50% 50%;
    }

    /* Wellness Zen Den pool block (well-zen) — a touch taller than activities */
    .dhow-hero.well-zen .dhow-hero-img,
    .dhow-hero.wellness-pool .dhow-hero-img {
        aspect-ratio: 5/4 !important;
        max-height: 45vh !important;
    }
    .dhow-hero.well-zen .dhow-hero-img img,
    .dhow-hero.wellness-pool .dhow-hero-img img {
        object-position: 50% 35%;
    }

    /* Retreat-hosts portrait (foundation page) */
    .retreat-hosts .ed-img img {
        aspect-ratio: 5/4 !important;
        max-height: 50vh !important;
        object-position: 50% 20%;
    }

    /* Page-hero (top of every page) — keep capped */
    .page-hero {
        max-height: 88vh;
    }
    .page-hero img,
    .page-hero picture {
        max-height: 88vh;
        object-fit: cover;
    }
}