/* ============================================================================
   BARK INN — "LIVELY" LAYER for the inner pages (2026-10-22)
   Loaded AFTER styles.css, only on pages whose <body class="lively">:
   boarding, new-clients, availability, faq.

   THE BRIEF, in the owner's words: "a lot of white space ... feels empty and
   wasted space ... too dry ... needs more life ... not just subtle, it feels basic."

   What was measured on the 1280px screenshots before this pass:
     - every page opened with a text-only head and ~250px of blank cream under it;
     - Poppins 300 in mid-grey on white everywhere: low-energy type;
     - lists, policy boxes and the FAQ were hairlines on white, no colour at all;
     - section padding up to 5.5rem top AND bottom, so the gap between two blocks
       was ~180px of nothing.

   What this layer does — the SKELETON IS UNCHANGED (top header, stacked
   sections; the left-rail experiment was rejected and is not coming back):
     1. A PHOTO HEAD on every page: one of her own photographs, with the title
        on a solid colour card (never text over the sunlit grass — that measured
        1.31:1 on the home hero). Each page has its own card colour from the logo.
     2. Content as CARDS with colour: rounded, lifted, a coloured top stripe that
        cycles through her palette; icon chips on the "includes" and requirement
        lists; numbered circles on the six steps.
     3. Section washes in her painted colours at low intensity, tighter rhythm.
     4. Text at weight 400 and darker; kickers become small pills.
     5. Boarding gets a PRICE BOARD: every rate in one place, set large.

   CONTRAST (computed, 2026-10-22): white on every card colour >= 5.99:1;
   --muted #5b5b66 >= 5.96:1 on every wash; plum/teal text >= 5.36:1 on every
   wash. Stripes and icon chips are decoration. Do not lighten the card colours.
   ========================================================================= */

