/* ==========================================================================
   Some Tuesday — shared styles
   Tokens mirror the live Shopify theme: white ground, near-black ink,
   Jost for body copy, Poppins for headings, KnightBrushDemo for the wordmark.
   ========================================================================== */

:root {
    --bg: #ffffff;
    --ink: #1c1d1d;
    --ink-dim: rgba(28, 29, 29, 0.62);
    --border: #e8e8e1;
    --dim: #f6f6f6;
    --dark: #111111;
    --on-dark: #ffffff;

    --shell: 1240px;
    --shell-narrow: 760px;

    --body-font: 'Jost', system-ui, -apple-system, sans-serif;
    --head-font: 'Poppins', system-ui, sans-serif;
    --script-font: 'KnightBrushDemo', Georgia, serif;
}

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

@font-face {
    font-family: 'KnightBrushDemo';
    src: url('../fonts/Knight%20Brush%20Demo.woff2') format('woff2'),
         url('../fonts/Knight%20Brush%20Demo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Jost and Poppins are self-hosted so the text doesn't wait on a third-party
   stylesheet. Same families, weights, and unicode ranges as the previous
   Google Fonts request. Jost's file is a variable font covering 300–500. */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/jost-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/jost-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--body-font);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.025em;
    background: var(--bg);
    color: var(--ink);
}

h1, h2, h3, h4 {
    font-family: var(--head-font);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

p + p, .prose > * + * { margin-top: 1.1em; }

a { color: inherit; }

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

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell.narrow, .narrow { max-width: var(--shell-narrow); margin-left: auto; margin-right: auto; }
.center { text-align: center; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    background: #fff; color: var(--ink); padding: 12px 20px; font-weight: 500;
}
.skip-link:focus { left: 0; }

/* --- Header ------------------------------------------------------------- */

.site-header {
    position: sticky; top: 0; z-index: 200;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
}

.wordmark {
    font-family: var(--script-font);
    font-size: 2.3rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-header nav ul {
    list-style: none;
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    gap: 2px 4px;
}

.site-header nav a {
    display: block;
    text-decoration: none;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 8px 10px;
    color: var(--ink);
    border-bottom: 2px solid transparent;
}

.site-header nav a:hover { border-bottom-color: var(--ink); }
.site-header nav a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 500; }

.site-header nav .nav-sub { position: relative; }
.site-header nav .nav-sub > ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 220px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    padding: 6px 0;
    z-index: 300;
    list-style: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.site-header nav .nav-sub:hover > ul,
.site-header nav .nav-sub:focus-within > ul { display: block; }
.site-header nav .nav-sub > ul a {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-bottom: 0;
}
.site-header nav .nav-sub > ul a:hover { background: var(--dim); }

.guide-card {
    display: block;
    border: 1px solid var(--border);
    padding: 18px 20px;
    margin: 14px 0;
    text-decoration: none;
    color: inherit;
    background: #fff;
}
.guide-card strong { display: block; font-family: var(--head-font); font-weight: 500; font-size: 1.25rem; margin-bottom: 4px; }
.guide-card span { color: var(--ink-dim); }
.step { margin: 1.6em 0; padding-top: 0.4em; border-top: 1px solid var(--border); }
.step h2 { margin-top: 0.6em; }
.step dt { font-weight: 500; margin-top: 0.7em; }
.step dd { color: var(--ink); }
.cta-box {
    background: var(--dim);
    border: 1px solid var(--border);
    padding: 18px 20px;
    margin: 1.8em 0;
}
.fine-print { font-size: 0.92rem; color: var(--ink-dim); }

.nav-toggle {
    display: none;
    background: none; border: 0; cursor: pointer;
    font-size: 1.4rem; color: var(--ink); padding: 8px;
}

/* --- Hero -------------------------------------------------------------- */

/* The boat is a portrait subject in a landscape frame: the mast makes it
   taller than it is wide in the source photograph, so any frame wide enough
   to read as a hero has to carry open water at the sides.
   `background-size: cover` bought that width by cropping the top and bottom instead, which is what kept taking the
   masthead and the waterline out of shot at some viewport or other.

   So the photograph is not a background any more. It is an <img> laid out in
   normal flow with `object-fit: contain` — a combination that cannot crop at
   any container size, rather than one that merely happens not to at the sizes
   that were measured. The section is exactly as tall as the photograph, and
   the type is overlaid by sharing a single grid cell with it. */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    background: var(--dark);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

/* Photograph, scrim and type all occupy the one cell, stacked by z-index. */
.hero-media,
.hero::after,
.hero-inner { grid-area: 1 / 1; }

.hero-media { z-index: 0; display: block; }

.hero-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 86vh;
    object-fit: contain;
    aspect-ratio: 2400 / 1154;
}

/* Tablet and phone used to switch to shorter frames (3:2, then a square).
   Those frames are for the cruising-guide hero. The homepage sets its own
   frame further down, from the Apataki drone still. */
@media (max-width: 1024px) {
    .hero-media img { aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
    .hero-media img { aspect-ratio: 1 / 1; }
}

/* Scrim, weighted to the top where the type sits and left almost clear across
   the middle so the lagoon keeps its colour — a flat wash over the whole frame
   greys the photograph out. Tinted rather than neutral black, and closing dark
   at the foot so the frame hands off to the band below.

   The top stop is heavier than the old photograph needed: this water measures
   a mean luminance of 93/255 behind the type, which leaves white at only
   2.6:1 unscrimmed. At 0.62 it clears 4.5:1. */
.hero::after {
    content: '';
    z-index: 1;
    background: linear-gradient(to bottom,
        rgba(3, 27, 33, 0.62) 0%,
        rgba(3, 27, 33, 0.34) 22%,
        rgba(3, 27, 33, 0.07) 46%,
        rgba(3, 27, 33, 0.12) 70%,
        rgba(3, 27, 33, 0.46) 100%);
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.34em;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.9);
}

/* The lagoon throws specular highlights the scrim does not fully cover, so the
   two smaller lines carry a shadow of their own. */
.hero .hero-eyebrow,
.hero .hero-sub { text-shadow: 0 1px 12px rgba(0, 20, 26, 0.55); }

.hero-title {
    font-family: var(--script-font);
    font-weight: 400;
    font-size: clamp(3.4rem, 13vw, 7.5rem);
    line-height: 1;
    margin: 10px 0 4px;
    text-shadow: 0 3px 26px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}

.hero-sub {
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    letter-spacing: 0.06em;
}

.hero-inner {
    z-index: 2;
    align-self: start;
    justify-self: center;
    max-width: 900px;
    padding: clamp(44px, 9vh, 104px) 24px clamp(40px, 7vh, 76px);
}

.hero .btn { margin-top: 28px; }

/* Membership links. On a wide screen the lower-left of the photograph is open
   water, clear of the boat, the status pill at the top, and the headline
   under the hero. At 1024 and below the art-directed crop pulls the hull
   into that corner, so the same links become a strip under the photograph. */
.hero-clubs {
    grid-area: 1 / 1;
    z-index: 3;
    align-self: end;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 16px;
    max-width: calc(100% - 32px);
}
.hero-club {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 5px 14px 5px 6px;
    max-width: 100%;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(3, 27, 33, 0.16);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 14px rgba(0, 20, 26, 0.22);
}
.hero-club img {
    width: 36px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
}
.hero-club img.hero-wordmark {
    width: auto;
    max-width: 96px;
    object-fit: contain;
}
.hero-club:hover { background: #fff; }

@media (max-width: 1024px) {
    .hero-clubs {
        grid-area: 2 / 1;
        align-self: stretch;
        justify-self: stretch;
        justify-content: center;
        margin: 0;
        max-width: none;
        gap: 0;
        background: #fff;
    }
    .hero-club {
        justify-content: center;
        border-radius: 0;
        border: 0;
        padding: 10px 16px;
        box-shadow: none;
        background: #fff;
    }
}

/* One quiet reveal on arrival. Anything busier competes with the photograph. */
.hero .hero-inner > * {
    animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero .hero-inner > :nth-child(1) { animation-delay: 0.06s; }
.hero .hero-inner > :nth-child(2) { animation-delay: 0.18s; }
.hero .hero-inner > :nth-child(3) { animation-delay: 0.32s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* --- Page heads -------------------------------------------------------- */

.page-head {
    border-bottom: 1px solid var(--border);
    padding: 54px 24px 34px;
    text-align: center;
}

/* One line under a page intro. The sentence stays quiet. The links are
   small chips in the mint accent: heavier than the sentence, lighter than
   the buttons under them. Leading stays tight so those buttons remain on
   the first phone screen. */
.page-head .site-invite {
    margin: 10px auto 0;
    font-size: 0.86rem;
    line-height: 1.85;
    color: var(--ink-dim);
}
.page-head .site-invite a {
    display: inline-block;
    margin: 0 0.12em;
    padding: 1px 9px 2px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: #5ee0b0;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    background: rgba(94, 224, 176, 0.28);
    border-radius: 999px;
    line-height: 1.35;
}
.page-head .site-invite a:hover {
    background: rgba(94, 224, 176, 0.48);
}
.page-head .site-invite + .fp-actions { margin-top: 16px; }

/* Guide wayfinding. Same block on every destination page. */
.guide-nav {
    max-width: 820px;
    margin: 16px auto 0;
    text-align: left;
}
.page-head .guide-nav + h1 { margin-top: 22px; }

/* English | Español, at the top of pages that have a counterpart. */
.page-head:has(.lang-switch) { padding-top: 22px; }
.lang-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55em;
    margin: 0 auto 16px;
    font-family: var(--head-font);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.lang-switch a {
    color: var(--ink);
    text-decoration: none;
    padding: 2px 2px;
}
.lang-switch a[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.lang-switch a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.lang-sep { color: var(--ink-dim); }
.guide-crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2em;
    list-style: none;
    margin: 0 0 14px;
    font-size: 0.92rem;
    color: var(--ink-dim);
}
.guide-crumbs li { display: inline; }
.guide-crumbs li + li::before {
    content: "›";
    margin: 0 0.45em;
}
.guide-crumbs a { color: inherit; text-underline-offset: 3px; }
.guide-crumbs [aria-current="page"] { color: var(--ink); }
.guide-countries { margin: 0 0 12px; text-align: center; }
.guide-countries > summary,
.guide-siblings > label {
    display: inline-block;
    cursor: pointer;
    font-family: var(--head-font);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    padding: 7px 12px;
    list-style: none;
}
.guide-countries > summary::-webkit-details-marker { display: none; }
.guide-countries > summary::after,
.guide-siblings > label::after { content: " +"; }
.guide-countries[open] > summary::after { content: " –"; }
.guide-fold {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
.guide-fold:focus-visible + label {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}
@media (min-width: 721px) {
    .guide-siblings.is-long > .guide-fold { display: none; }
}
.guide-countries ul,
.guide-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
}
.guide-strip { padding-top: 0; }
.guide-countries a,
.guide-strip a,
.guide-strip [aria-current="page"] {
    display: inline-block;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
    padding: 6px 11px;
    border: 1px solid var(--border);
    color: var(--ink);
}
.guide-countries a:hover,
.guide-strip a:hover { border-color: var(--ink); }
.guide-countries a[aria-current="page"],
.guide-countries a[aria-current="true"],
.guide-strip [aria-current="page"] {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.guide-siblings { margin: 0 0 14px; text-align: center; position: relative; }
.guide-siblings > label { display: none; }
.guide-step {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}
.guide-step a {
    flex: 1 1 0;
    max-width: 48%;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--border);
    padding: 10px 12px;
}
.guide-step a:hover { border-color: var(--ink); }
.guide-step .guide-next { margin-left: auto; text-align: right; }
.guide-step span {
    display: block;
    margin-bottom: 2px;
    font-family: var(--head-font);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
@media (max-width: 720px) {
    .guide-siblings.is-long > label { display: inline-block; margin-bottom: 10px; }
    .guide-siblings.is-long > .guide-strip { display: none; }
    .guide-siblings.is-long > .guide-fold:checked ~ .guide-strip { display: flex; }
    .guide-siblings.is-long > .guide-fold:checked + label::after { content: " –"; }
    .guide-step { flex-direction: column; }
    .guide-step a,
    .guide-step .guide-next { max-width: none; text-align: left; }
}
@media print {
    .guide-countries { display: none; }
}

/* --- Prose ------------------------------------------------------------- */

.prose { padding-top: 44px; padding-bottom: 64px; max-width: 820px; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose .lead { font-size: 1.15rem; color: var(--ink-dim); }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }

.inline-img { margin: 34px 0; }
.inline-img img { width: 100%; height: auto; border-radius: 2px; }
.inline-img picture { aspect-ratio: var(--ar, auto); }
.inline-img picture img { aspect-ratio: inherit; width: 100%; height: auto; }
.inline-img figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--ink-dim);
    text-align: center;
}
/* A planning chart stays readable past the 820px prose measure. */
.prose .chart-figure {
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    margin: 34px 0 34px calc(50% - min(560px, 50vw - 16px));
}
.prose .chart-figure img { height: auto; }

/* Visible stand-in for a photo the owners have not supplied yet. */
.img-placeholder-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 3 / 2;
    border: 2px dashed var(--border);
    border-radius: 2px;
    background: var(--dim);
    color: var(--ink-dim);
    text-align: center;
    padding: 20px;
}
.img-placeholder-icon { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; }
.img-placeholder-text {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --- Feature rows ------------------------------------------------------ */

.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    padding: clamp(46px, 7vw, 86px) 0;
    border-bottom: 1px solid var(--border);
}

.feature:last-child { border-bottom: 0; }
.feature.reverse .feature-media { order: 2; }
.feature.reverse .feature-body { order: 1; }

.feature-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Wide art — a map, say — that must not be cropped to 4:3. */
.feature-media.media-wide img { aspect-ratio: 16 / 9; }

/* The homepage pugs photo is portrait; keep Meghan's head and both pugs in
   the 4:3 crop. */
.feature-media.media-pugs img { object-position: 50% 30%; }

.feature-body h2 { margin-bottom: 0.5em; }
.feature-body .btn { margin-top: 26px; }

/* --- Bands ------------------------------------------------------------- */

.band { padding: clamp(52px, 8vw, 92px) 0; background: var(--dim); }
.band.dark { background: var(--dark); color: var(--on-dark); }
.band.dark a { color: var(--on-dark); }

/* A band carrying only a heading and one row of controls; the full measure of
   padding leaves it stranded in empty space. */
.band.tight { padding: clamp(38px, 5.5vw, 60px) 0; }

.section-title { text-align: center; margin-bottom: 44px; }

/* One or two sentences between a section title and its content. */
.section-intro {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--ink-dim);
}
.section-intro a { color: var(--ink); font-weight: 500; }

/* Channel pitch above the homepage social tiles; the inline channel names
   are links too, so they carry an underline to read as such on the dark band. */
.follow-lead { max-width: 640px; margin: 14px auto 0; }
.follow-lead a { font-weight: 500; text-underline-offset: 3px; }

/* Sets a run of feature rows apart from the section that follows it, matching
   the hairline the rows themselves are divided by. */
.section-block {
    border-top: 1px solid var(--border);
    padding-top: clamp(46px, 7vw, 82px);
}

/* --- Buttons ----------------------------------------------------------- */

.btn {
    display: inline-block;
    background: var(--dark);
    color: #fff;
    text-decoration: none;
    font-family: var(--body-font);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 15px 32px;
    border: 1px solid var(--dark);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.btn:hover { background: #fff; color: var(--dark); }

.btn.is-disabled,
.btn[aria-disabled="true"] {
    background: #eceae6;
    color: #6b6862;
    border-color: #d5d1cb;
    cursor: not-allowed;
    pointer-events: none;
}
.btn.is-disabled:hover,
.btn[aria-disabled="true"]:hover { background: #eceae6; color: #6b6862; }

.btn-light { background: #fff; color: var(--dark); border-color: #fff; }
.btn-light:hover { background: transparent; color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* Outlined button for use over photography. */
.btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.btn-outline:hover { background: #fff; color: var(--dark); border-color: #fff; }

/* --- Social ------------------------------------------------------------ */

.social { display: flex; flex-wrap: wrap; gap: 14px; }
.social a {
    display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none; font-size: 1.05rem;
}
.social a:hover { text-decoration: underline; }
.social-lg { justify-content: center; margin-top: 30px; font-size: 1.1rem; }
.social-lg i { font-size: 1.3rem; }

/* One row, always. A fixed track count keeps the six channels evenly spaced
   and stops the last one being orphaned onto a second line, which is what made
   this block so tall. Outlined rather than filled discs so the row reads as a
   quiet index instead of a wall of buttons. */
.social-tiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    max-width: 664px;
    margin: 30px auto 0;
}
.social-tiles a {
    flex-direction: column;
    gap: 9px;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
}
.social-tiles a:hover { text-decoration: none; }
.social-tiles span { white-space: nowrap; }
.social-tiles i {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    border-radius: 50%;
    border: 1px solid rgba(28, 29, 29, 0.22);
    transition: background-color 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.3s ease;
}
.social-tiles a:hover i {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    transform: translateY(-4px);
}

/* Same row inverted for a dark band. */
.band.dark .social-tiles i { border-color: rgba(255, 255, 255, 0.32); }
.band.dark .social-tiles a:hover i {
    background: #fff;
    border-color: #fff;
    color: var(--dark);
}

/* --- Grids: photos, posts ---------------------------------------------- */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    padding: 44px 0 64px;
}

.tile { display: block; overflow: hidden; background: var(--dim); }
.tile img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    transition: transform 0.4s ease;
}
.tile:hover img { transform: scale(1.04); }

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 34px;
    padding: 10px 0 0;
}

.post { text-decoration: none; display: block; }
.post img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    object-position: center top;
    background: var(--dim); margin-bottom: 16px;
}
.post h3 { font-size: 1.05rem; font-weight: 400; }
.post img { transition: opacity 0.4s ease; }
.post:hover img { opacity: 0.86; }
.post:hover h3 { text-decoration: underline; }
.post-date { color: var(--ink-dim); font-size: 0.86rem; margin-top: 4px; }
.page-head .post-date { margin-top: 10px; }

.post-grid { padding-bottom: 34px; }

/* --- Forms ------------------------------------------------------------- */

.form { margin: 34px 0 56px; max-width: 640px; }
.field { margin-bottom: 22px; }
.field label {
    display: block;
    font-family: var(--head-font);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: #fff;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 2px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    border-color: var(--ink);
}
.field textarea { resize: vertical; }
.form .btn { cursor: pointer; }

/* --- Route page -------------------------------------------------------- */

.stops { list-style: none; padding-left: 0; counter-reset: stop; }
.stops li {
    border-left: 2px solid var(--border);
    padding: 4px 0 22px 26px;
    position: relative;
}
.stops li::before {
    content: ''; position: absolute; left: -6px; top: 12px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ink);
}
.stops h3 { font-size: 1.1rem; }
.stops p { margin-top: 0.3em; }

/* Legs already sailed are solid; the current leg is ringed; planned legs
   are open circles. */
.stops li:not(.is-done):not(.is-current)::before {
    box-sizing: border-box;
    background: #fff;
    border: 2px solid var(--ink);
}
.stops li.is-current::before {
    left: -8px; top: 10px;
    width: 14px; height: 14px;
    box-shadow: 0 0 0 4px rgba(28, 29, 29, 0.14);
}
.here-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 3px 9px;
    background: var(--dark);
    color: var(--on-dark);
    font-family: var(--body-font);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --- Float plan page --------------------------------------------------- */

.fp-eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    margin-bottom: 10px;
}

