/* ===================================================================
   TRAWELLADVISOR: "THE DEPARTURES BOARD" WORLD, TICKET HERO
   One unignorable object (a boarding pass the visitor fills in) on a
   bright, plain page. The owner swapped the board hero for the ticket
   on 2026-09-27; the split-flap tiles survive as the pass's airport code.
   Colors sampled from the approved comp (.impeccable/mocks/home/b-trip-builder.png);
   the comp's turquoise (#00B0C0) was darkened to pass contrast on white.
   =================================================================== */

@font-face {
    font-family: 'Anton';
    src: url('/assets/fonts/anton-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oswald';
    src: url('/assets/fonts/oswald-normal.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('/assets/fonts/public-sans-normal.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('/assets/fonts/public-sans-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ground and ink */
    --ground: #FFFFFF;
    --ink: #0B0B0B;
    --ink-soft: #2B2B2B;
    --muted: #5A5A5A;
    --hair: #E3E3E3;
    --wash: #F5F5F3;
    --paper-edge: #CFCFCF;
    --field-rule: #9A9A9A;

    /* the board */
    --board: #151515;
    --board-rule: #2F2F2F;
    --board-ink: #F2F2F2;
    --board-soft: #D6D6D6;
    --board-muted: #BDBDBD;
    --tile-pin: #4A4A4A;
    --tile-top: #262626;
    --tile-bot: #1D1D1D;
    --flap: #F0A800;
    --flap-dim: #C9C9C9;

    /* the pass */
    --stub: #FEC128;
    --stub-lift: #FFD25E;

    /* the sea: display turquoise (3.3:1 on white, large text only) and text turquoise (5.1:1 on the wash) */
    --sea: #009DAB;
    --sea-ink: #00737F;

    /* review stars on light grounds: 4.1:1 on white, 3.8:1 on the wash */
    --star: #A87200;
    /* form errors: 6.6:1 on white */
    --error: #B42318;

    --display: 'Anton', 'Arial Narrow', sans-serif;
    --flapface: 'Oswald', 'Arial Narrow', sans-serif;
    --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --wrap: 1320px;
    --gutter: clamp(16px, 4vw, 40px);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------
   Base and browser surfaces
   ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    scrollbar-color: var(--board) var(--wash);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 400 1.0625rem/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
    caret-color: var(--sea-ink);
}

::selection { background: var(--stub); color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }
/* hidden always wins over a component's own display */
[hidden] { display: none !important; }

a { color: var(--sea-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--sea-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* keeps a hyphenated keyword ("All-Inclusive") from breaking at its hyphen */
.nowrap { white-space: nowrap; }

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

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -60px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font: 600 1rem/1 var(--body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.25s var(--ease-out);
}
.btn:hover { background: #2E2E2E; text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--big {
    min-height: 60px;
    padding: 0 34px;
    border-radius: 14px;
    font-size: 1.0625rem;
}
/* a long destination button wraps on narrow phones instead of pushing the page wide */
@media (max-width: 400px) {
    .btn--big { white-space: normal; text-align: center; padding: 14px 24px; }
}
.btn__label { text-wrap: balance; }


.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--hair); }

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 76px;
}

/* The owner's TraWella logo: gold script on a turquoise map, set as an
   object on the white paper, never recoloured or boxed. */
.brand {
    display: block;
    flex: none;
    margin-right: auto;
    padding: 6px 0;
    line-height: 0;
    border-radius: 6px;
}
.brand img { display: block; width: auto; height: 58px; }

.site-nav > ul {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav ul { margin: 0; padding: 0; list-style: none; }

.site-nav a,
.site-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    border: 0;
    background: linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 6px) / 0 2px no-repeat;
    color: var(--ink);
    font: 500 0.975rem/1.2 var(--body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-size 0.3s var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-nav__trigger:hover,
.site-nav__trigger[aria-expanded="true"],
.has-menu:has([aria-current="page"]) > .site-nav__trigger { background-size: 100% 2px; }
.site-nav__trigger svg { flex: none; width: 12px; height: 8px; overflow: visible; transition: transform 0.25s var(--ease-out); }
.site-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* the Trips menu: a white drop panel under the header */
.site-header .wrap { position: relative; }
.menu {
    position: absolute;
    top: calc(100% - 4px);
    right: var(--gutter);
    display: none;
    grid-template-columns: 170px 170px 230px;
    gap: 8px 28px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 8px;
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.25);
}
.has-menu.is-open .menu { display: grid; }
.menu__head { margin: 0 0 4px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.menu__head + ul + .menu__head { margin-top: 14px; }
.menu li a { display: block; padding: 7px 0; background-position: 0 calc(100% - 3px); }
.site-nav .menu__deal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 8px;
    background: var(--board);
    color: #fff;
    white-space: normal;
}
.menu__deal strong { font: 400 1.5rem/1 var(--display); letter-spacing: 0.01em; }
.menu__deal span { color: var(--board-soft); font-size: 0.875rem; line-height: 1.4; }
.site-nav .menu__deal:hover { background: #262626; }

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    margin-left: -8px;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 859px) {
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; }
    .site-header .btn { order: 2; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        background: #fff;
        border-bottom: 1px solid var(--hair);
        box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.25);
        display: none;
    }
    .site-nav.is-open { display: block; }
    .site-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px var(--gutter) 20px;
    }
    .site-nav a,
    .site-nav__trigger {
        display: flex;
        width: 100%;
        padding: 14px 0;
        font-size: 1.125rem;
        border-bottom: 1px solid var(--hair);
        background: none;
    }
    .site-nav__trigger { justify-content: space-between; }
    .menu {
        position: static;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 0 14px 14px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .menu li a { padding: 11px 0; font-size: 1.0625rem; }
    .menu__head { margin-top: 10px; }
    .site-nav .menu__deal { margin-top: 12px; border-bottom: 0; }
}

