/* Hotel Boreal — owner stylesheet.
 *
 * Loaded after the page's captured CSS when site.json sets `overrides_css`, so it wins on
 * equal specificity. Changes the owner makes after the port was accepted live belong here
 * rather than in the capture: the capture stays the record of what the source served, and
 * everything deliberate about our version sits in one small file.
 *
 * Every rule here must be a declared deviation in approved.json. Keep it that way.
 */

/* ==========================================================================
   Footer legal bar — "All Rights Reserved…" and the three policy links
   ==========================================================================

   Three defects, all measured on the built page, all in the same 30px-tall band:

   1. NOTHING SPACES THE LINKS. The items are inline-block with margin 0 and
      padding 0, so the only thing between "Privacy Policy", "Terms and
      Conditions" and "Contact" is the whitespace text node in the markup:
      4.0px at every width. Three links read as one run-on string, and the
      spacing is at the mercy of source whitespace — which is how removing two
      dead links from this bar left visible gaps behind.

   2. THE LINKS FAIL CONTRAST. #CC3366 on the bar's #000000 ground is 4.23:1,
      under the 4.5:1 AA floor for body text. It is also nowhere in this site's
      palette — it is an Elementor default that came over with the template and
      clashes with the #26465C the rest of the site is built on.

   3. HOVER HIDES THEM. The hover state darkens to #333366, which against black
      is 1.81:1. Pointing at a link makes it almost disappear. Whatever else a
      hover does, it must not do that.

   The fix keeps the bar recessive. This is the quietest element on the page and
   its job is to be legible and get out of the way, so: no separator glyph, no
   rule, no caps, no new typeface. Both colours are the site's own — #C9C4BF is
   in the brl-* layer already, and #FFFFFF matches the copyright line sitting
   opposite. Spacing is stated once, as a gap, instead of inherited from markup
   whitespace. */

.elementor-element-160f4489 .elementor-icon-list-itemsfg {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* 48px between links, 8px between rows once they wrap.
     There is room for it: at 1440 the copyright ends at x=440 and the bar's
     right edge is 1280, so 840px carries three links measuring 310.5px in
     total. Wide spacing is what keeps three short links from reading as one
     string without needing a divider glyph to do the work. */
  gap: 8px 48px;
}

.elementor-element-160f4489 .elementor-icon-list-item {
  margin: 0;
  padding: 0;
}

.elementor-element-160f4489 .elementor-icon-list-item a {
  /* 12.13:1 on the bar's black ground, against 4.23:1 before. */
  color: #C9C4BF;
  text-decoration: none;
  transition: color .18s ease;
}

/* Hover REVEALS. The state it replaces went to #333366 — 1.81:1 — so the link
   faded out exactly when someone pointed at it. White matches the copyright
   text opposite and is unambiguous at 21:1. The underline is offset so the
   descenders in "Privacy Policy" stay readable. */
.elementor-element-160f4489 .elementor-icon-list-item a:hover,
.elementor-element-160f4489 .elementor-icon-list-item a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* The captured CSS ships no visible focus ring on these. Keyboard users need
   one, and on a black ground it has to be light. */
.elementor-element-160f4489 .elementor-icon-list-item a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-element-160f4489 .elementor-icon-list-item a { transition: none; }
}

/* Three breakpoints, each set by a measurement rather than a round number.
   The three links measure 310.5px together.

   >=1024  48px. The copyright and the links share one line and there is room:
           at 1440 the copyright ends at x=440 and the bar ends at 1280.
   431-1023  36px. Still sharing a line, less of it — at 768 the links have
           ~443px, and 310.5 + 2x36 = 382.5 fits.
   <=430   20px. Here the source stacks the links BELOW the copyright, so they
           have the full content box, but it is narrow: 360px at 390 viewport,
           and 310.5 + 2x20 = 350.5 leaves 9.5px. At 36px they would need
           382.5px and "Contact" would orphan onto its own row.

   Below ~350px they wrap however wide the gap, which is the right outcome —
   the 8px row-gap exists for exactly that.

   Centring is kept on the source's own breakpoint (767px, where Elementor's
   `elementor-mobile-align-center` takes over) rather than the gap's, so the
   links stay aligned the way the captured design aligned them. */
@media (max-width: 1023px) {
  .elementor-element-160f4489 .elementor-icon-list-itemsfg { gap: 8px 36px; }
}