.fp h4 { font-size: 1.02rem; margin-top: 1.4em; }
.fp h2[id], .fp h3, .fp h4, .prose h2[id], .prose h3[id] { scroll-margin-top: 90px; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.signup .fp-actions,
.guide-note .fp-actions,
.gift-ask .fp-actions,
.cta-box .fp-actions,
.page-head .fp-actions,
.tool-main .fp-actions { justify-content: center; }
.fp-actions .btn i { margin-right: 6px; }

.fp-toc {
    background: var(--dim);
    border: 1px solid var(--border);
    padding: 22px 26px;
    margin-top: 34px;
}
.fp-toc h2 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 12px;
}
.prose .fp-toc ul { list-style: none; padding: 0; columns: 2 220px; column-gap: 28px; }
.prose .fp-toc li { margin: 0 0 0.35em; break-inside: avoid; }
.fp-toc a { text-decoration: none; font-size: 0.95rem; }
.fp-toc a:hover { text-decoration: underline; }

/* Wide tables scroll sideways on phones instead of squeezing the columns. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1em; }
.fp-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.5;
}
.fp-table th, .fp-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.fp-table thead th {
    background: var(--dark);
    color: var(--on-dark);
    font-family: var(--head-font);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}
.fp-table tbody th { font-weight: 500; width: 30%; }
.fp-table tbody tr:nth-child(even) { background: var(--dim); }
.fp-table .nowrap { white-space: nowrap; }
.fp-table tr.is-done td:last-child { color: var(--ink-dim); }
.fp-table tbody tr.is-current { background: #eef4f6; }
.fp-table tr.is-current td:last-child { font-weight: 500; }

.fp-signoff { color: var(--ink-dim); }

/* --- Video ------------------------------------------------------------- */

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 32px 0;
    background: #000;
}
.video.video-short {
    aspect-ratio: 9 / 16;
    width: min(100%, 280px);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 32px;
    align-items: flex-start;
    margin: 32px 0;
}
.video-pair > figure {
    flex: 0 0 auto;
    width: min(100%, 280px);
}
.video-pair .video { margin: 0; }
.video-pair .video.video-short { width: 100%; }
.video-pair figcaption {
    margin-top: 10px;
    max-width: 280px;
    font-size: 0.85rem;
    color: var(--ink-dim);
    text-align: center;
}

