/* =========================================================================
   Labuan Bajo Komodo — editorial guide theme
   Palette and type mirror labuanbajokomodo.com: deep coffee on warm cream,
   brass accents, Bodoni Moda display over DM Sans body.
   Every rule below is component-scoped; no global element overrides beyond
   the reset block, so a fix in one section cannot leak into another.
   ========================================================================= */

:root {
    /* Core palette — sourced from the live site's own tokens */
    --lbk-primary:      #2c1810;   /* deep coffee — headings, dark panels */
    --lbk-primary-soft: #46291a;
    --lbk-accent:       #8a5a2b;   /* brass — eyebrows, links, rules */
    --lbk-accent-deep:  #6f4620;   /* AA-safe brass on cream */
    --lbk-bg:           #ffe2c7;   /* accent cream — hero card, callouts, badges */
    --lbk-bg-soft:      #fff2e5;
    /* The continuous page ground. Sections no longer alternate cream/white
       bands; they all sit on this, and separation comes from white cards
       floating on top. #ffe2c7 stays the accent, too saturated to read a
       long article on. */
    --lbk-ground:       #f6ede4;
    /* A second ground, a shade deeper. Alternating the two lets neighbouring
       sections read as separate without a canyon between them. */
    --lbk-ground-soft:  #f0e3d6;
    --lbk-white:        #ffffff;
    --lbk-text:         #1d1d1f;
    --lbk-muted:        #5a5a60;
    --lbk-hairline:     rgba(0, 0, 0, 0.08);
    --lbk-hairline-2:   rgba(0, 0, 0, 0.14);
    --lbk-soft:         rgba(138, 90, 43, 0.075);
    --lbk-soft-2:       rgba(138, 90, 43, 0.14);
    --lbk-onaccent:     #ffffff;

    /* Footer */
    --lbkf-bg:   #3a2216;
    --lbkf-txt:  #ece2d4;
    --lbkf-mut:  #cbbba7;
    --lbkf-head: #ffe2c7;

    /* Shape & depth */
    --lbk-radius:    12px;
    --lbk-radius-lg: 24px;
    --lbk-pill:      980px;
    --lbk-card-line: rgba(44,24,16,.07);
    --lbk-shadow-sm: 0 1px 2px rgba(44,24,16,.04), 0 4px 14px rgba(44,24,16,.05);
    --lbk-shadow:    0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(44,24,16,.07);
    --lbk-shadow-lg: 0 18px 44px rgba(44,24,16,.14);
    --lbk-shadow-xl: 0 28px 64px rgba(44,24,16,.16);

    /* Type */
    --lbk-font-head: 'Lora', Georgia, 'Times New Roman', serif;
    --lbk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Rhythm */
    /* Rhythm follows bajoport.com's scale: 44-76px a side rather than 56-96px.
       The old figures put 112-192px of empty ground between neighbours, which
       is what made the page feel spread out. Sections are separated by a
       change of surface instead — see --lbk-ground-soft. */
    --lbk-section:       clamp(2.75rem, 1.5rem + 4.2vw, 4.75rem);
    --lbk-section-tight: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
    --lbk-gutter:   clamp(1.25rem, 6vw, 5rem);
    --lbk-maxw:     1200px;
    --lbk-prose:    68ch;

    --lbk-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset (scoped to what the theme actually renders) ─────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lbk-body {
    margin: 0;
    background: var(--lbk-ground);
    color: var(--lbk-text);
    font-family: var(--lbk-font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Deliberately zero-specificity. Written as `.lbk-body img` this reset scored
   (0,1,1) and so outranked every single-class component rule below it: the
   header logo's `.lbk-brand-logo { height: 44px }` at (0,1,0) lost to
   `height: auto`, and the image painted at its full 1536x1024 intrinsic size,
   shoving the nav and the CTA off the bar. The descendant rules elsewhere in
   this file (`.lbk-hero-media img` and friends) only ever won by source order,
   which is not a guarantee. Inside :where() the reset carries no weight at all,
   so any rule that names an image beats it, while the reset still cancels the
   user agent defaults - author styles outrank UA styles whatever the
   specificity. Re-check the header with a logo set before touching this. */
:where(.lbk-body) :where(img, svg) { max-width: 100%; height: auto; display: block; }

.lbk-body h1, .lbk-body h2, .lbk-body h3, .lbk-body h4 {
    font-family: var(--lbk-font-head);
    color: var(--lbk-primary);
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.22;
    margin: 0 0 .6em;
    /* Headings carry bare domains — "What is labuanbajokomodo.com?" — and a
       domain has nothing to break on. At 320px that word is wider than the
       prose column, and because the h2 box still fits, an element-box overflow
       scan cannot see it: only the text ink crosses the edge. break-word acts
       only when a word cannot fit at all, so ordinary headings are untouched.
       Scoped to the heading component, which is where the strings live. */
    overflow-wrap: break-word;
}
.lbk-body h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.lbk-body h2 { font-size: clamp(1.55rem, 2.9vw, 2.25rem); }
.lbk-body h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.lbk-body h4 { font-size: 1.05rem; }

/* Deliberately an element selector, not `.lbk-body a`. Its only job is to
   cancel the user agent's blue link colour; at specificity (0,0,1) every
   single-class component rule below still wins, so a button label keeps the
   colour its own class sets. Scoping this to .lbk-body would outrank
   .lbk-btn-primary and paint button text with the surrounding ink. */
a { color: inherit; text-decoration: none; }

/* Content regions — where a link should read as a link. */
.lbk-prose a,
.lbk-answer a,
.lbk-faq-a a,
.lbk-disclosure a,
.lbk-tablewrap a,
.lbk-step p a {
    color: var(--lbk-accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lbk-prose a:hover,
.lbk-answer a:hover,
.lbk-faq-a a:hover,
.lbk-disclosure a:hover,
.lbk-tablewrap a:hover,
.lbk-step p a:hover { color: var(--lbk-primary); }

.lbk-body :focus-visible {
    outline: 2px solid var(--lbk-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Removed from the visual layout, still announced by assistive technology. */
.lbk-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

.lbk-skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--lbk-primary); color: #fff;
    padding: .75rem 1.25rem; border-radius: 0 0 var(--lbk-radius) 0;
}
.lbk-skip:focus { left: 0; }

/* Anchor offset for the sticky header — scoped to headings that carry an id.
   Collapsible sections put the heading inside a <summary>, so the selector has
   to reach it there too or every contents jump lands under the header. */
.lbk-prose > h2[id],
.lbk-prose > h3[id],
.lbk-article-section > summary > h2[id],
.lbk-article-section,
.lbk-section-anchor { scroll-margin-top: 88px; }

/* ── Shared layout primitives ─────────────────────────────────────────── */
.lbk-shell   { max-width: var(--lbk-maxw); margin-inline: auto; }
.lbk-shell-narrow { max-width: 880px; margin-inline: auto; }

/* One continuous ground for every section. The cream/white variants are kept
   as aliases so existing template args stay valid, but neither paints a
   competing band any more — depth comes from .lbk-panel cards instead of
   from stripes, which is what made the old page read as flat. */
.lbk-band    { padding: var(--lbk-section) var(--lbk-gutter); background: var(--lbk-ground); }
.lbk-band-cream,
.lbk-band-white { background: var(--lbk-ground); }
.lbk-band-dark  { background: var(--lbk-primary); color: #fff; }
.lbk-band-tight { padding-block: var(--lbk-section-tight); }

/* Alternating the ground makes the seam between two sections visible without
   a gap doing the work. Applied by the template that knows where it reads
   well, not by a sibling chain: that only handles as many neighbours as there
   are rules and silently breaks when a section is added or reordered. */
.lbk-band-soft { background: var(--lbk-ground-soft); }

/* The white surface every block of content sits on. */
.lbk-panel {
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
}
.lbk-panel-pad { padding: clamp(1.5rem, 3.5vw, 2.75rem); }

.lbk-eyebrow {
    display: inline-block;
    font-family: var(--lbk-font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lbk-accent-deep);
    margin: 0 0 .75rem;
}
.lbk-band-dark .lbk-eyebrow { color: #f2d9ae; }

.lbk-lede {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--lbk-muted);
    max-width: 62ch;
    margin: 0 0 1.5rem;
}
.lbk-band-dark .lbk-lede { color: rgba(255,255,255,.86); }

.lbk-head { max-width: 780px; margin: 0 0 clamp(1.75rem, 3vw, 2.75rem); }
.lbk-head h2 { margin: 0 0 .5rem; }
.lbk-head p  { margin: 0; color: var(--lbk-muted); max-width: 62ch; }

/* Heading on the left, the section's own action on the right, aligned to the
   heading's baseline. Collapses to a stack below 780px. */
.lbk-head-row {
    display: flex; flex-direction: column; gap: 1.25rem;
    margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}
.lbk-head-row > div { max-width: 720px; }
.lbk-head-row h2 { margin: 0 0 .5rem; }
.lbk-head-row p  { margin: 0; color: var(--lbk-muted); max-width: 62ch; }
.lbk-head-row .lbk-btn { flex: none; align-self: flex-start; }
@media (min-width: 780px) {
    .lbk-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
    .lbk-head-row .lbk-btn { align-self: auto; }
}
.lbk-head-center { text-align: center; margin-inline: auto; }
.lbk-head-center p { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.lbk-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--lbk-font-body);
    font-size: .95rem; font-weight: 500; line-height: 1.2;
    padding: .85rem 1.65rem;
    border-radius: var(--lbk-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s var(--lbk-ease), background-color .2s var(--lbk-ease), color .2s var(--lbk-ease);
    text-decoration: none;
}
.lbk-btn:hover { transform: translateY(-1px); text-decoration: none; }
.lbk-btn-primary { background: var(--lbk-primary); color: #fff; }
.lbk-btn-primary:hover { background: var(--lbk-primary-soft); color: #fff; }
.lbk-btn-ghost { background: transparent; color: var(--lbk-primary); border-color: var(--lbk-hairline-2); }
.lbk-btn-ghost:hover { background: var(--lbk-soft); color: var(--lbk-primary); }
.lbk-band-dark .lbk-btn-primary { background: #fff; color: var(--lbk-primary); }
.lbk-band-dark .lbk-btn-ghost   { color: #fff; border-color: rgba(255,255,255,.45); }
.lbk-band-dark .lbk-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.lbk-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (prefers-reduced-motion: reduce) { .lbk-btn { transition: none; } .lbk-btn:hover { transform: none; } }

/* ── Header / navigation ──────────────────────────────────────────────── */
.lbk-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--lbk-hairline);
    font-family: var(--lbk-font-body);
}
.lbk-header-in {
    max-width: 1320px; margin-inline: auto;
    padding: .75rem clamp(1rem, 4vw, 3rem);
    display: flex; align-items: center; gap: 1rem;
}
.lbk-brand { display: flex; flex-direction: column; line-height: 1.05; flex: none; text-decoration: none; }
.lbk-brand:hover { text-decoration: none; }
.lbk-brand-name {
    font-family: var(--lbk-font-head);
    font-size: 1.06rem; font-weight: 600; color: var(--lbk-primary);
    letter-spacing: -.01em;
}
.lbk-brand-kicker {
    font-size: .55rem; letter-spacing: .17em; text-transform: uppercase;
    color: var(--lbk-accent-deep); font-weight: 600; margin-top: .26rem;
}
/* The logo is a fixed-height object in the bar; width follows the file's own
   aspect ratio. max-width is the guard for a wordmark-shaped file - it only
   binds past a 5:1 ratio, and object-fit keeps such a file letterboxed rather
   than squashed. */
.lbk-brand-logo { display: block; height: 44px; width: auto; max-width: 220px; object-fit: contain; }

.lbk-nav-desktop { display: none; flex: 1; justify-content: center; min-width: 0; }
.lbk-header-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
/* The header CTA is the widest single object in the bar. Scoped to the header
   rather than changed on .lbk-btn: everywhere else the button keeps its size.
   The label itself is fixed by the campaign contract and must not be shortened. */
.lbk-header-actions .lbk-btn { font-size: .85rem; padding: .68rem 1.2rem; }

.lbk-nav-menu { display: flex; align-items: center; gap: clamp(.4rem, 1vw, 1.05rem); list-style: none; margin: 0; padding: 0; }
.lbk-nav-menu > li { position: relative; }
.lbk-menu-link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .1rem;
    font-size: .82rem; font-weight: 500; color: var(--lbk-text);
    white-space: nowrap; text-decoration: none;
}
.lbk-menu-link:hover { color: var(--lbk-accent-deep); text-decoration: none; }
.lbk-nav-menu > li.current-menu-item > .lbk-menu-link,
.lbk-nav-menu > li.current-menu-ancestor > .lbk-menu-link { color: var(--lbk-accent-deep); }

.lbk-caret {
    width: 0; height: 0; flex: none;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 4px solid currentColor; opacity: .55;
    transition: transform .15s var(--lbk-ease);
}
.lbk-submenu-toggle { display: none; }

.lbk-submenu {
    display: none; position: absolute; top: calc(100% + .4rem); left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    min-width: 300px; max-width: min(92vw, 620px);
    background: var(--lbk-white);
    border: 1px solid var(--lbk-hairline);
    border-radius: var(--lbk-radius);
    box-shadow: var(--lbk-shadow-lg);
    padding: .6rem; margin: 0; list-style: none;
    max-height: min(70vh, 560px); overflow-y: auto;
}
/* Bridge the gap so the pointer can travel into the panel. Deliberately
   wider than the panel and taller than the gap: the panel is centred under a
   much narrower item, so a diagonal move toward a link at either edge leaves
   the item before it reaches the panel. */
.lbk-nav-desktop .lbk-has-children > .lbk-submenu::before {
    content: ''; position: absolute;
    left: -1.75rem; right: -1.75rem; top: -1rem; height: 1rem;
}

/* Without JavaScript the panels still open on hover and on keyboard focus.
   With it, lbk.js puts `is-enhanced` on the wrapper and takes over, adding a
   close delay — pure :hover has none, so a moment spent in the gap or a
   slight overshoot snapped the panel shut. */
/* Both :hover and :focus-within are gated on the un-enhanced path. When the
   script is running it owns the state alone — otherwise Escape closes the
   panel, focus returns to the trigger, and :focus-within re-opens it before
   the keypress has finished. */
.lbk-nav-desktop:not(.is-enhanced) .lbk-has-children:hover > .lbk-submenu,
.lbk-nav-desktop:not(.is-enhanced) .lbk-has-children:focus-within > .lbk-submenu,
.lbk-nav-desktop .lbk-has-children.is-open > .lbk-submenu { display: block; }

.lbk-nav-desktop:not(.is-enhanced) .lbk-has-children:hover > .lbk-menu-link .lbk-caret,
.lbk-nav-desktop:not(.is-enhanced) .lbk-has-children:focus-within > .lbk-menu-link .lbk-caret,
.lbk-nav-desktop .lbk-has-children.is-open > .lbk-menu-link .lbk-caret { transform: rotate(180deg); }

/* An open item keeps the accent while its panel is on screen. */
.lbk-nav-desktop .lbk-has-children.is-open > .lbk-menu-link { color: var(--lbk-accent-deep); }
.lbk-submenu-link {
    display: block; padding: .5rem .75rem; border-radius: 8px;
    font-size: .84rem; line-height: 1.4; color: var(--lbk-text);
    text-decoration: none;
}
.lbk-submenu-link:hover { background: var(--lbk-bg); color: var(--lbk-primary); text-decoration: none; }
/* Long groups read better in two columns; short ones stay single. */
.lbk-nav-desktop .lbk-submenu.is-wide { min-width: 580px; column-count: 2; column-gap: .6rem; }
.lbk-nav-desktop .lbk-submenu.is-wide > li { break-inside: avoid; }

.lbk-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none;
    background: transparent; border: 1px solid var(--lbk-hairline-2);
    border-radius: 10px; color: var(--lbk-primary);
    font-size: 1.3rem; cursor: pointer;
}
.lbk-burger:hover { background: var(--lbk-soft); }

/* The desktop nav appears at 1200px, not 1100px. At 1100 the bar does not fit:
   brand, six nowrap menu items and the CTA together need more room than the
   shell has, and because the <ul> simply overflows its flex parent rather than
   wrapping, the result is not a scrollbar but siblings painted on top of each
   other — the brand over "Komodo Park", the CTA over "About", and "Journal"
   gone entirely. An overflow census does not see that: nothing exceeds the
   viewport. Measured intrinsic gaps between brand / nav / CTA after the header
   was tightened: -21px at 1100, +1px at 1150, +23px at 1200. 1200 is the first
   width that actually fits, so that is where the nav is allowed to appear.
   Re-measure with the header-fit probe before changing anything in this bar. */
@media (min-width: 1200px) {
    .lbk-nav-desktop { display: flex; }
    .lbk-burger { display: none; }
}

/* Below 720px the brand, the full-label CTA and the burger no longer fit on
   one row — measured at 449px of content in a 375px viewport. The CTA is not
   lost: it is the first thing in the drawer, and the floating WhatsApp action
   stays on screen throughout. */
@media (max-width: 719px) {
    .lbk-header-actions .lbk-btn { display: none; }
}

/* At the narrowest common widths the wordmark is stepped down rather than
   clipped, so it never renders as a truncated brand name.

   The step has to clear a real budget, not look about right: at 320px the bar
   has 288px of content box, the burger takes 42 and the header gap 16, so the
   brand must sit under 230px. Lora is wider than the Bodoni this replaced and
   the old .54/1.02rem step pushed the burger 4px past the viewport edge on
   every page. Re-measure at 320 with the overflow census after any edit. */
@media (max-width: 420px) {
    .lbk-brand-name   { font-size: .9rem; }
    .lbk-brand-kicker { font-size: .5rem; letter-spacing: .13em; }
}

/* Mobile drawer */
.lbk-overlay {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(28,16,10,.55); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--lbk-ease);
}
.lbk-overlay.is-open { opacity: 1; pointer-events: auto; }

.lbk-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
    width: min(360px, 88vw);
    background: var(--lbk-white);
    border-left: 1px solid var(--lbk-hairline);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s var(--lbk-ease);
    font-family: var(--lbk-font-body);
}
.lbk-drawer.is-open { transform: translateX(0); }
.lbk-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.15rem; border-bottom: 1px solid var(--lbk-hairline);
    background: var(--lbk-bg-soft); flex: none;
}
.lbk-drawer-label {
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    font-weight: 600; color: var(--lbk-accent-deep);
}
.lbk-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lbk-drawer-foot { flex: none; padding: 1rem 1.15rem 1.5rem; border-top: 1px solid var(--lbk-hairline); background: var(--lbk-bg-soft); }
.lbk-drawer-foot .lbk-btn { width: 100%; justify-content: center; }
.lbk-drawer-note { margin: .85rem 0 0; text-align: center; font-size: .72rem; color: var(--lbk-muted); line-height: 1.5; }

.lbk-drawer .lbk-nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
.lbk-drawer .lbk-nav-menu > li { border-bottom: 1px solid var(--lbk-hairline); }
.lbk-drawer .lbk-menu-link {
    padding: .95rem 1.15rem; font-size: .95rem; white-space: normal;
    flex: 1; min-height: 48px;
}
.lbk-drawer .lbk-menu-link .lbk-caret { display: none; }
.lbk-drawer .lbk-has-children { display: flex; flex-wrap: wrap; align-items: center; }
.lbk-drawer .lbk-submenu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; min-height: 48px; flex: none;
    background: transparent; border: 0; cursor: pointer; color: var(--lbk-primary);
}
.lbk-drawer .lbk-submenu-toggle[aria-expanded="true"] .lbk-caret { transform: rotate(180deg); }
.lbk-drawer .lbk-submenu {
    display: none; position: static; transform: none;
    width: 100%; min-width: 0; max-width: none;
    border: 0; border-top: 1px solid var(--lbk-hairline);
    border-radius: 0; box-shadow: none;
    background: var(--lbk-bg-soft);
    padding: .35rem 0 .6rem; max-height: none; overflow: visible;
}
.lbk-drawer .lbk-submenu.is-open { display: block; }
.lbk-drawer .lbk-submenu-link { padding: .6rem 1.15rem .6rem 1.75rem; border-radius: 0; min-height: 44px; display: flex; align-items: center; }

/* ── Hero ─────────────────────────────────────────────────────────────
   An inset rounded card rather than a full-bleed banner, so the page opens
   with the same silhouette every section below it uses. */
.lbk-hero-wrap { padding: 1.25rem var(--lbk-gutter) 0; background: var(--lbk-ground); }
.lbk-hero {
    position: relative;
    max-width: var(--lbk-maxw); margin-inline: auto;
    min-height: clamp(420px, 66vh, 620px);
    display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--lbk-primary);
    border-radius: var(--lbk-radius-lg);
    overflow: hidden;
    box-shadow: var(--lbk-shadow-lg);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}
.lbk-hero-media { position: absolute; inset: 0; z-index: 0; }
.lbk-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.lbk-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        rgba(28,16,10,.46) 0%,
        rgba(28,16,10,.52) 40%,
        rgba(28,16,10,.74) 72%,
        rgba(28,16,10,.92) 100%);
}
.lbk-hero-copy { position: relative; z-index: 2; width: 100%; }
.lbk-hero-eyebrow {
    display: inline-block;
    background: rgba(28,16,10,.72);
    color: #f7e4c2;
    font-size: .74rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .38rem .9rem; border-radius: var(--lbk-pill);
    margin: 0 0 1rem;
}
.lbk-hero h1 { color: #fff; max-width: 18ch; margin: 0 0 .75rem; text-shadow: 0 1px 24px rgba(0,0,0,.28); }
.lbk-hero-sub { color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 54ch; margin: 0 0 .6rem; }
.lbk-hero-note { color: rgba(255,255,255,.78); font-size: .92rem; max-width: 54ch; margin: 0 0 1.75rem; }
.lbk-hero .lbk-btn-primary { background: #fff; color: var(--lbk-primary); }
.lbk-hero .lbk-btn-primary:hover { background: var(--lbk-bg); color: var(--lbk-primary); }
.lbk-hero .lbk-btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.lbk-hero .lbk-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.lbk-hero-credit {
    position: absolute; z-index: 2; left: clamp(1rem, 3vw, 2rem); bottom: .9rem;
    font-size: .7rem; color: #fff; background: rgba(0,0,0,.62);
    padding: .25rem .7rem; border-radius: var(--lbk-pill);
}

/* ── Interior page hero ────────────────────────────────────────────────
   The front page's hero at interior scale, and it replaces the "masthead":
   a cream copy panel beside a photograph, with the headline on cream and the
   picture parked in the second column.

   Two things were wrong with that arrangement. The photograph had to share the
   opening with a block of copy, so neither got the width to carry a page, and
   on the pages with no photograph in the library — the policy pages, the blog
   index, the archives — the copy panel ran the full shell and the opening was
   a headline alone on cream. Here the picture is the opening at full width,
   the type sits on it, and a page with no picture paints the same frame in
   coffee rather than falling back to a different shape. Every page outside the
   front page now opens with the same silhouette that page does.

   The breadcrumb rides the top of the frame instead of standing above it,
   which is where the vertical space for a 340-480px picture comes from. */
.lbk-phero { padding: 1.25rem var(--lbk-gutter) 0; background: var(--lbk-ground); }
.lbk-phero-frame {
    position: relative;
    max-width: var(--lbk-maxw); margin-inline: auto;
    display: flex; flex-direction: column;
    border-radius: var(--lbk-radius-lg);
    overflow: hidden;
    box-shadow: var(--lbk-shadow-lg);
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 3rem);
    /* The ground under the photograph, and the whole surface without one. The
       radial is what stops a bare coffee panel reading as a flat brown box on
       the policy pages. */
    background:
        radial-gradient(120% 140% at 8% 0%, rgba(138,90,43,.42) 0%, rgba(138,90,43,0) 58%),
        linear-gradient(160deg, var(--lbk-primary-soft) 0%, var(--lbk-primary) 62%, #1c100a 100%);
}
.lbk-phero-sm .lbk-phero-frame { min-height: clamp(240px, 30vw, 340px); }
.lbk-phero-md .lbk-phero-frame { min-height: clamp(340px, 44vw, 480px); }

.lbk-phero-media { position: absolute; inset: 0; z-index: 0; }
.lbk-phero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

/* Deep at the foot, where the headline and the chips sit, and just dark enough
   at the top to hold a breadcrumb. These frames are mostly pale sand, sky and
   turquoise water, so a light scrim is not a safe assumption on any of them.
   Painted whether or not there is a photograph: over the coffee gradient it
   simply deepens the foot, which is the same job. */
.lbk-phero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        rgba(28,16,10,.62) 0%,
        rgba(28,16,10,.30) 26%,
        rgba(28,16,10,.52) 62%,
        rgba(28,16,10,.86) 88%,
        rgba(28,16,10,.94) 100%);
}
.lbk-phero:not(.has-media) .lbk-phero-scrim { background: none; }
/* A photograph earns the height; a gradient does not. Without one the frame
   drops to the short size whatever the template asked for, so a policy page
   opens on a band rather than on 480px of brown. The :not() carries its
   argument's weight, so this outranks the three size rules above it. */