@media (max-width: 480px) {
    .site-header .wrap { gap: 10px; min-height: 64px; }
    .brand img { height: 46px; }
    .site-header .btn { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
}

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

.hero { padding: clamp(24px, 3.4vw, 44px) 0 0; }

.hero__top {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
    gap: 20px 48px;
    align-items: center;
}

.hero h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.4rem, 1rem + 2.75vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.hero h1 .free { display: block; color: var(--sea); }
@media (min-width: 860px) {
    .hero h1 .line { display: block; }
}

.hero__lede {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(1.0625rem, 0.9rem + 0.3vw, 1.1875rem);
    line-height: 1.5;
    color: var(--ink);
}
.hero__lede strong { font-weight: 600; }

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

/* -------------------------------------------------------------------
   The ticket (trip builder): a boarding pass the visitor fills in.
   Its stub is the primary action and carries the trip to the contact form.
   ------------------------------------------------------------------- */

.ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    margin-top: clamp(22px, 2.6vw, 32px);
    /* the first shadow is a hairline that follows the ticket cuts */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 20px 26px rgba(0, 0, 0, 0.13));
}

/* Ticket cuts are masks: each corner takes a radius (--tl --tr --bl --br)
   and gets a concave bite of that size. */
.ticket__main,
.ticket__stub,
.dest-hero__panel,
.trip__main,
.trip__stub {
    --tl: 0px; --tr: 0px; --bl: 0px; --br: 0px;
    -webkit-mask:
        radial-gradient(circle at 0 0, #0000 var(--tl), #000 calc(var(--tl) + 0.5px)) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle at 100% 0, #0000 var(--tr), #000 calc(var(--tr) + 0.5px)) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle at 0 100%, #0000 var(--bl), #000 calc(var(--bl) + 0.5px)) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle at 100% 100%, #0000 var(--br), #000 calc(var(--br) + 0.5px)) 100% 100% / 51% 51% no-repeat;
    mask:
        radial-gradient(circle at 0 0, #0000 var(--tl), #000 calc(var(--tl) + 0.5px)) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle at 100% 0, #0000 var(--tr), #000 calc(var(--tr) + 0.5px)) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle at 0 100%, #0000 var(--bl), #000 calc(var(--bl) + 0.5px)) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle at 100% 100%, #0000 var(--br), #000 calc(var(--br) + 0.5px)) 100% 100% / 51% 51% no-repeat;
}

.ticket__main {
    --tl: 12px; --bl: 12px; --tr: 16px; --br: 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* The printed header strip, as on an airline pass */
.ticket__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 8px clamp(18px, 2.4vw, 32px);
    background: var(--board);
    color: #F2F2F2;
    font: 500 0.875rem/1 var(--flapface);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.ticket__head > svg { width: 18px; height: 18px; flex: none; }
.ticket__hint {
    margin-left: auto;
    color: var(--flap-dim);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

.ticket__pause {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--board-rule);
    border-radius: 6px;
    background: transparent;
    color: var(--flap-dim);
    font: 500 0.75rem/1 var(--flapface);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
}
.ticket__pause:hover { color: #fff; border-color: #555; }
.ticket__pause[hidden] { display: none; }
.no-js .ticket__pause,
.no-js .stepper__btn { display: none; }
.ticket__pause svg { width: 12px; height: 12px; }

.ticket__body {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
    padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 32px) clamp(16px, 2vw, 22px);
}

.ticket__label {
    display: block;
    margin: 0 0 8px;
    font: 700 0.6875rem/1 var(--body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* selects printed on the ticket: the value, a dotted rule, a caret */
.ticket select {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0 1.05em 0.06em 0;
    border: 0;
    border-bottom: 2px dotted #9A9A9A;
    border-radius: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235A5A5A'/%3E%3C/svg%3E") no-repeat right 0.1em center / 0.5em auto;
    color: var(--ink);
    cursor: pointer;
    field-sizing: content;   /* each select is as wide as its current value */
}
.ticket select:hover { border-bottom-color: var(--ink); }

/* Route: FROM, the flight path, TO (flip tiles), and the destination */
.ticket__route {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px clamp(16px, 2vw, 28px);
}

.ticket__code-select {
    font: 400 clamp(2.4rem, 1.5rem + 2.4vw, 4.1rem)/1 var(--display);
    letter-spacing: 0.01em;
}

.ticket__path {
    position: relative;
    flex: 1 1 60px;
    min-width: 60px;
    height: 2px;
    margin-bottom: calc(clamp(2.4rem, 1.5rem + 2.4vw, 4.1rem) * 0.48);
    background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px);
}
.ticket__path svg {
    position: absolute;
    right: -4px;
    top: 50%;
    width: 26px;
    height: 26px;
    color: var(--ink);
    background: #fff;
    transform: translateY(-50%);
}

.ticket__to .flaps {
    --tile-w: clamp(1.9rem, 1.1rem + 1.8vw, 2.8rem);
    --tile-h: calc(var(--tile-w) * 1.62);
    --tile-fs: calc(var(--tile-w) * 1.36);
    display: flex;
    gap: 3px;
}
.ticket__code-fallback { font: 400 3rem/1 var(--display); }
.js .ticket__code-fallback { display: none; }

.ticket__city { min-width: 0; }
.ticket__city-select {
    max-width: 100%;
    font: 700 clamp(1.25rem, 1rem + 0.7vw, 1.625rem)/1.2 var(--body);
}
.ticket__country {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* Fields: nights, travelers, the fee, the barcode */
.ticket__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px clamp(24px, 3.4vw, 52px);
    padding-top: 16px;
    border-top: 2px solid var(--ink);
}

.ticket__value,
.ticket__value-select {
    font: 400 2rem/1 var(--display);
    text-transform: uppercase;
}

.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper select { text-align: center; padding-right: 0.9em; }
.stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid #CFCFCF;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stepper__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper__btn:active { transform: scale(0.96); }
.stepper__btn svg { width: 18px; height: 18px; }

.ticket__barcode {
    height: 46px;
    width: auto;
    margin-left: auto;
    color: var(--ink);
}

/* The stub: the tear-off that sends the trip */
.ticket__stub {
    --tl: 16px; --bl: 16px; --tr: 12px; --br: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 18px;
    background: var(--stub);
    border-left: 2px dashed rgba(0, 0, 0, 0.45);
    color: var(--ink);
    font: 500 1.375rem/1.2 var(--flapface);
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.35s var(--ease-out), background-color 0.2s ease;
}
.ticket__stub svg { width: 28px; height: 28px; transition: transform 0.35s var(--ease-out); }
.ticket__stub small {
    font: 500 0.8125rem/1.35 var(--body);
    letter-spacing: 0;
    text-transform: none;
}
.ticket__stub:hover {
    background: #FFD25E;
    transform: translateX(6px) rotate(1.4deg);
    text-decoration: none;
}
.ticket__stub:hover svg { transform: translateX(4px); }
.ticket__stub:focus-visible { outline-color: var(--ink); outline-offset: -8px; }

@media (max-width: 999px) {
    .ticket { grid-template-columns: minmax(0, 1fr) 11rem; }
    .ticket__hint { display: none; }
    .ticket__pause { margin-left: auto; }
    .ticket__stub { font-size: 1.1875rem; }
}

@media (max-width: 719px) {
    .ticket { grid-template-columns: 1fr; }
    .ticket__main { --tr: 12px; --br: 16px; --bl: 16px; }
    .ticket__stub {
        --tl: 16px; --tr: 16px; --bl: 12px; --br: 12px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 12px;
        min-height: 88px;
        border-left: 0;
        border-top: 2px dashed rgba(0, 0, 0, 0.45);
    }
    .ticket__stub small { flex-basis: 100%; }
    .ticket__stub:hover { transform: translateY(3px); }
    .ticket__barcode { display: none; }
    .ticket__fields { gap: 16px 28px; }
}

/* Closing: the same ticket, compact, printed with the visitor's trip */
.ticket--compact {
    grid-template-columns: minmax(0, 1fr) 12rem;
    max-width: 820px;
    margin-top: 32px;
    filter: none;
}
.ticket--compact .ticket__main { justify-content: center; padding: 22px clamp(20px, 3vw, 32px); }
.ticket__summary-route {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
    color: var(--ink);
    font: 400 clamp(2rem, 1.3rem + 1.8vw, 2.9rem)/1 var(--display);
}
.ticket__summary-route svg { width: 0.6em; height: 0.6em; flex: none; }
.ticket__summary-line { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.ticket--compact .ticket__stub { font-size: 1.125rem; }

@media (max-width: 719px) {
    .ticket--compact { grid-template-columns: 1fr; }
}

/* Flip tiles: the airport code on the ticket */
.tile {
    position: relative;
    width: var(--tile-w);
    height: var(--tile-h);
    border-radius: 3px;
    perspective: 300px;
    font: 700 var(--tile-fs) / var(--tile-h) var(--flapface);
    color: var(--flap);
    text-align: center;
    text-transform: uppercase;
}
.tile--blank { color: transparent; }

.tile .half {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 3px;
    backface-visibility: hidden;
}
.tile .half--top { background: var(--tile-top); clip-path: inset(0 0 50% 0); }
.tile .half--bot { background: var(--tile-bot); clip-path: inset(50% 0 0 0); }

/* the hinge seam, with its two pins */
.tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1.5px);
    height: 3px;
    background:
        radial-gradient(circle at 2px 50%, #4A4A4A 1.3px, transparent 1.8px),
        radial-gradient(circle at calc(100% - 2px) 50%, #4A4A4A 1.3px, transparent 1.8px),
        linear-gradient(transparent 0.5px, #0A0A0A 0.5px, #0A0A0A 2.5px, transparent 2.5px);
    z-index: 3;
}

.tile .half--flip-top {
    z-index: 2;
    transform-origin: 50% 50%;
    animation: flap-top var(--flip, 90ms) ease-in forwards;
}
.tile .half--flip-bot {
    z-index: 2;
    transform-origin: 50% 50%;
    transform: rotateX(90deg);
    animation: flap-bot var(--flip, 90ms) ease-out var(--flip, 90ms) forwards;
}

@keyframes flap-top { to { transform: rotateX(-90deg); } }
@keyframes flap-bot { to { transform: rotateX(0deg); } }

/* -------------------------------------------------------------------
   Proof row
   ------------------------------------------------------------------- */

.proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.975rem;
}
.proof li { padding: 0 22px; border-left: 1px solid #CFCFCF; line-height: 1.35; }
.proof li:first-child { border-left: 0; }
.proof a { color: inherit; text-decoration-color: #BDBDBD; }
.stars { display: inline-flex; gap: 2px; vertical-align: -3px; margin-right: 8px; color: var(--star); }
.stars svg { width: 18px; height: 18px; }

/* below the side-by-side builder the row would wrap mid-list, so it stacks */
@media (max-width: 1279px) {
    .proof { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 8px; }
    .proof li { padding: 0; border-left: 0; }
}

/* -------------------------------------------------------------------
   Photo band
   ------------------------------------------------------------------- */

.band {
    position: relative;
    margin: clamp(26px, 3.4vw, 40px) 0 0;
}
.band img {
    width: 100%;
    height: clamp(230px, 30vw, 440px);
    object-fit: cover;
    object-position: 50% 55%;
}

/* -------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------- */

.section { padding: clamp(64px, 8vw, 116px) 0; }
.section--wash { background: var(--wash); }

.section h2 {
    margin: 0 0 0.45em;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.section__intro {
    max-width: 62ch;
    margin: 0 0 clamp(32px, 4vw, 52px);
    font-size: 1.125rem;
    color: var(--ink-soft);
}

.section__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: clamp(36px, 4vw, 52px);
}
.section__cta p { margin: 0; color: var(--muted); }

/* How a trip happens: one route line, four stops */
.route {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: stop;
}
.route li {
    position: relative;
    padding: 34px 28px 0 0;
    border-top: 3px solid var(--ink);
    counter-increment: stop;
}
.route li::before {
    content: counter(stop);
    position: absolute;
    top: -21px;
    left: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font: 400 1.1rem/1 var(--display);
}
.route h3 {
    margin: 0 0 8px;
    font: 700 1.1875rem/1.25 var(--body);
}
.route p { margin: 0; color: var(--ink-soft); max-width: 30ch; }

@media (max-width: 859px) {
    .route { grid-template-columns: 1fr; }
    .route li {
        padding: 0 0 30px 60px;
        border-top: 0;
        border-left: 3px solid var(--ink);
        margin-left: 18px;
    }
    .route li:last-child { border-left-color: transparent; padding-bottom: 0; }
    .route li::before { top: 0; left: -21px; }
}

.cost {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 24px 64px;
    margin-top: clamp(56px, 6vw, 88px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--hair);
}
.cost h3 {
    margin: 0;
    font: 400 clamp(1.9rem, 1.2rem + 2vw, 2.9rem)/1.04 var(--display);
}
.cost p { margin: 0 0 1em; font-size: 1.125rem; color: var(--ink-soft); max-width: 58ch; }
.cost p:last-of-type { margin-bottom: 0; }

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

/* Meet Kristina */
.kristina {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
.kristina__photo {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--wash);
}
.kristina__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.kristina__body > p { font-size: 1.125rem; color: var(--ink-soft); max-width: 60ch; }

.creds-group { margin: 26px 0 0; }
.creds-group h3 {
    margin: 0 0 8px;
    font: 700 0.9375rem/1.3 var(--body);
    color: var(--ink);
}
.creds {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ink);
}
.creds li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 20px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--hair);
}
.creds strong { font-weight: 600; }
.creds span { color: var(--muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.kristina__more { margin: 18px 0 0; }

@media (max-width: 859px) {
    .kristina { grid-template-columns: 1fr; }
    .kristina__photo { max-width: 420px; }
    .creds li { grid-template-columns: 1fr; gap: 2px; }
}

/* Reviews */
.reviews {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.review { margin: 0; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; }
.review--lead blockquote p {
    font: 500 clamp(1.4rem, 1.05rem + 1.1vw, 2rem)/1.35 var(--body);
    letter-spacing: -0.005em;
    text-wrap: pretty;
}
.review--lead blockquote p::before { content: "\201C"; }
.review--lead blockquote p::after { content: "\201D"; }
.reviews__side { display: grid; gap: 32px; }
.reviews__side .review { padding-top: 24px; border-top: 1px solid var(--hair); }
.reviews__side .review:first-child { padding-top: 0; border-top: 0; }
.reviews__side blockquote p { font-size: 1.0625rem; color: var(--ink-soft); }
.reviews__side blockquote p::before { content: "\201C"; }
.reviews__side blockquote p::after { content: "\201D"; }
.review figcaption {
    margin-top: 14px;
    font-size: 0.9375rem;
    color: var(--muted);
}
.review figcaption strong { color: var(--ink); font-weight: 600; }

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

/* Destinations */
.dests { margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--ink); }
.dest a {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 16rem;
    gap: 10px 36px;
    align-items: center;
    padding: clamp(22px, 2.6vw, 34px) 0;
    border-top: 2px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* the wash reaches past the rules on both sides without moving the layout */
.dest a:hover { background: #ECECE8; box-shadow: -16px 0 0 #ECECE8, 16px 0 0 #ECECE8; }
.dest h3 {
    margin: 0;
    font: 400 clamp(2rem, 1.3rem + 2vw, 3rem)/1 var(--display);
}
.dest__codes {
    display: flex;
    gap: 5px;
    margin-top: 12px;
}
.dest__codes span {
    padding: 5px 8px 4px;
    border-radius: 4px;
    background: var(--board);
    color: var(--flap);
    font: 600 0.95rem/1 var(--flapface);
    letter-spacing: 0.14em;
}
.dest p { margin: 0; color: var(--ink-soft); }
.dest p strong { color: var(--ink); font-weight: 600; }
.dest__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    font-weight: 600;
    white-space: nowrap;
}
.dest__go svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-out); }
.dest a:hover .dest__go svg { transform: translateX(4px); }

.dests-also { margin: 24px 0 0; color: var(--ink-soft); }

@media (max-width: 859px) {
    .dest a { grid-template-columns: 1fr; }
    .dest__go { justify-self: start; }
}

/* FAQ */
.faq { border-top: 2px solid var(--ink); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    font: 600 1.1875rem/1.35 var(--body);
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; transition: transform 0.3s var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; max-width: 64ch; color: var(--ink-soft); font-size: 1.0625rem; }

/* Blog rows */
.reads { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.reads li { border-bottom: 1px solid var(--hair); }
.reads a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 28px;
    align-items: baseline;
    padding: 20px 0;
    color: var(--ink);
    text-decoration: none;
}
.reads a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.reads h3 { margin: 0; font: 600 1.1875rem/1.35 var(--body); }
.reads p { margin: 4px 0 0; color: var(--muted); font-size: 0.975rem; }
.reads__go svg { width: 20px; height: 20px; }

@media (max-width: 719px) {
    .reads a { grid-template-columns: 1fr; }
    .reads__go { display: none; }
}

/* Closing board */
.closing {
    background: var(--board);
    color: #fff;
    padding: clamp(64px, 8vw, 110px) 0;
}
.closing h2 {
    margin: 0 0 16px;
    font: 400 clamp(2.3rem, 1.3rem + 3vw, 3.9rem)/1.02 var(--display);
    max-width: 18ch;
}
.closing .wrap > p { margin: 0; color: #D6D6D6; font-size: 1.125rem; max-width: 52ch; }
.closing .section__cta p { color: #BDBDBD; }
.closing .section__cta a { color: #fff; }


/* -------------------------------------------------------------------
   Destination pages (Mexico, Dominican Republic, Jamaica)
   Hero: a full-bleed real photo with a die-cut paper panel over its foot
   (airport code, keyword H1, the action, one proof line); the paragraph and
   certificate follow. The fillable ticket closes the page, preset to the
   country's areas.
   ------------------------------------------------------------------- */

/* The hero is immersive: the photo runs edge to edge, and a white die-cut
   paper panel overlapping its foot carries the airport code, the H1, the one
   action and a single proof line. The paragraph and the fuller proof sit just
   below, so the first screen holds the photo and three short things. */
.dest-hero { position: relative; padding: 0; }

.dest-hero__media { margin: 0; }
.dest-hero__media img {
    display: block;
    width: 100%;
    height: clamp(520px, 70vh, 760px);
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
}

.dest-hero__card {
    position: relative;
    margin-top: calc(-1 * clamp(110px, 16vh, 180px));
    /* the shadow follows the panel's die-cut corners */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 20px 26px rgba(0, 0, 0, 0.13));
}

.dest-hero__panel {
    --tl: 12px; --tr: 12px; --bl: 12px; --br: 12px;
    width: min(600px, 100%);
    padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 38px) clamp(22px, 2.6vw, 30px);
    background: #fff;
}

.dest-hero__code {
    display: block;
    margin: 0 0 6px;
    font: 400 clamp(3.6rem, 2.2rem + 4vw, 6rem)/0.88 var(--display);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.dest-hero h1 {
    margin: 0;
    font: 400 clamp(1.9rem, 1.1rem + 1.7vw, 2.6rem)/1.04 var(--display);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
/* the comp's two-line setting, wherever the panel is wide enough to hold it */
@media (min-width: 720px) {
    .dest-hero h1 .line { display: block; }
}

.dest-hero__panel .btn { margin-top: 22px; }

.dest-hero__mini {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* Under the hero: the paragraph, then the fuller proof */
.dest-intro { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.dest-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 28px clamp(32px, 5vw, 80px);
    align-items: start;
}
.dest-intro__lede {
    margin: 0;
    max-width: 38ch;
    color: var(--ink);
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
    line-height: 1.45;
}

.cert { display: flex; align-items: center; gap: 14px; margin: 0; }
.cert img {
    width: 104px;
    height: auto;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--paper-edge);
    border-radius: 4px;
}
.cert figcaption { max-width: 28ch; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.35; }
.cert figcaption strong { display: block; color: var(--ink); font-weight: 600; }

/* a verbatim review line with stars */
.dest-hero__proof {
    margin: 18px 0 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

@media (max-width: 859px) {
    .dest-intro__grid { grid-template-columns: 1fr; }
}

/* From tablet up the panel rests on the photo itself, near its foot, so the
   first screen is the photo with the ticket laid on it. A page whose subject
   stands left of centre can move the panel right (dest-hero--panel-right). */
@media (min-width: 860px) {
    .dest-hero > .wrap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: clamp(24px, 3vw, 44px);
    }
    .dest-hero__card { margin-top: 0; }
    .dest-hero--panel-right .dest-hero__card { display: flex; justify-content: flex-end; }
}

@media (max-width: 859px) {
    .dest-hero__media img { height: clamp(300px, 52vh, 480px); }
    .dest-hero__card { margin-top: -56px; }
}

/* Areas: rows on rules, each with its airport code chip */
.areas { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.areas li {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 8px 40px;
    padding: clamp(20px, 2.4vw, 30px) 0;
    border-bottom: 1px solid var(--hair);
}
.areas h3 { margin: 0; font: 400 clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem)/1.05 var(--display); }
.areas p { margin: 0; max-width: 62ch; color: var(--ink-soft); }

@media (max-width: 859px) {
    .areas li { grid-template-columns: 1fr; }
}

/* Reasons: three chunks on a heavy rule, no boxes */
.reasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px clamp(24px, 3vw, 48px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.reasons li { padding-top: 22px; border-top: 3px solid var(--ink); }
.reasons h3 { margin: 0 0 8px; font: 700 1.1875rem/1.3 var(--body); }
.reasons p { margin: 0; color: var(--ink-soft); }

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

/* four short reasons: four across, then two, then one */
.reasons--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) {
    .reasons--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
    .reasons--four { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------
   Priced trips: printed boarding passes for real quotes
   Each trip Kristina priced is a die-cut paper pass: the route in Anton
   with the plane, the hotel, the dates; a perforated paper stub carries
   the price, what is included and the ask. Paper stubs, never stub
   yellow (that stays the visitor's own trip). No tiles, no motion.
   ------------------------------------------------------------------- */

.trips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.trip {
    display: flex;
    flex-direction: column;
    /* the paper's edge on white: a hairline that follows the bites */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
}
.trip__main {
    --tl: 12px; --tr: 12px; --bl: 14px; --br: 14px;
    flex: 1;
    padding: 20px 22px 18px;
    background: #fff;
}
.trip__route {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font: 400 1.9rem/1 var(--display);
    letter-spacing: 0.01em;
}
.trip__route svg { width: 22px; height: 22px; transform: rotate(90deg); }
.trip h3 { margin: 0; font: 700 1.1875rem/1.3 var(--body); text-wrap: balance; }
.trip__facts { margin: 8px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.trip__stub {
    --tl: 14px; --tr: 14px; --bl: 12px; --br: 12px;
    padding: 18px 22px 22px;
    border-top: 2px dashed rgba(0, 0, 0, 0.45);
    background: #fff;
}
.trip__price { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.trip__price strong { margin: 0 2px; color: var(--ink); font: 400 2.1rem/1 var(--display); letter-spacing: 0.01em; }
.trip__incl { margin: 6px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.trip__breakdown { margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.trip__breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.trip__save { font-weight: 700; color: var(--ink); border-bottom: 0 !important; }
.trip .btn { margin-top: 16px; width: 100%; }

.trips__note { max-width: 78ch; margin: 22px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.trips__note--top { margin: 0 0 8px; }
.link-go { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.link-go svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-out); }
.link-go:hover svg { transform: translateX(4px); }

.trips-page { padding: 0 0 clamp(64px, 8vw, 110px); }
.trips-group { margin-top: clamp(36px, 4.5vw, 56px); padding-top: 22px; border-top: 2px solid var(--ink); }
.trips-group h2 { margin: 0; font: 400 clamp(1.9rem, 1.3rem + 1.4vw, 2.6rem)/1.04 var(--display); }
.trips-group__more { margin: 6px 0 20px; }

/* -------------------------------------------------------------------
   Inner pages: the page head every migrated page opens with
   A plain Anton title and one line under it, on white. No photo banner:
   the page's own content starts inside the first screen.
   ------------------------------------------------------------------- */

.page-head { padding: clamp(36px, 5vw, 76px) 0 clamp(24px, 3vw, 40px); }
.page-head h1 {
    margin: 0;
    max-width: 18ch;
    font: 400 clamp(2.6rem, 1.3rem + 3.6vw, 4.75rem)/0.98 var(--display);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.page-head__lede {
    margin: 16px 0 0;
    max-width: 48ch;
    color: var(--ink-soft);
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
    line-height: 1.45;
}

/* -------------------------------------------------------------------
   Blog index: a departures list of guides
   One ruled row per post: a 3:2 photo, the title in Anton, a muted
   category and date line under it (never a label above it), the excerpt
   and a drawn arrow. The whole row is the link, through the read link's
   stretched hit area. The featured post opens the list at double size.
   ------------------------------------------------------------------- */

.posts { padding: 0 0 clamp(64px, 8vw, 112px); }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px clamp(14px, 2vw, 28px);
    padding: 0 0 18px;
}
.filters__btn {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 2px no-repeat;
    color: var(--ink-soft);
    font: 500 1rem/1 var(--body);
    cursor: pointer;
    transition: background-size 0.3s var(--ease-out), color 0.2s ease;
}
.filters__btn:hover { color: var(--ink); background-size: 100% 1px; }
.filters__btn[aria-pressed="true"] { color: var(--ink); font-weight: 600; background-size: 100% 2px; }
.no-js .filters { display: none; }

.post-rows { margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--ink); }
.post-row {
    position: relative;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px clamp(24px, 3vw, 48px);
    align-items: start;
    padding: clamp(22px, 2.6vw, 32px) 0;
    border-top: 2px solid var(--ink);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.post-row:hover { background: #ECECE8; box-shadow: -16px 0 0 #ECECE8, 16px 0 0 #ECECE8; }
.post-row__img { position: relative; margin: 0; }
.post-row__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-row__badge {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 5px 9px 4px;
    border-radius: 4px;
    background: var(--ink);
    color: #fff;
    font: 600 0.8125rem/1 var(--body);
}
.post-row h2 {
    margin: 0;
    max-width: 30ch;
    font: 400 clamp(1.45rem, 1.1rem + 0.9vw, 1.95rem)/1.08 var(--display);
    text-wrap: balance;
}
.post-row__meta { margin: 10px 0 0; color: var(--muted); font-size: 0.9375rem; }
.post-row__excerpt { margin: 10px 0 0; max-width: 64ch; color: var(--ink-soft); }
.post-row__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.post-row__go svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-out); }
.post-row:hover .post-row__go svg { transform: translateX(4px); }
/* the read link's hit area covers the whole row */
.post-row__go::after { content: ""; position: absolute; inset: 0; }
.post-row__go:focus-visible { outline: none; }
.post-row:has(.post-row__go:focus-visible) { outline: 3px solid var(--sea-ink); outline-offset: 6px; border-radius: 4px; }

.post-row--featured { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.post-row--featured h2 { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1.02; }
.post-row--featured .post-row__excerpt { font-size: 1.125rem; }

@media (max-width: 859px) {
    .post-row--featured { grid-template-columns: 1fr; }
}
/* phones: a small photo beside the title, the excerpt under both */
@media (max-width: 599px) {
    .post-row:not(.post-row--featured) {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px 16px;
    }
    .post-row:not(.post-row--featured) .post-row__body { display: contents; }
    .post-row:not(.post-row--featured) h2 { grid-column: 2; grid-row: 1; align-self: center; font-size: 1.35rem; }
    .post-row:not(.post-row--featured) .post-row__img { grid-column: 1; grid-row: 1; }
    .post-row:not(.post-row--featured) :is(.post-row__meta, .post-row__excerpt, .post-row__go) { grid-column: 1 / -1; margin-top: 0; }
}

/* -------------------------------------------------------------------
   Blog posts: a simple blog layout (owner's request, 2026-10-01)
   "Simple WordPress blogs with images": a familiar article page inside
   the site's header and footer. Public Sans throughout, plain bold
   titles, the featured photo in the main column, soft boxes on the wash,
   related posts as photo cards, and a quiet sidebar beside the post
   (below it on phones). The post body keeps its original markup.
   ------------------------------------------------------------------- */

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) 300px;
    justify-content: center;
    gap: 40px clamp(40px, 5vw, 72px);
    align-items: start;
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(56px, 7vw, 96px);
}
@media (max-width: 1099px) {
    .blog-layout { grid-template-columns: minmax(0, 760px); }
}

.entry__head h1 {
    margin: 0;
    font: 700 clamp(1.95rem, 1.4rem + 1.7vw, 2.75rem)/1.15 var(--body);
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.entry__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.entry__avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.entry__meta a { color: var(--muted); }
.entry__meta a:hover { color: var(--ink); }

.entry__image { margin: 26px 0 32px; }
.entry__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }

.prose {
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.75;
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2em; }
.prose :is(h2, h3, h4) { color: var(--ink); text-wrap: balance; }
.prose h2 { margin: 1.9em 0 0.55em; font: 700 clamp(1.45rem, 1.2rem + 0.7vw, 1.75rem)/1.25 var(--body); letter-spacing: -0.01em; }
.prose h3 { margin: 1.6em 0 0.45em; font: 700 1.25rem/1.35 var(--body); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin: 0.4em 0; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose em { font-style: italic; }

/* photos: the column's width with soft corners, captions muted under them */
.prose img { width: 100%; margin: 1.8em 0; border-radius: 6px; }
.prose .post-img--portrait { width: auto; max-width: min(100%, 440px); max-height: 640px; margin-inline: auto; }
.prose .post-img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.8em 0; }
.prose .post-img-grid img { height: 100%; margin: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.prose .post-img-caption { margin: -1.1em 0 1.8em; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; text-align: center; }

/* boxes: tips, notes and the location card sit on the wash with soft corners */
.prose :is(.post-tip, .highlight-box, .location-card) {
    margin: 1.7em 0;
    padding: 18px 22px;
    border: 1px solid var(--hair);
    border-radius: 8px;
    background: var(--wash);
    font-size: 1.0625rem;
}
.prose :is(.highlight-box, .location-card) > :first-child { margin-top: 0; }
.prose :is(.highlight-box, .location-card) p:last-child { margin-bottom: 0; }

/* named-item lists keep a hairline between items */
.prose :is(.spot-detail, .destination-list, .mistakes-list) { margin: 1.3em 0 1.6em; padding: 0; list-style: none; }
.prose :is(.spot-detail, .destination-list, .mistakes-list) > li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.prose :is(.spot-detail, .destination-list, .mistakes-list) > li:first-child { border-top: 1px solid var(--hair); }
.prose .destination-list strong { display: block; }
.prose .mistakes-list h3 { margin: 0 0 4px; font-size: 1.125rem; }
.prose .mistakes-list p { margin: 0; }

/* the in-body quote request box */
.prose .post-contact-box {
    margin: 2em 0;
    padding: 24px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--board-ink);
}
.prose .post-contact-box h3 { margin-top: 0; color: #fff; }
.prose .post-contact-box p { color: var(--board-soft); }
.prose .post-contact-box .btn { background: #fff; color: var(--ink); }
.prose .post-contact-box .btn:hover { background: var(--board-ink); }

/* tables: light grid, header row on the wash; the wrapper scrolls on phones */
.prose .price-table-wrap { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--hair); border-radius: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.prose th { padding: 12px 14px; background: var(--wash); color: var(--ink); text-align: left; font-weight: 700; }
.prose td { padding: 12px 14px; border-top: 1px solid var(--hair); vertical-align: top; }
.prose .table-note { color: var(--muted); font-size: 0.9375rem; }

/* the Cancun coast list: place, drive time, note */
.prose .coast-map { margin: 1.8em 0; }
.prose .coast-map__title { margin-bottom: 10px; color: var(--ink); font-weight: 700; }
.prose .coast-map ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.prose .coast-map li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 16px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
}
.prose .cm-name { color: var(--ink); font-weight: 700; }
.prose .cm-time { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.prose .cm-note { grid-column: 1 / -1; font-size: 1rem; }

/* tags as small pills */
.prose .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2.4em 0 0; }
.prose .tag {
    padding: 4px 12px;
    border: 1px solid var(--hair);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.875rem;
    text-decoration: none;
}
.prose .tag:hover { border-color: var(--ink); color: var(--ink); }

/* the post's own call to action, then the author box */
.entry__cta {
    margin: 2.4em 0 0;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 8px;
    background: var(--wash);
}
.prose .entry__cta h2 { margin: 0 0 8px; }
.entry__cta p { margin: 0 0 20px; }
.entry__author {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 2.4em 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--hair);
    font-size: 1rem;
    line-height: 1.6;
}
.entry__author img { width: 72px; height: 72px; flex: none; margin: 0; border-radius: 50%; }
.entry__author p { margin: 0 0 6px; }
.prose .entry__author-name { color: var(--ink); font-weight: 700; }

/* related posts: photo cards */
.entry__related { margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--hair); }
.entry__related h2 { margin: 0 0 22px; font: 700 1.5rem/1.25 var(--body); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.card { position: relative; display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.card__meta { margin: 12px 0 0; color: var(--muted); font-size: 0.875rem; }
.card h3 { margin: 4px 0 0; font: 700 1.125rem/1.35 var(--body); }
.card__excerpt { margin: 8px 0 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }
.card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.card__go svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.card__go::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.card:hover .card__go svg { transform: translateX(3px); }

/* the sidebar: four quiet widgets */
.blog-side { display: grid; gap: 28px; font-size: 0.9375rem; line-height: 1.55; }
.widget { padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
.widget:last-child { border-bottom: 0; }
.widget h2 { margin: 0 0 12px; font: 700 1.0625rem/1.35 var(--body); color: var(--ink); }
.widget p { margin: 0 0 12px; color: var(--ink-soft); }
.widget--about img { width: 80px; height: 80px; margin-bottom: 14px; border-radius: 50%; }
.widget__more { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.widget__more svg { width: 16px; height: 16px; }
.widget--plan { padding: 22px; border: 0; border-radius: 8px; background: var(--ink); }
.widget--plan h2 { color: #fff; font-size: 1.125rem; }
.widget--plan p { color: var(--board-soft); }
.widget--plan .btn { background: #fff; color: var(--ink); }
.widget--plan .btn:hover { background: var(--board-ink); }
.widget__list { margin: 0; padding: 0; list-style: none; }
.widget__list li { padding: 8px 0; border-top: 1px solid var(--hair); }
.widget__list li:first-child { border-top: 0; padding-top: 0; }
.widget__list a { color: var(--ink); text-decoration: none; }
.widget__list a:hover { text-decoration: underline; }
.widget__list--cats span { color: var(--muted); }
@media (max-width: 1099px) {
    .blog-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding-top: 12px; border-top: 1px solid var(--hair); }
    .widget { border-bottom: 0; padding-bottom: 0; }
}

/* the closing band without a ticket: a heading, a line and one paper button */
.closing--plain .wrap > p { margin-bottom: 0; }
.btn--paper { background: #fff; color: var(--ink); }
.btn--paper:hover { background: var(--board-ink); }
.closing .section__cta .btn--paper { color: var(--ink); }

/* -------------------------------------------------------------------
   Service pages (services, Italy, solo): an opening statement, then
   split sections with a photo beside the content, alternating sides
   ------------------------------------------------------------------- */

.svc-intro { padding: 0 0 clamp(56px, 7vw, 96px); }
.svc-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 20px clamp(32px, 5vw, 80px);
    padding-top: clamp(28px, 3vw, 44px);
    border-top: 2px solid var(--ink);
}
.svc-intro h2 { margin: 0; font: 400 clamp(2rem, 1.3rem + 2vw, 3rem)/1.04 var(--display); text-wrap: balance; }
.svc-intro p { margin: 0; color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); line-height: 1.65; }

.svc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px clamp(36px, 5vw, 80px);
    align-items: center;
}
.svc--flip .svc__img { order: 2; }
.svc__img { margin: 0; }
.svc__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc__body h2 { margin: 0 0 10px; }
.svc__badge {
    display: inline-block;
    margin: 0 0 18px;
    padding: 4px 10px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.svc__body > p { margin: 0 0 14px; max-width: 60ch; color: var(--ink-soft); }
.svc__list { margin: 18px 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.svc__list li { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.svc__body .svc__dest { color: var(--ink); }
.svc__body .svc__reading { font-size: 0.9375rem; }
.svc__body .btn { margin-top: 10px; }

@media (max-width: 859px) {
    .svc-intro__grid, .svc__grid { grid-template-columns: 1fr; }
    .svc--flip .svc__img { order: 0; }
    .svc__img img { aspect-ratio: 3 / 2; }
}

/* -------------------------------------------------------------------
   About: portrait beside her words, certificates as framed prints,
   full reviews as quotes under heavy rules
   ------------------------------------------------------------------- */

.about { padding: 0 0 clamp(64px, 8vw, 110px); }
.about__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 36px clamp(40px, 6vw, 96px);
    align-items: start;
    padding-top: clamp(28px, 3vw, 44px);
    border-top: 2px solid var(--ink);
}
.about__photo { margin: 0; }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 18px; }
.about__body h2 { margin: 0 0 16px; font: 400 clamp(2rem, 1.3rem + 2vw, 3rem)/1.04 var(--display); }
.about__body h3 { margin: 28px 0 10px; font: 700 1.25rem/1.3 var(--body); }
.about__body p { margin: 0 0 14px; max-width: 62ch; color: var(--ink-soft); }
.about__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding-top: 18px; border-top: 2px solid var(--ink); }
.about__stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.about__stats dd { margin: 0; font: 400 2.4rem/1 var(--display); }
.about__stats dt { color: var(--muted); font-size: 0.9375rem; }

.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cert-print { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px; background: #fff; border: 1px solid var(--paper-edge); border-radius: 4px; transition: border-color 0.2s ease; }
.cert-print:hover { border-color: var(--ink); }
.cert-print img { max-height: 260px; width: auto; }

.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); }
.story { margin: 0; padding-top: 20px; border-top: 3px solid var(--ink); }
.story blockquote { margin: 12px 0 14px; }
.story blockquote p { margin: 0; color: var(--ink-soft); }
.story figcaption { color: var(--muted); font-size: 0.9375rem; }
.story figcaption strong { color: var(--ink); }

@media (max-width: 959px) {
    .about__grid, .stories { grid-template-columns: 1fr; }
    .about__photo { max-width: 420px; }
}

/* Legal pages: one reading column of numbered sections on heavy rules */
.legal { max-width: 760px; padding: 0 0 clamp(64px, 8vw, 110px); font-size: 1.0625rem; color: var(--ink-soft); }
.legal-block { padding: 22px 0 6px; border-top: 2px solid var(--ink); }
.legal-block h2 { margin: 0 0 12px; color: var(--ink); font: 700 1.25rem/1.3 var(--body); }
.legal-block p, .legal-block ul { margin: 0 0 16px; }
.legal-block li { margin: 0 0 6px; }

/* 404: the code in Anton, then the places most people meant to go */
.lost { padding-bottom: clamp(64px, 8vw, 110px); }
.lost__code { margin: 0 0 4px; font: 400 clamp(4rem, 2.5rem + 5vw, 7rem)/0.9 var(--display); }
.lost__links { max-width: 760px; margin: 32px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.lost__links a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); color: var(--ink); font-weight: 600; text-decoration: none; }
.lost__links a:hover { background: var(--wash); }
.lost__links span { color: var(--muted); font-weight: 400; }

/* -------------------------------------------------------------------
   Contact: the form printed as blanks to fill in
   Fields are underlined blanks like the ticket's printed selects, the
   message is written on ruled lines, and one big black button sends it.
   ------------------------------------------------------------------- */

.contact { padding: 0 0 clamp(64px, 8vw, 112px); }
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 44px clamp(40px, 6vw, 104px);
    align-items: start;
    padding-top: clamp(28px, 3vw, 44px);
    border-top: 2px solid var(--ink);
}
.contact__info h2 {
    margin: 0 0 12px;
    font: 400 clamp(1.9rem, 1.3rem + 1.4vw, 2.6rem)/1.04 var(--display);
}
.contact__info > p { margin: 0 0 28px; max-width: 44ch; color: var(--ink-soft); }
.contact__details { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.contact__details li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 4px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hair);
}
.contact__details h3 { margin: 0; font: 700 0.9375rem/1.6 var(--body); }
.contact__details p { margin: 0; }
.contact__details a { overflow-wrap: anywhere; }

.form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px clamp(20px, 2.4vw, 32px);
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font: 600 0.9375rem/1.4 var(--body); color: var(--ink); }
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1.5px solid var(--muted);
    border-radius: 0;
    background-color: transparent;
    color: var(--ink);
    font: 400 1.0625rem/1.6 var(--body);
    transition: border-color 0.2s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--ink); }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field select {
    appearance: none;
    padding-right: 28px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A5A5A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 12px 8px;
}
/* the message is written on ruled lines, one rule per line of text */
.field textarea {
    min-height: calc(1.6em * 6 + 20px);
    resize: vertical;
    background-image: linear-gradient(to bottom, transparent calc(1.6em - 1px), var(--hair) calc(1.6em - 1px));
    background-size: 100% 1.6em;
    background-origin: content-box;
    background-clip: content-box;
    background-attachment: local;
}
.form.was-checked .field :is(input, textarea):invalid { border-bottom-color: var(--error); }
.form__trap { display: none; }
.form__note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--error);
    font-weight: 600;
}
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn:disabled { cursor: progress; background: var(--ink-soft); }

.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }

.sent { padding-top: 4px; }
.sent__mark { width: 56px; height: 56px; color: var(--ink); }
.sent h3 {
    margin: 18px 0 10px;
    font: 400 clamp(2.1rem, 1.4rem + 1.8vw, 3rem)/1 var(--display);
}
.sent h3:focus { outline: none; }
.sent p { margin: 0 0 26px; max-width: 46ch; color: var(--ink-soft); font-size: 1.125rem; }

@media (max-width: 859px) {
    .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
    .form { grid-template-columns: 1fr; }
}

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

.site-footer {
    padding: clamp(48px, 6vw, 72px) 0 32px;
    border-top: 1px solid var(--hair);
    font-size: 0.975rem;
}
.site-footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.site-footer .brand { display: inline-block; margin: 0 0 16px; padding: 0; }
.site-footer .brand img { height: 80px; }
.site-footer p { margin: 0; color: var(--muted); max-width: 36ch; }
.site-footer h2 {
    margin: 0 0 12px;
    font: 500 0.8125rem/1 var(--flapface);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0 0 8px; }
.site-footer li a { display: inline-block; padding: 3px 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.site-footer li a:hover { text-decoration: underline; }
.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--hair);
    color: var(--muted);
    font-size: 0.875rem;
}
.site-footer__base a { color: var(--muted); }
.site-footer__legal { display: flex; gap: 20px; }

@media (max-width: 859px) {
    .site-footer__cols { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}