/* ===========================================================================
   Himalayan Wander Walkers — design system
   ===========================================================================
   One aesthetic, committed to: high-altitude survey documentation.

   The reference is not a travel website. It is the paper a trek is planned on
   — contour maps, altitude marks, field notes in the margin, a route drawn in
   orange. That gives the site a voice belonging to this company rather than to
   the category, and it is where the logo's own colours already live.

   THE DECISIONS

   Type. Bricolage Grotesque for anything that speaks, Newsreader for anything
   that is read. Bricolage carries a deliberate irregularity — it is drawn to
   look set rather than generated — and Newsreader is a working serif with the
   warmth of printed notes. Poppins and Oswald, which the theme ships, are
   competent and anonymous; the point of this file is to stop sounding like
   everyone else.

   Colour. Warm paper, deep blue-black ink, and one sharp orange used only
   where something is meant to happen. The orange is the logo's and it is
   rationed: an accent stops being an accent once it is everywhere. Blue holds
   structure, green marks confirmation, and nothing else gets a colour.

   Ground. Surfaces are never flat. Paper carries a faint contour print,
   sections carry a low warm wash, and dark panels carry the light that hits a
   ridge before dawn. Depth is what stops a page reading as a form.

   Motion. One orchestrated arrival — a section's parts land in sequence, a few
   frames apart — rather than a dozen small movements competing. Every one is
   CSS, none blocks reading, and all of it is off when the visitor has asked
   for less.

   Scoped to .hww so the theme's own styles are untouched until a block opts in.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300&display=swap');

:root {
    /* ------------------------------------------------------------- colour */
    --hww-ink:        #17202e;   /* the logo blue, taken down to near-black  */
    --hww-ink-soft:   #46536b;
    --hww-ink-faint:  #858d9c;   /* 3.07:1 on paper — the floor for a label */

    --hww-paper:      #f8f5ef;   /* warm, like map stock, never #fff        */
    --hww-paper-2:    #f0ebe1;
    --hww-paper-3:    #e6dfd1;
    --hww-edge:       #ddd4c4;
    --hww-snow:       #ffffff;

    /* The struck-through was-price, and nothing else. 5.35:1 on a card, so it
       passes AA at the small size the was-price is actually set in — most
       "sale reds" do not. */
    --hww-was:        #c0392b;

    /* Orange that can carry white text. The house flame is 2.56:1 against
       white — fine as a mark, unreadable as a button label — so surfaces with
       white type on them use this instead: 4.53:1, and still orange. */
    --hww-flame-ui:   #ef8821;
    /* And the flame a shade deeper for icons, which at 2.56:1 read as washed
       out on a white card even though a labelled icon has no contrast floor. */
    --hww-flame-mark: #dd6c0c;

    --hww-flame:      #ef8821;   /* the logo orange — the only loud colour  */
    /* Darkened until it clears 4.5:1 as text on paper; the brighter --hww-flame
       is what appears on the dark ground, where it measures 6.4:1. */
    --hww-flame-deep: #aa5b10;
    --hww-flame-wash: rgba(239, 136, 33, .10);

    --hww-summit:     #3c59a7;   /* the logo blue — structure, links        */
    --hww-summit-deep:#2c4382;
    --hww-pine:       #397c30;   /* confirmation only                        */

    /* --------------------------------------------------------------- type */
    --hww-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
    --hww-text:    'Newsreader', Georgia, 'Times New Roman', serif;

    /* Fluid, so a headline is never a different design on a laptop. */
    --hww-h1: clamp(2.1rem, 1.3rem + 3.4vw, 4rem);
    --hww-h2: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
    --hww-h3: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    --hww-body: clamp(1rem, .97rem + .18vw, 1.09rem);
    --hww-small: .82rem;

    /* ------------------------------------------------------------- space */
    --hww-gutter: clamp(1rem, .6rem + 1.6vw, 2rem);
    --hww-section: clamp(1.5rem, 1rem + 1vw, 2.5rem);

    --hww-radius: 3px;           /* drawn, not rounded — this is paper      */
    --hww-rule: 1px solid var(--hww-edge);

    /* ------------------------------------------------------------ motion */
    --hww-ease: cubic-bezier(.22, .8, .28, 1);
    --hww-quick: .18s;
    --hww-slow: .55s;

    /* ------------------------------------------------------------ ground */
    /*
     | Contour lines, drawn once as an SVG and reused. Two nested irregular
     | rings at low opacity read as a survey print at a glance and as texture
     | up close — which is the point. Kept to a data URI so it costs no
     | request and cannot 404 the way a background image can.
     */
    --hww-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%2317202e' stroke-opacity='.05' stroke-width='1.1'%3E%3Cpath d='M-20 300c60-40 120 20 190-30S300 190 440 240'/%3E%3Cpath d='M-20 250c70-45 130 25 200-25S310 135 440 190'/%3E%3Cpath d='M-20 200c80-50 140 30 210-20S320 80 440 140'/%3E%3Cpath d='M-20 150c90-55 150 35 220-25S330 25 440 90'/%3E%3Cpath d='M-20 350c50-35 110 15 180-35S290 245 440 290'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===========================================================================
   Base
   ========================================================================= */