.lively {
  --wash-lav:#f4f0f8; --wash-sage:#edf3f0; --wash-blush:#fbf0ee;
  --muted:#5b5b66; --ink:#3f3f47;
  --shadow:0 18px 40px -24px rgba(47,100,112,.38);
  --radius:16px;
  font-weight:400;
}
.lively .lede { color:#55555f; }

/* tighter rhythm: was clamp(3rem,9vw,5.5rem) top and bottom */
.lively section { padding:clamp(2.4rem,6vw,4.2rem) 0; }
.lively section.tint { background:var(--wash-lav); }
.lively section.wash-sage { background:var(--wash-sage); }
.lively section.wash-blush { background:var(--wash-blush); }

/* kickers: small pills with a dot, not grey caps floating in space */
.lively .kicker { display:inline-flex; align-items:center; gap:.5rem; width:max-content; max-width:100%;
  background:var(--wash-lav); color:var(--plum); font-weight:500; letter-spacing:.16em;
  padding:.38rem .85rem; border-radius:999px; margin-bottom:1rem; }
.lively .kicker::before { content:''; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg,var(--lavender),var(--sage)); flex:none; }
.lively section.tint .kicker, .lively section.wash-sage .kicker, .lively section.wash-blush .kicker { background:#fff; }

/* a short two-colour stroke under section headings: the logo's lavender into sage */
.lively h2::after { content:''; display:block; width:58px; height:4px; border-radius:4px; margin-top:.75rem;
  background:linear-gradient(90deg,var(--lavender),var(--sage)); }
.lively #cta h2::after { background:rgba(255,255,255,.7); }
.lively #cta .kicker { background:rgba(255,255,255,.14); color:#fff; opacity:1; }
.lively #cta .kicker::before { background:#fff; }

/* her photographs get soft corners everywhere on these pages */
.lively figure img { border-radius:var(--radius); }

/* ── 1. photo head ─────────────────────────────────────────────────────────
   PHONE: photo, then the title on a solid band of the page colour (section bg).
   DESKTOP: a wider photo band, the title card lifted over its lower edge. */
.lively .photo-head { padding:0; background:var(--ph,#2f6470); position:relative; overflow:hidden; }
.lively .photo-head .ph-shot { margin:0; overflow:hidden; }
.lively .photo-head .ph-shot img { display:block; width:100%; max-width:none; max-height:none; height:auto;
  aspect-ratio:16/10; object-fit:cover; object-position:var(--pos,center 55%); border-radius:0; margin:0; }
.lively .photo-head .wrap { padding-top:1.5rem; padding-bottom:2.1rem; color:#fff; }
.lively .photo-head h1 { color:#fff; }
.lively .photo-head .lede { color:#fff; opacity:.94; }
.lively .photo-head .kicker { background:rgba(255,255,255,.16); color:#fff; }
.lively .photo-head .kicker::before { background:#fff; }
.lively .photo-head .btn-solid { background:#fff; color:var(--ph,#2f6470); border-color:#fff; }
.lively .photo-head .btn-solid:hover { background:transparent; color:#fff; }
.lively .photo-head .btn:not(.btn-solid) { color:#fff; border-color:rgba(255,255,255,.7); }
.lively .photo-head .head-aside a:not(.btn) { color:#fff; text-decoration-color:rgba(255,255,255,.6); }
.ph-teal  { --ph:#2f6470; }
.ph-plum  { --ph:#5b4a7a; }
.ph-sage  { --ph:#3c6a5e; }
.ph-lav   { --ph:#6d5b89; }
@media (min-width:900px){
  .lively .photo-head { background:transparent; overflow:visible; padding-bottom:clamp(1.4rem,3vw,2.6rem); }
  .lively .photo-head .ph-shot img { aspect-ratio:auto; height:clamp(320px,40vw,470px); }
  .lively .photo-head .wrap { position:relative; z-index:1; background:var(--ph);
    max-width:min(1100px, calc(100% - 2 * var(--gut))); margin:-150px auto 0;
    padding:2.1rem 2.6rem 2.3rem; border-radius:22px; box-shadow:0 30px 60px -30px rgba(20,40,46,.55); }
  .lively .photo-head h1 { font-size:clamp(2.6rem,4.2vw,3.6rem); }
}

/* ── 2a. "what every stay includes" / guest requirements as icon tiles ───── */
.lively .ticks.tiles { grid-template-columns:1fr; gap:.7rem; margin-top:1.8rem; }
.lively .ticks.tiles li { grid-template-columns:2.7rem 1fr; gap:.9rem; align-items:center;
  background:#fff; border:1px solid var(--hair); border-radius:14px; padding:.85rem 1rem;
  box-shadow:var(--shadow); font-size:.97rem; line-height:1.5; }
.lively .ticks.tiles svg { width:2.7rem; height:2.7rem; padding:.66rem; margin:0; border-radius:12px;
  background:var(--wash-sage); color:var(--teal-deep); }
.lively .ticks.tiles li:nth-child(3n+2) svg { background:var(--wash-lav); color:var(--plum); }
.lively .ticks.tiles li:nth-child(3n+3) svg { background:var(--wash-blush); color:#8a4f5c; }
@media (min-width:640px){ .lively .ticks.tiles { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .lively .ticks.tiles { grid-template-columns:repeat(3,1fr); } }

/* ── 2b. policy / rule boxes as coloured cards ─────────────────────────── */
.lively .rulebox { gap:1rem; background:none; border:0; }
.lively .rulebox > div { --c:var(--teal-deep); background:#fff; border:1px solid var(--hair);
  border-top:5px solid var(--c); border-radius:var(--radius); padding:1.35rem 1.35rem 1.45rem;
  box-shadow:var(--shadow); }
.lively .rulebox > div:nth-child(4n+2) { --c:var(--plum); }
.lively .rulebox > div:nth-child(4n+3) { --c:var(--sage); }
.lively .rulebox > div:nth-child(4n+4) { --c:#c9958f; }   /* blush, deepened enough to show as a stripe */
.lively .rulebox h3 { font-size:1.32rem; color:var(--teal-deep); }
.lively .rulebox p { color:var(--muted); }
.lively .rulebox.one > div { border-top-color:var(--plum); }
@media (min-width:1000px){ .lively .rulebox:not(.one) { grid-template-columns:repeat(2,1fr); } }

/* notes become soft callouts instead of a grey hairline */
.lively .note { background:var(--wash-sage); border-left:4px solid var(--sage); border-radius:0 12px 12px 0;
  padding:1rem 1.2rem; color:var(--ink); }
.lively section.wash-sage .note, .lively section.tint .note { background:#fff; }

/* ── 2c. the six steps: numbered circles, cards, a grid on desktop ─────── */
.lively .hours-list { max-width:none; gap:.9rem; counter-reset:none; }
.lively .hour { border:1px solid var(--hair) !important; border-radius:var(--radius); background:#fff;
  padding:1.15rem 1.2rem; grid-template-columns:3.1rem 1fr; gap:1rem; box-shadow:var(--shadow); }
.lively .hour .num { width:3.1rem; height:3.1rem; border-radius:50%; display:grid; place-items:center;
  background:var(--plum); color:#fff; font-size:1.35rem; font-weight:500; }
.lively .hour:nth-child(3n+2) .num { background:var(--teal-deep); }
.lively .hour:nth-child(3n+3) .num { background:#3c6a5e; }
.lively .hour h3 { font-size:1.06rem; }
@media (min-width:760px){ .lively .hours-list { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .lively .hours-list { grid-template-columns:repeat(3,1fr); } }

/* ── 2d. suites on the rates page as cards ──────────────────────────────── */
.lively .suite { background:#fff; border:1px solid var(--hair) !important; border-radius:22px;
  padding:1.1rem; margin-top:1.2rem; box-shadow:var(--shadow); }
.lively .suite .size { font-size:2.4rem; }
.lively .suite .rate { font-size:2rem; color:var(--plum); }
.lively .suite .fits li { border-radius:999px; background:var(--wash-lav); border-color:transparent; color:var(--plum); }
@media (min-width:900px){ .lively .suite { padding:1.4rem 2rem 1.4rem 1.4rem; }
  .lively .suite .size { font-size:3rem; } .lively .suite .rate { font-size:2.6rem; } }

/* ── 5. the price board (boarding) — let one thing be big ────────────────── */
.priceboard { margin:1.8rem 0 2.2rem; border-radius:22px; overflow:hidden; background:#fff;
  border:1px solid var(--hair); box-shadow:0 30px 60px -32px rgba(47,100,112,.5); }
.pb-row { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:.5rem; align-items:center;
  padding:1rem 1rem; border-top:1px solid var(--hair); }
.pb-head { background:var(--teal-deep); color:#fff; border-top:0; padding:.85rem 1rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.pb-head span { text-align:center; }
.pb-head span:first-child { text-align:left; }
.pb-row b { display:block; font-weight:600; color:var(--ink); font-size:.98rem; line-height:1.3; }
.pb-row small { display:block; font-size:.78rem; color:var(--muted); line-height:1.4; margin-top:.2rem; }
.pb-p { font-family:var(--display); font-size:clamp(1.9rem,7vw,2.9rem); line-height:1; text-align:center;
  color:var(--teal-deep); font-weight:500; }
.pb-p small { display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; margin-top:.3rem; }
.pb-row.one   { background:var(--wash-lav); }
.pb-row.one .pb-p { color:var(--plum); }
.pb-row.trial { background:var(--wash-blush); }
.pb-row.trial .pb-p { color:var(--lavender); }
.pb-foot { display:flex; gap:.9rem; align-items:center; padding:1rem; background:var(--wash-sage);
  border-top:1px solid var(--hair); font-size:.92rem; color:var(--ink); line-height:1.5; }
.pb-foot svg { width:2.6rem; height:2.6rem; padding:.6rem; border-radius:12px; background:#fff;
  color:var(--teal-deep); flex:none; }
@media (min-width:900px){
  .pb-row { padding:1.25rem 1.8rem; grid-template-columns:2fr 1fr 1fr; }
  .pb-head { padding:1rem 1.8rem; }
  .pb-foot { padding:1.1rem 1.8rem; }
}

/* ── FAQ: cards with a plus chip, two columns on desktop ─────────────────── */
.lively .faq-grid { display:grid; gap:.7rem; align-items:start; }
@media (min-width:900px){ .lively .faq-grid { grid-template-columns:1fr 1fr; gap:.8rem 1rem; } }
.lively .faq { background:#fff; border:1px solid var(--hair) !important; border-radius:14px;
  padding:0 1.15rem; box-shadow:var(--shadow); transition:background .25s var(--ease), border-color .25s var(--ease); }
.lively .faq summary { font-weight:500; padding:1.05rem 3rem 1.05rem 0; line-height:1.4; }
.lively .faq summary::after { width:30px; height:30px; top:50%; right:0; margin-top:-15px; border:0; border-radius:50%;
  transform:none; background:
    linear-gradient(var(--plum),var(--plum)) center/12px 2px no-repeat,
    linear-gradient(var(--plum),var(--plum)) center/2px 12px no-repeat,
    var(--wash-lav); transition:transform .3s var(--ease); }
.lively .faq[open] { border-color:var(--lavender) !important; }
.lively .faq[open] summary::after { transform:rotate(45deg); }
.lively .faq p { padding-bottom:1.15rem; color:var(--muted); }

/* ── availability key: chips with a colour bar, side by side on desktop ─── */
.lively .avail-key { background:none; border:0; gap:.7rem; max-width:none; }
.lively .avail-key li { border-radius:14px; border:1px solid var(--hair); box-shadow:var(--shadow); padding:1rem 1.1rem; }
.lively .avail-key i { width:6px; height:auto; align-self:stretch; margin-top:0; border-radius:6px; }
.lively .avail-key .k-shut i { border-top:0; background:repeating-linear-gradient(180deg,#c2c9c6 0 4px,transparent 4px 8px); }
@media (min-width:760px){ .lively .avail-key { grid-template-columns:repeat(2,1fr); } }

/* hover: devices that actually hover only (touch screens stick) */
@media (hover:hover) and (pointer:fine){
  .lively .ticks.tiles li, .lively .rulebox > div, .lively .hour, .lively .faq {
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
  .lively .ticks.tiles li:hover, .lively .rulebox > div:hover, .lively .hour:hover {
    transform:translateY(-3px); box-shadow:0 26px 50px -26px rgba(47,100,112,.5); }
  .lively .faq:hover { border-color:var(--lavender) !important; }
}
@media (prefers-reduced-motion:reduce){
  .lively .ticks.tiles li:hover, .lively .rulebox > div:hover, .lively .hour:hover { transform:none; }
}

/* Desktop suite cards: the room photos are tall portraits (0.8, 0.91); uncapped
   they ran ~560px beside four lines of text and left a void. Capped, the price
   side carries the card. */
@media (min-width:900px){
  .lively .suite { grid-template-columns:minmax(0,.75fr) 1.25fr; }
  .lively .suite figure img { max-height:400px; }
}

/* Availability: both sections were `.wrap.narrow` (660px centred), so on a desktop the
   four "worth knowing" cards were squeezed into a 660px column with ~300px of empty
   wash either side. Full width for the blocks, readable measure for the prose. */
@media (min-width:900px){
  .lively #calendar .wrap.narrow, .lively #before .wrap.narrow { max-width:1180px; }
  .lively #calendar .lede, .lively #before .lede { max-width:62ch; }
  .lively #before .rulebox { grid-template-columns:repeat(4,1fr); }
  .lively #before .note { max-width:62ch; }
}

/* ══ WHOLE-SITE EXTENSION (owner, 2026-10-22: "the whole site should have this revamp") ══
   Home, About and Facility now load this layer too. Same devices, the blocks those
   pages use. */

/* Policy / rule card headings: the owner said they needed "better distinction" -
   a display serif at 1.3rem read as part of the paragraph under it. Now a bold sans
   heading in the card's own colour, a colour tag and a rule under it.
   Text colours: teal-deep 6.6, plum 7.8, #3c6a5e 6.2, #8a4f5c 6.3 on white. */
.lively .rulebox > div { --ch:var(--teal-deep); }
.lively .rulebox > div:nth-child(4n+2) { --ch:var(--plum); }
.lively .rulebox > div:nth-child(4n+3) { --ch:#3c6a5e; }
.lively .rulebox > div:nth-child(4n+4) { --ch:#8a4f5c; }
.lively .rulebox h3 { font-family:var(--sans); font-weight:600; font-size:1.06rem; letter-spacing:.01em;
  line-height:1.35; color:var(--ch); display:flex; align-items:center; gap:.6rem;
  padding-bottom:.65rem; margin-bottom:.2rem; border-bottom:1px solid var(--hair); }
.lively .rulebox h3::before { content:''; width:11px; height:11px; border-radius:3px; flex:none; background:var(--c); }

/* the numbers strip under the home hero */
.lively .facts { gap:.8rem; background:none; border:0; padding:1.2rem var(--gut) .4rem;
  max-width:1180px; margin:0 auto; }
.lively .facts > div { border-radius:var(--radius); border:1px solid var(--hair); box-shadow:var(--shadow);
  border-top:4px solid var(--teal-deep); padding:1rem 1.1rem; }
.lively .facts > div:nth-child(2) { border-top-color:var(--plum); }
.lively .facts > div:nth-child(3) { border-top-color:var(--sage); }
.lively .facts > div:nth-child(4) { border-top-color:#c9958f; }
.lively .facts b { font-size:2rem; }

/* reviews: cards with a large quote mark */
.lively .quotes blockquote { position:relative; border-radius:var(--radius); box-shadow:var(--shadow);
  border-top:4px solid var(--lavender); padding-top:2.2rem; }
.lively .quotes blockquote:nth-child(3n+2) { border-top-color:var(--sage); }
.lively .quotes blockquote:nth-child(3n+3) { border-top-color:#c9958f; }
.lively .quotes blockquote::before { content:'\201C'; position:absolute; top:.2rem; left:1.1rem;
  font-family:var(--display); font-size:3.4rem; line-height:1; color:var(--lavender); opacity:.55; }

/* About's four priorities: coloured tiles instead of hairline cells */
.lively .priorities { gap:.8rem; background:none; border:0; }
.lively .priorities > div { border-radius:var(--radius); box-shadow:var(--shadow); background:#fff !important;
  border:1px solid var(--hair); border-left:5px solid var(--teal-deep); }
.lively .priorities > div:nth-child(2) { border-left-color:var(--plum); }
.lively .priorities > div:nth-child(3) { border-left-color:var(--sage); }
.lively .priorities > div:nth-child(4) { border-left-color:#c9958f; }

/* side-by-side columns (About, Facility) become two cards */
.lively .cols { gap:1rem; background:none; border:0; }
.lively .cols > * { background:#fff !important; border:1px solid var(--hair); border-radius:20px; box-shadow:var(--shadow); }
.lively .cols .ticks.tiles { grid-template-columns:1fr; }

/* Tiles inside a half-width column (Facility's outdoor list sits beside a photo):
   the viewport breakpoints above gave three tiles across in ~560px - cramped. */
@media (min-width:640px){ .lively .split .ticks.tiles { grid-template-columns:repeat(2,1fr); } }