@media (max-width: 767px) {
  .elementor-element-160f4489 .elementor-icon-list-itemsfg { justify-content: center; }
}

@media (max-width: 430px) {
  .elementor-element-160f4489 .elementor-icon-list-itemsfg { gap: 8px 20px; }
}

/* ==========================================================================
   Generated pages — /accessibility/ and /site-map/
   ==========================================================================

   These two pages are built by tools/new_page.mjs, which clones the
   /term-condition/ capture and swaps its content. That is what gives them the
   right chrome, container and type scale for free. What it cannot give them is
   a rhythm for content the template never had: /term-condition/ is an unbroken
   run of <p>, so the captured CSS has a rule for paragraphs and nothing else.

   Measured on the built page, every heading and list came out at margin 0:

     H3  'Home'    gap above   0px      m=0px/0px
     UL            gap above   0px      m=0px/0px   padding-left 40px, disc
     LI            gap above   0px
     H3  'Stay'    gap above   0px      m=0px/0px

   A group heading with 0px above it and 0px below it is not a heading, it is a
   line of larger text. Proximity is the whole mechanism by which "Stay" claims
   the two links under it rather than the two above, and at equal spacing that
   mechanism is simply absent -- which is why the page reads as one packed
   column. Everything below follows from fixing that one thing: space above a
   group must clearly exceed space inside it. */

/* -- shared prose rhythm --------------------------------------------------- */

body.brl-page-site-map .elementor-element-d2dbcf2 h3,
body.brl-page-accessibility .elementor-element-d2dbcf2 h3 {
  /* 28px Superior set solid on a 28px line-height clips nothing but reads
     tight; 1.2 is the smallest leading that lets the descenders sit. */
  line-height: 1.2;
}

/* On /accessibility/ the sections are still flat siblings -- prose, not an
   index -- so the separation is stated as margin. 48/16 is the same 3:1
   above-to-below ratio the site map gets from its grid. */
body.brl-page-accessibility .elementor-element-d2dbcf2 h3 { margin: 48px 0 16px; }
body.brl-page-accessibility .elementor-element-d2dbcf2 h3:first-child { margin-top: 0; }
body.brl-page-accessibility .elementor-element-d2dbcf2 p { margin: 0 0 16px; }
/* A single column of 16px Roboto across the full 1160px container runs to ~150
   characters. Capped at 72ch, which is inside the 80 the rest of the site sets. */
body.brl-page-accessibility .elementor-element-d2dbcf2 p { max-width: 72ch; }

/* -- /site-map/ ------------------------------------------------------------ */

/* Each group is one .brl-sitemap-group element (tools/new_page.mjs emits the
   wrapper) rather than an h3 and a ul that merely happen to be adjacent. That
   is what allows the separation to be stated once, as a grid gap, instead of
   being assembled out of sibling margins that have to cancel at every seam.

   Two columns, not one: six groups holding twelve short links down a 1160px
   column is a thin ribbon beside a lot of empty page, and the point of a site
   map is to be taken in at once. Two columns of 548px halve the height and put
   the groups side by side, where they read as a map of the site rather than a
   list of everything in it. One column below 900px, where 548 would not hold
   the longest journal title in two lines. */
body.brl-page-site-map .elementor-element-d2dbcf2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 64px;
  align-content: start;
}

@media (min-width: 900px) {
  body.brl-page-site-map .elementor-element-d2dbcf2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 64px;
  }
}

/* The intro sentence introduces every group, so it spans them. */
body.brl-page-site-map .elementor-element-d2dbcf2 > p {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 72ch;
}

body.brl-page-site-map .brl-sitemap-group h3 { margin: 0 0 18px; }

/* No bullets and no indent. Every item here is a link and nothing else, so a
   disc marks nothing, and the browser's 40px padding pushes the links out from
   under the heading that labels them -- weakening the grouping this whole
   block exists to establish. Flush left, they read as one unit with it. */
body.brl-page-site-map .brl-sitemap-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

body.brl-page-site-map .brl-sitemap-group li {
  margin: 0;
  /* The longest entry ("The Best Things to Do in Two Harbors, Minnesota
     (Year-Round Guide)") wraps to two lines at 548px; 1.45 keeps those two
     lines closer to each other than to the next link, so a wrapped entry still
     reads as one item. The 12px grid gap is what separates items. */
  line-height: 1.45;
}