/* --- Footer ------------------------------------------------------------ */

.site-footer {
    background: var(--dark);
    color: var(--on-dark);
    padding: 68px 24px 34px;
    margin-top: 0;
}

.foot-logo {
    display: block;
    width: max-content;
    margin: 0 auto 12px;
}
.foot-tagline {
    margin: 0 auto 40px;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.82);
}
.foot-logo img { display: block; width: 260px; height: auto; }

.foot-grid {
    max-width: var(--shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 44px;
}

.site-footer h2 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
}

.foot-links { list-style: none; }
.foot-links li + li { margin-top: 0.55em; }
.foot-links a { text-decoration: none; color: rgba(255, 255, 255, 0.78); }
.foot-links a:hover { color: #fff; text-decoration: underline; }

.site-footer .social { margin-top: 20px; font-size: 1.4rem; }

.copyright {
    max-width: var(--shell);
    margin: 52px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1080px) {
    .site-header nav a { font-size: 0.74rem; padding: 7px 7px; letter-spacing: 0.06em; }
    .wordmark { font-size: 1.9rem; }
}

@media (max-width: 860px) {
    .nav-toggle { display: block; }

    /* Collapsed menu needs JS; without it the nav simply stays open. */
    .has-js .site-header nav { display: none; }
    .has-js .site-header nav.is-open {
        display: block;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding-bottom: 24px;
    }

    .site-header {
        flex-wrap: wrap;
        padding: 12px 18px;
    }

    .site-header nav {
        flex-basis: 100%;
        border-top: 1px solid var(--border);
        margin-top: 10px;
        padding-top: 10px;
    }

    .site-header nav ul { flex-direction: column; justify-content: flex-start; }
    .site-header nav a { padding: 11px 2px; font-size: 0.9rem; }
    .site-header nav .nav-sub > ul {
        position: static;
        display: block;
        right: auto;
        left: auto;
        max-height: none;
        overflow: visible;
        border: 0;
        box-shadow: none;
        min-width: 0;
        padding: 0 0 8px 14px;
    }
    .site-header nav .nav-sub > ul a { padding: 8px 2px; font-size: 0.95rem; }

    .feature { grid-template-columns: 1fr; }
    /* Image first on every stacked row, so the order reads consistently. */
    .feature.reverse .feature-media { order: 1; }
    .feature.reverse .feature-body { order: 2; }

    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    /* Two rows of three is the widest arrangement that still leaves the
       longest label on a single line at this measure. */
    .social-tiles { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; max-width: 300px; }
    .social-tiles a { font-size: 0.72rem; }
    .social-tiles i { width: 44px; height: 44px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    .tile:hover img { transform: none; }
    .social-tiles a:hover i { transform: none; }
}

@media print {
    .site-header, .hero, .site-footer, .video, .foot-logo { display: none; }
    body { font-size: 12pt; }
}


/* ==========================================================================
   Ranch listing page — hero, facts, highlights, masonry gallery, CTAs.
   Reuses the site tokens; nothing here is used by the sailing pages.
   ========================================================================== */

.listing-hero {
    position: relative;
    color: #fff;
    min-height: clamp(440px, 72vh, 660px);
    display: flex; align-items: flex-end;
    background: var(--dark) center / cover no-repeat;
    overflow: hidden;
}

/* The photo sits in an <img> rather than a background so it can be
   eager-loaded and given a proper alt for screen readers. */
.listing-hero > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.listing-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0.78) 100%);
}

.listing-hero-inner {
    position: relative; z-index: 1;
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(46px, 9vw, 84px) 24px clamp(34px, 5vw, 52px);
}

.listing-hero .hero-eyebrow { margin-bottom: 6px; }

.listing-hero-title {
    font-family: var(--script-font);
    font-weight: 400;
    font-size: clamp(3rem, 10vw, 6rem);
    line-height: 0.95;
    text-shadow: 0 3px 30px rgba(0, 0, 0, 0.4);
}

.listing-hero-sub {
    font-size: clamp(1.02rem, 2.1vw, 1.28rem);
    max-width: 30em;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.92);
}

.hero-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px;
    margin-top: 30px;
}

/* --- Rating pill -------------------------------------------------------- */

.rating-pill {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    /* Safari 17 and earlier only support the prefixed form. */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, 0.2);
}

.rating-pill i { font-size: 0.78rem; }

/* --- Facts strip -------------------------------------------------------- */

.fact-strip {
    border-bottom: 1px solid var(--border);
    background: var(--dim);
}

.fact-strip-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px clamp(18px, 3vw, 38px);
}

.fact-list {
    list-style: none;
    display: flex; flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 0.95rem;
}

.fact-list li { display: inline-flex; align-items: center; gap: 9px; }
.fact-list i { color: var(--ink-dim); font-size: 0.92rem; width: 1.1em; text-align: center; }
.fact-strip .btn { margin-left: auto; }

/* --- Highlight cards ---------------------------------------------------- */

.hl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(18px, 2.6vw, 30px);
}

.hl {
    border: 1px solid var(--border);
    padding: 26px 24px 28px;
    background: #fff;
}

.hl i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 14px;
}

.hl h3 { font-size: 1.06rem; margin-bottom: 0.45em; }
.hl p { font-size: 0.94rem; color: var(--ink-dim); line-height: 1.55; }

/* --- Masonry photo gallery --------------------------------------------- */

.gallery-group + .gallery-group { margin-top: clamp(38px, 5vw, 58px); }

.gallery-group h3 {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    color: var(--ink-dim);
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.masonry { columns: 3; column-gap: 14px; }

/* Each shot links to the full-resolution file; the grid only ever loads
   the ~640px thumbnail. */
.shot {
    display: block;
    position: relative;
    break-inside: avoid;
    margin: 0 0 14px;
    overflow: hidden;
    background: var(--dim);
    text-decoration: none;
    color: #fff;
}

.shot img {
    width: 100%; height: auto;
    transition: transform 0.5s ease;
}

.shot:hover img, .shot:focus-visible img { transform: scale(1.035); }

.shot-cap {
    position: absolute; inset: auto 0 0 0;
    padding: 34px 14px 12px;
    font-size: 0.84rem;
    line-height: 1.4;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.shot::after {
    content: "\f065"; /* expand */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.74rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.shot:hover::after, .shot:focus-visible::after { opacity: 1; }

.gallery-note {
    font-size: 0.86rem;
    color: var(--ink-dim);
    margin-bottom: 30px;
}

/* --- Amenities ---------------------------------------------------------- */

.amenity-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(24px, 3vw, 44px);
}

.amenity-cols h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 500;
    margin-bottom: 14px;
}

.amenity-cols ul { list-style: none; }
.amenity-cols li {
    display: flex; gap: 10px;
    font-size: 0.95rem;
    padding: 5px 0;
    color: var(--ink-dim);
}
.amenity-cols li i { color: var(--ink); font-size: 0.78rem; margin-top: 0.45em; }
.amenity-cols li.absent { text-decoration: line-through; opacity: 0.65; }

/* --- Sleeping arrangements & info cards -------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 2.4vw, 26px);
}

.card {
    border: 1px solid var(--border);
    padding: 22px 22px 24px;
}

.card i { font-size: 1.25rem; display: block; margin-bottom: 12px; color: var(--ink-dim); }
.card h3 { font-size: 1rem; margin-bottom: 0.4em; }
.card p, .card ul { font-size: 0.93rem; color: var(--ink-dim); line-height: 1.55; }
.card ul { list-style: none; }
.card li + li { margin-top: 0.35em; }

/* --- Distances ---------------------------------------------------------- */

.distance-list { list-style: none; }
.distance-list li {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.97rem;
}
.distance-list li:last-child { border-bottom: 0; }
.distance-list span { color: var(--ink-dim); white-space: nowrap; }

/* --- Closing CTA -------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band p { max-width: 46em; margin: 0 auto; color: rgba(255, 255, 255, 0.76); }
.cta-band .btn { margin-top: 30px; }
.cta-fine {
    display: block;
    margin-top: 22px;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
}

/* --- Mobile booking bar ------------------------------------------------- */

/* On narrow screens the hero CTA scrolls away almost immediately, so it is
   mirrored in a fixed bar. Hidden on wider screens where the page CTAs are
   always within reach. */
.book-bar { display: none; }

@media (max-width: 720px) {
    .book-bar {
        display: block;
        position: fixed; inset: auto 0 0 0; z-index: 190;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--border);
    }
    .book-bar .btn { display: block; text-align: center; }
    /* Keep the footer clear of the fixed bar. */
    body.has-book-bar .site-footer { padding-bottom: 96px; }
}