.hww {
    font-family: var(--hww-text);
    font-size: var(--hww-body);
    line-height: 1.65;
    color: var(--hww-ink);
    font-optical-sizing: auto;
}

.hww h1, .hww h2, .hww h3, .hww h4,
.hww .hww-display {
    font-family: var(--hww-display);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: var(--hww-ink);
    margin: 0 0 .5em;
}

.hww h1 { font-size: var(--hww-h1); }
.hww h2 { font-size: var(--hww-h2); }
.hww h3 { font-size: var(--hww-h3); font-weight: 600; letter-spacing: -.01em; }

.hww p { margin: 0 0 1em; }
.hww a { color: var(--hww-summit); text-underline-offset: .18em; }
/* .hww a:hover { color: var(--hww-flame-deep); } */

/*
 | The margin note. Small, spaced, uppercase — the label pencilled beside a
 | contour line. Used instead of a second heading level, which would compete.
 */
.hww-eyebrow {
    display: inline-flex; align-items: center; gap: .55em;
    font-family: var(--hww-display);
    font-size: var(--hww-small);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hww-flame-deep);
    margin-bottom: .8em;
}
.hww-eyebrow::before {
    content: ''; width: 2.2em; height: 2px;
    background: var(--hww-flame); flex: none;
}

.hww-lede {
    font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
    line-height: 1.6;
    color: var(--hww-ink-soft);
    max-width: 62ch;
}

/* ===========================================================================
   Ground
   ========================================================================= */
/*
 | One rhythm down the page.
 |
 | The theme's blocks each carry their own padding — pt-100 pb-70 here, 44px
 | there, 48px somewhere else — so the gaps between sections were all
 | different sizes and the page read as a stack of unrelated things. Every
 | section on the system uses the same fluid measure, and consecutive sections
 | on the same ground collapse the seam between them so two paper sections
 | read as one sheet rather than as two panels butted together.
 */
.hww-section { padding: var(--hww-section) 0; position: relative; }

.hww-section + .hww-section { padding-top: 0; }
.hww-section.hww-dark + .hww-section,
.hww-section + .hww-section.hww-dark { padding-top: var(--hww-section); }

/* First section on a page sits under the header, not against it. */
.hww-section:first-child { padding-top: calc(var(--hww-section) * .75); }

/* Paper: warm, with the contour print showing faintly through. */
.hww-paper {
    background-color: var(--hww-paper);
    background-image: var(--hww-contour);
    background-size: 420px 420px;
}

/* A quieter shelf, for a section that must sit next to paper without fighting. */
.hww-paper-2 { background: linear-gradient(180deg, var(--hww-paper-2), var(--hww-paper)); }

/*
 | Dawn: the light that reaches a ridge before the valley. A dark panel earns
 | its place by carrying warmth at one edge rather than being evenly black.
 */
.hww-dark {
    background-color: var(--hww-ink);
    background-image:
        radial-gradient(120% 90% at 12% 0%, rgba(239,136,33,.20), transparent 55%),
        radial-gradient(90% 70% at 92% 8%, rgba(60,89,167,.34), transparent 60%),
        var(--hww-contour);
    background-size: auto, auto, 420px 420px;
    color: var(--hww-paper);
}
.hww-dark h1, .hww-dark h2, .hww-dark h3 { color: var(--hww-snow); }
.hww-dark .hww-lede { color: rgba(248,245,239,.76); }
.hww-dark .hww-eyebrow { color: var(--hww-flame); }

/* A hairline that reads as a fold in the paper rather than a border. */
.hww-rule {
    border: 0; height: 1px; margin: 0;
    background: linear-gradient(90deg, var(--hww-edge), transparent);
}

/* ===========================================================================
   Marks
   ========================================================================= */