/* #CC3366 is the same Elementor default the footer legal bar carried, and it is
   off-palette for the same reason -- see the note above that fix. #26465C is
   the site's own blue and runs 9.9:1 on this white ground against 4.9:1. */
body.brl-page-site-map .brl-sitemap-group a {
  color: #26465C;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(38, 70, 92, .35);
  transition: color .18s ease, text-decoration-color .18s ease;
}

body.brl-page-site-map .brl-sitemap-group a:hover,
body.brl-page-site-map .brl-sitemap-group a:focus-visible {
  color: #090909;
  text-decoration-color: currentColor;
}

body.brl-page-site-map .brl-sitemap-group a:focus-visible {
  outline: 2px solid #26465C;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.brl-page-site-map .brl-sitemap-group a { transition: none; }
}

/* -- the title block on the generated pages -------------------------------- */

/* The template puts 20px between the page title and the first line of body copy.
   That is a legal page's proportion: /term-condition/ follows its title with an
   "Effective Date" line and then an unbroken run of paragraphs, so the title has
   nothing to be distinguished FROM. A site map does -- six group headings at
   28px start 56px apart further down -- and at 20px the 60px title read as one
   more heading in that stack rather than the name of the page. Everything else
   on these pages separates by 48-56px; the title now does too.

   The h1 itself is left exactly as captured -- 60px/72px Superior 600, #090909,
   identical to /privacy-policy/ and /term-condition/. It is the space around it
   that was wrong, not the type, and these two pages should not quietly grow
   their own title style. */
/* .elementor-element is repeated deliberately: Elementor writes this widget's own
   margin as `.elementor-831 .elementor-element.elementor-element-20f80ab`, three
   classes, which outranks a two-class selector no matter that ours loads later.
   The container is a flex column with a 20px row-gap, so this margin adds to it. */
body.brl-page-site-map .elementor-element.elementor-element-20f80ab,
body.brl-page-accessibility .elementor-element.elementor-element-20f80ab {
  margin-bottom: 20px;
}

/* The lead sentence sat at 16px -- the same size as the twelve links below it --
   so it read as a stray first entry rather than an introduction. 18px and a
   lighter ink place it between the 28px group headings and the 16px links,
   which is where it belongs in the hierarchy. 62ch keeps it to one comfortable
   line-length; it is one sentence and should not span 1160px. */
body.brl-page-site-map .elementor-element-d2dbcf2 > p {
  font-size: 18px;
  line-height: 1.6;
  color: #4A4A4A;
  max-width: 62ch;
}

/* ==========================================================================
   The header at rest: one scrim instead of per-page exceptions
   ==========================================================================

   The design floats the nav over the hero at scroll 0 and drops a solid
   rgba(0,0,0,.85) bar in once you scroll. The nav's links and logo are white,
   so at rest their legibility depends entirely on what the hero happens to
   look like in the top 100px -- and it was never checked per page. Measured at
   1440, compositing each hero's own scrim, contrast of white against the
   BRIGHTEST pixel under the nav:

       /about-us/       7.24:1      /                2.79:1
       /destinations/   8.61:1      /contact-us/     2.68:1
       /blog/           6.36:1      /faq/            2.78:1
       /book-now/       4.12:1      /single-blog/    2.88:1
                                    /single-room/    3.09:1
                                    /package/        2.94:1

   Six of the ten fail 4.5:1. The source had already hit this and fixed it the
   only way a per-page fix can be applied -- by pinning ONE page's bar solid:

       body.page-id-891 .brl-site-header{background-color:rgba(0,0,0,.85)}
       // Solid dark header on pages without a dark hero (Offers, Contact)

   891 is /package/. Contact is named in that comment and never got the rule,
   and it measures worse (2.68:1) than the page that did. That is the shape of
   the problem: a list of page ids cannot keep up with the pages, and every
   hero swapped in later silently re-opens it.

   So the fix goes on the header, once, and does not care what is behind it.
   A scrim under the nav, constant through the band the logo and links occupy
   (y=16..82 of the 100px bar) and fading out below it so there is no edge.

   Solving for the alpha that puts the WORST pixel on every hero page over
   4.5:1 gives 0.25 (/contact-us/ is the binding case). This uses 0.35: heroes
   get swapped and images get re-encoded, and the margin costs nothing --
   0.35 still reads as "nav over photo", where the 0.85 scrolled bar reads as
   a solid band.

   With this in place /package/ no longer needs its exception and is released
   below, so all ten hero pages behave identically at rest. */