.lbk-phero:not(.has-media) .lbk-phero-frame { min-height: clamp(200px, 24vw, 300px); }
.lbk-phero:not(.has-media) .lbk-phero-copy { padding-top: clamp(1.25rem, 3vw, 2rem); }

.lbk-phero-crumbs {
    position: relative; z-index: 2;
    font-size: .8rem; color: rgba(255,255,255,.78);
    margin: 0 0 auto;
}
.lbk-phero-crumbs a { color: rgba(255,255,255,.9); text-decoration: none; }
.lbk-phero-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.lbk-crumb-sep { display: inline-block; margin: 0 .45rem; color: rgba(255,255,255,.5); }

.lbk-phero-copy { position: relative; z-index: 2; width: 100%; padding-top: clamp(2rem, 5vw, 3.5rem); }

.lbk-phero-eyebrow {
    display: inline-block;
    background: rgba(28,16,10,.72);
    color: #f7e4c2;
    font-family: var(--lbk-font-body);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .36rem .85rem; border-radius: var(--lbk-pill);
    margin: 0 0 .9rem;
}
/* Two classes, because `.lbk-body h1` scores (0,1,1) and a single class cannot
   outrank it — the headline would keep the page-wide clamp and the dark ink. */
.lbk-phero .lbk-phero-copy h1 {
    color: #fff;
    margin: 0 0 .7rem;
    max-width: 24ch;
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.15;
    text-shadow: 0 1px 24px rgba(0,0,0,.32);
}
.lbk-phero-sm .lbk-phero-copy h1 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); }

