/* ==========================================================================
   Bali Ultra Luxury Travel — design system
   --------------------------------------------------------------------------
   "Quiet opulence": volcanic ink, warm ivory, one restrained champagne
   bronze. Hairline rules instead of heavy shadows, near-square corners
   instead of soft cards, and a lot of air. Expense reads as restraint, so
   the accent is rationed — it appears on eyebrows, rules, numerals and
   primary actions, and almost nowhere else.

   Marcellus (inscriptional Roman serif) carries every heading; Figtree
   carries body and UI. Layout rhythm follows the reference: a tall
   left-aligned hero, then evenly-weighted bands at 7rem vertical padding
   that alternate ivory / ink so no two grounds of one tone ever touch.

   Sections in order:
     1  tokens
     2  reset & base
     3  typography primitives
     4  layout (container, band, heading block)
     5  buttons & links
     6  utility bar, header, nav, drawer
     7  hero
     8  answer (AEO block)
     9  chapters (sticky index + prose)  — the signature section
    10  cards
    11  regions atlas
    12  rates ledger
    13  steps
    14  stats
    15  compare
    16  faq  +  faq grouped hub
    17  directory & related
    18  contact & checklist
    19  cta
    20  footer, fab, back-to-top, breadcrumb
    21  blog, search, 404
    22  reveal-on-scroll & reduced motion
    23  responsive
    24  homepage rhythm (scoped to main.bul-home)
   ========================================================================== */

/* ---------------------------------------------------------------- 1 tokens */
:root {
    /* ground */
    --ink:        #131311;   /* volcanic near-black, warm not blue */
    --ink-2:      #1C1B18;   /* raised surface on ink */
    --ink-3:      #272521;   /* hairline on ink */
    --jade:       #1A2E28;   /* deep tropical jade, feature ground */
    --ivory:      #FBF9F5;   /* page ground */
    --ivory-2:    #F4F0E8;   /* alternate light ground */
    --stone:      #E7E1D5;   /* hairline on ivory */
    --stone-2:    #D6CEBE;   /* hairline, stronger */

    /* accent — rationed */
    --bronze:     #A9854F;
    --bronze-lt:  #C2A06A;
    --bronze-dk:  #8A6A3B;
    --bronze-8:   rgba(169, 133, 79, 0.08);
    --bronze-18:  rgba(169, 133, 79, 0.18);
    --bronze-32:  rgba(169, 133, 79, 0.32);

    /* text */
    --text:       #1E1C18;
    --text-soft:  #4B443A;
    --muted:      #837A6B;
    --on-ink:     #F2EDE3;
    --on-ink-soft: #BDB4A5;
    --on-ink-muted: #8C8375;

    /* type */
    --display: 'Marcellus', 'Cormorant Garamond', 'Times New Roman', serif;
    --sans:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* measure & rhythm */
    --shell:   1280px;
    --narrow:  740px;
    --gutter:  1.25rem;
    --band-y:  7rem;
    --radius:  2px;
    --radius-lg: 3px;

    /* motion */
    --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* a single grain layer, reused on every dark ground for depth */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- 2 reset & base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--ivory);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.002em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip, not hidden: `hidden` turns body into a scroll container, and the
       sticky header then has nothing to stick to. Declared after hidden so
       browsers without clip still get the horizontal-overflow guard. */
    overflow-x: hidden;
    overflow-x: clip;
    touch-action: manipulation;
    -webkit-tap-highlight-color: var(--bronze-18);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* One focus treatment for the whole site. Never removed, only replaced. */
:focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
    border-radius: var(--radius);
}
.bul-band--ink :focus-visible,
.bul-footer :focus-visible,
.bul-hero :focus-visible { outline-color: var(--bronze-lt); }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--ink);
    color: var(--on-ink);
    padding: 0.85rem 1.4rem;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

.bul-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------- 3 typography primitives */
h1, h2, h3, h4, h5 {
    font-family: var(--display);
    font-weight: 400;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.bul-h1 {
    font-size: clamp(2.35rem, 5.4vw, 4.15rem);
    line-height: 1.06;
}
.bul-h2 {
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    line-height: 1.14;
}
.bul-h3 {
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    line-height: 1.28;
}

/* The bronze accent inside a heading. Marcellus has no italic, so the
   accent is carried by colour and a hairline, not by slant. */
h1 em, h2 em, h3 em, .bul-h1 em, .bul-h2 em {
    font-style: normal;
    color: var(--bronze);
    position: relative;
    white-space: nowrap;
}
.bul-band--ink h1 em, .bul-band--ink h2 em,
.bul-hero em, .bul-cta em { color: var(--bronze-lt); }

/* Eyebrow: letterspaced small caps with one short rule to its left. The
   asymmetry is deliberate — it reads as an editorial dateline. */
.bul-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.15rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bronze-dk);
}
.bul-eyebrow::before {
    content: '';
    width: 34px;
    height: 1px;
    flex: none;
    background: var(--bronze);
}
.bul-band--ink .bul-eyebrow,
.bul-hero .bul-eyebrow,
.bul-cta .bul-eyebrow,
.bul-footer .bul-eyebrow { color: var(--bronze-lt); }
.bul-band--ink .bul-eyebrow::before,
.bul-hero .bul-eyebrow::before,
.bul-cta .bul-eyebrow::before { background: var(--bronze-lt); }

.bul-eyebrow--center { justify-content: center; }

.bul-lede {
    font-size: clamp(1.02rem, 1.35vw, 1.15rem);
    line-height: 1.8;
    color: var(--text-soft);
    margin: 1.35rem 0 0;
    max-width: 60ch;
}
.bul-band--ink .bul-lede,
.bul-hero .bul-lede,
.bul-cta .bul-lede { color: var(--on-ink-soft); }

.bul-prose p {
    margin: 0 0 1.25rem;
    color: var(--text-soft);
    overflow-wrap: break-word;
}
.bul-prose p:last-child { margin-bottom: 0; }
.bul-band--ink .bul-prose p { color: var(--on-ink-soft); }

.bul-num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- 4 layout */
.bul-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bul-band {
    position: relative;
    padding-block: var(--band-y);
}
.bul-band--ivory { background: var(--ivory); }
.bul-band--ink {
    background: var(--ink);
    color: var(--on-ink);
}
.bul-band--ink::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.16;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.bul-band--ink > * { position: relative; }
.bul-band--ink h1, .bul-band--ink h2, .bul-band--ink h3, .bul-band--ink h4 { color: var(--on-ink); }

/* Two ivory bands in a row would lose their edge, so ivory always rules off
   from whatever precedes it. */
.bul-band--ivory + .bul-band--ivory { border-top: 1px solid var(--stone); }

.bul-head {
    max-width: 62ch;
    margin-bottom: 3.25rem;
}
.bul-head--center {
    margin-inline: auto;
    text-align: center;
}
.bul-head--center .bul-lede { margin-inline: auto; }

/* Heading block with the copy left and a single action right. */
.bul-head--split {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.75rem 3rem;
}
.bul-head--split > div:first-child { max-width: 62ch; }

.bul-rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--stone);
}
.bul-band--ink .bul-rule { background: var(--ink-3); }

/* ------------------------------------------------------ 5 buttons & links */
.bul-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2.1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.855rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
                border-color 0.35s var(--ease), transform 0.35s var(--ease),
                box-shadow 0.35s var(--ease);
}
.bul-btn i { font-size: 1.05em; flex: none; }
/* A label long enough to wrap is still one flex item, so it must not
   grow and strand the icon against the far edge of a full-width button. */
.bul-btn > span { flex: 0 1 auto; }

.bul-btn--primary {
    background: var(--bronze);
    border-color: var(--bronze);
    color: #fff;
}
.bul-btn--primary:hover {
    background: var(--bronze-dk);
    border-color: var(--bronze-dk);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(19, 19, 17, 0.2);
}

.bul-btn--ink {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}
.bul-btn--ink:hover {
    background: var(--jade);
    border-color: var(--jade);
    transform: translateY(-2px);
}

.bul-btn--ghost {
    background: transparent;
    border-color: var(--stone-2);
    color: var(--text);
}
.bul-btn--ghost:hover {
    border-color: var(--bronze);
    color: var(--bronze-dk);
    transform: translateY(-2px);
}
.bul-band--ink .bul-btn--ghost,
.bul-hero .bul-btn--ghost,
.bul-cta .bul-btn--ghost {
    border-color: rgba(242, 237, 227, 0.3);
    color: var(--on-ink);
}
.bul-band--ink .bul-btn--ghost:hover,
.bul-hero .bul-btn--ghost:hover,
.bul-cta .bul-btn--ghost:hover {
    border-color: var(--bronze-lt);
    color: var(--bronze-lt);
}

.bul-btn--sm { padding: 0.72rem 1.45rem; font-size: 0.755rem; }

/* The header button sits beside the nav headings rather than shouting over
   them: sentence case, nav-sized, no letterspacing. */
/* The drawer is the header on small screens, so its button matches. */
.bul-header__actions .bul-btn,
.bul-drawer__foot .bul-btn {
    white-space: nowrap;
    flex: none;
    padding: 0.66rem 1.3rem;
    font-size: 0.855rem;
    letter-spacing: 0.01em;
    text-transform: none;
}
.bul-drawer__foot .bul-btn { padding: 0.95rem 1.3rem; }
.bul-header__actions .bul-btn i,
.bul-drawer__foot .bul-btn i { font-size: 1.02rem; }