body.brl-has-hero:not(.brl-scrolled) .brl-site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  /* Taller than the bar so the fade finishes past it. The header is
     position:fixed, which always creates a stacking context, so z-index:-1
     stays inside the header -- above its own (transparent) background, below
     the logo and links. */
  height: 170%;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .35) 0%,
    rgba(0, 0, 0, .35) 48%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

/* It is a rest-state device only: once .brl-scrolled brings in the solid bar
   the scrim is gone, and the transition on .brl-site-header covers the swap. */

/* Release /package/ from its exception. The scrim now does that page's job --
   it measured 2.94:1 unaided and clears 4.5:1 with the scrim, the same as its
   nine peers -- and leaving the override in would make Offers the only page
   whose header does not match the rest at rest, which is the complaint this
   whole block answers. The source rule carries !important on five repeated
   classes, so this has to outrank it rather than merely follow it. */
body.page-id-891.brl-has-hero:not(.brl-scrolled)
  .brl-site-header.brl-site-header.brl-site-header.brl-site-header.brl-site-header {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   /reserve-dates/ — the pre-opening reservation form
   ==========================================================================

   Brief task 1. The page borrows /term-condition/'s chrome and container like the
   other generated pages, so the heading and intro already sit at the right type
   scale; everything below styles the island, which has no captured CSS because
   the source has no such form.

   Scoped to the island's OWN root classes rather than to the page's body, because
   the same form is embedded on /rooms/ for the Coming Soon state (brief task 5).
   splitTree replaces the placeholder div with the component's output, so there is
   no wrapper element to hang a page scope on -- .brl-reserve__form and
   .brl-reserve__done are the roots the component actually renders.

   Restrained on purpose. This is the one thing on the site that has a job to do,
   and the job is a legible sequence of eight fields — so: one column of inputs on
   a two-column grid at desktop, generous targets, one accent, and no decoration
   competing with the button. The blue is #26465C, the site's own, already used
   for links in the site map. */

.brl-reserve__form .brl-reserve__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 32px;
  max-width: 720px;
  margin-top: 28px;
}

@media (min-width: 720px) {
  .brl-reserve__form .brl-reserve__grid { grid-template-columns: 1fr 1fr; }
  /* Room preference and the free-text box read across the whole measure. */
  .brl-reserve__form .brl-field--wide { grid-column: 1 / -1; }
}

/* align-content: start stops the control stretching to fill a taller cell. Without it
   a grid row is only as symmetrical as its tallest field, and any field that ever gains
   a line -- a hint, a validation message -- silently resizes its neighbour. */
.brl-reserve__form .brl-field { display: grid; gap: 6px; align-content: start; }

.brl-reserve__form .brl-field__label {
  font-size: 14px;
  font-weight: 600;
  color: #2D2D2D;
  letter-spacing: .01em;
}

/* The required marker is the only red on the page and it is doing real work, so it
   gets a title attribute rather than relying on colour alone. */
.brl-reserve__form .brl-field__label abbr {
  color: #A33; text-decoration: none; border: 0; margin-left: 2px;
}

/* Inline with the label, and normal-weight so it reads as an aside to a bold label. */
.brl-reserve__form .brl-field__hint {
  font-size: 13px;
  font-weight: 400;
  color: #6A6A6A;
  margin-left: 6px;
  white-space: nowrap;
}

.brl-reserve__form .brl-field input,
.brl-reserve__form .brl-field select,
.brl-reserve__form .brl-field textarea {
  font: inherit;
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
  color: #1A1A1A;
  background: #fff;
  padding: 11px 13px;
  border: 1px solid #C4C4C4;
  border-radius: 3px;
  width: 100%;
  min-height: 46px;             /* comfortable target, and uniform across types */
  transition: border-color .15s ease, box-shadow .15s ease;
}

.brl-reserve__form .brl-field textarea { min-height: 104px; resize: vertical; }

.brl-reserve__form .brl-field :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: #26465C;
  box-shadow: 0 0 0 3px rgba(38, 70, 92, .18);
}

/* Only after the field has been interacted with -- :invalid alone would paint every
   required field red before anyone has typed a character. */
.brl-reserve__form .brl-field :is(input, select, textarea):user-invalid {
  border-color: #A33;
}