@media (max-width: 980px) {
    .masonry { columns: 2; }
}

@media (max-width: 860px) {
    .fact-strip .btn { margin-left: 0; }
    .fact-list { gap: 8px 18px; font-size: 0.9rem; }
}

@media (max-width: 520px) {
    .masonry { columns: 1; }
    .shot-cap { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .shot:hover img, .shot:focus-visible img { transform: none; }
}

@media print {
    .listing-hero, .book-bar, .fact-strip { display: none; }
    .masonry { columns: 2; }
}

/* Vertical rhythm for the listing page's plain (unbanded) sections. */
.section-pad { padding-top: clamp(52px, 8vw, 92px); }
.section-pad-sm { padding-bottom: clamp(20px, 4vw, 40px); }
.section-title-tight { margin-bottom: 14px; }
.band-top { margin-top: clamp(52px, 8vw, 92px); }
.note-foot { margin-top: 34px; margin-bottom: 0; }
.distance-list { margin-top: 24px; }

/* `.band.dark a` is more specific than `.btn-light`, which would otherwise
   leave the closing CTA as white text on a white button. */
.band.dark .btn-light { color: var(--dark); }
.band.dark .btn-light:hover { color: #fff; }


/* ==========================================================================
   2026 redesign — live status, channel tiles, the Log, email capture,
   and the four-group footer. Shared by every sailing page.
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
    margin-bottom: 12px;
}

/* --- Homepage hero: photograph plus a thin live status strip ------------ */

/* The still is the LCP image. A silent clip is faded over it after load.
   Portrait viewports use the tall Apataki frame; landscape uses the wide
   one. Both cuts keep the boat near the centre, so object-position: center
   holds the hull in frame when max-height crops a short window.
   The clip is taken out of flow so it cannot change the section's height. */
.hero.hero-plain .hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 86vh;
}
@media (orientation: portrait) {
    .hero.hero-plain .hero-media { aspect-ratio: 720 / 1280; }
}
.hero.hero-plain.is-wide .hero-media { aspect-ratio: 16 / 9; }
.hero.hero-plain.is-tall .hero-media { aspect-ratio: 720 / 1280; }
.hero.hero-plain .hero-media picture,
.hero.hero-plain .hero-media video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.hero.hero-plain .hero-media picture { z-index: 0; }
.hero.hero-plain .hero-media img,
.hero.hero-plain .hero-media video {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
}
.hero.hero-plain .hero-media video {
    /* Above the poster, still inside the hero-media stacking context so the
       scrim and the status line stay on top of both. A frame one pixel
       larger than the still would become the LCP element, so the clip is
       inset by a hair. Opacity stays 0 until playback starts. */
    z-index: 2;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 1px;
    left: 1px;
    right: auto;
    bottom: auto;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    background: transparent;
    transition: opacity 0.7s ease;
}
.hero.hero-plain .hero-media video.is-playing {
    opacity: 1;
    visibility: visible;
}
.hero.hero-plain .hero-media video.is-frozen,
.hero.hero-plain .hero-media video.is-frozen.is-playing {
    opacity: 0;
    visibility: hidden;
}
/* The last frame is a still. Safari drops the video picture when the hero
   scrolls off screen, so this image is what stays. */
.hero.hero-plain .hero-media .hero-end {
    position: absolute;
    z-index: 3;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 1px;
    left: 1px;
    right: auto;
    bottom: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}
.hero.hero-plain.is-held .hero-media .hero-end { opacity: 1; }

/* The headline now sits below the photograph, so the scrim only needs to
   carry the strip at the top edge and can leave the lagoon untouched. */
.hero.hero-plain::after {
    background: linear-gradient(to bottom,
        rgba(3, 27, 33, 0.45) 0%,
        rgba(3, 27, 33, 0) 18%,
        rgba(3, 27, 33, 0) 82%,
        rgba(3, 27, 33, 0.25) 100%);
}

.status-strip {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: start;
    justify-self: center;
    margin-top: clamp(12px, 2.4vw, 22px);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(3, 27, 33, 0.48);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    max-width: calc(100% - 24px);
}
.status-strip:hover { background: rgba(3, 27, 33, 0.7); }
.status-strip strong { font-weight: 500; }
.status-dot {
    flex: none;
    width: 8px; height: 8px; border-radius: 50%;
    background: #5ee0b0;
    box-shadow: 0 0 0 0 rgba(94, 224, 176, 0.6);
    animation: status-pulse 2.4s ease-out infinite;
}
@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(94, 224, 176, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(94, 224, 176, 0); }
    100% { box-shadow: 0 0 0 0 rgba(94, 224, 176, 0); }
}

.home-intro {
    text-align: center;
    padding: clamp(40px, 6vw, 68px) 24px clamp(34px, 5vw, 54px);
}
.home-intro h1 {
    max-width: 18em;
    margin: 0 auto;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    letter-spacing: -0.01em;
}
.home-intro .home-tagline {
    margin-top: 14px;
    font-family: var(--head-font);
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 0.04em;
    color: var(--ink);
}
.home-intro p {
    max-width: 44em;
    margin: 18px auto 0;
    font-size: clamp(1.02rem, 1.8vw, 1.15rem);
    color: var(--ink-dim);
}

/* --- Three channel tiles ----------------------------------------------- */

/* Identical columns, identical media frame, identical footer line, so no
   channel outweighs another whatever its content. */
.channel-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

.ch-tile {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    background: #fff;
    min-width: 0;
}

/* Tile headings use the same face, weight and case as the section headings
   ("Meet Steve and Meghan"), just scaled to fit a third of the row. */
.ch-tile .ch-title {
    padding: 20px 18px 16px;
    font-family: var(--head-font);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

.ch-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dim);
}
.ch-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
/* Substack covers are often tall portraits. A centered 16:9 window cuts off
   the heads. Pin the Captain's Log tile to the top of the photo so faces
   stay in frame for this entry and the next ones. YouTube and Instagram
   tiles stay centered. */
.ch-tile[data-live="log-tile"] .ch-media img {
    object-position: center top;
    transform-origin: center top;
}
a.ch-media:hover img { transform: scale(1.03); }
.ch-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ch-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.12);
    transition: background-color 0.25s ease;
}
.ch-play i {
    width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    padding-left: 4px;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.82);
    color: #fff;
    font-size: 1.3rem;
    transition: transform 0.25s ease, background-color 0.25s ease;
}
.ch-video:hover .ch-play { background: rgba(0, 0, 0, 0.26); }
.ch-video:hover .ch-play i { transform: scale(1.08); background: #c4302b; }

.ch-body { padding: 18px 18px 6px; flex: 1; }
.ch-meta {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
    margin-bottom: 8px;
}
.ch-body h3 { font-size: 1.06rem; line-height: 1.35; }
.ch-body h3 a { text-decoration: none; }
.ch-body h3 a:hover { text-decoration: underline; }
.ch-text { margin-top: 10px; font-size: 0.93rem; line-height: 1.55; color: var(--ink-dim); }

.ch-more {
    display: block;
    margin: 14px 18px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    font-weight: 500;
}
.ch-more:hover { text-decoration: underline; }

/* --- Story hub: chapter cards ------------------------------------------ */

.page-head .story-lead {
    max-width: 36em;
    margin: 14px auto 0;
    color: var(--ink-dim);
    font-size: 1.05rem;
}

.story-hub { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 72px; }

.story-chapters {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    margin: 0;
    padding: 0;
}

.story-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border);
    background: #fff;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.story-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--dim);
}
/* Portrait photos of people: a centered 16:9 window clips the top of the
   head. Pin those to the top of the frame. The pugs sit in the bottom of
   their frame, so that card pins to the bottom instead. */
.story-card img.crop-heads { object-position: center top; }
.story-card img.crop-bottom { object-position: center bottom; }
.story-card-body { padding: 16px 18px 18px; }
.story-card h2 {
    font-family: var(--head-font);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
}
.story-card p {
    margin-top: 8px;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--ink-dim);
}
.story-card:hover h2 { text-decoration: underline; }

@media (max-width: 900px) {
    .story-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .story-chapters { grid-template-columns: 1fr; }
}

/* --- Secondary row: small icon-and-label buttons ------------------------ */