.bul-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.35rem;
}

/* Text link with a hairline that grows on hover. */
.bul-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bronze-dk);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--bronze-32);
}
.bul-link:hover { color: var(--bronze); border-bottom-color: var(--bronze); }
.bul-link i { transition: transform 0.3s var(--ease); }
.bul-link:hover i { transform: translateX(3px); }
.bul-band--ink .bul-link,
.bul-cta .bul-link { color: var(--bronze-lt); }

/* ------------------------------- 6 utility bar, header, nav, drawer */
/* A quiet line of practical detail, in the same family as the header beneath
   it. As an ink-black slab it put a hard band above an ivory header above a
   black hero — three grounds inside 160px. */
.bul-utility {
    background: var(--ivory-2);
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--stone);
}
.bul-utility__inner {
    max-width: var(--shell);
    margin-inline: auto;
    padding: 0.48rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.bul-utility__group {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    min-width: 0;
}
.bul-utility__group > * {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}
.bul-utility a:hover { color: var(--bronze-dk); }
.bul-utility i { color: var(--bronze); font-size: 0.9rem; opacity: 0.8; }

#bul-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 249, 245, 0.94);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--stone);
    transition: box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
}
#bul-header.is-stuck { box-shadow: 0 1px 24px rgba(19, 19, 17, 0.07); }

.bul-header__inner {
    max-width: var(--shell);
    margin-inline: auto;
    padding: 0.85rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 74px;
}
/* The nav is sized by its content and never shrinks. Letting flex squeeze it
   made the <ul> overflow its own box, so the last items painted on top of the
   header button instead of wrapping or hiding. Below --nav-min the drawer
   takes over entirely, so this can never push the actions off-screen. */
.bul-nav-primary { flex: 0 0 auto; }

/* The wordmark and the actions are as unshrinkable as the nav between them.
   Both hold nowrap content, so a flex squeeze pushes it out of its own box
   rather than wrapping it — which is what made the header items collide. */
.bul-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.bul-header__actions { flex: 0 0 auto; }

/* Wordmark: two lines of type, nothing else. It must never wrap — two lines
   is the mark, three is a bug. The boxed monogram this replaces read as a
   third object competing with the two lines beside it. */
.bul-mark {
    display: inline-flex;
    flex-direction: column;
    flex: none;
    line-height: 1.1;
    white-space: nowrap;
}
.bul-mark__line1 {
    font-family: var(--display);
    font-size: 1.24rem;
    letter-spacing: 0.035em;
    color: var(--text);
}
.bul-mark__line2 {
    font-family: var(--sans);
    font-size: 0.575rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--bronze-dk);
    margin-top: 0.34rem;
}
.bul-mark--lg .bul-mark__line1 { font-size: 1.5rem; }
.bul-mark--lg .bul-mark__line2 { font-size: 0.62rem; margin-top: 0.42rem; }
.bul-mark--light .bul-mark__line1 { color: var(--on-ink); }
.bul-mark--light .bul-mark__line2 { color: var(--bronze-lt); }
/* Uploaded logo (Theme Wording → Site Wide → Logo & Wordmark). Its height is
   set in the admin and arrives as --logo-h; the width follows the file's own
   proportions. The max-widths stop a very wide logo from pushing the nav out
   of the header — they are sized against the 1180px nav breakpoint — and
   object-fit scales such a logo down instead of squashing it. */
.bul-logo-img {
    display: block;
    height: clamp(24px, var(--logo-h, 44px), 80px);
    width: auto;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}
.bul-footer .bul-logo-img { max-width: 280px; }
.bul-drawer__head .bul-logo-img { max-width: 220px; }
@media (min-width: 1281px) {
    .bul-header__brand .bul-logo-img { max-width: 280px; }
}
@media (max-width: 560px) {
    .bul-logo-img { height: min(var(--logo-h, 44px), 40px); max-width: 58vw; }
}

/* Navigation.
   Five dropdown headings rather than a long list of links, following the
   reference site: each one groups a silo, and the bar stays short enough to
   breathe. Sentence case here on purpose — the uppercase letterspacing that
   carries eyebrows and buttons would make five multi-word headings shout. */
.bul-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bul-nav__item { position: relative; }

.bul-nav__item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.6rem 0.92rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.012em;
    white-space: nowrap;
    color: var(--text-soft);
    position: relative;
}
/* The rule grows out from the centre rather than wiping across. */
.bul-nav__item > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.18rem;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--bronze);
    transition: width 0.28s var(--ease), left 0.28s var(--ease);
}
.bul-nav__item > a:hover,
.bul-nav__item > a[aria-current="page"],
.bul-nav__item.is-current > a { color: var(--bronze-dk); }
.bul-nav__item > a:hover::after,
.bul-nav__item > a[aria-current="page"]::after,
.bul-nav__item.is-current > a::after { width: 58%; left: 21%; }

.bul-nav__item > a > i {
    font-size: 0.72rem;
    opacity: 0.6;
    transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.bul-nav__item--has-children:hover > a > i,
.bul-nav__item--has-children:focus-within > a > i { transform: rotate(-180deg); opacity: 1; }

.bul-nav__dropdown {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    min-width: 264px;
    background: var(--ivory);
    border: 1px solid var(--stone);
    border-top: 2px solid var(--bronze);
    box-shadow: 0 20px 48px rgba(19, 19, 17, 0.13);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
}
/* An invisible bridge across the gap, so the pointer can travel from the
   heading down into the panel without the panel closing under it. */
.bul-nav__dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75rem;
    height: 0.75rem;
}
.bul-nav__item--has-children:hover > .bul-nav__dropdown,
.bul-nav__item--has-children:focus-within > .bul-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bul-nav__item--has-children:hover { z-index: 60; }

/* An admin-managed menu can put a dropdown under the last heading, where a
   264px panel would run past the right gutter and be clipped. Those two open
   from their own right edge instead. */
.bul-nav__item:last-child > .bul-nav__dropdown,
.bul-nav__item:nth-last-child(2) > .bul-nav__dropdown { left: auto; right: 0; }

.bul-nav__dropdown a {
    display: block;
    padding: 0.66rem 1.15rem;
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.005em;
    text-transform: none;
    color: var(--text-soft);
    border-left: 3px solid transparent;
    transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}
.bul-nav__dropdown a:hover,
.bul-nav__dropdown a[aria-current="page"] {
    background: var(--bronze-8);
    border-left-color: var(--bronze);
    color: var(--bronze-dk);
}

.bul-header__actions { display: flex; align-items: center; gap: 0.7rem; }

.bul-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--stone-2);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.bul-burger:hover { border-color: var(--bronze); color: var(--bronze-dk); }
.bul-burger i { font-size: 1.3rem; }

/* Drawer */
#bul-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}
#bul-drawer.is-open { visibility: visible; pointer-events: auto; }
.bul-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 19, 17, 0.55);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
#bul-drawer.is-open .bul-drawer__backdrop { opacity: 1; }
.bul-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(400px, 88vw);
    background: var(--ink);
    color: var(--on-ink);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
}
#bul-drawer.is-open .bul-drawer__panel { transform: translateX(0); }
.bul-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--ink-3);
}
.bul-drawer__close {
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ink-3);
    border-radius: var(--radius);
    color: var(--on-ink);
    cursor: pointer;
    flex: none;
}
.bul-drawer__close:hover { border-color: var(--bronze); color: var(--bronze-lt); }
.bul-drawer__close i { font-size: 1.2rem; }
.bul-drawer__foot { margin-top: auto; padding: 1.35rem; border-top: 1px solid var(--ink-3); }
.bul-drawer__foot .bul-btn { width: 100%; }

/* The drawer mirrors the desktop dropdowns: the same five headings, each
   opening in place. Native <details>, so it works before app.js loads. */
.bul-mnav { padding: 0.75rem 1.35rem; flex: 1; }
.bul-mnav__link,
.bul-mnav__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ink-3);
    font-family: var(--display);
    font-size: 1.1rem;
    color: var(--on-ink);
    cursor: pointer;
    list-style: none;
}
.bul-mnav__group > summary::-webkit-details-marker { display: none; }
.bul-mnav__group > summary::marker { content: ''; }
.bul-mnav__group > summary i {
    font-size: 0.85rem;
    color: var(--bronze);
    flex: none;
    transition: transform 0.3s var(--ease);
}
.bul-mnav__group[open] > summary { color: var(--bronze-lt); }
.bul-mnav__group[open] > summary i { transform: rotate(-180deg); }
.bul-mnav__group ul { list-style: none; margin: 0; padding: 0.35rem 0 0.85rem; }
.bul-mnav__group ul a {
    display: block;
    padding: 0.62rem 0 0.62rem 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--on-ink-soft);
    border-left: 2px solid var(--ink-3);
}
.bul-mnav__group ul a:hover,
.bul-mnav__group ul a[aria-current="page"] { color: var(--bronze-lt); border-left-color: var(--bronze); }
/* The WP-menu fallback markup reuses the same list classes. */
.bul-mnav .bul-nav { flex-direction: column; align-items: stretch; gap: 0; }
.bul-mnav .bul-nav__item > a { padding: 1rem 0; border-bottom: 1px solid var(--ink-3); color: var(--on-ink); font-size: 0.95rem; }
.bul-mnav .bul-nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0.3rem 0 0.8rem; }
.bul-mnav .bul-nav__dropdown a { color: var(--on-ink-soft); padding-left: 1rem; border-left: 1px solid var(--ink-3); }