.brl-reserve__form .brl-reserve__cta {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: 28px;
}

.brl-reserve__form .brl-reserve__btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: #26465C;
  border: 0;
  border-radius: 3px;
  padding: 15px 34px;
  min-height: 50px;
  cursor: pointer;
  transition: background-color .18s ease;
}

.brl-reserve__form .brl-reserve__btn:hover { background: #1B3546; }
.brl-reserve__form .brl-reserve__btn:focus-visible {
  outline: 2px solid #26465C; outline-offset: 3px;
}
.brl-reserve__form .brl-reserve__btn[disabled] { opacity: .6; cursor: default; }

/* The no-payment line. It is welded under the button because the brief requires it
   under every instance -- "Reserve" implies a held room and this is what corrects
   that. 8.9:1 on white, so it is quiet without being fine print. */
.brl-reserve__form .brl-reserve__micro {
  margin: 0;
  font-size: 14px;
  color: #4A4A4A;
}

.brl-reserve__form .brl-reserve__error {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 3px solid #A33;
  background: #FBF3F3;
  color: #2D2D2D;
  font-size: 15px;
  max-width: 720px;
}

/* -- the confirmation state ------------------------------------------------ */

.brl-reserve__done { max-width: 720px; }

.brl-reserve__done h2 {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 20px;
}

.brl-reserve__done ol {
  margin: 0 0 24px;
  padding-left: 22px;
  display: grid;
  gap: 12px;
}

.brl-reserve__done li { line-height: 1.5; }

.brl-reserve__note {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #E2E2E2;
  color: #4A4A4A;
}

:is(.brl-reserve__note, .brl-reserve__error) a { color: #26465C; }

@media (prefers-reduced-motion: reduce) {
  .brl-reserve__form :is(input, select, textarea, .brl-reserve__btn) { transition: none; }
}

/* ==========================================================================
   Homepage announcement band — brief task 8 / Part B3
   ==========================================================================

   The brief specifies the treatment as well as the copy: "FULL WIDTH BAND, DARK
   BACKGROUND, AMBER ACCENT". Everything below follows from those five words plus
   the site's own vocabulary.

   The ground is #14212B — the site's #26465C blue taken down to near-black rather
   than a neutral grey, so the band reads as part of this site and not as a
   generic dark strip. The amber is #E0A44A, used on exactly two things: the
   eyebrow, and the button. One accent, twice, is what makes it an accent.

   It breaks the page's white rhythm on purpose. This is the one moment on the
   homepage asking for something, sitting directly under the intro paragraph and
   above the map, where the brief puts it. */

.brl-announce {
  /* Full width regardless of the container it lands in: the anchor paragraph sits
     inside Elementor's 1160px column, and the brief says full width. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: #14212B;
  color: #F2EFEC;
  padding-block: 72px;
}

.brl-announce__in {
  max-width: 720px;          /* the body copy runs ~62ch here, not 1160px of it */
  margin-inline: auto;
  padding-inline: 24px;
  text-align: center;
}

/* The one place on the site where tracked-out small caps earn their keep: it is a
   date stamp, not a label invented to sit above a heading. */
.brl-announce__eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E0A44A;             /* 7.4:1 on #14212B */
}

.brl-announce__title {
  margin: 0 0 20px;
  font-family: Superior, Georgia, serif;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 600;
  color: #FFF;
  text-wrap: balance;
}

.brl-announce__body {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.65;
  color: #D8D2CC;             /* 11.3:1 */
}

.brl-announce__btn {
  display: inline-block;
  background: #E0A44A;
  color: #14212B;             /* dark ink on amber: 7.4:1, and it reads as a button */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 16px 38px;
  border-radius: 3px;
  transition: background-color .18s ease;
}

.brl-announce__btn:hover { background: #EDB662; }
.brl-announce__btn:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }

/* The no-payment line, welded under the button as everywhere else. */
.brl-announce__micro {
  margin: 14px 0 0;
  font-size: 14px;
  color: #A9A29B;             /* 6.0:1 — quiet, still legible */
}

@media (max-width: 600px) {
  .brl-announce { padding-block: 52px; }
  .brl-announce__btn { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .brl-announce__btn { transition: none; }
}

/* ==========================================================================
   /rooms/ — the Coming Soon state (brief task 5 / Part B4)
   ==========================================================================

   The room listing is dropped and this replaces it, so the page arrives with no
   container of its own: measured unstyled at x=0, full 1440 wide, title butted
   against the fixed header. These rules give it the same measure and rhythm the
   rest of the site uses — 1160px centred, the page title at 60px Superior like
   every other page title, and the form below it at the reading width it has on
   /reserve-dates/, which it inherits now that its styles are scoped to the
   island rather than to that page's body. */

.brl-coming { padding-block: 72px 64px; }

.brl-coming__in {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Two classes deliberately: the booking widget's own stylesheet carries
   `.bb h1,.bb h2,...{font-family:var(--ui) !important}` at specificity (0,1,1),
   and this section is inserted inside .bb. A single class with !important still
   loses that tie -- font-size applied and font-family did not, which is the tell.
   (0,2,0) wins it. */
.brl-coming .brl-coming__title {
  margin: 0 0 24px;
  /* The site's own variable rather than naming the face, so this stays correct
     if the family is ever changed in one place. */
  font-family: var(--hb-serif), Georgia, serif !important;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.1;
  font-weight: 600;
  color: #090909;
  text-wrap: balance;
}

.brl-coming__body {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.65;
  color: #3A3A3A;
  max-width: 68ch;
}

/* The form is the point of the page, so it gets air above it and a rule to sit
   under -- the only structural line on the page, marking where reading stops and
   doing starts. */
.brl-coming__form {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid #E2E2E2;
}

@media (max-width: 600px) {
  .brl-coming { padding-block: 48px 44px; }
}

/* ==========================================================================
   The reservation pop-up — brief task 11
   ==========================================================================

   It interrupts someone, so it is built to be got rid of: a close target big
   enough to hit, a backdrop that dismisses, and nothing that hides the exit.
   The panel scrolls internally rather than growing past the viewport, because
   the eight-field form is taller than a phone screen and a modal you cannot
   reach the bottom of is a trap.

   No entrance animation beyond a short fade. A pop-up that slides, bounces or
   scales is drawing attention to the interruption itself. */

.brl-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;                       /* above the header's z-index: 99 */
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 16, 21, .62);
  animation: brl-popup-in .18s ease-out;
}

.brl-popup__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(86vh, 860px);
  overflow-y: auto;
  background: #fff;
  color: #2D2D2D;
  border-radius: 4px;
  padding: 40px 40px 36px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
}