.mini-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    max-width: 640px;
    margin: clamp(22px, 3vw, 32px) auto 0;
    list-style: none;
}
.mini-links a {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 12px 6px 10px;
    border: 1px solid var(--border);
    text-decoration: none;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mini-links a:hover { border-color: var(--ink); background: var(--dim); }
.mini-links i { font-size: 1.15rem; }
.mini-links span { white-space: nowrap; }

/* --- Compact prom module ------------------------------------------------ */

.prom-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    padding: clamp(36px, 5vw, 56px) 0;
    border-top: 1px solid var(--border);
}
/* A feature row above already draws the dividing line. */
.feature + .prom-strip { border-top: 0; }
.prom-strip h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.prom-strip p { margin-top: 8px; font-size: 0.95rem; color: var(--ink-dim); }
.prom-strip .prom-link { display: inline-block; margin-top: 14px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.prom-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.prom-thumbs .tile img { aspect-ratio: 1 / 1; }

/* Compact profile under the crew row. Stays below the channel tiles. */
.meg-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
}
.meg-card > div { min-width: 0; }
.meg-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.meg-card h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.meg-card p { margin-top: 6px; font-size: 0.95rem; color: var(--ink-dim); }
.meg-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
}
.meg-card-links a {
    color: var(--ink);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    text-decoration: none;
}
.meg-card-links a:hover { text-decoration: underline; }
.meg-card-links i { margin-right: 6px; }

/* --- Email capture ------------------------------------------------------ */

.signup { text-align: center; }
.signup h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.signup p { max-width: 36em; margin: 12px auto 0; }
.band.dark .signup p { color: rgba(255, 255, 255, 0.76); }

.signup-form {
    display: flex;
    max-width: 520px;
    margin: 28px auto 0;
}
.signup-form input {
    flex: 1; min-width: 0;
    font: inherit;
    padding: 15px 16px;
    border: 1px solid var(--ink);
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: var(--ink);
}
.signup-form input:focus-visible { outline: 2px solid #5ee0b0; outline-offset: 2px; }
.signup-form .btn { cursor: pointer; border-radius: 0; white-space: nowrap; }
.signup-form .visually-hidden input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; border: 0;
    flex: none;
}
.signup-form[hidden],
.signup-thanks[hidden],
[data-signup-note][hidden] { display: none !important; }
.band.dark .signup-form input { border-color: #fff; }
.band.dark .signup-form .btn { background: #fff; color: var(--dark); border-color: #fff; }
.band.dark .signup-form .btn:hover { background: transparent; color: #fff; }
.signup-fine { font-size: 0.82rem; margin-top: 14px !important; opacity: 0.75; }

/* Light variant, used inside prose pages. */
.signup-panel {
    border: 1px solid var(--border);
    background: var(--dim);
    padding: clamp(24px, 4vw, 38px);
    text-align: center;
    margin: 40px 0;
}
.signup-panel h2 { margin-top: 0 !important; font-size: clamp(1.3rem, 2.8vw, 1.7rem); }
.signup-panel .signup-form { margin-top: 20px; }

/* --- Footer: four groups ------------------------------------------------ */

.foot-grid.foot-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.foot-links i { width: 1.3em; text-align: center; margin-right: 6px; opacity: 0.85; }
.foot-extra {
    max-width: var(--shell);
    margin: 44px auto 0;
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    list-style: none;
    font-size: 0.9rem;
}
.foot-extra a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.foot-extra a:hover { color: #fff; text-decoration: underline; }
.foot-extra + .copyright { margin-top: 22px; }

/* --- The Log ------------------------------------------------------------ */

.log-list { display: grid; gap: clamp(28px, 4vw, 44px); padding: 40px 0 20px; }
.log-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(18px, 3vw, 36px);
    align-items: start;
    padding-bottom: clamp(28px, 4vw, 44px);
    border-bottom: 1px solid var(--border);
}
.log-card:last-child { border-bottom: 0; }
.log-card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--dim); }
.log-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.log-card-media:hover img { transform: scale(1.03); }
.log-card h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: 0.4em; }
.log-card h2 a { text-decoration: none; }
.log-card h2 a:hover { text-decoration: underline; }
.log-card p { color: var(--ink-dim); }
.log-card-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px !important; }
.log-card-links a {
    color: var(--ink);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}
.log-card-links i { font-size: 0.7rem; margin-left: 3px; }

/* Full post bodies arrive as Substack's own HTML. */
.post-body img, .post-body video, .post-body iframe { max-width: 100%; height: auto; }
.post-body iframe { aspect-ratio: 16 / 9; width: 100%; border: 0; }
.post-body figure, .post-body .captioned-image-container { margin: 28px 0; }
.post-body figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ink-dim); text-align: center; }
.post-body a { text-underline-offset: 3px; }
.post-body blockquote { border-left: 3px solid var(--border); padding-left: 18px; color: var(--ink-dim); }
.post-body .image-link-expand, .post-body .subscription-widget-wrap, .post-body .button-wrapper[data-attrs*="subscribe"] { display: none; }
.post-body picture { display: block; }

.log-source {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    border: 1px solid var(--border);
    background: var(--dim);
    padding: 16px 20px;
    font-size: 0.92rem;
}
.log-fallback {
    border: 2px solid var(--ink);
    padding: 24px;
    text-align: center;
    margin-top: 30px;
}
.log-fallback .btn { margin-top: 6px; }
/* On a destination page this is one line, not the big empty-state box. */
.dest-media .log-fallback {
    border: 0;
    padding: 0;
    margin: 0 0 1.2em;
    text-align: left;
}

/* --- Where We Are ------------------------------------------------------- */

.map-embed {
    position: relative;
    height: clamp(360px, 62vh, 620px);
    background: #0b2a31;
    border-bottom: 1px solid var(--border);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.position-card {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
    border: 1px solid var(--border);
    padding: 22px 24px;
    margin-bottom: 10px;
}
.position-card h2 { margin: 0 !important; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.position-card p { margin: 6px 0 0 !important; color: var(--ink-dim); font-size: 0.92rem; }

.fact-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 30px 0;
}
.fact-row div { background: #fff; padding: 18px 16px; text-align: center; }
.fact-row strong { display: block; font-family: var(--head-font); font-size: 1.6rem; font-weight: 500; line-height: 1.1; }
.fact-row span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); }

/* --- Destination posts -------------------------------------------------- */

.notes-box {
    border: 1px solid var(--border);
    background: var(--dim);
    padding: 20px 24px;
    margin: 30px 0;
}
.notes-box h2 { margin-top: 0 !important; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; }
.notes-box.next-step h2 {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.45rem);
  margin-bottom: 0.45em;
}
.notes-box dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin-top: 12px; font-size: 0.95rem; }
.notes-box dt { font-weight: 500; }
.notes-box dd { color: var(--ink-dim); }
.page-head .next-step {
  text-align: left;
  max-width: 640px;
  margin: 22px auto 8px;
}
.page-head .next-step p { margin: 0 0 8px; }
.page-head .next-step p:last-child { margin-bottom: 0; }
.page-head .next-step a { display: inline-block; padding: 4px 0; }
.dest-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dest-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dest-list li + li { margin-top: 0 !important; }
.dest-list a {
    display: block; height: 100%;
    border: 1px solid var(--border);
    padding: 16px 18px;
    text-decoration: none;
}
.dest-list a:hover { border-color: var(--ink); }
.dest-list strong { display: block; font-family: var(--head-font); font-weight: 500; }
.dest-list span { font-size: 0.88rem; color: var(--ink-dim); }

/* --- Pugs --------------------------------------------------------------- */

.pug-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 40px); margin: 30px 0; }
.pug-pair .inline-img { margin: 0 0 16px; }
.pug-pair h2 { margin-top: 0 !important; }
.pug-facts { list-style: none; padding: 0 !important; font-size: 0.95rem; color: var(--ink-dim); }
.pug-facts li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.pug-facts li + li { margin-top: 0 !important; }
.pug-close { font-family: var(--script-font); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.1; text-align: center; margin: 48px 0 10px; }

.write-us-head { display: flex; align-items: center; gap: 12px; }
.write-us-head i { font-size: 1.3rem; }