/* ----------------------------------------------------------------- 7 hero */
.bul-hero {
    position: relative;
    background: var(--ink);
    color: var(--on-ink);
    overflow: hidden;
    padding-block: clamp(4.5rem, 10vw, 8.5rem);
    isolation: isolate;
}
.bul-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.bul-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}
/* Atmosphere without photography: two off-centre radial washes (jade and
   bronze) over the ink ground, plus grain. */
.bul-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(74ch 60% at 88% 8%, rgba(26, 46, 40, 0.92), transparent 68%),
        radial-gradient(52ch 52% at 8% 96%, rgba(169, 133, 79, 0.16), transparent 70%),
        linear-gradient(175deg, rgba(19, 19, 17, 0.28), rgba(19, 19, 17, 0.9));
}
.bul-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grain);
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.bul-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}
.bul-hero__copy { min-width: 0; }
.bul-hero .bul-h1 { color: var(--on-ink); }
.bul-hero__crumb { margin-bottom: 1.85rem; }

/* The index card: a bordered panel of quick facts, ruled like a ledger.
   It is the hero's counterweight and the page's first proof point. */
.bul-hero__index {
    border: 1px solid rgba(242, 237, 227, 0.16);
    background: rgba(19, 19, 17, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 0.4rem 1.6rem 1.35rem;
}
.bul-hero__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid rgba(242, 237, 227, 0.1);
}
.bul-hero__fact:last-child { border-bottom: 0; padding-bottom: 0.25rem; }
.bul-hero__fact dt {
    font-size: 0.665rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    min-width: 0;
    overflow-wrap: break-word;
}
.bul-hero__fact dd {
    margin: 0;
    font-family: var(--display);
    font-size: 1.28rem;
    color: var(--bronze-lt);
    text-align: right;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.bul-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 2.2rem;
    font-size: 0.755rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
}
.bul-byline i { color: var(--bronze); }
.bul-byline span + span::before { content: '·'; margin-right: 0.7rem; color: var(--bronze); }

/* -------------------------------------------------- 8 answer (AEO block) */
.bul-answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(2.25rem, 4.5vw, 4.5rem);
    align-items: start;
}
.bul-answer__lead {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid var(--bronze);
}
.bul-answer__lead p {
    font-family: var(--display);
    font-size: clamp(1.32rem, 2.35vw, 1.82rem);
    line-height: 1.42;
    color: var(--text);
    margin: 0;
}
.bul-band--ink .bul-answer__lead p { color: var(--on-ink); }
.bul-answer__points { list-style: none; margin: 0; padding: 0; }
.bul-answer__points li {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--stone);
    font-size: 0.945rem;
    color: var(--text-soft);
}
.bul-answer__points li:first-child { padding-top: 0; }
.bul-answer__points li:last-child { border-bottom: 0; padding-bottom: 0; }
.bul-band--ink .bul-answer__points li { border-bottom-color: var(--ink-3); color: var(--on-ink-soft); }
.bul-answer__points i { color: var(--bronze); flex: none; margin-top: 0.3rem; }

/* --------------------------------------- 9 chapters (sticky index + prose) */
/* The signature section. A sticky, numbered index on the left; the long-form
   chapters on the right. The numerals are Marcellus at a large size and low
   opacity so they read as folios, not as UI. */
.bul-chapters {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
}
.bul-chapters__index {
    position: sticky;
    top: 7.5rem;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.bul-chapters__index-title {
    font-size: 0.665rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 0.9rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--stone);
}
.bul-band--ink .bul-chapters__index-title { color: var(--on-ink-muted); border-bottom-color: var(--ink-3); }
.bul-chapters__index ol { list-style: none; margin: 0; padding: 0; counter-reset: chap; }
.bul-chapters__index a {
    display: flex;
    gap: 0.85rem;
    padding: 0.62rem 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
    border-left: 1px solid transparent;
    padding-left: 0.9rem;
    margin-left: -0.9rem;
}
.bul-chapters__index a::before {
    counter-increment: chap;
    content: counter(chap, decimal-leading-zero);
    font-family: var(--display);
    font-size: 0.78rem;
    color: var(--bronze-32);
    flex: none;
    padding-top: 0.12rem;
    font-variant-numeric: tabular-nums;
}
.bul-chapters__index a:hover,
.bul-chapters__index a.is-active {
    color: var(--text);
    border-left-color: var(--bronze);
}
.bul-chapters__index a:hover::before,
.bul-chapters__index a.is-active::before { color: var(--bronze); }
.bul-band--ink .bul-chapters__index a { color: var(--on-ink-muted); }
.bul-band--ink .bul-chapters__index a:hover,
.bul-band--ink .bul-chapters__index a.is-active { color: var(--on-ink); }

.bul-chapter {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--stone);
    scroll-margin-top: 7.5rem;
}
.bul-chapter:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.bul-band--ink .bul-chapter { border-bottom-color: var(--ink-3); }
.bul-chapter__folio {
    display: block;
    font-family: var(--display);
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    color: var(--bronze);
    margin-bottom: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.bul-chapter .bul-h2 { margin-bottom: 1.35rem; }
.bul-chapter__body p {
    margin: 0 0 1.3rem;
    color: var(--text-soft);
    font-size: 1.0125rem;
    line-height: 1.85;
    max-width: 72ch;
    overflow-wrap: break-word;
}
.bul-chapter__body p:last-child { margin-bottom: 0; }
.bul-band--ink .bul-chapter__body p { color: var(--on-ink-soft); }

/* --------------------------------------------------------------- 10 cards */
.bul-grid {
    display: grid;
    gap: 1px;
    background: var(--stone);
    border: 1px solid var(--stone);
}
.bul-band--ink .bul-grid { background: var(--ink-3); border-color: var(--ink-3); }
.bul-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bul-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bul-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards sit in a hairline mesh rather than floating as separate tiles: the
   1px grid gap plus a matching border is the whole "card" treatment. */
.bul-card {
    background: var(--ivory);
    padding: 2.3rem 1.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
    transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.bul-card:hover { background: var(--ivory-2); }
.bul-band--ink .bul-card { background: var(--ink); }
.bul-band--ink .bul-card:hover { background: var(--ink-2); }
.bul-card__icon {
    width: 46px; height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bronze-32);
    border-radius: 999px;
    color: var(--bronze);
    flex: none;
    transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.bul-card__icon i { font-size: 1.28rem; }
.bul-card:hover .bul-card__icon { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.bul-card__title { font-family: var(--display); font-size: 1.24rem; line-height: 1.3; color: var(--text); }
.bul-band--ink .bul-card__title { color: var(--on-ink); }
.bul-card__text { margin: 0; font-size: 0.93rem; line-height: 1.75; color: var(--text-soft); overflow-wrap: break-word; }
.bul-band--ink .bul-card__text { color: var(--on-ink-soft); }
.bul-card__more { margin-top: auto; padding-top: 0.5rem; }

a.bul-card:hover { transform: translateY(-3px); }

/* --------------------------------------------------- 11 regions atlas */
/* Bali's regions as a ruled index: the name in display type, the character
   note beside it, the indicative rate right-aligned and tabular. */
.bul-atlas { border-top: 1px solid var(--stone); }
.bul-band--ink .bul-atlas { border-top-color: var(--ink-3); }
.bul-atlas__row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 15rem) minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.85rem 0.75rem;
    border-bottom: 1px solid var(--stone);
    transition: background-color 0.4s var(--ease), padding-left 0.4s var(--ease);
}
.bul-band--ink .bul-atlas__row { border-bottom-color: var(--ink-3); }
.bul-atlas__row:hover { background: var(--ivory-2); padding-left: 1.35rem; }
.bul-band--ink .bul-atlas__row:hover { background: var(--ink-2); }
.bul-atlas__no {
    font-family: var(--display);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    color: var(--bronze-32);
    font-variant-numeric: tabular-nums;
}
.bul-atlas__row:hover .bul-atlas__no { color: var(--bronze); }
.bul-atlas__name { font-family: var(--display); font-size: clamp(1.28rem, 2vw, 1.6rem); line-height: 1.2; color: var(--text); }
.bul-band--ink .bul-atlas__name { color: var(--on-ink); }
.bul-atlas__for { margin: 0; font-size: 0.925rem; line-height: 1.7; color: var(--text-soft); }
.bul-band--ink .bul-atlas__for { color: var(--on-ink-soft); }
.bul-atlas__rate { text-align: right; white-space: nowrap; }
.bul-atlas__rate strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.16rem;
    color: var(--bronze-dk);
    font-variant-numeric: tabular-nums;
}
.bul-band--ink .bul-atlas__rate strong { color: var(--bronze-lt); }
.bul-atlas__rate span {
    display: block;
    font-size: 0.665rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.22rem;
}