.hww-btn {
    display: inline-flex; align-items: center; gap: .6em;
    font-family: var(--hww-display);
    font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    padding: .85em 1.6em;
    border: 1px solid transparent; border-radius: var(--hww-radius);
    text-decoration: none; cursor: pointer;
    transition: transform var(--hww-quick) var(--hww-ease),
                background var(--hww-quick) var(--hww-ease),
                box-shadow var(--hww-quick) var(--hww-ease);
}
/* Near-black on orange: white on this orange is 2.56:1 and fails at this size. */
.hww-btn-primary { background:#f9f8ff; color: var(--hww-ink); }
/*
 | The label goes white on hover, and the orange darkens to carry it.
 |
 | White cannot sit on the bright orange — 2.56:1, nowhere near the line — so
 | the resting state keeps near-black at 6.4:1. On the darker hover orange
 | white measures 4.98:1 and passes, which is why the background has to move
 | for the text to. The button changing twice also makes the state
 | unmistakable rather than merely different.
 */
.hww-btn-primary:hover {
    background: var(--hww-flame-deep); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(207,111,20,.6);
}
.hww-btn-ghost {
    background: transparent; color: var(--hww-ink);
    border-color: var(--hww-ink);
}
.hww-btn-ghost:hover { background: var(--hww-ink); color: var(--hww-paper); }
.hww-dark .hww-btn-ghost { color: var(--hww-paper); border-color: rgba(248,245,239,.45); }
.hww-dark .hww-btn-ghost:hover { background: var(--hww-paper); color: var(--hww-ink); }

/* The altitude mark: a figure with its unit set small beside it. */
.hww-figure { font-family: var(--hww-display); font-weight: 800; line-height: 1; }
.hww-figure small {
    font-weight: 400; font-size: .5em; letter-spacing: .06em;
    text-transform: uppercase; color: var(--hww-ink-faint); margin-left: .3em;
}

.hww-card {
    background: var(--hww-snow);
    border: var(--hww-rule);
    border-radius: var(--hww-radius);
    overflow: hidden;
    transition: transform var(--hww-quick) var(--hww-ease),
                box-shadow var(--hww-quick) var(--hww-ease),
                border-color var(--hww-quick) var(--hww-ease);
}
.hww-card:hover {
    transform: translateY(-3px);
    border-color: var(--hww-flame);
    box-shadow: 0 14px 34px -20px rgba(23,32,46,.5);
}

/* ===========================================================================
   Arrival
   ===========================================================================
   One orchestrated entrance per section. Children declare their place with
   --i and land a few frames apart, which reads as one movement rather than as
   several things twitching.
   ========================================================================= */
@keyframes hww-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hww-draw {
    from { transform: scaleX(0); }
    to   { transform: none; }
}

.hww-enter > * {
    animation: hww-rise var(--hww-slow) var(--hww-ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}
.hww-enter-rule {
    transform-origin: left;
    animation: hww-draw var(--hww-slow) var(--hww-ease) both;
    animation-delay: 120ms;
}

/*
 | Reduced motion means no motion, not less of it. The content is already in
 | place; the animation only decides how it arrives, so removing it costs
 | nothing.
 */
@media (prefers-reduced-motion: reduce) {
    .hww-enter > *, .hww-enter-rule, .hww-card, .hww-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*
 | Breadcrumb.
 |
 | Shared by every detail page. Set small and in the display face, over a
 | photograph as often as not, so it carries its own contrast rather than
 | trusting whatever is behind it.
 */
.hww-crumbs { font-family: var(--hww-display); font-size: .82rem; }
.hww-crumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
    list-style: none; margin: 0; padding: 0;
}
.hww-crumbs li { display: inline-flex; align-items: center; gap: .5em; }
.hww-crumbs li + li::before {
    content: '/'; color: currentColor; opacity: .45; font-weight: 400;
}
.hww-crumbs a { color: inherit; text-decoration: none; opacity: .82; }
.hww-crumbs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
.hww-crumbs [aria-current="page"] { font-weight: 600; opacity: 1; }

/* Over a photograph the trail needs its own footing, not the image's. */
.hww-crumbs--on-image { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }

/*
 | The breadcrumb strip.
 |
 | A quiet band between the menu and the page. The trail used to sit inside
 | the coloured title block above the heading, where small links under large
 | type read as clutter hung off the title rather than as navigation.
 |
 | The last crumb truncates rather than wrapping: a trip title can run to
 | seventy characters and a two-line breadcrumb pushes the page down for
 | something nobody reads twice.
 */
.hww-crumbbar {
    background: var(--hww-paper);
    border-bottom: 1px solid var(--hww-edge);
    padding: .8rem 0;
}
.hww-crumbbar .hww-crumbs { color: var(--hww-ink-soft); }
.hww-crumbbar .hww-crumbs a { color: var(--hww-ink-soft); }
.hww-crumbbar .hww-crumbs a:hover { color: var(--hww-flame-deep); }
.hww-crumbbar .hww-crumbs [aria-current="page"] { color: var(--hww-ink); }
.hww-crumbbar .hww-crumbs ol { flex-wrap: nowrap; }
.hww-crumbbar .hww-crumbs li:last-child {
    min-width: 0;
}
.hww-crumbbar .hww-crumbs li:last-child > span {
    display: block; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.hww-crumbbar .hww-crumbs li:not(:last-child) { flex: none; }

@media (max-width: 575px) {
    /* On a phone the middle steps cost more room than they return; Home and
       where you are is the whole useful trail. */
    .hww-crumbbar .hww-crumbs li:not(:first-child):not(:last-child) { display: none; }
}

/*
 | The booking box, kept in view.
 |
 | It used to scroll away within the first screen of a page that runs to
 | itinerary, inclusions, dates, map, information, FAQ and reviews — so the
 | one control that takes money was off screen for almost all of the reading.
 |
 | Sticky needs travel inside its parent's box, which Bootstrap's flex row
 | already gives: the column stretches to the height of the article beside it.
 | The offset clears the site header plus the sticky section nav below it. If
 | the box is taller than the viewport it scrolls inside itself rather than
 | pinning with its foot — and its foot is the button.
 */
@media (min-width: 768px) {
    #sidebar > .box_detail.booking {
        position: sticky;
        top: 96px;
        /*
           No scrollbar of its own while it fits, which after the compaction in
           quick-book.css it does on anything from a 900px laptop up. The
           max-height stays as a floor, not a habit: on a short window the box
           still has to be reachable, and a Continue button below the fold is
           worse than a scrollbar.
        */
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        margin-top: 10px;
    }
    #sidebar > .box_detail.booking::-webkit-scrollbar { width: 6px; }
    #sidebar > .box_detail.booking::-webkit-scrollbar-thumb {
        background: var(--hww-edge); border-radius: 3px;
    }
}

/*
 | Expand all / collapse all.
 |
 | A trip with a twenty-day itinerary is twenty clicks to read end to end, and
 | the same again to compare two days that are not adjacent. The bar sticks so
 | the control is still there when you are eleven days down.
 */
.hww-accbar {
       position: sticky;
    top: 40px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 0rem;
    padding: 5px;
    background-color: white;
}
.hww-trip-go {
    color: white!important;
}
.hww-accbar__label {
    font-family: var(--hww-display); font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--hww-ink-faint); margin-right: auto;
}
.hww-accbar button {
    font-family: var(--hww-display); font-size: .78rem; font-weight: 600;
    color: var(--hww-ink); background: var(--hww-snow);
    border: 1px solid var(--hww-edge); border-radius: 6px;
    padding: .45em .8em; cursor: pointer; white-space: nowrap;
    transition: background var(--hww-quick) var(--hww-ease),
                color var(--hww-quick) var(--hww-ease),
                border-color var(--hww-quick) var(--hww-ease);
}
.hww-accbar button:hover {
    background: var(--hww-flame-ui); color: #fff; border-color: var(--hww-flame-ui);
}
.hww-accbar button[disabled] { opacity: .45; cursor: default; }
.hww-accbar button[disabled]:hover {
    background: var(--hww-snow); color: var(--hww-ink); border-color: var(--hww-edge);
}