@media (max-width: 1000px) {
    .foot-grid.foot-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .channel-tiles { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .prom-strip { grid-template-columns: 1fr; }
    .log-card { grid-template-columns: 1fr; }
    .pug-pair { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .meg-card { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 12px; }
    .meg-card-links a { letter-spacing: 0.06em; }
    .mini-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mini-links li:nth-child(5) { grid-column: 1 / -1; }
    .prom-thumbs { grid-template-columns: repeat(3, 1fr); }
    .prom-thumbs .tile:nth-child(n+4) { display: none; }
    .signup-form { flex-direction: column; gap: 10px; }
    .signup-form input { border-right: 1px solid var(--ink); }
    .band.dark .signup-form input { border-right-color: #fff; }
    .foot-grid.foot-grid-4 { grid-template-columns: 1fr; }
    .status-strip { font-size: 0.76rem; border-radius: 18px; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
    .status-dot { animation: none; }
    a.ch-media:hover img, .log-card-media:hover img { transform: none; }
}

@media print {
    .status-strip, .map-embed, .signup { display: none; }
}

/* Pull quotes in long-form pages */
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ink); font-size: 1.2rem; font-style: italic; }
.prose blockquote p { margin: 0; }

/* Pugs story: portrait photos sit narrower than the text column so a tall
   picture never fills the whole screen; pairs and the fan grid crop to 4:5. */
.pug-photo { max-width: 560px; margin-left: auto; margin-right: auto; }
.pug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 34px 0; }
.pug-grid .inline-img { margin: 0; }
.pug-grid img { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
.pug-follow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pug-follow .btn i { margin-right: 6px; }
@media (max-width: 520px) {
    .pug-grid:not(.pug-grid-4) { grid-template-columns: 1fr; }
    .pug-grid:not(.pug-grid-4) img { aspect-ratio: auto; }
}

/* ==========================================================================
   Partner pages and the footer partner-badge row.
   /yacht-club is the first partner page. The same blocks (header, intro,
   feature, "from the partner", together, closer) are meant to be reused.
   The copyright line holds one .partner-badge per partner.
   ========================================================================== */

.copyright.with-partners {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 28px;
    flex-wrap: wrap;
}

.partners {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-left: auto;
    max-width: 100%;
}

.partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    line-height: 1.35;
}

.partner-badge span { text-wrap: balance; }

.partner-badge img {
    box-sizing: content-box;
    height: 28px;
    width: auto;
    background: #fff;
    border-radius: 4px;
    padding: 3px 4px;
    flex: none;
}

.partner-badge:hover { color: #fff; text-decoration: underline; }

@media (max-width: 640px) {
    .copyright.with-partners { align-items: flex-start; }
    .partners { margin-left: 0; }
}

.pp-crumb {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 18px;
}

.pp-seal {
    width: 118px;
    height: auto;
    margin: 0 auto 14px;
}

/* Horizontal partner wordmarks need more room than a square seal. */
.pp-seal-wide {
    width: min(280px, 78vw);
}

.pp-sub {
    color: var(--ink-dim);
    margin-top: 10px;
    font-size: 1.02rem;
}

.pp-kicker {
    font-family: var(--head-font);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 8px;
}

.pp-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding-top: 56px;
    padding-bottom: 56px;
}

.pp-intro .lead {
    font-size: 1.2rem;
    color: var(--ink);
}

.pp-intro p + p { margin-top: 1em; }
.pp-intro .btn { margin-top: 26px; }

.pp-intro img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Lead photo keeps its own frame so a group portrait is not cropped. */
.pp-intro picture { display: block; }
.pp-intro img.pp-lead {
    aspect-ratio: 1152 / 1600;
}

.pp-quote {
    text-align: center;
    padding: clamp(56px, 8vw, 88px) 24px;
    background: var(--ink);
    color: #fff;
}

.pp-quote blockquote {
    max-width: 18em;
    margin: 0 auto;
    font-family: var(--head-font);
    font-weight: 500;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.35;
}

.pp-quote p + p { margin-top: 0.75em; }

.pp-quote cite {
    display: block;
    margin-top: 22px;
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.pp-burgee {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding-top: 64px;
    padding-bottom: 64px;
    border-top: 1px solid var(--border);
}

.pp-burgee img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pp-intro figcaption,
.pp-burgee figcaption,
.pp-strip figcaption {
    font-size: 0.85rem;
    color: var(--ink-dim);
    margin-top: 8px;
    text-align: center;
}

.pp-burgee h2 { margin: 0.2em 0 0.5em; }
.pp-burgee p + p { margin-top: 1em; }

.pp-partner {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding-top: 64px;
    padding-bottom: 64px;
    border-top: 1px solid var(--border);
}

.pp-partner img {
    width: 100%;
    height: auto;
    display: block;
}

.pp-partner h2 { margin: 0 0 0.5em; }
.pp-partner p + p { margin-top: 1em; }

.pp-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.nl-card {
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    min-width: 0;
}

.nl-card img {
    width: 100%;
    aspect-ratio: 17 / 22;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid var(--border);
}

.nl-card div { padding: 18px 20px 22px; }

.nl-card .when {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.nl-card h3 { font-size: 1.05rem; margin: 0.35em 0 0.3em; }
.nl-card p { font-size: 0.92rem; color: var(--ink-dim); }
.nl-card:hover { border-color: var(--ink); }
.nl-card:hover h3 { text-decoration: underline; }

.nl-months {
    margin-top: 30px;
    text-align: center;
    font-size: 0.92rem;
}

.nl-months a {
    display: inline-block;
    border: 1px solid var(--border);
    background: #fff;
    padding: 5px 11px;
    margin: 4px 3px;
    text-decoration: none;
    border-radius: 20px;
}

.nl-months a:hover { border-color: var(--ink); }

.nl-archive { text-align: center; margin-top: 20px; font-size: 0.92rem; }
.nl-archive a { font-weight: 500; }

.pp-talk { padding-top: 72px; padding-bottom: 36px; }

.talk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.tcard {
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tcard > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tcard .pos-25 { object-position: center 25%; }
.tcard .pos-30,
.pp-strip .pos-30 { object-position: center 30%; }
.tcard .pos-35 { object-position: center 35%; }

.tcard .tb {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.tcard .num {
    font-family: var(--head-font);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--ink-dim);
}

.tcard h3 { font-size: 1.12rem; margin: 0; }
.tcard .tb p { font-size: 0.94rem; margin: 0; }
.tcard .tb a { text-decoration: underline; text-underline-offset: 2px; }

.tcard blockquote {
    margin-top: auto;
    border-left: 2px solid var(--ink);
    padding: 2px 0 2px 12px;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-dim);
}

.tcard-feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.tcard-feature > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
    align-self: stretch;
}

.tcard-feature .tb { padding: 26px 28px; }
.tcard-feature .by-numbers { margin-top: auto; }

.by-numbers {
    background: var(--dim);
    padding: 14px 16px;
    font-size: 0.86rem;
    line-height: 1.5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 10px 18px;
}

.by-numbers h4 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.by-numbers table { width: 100%; border-collapse: collapse; }

.by-numbers th,
.by-numbers td {
    text-align: left;
    font-weight: 400;
    padding: 3px 0;
    border-bottom: 1px solid #e6e6e0;
    vertical-align: top;
}

.by-numbers thead th {
    border: 0;
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 6px;
}

.by-numbers td:last-child {
    text-align: right;
    font-weight: 500;
    white-space: nowrap;
}

.by-numbers tr.sail-cloth td {
    border-bottom: 0;
    text-align: left;
    font-weight: 400;
    color: var(--ink-dim);
    white-space: normal;
}

.by-numbers dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    margin: 0;
    align-content: start;
}

.by-numbers dt { font-weight: 500; }
.by-numbers dd { margin: 0; }

.fplan {
    grid-column: 1 / -1;
    border: 1px solid var(--border);
    background: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.fplan > img {
    grid-column: 1 / -1;
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center 72%;
}

.fplan .col { padding: 26px 26px 22px; min-width: 0; }
.fplan .col + .col { border-left: 1px solid var(--border); }
.fplan h3 { font-size: 1.15rem; margin: 0 0 4px; }
.fplan .note { font-size: 0.85rem; color: var(--ink-dim); margin: 0 0 16px; }
.fplan-more { font-size: 0.9rem; margin-top: 6px; }
.fplan-more a { font-weight: 500; }

.yc-stops { list-style: none; margin: 0; padding: 0; }

.yc-stops li {
    position: relative;
    padding: 0 0 14px 22px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.yc-stops li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink);
    box-sizing: border-box;
    z-index: 1;
}

.yc-stops li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1em;
    bottom: 0;
    width: 1px;
    background: #d9d9d2;
}

.yc-stops li:last-child::after { display: none; }