.lbk-phero-dek {
    color: rgba(255,255,255,.9);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 0 1.25rem;
    text-shadow: 0 1px 16px rgba(0,0,0,.3);
}

/* Counted facts — update date, reading time, how many questions the page
   answers. Chips rather than a line of small print: on a photograph, small
   grey text is the first thing to go. */
.lbk-phero-meta {
    list-style: none; margin: 0 0 1.4rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.lbk-phero-meta li {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .8rem;
    border-radius: var(--lbk-pill);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: .8rem; line-height: 1.3;
}
.lbk-phero-meta i { font-size: 15px; color: #f2d9ae; }

.lbk-phero-actions { margin: 0; }
.lbk-phero .lbk-btn-primary { background: #fff; color: var(--lbk-primary); }
.lbk-phero .lbk-btn-primary:hover { background: var(--lbk-bg); color: var(--lbk-primary); }
.lbk-phero .lbk-btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.lbk-phero .lbk-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* The hero already carries a generous foot; the sheet below it does not need
   the standing top gap as well. */
.lbk-phero + .lbk-page { padding-top: clamp(1rem, 2vw, 1.5rem); }
.lbk-phero + .lbk-band { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

@media (max-width: 620px) {
    /* The chip row is the first thing to cost more than it earns at this
       width — three pills wrap to three lines above the button. The first two
       are the ones worth keeping: when a page has an update date it leads, and
       the reading time follows it. */
    .lbk-phero-meta li:nth-child(n+3) { display: none; }
    .lbk-phero-actions .lbk-btn { width: 100%; justify-content: center; }
}

/* ── Facts strip ──────────────────────────────────────────────────────── */
.lbk-facts { padding: clamp(1.75rem, 4vw, 2.75rem) var(--lbk-gutter); }
.lbk-facts-grid {
    max-width: var(--lbk-maxw); margin-inline: auto;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.1rem, 3vw, 2.25rem);
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
    padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.4rem);
}
.lbk-fact { border-left: 2px solid var(--lbk-accent); padding-left: 1rem; display: flex; flex-direction: column; }
.lbk-fact-value { margin-top: auto; }
.lbk-fact-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--lbk-muted); margin-bottom: .35rem; }
.lbk-fact-value { display: block; font-family: var(--lbk-font-head); font-size: 1.15rem; color: var(--lbk-primary); line-height: 1.3; }
@media (max-width: 860px) { .lbk-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .lbk-facts-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Numbered "how we work" cards ─────────────────────────────────────── */
/* Heading and a photograph share the top row, so the section opens with an
   image rather than three boxes of prose. */
.lbk-steps-head { margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem); }
.lbk-steps-head.has-media {
    display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
}
@media (min-width: 900px) {
    .lbk-steps-head.has-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.lbk-steps-figure { margin: 0; }
.lbk-steps-figure img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
}

.lbk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.5vw, 2rem); }
.lbk-step {
    background: var(--lbk-white); border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg); padding: clamp(1.5rem, 3vw, 2.1rem);
    box-shadow: var(--lbk-shadow-sm);
}
.lbk-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--lbk-pill);
    background: var(--lbk-soft-2); color: var(--lbk-accent-deep);
    font-size: .82rem; font-weight: 700; margin-bottom: .85rem;
}
.lbk-step h3 { margin: 0 0 .5rem; }
.lbk-step p  { margin: 0; font-size: .95rem; color: var(--lbk-muted); }
.lbk-step-body { font-size: .95rem; color: var(--lbk-muted); }
.lbk-step-body > * { margin: 0 0 .75rem; }
.lbk-step-body > *:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .lbk-steps { grid-template-columns: minmax(0, 1fr); } }

.lbk-stamp {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    font-size: .8rem; color: var(--lbk-muted);
    padding-top: 1rem; border-top: 1px solid var(--lbk-hairline);
}

/* ── Page shell: article sheet + sidebar ──────────────────────────────
   The two-column arrangement every page outside the front page uses, with
   the geometry of the reference the site is modelled on: a 1200px shell, an
   820px white sheet carrying the article, a 20px gutter and a 360px sidebar.
   The contents rail that used to sit to the LEFT of the prose is gone; the
   second column is now on the right and carries search, the enquiry card and
   the neighbouring guides. */
.lbk-page { padding: clamp(1.25rem, 3vw, 2.25rem) var(--lbk-gutter) var(--lbk-section); }
.lbk-page-in { max-width: var(--lbk-maxw); margin-inline: auto; }
.lbk-page-grid { display: grid; gap: clamp(1.25rem, 2vw, 1.5rem); align-items: start; }
@media (min-width: 1000px) {
    /* 1fr resolves to 820px inside the 1200px shell, which is the reference's
       own sheet width, and the sidebar track is its 360px. Stated as a track
       rather than left to the content, so the sheet cannot be pushed narrow
       by a wide table or a long unbroken URL in the sidebar. */
    .lbk-page-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}
.lbk-page-main { min-width: 0; }

/* The sheet the article is printed on. */
.lbk-sheet {
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
    padding: clamp(1.35rem, 4vw, 2.5rem);
}
/* The headline, the eyebrow and the opening photograph all moved into the
   hero, so the sheet now opens on the "In short" panel and its first child
   carries no top margin of its own. */
.lbk-sheet > :first-child { margin-top: 0; }
.lbk-sheet > .lbk-prose { margin-top: 1.75rem; }
/* Both carry the page-wide measure cap, which inside a sheet that is already
   the measure wide would leave a strip of white down their right edge. */
.lbk-sheet .lbk-answer,
.lbk-sheet .lbk-answer-body { max-width: none; }
/* The full freshness stamp — both dates — closing the article. The hero above
   carries only the update date. */
.lbk-sheet-stamp {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--lbk-hairline);
    font-size: .8rem; color: var(--lbk-muted);
}
.lbk-sheet > .lbk-disclosure { max-width: none; margin: 1.75rem 0 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.lbk-side { min-width: 0; }
/* The grid aligns its items to the start so the sheet keeps its own height.
   That leaves this column exactly as tall as its cards, and a sticky child
   can only travel inside its parent — so the sidebar unpinned after 810px and
   the right of the page went empty for the rest of the article. Stretching
   just this column gives the sticky stack the full row to move in. */
@media (min-width: 1000px) { .lbk-side { align-self: stretch; } }
.lbk-side-sticky { display: grid; gap: clamp(1rem, 1.6vw, 1.25rem); }
@media (min-width: 1000px) {
    /* Follows the reader. The reference leaves its sidebar static, which on a
       guide of this length means a 360px column standing empty for most of
       the page; sticking it keeps the enquiry card in reach instead. */
    .lbk-side-sticky { position: sticky; top: 88px; }
}
.lbk-side-card {
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
    padding: clamp(1.15rem, 2.2vw, 1.6rem);
}
.lbk-side-card-accent { background: var(--lbk-bg-soft); border-color: rgba(138,90,43,.20); }
/* Scoped through the card, not written as a bare `.lbk-side-title`. The card
   heading is an <h2>, and `.lbk-body h2` — which sets Lora at up to 36px —
   scores (0,1,1); a single class cannot outrank it, so the sidebar labels
   rendered as full display headings. Any new rule that styles an element the
   heading reset also matches needs two classes, or a descendant, to land. */
.lbk-side-card .lbk-side-title {
    margin: 0 0 .85rem;
    font-family: var(--lbk-font-body);
    font-size: .74rem; font-weight: 700;
    line-height: 1.35;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--lbk-accent-deep);
}
.lbk-side-note { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.55; color: var(--lbk-muted); }
.lbk-side-btn { width: 100%; justify-content: center; }
.lbk-side-btn + .lbk-side-btn { margin-top: .5rem; }

/* ── Search ───────────────────────────────────────────────────────────
   One control, three homes: the sidebar card, the blog listing and the
   results page. searchform.php is what WordPress reaches for on every
   get_search_form() call, so the 404 gets it too. */
.lbk-search { margin: 0; }
.lbk-search-row { display: flex; gap: .4rem; }
.lbk-search input[type="search"] {
    flex: 1; min-width: 0;
    padding: .6rem .75rem;
    font: inherit; font-size: .9rem;
    color: var(--lbk-text);
    background: var(--lbk-white);
    border: 1px solid var(--lbk-hairline-2); border-radius: 10px;
    /* Safari paints its own rounded inset box over the border otherwise. */
    -webkit-appearance: none; appearance: none;
}
.lbk-search input[type="search"]::placeholder { color: var(--lbk-muted); opacity: 1; }
.lbk-search input[type="search"]:focus-visible { outline: 2px solid var(--lbk-accent); outline-offset: 1px; }
.lbk-search button {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--lbk-primary); color: #fff;
    border: 0; border-radius: 10px; cursor: pointer;
    font-family: var(--lbk-font-body); font-size: .88rem; font-weight: 500;
    padding: 0 .9rem; min-height: 42px;
    transition: background-color .18s var(--lbk-ease);
}
.lbk-search button:hover { background: var(--lbk-primary-soft); }
.lbk-search button i { font-size: 1.05rem; }
/* In the 360px sidebar card the word does not fit beside the field, so the
   button falls back to its icon. */
.lbk-side-card .lbk-search button { width: 42px; padding: 0; }
.lbk-side-card .lbk-search button span { display: none; }

.lbk-search-label {
    display: block; margin: 0 0 .5rem;
    font-family: var(--lbk-font-body);
    font-size: .74rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--lbk-accent-deep);
}
.lbk-search-lg { max-width: 560px; }
.lbk-search-lg input[type="search"] { padding: .78rem 1rem; font-size: .98rem; }
.lbk-search-lg button { min-height: 50px; padding: 0 1.25rem; font-size: .92rem; }