/* -------------------------------------------------------- 12 rates ledger */
.bul-rates { border-top: 1px solid var(--stone-2); }
.bul-band--ink .bul-rates { border-top-color: var(--ink-3); }
.bul-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
    gap: 1.5rem 2rem;
    align-items: center;
    padding: 2rem 0.75rem;
    border-bottom: 1px solid var(--stone);
    transition: background-color 0.4s var(--ease);
}
.bul-band--ink .bul-rate { border-bottom-color: var(--ink-3); }
.bul-rate:hover { background: var(--ivory-2); }
.bul-band--ink .bul-rate:hover { background: var(--ink-2); }
.bul-rate--feature { background: var(--ivory-2); }
.bul-band--ink .bul-rate--feature { background: var(--ink-2); }
.bul-rate__name { font-family: var(--display); font-size: 1.32rem; line-height: 1.24; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.bul-band--ink .bul-rate__name { color: var(--on-ink); }
.bul-rate__badge {
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bronze-dk);
    border: 1px solid var(--bronze-32);
    border-radius: 999px;
    padding: 0.22rem 0.62rem;
}
.bul-band--ink .bul-rate__badge { color: var(--bronze-lt); }
.bul-rate__text { margin: 0; font-size: 0.925rem; line-height: 1.72; color: var(--text-soft); }
.bul-band--ink .bul-rate__text { color: var(--on-ink-soft); }
.bul-rate__price { text-align: right; white-space: nowrap; }
.bul-rate__price strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 1.78rem);
    line-height: 1.1;
    color: var(--bronze-dk);
    font-variant-numeric: tabular-nums;
}
.bul-band--ink .bul-rate__price strong { color: var(--bronze-lt); }
.bul-rate__price span {
    display: block;
    font-size: 0.665rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.3rem;
}
.bul-note {
    display: flex;
    gap: 0.75rem;
    margin: 2.25rem 0 0;
    font-size: 0.855rem;
    line-height: 1.7;
    color: var(--muted);
    max-width: 82ch;
}
.bul-note i { color: var(--bronze); flex: none; margin-top: 0.25rem; }
.bul-band--ink .bul-note { color: var(--on-ink-muted); }

/* --------------------------------------------------------------- 13 steps */
.bul-steps { counter-reset: step; display: grid; gap: 0; }
.bul-step {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1.75rem;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--stone);
    position: relative;
}
.bul-step:first-child { border-top: 1px solid var(--stone); }
.bul-band--ink .bul-step { border-bottom-color: var(--ink-3); }
.bul-band--ink .bul-step:first-child { border-top-color: var(--ink-3); }
.bul-step__no {
    counter-increment: step;
    font-family: var(--display);
    font-size: clamp(2.1rem, 3.6vw, 2.9rem);
    line-height: 0.9;
    color: var(--bronze-32);
    font-variant-numeric: tabular-nums;
    transition: color 0.4s var(--ease);
}
.bul-step__no::before { content: counter(step, decimal-leading-zero); }
.bul-step:hover .bul-step__no { color: var(--bronze); }
.bul-step__title { font-family: var(--display); font-size: clamp(1.22rem, 1.9vw, 1.5rem); line-height: 1.26; color: var(--text); }
.bul-band--ink .bul-step__title { color: var(--on-ink); }
.bul-step__when {
    display: inline-block;
    margin-top: 0.55rem;
    font-size: 0.665rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bronze-dk);
}
.bul-band--ink .bul-step__when { color: var(--bronze-lt); }
.bul-step__text { margin: 0.85rem 0 0; font-size: 0.965rem; line-height: 1.8; color: var(--text-soft); max-width: 70ch; }
.bul-band--ink .bul-step__text { color: var(--on-ink-soft); }

/* --------------------------------------------------------------- 14 stats */
.bul-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--stone);
    border: 1px solid var(--stone);
}
.bul-band--ink .bul-stats { background: var(--ink-3); border-color: var(--ink-3); }
.bul-stat {
    background: var(--ivory);
    padding: 2.35rem 1.6rem;
    text-align: center;
    min-width: 0;
}
.bul-band--ink .bul-stat { background: var(--ink); }
.bul-stat__value {
    display: block;
    font-family: var(--display);
    font-size: clamp(2.1rem, 3.8vw, 2.95rem);
    line-height: 1;
    color: var(--bronze-dk);
    font-variant-numeric: tabular-nums;
}
.bul-band--ink .bul-stat__value { color: var(--bronze-lt); }
.bul-stat__value sup { font-size: 0.45em; vertical-align: super; margin-left: 0.1em; }
.bul-stat__label {
    display: block;
    margin-top: 0.85rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    overflow-wrap: break-word;
}
.bul-band--ink .bul-stat__label { color: var(--on-ink-muted); }

/* ------------------------------------------------------------- 15 compare */
.bul-compare-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.bul-compare {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.935rem;
}
.bul-compare caption { text-align: left; padding-bottom: 1rem; font-size: 0.85rem; color: var(--muted); }
.bul-compare th, .bul-compare td {
    padding: 1.15rem 1.25rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--stone);
}
.bul-band--ink .bul-compare th, .bul-band--ink .bul-compare td { border-bottom-color: var(--ink-3); }
.bul-compare thead th {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--stone-2);
    white-space: nowrap;
}
.bul-band--ink .bul-compare thead th { color: var(--on-ink-muted); border-bottom-color: var(--ink-3); }
.bul-compare thead th:last-child { color: var(--bronze-dk); }
.bul-band--ink .bul-compare thead th:last-child { color: var(--bronze-lt); }
.bul-compare tbody th {
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 400;
    color: var(--text);
    width: 26%;
}
.bul-band--ink .bul-compare tbody th { color: var(--on-ink); }
.bul-compare td { color: var(--text-soft); }
.bul-band--ink .bul-compare td { color: var(--on-ink-soft); }
.bul-compare td:last-child { background: var(--bronze-8); color: var(--text); }
.bul-band--ink .bul-compare td:last-child { color: var(--on-ink); }
.bul-compare tbody tr:last-child th, .bul-compare tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------ 16 faq */
.bul-faq { border-top: 1px solid var(--stone); }
.bul-band--ink .bul-faq { border-top-color: var(--ink-3); }
.bul-faq__item { border-bottom: 1px solid var(--stone); }
.bul-band--ink .bul-faq__item { border-bottom-color: var(--ink-3); }
.bul-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0.5rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    line-height: 1.45;
    color: var(--text);
    transition: color 0.3s var(--ease);
}
.bul-faq__q::-webkit-details-marker { display: none; }
.bul-band--ink .bul-faq__q { color: var(--on-ink); }
.bul-faq__q:hover { color: var(--bronze-dk); }
.bul-band--ink .bul-faq__q:hover { color: var(--bronze-lt); }
.bul-faq__q > span { min-width: 0; }
.bul-faq__q i {
    flex: none;
    font-size: 1rem;
    color: var(--bronze);
    margin-top: 0.3rem;
    transition: transform 0.35s var(--ease);
}
.bul-faq__item[open] .bul-faq__q i { transform: rotate(45deg); }
.bul-faq__item[open] .bul-faq__q { color: var(--bronze-dk); }
.bul-band--ink .bul-faq__item[open] .bul-faq__q { color: var(--bronze-lt); }
.bul-faq__a {
    padding: 0 3.5rem 1.65rem 0.5rem;
    margin: 0;
    font-size: 0.965rem;
    line-height: 1.82;
    color: var(--text-soft);
    max-width: 82ch;
    overflow-wrap: break-word;
}
.bul-band--ink .bul-faq__a { color: var(--on-ink-soft); }

/* Grouped FAQ hub: sticky category rail + one accordion group per category. */
.bul-faqg {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    gap: clamp(2.25rem, 4.5vw, 4.5rem);
    align-items: start;
}
.bul-faqg__nav {
    position: sticky;
    top: 7.5rem;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-top: 1px solid var(--stone);
}
.bul-band--ink .bul-faqg__nav { border-top-color: var(--ink-3); }
.bul-faqg__nav a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 0.75rem;
    border-bottom: 1px solid var(--stone);
    border-left: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-soft);
}
.bul-band--ink .bul-faqg__nav a { border-bottom-color: var(--ink-3); color: var(--on-ink-soft); }
.bul-faqg__nav a > i { color: var(--bronze-32); flex: none; font-size: 1.05rem; transition: color 0.3s var(--ease); }
.bul-faqg__nav a > span:first-of-type { flex: 1; min-width: 0; }
.bul-faqg__nav a:hover,
.bul-faqg__nav a.is-active {
    background: var(--ivory-2);
    border-left-color: var(--bronze);
    color: var(--text);
}
.bul-band--ink .bul-faqg__nav a:hover,
.bul-band--ink .bul-faqg__nav a.is-active { background: var(--ink-2); color: var(--on-ink); }
.bul-faqg__nav a:hover > i,
.bul-faqg__nav a.is-active > i { color: var(--bronze); }
.bul-faqg__count {
    flex: none;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    border: 1px solid var(--stone-2);
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
}
.bul-band--ink .bul-faqg__count { color: var(--on-ink-muted); border-color: var(--ink-3); }

.bul-faqg__group { margin-bottom: 3.75rem; scroll-margin-top: 7.5rem; }
.bul-faqg__group:last-child { margin-bottom: 0; }
.bul-faqg__group-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.2vw, 1.72rem);
    line-height: 1.24;
    color: var(--text);
}
.bul-band--ink .bul-faqg__group-title { color: var(--on-ink); }
.bul-faqg__group-title i { color: var(--bronze); font-size: 1.15rem; }