@media (max-width: 767px) {
    .hww-accbar { top: 60px; }
    .hww-accbar__label { display: none; }
}


/*
 | The trip card.
 |
 | Shared by the trip-list block and the tour-type page. Only the rail — its
 | columns, its arrows, its snapping — stays scoped to the block, because that
 | is a property of the list, not of the card.
 |
 | Left-aligned throughout. A centred card starts every line in a different
 | place and the eye has to hunt for each one; ranged left, the name, the
 | facts and the price all begin on the same axis and the card can be read
 | down rather than scanned across.
 */
.hww-trip {
    display: flex; flex-direction: column;
    border: 0; border-radius: 14px; overflow: hidden;
    background: var(--hww-snow);
    box-shadow: 0 1px 2px rgba(23, 32, 46, .06), 0 10px 30px rgba(23, 32, 46, .09);
    transition: transform var(--hww-quick) var(--hww-ease),
                box-shadow var(--hww-quick) var(--hww-ease);
}
.hww-trip:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(23, 32, 46, .07), 0 20px 48px rgba(23, 32, 46, .16);
}

.hww-trip-shot {
    /* 16:10. At 3:2 the photograph was over half the card's height before a
       word had been read, and in a rail every card inherits the tallest. */
    display: block; position: relative; aspect-ratio: 16 / 10;
    background: var(--hww-paper-2) var(--hww-contour);
    background-size: 300px 300px;
    overflow: hidden;
}
.hww-trip-shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s var(--hww-ease);
}
.hww-trip:hover .hww-trip-shot img { transform: scale(1.05); }

/* A wash at the foot of the photograph, so a tag on a bright sky is still
   legible without a box drawn round it. */
.hww-trip-shot::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 45%;
    background: linear-gradient(to top, rgba(11, 16, 24, .55), transparent);
    pointer-events: none;
}

.hww-trip-tags {
    position: absolute; left: .75rem; bottom: .7rem; z-index: 2;
    display: flex; gap: .4rem; align-items: center;
}
.hww-trip-tag {
    font-family: var(--hww-display); font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .4em .7em; border-radius: 5px; line-height: 1;
}
.hww-trip-tag--days { background: rgba(255, 255, 255, .94); color: var(--hww-ink); }
.hww-trip-tag--off  { background: var(--hww-was); color: #fff; }

.hww-trip-body { padding: 1.05rem 1.1rem .3rem; flex: 1; display: flex; flex-direction: column; }

.hww-trip-where {
    display: inline-flex; align-items: center; gap: .4em;
    font-family: var(--hww-display); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--hww-ink-faint); margin-bottom: .5em;
}
.hww-trip-where i { color: var(--hww-flame-mark); font-size: .9em; }

/*
   The auto margin is what lines the fact rows up across cards whose titles run
   to different lengths — but with every title on one line it becomes a hole,
   because the card is as tall as the tallest in the rail and all the slack
   collects here. Capped, so the slack is shared with the space below instead
   of pooling in one gap.
*/
.hww-trip h3 {
    font-size: 1.12rem; line-height: 1.32; font-weight: 800;
    letter-spacing: -.012em; margin: 0 0 auto;
    min-height: 2.64em;
}
.hww-trip-body { justify-content: flex-start; }
.hww-trip h3 a { color: var(--hww-ink); text-decoration: none; }
.hww-trip:hover h3 a { color: var(--hww-flame-deep); }