/* The standing search block above a listing. */
.lbk-archive-tools { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.lbk-search-meta { margin: .85rem 0 0; font-size: .88rem; color: var(--lbk-muted); }
.lbk-search-meta a { color: var(--lbk-accent-deep); margin-left: .35rem; }

@media (max-width: 520px) {
    /* The label already says what the button does; at this width the two
       together push the field under 150px. */
    .lbk-search-lg button span { display: none; }
    .lbk-search-lg button { width: 50px; padding: 0; }
}

.lbk-side-list { list-style: none; margin: 0; padding: 0; }
.lbk-side-list li + li { margin-top: .15rem; }
.lbk-side-list a {
    display: block; padding: .5rem .6rem;
    border-radius: 8px;
    font-size: .89rem; line-height: 1.45; font-weight: 500;
    color: var(--lbk-primary);
    /* Stated at rest: the site-wide `li a { text-decoration: underline }`
       accessibility rule would otherwise rule every entry in the list. */
    text-decoration: none;
    transition: background-color .18s var(--lbk-ease);
}
.lbk-side-list a:hover { background: var(--lbk-soft); color: var(--lbk-accent-deep); text-decoration: none; }

/* Below the two-column breakpoint the sidebar follows the article rather than
   preceding it: on a phone the enquiry card belongs after the answer, not
   between the title and the first paragraph. */
@media (max-width: 999px) {
    .lbk-side-sticky { grid-template-columns: 1fr; }
}

/* ── Editorial prose ──────────────────────────────────────────────────── */
.lbk-article { padding: var(--lbk-section) var(--lbk-gutter); }
.lbk-article-in { max-width: var(--lbk-maxw); margin-inline: auto; }
.lbk-prose { max-width: var(--lbk-prose); }
/* On a sheet the measure is the sheet's own width minus its padding — 740px,
   the reference's figure. A second cap here would leave an empty strip down
   the right of every paragraph, which is what the old rail layout did. */
.lbk-sheet .lbk-prose { max-width: none; }
/* Vertical rhythm has a single owner: every direct child carries its own
   bottom margin. Setting `margin: 0` on .lbk-prose p later in the file would
   silently win over a `* + *` rule and collapse the paragraph spacing. */
.lbk-prose > * { margin-top: 0; margin-bottom: 1.15em; }
.lbk-prose > *:last-child { margin-bottom: 0; }
.lbk-prose > h2 { margin-top: 2.25em; }
/* A hairline above each section heading. The guide is one continuous sheet,
   and the rule is what keeps seventeen sections reading as seventeen sections
   rather than as one undifferentiated column. */
.lbk-sheet .lbk-prose > h2 { padding-top: 1.15em; border-top: 1px solid var(--lbk-hairline); }
.lbk-sheet .lbk-prose > h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.lbk-prose > h3 { margin-top: 1.75em; }
.lbk-prose > *:first-child { margin-top: 0; }
.lbk-prose p { color: var(--lbk-text); }
.lbk-prose ul, .lbk-prose ol { padding-left: 1.35em; }
.lbk-prose li + li { margin-top: .5em; }
.lbk-prose li::marker { color: var(--lbk-accent); }
.lbk-prose strong { font-weight: 600; color: var(--lbk-primary); }
.lbk-prose a { color: var(--lbk-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.lbk-prose blockquote {
    margin: 0; padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--lbk-accent);
    color: var(--lbk-muted); font-style: italic;
}
/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.lbk-tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0;
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line); border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
}
.lbk-tablewrap thead th { background: var(--lbk-bg-soft); }
.lbk-tablewrap table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.lbk-tablewrap th, .lbk-tablewrap td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--lbk-hairline); vertical-align: top; }
.lbk-tablewrap thead th { background: var(--lbk-bg-soft); font-family: var(--lbk-font-body); font-weight: 600; color: var(--lbk-primary); white-space: nowrap; }
.lbk-tablewrap tbody tr:last-child td { border-bottom: 0; }

/* ── Published rates ──────────────────────────────────────────────────
   This was the most text-driven block on the front page: a heading, two
   paragraphs and a bare four-column table. It now leads with a photograph
   and carries one on every rate row.

   The pictures are load-bearing, not decoration. A frame beside a price is
   read as a picture of what that price buys, so each row's photograph has to
   show the vessel type named in that row — see section-rates.php. */
.lbk-parkcost {
    display: grid; gap: 0;
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
    overflow: hidden;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.lbk-parkcost-figure { margin: 0; background: var(--lbk-ground-soft); aspect-ratio: 16 / 9; }
.lbk-parkcost-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* align-items, because the body is a flex column at the wide breakpoint and
   a stretched .lbk-answer-label runs its pill the full width of the panel. */
.lbk-parkcost-body { padding: clamp(1.35rem, 2.6vw, 1.9rem); align-items: flex-start; }
.lbk-parkcost-body .lbk-answer-label { align-self: flex-start; }
.lbk-parkcost-body p:last-child { margin: 0; }
.lbk-parkcost-body > p:not(.lbk-answer-label) {
    margin: 0; max-width: 62ch; color: var(--lbk-text);
}
@media (min-width: 820px) {
    .lbk-parkcost.has-media { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); align-items: stretch; }
    /* Height comes from the copy column, which is what lets the picture fill
       its cell instead of setting the panel's height from a fixed ratio. */
    .lbk-parkcost-figure { aspect-ratio: auto; height: 100%; }
    .lbk-parkcost-body { display: flex; flex-direction: column; justify-content: center; }
}

/* The option cell carries the photograph, so it sets the row height and needs
   the table's default top alignment overridden to centre against it. */
.lbk-ratetable table { min-width: 680px; }
/* Left to itself the table hands all the slack to the first column, which
   opened a 200px gutter between a boat's name and how it is priced. */
.lbk-ratetable th:nth-child(1), .lbk-ratetable td:nth-child(1) { width: 34%; }
.lbk-ratetable th:nth-child(2), .lbk-ratetable td:nth-child(2) { width: 30%; }
.lbk-ratetable th:nth-child(3), .lbk-ratetable td:nth-child(3) { width: 22%; }
.lbk-ratetable th:nth-child(4), .lbk-ratetable td:nth-child(4) { width: 14%; }
.lbk-ratetable tbody th, .lbk-ratetable tbody td { vertical-align: middle; padding-top: .7rem; padding-bottom: .7rem; }
.lbk-rate-option { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.lbk-rate-thumb {
    flex: none; width: 104px; aspect-ratio: 3 / 2;
    border-radius: var(--lbk-radius); overflow: hidden;
    background: var(--lbk-ground-soft);
}
.lbk-rate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbk-rate-name { font-weight: 600; color: var(--lbk-primary); }
/* The figure is what a reader scans for, so it is set in the display face at
   the size the rest of the row is not. */
.lbk-rate-figure {
    font-family: var(--lbk-font-head);
    font-size: 1.08rem; color: var(--lbk-primary); white-space: nowrap;
}
/* "Start from" rides above the number as an eyebrow rather than beside it: on
   the widest rows the figure is already close to the column edge, and a prefix
   set inline would either wrap mid-phrase or push the amount out of the cell. */
.lbk-rate-from {
    display: block;
    font-family: var(--lbk-font-body);
    font-size: .66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--lbk-accent-deep);
    margin-bottom: .1rem;
}
.lbk-rate-amount { display: block; }
/* Below 700px the table becomes a stack of cards. Left as a table it needed
   680px of width inside a 440px wrapper, and the column that scrolled out of
   sight was Rate — the one number a reader came for. A card per option keeps
   the photograph, the name, the pricing basis and the figure all on screen
   with no horizontal scrolling at all. */
@media (max-width: 700px) {
    .lbk-ratetable { overflow-x: visible; }
    .lbk-ratetable table { min-width: 0; display: block; }
    .lbk-ratetable thead { display: none; }
    .lbk-ratetable tbody { display: block; }
    .lbk-ratetable tbody tr {
        display: block; padding: 1rem 1.15rem 1.15rem;
        border-bottom: 1px solid var(--lbk-hairline);
    }
    .lbk-ratetable tbody tr:last-child { border-bottom: 0; }
    .lbk-ratetable tbody th, .lbk-ratetable tbody td {
        display: block; padding: 0; border-bottom: 0;
    }
    /* The percentage column widths above are (0,2,1) and outrank a plain
       `tbody th` rule, so the stacked cards kept the table's 34/30/22/14 split
       and every line wrapped inside a third of the card. Matched selector,
       later in the file. */
    .lbk-ratetable th:nth-child(1), .lbk-ratetable td:nth-child(1),
    .lbk-ratetable th:nth-child(2), .lbk-ratetable td:nth-child(2),
    .lbk-ratetable th:nth-child(3), .lbk-ratetable td:nth-child(3),
    .lbk-ratetable th:nth-child(4), .lbk-ratetable td:nth-child(4) { width: auto; }
    .lbk-ratetable tbody th { margin: 0 0 .85rem; }
    .lbk-rate-option { gap: .85rem; }
    .lbk-rate-thumb { width: 92px; }
    .lbk-ratetable tbody td { margin-top: .55rem; }
    .lbk-ratetable tbody td::before {
        content: attr(data-label);
        display: block; margin-bottom: .12rem;
        font-size: .66rem; font-weight: 700; letter-spacing: .1em;
        text-transform: uppercase; color: var(--lbk-muted);
    }
    .lbk-rate-figure { font-size: 1.15rem; white-space: normal; }
    /* The stacked card already prints the column heading ("Rate from") from
       data-label in this exact eyebrow style, so the inline label would stack a
       second, near-identical line straight above the amount. */
    .lbk-rate-from { display: none; }
}

/* Was an inline style attribute on the paragraph. */
.lbk-rates-note {
    margin: clamp(1.1rem, 2vw, 1.4rem) 0 0;
    font-size: .9rem; color: var(--lbk-muted); max-width: 80ch;
}

/* Answer-first callout — the summary box the source site opens guides with */
.lbk-answer {
    background: var(--lbk-bg-soft);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
    max-width: var(--lbk-prose);
}

/* The label is a badge rather than a line of small caps — it has to hold its
   own against a headline sitting directly above it. */
.lbk-answer-label {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0 0 .85rem; padding: .32rem .7rem .32rem .55rem;
    border-radius: var(--lbk-pill);
    background: rgba(138,90,43,.13); color: var(--lbk-accent-deep);
    font-family: var(--lbk-font-body);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.lbk-answer-label i { font-size: 15px; }

.lbk-answer p { margin: 0; }
.lbk-answer p + p { margin-top: .75rem; }
.lbk-answer-body { max-width: 68ch; }

/* A single long URL or token can break the box; wrap only that token. */
.lbk-nowrap-url { word-break: break-all; }

/* ── Cards & rails ────────────────────────────────────────────────────── */
.lbk-rail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.lbk-rail-grid.is-featured { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.lbk-card {
    display: block; background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line); border-radius: var(--lbk-radius-lg);
    padding: 1.75rem 1.6rem;
    box-shadow: var(--lbk-shadow-sm);
    transition: transform .2s var(--lbk-ease), box-shadow .2s var(--lbk-ease), border-color .2s var(--lbk-ease);
    text-decoration: none;
}
.lbk-card:hover { transform: translateY(-3px); border-color: rgba(138,90,43,.28); box-shadow: var(--lbk-shadow); text-decoration: none; }
.lbk-card { display: flex; flex-direction: column; }
.lbk-card h3 { font-size: 1.12rem; margin: 0 0 .5rem; color: var(--lbk-primary); }
.lbk-card p  { font-size: .9rem; color: var(--lbk-muted); margin: 0 0 1.1rem; }
.lbk-card-tag { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--lbk-accent-deep); margin-bottom: .6rem; }
.lbk-card-cta { font-size: .85rem; font-weight: 600; color: var(--lbk-primary); margin-top: auto; }
.lbk-card.is-main { background: var(--lbk-primary); border-color: var(--lbk-primary); }
.lbk-card.is-main h3 { color: #fff; }
.lbk-card.is-main p  { color: rgba(255,255,255,.85); }
.lbk-card.is-main .lbk-card-tag,
.lbk-card.is-main .lbk-card-cta { color: #f2d9ae; }
@media (max-width: 1000px) { .lbk-rail-grid, .lbk-rail-grid.is-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lbk-rail-grid, .lbk-rail-grid.is-featured { grid-template-columns: minmax(0, 1fr); } }

.lbk-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.6rem); }
@media (max-width: 900px) { .lbk-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.lbk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (max-width: 780px) { .lbk-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ── Media cards ──────────────────────────────────────────────────────
   A photograph with the place name over a scrim, and the description on
   white below it. Copy never sits on the image itself: the moment an editor
   swaps the photo for a brighter one, overlaid body text stops being
   readable and nothing warns them. */
.lbk-media-card {
    display: flex; flex-direction: column;
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    overflow: hidden; text-decoration: none;
    box-shadow: var(--lbk-shadow-sm);
    transition: transform .2s var(--lbk-ease), box-shadow .2s var(--lbk-ease), border-color .2s var(--lbk-ease);
}
.lbk-media-card:hover { transform: translateY(-3px); border-color: rgba(138,90,43,.28); box-shadow: var(--lbk-shadow); text-decoration: none; }

.lbk-media-figure { position: relative; aspect-ratio: 16 / 10; background: var(--lbk-bg-soft); }
.lbk-media-figure img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s var(--lbk-ease);
}
.lbk-media-card:hover .lbk-media-figure img { transform: scale(1.04); }
.lbk-media-scrim {
    position: absolute; inset: 0;
    /* Deep enough at the foot that a white title holds on a bright photo:
       these frames are mostly pale sand, sky and turquoise water. */
    background: linear-gradient(180deg,
        rgba(28,16,10,0) 30%,
        rgba(28,16,10,.42) 58%,
        rgba(28,16,10,.78) 80%,
        rgba(28,16,10,.94) 100%);
}
.lbk-media-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.4rem 1.5rem; }
.lbk-media-body p { margin: 0 0 1.1rem; font-size: .92rem; color: var(--lbk-muted); line-height: 1.7; }
.lbk-media-body .lbk-card-cta { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
    .lbk-media-card, .lbk-media-figure img { transition: none; }
    .lbk-media-card:hover { transform: none; }
    .lbk-media-card:hover .lbk-media-figure img { transform: none; }
}