.yc-stops strong {
    display: block;
    font-family: var(--head-font);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.yc-stops .changed {
    font-style: normal;
    color: var(--ink-dim);
}

.yc-stops .yc-life {
    display: block;
    font-style: italic;
    color: var(--ink-dim);
    margin-top: 4px;
}

.yc-stops li.is-dream::before,
.yc-stops li.is-next::before {
    background: #fff;
    border: 2px solid var(--ink-dim);
}

.yc-stops li.is-dream::before { border-style: dashed; }

.yc-stops li.is-unknown {
    background: var(--dim);
    margin: 0 0 10px -4px;
    padding: 8px 10px 10px 26px;
}

.yc-stops li.is-unknown::before {
    left: 4px;
    top: calc(8px + 0.35em);
    background: #fff;
    border: 2px dashed var(--ink);
}

.yc-stops li.is-unknown::after { left: 8px; top: calc(8px + 1.1em); }

.here {
    display: inline-block;
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    background: var(--ink);
    color: #fff;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.pp-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 40px;
}

.pp-strip img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pp-strip figcaption { font-size: 0.8rem; }

.pp-closer {
    text-align: center;
    padding: 70px 24px 80px;
}

.pp-closer h2 { margin-bottom: 10px; }
.pp-closer .section-intro { margin-bottom: 0; }
.pp-closer .btns {
    margin-top: 26px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 1000px) {
    .talk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tcard-feature,
    .by-numbers { grid-template-columns: minmax(0, 1fr); }
    .tcard-feature > img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
    .fplan { grid-template-columns: minmax(0, 1fr); }
    .fplan .col + .col { border-left: 0; border-top: 1px solid var(--border); }
    .fplan > img { height: 180px; }
}

@media (max-width: 700px) {
    .pp-burgee,
    .pp-partner,
    .pp-intro,
    .pp-features,
    .talk-grid { grid-template-columns: minmax(0, 1fr); }
    .pp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-talk { padding-top: 48px; }
    .tcard-feature .tb,
    .fplan .col { padding: 18px 16px 20px; }
}

/* --- Haʻapai planning map ---------------------------------------------- */

.haapai-map-scroll {
    overflow: hidden;
    height: min(70vh, 640px);
    min-height: 420px;
    background: #d5e4ec;
    border: 1px solid var(--border);
}
.haapai-map-scroll .haapai-map { height: 100%; width: 100%; background: #d5e4ec; }
.anch-pin { background: transparent; border: 0; }
.anch-pin-num {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    box-sizing: border-box;
    border-radius: 14px;
    color: #fff;
    font: 700 13px/1 Jost, sans-serif;
    letter-spacing: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.anch-pin-num.is-wide { font-size: 12px; }
.leaflet-marker-icon.is-active .anch-pin-num { outline: 2px solid #1c1d1d; outline-offset: 1px; }
.anch-popup .leaflet-popup-content-wrapper { border-radius: 2px; }
.anch-popup .leaflet-popup-content {
    margin: 8px 10px;
    font-family: var(--body-font);
    font-size: 0.92rem;
    line-height: 1.3;
    white-space: nowrap;
}
.map-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.map-toggles button {
    font-family: var(--body-font);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 8px 12px;
    cursor: pointer;
}
.map-toggles button[aria-pressed="true"] { background: var(--dark); color: #fff; }
.anchorage-list { list-style: none; padding-left: 0 !important; }
.anchorage { padding: 16px 14px; scroll-margin-top: 96px; }
.anchorage + .anchorage { border-top: 1px solid var(--border); }
.anchorage.is-active { background: var(--dim); }
.anchorage h3 { margin: 0 0 8px; font-size: 1.08rem; }
.pin-num {
    display: inline-block;
    min-width: 1.45rem;
    width: auto;
    height: 1.45rem;
    margin-right: 6px;
    padding: 0 0.32rem;
    box-sizing: border-box;
    border-radius: 999px;
    color: #fff;
    text-align: center;
    font: 700 0.75rem/1.45rem var(--body-font);
    vertical-align: 1px;
}
.map-jump {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.anchorage-table tr.is-active { outline: 2px solid var(--ink); }
.anchorage-table tr.is-unmarked td { color: var(--ink-dim); }

/* Reuse for later anchorages: aside.captain-take with a kicker, a short
   highlight, and details.captain-take-full for the verbatim note. */
.captain-take {
    border: 1px solid var(--border);
    border-left: 3px solid var(--ink);
    background: #fff;
    padding: 16px 18px;
    margin: 14px 0 4px;
}
.captain-take-kicker {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.captain-take h3 { margin: 0 0 8px; font-size: 1.02rem; }
.captain-take-highlight p { margin: 0; }
.captain-take-full { margin-top: 12px; }
.captain-take-full summary { cursor: pointer; font-weight: 500; }
.captain-take-body { margin-top: 12px; }
.captain-take-body p + p { margin-top: 0.9em; }
.captain-take-link { margin: 10px 0 0; }

@media (max-width: 700px) {
    .anchorage-table thead { display: none; }
    .anchorage-table,
    .anchorage-table tbody,
    .anchorage-table tr,
    .anchorage-table th,
    .anchorage-table td { display: block; width: auto; }
    .anchorage-table tr {
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid var(--border);
    }
    .anchorage-table th,
    .anchorage-table td { border: 0; padding: 4px 0; }
    .anchorage-table td::before,
    .anchorage-table th::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-dim);
    }
}

/* --- Cruising Guide ---------------------------------------------------- */

.guide-note { max-width: 40em; }
.guide-note p + p { margin-top: 1em; }

.at-a-glance {
    border: 1px solid var(--border);
    background: var(--dim);
    padding: 18px 20px 8px;
    margin: 28px 0;
}
.at-a-glance h2 { margin-top: 0 !important; font-size: 1.15rem; }
.at-a-glance dl {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) 1fr;
    gap: 8px 16px;
    margin: 0;
}
.at-a-glance dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.at-a-glance dd { margin: 0; }

.tip-flag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: var(--body-font);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.4;
}
.tip-flag.heard { background: var(--dim); }
.tip-legend { font-size: 0.92rem; color: var(--ink-dim); }
.soon-flag {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.route-figure { margin: 28px 0 12px; }
.route-figure img { width: 100%; height: auto; display: block; background: var(--dim); }
.route-figure figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ink-dim); }
.collab-map-frame { position: relative; }

/* Cruising-guide hero: one wide photograph, same overlay as the old guide
   hero. The ratio matches the file so the frame does not letterbox or crop. */
.hero.guide-hero .hero-media img { aspect-ratio: 2000 / 930; }
.hero.guide-hero::after {
    background: linear-gradient(to bottom,
        rgba(3, 27, 33, 0.72) 0%,
        rgba(3, 27, 33, 0.4) 22%,
        rgba(3, 27, 33, 0.08) 46%,
        rgba(3, 27, 33, 0.06) 70%,
        rgba(3, 27, 33, 0.34) 100%);
}
.hero.guide-hero + .shell { padding-top: 36px; }
@media (max-width: 600px) {
    .hero.guide-hero .hero-media img {
        aspect-ratio: 3 / 2;
        object-fit: cover;
        object-position: center;
    }
    .hero.guide-hero .hero-inner { padding: 16px 16px 14px; }
    .hero.guide-hero .hero-title { font-size: 2.05rem; }
    .hero.guide-hero .hero-sub { font-size: 0.92rem; line-height: 1.3; }
}

.page-head .guide-tagline {
    max-width: 36em;
    margin: 12px auto 0;
    color: var(--ink-dim);
    font-size: 1.05rem;
}
.guide-destinations { padding-top: 28px; padding-bottom: 4px; }
.guide-destinations > h2 { margin: 0 0 2px; }
/* Full map, smaller than the content column, original proportions.
   The country names sit on the artwork instead of being sliced by a crop. */
.route-figure-shrunk {
    max-width: 820px;
    margin: 8px auto 12px;
}
.route-figure-shrunk .collab-map-frame { position: relative; }
.route-figure-shrunk img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
    .route-figure-shrunk .map-spot {
        font-size: 0.62rem;
        padding: 1px 5px;
        line-height: 1.2;
    }
    .route-figure-shrunk .map-spot:nth-of-type(7) { top: 52% !important; }
    .route-figure-shrunk .map-spot:nth-of-type(3) { top: 66% !important; }
    .route-figure-shrunk .map-spot:nth-of-type(4) { top: 74% !important; }
    .route-figure-shrunk .map-spot:nth-of-type(5) { top: 84% !important; }
    .route-figure-shrunk .map-spot:nth-of-type(6) { top: 94% !important; }
}
.map-spot {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    max-width: 42%;
}
a.map-spot,
.map-spot > a,
.map-spot summary {
    display: inline-block;
    background: rgba(255, 250, 242, 0.94);
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 4px 8px;
    font-size: 0.72rem;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.map-spot summary { list-style: none; }
.map-spot summary::-webkit-details-marker { display: none; }
.map-spot[open] > summary { background: var(--ink); color: #fff; }
.map-spot-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.map-spot-menu a {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    padding: 7px 8px;
    text-decoration: none;
    font-size: 0.85rem;
}
.map-spot a:hover,
.map-spot-menu a:hover { background: var(--dim); }
.map-spot a:focus-visible,
.map-spot summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.route-pins {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin: 4px 0 8px;
    padding: 0;
}
.route-pins > li { margin: 0; }
.route-pins .pin-country {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.route-pins ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.route-pins a {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-decoration: none;
    font-size: 0.92rem;
}
.route-pins a:hover { background: var(--dim); }
.inline-img .watch-embed { width: 100%; }

.dest-cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    margin: 20px 0 8px;
    padding: 0;
}
.dest-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: #fff;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.dest-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--dim);
}
.dest-card-body { padding: 16px 18px 18px; }
.dest-card h3 { font-size: 1.25rem; }
.dest-card p { margin-top: 8px; color: var(--ink-dim); font-size: 0.95rem; }
.dest-card:hover h3 { text-decoration: underline; }

.tool-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
    padding: 0;
}
.tool-strip a {
    display: block;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--border);
    text-decoration: none;
    background: #fff;
}
.tool-strip strong { display: block; font-family: var(--head-font); font-weight: 500; font-size: 1.05rem; }
.tool-strip span { display: block; margin-top: 6px; color: var(--ink-dim); font-size: 0.9rem; }
.tool-strip a:hover { background: var(--dim); }

.gift-ask {
    border: 1px solid var(--border);
    background: var(--dim);
    padding: 20px 22px;
    margin: 28px 0;
}
.gift-ask h2 { margin-top: 0 !important; }
.kit-downloads { display: flex; flex-wrap: wrap; gap: 8px; }

/* Destination pages: films and Captain's Log entries from data/destination-media.json.
   Players stay a thumbnail until click, then a youtube-nocookie iframe. */
.dest-media[hidden] { display: none; }
.watch-embeds, .prose .watch-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin: 0 0 8px;
}
.prose .watch-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 14px;
    margin: 4px 0 0;
}
.watch-embed { flex: 1 1 280px; min-width: 0; max-width: 100%; }
.watch-embeds .watch-embed.is-short { flex: 0 1 280px; width: min(100%, 280px); }
.prose .watch-strip .watch-embed {
    flex: 0 0 220px;
    width: 220px;
    max-width: none;
    scroll-snap-align: start;
}
.watch-facade {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.watch-thumb, .watch-frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}
.watch-embed.is-short .watch-thumb,
.watch-embed.is-short .watch-frame,
.watch-frame.is-short { aspect-ratio: 9 / 16; }
.prose .watch-strip .watch-thumb,
.prose .watch-strip .watch-frame { aspect-ratio: 16 / 9; }
.watch-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.watch-facade:hover .watch-thumb img { transform: scale(1.03); }
.watch-embeds .ch-play i { width: 62px; height: 62px; font-size: 1.3rem; }
.prose .watch-strip .ch-play i { width: 44px; height: 44px; font-size: 0.95rem; }
.watch-facade:hover .ch-play { background: rgba(0, 0, 0, 0.26); }
.watch-facade:hover .ch-play i { transform: scale(1.08); background: #c4302b; }
.watch-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.watch-title {
    display: block;
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.35;
}
.prose .log-reads {
    list-style: none;
    padding: 0;
    margin: 0.2em 0 0;
}
.prose .log-reads li { margin: 0; }
.prose .log-reads li + li { margin-top: 0; }
.prose .log-reads a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    text-decoration: none;
}
.prose .log-reads li:last-child a { border-bottom: 1px solid var(--border); }
.prose .log-reads time {
    flex: 0 0 auto;
    color: var(--ink-dim);
    font-size: 0.82rem;
    white-space: nowrap;
}
.prose .log-reads a:hover span { text-decoration: underline; }