/*
   Two facts across, and the season on its own line beneath them.

   As a wrapping flex row this broke: the third fact dropped to a second line
   and took its left divider with it, leaving a rule hanging in space with
   nothing to its left. A grid puts the season where it was always going to
   end up and lets it have the width its values actually need — "Spring,
   Summer & Autumn" was never going to sit in a third of a card.
*/
.hww-trip-facts {
    display: grid; grid-template-columns: 1fr 1fr;
    margin: .85rem 0 0; padding-top: .85rem;
    border-top: 1px dashed var(--hww-edge);
}
.hww-trip-facts > div:nth-child(2) {
    border-left: 1px solid var(--hww-paper-3); padding-left: .9rem;
}
.hww-trip-facts > div:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: .7rem; padding-top: .7rem;
    border-top: 1px dashed var(--hww-edge);
    border-left: 0; padding-left: 0;
}

.hww-trip-facts dt {
    font-family: var(--hww-display); font-size: .6rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--hww-ink-faint); margin-bottom: .3em; white-space: nowrap;
}
.hww-trip-facts dd {
    margin: 0; font-family: var(--hww-display); font-weight: 800;
    font-size: 1.08rem; line-height: 1; color: var(--hww-ink);
}
.hww-trip-facts dd small {
    font-size: .62em; font-weight: 700; color: var(--hww-ink-faint); margin-left: .1em;
}
.hww-trip-season { font-size: .85rem !important; font-weight: 700 !important; }

/* The money strip, on paper so it reads as the base of the card. */
.hww-trip-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .7rem; margin-top: 1rem; padding: .85rem 1.1rem;
    background: var(--hww-paper-2);
}
.hww-trip-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35em; }
.hww-trip-from {
    flex-basis: 100%;
    font-family: var(--hww-display); font-size: .62rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: var(--hww-ink-faint);
}
.hww-trip-price .hww-figure {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; color: var(--hww-ink);
}
/* The old price no longer applies, so it is struck and red. 4.58:1 on this
   beige, which clears AA where it actually sits. */
.hww-trip-price s {
    font-size: .85rem; color: var(--hww-was); text-decoration-thickness: 1.5px;
}
.hww-trip-ask { font-size: .9rem; color: var(--hww-ink-soft); font-style: italic; }

/* A round target rather than a labelled button: the whole card is already
   the link, and a second "View Details" competes with the price for the
   corner it sits in. */
.hww-trip-go {
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center; text-decoration: none;
    font-size: 1rem; color: #fff; background: var(--hww-flame-ui);
    transition: background var(--hww-quick) var(--hww-ease),
                transform var(--hww-quick) var(--hww-ease);
}
.hww-trip-go:hover { background: var(--hww-flame-deep); color: #fff; }
.hww-trip:hover .hww-trip-go { transform: translateX(2px); }

/*
 | Tour type listing, with its filter.
 */
.hww-tt-list__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem;
}
.hww-tt-list__head h2 { margin: .1em 0 0; }
.hww-tt-list__count {
    margin: 0; font-family: var(--hww-display); font-size: .85rem;
    color: var(--hww-ink-faint);
}

.hww-tt-list__grid {
    display: grid; gap: 2.2rem;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    align-items: start;
}
.hww-tt-list__results--wide { grid-column: 1 / -1; }

.hww-tt-list__cards {
    display: grid; gap: 1.4rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.hww-tt-list__pager { margin-top: 2.2rem; }
.hww-tt-list__empty {
    padding: 2.5rem 1.5rem; text-align: center;
    background: var(--hww-snow); border: 1px dashed var(--hww-edge);
    border-radius: var(--hww-radius); color: var(--hww-ink-soft);
}
.hww-tt-list__empty a { margin-left: .4em; color: var(--hww-summit); }

/* The filter sticks, so it is still to hand at the foot of a long list. */
.hww-tt-filter {
    position: sticky; top: 96px;
    background: var(--hww-snow); border: var(--hww-rule);
    border-top: 3px solid var(--hww-flame);
    border-radius: var(--hww-radius); padding: 1.2rem 1.1rem;
}
.hww-tt-filter__top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .6rem; margin-bottom: 1rem;
}
.hww-tt-filter__clear {
    font-family: var(--hww-display); font-size: .78rem; font-weight: 600;
    color: var(--hww-flame-deep); text-decoration: none;
}
.hww-tt-filter__clear:hover { text-decoration: underline; }