/* ------------------------------------------------- 17 directory & related */
.bul-dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--stone); border: 1px solid var(--stone); }
/* Declared before the responsive block so the 1024px / 860px steps still win. */
.bul-dir--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bul-band--ink .bul-dir { background: var(--ink-3); border-color: var(--ink-3); }
.bul-dir__item {
    background: var(--ivory);
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    transition: background-color 0.4s var(--ease);
}
.bul-band--ink .bul-dir__item { background: var(--ink); }
.bul-dir__item:hover { background: var(--ivory-2); }
.bul-band--ink .bul-dir__item:hover { background: var(--ink-2); }
.bul-dir__head { display: flex; align-items: center; gap: 0.8rem; }
.bul-dir__head i { color: var(--bronze); font-size: 1.16rem; flex: none; }
.bul-dir__title { font-family: var(--display); font-size: 1.14rem; line-height: 1.3; color: var(--text); min-width: 0; }
.bul-band--ink .bul-dir__title { color: var(--on-ink); }
.bul-dir__item:hover .bul-dir__title { color: var(--bronze-dk); }
.bul-band--ink .bul-dir__item:hover .bul-dir__title { color: var(--bronze-lt); }
.bul-dir__text { margin: 0; font-size: 0.9rem; line-height: 1.72; color: var(--text-soft); }
.bul-band--ink .bul-dir__text { color: var(--on-ink-soft); }
.bul-dir__go {
    margin-top: auto;
    padding-top: 0.85rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bronze-dk);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.bul-band--ink .bul-dir__go { color: var(--bronze-lt); }
.bul-dir__item:hover .bul-dir__go i { transform: translateX(3px); }
.bul-dir__go i { transition: transform 0.3s var(--ease); }

/* --------------------------------------------- 18 contact & checklist */
.bul-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}
.bul-methods { border-top: 1px solid var(--stone); }
.bul-band--ink .bul-methods { border-top-color: var(--ink-3); }
.bul-method {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem 0.5rem;
    border-bottom: 1px solid var(--stone);
    transition: background-color 0.4s var(--ease);
}
.bul-band--ink .bul-method { border-bottom-color: var(--ink-3); }
.bul-method:hover { background: var(--ivory-2); }
.bul-band--ink .bul-method:hover { background: var(--ink-2); }
.bul-method__icon {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bronze-32);
    border-radius: 999px;
    color: var(--bronze);
    flex: none;
}
.bul-method__title { font-family: var(--display); font-size: 1.1rem; line-height: 1.3; color: var(--text); }
.bul-band--ink .bul-method__title { color: var(--on-ink); }
.bul-method__text { margin: 0.25rem 0 0; font-size: 0.895rem; line-height: 1.65; color: var(--text-soft); overflow-wrap: break-word; }
.bul-band--ink .bul-method__text { color: var(--on-ink-soft); }

.bul-panel {
    border: 1px solid var(--stone);
    background: var(--ivory-2);
    padding: clamp(1.75rem, 3vw, 2.5rem);
}
.bul-band--ink .bul-panel { border-color: var(--ink-3); background: var(--ink-2); }
.bul-panel__title { font-family: var(--display); font-size: 1.42rem; line-height: 1.25; margin-bottom: 1.5rem; }

.bul-hours { list-style: none; margin: 0; padding: 0; }
.bul-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--stone);
    font-size: 0.9rem;
    color: var(--text-soft);
}
.bul-hours li:last-child { border-bottom: 0; }
.bul-band--ink .bul-hours li { border-bottom-color: var(--ink-3); color: var(--on-ink-soft); }
.bul-hours strong { font-weight: 600; color: var(--text); }
.bul-band--ink .bul-hours strong { color: var(--on-ink); }

/* Enquiry form */
.bul-form { display: grid; gap: 1.1rem; }
.bul-field { display: grid; gap: 0.45rem; min-width: 0; }
.bul-field label {
    font-size: 0.665rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.bul-band--ink .bul-field label { color: var(--on-ink-muted); }
.bul-field input,
.bul-field textarea,
.bul-field select {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--ivory);
    border: 1px solid var(--stone-2);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bul-field textarea { min-height: 128px; resize: vertical; line-height: 1.7; }
.bul-field input::placeholder, .bul-field textarea::placeholder { color: var(--muted); }
.bul-field input:focus, .bul-field textarea:focus, .bul-field select:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 3px var(--bronze-18);
}
.bul-band--ink .bul-field input,
.bul-band--ink .bul-field textarea,
.bul-band--ink .bul-field select { background: var(--ink); border-color: var(--ink-3); color: var(--on-ink); }
.bul-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.bul-form__note { margin: 0.35rem 0 0; font-size: 0.79rem; line-height: 1.6; color: var(--muted); }
.bul-band--ink .bul-form__note { color: var(--on-ink-muted); }
.bul-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; }

/* Checklist */
.bul-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--stone); border: 1px solid var(--stone); }
.bul-band--ink .bul-checklist { background: var(--ink-3); border-color: var(--ink-3); }
.bul-checklist__item {
    background: var(--ivory);
    display: flex;
    gap: 1.1rem;
    padding: 1.7rem 1.75rem;
    min-width: 0;
}
.bul-band--ink .bul-checklist__item { background: var(--ink); }
.bul-checklist__no {
    font-family: var(--display);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    color: var(--bronze);
    flex: none;
    padding-top: 0.28rem;
    font-variant-numeric: tabular-nums;
}
.bul-checklist__text { margin: 0; font-size: 0.955rem; line-height: 1.72; color: var(--text-soft); }
.bul-band--ink .bul-checklist__text { color: var(--on-ink-soft); }

/* ----------------------------------------------------------------- 19 cta */
.bul-cta {
    position: relative;
    background: var(--jade);
    color: var(--on-ink);
    padding-block: clamp(4rem, 8vw, 6.5rem);
    overflow: hidden;
    isolation: isolate;
}
.bul-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(58ch 70% at 84% 12%, rgba(169, 133, 79, 0.2), transparent 70%),
        radial-gradient(48ch 60% at 6% 92%, rgba(19, 19, 17, 0.5), transparent 72%);
}
.bul-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grain);
    opacity: 0.14;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.bul-cta h2 { color: var(--on-ink); }
.bul-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.bul-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ------------------------- 20 footer, fab, back-to-top, breadcrumb */
.bul-footer {
    background: var(--ink);
    color: var(--on-ink-soft);
    position: relative;
    isolation: isolate;
}
.bul-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grain);
    opacity: 0.12;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.bul-footer__top { padding-block: 4.5rem 3.25rem; }
.bul-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
}
.bul-footer__brand p { margin: 1.5rem 0 0; font-size: 0.925rem; line-height: 1.8; color: var(--on-ink-soft); max-width: 42ch; }
.bul-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--ink-3);
    border-radius: 999px;
    font-size: 0.735rem;
    letter-spacing: 0.06em;
    color: var(--on-ink-muted);
}
.bul-footer__badge i { color: var(--bronze); }
.bul-footer h2 {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bronze-lt);
    margin-bottom: 1.35rem;
}
.bul-footer__links { list-style: none; margin: 0; padding: 0; }
.bul-footer__links li { margin-bottom: 0.72rem; }
.bul-footer__links a { font-size: 0.895rem; color: var(--on-ink-soft); }
.bul-footer__links a:hover { color: var(--bronze-lt); }
.bul-footer__contact { display: grid; gap: 1.1rem; }
.bul-footer__contact-item { display: flex; gap: 0.85rem; font-size: 0.895rem; min-width: 0; }
.bul-footer__contact-item i { color: var(--bronze); font-size: 1.1rem; flex: none; margin-top: 0.2rem; }
.bul-footer__contact-item strong {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin-bottom: 0.3rem;
}
.bul-footer__contact-item a, .bul-footer__contact-item div { overflow-wrap: break-word; min-width: 0; }

.bul-footer__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 1.6rem 0;
    border-top: 1px solid var(--ink-3);
    font-size: 0.815rem;
}
.bul-footer__group > span {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bronze-lt);
}
.bul-footer__group a { color: var(--on-ink-muted); }
.bul-footer__group a:hover { color: var(--bronze-lt); }

.bul-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid var(--ink-3);
    font-size: 0.79rem;
    color: var(--on-ink-muted);
}
.bul-footer__bottom p { margin: 0; max-width: 88ch; }
.bul-footer__legal { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.bul-footer__legal a:hover { color: var(--bronze-lt); }

.bul-fab {
    position: fixed;
    right: 1.15rem;
    bottom: calc(1.15rem + env(safe-area-inset-bottom));
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.3rem;
    background: var(--ink);
    color: var(--on-ink);
    border: 1px solid var(--bronze-32);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(19, 19, 17, 0.26);
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.bul-fab i { font-size: 1.28rem; color: var(--bronze-lt); }
.bul-fab:hover { background: var(--jade); border-color: var(--bronze); transform: translateY(-2px); }

#bul-top {
    position: fixed;
    right: 1.15rem;
    bottom: calc(5.2rem + env(safe-area-inset-bottom));
    z-index: 89;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ivory);
    color: var(--text);
    border: 1px solid var(--stone-2);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s, border-color 0.3s var(--ease);
}
#bul-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#bul-top:hover { border-color: var(--bronze); color: var(--bronze-dk); }

.bul-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.755rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
}
.bul-crumb a { color: var(--bronze-lt); }
.bul-crumb a:hover { color: var(--on-ink); }
.bul-crumb li[aria-hidden] { color: var(--bronze); }
.bul-crumb li[aria-current] { color: var(--on-ink-soft); }