/* Compact variant: a title over the photo is not used here, so the frame is
   shorter and the title sits on white where a long page title stays legible
   however bright the photograph is. */
.lbk-media-card-compact .lbk-media-figure { aspect-ratio: 16 / 9; }
.lbk-media-card-compact .lbk-media-body { padding: 1.15rem 1.3rem 1.35rem; }
.lbk-media-card-compact h3 {
    font-size: 1.02rem; line-height: 1.35; margin: 0 0 .9rem;
    color: var(--lbk-primary);
}
.lbk-media-card-compact .lbk-card-cta { margin-top: auto; }

/* ── Park stops ───────────────────────────────────────────────────────
   The headline stops in the park, numbered, with the first given the weight
   of an opening.

   This replaced a plain three-column card grid. Five cards in three columns
   left one empty cell at the bottom right, and the section read as
   unfinished no matter how good the photographs were. Widening the first
   card closes the grid; see the arithmetic in section-highlights.php, which
   decides per item count rather than assuming five.

   The numbers are the other half of the change. These are stops on a route,
   not a shelf of unrelated cards, and the ordinal is what makes the set read
   as a sequence — it is also the one label the template may add, because it
   states nothing the source does not. */
.lbk-stops {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.1rem, 2.5vw, 1.6rem);
}
.lbk-stops > li { display: flex; min-width: 0; }
.lbk-stop.is-featured, .lbk-stop.is-wide { grid-column: span 2; }

.lbk-stop-in {
    display: flex; flex-direction: column; flex: 1; min-width: 0;
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    overflow: hidden; text-decoration: none;
    box-shadow: var(--lbk-shadow-sm);
    transition: transform .2s var(--lbk-ease), box-shadow .2s var(--lbk-ease), border-color .2s var(--lbk-ease);
}
.lbk-stop-in:hover {
    transform: translateY(-3px); border-color: rgba(138,90,43,.28);
    box-shadow: var(--lbk-shadow); text-decoration: none;
}

.lbk-stop-figure { position: relative; aspect-ratio: 16 / 10; background: var(--lbk-bg-soft); flex: none; }
.lbk-stop-figure img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s var(--lbk-ease);
}
.lbk-stop-in:hover .lbk-stop-figure img { transform: scale(1.04); }
.lbk-stop-scrim {
    position: absolute; inset: 0;
    /* Deep enough at the foot that a white title holds on a bright photo:
       these frames are mostly pale sand, sky and turquoise water. */
    background: linear-gradient(180deg,
        rgba(28,16,10,0) 30%,
        rgba(28,16,10,.42) 58%,
        rgba(28,16,10,.78) 80%,
        rgba(28,16,10,.94) 100%);
}

/* The ordinal and the stop name are one mark, set on the deepest part of the
   scrim. Held apart — a badge at the top corner, a title at the bottom — they
   landed on whatever the photograph happened to put there, and on a frame like
   the dragon the badge sat in open sky while the title sat on the animal. */
.lbk-stop-label {
    position: absolute; z-index: 2;
    left: 1.25rem; right: 1.25rem; bottom: 1.05rem;
    display: flex; align-items: baseline; gap: .85rem;
}
/* Set in the display face, at the size of the title it numbers: the figure is
   part of the label's typography now, not a chip stuck beside it. The rule to
   its right is what keeps the two readable as one line. */
.lbk-stop-num {
    flex: none;
    padding-right: .85rem;
    border-right: 1px solid rgba(255, 226, 199, .45);
    font-family: var(--lbk-font-head);
    font-size: 1.05rem; font-weight: 600; line-height: 1.32;
    letter-spacing: .02em;
    color: var(--lbk-bg);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* (0,2,0) so it outranks `.lbk-body h3`, which sets the coffee heading colour
   and would otherwise paint this title dark-on-photograph. A single-class
   rule here loses that fight silently. */
.lbk-stop-figure .lbk-stop-title {
    margin: 0; min-width: 0; color: #fff;
    font-size: 1.1rem; line-height: 1.32;
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.45);
}
.lbk-stop-title.is-plain {
    display: flex; align-items: baseline; gap: .85rem;
    margin: 0; padding: 1.4rem 1.5rem 0;
    color: var(--lbk-primary); text-shadow: none; font-size: 1.1rem; line-height: 1.32;
}
.lbk-stop-num.is-plain {
    color: var(--lbk-accent-deep); text-shadow: none;
    border-right-color: var(--lbk-soft-2);
}

.lbk-stop-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
/* A short brass stroke opens each body, echoing the rule inside the label band
   above it — the one detail that ties the white half of the card to the photo. */
.lbk-stop-body::before {
    content: ''; display: block; flex: none;
    width: 26px; height: 2px; margin-bottom: .95rem;
    background: linear-gradient(90deg, var(--lbk-accent), rgba(138, 90, 43, .18));
    transition: width .3s var(--lbk-ease);
}
.lbk-stop-in:hover .lbk-stop-body::before { width: 44px; }
.lbk-stop-body p { margin: 0 0 1.1rem; font-size: .92rem; color: var(--lbk-muted); line-height: 1.7; }
.lbk-stop-body .lbk-card-cta { margin-top: auto; }

/* The featured card runs photo beside copy, so the widened cell reads as one
   deliberate object rather than a card that was stretched. */
@media (min-width: 1001px) {
    .lbk-stop.is-featured .lbk-stop-in, .lbk-stop.is-wide .lbk-stop-in { flex-direction: row; }
    /* The figure takes its height from the ordinary card beside it, so the
       narrower this column is the more portrait the crop becomes. An even split
       is the widest frame the side-by-side layout can give a landscape photo. */
    .lbk-stop.is-featured .lbk-stop-figure,
    .lbk-stop.is-wide .lbk-stop-figure { aspect-ratio: auto; width: 50%; }
    .lbk-stop.is-featured .lbk-stop-body,
    .lbk-stop.is-wide .lbk-stop-body { justify-content: center; padding: 1.75rem 1.9rem; }
    .lbk-stop.is-featured .lbk-stop-body p { font-size: .97rem; }
    /* The row's height is set by the ordinary card beside this one, so an
       auto top margin on the link opens a hole in the middle of the copy.
       Centred as one block, the paragraph and its link stay together. */
    .lbk-stop.is-featured .lbk-stop-body .lbk-card-cta,
    .lbk-stop.is-wide .lbk-stop-body .lbk-card-cta { margin-top: 0; }
}

@media (max-width: 1000px) {
    .lbk-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* At two columns the featured card takes the whole row, which fills the
       grid whenever the count is odd; is-wide-2col closes the even case. */
    .lbk-stop.is-featured, .lbk-stop.is-wide-2col { grid-column: 1 / -1; }
    .lbk-stop.is-wide { grid-column: auto; }
    .lbk-stop.is-featured .lbk-stop-in { flex-direction: row; }
    .lbk-stop.is-featured .lbk-stop-figure { aspect-ratio: auto; width: 42%; }
    .lbk-stop.is-featured .lbk-stop-body { justify-content: center; }
    .lbk-stop.is-featured .lbk-stop-body .lbk-card-cta { margin-top: 0; }
}
@media (max-width: 720px) {
    .lbk-stops { grid-template-columns: minmax(0, 1fr); }
    .lbk-stop.is-featured, .lbk-stop.is-wide, .lbk-stop.is-wide-2col { grid-column: auto; }
    .lbk-stop.is-featured .lbk-stop-in { flex-direction: column; }
    .lbk-stop.is-featured .lbk-stop-figure { aspect-ratio: 16 / 10; width: auto; }
    .lbk-stop.is-featured .lbk-stop-body { justify-content: flex-start; padding: 1.25rem 1.4rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lbk-stop-in, .lbk-stop-figure img { transition: none; }
    .lbk-stop-in:hover { transform: none; }
    .lbk-stop-in:hover .lbk-stop-figure img { transform: none; }
}

/* Eyebrow and stop-count share one row above the heading, so the intro below
   is uninterrupted prose rather than text wrapping around a pill. */
.lbk-stops-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .85rem;
    margin: 0 0 .75rem;
}
.lbk-stops-kicker .lbk-eyebrow { margin: 0; }
.lbk-stops-count {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .32rem .7rem; border-radius: var(--lbk-pill);
    background: rgba(138,90,43,.13); color: var(--lbk-accent-deep);
    font-family: var(--lbk-font-body);
    font-size: .7rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; line-height: 1;
}
.lbk-stops-count i { font-size: 14px; }
/* Was an inline style attribute on the paragraph. */
.lbk-stops-note {
    margin: clamp(1.35rem, 2.5vw, 1.85rem) 0 0;
    font-size: .92rem; color: var(--lbk-muted); max-width: 70ch;
}

/* ── Collapsible article sections ─────────────────────────────────────
   A fifteen-section hub is fifteen screens of continuous prose otherwise.
   The headings stay visible and scannable; the bodies fold away. */
/* Each section is its own card on the ground, the same silhouette the FAQ,
   topic and itinerary blocks already use — inside a panel they were the one
   flat, undifferentiated thing on the page. */
.lbk-prose-cards > .lbk-article-section {
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
    margin: 0 0 .85rem;
    transition: border-color .2s var(--lbk-ease), box-shadow .2s var(--lbk-ease);
}
.lbk-prose-cards > .lbk-article-section:last-child { margin-bottom: 0; }
/* Editor-typed content on a guide, in its own panel below the section cards. */
.lbk-article-extra { margin-top: .85rem; }
.lbk-prose-cards > .lbk-article-section:hover { border-color: rgba(138,90,43,.28); }
.lbk-prose-cards > .lbk-article-section[open] {
    border-color: rgba(138,90,43,.30);
    box-shadow: var(--lbk-shadow);
}

.lbk-article-section > summary {
    display: flex; align-items: flex-start; gap: 1rem;
    list-style: none; cursor: pointer;
    padding: 1.25rem 1.4rem;
    transition: background-color .2s var(--lbk-ease);
}
.lbk-article-section > summary::-webkit-details-marker { display: none; }
.lbk-article-section > summary:hover { background: var(--lbk-bg-soft); }
.lbk-article-section[open] > summary { background: var(--lbk-bg-soft); }
.lbk-prose-cards > .lbk-article-section > summary { border-radius: var(--lbk-radius-lg); }
.lbk-prose-cards > .lbk-article-section[open] > summary { border-radius: var(--lbk-radius-lg) var(--lbk-radius-lg) 0 0; }
.lbk-article-section > summary > h2 {
    margin: 0; flex: 1;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.3;
}

/* The number is the link back to the contents rail, which carries the same
   one. */