.tools-band { padding-top: 40px; }
.daily-tools {
    border: 1px solid var(--border);
    background: var(--dim);
    padding: 16px 18px;
    margin: 28px 0 0;
}
.daily-tools h2 {
    margin: 0 0 8px;
    font-family: var(--head-font);
    font-size: 1.2rem;
    font-weight: 500;
}
.daily-tools p { margin: 0; }
.daily-tool + .daily-tool { margin-top: 16px; }
.nfl-note {
    margin: 0.4em 0 1.4em;
    padding: 8px 12px;
    border-left: 3px solid var(--border);
    background: var(--dim);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-dim);
}
.nfl-note p { margin: 0; }
.nfl-note a { color: inherit; }
.heard-note {
    margin: 0.8em 0 1.15em;
    padding: 8px 12px;
    border-left: 3px solid var(--border);
    background: var(--dim);
    font-size: 0.95rem;
}
.heard-note .tip-flag { margin: 0 0.45em 0 0; }
h3 .tip-flag { white-space: normal; }

.terms-dialog {
    width: min(40rem, calc(100% - 28px));
    max-height: calc(100% - 28px);
    margin: auto;
    padding: 22px 22px 18px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
}
.terms-dialog::backdrop { background: rgba(17, 17, 17, 0.55); }
.terms-dialog h2 { margin: 0 0 8px; font-size: 1.45rem; }
.terms-body {
    max-height: min(52vh, 26rem);
    overflow: auto;
    margin: 8px 0 12px;
    padding-right: 4px;
}
.terms-body p { margin: 0 0 0.85em; }
.terms-status { color: var(--ink-dim); margin: 0 0 12px; }
.terms-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.route-pins a.pin-country {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.route-pins a.pin-country:hover { background: transparent; text-decoration: underline; }
.dest-card-media { display: block; }
.dest-card h3 a { color: inherit; text-decoration: none; }
.dest-subs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
}
.dest-subs a {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--border);
    text-decoration: none;
    font-size: 0.88rem;
}
.dest-subs a:hover { background: var(--dim); }
.dest-card:hover h3 { text-decoration: none; }
.dest-card h3 a:hover { text-decoration: underline; }

@media (max-width: 800px) {
    .dest-cards { grid-template-columns: 1fr; }
    .tool-strip { grid-template-columns: 1fr 1fr; }
    .at-a-glance dl { grid-template-columns: 1fr; gap: 2px 0; }
    .at-a-glance dt { margin-top: 10px; }
}
@media (max-width: 520px) {
    a.map-spot,
    .map-spot summary { font-size: 0.62rem; padding: 3px 6px; }
    .tool-strip { grid-template-columns: 1fr; }
    .prose .watch-strip .watch-embed { flex-basis: 78%; width: 78%; }
    .prose .log-reads a { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   Guest guide (/ranch/guestguide). Unlisted reference page. These classes
   are not used by the public ranch listing.
   ========================================================================== */

.gg-page { scroll-padding-top: 9rem; }
.gg-page h2[id],
.gg-page h3[id] { scroll-margin-top: 9rem; }

.gg-contents {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 28px 24px 6px;
    scroll-margin-top: 9rem;
}
.gg-contents-box {
    border: 1px solid var(--border);
    background: var(--dim);
    padding: 18px 22px 12px;
}
.gg-contents h2 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 8px;
}
.gg-contents ol {
    margin: 0;
    padding-left: 1.25em;
    columns: 1;
}
.gg-contents li { break-inside: avoid; }
.gg-contents a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    text-decoration: none;
}
.gg-contents a:hover { text-decoration: underline; }

.gg-toc {
    position: sticky;
    top: 68px;
    z-index: 160;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.gg-toc-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gg-toc-label {
    flex: 0 0 auto;
    position: sticky;
    left: 0;
    z-index: 1;
    font-family: var(--head-font);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 12px;
    background: var(--dark);
    color: #fff;
}
.gg-toc ol {
    list-style: none;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
}
.gg-toc ol::-webkit-scrollbar { display: none; }
.gg-toc li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    white-space: nowrap;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 999px;
}
.gg-toc li a:hover,
.gg-toc li a:focus-visible { background: var(--dim); }

.gg-back { display: none; }

.gg-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.gg-section a { text-underline-offset: 3px; }
.gg-subhead {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 500;
    color: var(--ink-dim);
    margin: 32px 0 14px;
}
.gg-ask {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--head-font);
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    color: var(--ink);
    margin-top: 36px;
}
.gg-welcome .section-title { margin-bottom: 16px; }
.gg-welcome .section-intro { margin-bottom: 26px; }

.gg-quick {
    border: 1px solid var(--border);
    background: #fff;
    padding: 16px 20px 4px;
    margin: 0 auto 18px;
    max-width: 760px;
    text-align: left;
}
.gg-quick h3 {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.gg-quick ul { list-style: none; margin: 0; padding: 0; }
.gg-quick li { border-top: 1px solid var(--border); }
.gg-quick a,
.gg-quick li > span {
    display: block;
    margin: 0;
    padding: 11px 0;
    text-decoration: none;
    color: var(--ink);
    line-height: 1.45;
}
.gg-quick a:hover { text-decoration: underline; }
.gg-quick strong { font-weight: 500; }

.gg-alert {
    background: var(--dark);
    color: #fff;
    padding: 16px 20px;
    margin: 0 auto;
    max-width: 760px;
    text-align: left;
}
.gg-alert p { margin: 0; line-height: 1.5; }
.gg-alert a { color: #fff; font-weight: 500; }

.gg-hottub {
    border: 2px solid var(--ink);
    background: #fff;
    padding: 6px 22px 8px;
    margin: 0 0 28px;
}
.gg-hottub > p { margin: 4px 0 18px; }
.gg-points {
    margin: 8px 0 0;
    padding-left: 1.2em;
    max-width: 68ch;
}
.gg-points li { margin: 0.7em 0; line-height: 1.5; }

.gg-video {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 8px auto 0;
    aspect-ratio: 16 / 9;
    background: var(--dark);
}
.gg-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.gg-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 16px;
    margin-top: 8px;
}
.gg-figure { margin: 0; }
.gg-figure img { width: 100%; height: auto; background: var(--dim); }
.gg-figure figcaption {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--ink-dim);
    margin-top: 8px;
}
.gg-credit { display: block; margin-top: 3px; font-size: 0.78rem; }
.gg-credit a { color: inherit; }

.gg-banner { margin: 0; background: #000; }
.gg-banner img {
    width: 100%;
    height: min(46vw, 320px);
    object-fit: cover;
    object-position: center 42%;
}
.gg-banner figcaption {
    background: var(--dark);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    text-align: center;
    padding: 10px 16px 16px;
}
.gg-banner a { color: #fff; }

.gg-steps { list-style: none; margin-top: 6px; }
.gg-steps > li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.gg-steps > li:last-child { border-bottom: 0; }
.gg-steps .n {
    font-family: var(--head-font);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
}
.gg-steps h3 { font-size: 1.05rem; margin-bottom: 0.25em; }
.gg-steps p { color: var(--ink-dim); font-size: 0.96rem; }

.gg-call {
    border: 1px solid var(--border);
    background: #fff;
    padding: 22px 22px 24px;
}
.gg-call .who {
    font-family: var(--head-font);
    font-size: 1.35rem;
    margin: 4px 0;
}
.gg-call .phone {
    display: inline-block;
    font-family: var(--head-font);
    font-size: clamp(1.7rem, 5vw, 2.2rem);
    letter-spacing: 0;
    text-decoration: none;
    margin: 8px 0 4px;
}
.gg-call .phone:hover { text-decoration: underline; }
.gg-hours { list-style: none; }
.gg-hours li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}
.gg-hours li:last-child { border-bottom: 0; }
.gg-hours a { text-decoration: none; }
.gg-hours a:hover { text-decoration: underline; }

.gg-credits { list-style: none; }
.gg-credits li {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.gg-credits li:last-child { border-bottom: 0; }
.gg-credits strong { font-weight: 500; }

@media (min-width: 700px) {
    .gg-contents ol { columns: 2; column-gap: 36px; }
}

@media (max-width: 860px) {
    .gg-toc { top: 56px; }
    .gg-contents { scroll-margin-top: 8rem; }
    .gg-page,
    .gg-page h2[id],
    .gg-page h3[id] { scroll-padding-top: 8rem; scroll-margin-top: 8rem; }
}

@media (max-width: 720px) {
    .gg-back {
        display: inline-flex;
        align-items: center;
        position: fixed;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 180;
        background: var(--dark);
        color: #fff;
        text-decoration: none;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 12px 16px;
        min-height: 44px;
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    }
    .gg-page .site-footer { padding-bottom: 88px; }
}

@media print {
    .gg-toc, .gg-back, .gg-contents { display: none; }
}

/* Responsive photos: the picture wrapper should not shrink the image. */
figure picture,
.inline-img picture,
.prose picture,
.gg-figure picture,
.dest-card-media picture,
.chart-figure picture {
    display: block;
    width: 100%;
}

.substack-embed {
    margin: 22px auto 0;
    max-width: 480px;
}
.prose .substack-embed { margin-left: 0; }
.substack-embed iframe {
    display: block;
    width: 100%;
    max-width: 480px;
    height: 320px;
    border: 1px solid var(--border);
    background: #fff;
}
.author-box {
    margin-top: 2em;
    padding-top: 1.1em;
    border-top: 1px solid var(--border);
}
.author-box h2 {
    margin-top: 0 !important;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.convert-stack { margin-top: 2.2em; }
.convert-stack h2 { margin-top: 1.4em; }
.convert-stack .fp-actions { margin-top: 0.4em; }