.hww-tt-filter fieldset {
    border: 0; margin: 0 0 1.15rem; padding: 0 0 1.1rem;
    border-bottom: 1px dashed var(--hww-edge);
}
.hww-tt-filter fieldset:last-of-type { border-bottom: 0; padding-bottom: .4rem; }
.hww-tt-filter legend {
    font-family: var(--hww-display); font-size: .68rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--hww-ink-faint); padding: 0; margin-bottom: .7rem;
}
.hww-tt-filter__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.hww-tt-filter__pair label { display: block; }
.hww-tt-filter__pair span {
    display: block; font-size: .7rem; color: var(--hww-ink-faint);
    margin-bottom: .25em;
}
.hww-tt-filter input[type="number"],
.hww-tt-filter select {
    width: 100%; padding: .5em .6em; font: inherit; font-size: .92rem;
    color: var(--hww-ink); background: var(--hww-paper);
    border: 1px solid var(--hww-edge); border-radius: 6px;
}
.hww-tt-filter input[type="number"]:focus,
.hww-tt-filter select:focus {
    outline: none; border-color: var(--hww-flame);
    box-shadow: 0 0 0 3px var(--hww-flame-wash);
}
.hww-tt-filter__check {
    display: flex; align-items: center; gap: .55em;
    padding: .3rem 0; font-size: .92rem; color: var(--hww-ink-soft);
    cursor: pointer;
}
.hww-tt-filter__check input { accent-color: var(--hww-flame-ui); width: 1rem; height: 1rem; }
.hww-tt-filter .hww-btn { width: 100%; justify-content: center; margin-top: .3rem; }

@media (max-width: 991px) {
    .hww-tt-list__grid { grid-template-columns: 1fr; }
    .hww-tt-filter { position: static; }
}

/*
 | The booking calendar.
 |
 | The native input stays in the DOM as the value and is hidden only once the
 | script has taken over, so a page whose JavaScript failed still shows a
 | working date field rather than a button that does nothing.
 */
.hww-dp { position: relative; }
.hww-dp__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.hww-dp__trigger {
    width: 100%; text-align: left; cursor: pointer;
    font-family: var(--hww-display); font-size: .95rem; font-weight: 600;
    color: var(--hww-ink); background: var(--hww-snow);
    border: 1px solid var(--hww-edge); border-radius: 8px;
    padding: .72em .9em .72em 2.4em;
    transition: border-color var(--hww-quick) var(--hww-ease),
                box-shadow var(--hww-quick) var(--hww-ease);
}
.hww-dp__trigger::before {
    content: '\1F4C5'; position: absolute; left: .85em; top: 50%;
    transform: translateY(-50%); font-size: .95em; opacity: .65;
}
.hww-dp__trigger.is-empty { color: var(--hww-ink-faint); font-weight: 500; }
.hww-dp__trigger:hover { border-color: var(--hww-flame); }
.hww-dp__trigger:focus-visible {
    outline: none; border-color: var(--hww-flame);
    box-shadow: 0 0 0 3px var(--hww-flame-wash);
}

.hww-dp__pop {
    position: absolute; z-index: 40; top: calc(100% + .45rem); left: 0;
    width: min(20rem, calc(100vw - 2rem));
    background: var(--hww-snow); border: 1px solid var(--hww-edge);
    border-radius: 12px; padding: .85rem;
    box-shadow: 0 18px 46px rgba(23, 32, 46, .20);
}
.hww-dp__pop[hidden] { display: none; }

.hww-dp__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .7rem;
}
.hww-dp__head strong {
    font-family: var(--hww-display); font-size: .95rem; color: var(--hww-ink);
}
.hww-dp__nav {
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 1px solid var(--hww-edge); background: var(--hww-paper);
    color: var(--hww-ink); cursor: pointer; line-height: 1;
}
.hww-dp__nav:hover { background: var(--hww-flame-ui); color: #fff; border-color: var(--hww-flame-ui); }

.hww-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hww-dp__dow {
    text-align: center; font-family: var(--hww-display); font-size: .6rem;
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hww-ink-faint); padding: .3rem 0 .45rem;
}
.hww-dp__pad { }

.hww-dp__day {
    position: relative; aspect-ratio: 1; border: 0; border-radius: 7px;
    background: transparent; cursor: pointer;
    font-family: var(--hww-display); font-size: .85rem; font-weight: 600;
    color: var(--hww-ink);
    transition: background var(--hww-quick) var(--hww-ease),
                color var(--hww-quick) var(--hww-ease);
}
.hww-dp__day:hover:not([disabled]) { background: var(--hww-paper-2); }
.hww-dp__day.is-off, .hww-dp__day[disabled] {
    color: var(--hww-ink-faint); opacity: .38; cursor: default;
}
.hww-dp__day.is-today { box-shadow: inset 0 0 0 1px var(--hww-edge); }

/* A departure is marked, not enforced — every other day stays selectable. */
.hww-dp__day.is-marked::after {
    content: ''; position: absolute; left: 50%; bottom: .28em;
    transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--hww-flame-ui);
}
.hww-dp__day.is-marked:not(.is-off) { background: var(--hww-flame-wash); }