/* --------------------------------------------------- 21 blog, search, 404 */
.bul-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--stone); border: 1px solid var(--stone); }
.bul-post {
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: background-color 0.4s var(--ease);
}
.bul-post:hover { background: var(--ivory-2); }
.bul-post__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ivory-2); }
.bul-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.bul-post:hover .bul-post__thumb img { transform: scale(1.04); }
.bul-post__body { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.bul-post__meta { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.bul-post__title { font-family: var(--display); font-size: 1.24rem; line-height: 1.3; color: var(--text); }
.bul-post:hover .bul-post__title { color: var(--bronze-dk); }
.bul-post__excerpt { margin: 0; font-size: 0.915rem; line-height: 1.72; color: var(--text-soft); }
.bul-post__more { margin-top: auto; padding-top: 0.75rem; }

.bul-article { max-width: var(--narrow); margin-inline: auto; }
.bul-article__body { font-size: 1.0425rem; line-height: 1.85; color: var(--text-soft); }
.bul-article__body > * + * { margin-top: 1.3rem; }
.bul-article__body h2, .bul-article__body h3 { margin-top: 2.75rem; color: var(--text); }
.bul-article__body h2 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
.bul-article__body h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }
.bul-article__body a { color: var(--bronze-dk); border-bottom: 1px solid var(--bronze-32); }
.bul-article__body a:hover { border-bottom-color: var(--bronze); }
.bul-article__body img { border-radius: var(--radius); margin-block: 1.75rem; }
.bul-article__body blockquote {
    margin: 1.9rem 0;
    padding-left: 1.6rem;
    border-left: 2px solid var(--bronze);
    font-family: var(--display);
    font-size: 1.24rem;
    line-height: 1.55;
    color: var(--text);
}
.bul-article__body ul, .bul-article__body ol { padding-left: 1.4rem; }
.bul-article__body li { margin-bottom: 0.6rem; }
.bul-article__body :where(h2, h3, h4)[id] { scroll-margin-top: 7.5rem; }

.bul-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.bul-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--stone-2);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}
.bul-pagination .page-numbers:hover { border-color: var(--bronze); color: var(--bronze-dk); }
.bul-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.bul-searchform { display: flex; gap: 0.6rem; max-width: 520px; }
.bul-searchform input[type="search"] {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 0.95rem;
    background: var(--ivory);
    border: 1px solid var(--stone-2);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    color: var(--text);
}
.bul-searchform input[type="search"]:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px var(--bronze-18); }

.bul-empty {
    border: 1px solid var(--stone);
    background: var(--ivory-2);
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.bul-empty p { margin: 0 auto; max-width: 56ch; color: var(--text-soft); }

/* --------------------------------- 22 reveal-on-scroll & reduced motion */
/* Scoped to .bul-js (set inline in the head) so the content is never hidden
   from a visitor whose browser did not run our script. */
.bul-js .bul-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.bul-js .bul-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .bul-js .bul-reveal { opacity: 1; transform: none; }
    .bul-post:hover .bul-post__thumb img { transform: none; }
}

/* ----------------------------------------------------------- 23 responsive */
/* The five silo headings plus the wordmark and the header button need about
   1,075px. Below 1180px the drawer takes over — earlier than the usual
   tablet breakpoint, and with headroom for a longer heading, because a nav
   that does not fit is worse than a burger. A nine-item flat menu needed
   ~1,460px here and pushed the header button off-screen at every width. */
@media (max-width: 1180px) {
    .bul-nav { display: none; }
    .bul-burger { display: inline-flex; }
}
@media (max-width: 1240px) {
    .bul-utility__group > .bul-hide-mobile { display: none; }
}

@media (max-width: 1180px) {
    :root { --band-y: 5.5rem; }
    .bul-chapters { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .bul-faqg { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .bul-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bul-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .bul-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
    .bul-answer, .bul-contact { grid-template-columns: minmax(0, 1fr); }
    .bul-cta__inner { grid-template-columns: minmax(0, 1fr); }
    .bul-dir, .bul-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bul-atlas__row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
    .bul-atlas__for { grid-column: 2 / -1; }
}

@media (max-width: 860px) {
    :root { --band-y: 4.25rem; --gutter: 1.15rem; }
    .bul-chapters, .bul-faqg { grid-template-columns: minmax(0, 1fr); }
    /* The index becomes a collapsed strip at the top rather than a rail. */
    .bul-chapters__index, .bul-faqg__nav {
        position: static;
        max-height: none;
        overflow: visible;
        border: 1px solid var(--stone);
        padding: 1.1rem 1.25rem;
        background: var(--ivory-2);
    }
    .bul-band--ink .bul-chapters__index,
    .bul-band--ink .bul-faqg__nav { border-color: var(--ink-3); background: var(--ink-2); }
    .bul-faqg__nav a { border-bottom-color: var(--stone); }
    .bul-grid--2, .bul-grid--3, .bul-grid--4,
    .bul-stats, .bul-dir, .bul-posts, .bul-checklist { grid-template-columns: minmax(0, 1fr); }
    .bul-stat { padding: 1.9rem 1.35rem; }
    .bul-rate { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
    .bul-rate__price { text-align: left; }
    .bul-rate__price strong { display: inline; }
    .bul-rate__price span { display: inline; margin-left: 0.4rem; }
    .bul-step { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.1rem; }
    .bul-method { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .bul-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .bul-faq__a { padding-right: 1rem; }
    .bul-fab__label { display: none; }
    .bul-fab { padding: 0.95rem; }
    .bul-form__row { grid-template-columns: minmax(0, 1fr); }
    .bul-head--split { align-items: flex-start; }
}

/* Between the tablet and the phone step the hours, the email and the phone
   stop fitting on one line. Every child sets white-space: nowrap, so without
   this they overflow the bar instead of wrapping inside it. */
@media (max-width: 720px) {
    .bul-utility__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem 1.1rem;
    }
    .bul-utility__group { gap: 1.1rem; }
}

@media (max-width: 560px) {
    .bul-utility__inner { justify-content: center; font-size: 0.7rem; }
    .bul-utility__group:first-child { display: none; }
    .bul-mark__line1 { font-size: 0.95rem; }
    .bul-mark__line2 { font-size: 0.54rem; letter-spacing: 0.24em; }
    .bul-header__actions .bul-btn { display: none; }
    .bul-actions .bul-btn { width: 100%; }
    .bul-atlas__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.5rem; }
    .bul-atlas__no { display: none; }
    .bul-atlas__for { grid-column: 1 / -1; }
    .bul-card, .bul-dir__item, .bul-checklist__item { padding: 1.7rem 1.35rem; }
}

/* Dark-mode users get the ink ground for the shell chrome, but the design is
   a single intentional light-and-dark composition, so nothing else inverts.
   Declaring color-scheme keeps native scrollbars and form controls correct. */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: light dark; }
}

/* ==========================================================================
   PHOTOGRAPHY
   The theme was drawn to work without photographs, so every rule here is a
   modifier: the base design is untouched and a section only changes shape
   once it actually has an image to show.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   The no-photo hero leans on two radial washes for depth. With a photograph
   those washes fight the image, so the illustrated hero swaps them for a
   single scrim weighted to the left, where the headline sits. The right side
   stays open so the photograph is still legible as a photograph. */
.bul-hero--has-image .bul-hero__bg img { opacity: 0.62; }
.bul-hero--has-image::before {
    background:
        linear-gradient(101deg,
            rgba(19, 19, 17, 0.95) 0%,
            rgba(19, 19, 17, 0.86) 34%,
            rgba(19, 19, 17, 0.58) 64%,
            rgba(19, 19, 17, 0.42) 100%),
        linear-gradient(to top, rgba(19, 19, 17, 0.62), transparent 42%);
}
.bul-hero--has-image::after { opacity: 0.12; }

/* The quick-facts card sits on the open side of the scrim, so it earns its
   own ground rather than relying on the hero's. */
.bul-hero--has-image .bul-hero__index {
    background: rgba(19, 19, 17, 0.52);
    backdrop-filter: blur(9px) saturate(115%);
    -webkit-backdrop-filter: blur(9px) saturate(115%);
    padding: 1.7rem 1.6rem;
    border: 1px solid rgba(242, 237, 227, 0.14);
    border-radius: var(--radius-lg);
}

@supports not (backdrop-filter: blur(1px)) {
    .bul-hero--has-image .bul-hero__index { background: rgba(19, 19, 17, 0.82); }
}

/* --- Photo cards ---------------------------------------------------------
   The card grid draws its dividers with a 1px gap over a stone ground, so a
   photo card bleeds its image to the card edge and lets the gap do the ruling. */
.bul-card--photo { padding: 0 0 2rem; gap: 0; }
.bul-card__shot {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ivory-2);
    margin-bottom: 1.6rem;
}
.bul-card__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-out);
}
a.bul-card--photo:hover .bul-card__shot img,
a.bul-card--photo:focus-visible .bul-card__shot img { transform: scale(1.045); }

.bul-card--photo > :not(.bul-card__shot) { margin-inline: 1.9rem; }
.bul-card--photo .bul-card__icon {
    margin-top: -3.15rem;
    position: relative;
    z-index: 1;
    background: var(--ivory);
    width: 2.7rem;
    height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--stone);
}
.bul-card--photo .bul-card__title { margin-top: 0.9rem; }
.bul-card--photo .bul-card__text { margin-top: 0.7rem; }
.bul-card--photo .bul-card__more { margin-top: 1.1rem; }

.bul-band--ink .bul-card--photo .bul-card__icon {
    background: var(--ink-2);
    border-color: var(--ink-3);
}
.bul-band--ink .bul-card__shot { background: var(--ink-3); }