/* 44px target, outside the reading column, and it never scrolls away. */
.brl-popup__close {
  position: sticky;
  top: -4px;
  float: right;
  margin: -14px -14px 0 0;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  color: #5A5A5A;
  background: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.brl-popup__close:hover { color: #111; background: #F0EEEC; }
.brl-popup__close:focus-visible { outline: 2px solid #26465C; outline-offset: 2px; }

.brl-popup__title {
  margin: 0 0 14px;
  font-family: var(--hb-serif), Georgia, serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  color: #090909;
}

.brl-popup__intro {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #4A4A4A;
}

/* One column inside a 640px panel: two would put eight fields in a grid narrower
   than the labels are comfortable at. */
.brl-popup .brl-reserve__grid { grid-template-columns: 1fr; max-width: none; margin-top: 20px; }
.brl-popup .brl-field--wide { grid-column: auto; }

@media (max-width: 600px) {
  .brl-popup { padding: 0; place-items: stretch; }
  .brl-popup__panel {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    padding: 28px 20px 24px;
  }
}

@keyframes brl-popup-in { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .brl-popup { animation: none; }
}

/* ==========================================================================
   The floating booking pill — hidden, not removed
   ==========================================================================

   `.brl-pill` is the "When / Guests / Promo" bar that floats on all 23 routes.
   Every segment of it opens a booking flow that cannot complete: Cloudbeds is not
   connected before opening, the rates behind it were the template pricing removed
   under task 6, and the rooms it would search are the Coming Soon page. Offering
   someone a date picker that leads nowhere is the same broken promise the rest of
   this work has been undoing.

   HIDDEN RATHER THAN DROPPED, at the owner's instruction. The markup stays in the
   capture and in the built page, so when Cloudbeds is connected this is one rule
   to delete rather than a widget to rebuild.

   `display: none` rather than visibility or opacity: it must be out of the layout
   and out of the accessibility tree, not merely invisible. A pill that is
   transparent but still focusable is worse than one you can see -- a keyboard user
   would tab into a date picker nobody can see them using. */

.brl-pill { display: none !important; }

/* ==========================================================================
   The no-payment line under every CTA button — brief, "MICROCOPY UNDER EVERY
   BUTTON INSTANCE"
   ==========================================================================

   Inserted by applyCtaMicrocopy as a sibling after each .elementor-widget-button.
   It has to read as part of the button rather than as body copy underneath it,
   so it is tied to the button by proximity (6px, against the 16-24px rhythm of
   the containers it lands in) and set small and quiet enough not to compete with
   the label above it — while staying at 13px/#5A5A5A, which measures 5.9:1 on
   white and 4.8:1 on the #F3F0EA card fills. It is a legal qualifier; it may not
   be decorative grey. */

.brl-micro {
  /* Inside the button widget, which may be laid out as a flex row: this forces the line
     onto its own line under the button rather than next to it. */
  display: block;
  flex: 0 0 100%;
  width: 100%;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #5A5A5A;
  font-style: normal;
  max-width: 30ch;          /* keeps it to two lines under a button, not a paragraph */
}

/* Elementor states button alignment on the widget; applyCtaMicrocopy copies those
   classes across so the line follows the button it belongs to. Without this the
   line sat at the column's left edge under a centred button. */
.brl-micro.elementor-align-center { text-align: center; margin-inline: auto; }
.brl-micro.elementor-align-right  { text-align: right;  margin-inline: auto 0; }
.brl-micro.elementor-align-left   { text-align: left; }

/* On a dark container the same line needs its own value, or it drops to 2.1:1
   against the card. */
.brl-micro--on-dark { color: #D8D4CC; }

@media (max-width: 767px) {
  /* The mobile alignment class wins on small screens, mirroring Elementor's own
     -mobile-align- behaviour on the button above. */
  .brl-micro.elementor-mobile-align-justify { text-align: center; }
}

/* ── Newsletter block ────────────────────────────────────────────────────────
   Owner edits doc "9.10.26 HB Edits": more room between the section border and
   the title, the first paragraph pulled up under the title as a subtitle, and
   the second paragraph set as body text rather than all-caps.

   SPECIFICITY, and why these selectors look absurd. Elementor writes its winning
   rules as `.elementor-9.elementor-9 .elementor-element.elementor-element-bb62719 p`
   -- four classes and a type, (0,4,1) -- with the page-id class deliberately
   doubled. A sane `.elementor-element-bb62719 p` is (0,1,1) and loses silently,
   which is exactly what the first version of this block did: the copy changed and
   the styling did not. Repeating the element-id class five times gets to (0,5,x)
   and wins outright rather than by load order, and it does it WITHOUT naming the
   page-id class -- which matters because this block appears on two pages under
   two different ids (home is .elementor-9, /package/ is its own).

   Two id sets throughout: home is a912153/fd596c2/4789797/bb62719, /package/ is
   6084c95/10801c9/48cae00/c77f210. Listed rather than given a shared class,
   because neither capture has one and adding it would mean editing both.

   The measured problem: the section's 20px padding plus the wrapper's 10px put
   the title 30px from the section border, while the subtitle sat 20px below the
   title -- the heading was nearly as close to the edge as to the line that
   belongs with it. The fix moves those two numbers in opposite directions.    */
.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153,
.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95 { padding-top: 64px; padding-bottom: 56px; }

/* Subtitle: stays uppercase per the doc, tracked out so it reads as a label
   rather than as body copy set in caps, and pulled tight under the title. */
.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797,
.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00 { padding-top: 0; margin-top: 4px; }
.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797,
.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00,
.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797 p,
.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00 p {
  /* Stated, not inherited. The homepage widget already had text-transform from
     Elementor and /package/'s did not, so without this the same subtitle rendered
     caps on one page and sentence case on the other. */
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 2.08px;
}

/* Body paragraph: the source set this in caps, which is why a forty-word
   sentence read as a second heading. Sentence case, with a measure that stops it
   running the full width of the band. */
.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719,
.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210 { margin-top: 20px; }
.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719,
.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210,
.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719 p,
.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210 p {
  text-transform: none;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: normal;
  max-width: 62ch;
  margin-inline: auto;
}

@media (max-width: 767px) {
.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153,
.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95 { padding-top: 44px; padding-bottom: 40px; }
}