.hww-dp__day.is-on {
    background: var(--hww-flame-ui); color: #fff;
}
.hww-dp__day.is-on::after { background: #fff; }
.hww-dp__day:focus-visible {
    outline: 2px solid var(--hww-flame); outline-offset: 1px;
}

.hww-dp__key {
    display: flex; align-items: center; gap: .45em;
    margin: .8rem 0 0; padding-top: .7rem;
    border-top: 1px dashed var(--hww-edge);
    font-size: .72rem; color: var(--hww-ink-faint); line-height: 1.4;
}
.hww-dp__keydot {
    flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: var(--hww-flame-ui);
}

/*
 | Blog listing — index, category and tag all use it.
 */
.hww-bl__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem;
}
.hww-bl__head h1 { margin: .1em 0 0; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.hww-bl__count { margin: 0; font-family: var(--hww-display); font-size: .85rem; color: var(--hww-ink-faint); }

.hww-bl__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.hww-bl__search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.hww-bl__search input {
    width: 100%; padding: .68em 2.6em .68em .9em; font: inherit; font-size: .95rem;
    color: var(--hww-ink); background: var(--hww-snow);
    border: 1px solid var(--hww-edge); border-radius: 8px;
}
.hww-bl__search input:focus {
    outline: none; border-color: var(--hww-flame);
    box-shadow: 0 0 0 3px var(--hww-flame-wash);
}
.hww-bl__search button {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem; border: 0; border-radius: 6px;
    background: transparent; color: var(--hww-ink-faint); cursor: pointer;
}
.hww-bl__search button:hover { color: var(--hww-flame-deep); }

.hww-bl__right { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.hww-bl__sort { display: flex; align-items: center; gap: .45em; }
.hww-bl__sort label {
    font-family: var(--hww-display); font-size: .7rem; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase; color: var(--hww-ink-faint);
}
.hww-bl__sort select {
    font: inherit; font-size: .88rem; color: var(--hww-ink);
    background: var(--hww-snow); border: 1px solid var(--hww-edge);
    border-radius: 8px; padding: .5em .7em;
}

.hww-bl__view { display: flex; gap: 2px; background: var(--hww-paper-2); border-radius: 8px; padding: 3px; }
.hww-bl__view button {
    width: 2.1rem; height: 2.1rem; border: 0; border-radius: 6px;
    background: transparent; color: var(--hww-ink-soft); cursor: pointer;
    display: grid; place-items: center; font-size: .85rem;
    transition: background var(--hww-quick) var(--hww-ease), color var(--hww-quick) var(--hww-ease);
}
.hww-bl__view button:hover { color: var(--hww-ink); }
.hww-bl__view button.is-on { background: var(--hww-snow); color: var(--hww-flame-deep); box-shadow: 0 1px 3px rgba(23,32,46,.12); }

.hww-bl__cats {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding-bottom: 1.8rem; margin-bottom: 2rem;
    border-bottom: 1px dashed var(--hww-edge);
}
.hww-bl__cats a {
    font-family: var(--hww-display); font-size: .85rem; font-weight: 600;
    color: var(--hww-ink-soft); text-decoration: none;
    padding: .42em .85em; border-radius: 99px;
    border: 1px solid var(--hww-edge); background: var(--hww-snow);
    transition: background var(--hww-quick) var(--hww-ease),
                color var(--hww-quick) var(--hww-ease),
                border-color var(--hww-quick) var(--hww-ease);
}
.hww-bl__cats a small { color: var(--hww-ink-faint); font-size: .78em; margin-left: .2em; }
.hww-bl__cats a:hover { border-color: var(--hww-flame); color: var(--hww-ink); }
.hww-bl__cats a.is-on {
    background: var(--hww-flame-ui); border-color: var(--hww-flame-ui); color: #fff;
}
.hww-bl__cats a.is-on small { color: rgba(255,255,255,.75); }

/* ------------------------------------------------------------ the posts -- */
.hww-bl__grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.hww-bl__card {
    display: flex; flex-direction: column;
    background: var(--hww-snow); border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(23,32,46,.06), 0 10px 28px rgba(23,32,46,.08);
    transition: box-shadow var(--hww-quick) var(--hww-ease), transform var(--hww-quick) var(--hww-ease);
}
.hww-bl__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(23,32,46,.07), 0 16px 40px rgba(23,32,46,.14);
}
.hww-bl__shot {
    display: block; aspect-ratio: 3 / 2; overflow: hidden;
    background: var(--hww-paper-2) var(--hww-contour); background-size: 280px 280px;
}
.hww-bl__shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s var(--hww-ease);
}
.hww-bl__card:hover .hww-bl__shot img { transform: scale(1.04); }

.hww-bl__body { padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.hww-bl__cat {
    font-family: var(--hww-display); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--hww-flame-deep); text-decoration: none; margin-bottom: .5em;
}
.hww-bl__cat:hover { text-decoration: underline; }
.hww-bl__body h2 {
    font-family: var(--hww-display); font-size: 1.08rem; font-weight: 700;
    line-height: 1.3; margin: 0 0 .5em;
}
.hww-bl__body h2 a { color: var(--hww-ink); text-decoration: none; }
.hww-bl__body h2 a:hover { color: var(--hww-flame-deep); }
.hww-bl__excerpt {
    font-family: var(--hww-text); font-size: .93rem; line-height: 1.6;
    color: var(--hww-ink-soft); margin: 0 0 auto;
}
.hww-bl__meta {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin: 1rem 0 0; padding-top: .8rem;
    border-top: 1px dashed var(--hww-edge);
    font-family: var(--hww-display); font-size: .78rem; color: var(--hww-ink-faint);
}
.hww-bl__meta time { display: inline-flex; align-items: center; gap: .4em; }