/* --- Region plates -------------------------------------------------------
   With photographs the ruled index becomes a plate grid. The row keeps its
   element order for screen readers; only the visual arrangement changes. */
.bul-atlas--plates {
    border-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1px;
    background: var(--stone);
    border: 1px solid var(--stone);
}
.bul-band--ink .bul-atlas--plates { background: var(--ink-3); border-color: var(--ink-3); }

/* regions.php picks a column count the plate total divides into; auto-fit
   alone left six plates as four-and-two. */
.bul-atlas--plates.bul-atlas--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bul-atlas--plates.bul-atlas--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bul-atlas--plates.bul-atlas--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) {
    .bul-atlas--plates.bul-atlas--cols-3,
    .bul-atlas--plates.bul-atlas--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
    .bul-atlas--plates[class*="bul-atlas--cols-"] { grid-template-columns: minmax(0, 1fr); }
}

.bul-atlas--plates .bul-atlas__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 1.9rem;
    border-bottom: 0;
    background: var(--ivory);
    position: relative;
}
.bul-band--ink .bul-atlas--plates .bul-atlas__row { background: var(--ink-2); }
.bul-atlas--plates .bul-atlas__row:hover { padding-left: 0; }

.bul-atlas__shot {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ivory-2);
    margin-bottom: 1.5rem;
}
.bul-atlas__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-out);
}
.bul-atlas--plates .bul-atlas__row:hover .bul-atlas__shot img { transform: scale(1.045); }

.bul-atlas--plates .bul-atlas__no {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--ink);
    color: var(--bronze-lt);
    padding: 0.5rem 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    z-index: 1;
}
.bul-atlas--plates .bul-atlas__name,
.bul-atlas--plates .bul-atlas__for,
.bul-atlas--plates .bul-atlas__rate { margin-inline: 1.7rem; }
.bul-atlas--plates .bul-atlas__for { margin-top: 0.6rem; }
.bul-atlas--plates .bul-atlas__rate { margin-top: 1.1rem; text-align: left; }

/* --- Illustrated chapters ------------------------------------------------
   Above 62rem an illustrated chapter becomes two columns and the photograph
   alternates side; below it the figure simply follows the prose. */
.bul-chapter__fig { margin: 1.9rem 0 0; }
.bul-chapter__fig img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--ivory-2);
}
.bul-chapter__fig figcaption {
    margin-top: 0.7rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-left: 2px solid var(--bronze-32);
    padding-left: 0.7rem;
}
.bul-band--ink .bul-chapter__fig figcaption { color: var(--on-ink-muted); }
.bul-band--ink .bul-chapter__fig img { background: var(--ink-3); }

@media (min-width: 62rem) {
    .bul-chapter--illus-left,
    .bul-chapter--illus-right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
        column-gap: 2.6rem;
        align-items: start;
    }
    .bul-chapter--illus-left > .bul-chapter__folio,
    .bul-chapter--illus-right > .bul-chapter__folio,
    .bul-chapter--illus-left > .bul-h2,
    .bul-chapter--illus-right > .bul-h2 { grid-column: 1 / -1; }

    .bul-chapter--illus-right .bul-chapter__body { grid-column: 1; }
    .bul-chapter--illus-right .bul-chapter__fig  { grid-column: 2; margin-top: 0.4rem; }

    .bul-chapter--illus-left .bul-chapter__body { grid-column: 2; }
    .bul-chapter--illus-left .bul-chapter__fig  { grid-column: 1; grid-row: 3; margin-top: 0.4rem; }

    .bul-chapter--illus-left .bul-chapter__fig img,
    .bul-chapter--illus-right .bul-chapter__fig img { aspect-ratio: 4 / 5; }
}

/* --- Plates (gallery) ----------------------------------------------------
   A photographic mesh. The lead plate spans two columns when the row count
   divides by three, which the template decides; this only draws it. */
.bul-plates {
    display: grid;
    gap: 1px;
    background: var(--stone);
    border: 1px solid var(--stone);
}
.bul-band--ink .bul-plates { background: var(--ink-3); border-color: var(--ink-3); }
.bul-plates--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bul-plates--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bul-plate {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--ivory-2);
    aspect-ratio: 3 / 2;
    isolation: isolate;
}
.bul-band--ink .bul-plate { background: var(--ink-2); }
.bul-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease-out);
}
.bul-plate:hover img { transform: scale(1.05); }

/* The lead spans two rows as well as two columns. Spanning columns alone
   made it twice the height of its row-mate, which left a blank block under
   that plate and pushed the last plate onto a row of its own. */
.bul-plate--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.bul-plate__cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.4rem 1.5rem 1.25rem;
    color: var(--on-ink);
    background: linear-gradient(to top, rgba(19, 19, 17, 0.88), rgba(19, 19, 17, 0.55) 45%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.bul-plate__cap strong {
    font-family: var(--display);
    font-size: 1.06rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.bul-plate__cap span {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--on-ink-soft);
}

@media (max-width: 60rem) {
    .bul-plates--2,
    .bul-plates--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bul-plate--lead { grid-column: span 2; grid-row: span 1; aspect-ratio: 3 / 2; }
    /* Two columns under a full-width lead leave an odd plate out when the
       total is even; that last plate takes the whole row instead. */
    .bul-plate--lead ~ .bul-plate:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 2 / 1; }
}

@media (max-width: 34rem) {
    .bul-plates--2,
    .bul-plates--3 { grid-template-columns: minmax(0, 1fr); }
    .bul-plate--lead,
    .bul-plate--lead ~ .bul-plate:last-child:nth-child(even) { grid-column: span 1; aspect-ratio: 3 / 2; }
    .bul-card--photo > :not(.bul-card__shot) { margin-inline: 1.45rem; }
    .bul-atlas--plates .bul-atlas__name,
    .bul-atlas--plates .bul-atlas__for,
    .bul-atlas--plates .bul-atlas__rate { margin-inline: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bul-card__shot img,
    .bul-atlas__shot img,
    .bul-plate img { transition: none; }
    a.bul-card--photo:hover .bul-card__shot img,
    .bul-atlas--plates .bul-atlas__row:hover .bul-atlas__shot img,
    .bul-plate:hover img { transform: none; }
}

/* --- Illustrated tiles (related / directory) -----------------------------
   The tile keeps its padded body and gains a bleed image at the top, so the
   icon layout and the photo layout share one box model and one hover. */
.bul-dir--photo .bul-dir__item { padding: 0 0 1.8rem; gap: 0; }
.bul-dir__shot {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ivory-2);
    margin-bottom: 1.35rem;
}
.bul-band--ink .bul-dir__shot { background: var(--ink-3); }
.bul-dir__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-out);
}
.bul-dir--photo .bul-dir__item:hover .bul-dir__shot img,
.bul-dir--photo .bul-dir__item:focus-visible .bul-dir__shot img { transform: scale(1.05); }

.bul-dir--photo .bul-dir__head,
.bul-dir--photo .bul-dir__text,
.bul-dir--photo .bul-dir__go { margin-inline: 1.8rem; }
.bul-dir--photo .bul-dir__text { margin-top: 0.6rem; }
.bul-dir--photo .bul-dir__go { margin-top: 1rem; }

@media (max-width: 34rem) {
    .bul-dir--photo .bul-dir__head,
    .bul-dir--photo .bul-dir__text,
    .bul-dir--photo .bul-dir__go { margin-inline: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bul-dir__shot img { transition: none; }
    .bul-dir--photo .bul-dir__item:hover .bul-dir__shot img { transform: none; }
}

/* ==========================================================================
   24 HOMEPAGE RHYTHM
   Scoped to <main class="bul-home"> (front-page.php). The routed pages are
   long-form and keep the airy default; the homepage is a sampler of every
   silo, and at 7rem bands with stacked heading blocks it spent more of the
   scroll on empty ground than on content. Here the bands are shorter, each
   heading block runs heading-left / intro-right, and on phones the image
   lists become a swipe row and a thumbnail list instead of full-width stacks.
   ========================================================================== */

.bul-home { --band-y: clamp(3.25rem, 6vw, 5rem); }
.bul-home .bul-hero { padding-block: clamp(3.25rem, 7vw, 6rem); }
.bul-home .bul-cta { padding-block: clamp(3rem, 6vw, 4.75rem); }

/* --- Heading blocks: heading left, intro right --------------------------- */
.bul-home .bul-head:not(.bul-head--center) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* A short intro sits on the heading's foot line; a long one takes the
       extra height into the heading row, so the eyebrow and heading stay
       together at the top instead of sinking to the bottom of the column. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: end;
    margin-bottom: 2.5rem;
}
.bul-home .bul-head > .bul-eyebrow { grid-column: 1; grid-row: 1; }
.bul-home .bul-head > .bul-h2 { grid-column: 1; grid-row: 2; align-self: start; }
.bul-home .bul-head > .bul-lede {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    max-width: 62ch;
    font-size: clamp(0.98rem, 1.2vw, 1.06rem);
    line-height: 1.75;
}

/* --- Answer ---------------------------------------------------------------- */
.bul-home .bul-answer {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
}
.bul-home .bul-answer__lead p { font-size: clamp(1.2rem, 1.95vw, 1.55rem); line-height: 1.45; }
.bul-home .bul-answer__points {
    border: 1px solid var(--stone);
    background: var(--ivory-2);
    padding: 0.4rem 1.6rem;
}
.bul-home .bul-answer__points li,
.bul-home .bul-answer__points li:first-child,
.bul-home .bul-answer__points li:last-child { padding: 0.85rem 0; }

