/* ==== ported from V2 by scripts/v5/v2-port (prune-css.cjs, port-css.cjs): re-run the port rather than editing above the end marker ==== */
/* ==== v2 sheet 9 of https://bhhl.lettiva.com/fairlea-grange/history: <style> .hero-titlepage-section { container-type: inline-size; } .h ==== */
.hero-titlepage-section { container-type: inline-size; }
.hero-titlepage-section .htp { max-width: 1240px; margin: 0px auto; min-height: 62svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(7rem, 16vh, 11rem); padding-bottom: clamp(4rem, 9vh, 7rem); }
.hero-titlepage-section .htp-rule { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-bottom: var(--space-5); margin-bottom: clamp(3rem, 8vh, 5.5rem); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); }
.hero-titlepage-section .htp-title { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-titlepage-section .htp-chapter { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(22px, 2.4vw, 28px); line-height: 1; color: var(--accent); margin-bottom: var(--space-6); }
.hero-titlepage-section .htp-eyebrow { margin-bottom: var(--space-8); }
.hero-titlepage-section .htp-heading { font-family: var(--font-display); font-weight: 300; font-size: var(--type-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 144; max-width: 16ch; text-wrap: balance; }
.hero-titlepage-section .htp-ornament { width: 44px; height: 1px; border: 0px; margin: clamp(2rem, 5vh, 3rem) auto; background: color-mix(in srgb, var(--foreground) 32%, transparent); }
.hero-titlepage-section .htp-lede { max-width: 52ch; margin: 0px auto; color: var(--muted-foreground-1); }
@container (max-width: 720px) {
.hero-titlepage-section .htp { min-height: 52svh; padding-top: 6.5rem; }
}
/* ==== v2 sheet 10 of https://bhhl.lettiva.com/fairlea-grange/history: <style> /* bento-photographic — block-scoped styles. Container queri ==== */
.bento-photographic-section { container-type: inline-size; counter-reset: plate 0; }
.bento-photographic-section .editorial-bento figure.fig, .bento-photographic-section .editorial-bento figure.fig:hover { box-shadow: none; }
.bento-photographic-section .editorial-bento figure.fig img { filter: brightness(0.92) saturate(1.08) contrast(1.02); }
.bento-photographic-section .editorial-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.bento-photographic-section .editorial-bento .fig { margin: 0px; counter-increment: plate 1; }
.bento-photographic-section .editorial-bento .fig img { display: block; width: 100%; height: auto !important; }
.bento-photographic-section .editorial-bento .fig-0 { grid-column: 1 / span 7; }
.bento-photographic-section .editorial-bento .fig-0 img { aspect-ratio: 16 / 11; object-fit: cover; }
.bento-photographic-section .editorial-bento .fig-1 { grid-column: 8 / span 5; }
.bento-photographic-section .editorial-bento .fig-1 img { aspect-ratio: 4 / 5; object-fit: cover; }
.bento-photographic-section .editorial-bento .fig-2 { grid-column: 1 / span 4; }
.bento-photographic-section .editorial-bento .fig-2 img { aspect-ratio: 4 / 3; object-fit: cover; }
.bento-photographic-section .editorial-bento .fig-3 { grid-column: 5 / span 4; }
.bento-photographic-section .editorial-bento .fig-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.bento-photographic-section .editorial-bento .fig-4 { grid-column: 9 / span 4; }
.bento-photographic-section .editorial-bento .fig-4 img { aspect-ratio: 4 / 3; object-fit: cover; }
.bento-titlebar { display: flex; align-items: center; gap: var(--space-6); padding-bottom: var(--space-6); margin-bottom: var(--space-10); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent); }
.bento-titlebar .bento-titlebar-rule { flex: 1 1 0%; height: 1px; background: color-mix(in srgb, var(--foreground) 14%, transparent); border: 0px; }
.bento-close { margin-top: var(--space-8); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent); }
.bento-close-line { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--type-body); color: var(--foreground); }
@container (max-width: 1080px) {
.bento-photographic-section .editorial-bento { grid-template-columns: repeat(8, 1fr); gap: var(--space-3); }
.bento-photographic-section .editorial-bento .fig-0 { grid-column: 1 / span 8; }
.bento-photographic-section .editorial-bento .fig-1 { grid-column: 1 / span 4; }
.bento-photographic-section .editorial-bento .fig-2 { grid-column: 5 / span 4; }
.bento-photographic-section .editorial-bento .fig-3 { grid-column: 1 / span 4; }
.bento-photographic-section .editorial-bento .fig-4 { grid-column: 5 / span 4; }
}
@container (max-width: 720px) {
.bento-photographic-section .editorial-bento { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.bento-photographic-section .editorial-bento .fig-0 { grid-column: 1 / -1; }
.bento-photographic-section .editorial-bento .fig-1 { grid-column: 1 / span 1; }
.bento-photographic-section .editorial-bento .fig-2 { grid-column: 2 / span 1; }
.bento-photographic-section .editorial-bento .fig-3 { grid-column: 1 / span 1; }
.bento-photographic-section .editorial-bento .fig-4 { grid-column: 2 / span 1; }
.bento-photographic-section .editorial-bento .fig-0 img { aspect-ratio: 16 / 11; }
.bento-photographic-section .editorial-bento .fig-1 img { aspect-ratio: 4 / 5; }
.bento-photographic-section .editorial-bento .fig-2 img, .bento-photographic-section .editorial-bento .fig-3 img, .bento-photographic-section .editorial-bento .fig-4 img { aspect-ratio: 4 / 5; }
.bento-titlebar { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
.bento-close { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
/* ==== v2 sheet 11 of https://bhhl.lettiva.com/fairlea-grange/history: <style> .next-up-strip-section { container-type: inline-size; } .n ==== */
.next-up-strip-section { container-type: inline-size; }
.next-up-strip-section .nus-wrap { max-width: 1240px; margin: 0px auto; }
.next-up-strip-section .nus-eyebrow { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-6) 0; display: inline-flex; align-items: center; gap: var(--space-3); }
.next-up-strip-section .nus-eyebrow::after { content: ""; width: 36px; height: 1px; background: currentcolor; opacity: 0.6; }
.next-up-strip-section .nus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.next-up-strip-section .nus-card { display: block; text-decoration: none; color: inherit; transition: transform 240ms; border-top: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); padding-top: var(--space-5); }
.next-up-strip-section .nus-card:hover { transform: translateY(-2px); }
.next-up-strip-section .nus-card-image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--foreground) 4%, transparent); margin-bottom: var(--space-4); }
.next-up-strip-section .nus-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.96) saturate(1.06); transition: filter 240ms; }
.next-up-strip-section .nus-card:hover .nus-card-image img { filter: brightness(1) saturate(1.1); }
.next-up-strip-section .nus-label { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-2) 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.next-up-strip-section .nus-label::after { content: "→"; font-size: 1.2em; color: var(--foreground); transition: transform 240ms; }
.next-up-strip-section .nus-card:hover .nus-label::after { transform: translateX(4px); }
.next-up-strip-section .nus-body { font-family: var(--font-display); font-style: italic; font-size: var(--type-h5); line-height: var(--lh-display); color: var(--foreground); margin: 0px; }
.next-up-strip-section .nus-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
@container (max-width: 720px) {
.next-up-strip-section .nus-grid, .next-up-strip-section .nus-grid[data-count="1"], .next-up-strip-section .nus-grid[data-count="2"] { grid-template-columns: none; display: grid; grid-auto-flow: column; grid-auto-columns: 75%; gap: var(--space-2); overflow: auto hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--section-pad-x); scrollbar-width: none; margin-inline: calc(-1 * var(--section-pad-x)); padding-inline: var(--section-pad-x); padding-bottom: var(--space-2); }
.next-up-strip-section .nus-grid::-webkit-scrollbar { display: none; }
.next-up-strip-section .nus-card { scroll-snap-align: start; }
}
/* ==== v2 sheet 12 of https://bhhl.lettiva.com/fairlea-grange/history: <style> /* Atmospheric CSS * / @layer atmospheric { /* ══════════════ ==== */
@layer atmospheric {
[data-section="what-the-listing-keeps"] { background: linear-gradient(rgb(250, 247, 240) 0%, rgb(245, 240, 230) 100%); position: relative; }
[data-section="what-the-listing-keeps"]::before { content: ""; position: absolute; inset: 0px; background-image: radial-gradient(at 23% 17%, rgba(26, 39, 64, 0.02), transparent 38%), radial-gradient(at 78% 73%, rgba(26, 39, 64, 0.024), transparent 42%); pointer-events: none; z-index: 0; }
[data-section="what-the-listing-keeps"] > * { position: relative; z-index: 1; }
[data-section="what-the-listing-keeps"] figure { box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 16px, rgba(0, 0, 0, 0.1) 0px 18px 50px, rgba(0, 0, 0, 0.06) 0px 55px 100px; transition: box-shadow 0.5s; }
[data-section="what-the-listing-keeps"] figure:hover { box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px, rgba(0, 0, 0, 0.14) 0px 24px 60px, rgba(0, 0, 0, 0.08) 0px 60px 110px; }
[data-section="what-the-listing-keeps"] figure img { filter: brightness(0.97) saturate(1.08) contrast(1.03); }
[data-section] a[href="/enquire"], [data-section] a[href="/book"], [data-section] a[href="/contact"], [data-section] a[class*="bg-"] { position: relative; z-index: 10; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px, rgba(0, 0, 0, 0.06) 0px 8px 24px; transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s; }
[data-section] a[href="/enquire"]:hover, [data-section] a[href="/book"]:hover, [data-section] a[href="/contact"]:hover, [data-section] a[class*="bg-"]:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.08) 0px 12px 32px; }
[data-section] p[data-editable$="-eyebrow"] { letter-spacing: 0.2em; text-transform: uppercase; }
[data-section="keep-exploring"], [data-section="keep-going"] { border-top: 1px solid rgba(26, 39, 64, 0.08); background: rgb(253, 252, 249); }
[data-page="history"] [data-section="titlepage"] { background: linear-gradient(rgb(253, 251, 246) 0%, rgb(245, 240, 228) 100%); }
[data-page="history"] [data-section="the-tour"] { background: linear-gradient(135deg, rgba(214, 160, 66, 0.07), rgba(255, 255, 255, 0) 60%); }
[data-page="history"] [data-section="what-the-listing-keeps"] { position: relative; }
[data-page="history"] [data-section="what-the-listing-keeps"]::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 1; background: radial-gradient(at 50% 40%, rgba(255, 255, 255, 0) 55%, rgba(60, 44, 20, 0.05) 100%); }
[data-page="history"] [data-section="what-the-listing-keeps"] img { filter: saturate(0.96) sepia(0.06); }
}
/* ==== v2 sheet 13 of https://bhhl.lettiva.com/fairlea-grange/history: <style> .sticky-booking-widget-floating-mobile { display: none; }  ==== */
.sticky-booking-widget-floating-mobile { display: none; }
@media (max-width: 768px) {
.sticky-booking-widget-floating-desktop { display: none !important; }
.sticky-booking-widget-floating-mobile { display: block; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* ==== end of the ported V2 CSS; the port's own V5 rules follow ==== */
/* V2's scrolly story: a script crossfaded the pinned photograph to the chapter in the middle of the screen and set .active on it.
   Without the script every chapter reads in full and the first photograph stays; where the browser has scroll-driven animations
   each chapter lights as it crosses the screen and the photograph follows it. */
.scrolly .step { opacity: 1; }
@keyframes port-step-on { 0% { opacity: 0.45; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0.45; } }
@keyframes port-step-num-on { 0% { color: inherit; } 30% { color: var(--accent); } 70% { color: var(--accent); } 100% { color: inherit; } }
@keyframes port-img-first { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes port-img-mid { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes port-img-last { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; } }
@supports (animation-timeline: view()) {
  .scrolly { timeline-scope: --port-s0, --port-s1, --port-s2, --port-s3; }
  .scrolly .step[data-step="0"] { view-timeline: --port-s0 block; animation: port-step-on linear both; animation-timeline: --port-s0; animation-range: cover 22% cover 82%; }
  .scrolly .step[data-step="0"] .step-num { animation: port-step-num-on linear both; animation-timeline: --port-s0; animation-range: cover 22% cover 82%; }
  .scrolly .pin img[data-step-img="0"] { animation: port-img-first linear both; animation-timeline: --port-s0; animation-range: cover 22% cover 82%; }
  .scrolly .step[data-step="1"] { view-timeline: --port-s1 block; animation: port-step-on linear both; animation-timeline: --port-s1; animation-range: cover 22% cover 82%; }
  .scrolly .step[data-step="1"] .step-num { animation: port-step-num-on linear both; animation-timeline: --port-s1; animation-range: cover 22% cover 82%; }
  .scrolly .pin img[data-step-img="1"] { animation: port-img-mid linear both; animation-timeline: --port-s1; animation-range: cover 22% cover 82%; }
  .scrolly .step[data-step="2"] { view-timeline: --port-s2 block; animation: port-step-on linear both; animation-timeline: --port-s2; animation-range: cover 22% cover 82%; }
  .scrolly .step[data-step="2"] .step-num { animation: port-step-num-on linear both; animation-timeline: --port-s2; animation-range: cover 22% cover 82%; }
  .scrolly .pin img[data-step-img="2"] { animation: port-img-mid linear both; animation-timeline: --port-s2; animation-range: cover 22% cover 82%; }
  .scrolly .step[data-step="3"] { view-timeline: --port-s3 block; animation: port-step-on linear both; animation-timeline: --port-s3; animation-range: cover 22% cover 82%; }
  .scrolly .step[data-step="3"] .step-num { animation: port-step-num-on linear both; animation-timeline: --port-s3; animation-range: cover 22% cover 82%; }
  .scrolly .pin img[data-step-img="3"] { animation: port-img-last linear both; animation-timeline: --port-s3; animation-range: cover 22% cover 82%; }
}
/* At 900px and under V2 keeps every chapter at full strength and only the numeral lights; a faded chapter would also paint
   over the pinned photograph as it scrolls beneath it (below opacity 1 an element is its own layer). */
@media (max-width: 900px) { .scrolly .step[data-step] { animation: none; } }
/* V2's guest line under the tour quote: spaced capitals (V2 styled it by its data-editable "eyebrow" name). */
[data-section] p.port-tour-month { letter-spacing: 0.2em; text-transform: uppercase; }