.lbk-section-num {
    flex: none; width: 2rem; height: 2rem; margin-top: .1rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--lbk-pill);
    background: rgba(138,90,43,.14); color: var(--lbk-accent-deep);
    font-family: var(--lbk-font-body);
    font-size: .78rem; font-weight: 700; line-height: 1;
    transition: background-color .2s var(--lbk-ease), color .2s var(--lbk-ease);
}
.lbk-article-section[open] > summary > .lbk-section-num {
    background: var(--lbk-primary); color: #fff;
}

/* The caret is a real affordance here — without it a heading that folds looks
   exactly like a heading that does not. */
.lbk-section-caret {
    flex: none; width: 34px; height: 34px; margin-top: .15rem;
    border-radius: var(--lbk-pill);
    background: var(--lbk-bg); color: var(--lbk-accent-deep);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .25s var(--lbk-ease), background-color .2s var(--lbk-ease);
}
.lbk-section-caret::after {
    content: ''; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
}
.lbk-article-section[open] > summary > .lbk-section-caret {
    transform: rotate(180deg);
    background: transparent; color: var(--lbk-accent-deep);
}
.lbk-section-caret { background: transparent; width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) {
    .lbk-section-caret, .lbk-article-section > summary { transition: none; }
}

.lbk-article-section-body { padding: 1.25rem 1.4rem 1.5rem; border-top: 1px solid var(--lbk-card-line); }
.lbk-prose-cards > .lbk-article-section > .lbk-article-section-body { padding-left: 4.4rem; }
@media (max-width: 620px) {
    .lbk-prose-cards > .lbk-article-section > .lbk-article-section-body { padding-left: 1.4rem; }
}
.lbk-article-section-body > * { margin-top: 0; margin-bottom: 1.15em; }
.lbk-article-section-body > *:last-child { margin-bottom: 0; }
.lbk-article-section-body > h3 { margin-top: 1.75em; }
.lbk-article-section-body p { color: var(--lbk-text); }
.lbk-article-section-body ul,
.lbk-article-section-body ol { padding-left: 1.35em; }
.lbk-article-section-body li + li { margin-top: .5em; }
.lbk-article-section-body li::marker { color: var(--lbk-accent); }
.lbk-article-section-body strong { font-weight: 600; color: var(--lbk-primary); }
.lbk-article-section-body a {
    color: var(--lbk-accent-deep);
    text-decoration: underline; text-underline-offset: 2px;
}
.lbk-article-section-body a:hover { color: var(--lbk-primary); }

/* A photograph set into the article column. */
.lbk-figure { margin: 2rem 0; }
.lbk-figure img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
}
/* The prose column owns vertical rhythm through its direct children, so the
   figure has to declare its own or it inherits the 1.15em body gap. */
.lbk-prose > .lbk-figure { margin-top: 2rem; margin-bottom: 2rem; }

/* A caption under the frame. When one is printed the image carries an empty
   alt — see section-figure.php — so this line is the only description of the
   photograph, and it is set as editorial text rather than as small print. */
.lbk-figure figcaption {
    margin-top: .7rem;
    padding-left: .85rem;
    border-left: 2px solid var(--lbk-accent);
    font-size: .85rem; line-height: 1.55;
    color: var(--lbk-muted);
}

/* ── Photo strip ──────────────────────────────────────────────────────
   Four frames across, captioned, between an article and its FAQ. Used where
   a page is otherwise a stack of prose and accordions with nothing for the
   eye to rest on.

   auto-fit rather than a fixed four: the count comes from whatever the photo
   library has left for the slug after the hero and the in-article frames have
   taken theirs, and a hard column count leaves a hole the moment it changes. */
.lbk-gallery {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.lbk-gallery-item figure { margin: 0; }
.lbk-gallery-frame {
    position: relative; aspect-ratio: 4 / 5;
    border-radius: var(--lbk-radius-lg); overflow: hidden;
    background: var(--lbk-bg-soft);
    box-shadow: var(--lbk-shadow-sm);
}
.lbk-gallery-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--lbk-ease);
}
.lbk-gallery-item:hover .lbk-gallery-frame img { transform: scale(1.04); }
.lbk-gallery-item figcaption {
    margin-top: .7rem;
    font-size: .82rem; line-height: 1.5; color: var(--lbk-muted);
}
.lbk-gallery-note { margin: 1.5rem 0 0; font-size: .85rem; color: var(--lbk-muted); }

/* The illustration the editor content opens each guide with. It is a square
   1024px file carrying its own `width:100%;height:auto`, so at the head of a
   740px column it painted a 740px-tall block — a full screen of picture before
   the first section. Cropped to the same 16/9 the theme's own figures use, it
   is an illustration inside an article instead of a second hero. The inline
   height:auto is on the element, so the override has to be too — hence
   !important, the one place in this file that needs it.

   The caption is whatever the content carries. Most of these frames are now
   photographs with a caption naming the place; the handful still awaiting one
   keep the composite's own "AI-generated illustrative image." line. */
.lbk-prose .lbk-inline-img { margin: 1.75rem 0 !important; }
.lbk-prose .lbk-inline-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    object-fit: cover;
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
}
.lbk-prose .lbk-inline-img figcaption {
    margin-top: .7rem;
    padding-left: .85rem;
    border-left: 2px solid var(--lbk-hairline-2);
    font-size: .8rem; line-height: 1.5;
    color: var(--lbk-muted);
}

/* The same editor content opens eight pages with `<section class="lbk-hero">`,
   which is the front page's hero class: a deep-coffee panel with a 420px floor,
   written for white type sitting over a photograph behind a scrim. Inside an
   article there is no photograph and no scrim, so the panel painted plain
   coffee and the paragraph in it — .lbk-hero-lede, which the theme styles
   nowhere — kept the article's dark ink and vanished into the ground. On two
   of those pages the section is left unclosed in the content as well, so it
   swallowed the rest of the article and took every heading and paragraph on
   the page down with it.

   Scoped to .lbk-prose the panel drops back to the article's own surface: no
   coffee, no floor, no hero padding. What is left is a lead-in block — a
   label, an illustration, a lede and a link — set in the article's own ink,
   and an unclosed section costs the page nothing. The front page's hero and
   the interior-page hero are untouched; both sit outside .lbk-prose. */
.lbk-prose .lbk-hero {
    display: block;
    min-height: 0;
    max-width: none;
    margin: 0 0 1.75rem;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    color: inherit;
}
.lbk-prose .lbk-hero-eyebrow {
    margin: 0 0 1rem;
    background: rgba(138,90,43,.13);
    color: var(--lbk-accent-deep);
}
.lbk-prose .lbk-hero-lede {
    color: var(--lbk-primary);
    font-size: 1.06rem;
    line-height: 1.7;
}
.lbk-prose .lbk-hero-cta { color: var(--lbk-accent-deep); font-weight: 600; }
.lbk-prose .lbk-hero-cta:hover { color: var(--lbk-primary); }
@media (prefers-reduced-motion: reduce) {
    .lbk-gallery-frame img { transition: none; }
    .lbk-gallery-item:hover .lbk-gallery-frame img { transform: none; }
}
/* Portrait frames stack badly on a phone; two landscape ones read better. */
@media (max-width: 560px) {
    .lbk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
    .lbk-gallery-frame { aspect-ratio: 1 / 1; }
    .lbk-gallery-item figcaption { font-size: .78rem; }
}

/* Topic cards: the same photo band, but the card keeps its own padding, so
   the image is hoisted out to the card edge. */
.lbk-card-media { padding: 0; overflow: hidden; }
.lbk-card-figure { display: block; aspect-ratio: 16 / 9; background: var(--lbk-bg-soft); position: relative; }
.lbk-card-figure img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s var(--lbk-ease);
}
.lbk-card-media:hover .lbk-card-figure img { transform: scale(1.04); }
.lbk-card-inner { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.65rem; }
@media (prefers-reduced-motion: reduce) { .lbk-card-media:hover .lbk-card-figure img { transform: none; } }

/* ── Itinerary / option cards ─────────────────────────────────────────── */
.lbk-option {
    background: var(--lbk-white); border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--lbk-shadow-sm);
    transition: border-color .2s var(--lbk-ease), box-shadow .2s var(--lbk-ease);
}
.lbk-option:hover { border-color: rgba(138,90,43,.28); box-shadow: var(--lbk-shadow); }
.lbk-option + .lbk-option { margin-top: 1.1rem; }
.lbk-option.has-media { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.lbk-option-figure { position: relative; aspect-ratio: 16 / 9; background: var(--lbk-bg-soft); }
.lbk-option-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lbk-option.has-media > .lbk-option-body { padding: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 760px) {
    .lbk-option.has-media { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: stretch; }
    .lbk-option-figure { aspect-ratio: auto; height: 100%; min-height: 240px; }
}
.lbk-option-kicker { display: inline-block; font-size: .73rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--lbk-accent-deep); margin-bottom: .6rem; }
.lbk-option h3 { margin: 0 0 .5rem; }
.lbk-option p { margin: 0 0 .75rem; max-width: 70ch; }
.lbk-option .lbk-caveat { color: var(--lbk-muted); font-size: .93rem; }

/* ── Trust / list blocks ──────────────────────────────────────────────────
   One coffee-dark panel, three columns split by hairlines.

   It used to be three white cards in a plain grid. Everything else on this
   page is a light card on cream, so three more of them at the foot read as
   filler; a single dark strip reads as the closing statement it is, and it is
   the only dark object on the page above the footer.

   The no-badges rule from the old markup still holds. The icons mark each
   statement the way the numbered stops do — none is a checkmark, shield or
   rosette, because those read as a certification this site has not been
   granted. Measured on this ground: body copy is 9.5:1, the heading is white. */