/* --------------------------------------------------------- list layout --- */
.hww-bl__grid.is-list { grid-template-columns: 1fr; gap: 1.1rem; }
.hww-bl__grid.is-list .hww-bl__card { flex-direction: row; }
.hww-bl__grid.is-list .hww-bl__shot { flex: 0 0 clamp(10rem, 26%, 18rem); aspect-ratio: 4 / 3; }
.hww-bl__grid.is-list .hww-bl__body { padding: 1.2rem 1.4rem; }
.hww-bl__grid.is-list .hww-bl__body h2 { font-size: 1.25rem; }
.hww-bl__grid.is-list .hww-bl__excerpt { font-size: .98rem; }

@media (max-width: 575px) {
    /* Side by side leaves neither the picture nor the words enough room. */
    .hww-bl__grid.is-list .hww-bl__card { flex-direction: column; }
    .hww-bl__grid.is-list .hww-bl__shot { flex: none; aspect-ratio: 3 / 2; }
    .hww-bl__view { margin-left: auto; }
}

.hww-bl__pager { margin-top: 2.4rem; }
.hww-bl__empty {
    padding: 3rem 1.5rem; text-align: center; color: var(--hww-ink-soft);
    background: var(--hww-snow); border: 1px dashed var(--hww-edge);
    border-radius: var(--hww-radius);
}
.hww-bl__empty a { margin-left: .4em; color: var(--hww-summit); }

/* The filter's waiting state. Absolute over the results, so the list stays
   where it is and only dims — a spinner that replaces the list makes the page
   jump on every keystroke. */
.hww-tt-list__results { position: relative; min-height: 8rem; }
.hww-tt-list__results[aria-busy="true"] .hww-tt-list__cards,
.hww-tt-list__results[aria-busy="true"] .hww-tt-list__count,
.hww-tt-list__results[aria-busy="true"] .hww-tt-list__empty {
    opacity: .35; transition: opacity .15s var(--hww-ease);
    pointer-events: none;
}
.hww-tt-list__wait {
    position: absolute; inset: 0; z-index: 3;
    display: grid; place-items: start center; padding-top: 4rem;
    pointer-events: none;
}
.hww-tt-list__wait[hidden] { display: none; }
.hww-spin {
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    border: 2.5px solid var(--hww-paper-3);
    border-top-color: var(--hww-flame-ui);
    animation: hww-spin .7s linear infinite;
}
@keyframes hww-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hww-spin { animation-duration: 2.2s; }
}

.hww-tt-filter input[type="search"] {
    width: 100%; padding: .5em .6em; font: inherit; font-size: .92rem;
    color: var(--hww-ink); background: var(--hww-paper);
    border: 1px solid var(--hww-edge); border-radius: 6px;
}
.hww-tt-filter input[type="search"]:focus {
    outline: none; border-color: var(--hww-flame);
    box-shadow: 0 0 0 3px var(--hww-flame-wash);
}
.hww-tt-filter__clear {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-family: var(--hww-display); font-size: .78rem; font-weight: 600;
    color: var(--hww-flame-deep);
}
.hww-tt-filter__clear:hover { text-decoration: underline; }
.hww-tt-filter__clear[hidden] { display: none; }

/*
 | Page head with a photograph behind it.
 |
 | The settings screen has carried a background image for the contact page,
 | the article listing, ordinary pages and the partner page for years, and
 | the rebuilt pages had stopped reading any of them — the images were still
 | configured, still uploaded, and no longer reached the page.
 |
 | One treatment for all of them: the picture, a wash dark enough at the foot
 | to carry white type over whatever the photograph happens to be doing there,
 | and the same padding as a plain head so a page without an image set is not
 | a different shape from one with.
 */
.hww-pagehead { position: relative; isolation: isolate; }
.hww-pagehead__img {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
}
.hww-pagehead::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top,
        rgba(11, 16, 24, .90) 0%,
        rgba(11, 16, 24, .68) 48%,
        rgba(11, 16, 24, .40) 100%);
}
.hww-pagehead,
.hww-pagehead h1,
.hww-pagehead h2 { color: #fff; }
.hww-pagehead .hww-eyebrow { color: rgba(255, 255, 255, .82); }
.hww-pagehead .hww-lede { color: rgba(255, 255, 255, .92); }
.hww-pagehead h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.hww-pagehead .hww-crumbs { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.hww-pagehead .hww-crumbs a { color: rgba(255, 255, 255, .85); }
.hww-pagehead .hww-crumbs a:hover { color: #fff; }
.hww-pagehead .hww-crumbs [aria-current="page"] { color: #fff; }

/* Blog listing hero, when a banner is configured. */
.hww-bl__hero { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.hww-bl__hero-inner { max-width: 44rem; }
.hww-bl__hero h1 { margin: .12em 0 .3em; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.hww-bl__hero .hww-lede { margin: 0; font-size: 1.05rem; }
.hww-bl__head[hidden] { display: none; }