/* --- Quick picks: one row each, three across ------------------------------ */
.bul-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--ink-3);
    border: 1px solid var(--ink-3);
}
.bul-pick {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    background: var(--ink);
    min-width: 0;
    transition: background-color 0.4s var(--ease);
}
.bul-pick:hover { background: var(--ink-2); }
.bul-pick__icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid var(--bronze-32);
    border-radius: 999px;
    color: var(--bronze-lt);
    transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.bul-pick__icon i { font-size: 1.2rem; }
.bul-pick:hover .bul-pick__icon { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.bul-pick__title {
    flex: 1;
    min-width: 0;
    font-size: 1.16rem;
    line-height: 1.3;
    color: var(--on-ink);
}
.bul-pick__go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bronze-lt);
    opacity: 0.8;
    transition: opacity 0.3s var(--ease);
}
.bul-pick__go i { font-size: 0.95rem; }
.bul-pick:hover .bul-pick__go { opacity: 1; }

/* --- Region plates: name and rate share a line ----------------------------- */
.bul-home .bul-atlas--plates .bul-atlas__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "shot shot"
        "name rate"
        "for  for";
    column-gap: 1rem;
    align-content: start;
    align-items: start;
    padding-bottom: 1.6rem;
}
.bul-home .bul-atlas--plates .bul-atlas__shot { grid-area: shot; aspect-ratio: 16 / 10; margin-bottom: 1.3rem; }
.bul-home .bul-atlas--plates .bul-atlas__name { grid-area: name; margin: 0 0 0 1.5rem; }
.bul-home .bul-atlas--plates .bul-atlas__rate { grid-area: rate; margin: 0.2rem 1.5rem 0 0; text-align: right; }
.bul-home .bul-atlas--plates .bul-atlas__rate strong { font-size: 1.06rem; }
.bul-home .bul-atlas--plates .bul-atlas__rate span { margin-top: 0.1rem; }
.bul-home .bul-atlas--plates .bul-atlas__for { grid-area: for; margin: 0.65rem 1.5rem 0; font-size: 0.9rem; }
.bul-home .bul-note { margin-top: 1.5rem; }

/* --- Chapters: smaller folio headings, two text columns on wide screens ---- */
.bul-home .bul-chapter { padding-bottom: 2.25rem; margin-bottom: 2.25rem; }
.bul-home .bul-chapter:last-child { padding-bottom: 0; margin-bottom: 0; }
.bul-home .bul-chapter__folio { margin-bottom: 0.5rem; }
.bul-home .bul-chapter .bul-h2 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); margin-bottom: 1rem; }
.bul-home .bul-chapter__body p { font-size: 0.975rem; line-height: 1.8; margin-bottom: 1rem; }

@media (min-width: 75rem) {
    /* A text-only chapter is two short paragraphs set at 72ch, which left a
       third of the column empty. Set as two newspaper columns it fills the
       measure and halves the height, and each column stays a short read. */
    .bul-home .bul-chapter:not(.bul-chapter--illus-left):not(.bul-chapter--illus-right) .bul-chapter__body {
        column-count: 2;
        column-gap: 2.75rem;
    }
    .bul-home .bul-chapter:not(.bul-chapter--illus-left):not(.bul-chapter--illus-right) .bul-chapter__body p { max-width: none; }
}

/* --- Directory tiles ------------------------------------------------------- */
.bul-home .bul-dir--photo .bul-dir__item { padding-bottom: 1.5rem; }
.bul-home .bul-dir__shot { margin-bottom: 1.15rem; }
.bul-home .bul-dir--photo .bul-dir__head,
.bul-home .bul-dir--photo .bul-dir__text,
.bul-home .bul-dir--photo .bul-dir__go { margin-inline: 1.4rem; }
.bul-home .bul-dir__title { font-size: 1.08rem; }
.bul-home .bul-dir__text { font-size: 0.875rem; line-height: 1.65; }
.bul-home .bul-dir--photo .bul-dir__go { margin-top: 0.75rem; }

/* --- FAQ: heading block beside the questions ------------------------------- */
.bul-home .bul-faq__q { padding-block: 1.2rem; }
.bul-home .bul-faqband .bul-actions { margin-top: 1.75rem; }

@media (min-width: 64rem) {
    .bul-home .bul-faqband > .bul-shell {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
        grid-template-rows: auto 1fr;
        column-gap: clamp(2.5rem, 5vw, 5rem);
        align-items: start;
    }
    .bul-home .bul-faqband .bul-head {
        display: block;
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }
    .bul-home .bul-faqband .bul-head > .bul-lede { margin-top: 1.1rem; }
    .bul-home .bul-faqband .bul-faq { grid-column: 2; grid-row: 1 / span 2; }
    .bul-home .bul-faqband .bul-actions { grid-column: 1; grid-row: 2; }
}

/* --- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .bul-home .bul-answer { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .bul-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The quick-facts ledger drops under the headline here; as a 2 × 2 grid
       it is half the height of the single-column list. */
    .bul-home .bul-hero__index {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
    }
    .bul-home .bul-hero__fact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
        padding: 1rem 1.15rem;
        border-bottom: 1px solid rgba(242, 237, 227, 0.1);
    }
    .bul-home .bul-hero__fact:nth-child(odd) { border-right: 1px solid rgba(242, 237, 227, 0.1); }
    .bul-home .bul-hero__fact:nth-last-child(-n + 2):nth-child(odd),
    .bul-home .bul-hero__fact:last-child { border-bottom: 0; }
    .bul-home .bul-hero__fact dd { text-align: left; font-size: 1.12rem; }
}

@media (max-width: 860px) {
    .bul-home .bul-head:not(.bul-head--center) { display: block; margin-bottom: 2rem; }
    .bul-home .bul-head > .bul-lede { margin-top: 1rem; }
}

/* --- Phone ----------------------------------------------------------------- */
@media (max-width: 40rem) {
    .bul-home .bul-hero__crumb { margin-bottom: 1.25rem; }
    .bul-home .bul-byline { margin-top: 1.5rem; }
    .bul-home .bul-hero__grid { gap: 2rem; }

    .bul-home .bul-answer__lead { padding-left: 1.25rem; }
    .bul-home .bul-answer__points { padding: 0.25rem 1.2rem; }

    .bul-picks { grid-template-columns: minmax(0, 1fr); }
    .bul-pick { padding: 0.95rem 1.1rem; gap: 0.85rem; }
    .bul-pick__icon { width: 40px; height: 40px; }
    .bul-pick__title { font-size: 1.05rem; }

    /* Regions become a swipe row: the next plate peeks in at the edge so
       the row reads as scrollable without an arrow control. */
    .bul-home .bul-atlas--plates,
    .bul-home .bul-atlas--plates[class*="bul-atlas--cols-"] {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        gap: 0.75rem;
        background: none;
        border: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .bul-home .bul-atlas--plates::-webkit-scrollbar { display: none; }
    .bul-home .bul-atlas--plates .bul-atlas__row { scroll-snap-align: start; border: 1px solid var(--stone); }
    .bul-home .bul-atlas--plates .bul-atlas__name { margin-left: 1.15rem; font-size: 1.2rem; }
    .bul-home .bul-atlas--plates .bul-atlas__rate { margin-right: 1.15rem; }
    .bul-home .bul-atlas--plates .bul-atlas__for { margin-inline: 1.15rem; font-size: 0.85rem; }

    /* Plates stay two-up under a full-width lead, cropped square. */
    .bul-home .bul-plates--2,
    .bul-home .bul-plates--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bul-home .bul-plate { aspect-ratio: 1 / 1; }
    .bul-home .bul-plate--lead { grid-column: span 2; aspect-ratio: 3 / 2; }
    .bul-home .bul-plate--lead ~ .bul-plate:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 2 / 1; }
    .bul-home .bul-plate__cap { padding: 1.75rem 0.9rem 0.8rem; }
    .bul-home .bul-plate__cap strong { font-size: 0.95rem; }
    .bul-home .bul-plate__cap span { font-size: 0.7rem; letter-spacing: 0.03em; }

    .bul-home .bul-chapter { padding-bottom: 1.75rem; margin-bottom: 1.75rem; }
    .bul-home .bul-chapter .bul-h2 { font-size: 1.4rem; }

    /* Directory tiles become a thumbnail list. */
    .bul-home .bul-dir--photo .bul-dir__item {
        display: grid;
        grid-template-columns: 5.75rem minmax(0, 1fr);
        grid-template-areas:
            "shot head"
            "shot text"
            "shot go";
        grid-template-rows: auto auto 1fr;
        column-gap: 1rem;
        align-items: start;
        padding: 0.9rem;
    }
    .bul-home .bul-dir--photo .bul-dir__shot { grid-area: shot; aspect-ratio: 1 / 1; margin: 0; }
    .bul-home .bul-dir--photo .bul-dir__head { grid-area: head; margin: 0; }
    .bul-home .bul-dir--photo .bul-dir__head i { display: none; }
    .bul-home .bul-dir--photo .bul-dir__text { grid-area: text; margin: 0.25rem 0 0; font-size: 0.84rem; line-height: 1.55; }
    .bul-home .bul-dir--photo .bul-dir__go { grid-area: go; margin: 0.45rem 0 0; padding-top: 0; }

    .bul-home .bul-faq__q { padding: 1.05rem 0.25rem; }
    .bul-home .bul-faq__a { padding-left: 0.25rem; }
}