.lbk-trust {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--lbk-primary);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow);
    overflow: hidden;
}
.lbk-trust-item {
    padding: clamp(1.6rem, 3vw, 2.15rem);
    border-left: 1px solid rgba(255,255,255,.13);
}
.lbk-trust-item:first-child { border-left: 0; }
.lbk-trust-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.35rem; height: 2.35rem; margin: 0 0 1rem;
    border-radius: var(--lbk-pill);
    background: rgba(255,255,255,.1);
    color: #f2d9ae;
}
.lbk-trust-icon i { font-size: 20px; }
.lbk-trust-item h3 { font-size: 1.05rem; margin: 0 0 .45rem; color: #fff; }
.lbk-trust-item p  { font-size: .93rem; color: rgba(255,255,255,.78); margin: 0; line-height: 1.65; }
.lbk-trust-item a  { color: #f2d9ae; text-decoration: underline; text-underline-offset: 2px; }
.lbk-trust-item a:hover { color: #fff; }

@media (max-width: 900px) {
    .lbk-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lbk-trust-item:nth-child(2n+1) { border-left: 0; }
    .lbk-trust-item:nth-child(n+3)  { border-top: 1px solid rgba(255,255,255,.13); }
    /* Closes the empty cell an odd count leaves in a two-column grid. */
    .lbk-trust-item.is-wide-2col { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 620px) {
    .lbk-trust { grid-template-columns: minmax(0, 1fr); }
    .lbk-trust-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }
    .lbk-trust-item:first-child { border-top: 0; }
}

/* ── Categorised FAQ ──────────────────────────────────────────────────── */
.lbk-faq-nav { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.lbk-faq-center .lbk-faq-nav { justify-content: center; }
.lbk-faq-body { max-width: 900px; margin-inline: auto; }
.lbk-faq-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem; border-radius: var(--lbk-pill);
    font-family: var(--lbk-font-body); font-size: .85rem; font-weight: 600; line-height: 1.2;
    color: var(--lbk-primary); background: var(--lbk-white);
    border: 1px solid var(--lbk-hairline-2); cursor: pointer;
    transition: background-color .2s var(--lbk-ease), color .2s var(--lbk-ease), border-color .2s var(--lbk-ease);
}
.lbk-faq-pill i { font-size: 17px; color: var(--lbk-accent-deep); }
.lbk-faq-pill:hover { border-color: var(--lbk-accent); }
.lbk-faq-pill.is-active {
    background: var(--lbk-primary); color: #fff; border-color: var(--lbk-primary);
    box-shadow: var(--lbk-shadow-sm);
}
.lbk-faq-pill.is-active i { color: #f2d9ae; }
.lbk-faq-center .lbk-faq-nav { margin-bottom: 2.25rem; }

.lbk-faq-group + .lbk-faq-group { margin-top: 2.5rem; }
/* In filtered mode the heading is hidden, so the group must not also carry
   the gap that heading used to occupy. */
.lbk-faq-group > .lbk-visually-hidden + .lbk-faq-item { margin-top: 0; }
.lbk-faq-group-title {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--lbk-font-head); font-size: 1.3rem; color: var(--lbk-primary);
    margin: 0 0 1.1rem; padding-bottom: .7rem;
    border-bottom: 1px solid var(--lbk-card-line);
}
.lbk-faq-group-title i { font-size: 21px; color: var(--lbk-accent-deep); }

.lbk-faq-item {
    background: var(--lbk-white); border: 1px solid var(--lbk-card-line);
    border-radius: 16px; overflow: hidden;
    box-shadow: var(--lbk-shadow-sm);
    transition: border-color .2s var(--lbk-ease), box-shadow .2s var(--lbk-ease);
}
.lbk-faq-item + .lbk-faq-item { margin-top: .7rem; }
.lbk-faq-item:hover { border-color: rgba(138,90,43,.30); }
.lbk-faq-item[open] { border-color: rgba(138,90,43,.35); box-shadow: var(--lbk-shadow); }
.lbk-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    padding: 1.15rem 1.35rem; min-height: 66px;
    cursor: pointer; list-style: none;
    transition: background-color .2s var(--lbk-ease);
}
.lbk-faq-item > summary::-webkit-details-marker { display: none; }
.lbk-faq-item > summary:hover { background: var(--lbk-bg-soft); }
/* An open card tints its question row, so open and closed read differently
   at a glance and not only by the chevron's rotation. */
.lbk-faq-item[open] > summary { background: var(--lbk-bg-soft); }
/* The question is a real heading (h3 in a flat FAQ, h4 under a topic group)
   so the outline stays navigable; the type scale is set here, not inherited
   from the global heading sizes. */
.lbk-faq-q {
    font-family: var(--lbk-font-head);
    font-size: 1.06rem; font-weight: 600; line-height: 1.4;
    color: var(--lbk-primary); margin: 0;
}
/* One chevron that rotates, rather than swapping a plus for a minus — fewer
   moving parts and it reads as the same control in both states. */
.lbk-faq-sign {
    flex: none; width: 36px; height: 36px; border-radius: var(--lbk-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lbk-bg); color: var(--lbk-accent-deep); font-size: 18px;
    transition: transform .25s var(--lbk-ease), background-color .2s var(--lbk-ease), color .2s var(--lbk-ease);
}
.lbk-faq-item[open] .lbk-faq-sign { transform: rotate(180deg); background: var(--lbk-primary); color: #fff; }
@media (prefers-reduced-motion: reduce) { .lbk-faq-sign { transition: none; } }
.lbk-faq-a {
    padding: 1.15rem 1.35rem 1.45rem;
    border-top: 1px solid var(--lbk-card-line);
}
.lbk-faq-a > *:first-child { margin-top: 0; }
/* Answers keep a reading measure of their own rather than running the full
   width of the card. */
.lbk-faq-a p, .lbk-faq-a ul, .lbk-faq-a ol {
    margin: 0 0 .8rem; max-width: 68ch;
    font-size: .98rem; color: var(--lbk-text); line-height: 1.8;
}
.lbk-faq-a p:last-child { margin-bottom: 0; }
.lbk-faq-a a { color: var(--lbk-accent-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ── Journal cards ────────────────────────────────────────────────────── */
.lbk-journal-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
/* A flex column, like .lbk-card, so cards in a row end on the same line —
   the date is pushed to the bottom instead of trailing whichever excerpt it
   happens to follow. Grid already stretches the cards to equal heights; what
   was ragged was the content inside them. */
.lbk-journal-card {
    display: flex; flex-direction: column; background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line); border-radius: var(--lbk-radius-lg);
    overflow: hidden; text-decoration: none; box-shadow: var(--lbk-shadow-sm);
    transition: transform .18s var(--lbk-ease), box-shadow .18s var(--lbk-ease), border-color .18s var(--lbk-ease);
}
.lbk-journal-card:hover { transform: translateY(-2px); border-color: rgba(138,90,43,.28); box-shadow: var(--lbk-shadow); text-decoration: none; }
.lbk-journal-thumb { aspect-ratio: 16 / 10; background: var(--lbk-bg-soft); flex: none; }
.lbk-journal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lbk-journal-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.lbk-journal-cat { display: block; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--lbk-accent-deep); font-weight: 600; margin-bottom: .55rem; }
/* Two lines of headline reserved whether the title needs them or not, so the
   excerpts below start on one line across the row; a third line is allowed
   rather than truncating a real title. */
.lbk-journal-card h3 {
    font-size: 1.1rem; margin: 0 0 .55rem;
    min-height: 2.44em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* Excerpts run 2-4 lines from source. Clamped at three they stop setting a
   different depth in every card. */
.lbk-journal-card p {
    font-size: .9rem; color: var(--lbk-muted); margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.lbk-journal-date { display: block; margin-top: auto; padding-top: .9rem; font-size: .78rem; color: var(--lbk-muted); }

/* ── Disclosure ───────────────────────────────────────────────────────── */
.lbk-disclosure {
    background: var(--lbk-bg-soft);
    border: 1px solid var(--lbk-hairline);
    border-radius: var(--lbk-radius);
    padding: 1rem 1.25rem;
    font-size: .88rem; color: var(--lbk-muted); line-height: 1.65;
    max-width: var(--lbk-prose);
}
.lbk-band-dark .lbk-disclosure { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.82); }

/* ── End CTA ──────────────────────────────────────────────────────────── */
.lbk-endcta { background: var(--lbk-primary); color: #fff; padding: var(--lbk-section) var(--lbk-gutter); }
.lbk-endcta-in { max-width: 820px; margin-inline: auto; text-align: center; }

/* Photographic closing band, after bajoport.com's. The scrim is deep because
   the copy is centred across the full width, not tucked into one corner. */
.lbk-endcta.has-media { position: relative; overflow: hidden; }
.lbk-endcta-media { position: absolute; inset: 0; z-index: 0; }
.lbk-endcta-media img { width: 100%; height: 100%; object-fit: cover; }
.lbk-endcta-scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(28,16,10,.86) 0%, rgba(28,16,10,.80) 50%, rgba(28,16,10,.88) 100%),
        radial-gradient(1000px 380px at 50% 0%, rgba(138,90,43,.22), transparent 62%);
}
.lbk-endcta.has-media > .lbk-endcta-in { position: relative; z-index: 2; }
.lbk-endcta h2 { color: #fff; margin: 0 0 .7rem; }
.lbk-endcta p  { color: rgba(255,255,255,.88); margin: 0 auto 1.6rem; max-width: 56ch; }
.lbk-endcta .lbk-btn-row { justify-content: center; }
.lbk-endcta .lbk-btn-primary { background: #fff; color: var(--lbk-primary); }
.lbk-endcta .lbk-btn-primary:hover { background: var(--lbk-bg); color: var(--lbk-primary); }
.lbk-endcta .lbk-btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.lbk-endcta .lbk-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.lbk-endcta small { display: block; margin-top: 1.35rem; font-size: .82rem; color: rgba(255,255,255,.75); line-height: 1.6; }

/* ── Cross-site link ──────────────────────────────────────────────────── */
/* One line handing the reader on to the group's charter site, injected before
   </main> on the front page by the jhg-mlink mu-plugin. It lands between two
   dark surfaces — the End CTA above, the footer below — so it is dark too: the
   gradient starts on the CTA's own coffee and finishes on the footer's first
   stop, which leaves no seam at either edge and lets the three read as one
   closing block instead of a cream sliver wedged between them. Everything else
   follows the footer: body type on muted cream, a rule that fades out before
   the gutter rather than ruling edge to edge, and the footer's own brass
   filament below closing the row.
   The markup lives in the plugin; remove the plugin and these rules go unused. */
.lbk-crosslink {
    /* #43281a is the footer gradient's first stop — see .lbk-footer. */
    background: linear-gradient(180deg, var(--lbk-primary) 0%, #43281a 100%);
    padding: clamp(1.6rem, 3vw, 2.4rem) var(--lbk-gutter);
    font-family: var(--lbk-font-body);
}
/* Same measure and the same fading divider as .lbk-footer-top, so the rule
   above the sentence lines up with the ones inside the footer. */
.lbk-crosslink-in {
    max-width: var(--lbk-maxw);
    margin-inline: auto;
    padding-top: clamp(1.6rem, 3vw, 2.4rem);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg,
        rgba(255, 226, 199, 0), rgba(255, 226, 199, .20) 8%,
        rgba(255, 226, 199, .20) 92%, rgba(255, 226, 199, 0)) 1;
}
.lbk-crosslink p {
    margin: 0 auto;
    max-width: 62ch;
    text-align: center;
    color: var(--lbkf-mut);
    font-size: .93rem;
    line-height: 1.7;
}
/* Cream against the muted sentence, carrying its underline at low alpha so it
   still reads as a link in running prose and firms up under the cursor. */
.lbk-crosslink a {
    color: var(--lbkf-head);
    text-decoration: underline;
    text-decoration-color: rgba(255, 226, 199, .38);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s var(--lbk-ease);
}
.lbk-crosslink a:hover { text-decoration-color: currentColor; }
.lbk-crosslink a:focus-visible {
    outline: 2px solid var(--lbkf-head); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { .lbk-crosslink a { transition: none; } }

/* ── Footer ───────────────────────────────────────────────────────────── */
/* The footer is the one full-width dark surface on the page, so it carries
   the theme's luxury register: a coffee gradient warmed by a brass glow at
   the top-left, brass hairlines that fade out at both ends rather than
   ruling edge to edge, and a darker base band that closes the page. */
.lbk-footer {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(90% 70% at 12% -10%, rgba(138, 90, 43, .45) 0%, rgba(138, 90, 43, 0) 60%),
        linear-gradient(180deg, #43281a 0%, var(--lbkf-bg) 38%, #2a1610 100%);
    color: var(--lbkf-txt);
    font-family: var(--lbk-font-body);
    padding: clamp(2.75rem, 5vw, 4.5rem) var(--lbk-gutter) 0;
}
/* A single brass filament caps the footer where it meets the page ground. */
.lbk-footer::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 226, 199, 0), rgba(255, 226, 199, .5) 22%,
        rgba(255, 226, 199, .5) 78%, rgba(255, 226, 199, 0));
}
.lbk-footer-in { max-width: var(--lbk-maxw); margin-inline: auto; }

/* Section dividers. border-image paints only the bottom edge here because the
   other three borders have no width, and the gradient lets each rule fade out
   instead of stopping hard against the gutter. */
.lbk-footer-top,
.lbk-footer-cols {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        rgba(255, 226, 199, 0), rgba(255, 226, 199, .20) 8%,
        rgba(255, 226, 199, .20) 92%, rgba(255, 226, 199, 0)) 1;
}

/* Brand and the contact rail share one row; the rail sits right so the row
   does not leave a wide empty half the way a 1.4fr/1fr split did. */
.lbk-footer-top {
    display: flex; flex-wrap: wrap; gap: 1.75rem 3rem;
    align-items: flex-start; justify-content: space-between;
    padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.lbk-footer-brandbox { min-width: 0; flex: 1 1 22rem; }
.lbk-footer-brand {
    position: relative;
    font-family: var(--lbk-font-head);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 500; letter-spacing: .005em; line-height: 1.2;
    color: var(--lbkf-head);
    margin: 0 0 .95rem; padding-bottom: .95rem;
}
/* A short brass stroke under the wordmark — the footer's only ornament. */
.lbk-footer-brand::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px;
    background: linear-gradient(90deg, var(--lbkf-head), rgba(255, 226, 199, .12));
}
.lbk-footer-tagline { color: var(--lbkf-mut); font-size: .93rem; line-height: 1.65; margin: 0; max-width: 44ch; }

/* Contact rail: each entry is a pill, so icon and label sit in one target. */
.lbk-footer-contact {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .6rem;
    flex: 0 1 auto; justify-content: flex-start;
}
.lbk-footer-contact a {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 42px; padding: .5rem 1rem;
    border: 1px solid rgba(255, 226, 199, .18);
    border-radius: var(--lbk-pill);
    background: rgba(255, 255, 255, .04);
    color: var(--lbkf-txt); font-size: .86rem; line-height: 1.25;
    transition: background-color .2s var(--lbk-ease), border-color .2s var(--lbk-ease),
                color .2s var(--lbk-ease), transform .2s var(--lbk-ease);
}
.lbk-footer-contact a:hover {
    background: rgba(255, 226, 199, .12);
    border-color: rgba(255, 226, 199, .42);
    color: var(--lbkf-head); transform: translateY(-1px);
}
.lbk-footer-contact i { color: var(--lbkf-head); font-size: 17px; flex: none; }
.lbk-footer-contact-wa:hover { background: rgba(37, 211, 102, .16); border-color: rgba(37, 211, 102, .5); }
.lbk-footer-contact-wa:hover i { color: #4ade80; }

.lbk-footer-cols {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem 1.75rem; padding: clamp(1.9rem, 3vw, 2.6rem) 0;
}
@media (max-width: 1080px) { .lbk-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .lbk-footer-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Each column is a disclosure. It ships open, so a browser without
   JavaScript still gets the whole footer; lbk.js closes them below 700px,
   where five stacked columns are what made this footer four screens tall. */
.lbk-footer-col > summary { list-style: none; cursor: default; }
.lbk-footer-col > summary::-webkit-details-marker { display: none; }
/* Sans small-caps rather than the theme serif: at this size a letterspaced
   eyebrow separates heading from link far more cleanly than 1rem of Lora,
   and the serif still anchors the footer through the wordmark above. */
.lbk-footer-col > summary h4 {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--lbk-font-body); font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .15em;
    color: var(--lbkf-head); opacity: .92;
    margin: 0 0 1.1rem;
}
/* Row gap has to beat the links' own line-height, or a link that wraps to two
   lines reads as two separate links. */
.lbk-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
/* The underline grows from the left on hover instead of blinking on. */
.lbk-footer-col a {
    display: inline; color: var(--lbkf-mut); font-size: .855rem; line-height: 1.45;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
    transition: background-size .28s var(--lbk-ease), color .2s var(--lbk-ease);
}
.lbk-footer-col a:hover { color: var(--lbkf-head); background-size: 100% 1px; }

/* The overflow links, behind their own toggle. */
.lbk-footer-more { margin-top: .9rem; }
.lbk-footer-more > summary {
    list-style: none; cursor: pointer;
    font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--lbkf-head); opacity: .7;
    padding: .35rem .7rem; border: 1px solid rgba(255, 226, 199, .18); border-radius: var(--lbk-pill);
    display: inline-flex; align-items: center; gap: .4rem;
    transition: opacity .2s var(--lbk-ease), border-color .2s var(--lbk-ease), background-color .2s var(--lbk-ease);
}
.lbk-footer-more > summary::-webkit-details-marker { display: none; }
.lbk-footer-more > summary::after { content: '+'; font-size: .95rem; line-height: 1; }
.lbk-footer-more[open] > summary::after { content: '\2212'; }
.lbk-footer-more > summary:hover { opacity: 1; border-color: rgba(255, 226, 199, .4); background: rgba(255, 255, 255, .05); }
.lbk-footer-more ul { margin-top: .75rem; }

@media (max-width: 700px) {
    .lbk-footer-col { border-bottom: 1px solid rgba(255, 226, 199, .10); }
    /* The stack's last rule would sit a hair above the grid's own bottom
       border and read as a doubled line, so it stands down. */
    .lbk-footer-col:last-child { border-bottom: 0; }
    .lbk-footer-col > summary { cursor: pointer; }
    .lbk-footer-col > summary h4 { margin: 0; padding: 1rem 0; min-height: 48px; }
    .lbk-footer-col > summary h4::after {
        content: ''; flex: none; width: 0; height: 0; margin-left: 1rem;
        border-left: 5px solid transparent; border-right: 5px solid transparent;
        border-top: 5px solid currentColor; opacity: .6;
        transition: transform .2s var(--lbk-ease);
    }
    .lbk-footer-col[open] > summary h4::after { transform: rotate(180deg); }
    .lbk-footer-col > ul { padding-bottom: 1rem; }
    .lbk-footer-col .lbk-footer-more { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .lbk-footer-col > summary h4::after { transition: none; } }

/* Group logos, centred under a label flanked by two hairline wings. */
.lbk-footer-group {
    display: grid; justify-items: center; gap: 1.4rem;
    padding: clamp(1.75rem, 3vw, 2.4rem) 0;
}
.lbk-footer-group-title {
    display: flex; align-items: center; gap: 1rem;
    margin: 0; font-family: var(--lbk-font-body);
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
    color: var(--lbkf-mut); text-align: center;
}
.lbk-footer-group-title::before,
.lbk-footer-group-title::after {
    content: ''; flex: none; width: clamp(24px, 7vw, 60px); height: 1px;
    background: rgba(255, 226, 199, .3);
}
.lbk-footer-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.25rem; }
.lbk-footer-logos img {
    height: 32px; width: auto; max-width: 130px; object-fit: contain;
    opacity: .68; transition: opacity .25s var(--lbk-ease), transform .25s var(--lbk-ease);
}
.lbk-footer-logos a:hover img { opacity: 1; transform: translateY(-2px); }

/* Full-bleed base band: the negative inline margin cancels the footer's own
   gutter padding, so the darker strip runs edge to edge while its contents
   stay on the same measure as everything above. */
.lbk-footer-base {
    margin-top: clamp(1rem, 2vw, 1.5rem);
    margin-inline: calc(var(--lbk-gutter) * -1);
    padding: 1.15rem var(--lbk-gutter);
    background: rgba(0, 0, 0, .22);
    border-top: 1px solid rgba(255, 226, 199, .10);
}
.lbk-footer-base-in {
    max-width: var(--lbk-maxw); margin-inline: auto;
    display: flex; flex-wrap: wrap; gap: .45rem 2rem;
    align-items: baseline; justify-content: space-between;
}
.lbk-footer-base p { margin: 0; font-size: .78rem; color: var(--lbkf-mut); line-height: 1.65; }
.lbk-footer-disclose { max-width: 72ch; opacity: .82; }

/* Keyboard focus has to survive on the dark ground too. */
.lbk-footer a:focus-visible,
.lbk-footer summary:focus-visible {
    outline: 2px solid var(--lbkf-head); outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .lbk-footer-contact a,
    .lbk-footer-col a,
    .lbk-footer-logos img { transition: none; }
    .lbk-footer-contact a:hover,
    .lbk-footer-logos a:hover img { transform: none; }
}

/* ── Floating actions ─────────────────────────────────────────────────── */
.lbk-fab-stack {
    position: fixed; right: clamp(1rem, 3vw, 1.5rem); bottom: clamp(1rem, 3vw, 1.5rem);
    z-index: 150; display: flex; flex-direction: column; gap: .65rem; align-items: flex-end;
}
.lbk-fab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: var(--lbk-pill);
    border: 1px solid rgba(255, 255, 255, .16); cursor: pointer;
    box-shadow: 0 2px 6px rgba(44, 24, 16, .18), 0 12px 30px rgba(44, 24, 16, .26);
    transition: transform .2s var(--lbk-ease), box-shadow .2s var(--lbk-ease);
}
.lbk-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 4px 10px rgba(44, 24, 16, .2), 0 18px 40px rgba(44, 24, 16, .32); }
.lbk-fab-wa { background: linear-gradient(180deg, #2fdd6f, #1fb955); color: #fff; font-size: 26px; }
.lbk-fab-top { background: linear-gradient(180deg, var(--lbk-primary-soft), var(--lbk-primary)); color: var(--lbkf-head); font-size: 20px; }
.lbk-fab-top[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .lbk-fab { transition: none; }
    .lbk-fab:hover { transform: none; }
}
/* The floating stack gets its own safe zone so it never lands on copy. */
.lbk-has-fab { padding-bottom: 88px; }

/* ── Blog / archive ───────────────────────────────────────────────────── */
.lbk-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (max-width: 980px) { .lbk-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lbk-archive-grid { grid-template-columns: minmax(0, 1fr); } }

/* Two content mu-plugins (wp-content/mu-plugins/zzzz-lbk-archive-*.php) add
   editorial copy straight into this grid: intro text + topic links on
   loop_start (first child) and a short Q&A on loop_end (last child). Both
   carry .lbk-prose for their type. Without grid-column each one was just
   another grid item and got squeezed into a single card-sized cell — this
   makes each span every column instead, as its own full-width row. Their
   own .lbk-prose max-width is cancelled on the outer wrapper so the panel
   fills the row while direct children keep a readable measure — the same
   "wide card, measured text" split .lbk-disclosure and the no-media
   masthead summary already use. */
.lbk-archive-grid > .lbk-archive-intro,
.lbk-archive-grid > .lbk-hub-qa { grid-column: 1 / -1; }
.lbk-archive-intro {
    max-width: none;
    background: var(--lbk-white);
    border: 1px solid var(--lbk-card-line);
    border-radius: var(--lbk-radius-lg);
    box-shadow: var(--lbk-shadow-sm);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    margin-bottom: clamp(1.1rem, 2.5vw, 1.75rem);
}
.lbk-archive-intro > * { max-width: var(--lbk-prose); }
/* Above 1000px a single 68ch measure inside a 1200px panel left ~470px of
   blank card down the right-hand side. Two balanced columns use the panel
   instead, and the measure stays comfortable because each column is ~560px.
   Multi-column rather than a placed grid because these blocks have no fixed
   shape: the blog index runs copy → headed list → callout, a category page
   runs copy → callout, and the diving hub adds two more headed sections.
   break-inside keeps a paragraph, a list and the callout whole. */
@media (min-width: 1000px) {
    .lbk-archive-intro { columns: 2; column-gap: clamp(2rem, 4vw, 3.25rem); }
    .lbk-archive-intro > * { max-width: none; break-inside: avoid; }
    .lbk-archive-intro > h3 { break-after: avoid; }
}
/* The "Book with Komodo Luxury" callout the intro blocks end on. */
.lbk-rail {
    background: var(--lbk-bg-soft);
    border-left: 3px solid var(--lbk-accent);
    border-radius: 0 var(--lbk-radius) var(--lbk-radius) 0;
    padding: 1rem 1.25rem;
}
.lbk-rail p { margin: 0 0 .5rem; font-size: .92rem; }
.lbk-rail p:last-child { margin-bottom: 0; font-size: .88rem; color: var(--lbk-muted); }
.lbk-hub-qa {
    max-width: none;
    padding-top: clamp(1.25rem, 3vw, 2rem);
    border-top: 1px solid var(--lbk-card-line);
}
.lbk-hub-qa > h2 { max-width: var(--lbk-prose); }
/* The Q&A pairs are boxes (.lbk-hub-qa-item, added by the mu-plugin) so they
   can sit side by side. auto-fit rather than a fixed three, because the count
   is editable and a hard column count leaves a hole the moment it changes. */
.lbk-hub-qa-items {
    display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Two lines reserved for the question so the answers start on one line
   across the row — one of the three fits on a single line and pulled its
   answer up above its neighbours'. */
.lbk-hub-qa-item > h3 { margin: 0 0 .5rem; font-size: 1.08rem; min-height: 2.44em; }
.lbk-hub-qa-item > p  { margin: 0; color: var(--lbk-text); }

.lbk-pagination { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.lbk-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; min-height: 42px; padding: 0 .75rem;
    border: 1px solid var(--lbk-hairline-2); border-radius: 10px;
    color: var(--lbk-primary); font-size: .9rem; text-decoration: none;
}
.lbk-pagination .page-numbers.current { background: var(--lbk-primary); color: #fff; border-color: var(--lbk-primary); }

/* ── Contact form ─────────────────────────────────────────────────────── */
.lbk-form { display: grid; gap: 1rem; background: var(--lbk-white); border: 1px solid var(--lbk-hairline); border-radius: var(--lbk-radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.lbk-field { display: grid; gap: .35rem; }
.lbk-field label { font-size: .82rem; font-weight: 600; color: var(--lbk-primary); }
.lbk-field input, .lbk-field select, .lbk-field textarea {
    width: 100%; font-family: var(--lbk-font-body); font-size: .95rem;
    padding: .7rem .85rem; border: 1px solid var(--lbk-hairline-2);
    border-radius: 10px; background: #fff; color: var(--lbk-text);
}
.lbk-field textarea { min-height: 130px; resize: vertical; }