/* ==== 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 2 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: https://bhhl.lettiva.com/_next/static/chunks/0m2gwvgh8ev0l.css ==== */
@layer theme;
@layer base;
@layer utilities;
/* ==== v2 sheet 9 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> /* Chapter ordinal — large Roman numeral above the eyebrow.  ==== */
.hero-16-chapter-index { font-family: var(--font-display); font-weight: 300; font-size: var(--type-h1); line-height: 1; color: var(--accent); margin-bottom: var(--space-6); font-variant-numeric: oldstyle-nums; }
/* ==== v2 sheet 10 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> .welcome-asymmetric2-section { container-type: inline-size;  ==== */
.welcome-asymmetric2-section { container-type: inline-size; }
.welcome-asymmetric2-section .wa2 { max-width: 1240px; margin: 0px auto; }
.welcome-asymmetric2-section .wa2::after { content: ""; display: block; clear: both; }
.welcome-asymmetric2-section .wa2-prose { max-width: 76ch; margin: 0px auto; position: relative; }
.welcome-asymmetric2-section .wa2-mark { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 22px; color: var(--accent); margin-bottom: 14px; display: inline-block; letter-spacing: 0.02em; }
.welcome-asymmetric2-section .wa2-fig { margin: 0px; }
.welcome-asymmetric2-section .wa2-fig-primary { float: right; width: 384px; margin: 0px -190px 32px 48px; shape-outside: margin-box; }
.welcome-asymmetric2-section .wa2-fig-primary img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; height: auto !important; }
.welcome-asymmetric2-section .wa2-heading { max-width: 17ch; }
.welcome-asymmetric2-section .wa2-lead { margin-top: var(--space-6); }
.welcome-asymmetric2-section .wa2-body { margin-top: var(--space-4); }
.welcome-asymmetric2-section .wa2-fig-secondary { float: left; clear: left; width: 560px; margin: var(--space-8) var(--space-10) var(--space-6) -210px; shape-outside: margin-box; display: grid; grid-template-columns: 1fr; row-gap: var(--space-2); }
.welcome-asymmetric2-section .wa2-fig-secondary img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; height: auto !important; }
.welcome-asymmetric2-section .wa2-fig-secondary .fig-cap { margin-top: var(--space-1); max-width: 34ch; }
.welcome-asymmetric2-section .wa2-close { clear: both; max-width: 76ch; margin: var(--space-12) auto 0; padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
@container (max-width: 1080px) {
.welcome-asymmetric2-section .wa2-fig-primary { width: 300px; margin-right: -40px; }
.welcome-asymmetric2-section .wa2-fig-secondary { width: 420px; margin-left: -40px; }
}
@container (max-width: 720px) {
.welcome-asymmetric2-section .wa2-prose { max-width: 100%; display: flex; flex-direction: column; }
.welcome-asymmetric2-section .wa2-mark { order: 1; }
.welcome-asymmetric2-section .t-eye { order: 2; }
.welcome-asymmetric2-section .wa2-heading { order: 3; max-width: 100%; }
.welcome-asymmetric2-section .wa2-lead { order: 4; }
.welcome-asymmetric2-section .wa2-fig-primary { order: 5; }
.welcome-asymmetric2-section .wa2-body { order: 6; }
.welcome-asymmetric2-section .wa2-fig-secondary { order: 7; }
.welcome-asymmetric2-section .wa2-fig-primary, .welcome-asymmetric2-section .wa2-fig-secondary { float: none; clear: none; width: 100%; margin: var(--space-6) 0; }
}
/* ==== v2 sheet 11 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> .content-section-2 { container-type: inline-size; } /* ──  ==== */
.content-section-2 { container-type: inline-size; }
.content-section-2 .cs2-head { max-width: 55ch; margin-bottom: var(--space-12); }
.content-section-2 .cs2-head .cs2-eyebrow { margin-bottom: var(--space-5); }
.content-section-2 .cs2-head .cs2-sub { margin-top: var(--space-5); color: var(--muted-foreground-1); max-width: 52ch; }
.content-section-2.cs2-v-ledger .cs2-head { max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); }
.content-section-2.cs2-v-ledger .cs2-head-main { max-width: 55ch; }
.content-section-2.cs2-v-ledger .cs2-meta { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground-1); font-feature-settings: "lnum", "tnum"; white-space: nowrap; }
.content-section-2.cs2-v-ledger .cs2-meta::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 12px; opacity: 0.8; }
.content-section-2.cs2-v-centered .cs2-head { max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-16); }
.content-section-2.cs2-v-centered .cs2-heading { max-width: 24ch; margin-inline: auto; }
.content-section-2.cs2-v-centered .cs2-ornament { width: 36px; height: 1px; border: 0px; margin: var(--space-6) auto 0; background: color-mix(in srgb, var(--foreground) 30%, transparent); }
.content-section-2 .cs2-ornament { display: none; }
.content-section-2.cs2-v-centered .cs2-ornament { display: block; }
@container (max-width: 720px) {
.content-section-2.cs2-v-ledger .cs2-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.content-section-2 .cs2-head { margin-bottom: var(--space-8); }
.content-section-2.cs2-v-centered .cs2-head { margin-bottom: var(--space-10); }
}
/* ==== v2 sheet 12 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> .gallery-collection-section { container-type: inline-size; } ==== */
.gallery-collection-section { container-type: inline-size; }
.gallery-collection-section .gc-chrome { max-width: 720px; margin-bottom: var(--space-10); }
.gallery-collection-section .gc-eyebrow { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.gallery-collection-section .gc-eyebrow::after { content: ""; flex: 1 1 0%; max-width: 200px; height: 1px; background: color-mix(in srgb, var(--foreground) 18%, transparent); }
.gallery-collection-section .gc-heading { font-family: var(--font-display); font-size: var(--type-h2); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--foreground); margin: 0 0 var(--space-3) 0; }
.gallery-collection-section .gc-heading em { font-style: italic; color: var(--accent); }
.gallery-collection-section .gc-subheading { font-family: var(--font-body); font-size: var(--type-body); line-height: var(--lh-body); color: var(--muted-foreground-1); margin: 0px; max-width: 60ch; }
.gallery-collection-section .gc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); }
.gallery-collection-section .gc-tile { margin: 0px; }
.gallery-collection-section .gc-plate { overflow: hidden; background-color: var(--surface, color-mix(in srgb, var(--foreground) 4%, transparent)); position: relative; }
.gallery-collection-section .gc-plate img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(0.96) saturate(1.06) contrast(1.02); transition: filter 280ms; height: auto !important; }
.gallery-collection-section .gc-tile:hover .gc-plate img { filter: brightness(1) saturate(1.08) contrast(1.04); }
.gallery-collection-section .gc-foot { display: none; }
@container (max-width: 720px) {
.gallery-collection-section .gc-chrome { max-width: none; margin-bottom: var(--space-6); }
.gallery-collection-section .gc-grid { grid-template-columns: none; display: grid; grid-auto-flow: column; grid-auto-columns: 88%; 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); }
.gallery-collection-section .gc-grid::-webkit-scrollbar { display: none; }
.gallery-collection-section .gc-tile { scroll-snap-align: start; }
.gallery-collection-section .gc-foot { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted-foreground-2, var(--muted-foreground-1)); }
.gallery-collection-section .gc-foot::after { content: ""; width: 18px; height: 1px; background: currentcolor; opacity: 0.6; display: inline-block; }
}
/* ==== v2 sheet 13 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> .content-section-2 { container-type: inline-size; } /* ──  ==== */
.content-section-2 { container-type: inline-size; }
.content-section-2 .cs2-head { max-width: 55ch; margin-bottom: var(--space-12); }
.content-section-2 .cs2-head .cs2-eyebrow { margin-bottom: var(--space-5); }
.content-section-2 .cs2-head .cs2-sub { margin-top: var(--space-5); color: var(--muted-foreground-1); max-width: 52ch; }
.content-section-2.cs2-v-ledger .cs2-head { max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); }
.content-section-2.cs2-v-ledger .cs2-head-main { max-width: 55ch; }
.content-section-2.cs2-v-ledger .cs2-meta { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground-1); font-feature-settings: "lnum", "tnum"; white-space: nowrap; }
.content-section-2.cs2-v-ledger .cs2-meta::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 12px; opacity: 0.8; }
.content-section-2.cs2-v-centered .cs2-head { max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-16); }
.content-section-2.cs2-v-centered .cs2-heading { max-width: 24ch; margin-inline: auto; }
.content-section-2.cs2-v-centered .cs2-ornament { width: 36px; height: 1px; border: 0px; margin: var(--space-6) auto 0; background: color-mix(in srgb, var(--foreground) 30%, transparent); }
.content-section-2 .cs2-ornament { display: none; }
.content-section-2.cs2-v-centered .cs2-ornament { display: block; }
@container (max-width: 720px) {
.content-section-2.cs2-v-ledger .cs2-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.content-section-2 .cs2-head { margin-bottom: var(--space-8); }
.content-section-2.cs2-v-centered .cs2-head { margin-bottom: var(--space-10); }
}
/* ==== v2 sheet 14 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> .content-section-2 { container-type: inline-size; } /* ──  ==== */
.content-section-2 { container-type: inline-size; }
.content-section-2 .cs2-head { max-width: 55ch; margin-bottom: var(--space-12); }
.content-section-2 .cs2-head .cs2-eyebrow { margin-bottom: var(--space-5); }
.content-section-2 .cs2-head .cs2-sub { margin-top: var(--space-5); color: var(--muted-foreground-1); max-width: 52ch; }
.content-section-2.cs2-v-ledger .cs2-head { max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); }
.content-section-2.cs2-v-ledger .cs2-head-main { max-width: 55ch; }
.content-section-2.cs2-v-ledger .cs2-meta { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground-1); font-feature-settings: "lnum", "tnum"; white-space: nowrap; }
.content-section-2.cs2-v-ledger .cs2-meta::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 12px; opacity: 0.8; }
.content-section-2.cs2-v-centered .cs2-head { max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-16); }
.content-section-2.cs2-v-centered .cs2-heading { max-width: 24ch; margin-inline: auto; }
.content-section-2.cs2-v-centered .cs2-ornament { width: 36px; height: 1px; border: 0px; margin: var(--space-6) auto 0; background: color-mix(in srgb, var(--foreground) 30%, transparent); }
.content-section-2 .cs2-ornament { display: none; }
.content-section-2.cs2-v-centered .cs2-ornament { display: block; }
@container (max-width: 720px) {
.content-section-2.cs2-v-ledger .cs2-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.content-section-2 .cs2-head { margin-bottom: var(--space-8); }
.content-section-2.cs2-v-centered .cs2-head { margin-bottom: var(--space-10); }
}
/* ==== v2 sheet 15 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> .content-section-2 { container-type: inline-size; } /* ──  ==== */
.content-section-2 { container-type: inline-size; }
.content-section-2 .cs2-head { max-width: 55ch; margin-bottom: var(--space-12); }
.content-section-2 .cs2-head .cs2-eyebrow { margin-bottom: var(--space-5); }
.content-section-2 .cs2-head .cs2-sub { margin-top: var(--space-5); color: var(--muted-foreground-1); max-width: 52ch; }
.content-section-2.cs2-v-ledger .cs2-head { max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); }
.content-section-2.cs2-v-ledger .cs2-head-main { max-width: 55ch; }
.content-section-2.cs2-v-ledger .cs2-meta { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground-1); font-feature-settings: "lnum", "tnum"; white-space: nowrap; }
.content-section-2.cs2-v-ledger .cs2-meta::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 12px; opacity: 0.8; }
.content-section-2.cs2-v-centered .cs2-head { max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-16); }
.content-section-2.cs2-v-centered .cs2-heading { max-width: 24ch; margin-inline: auto; }
.content-section-2.cs2-v-centered .cs2-ornament { width: 36px; height: 1px; border: 0px; margin: var(--space-6) auto 0; background: color-mix(in srgb, var(--foreground) 30%, transparent); }
.content-section-2 .cs2-ornament { display: none; }
.content-section-2.cs2-v-centered .cs2-ornament { display: block; }
@container (max-width: 720px) {
.content-section-2.cs2-v-ledger .cs2-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.content-section-2 .cs2-head { margin-bottom: var(--space-8); }
.content-section-2.cs2-v-centered .cs2-head { margin-bottom: var(--space-10); }
}
/* ==== v2 sheet 16 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> .cta-ledger-section { container-type: inline-size; } .cta-l ==== */
.cta-ledger-section { container-type: inline-size; }
.cta-ledger-section .ctl { max-width: 880px; margin: 0px auto; }
.cta-ledger-section .ctl-rule { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-top: var(--space-5); margin-bottom: var(--space-10); border-top: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); }
.cta-ledger-section .ctl-eyebrow { margin-bottom: var(--space-6); }
.cta-ledger-section .ctl-heading { max-width: 16ch; }
.cta-ledger-section .ctl-lead { margin-top: var(--space-5); max-width: 44ch; color: var(--muted-foreground-1); }
.cta-ledger-section .ctl-facts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: var(--space-10); border-top: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); }
.cta-ledger-section .ctl-fact { padding: var(--space-5) var(--space-6) var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cta-ledger-section .ctl-fact + .ctl-fact { padding-left: var(--space-6); border-left: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); }
.cta-ledger-section .ctl-fact-value { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; color: var(--foreground); font-feature-settings: "onum"; }
.cta-ledger-section .ctl-fact-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-foreground-2); }
.cta-ledger-section .ctl-action { margin-top: var(--space-10); display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; }
.cta-ledger-section .ctl-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: var(--primary-foreground); font-size: var(--type-small); font-weight: 500; border-radius: 999px; padding: 16px 40px; text-decoration: none; transition: background-color 300ms; }
.cta-ledger-section .ctl-btn:hover { background: var(--primary-hover); }
.cta-ledger-section .ctl-btn svg { transition: transform 300ms; }
.cta-ledger-section .ctl-btn:hover svg { transform: translateX(2px); }
.cta-ledger-section .ctl-caption { opacity: 0.7; }
.cta-ledger-section .ctl-alt { width: 100%; margin-top: calc(-1 * var(--space-2)); }
@container (max-width: 720px) {
.cta-ledger-section .ctl-rule { margin-bottom: var(--space-8); }
.cta-ledger-section .ctl-facts { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.cta-ledger-section .ctl-fact + .ctl-fact { padding-left: 0px; border-left: 0px; }
.cta-ledger-section .ctl-fact:nth-child(2n) { padding-left: var(--space-6); border-left: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); }
.cta-ledger-section .ctl-fact:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); }
}
/* ==== v2 sheet 17 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <style> /* Atmospheric CSS * / @layer atmospheric { /* ══════════════ ==== */
@layer atmospheric {
[data-section="great-hall"] { background: linear-gradient(rgb(250, 247, 240) 0%, rgb(245, 240, 230) 100%); position: relative; }
[data-section="great-hall"]::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="great-hall"] > * { position: relative; z-index: 1; }
[data-section="great-hall"] figure { box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 16px, rgba(130, 62, 12, 0.14) 0px 18px 50px, rgba(0, 0, 0, 0.06) 0px 55px 100px; transition: box-shadow 0.5s; }
[data-section="great-hall"] figure:hover { box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px, rgba(130, 62, 12, 0.18) 0px 24px 60px, rgba(0, 0, 0, 0.08) 0px 60px 110px; }
[data-section="great-hall"] figure img { filter: brightness(0.95) saturate(1.12); }
[data-section="quiet-rooms"] { background: linear-gradient(rgb(250, 247, 240) 0%, rgb(245, 240, 230) 100%); position: relative; }
[data-section="quiet-rooms"]::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="quiet-rooms"] > * { position: relative; z-index: 1; }
[data-section="landing"] 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="landing"] 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="landing"] figure img { filter: brightness(0.97) saturate(1.08) contrast(1.03); }
[data-section="bathrooms"] 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="bathrooms"] 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="bathrooms"] figure img { filter: brightness(0.97) saturate(1.08) contrast(1.03); }
[data-section="kitchen"] { background: linear-gradient(rgb(250, 247, 240) 0%, rgb(245, 240, 230) 100%); position: relative; }
[data-section="kitchen"]::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="kitchen"] > * { position: relative; z-index: 1; }
[data-section="grounds"] 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="grounds"] 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="grounds"] figure img { filter: brightness(0.97) saturate(1.08) contrast(1.03); }
[data-section="good-to-know"] { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); border-top: 1px solid rgba(26, 39, 64, 0.08); border-bottom: 1px solid rgba(26, 39, 64, 0.08); box-shadow: rgba(255, 255, 255, 0.85) 0px 1px 0px inset; }
[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="welcome"], [data-section="dogs"], [data-section="great-hall"], [data-section="quiet-rooms"], [data-section="kitchen"], [data-section="occasions"], [data-section="into-town"], [data-section="days-out"], [data-section="attractions"], [data-section="sister-houses"] { position: relative; }
[data-section="welcome"]::after, [data-section="dogs"]::after, [data-section="great-hall"]::after, [data-section="quiet-rooms"]::after, [data-section="kitchen"]::after, [data-section="occasions"]::after, [data-section="into-town"]::after, [data-section="days-out"]::after, [data-section="attractions"]::after, [data-section="sister-houses"]::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 1; background: linear-gradient(165deg, rgba(199, 152, 78, 0.06), transparent 58%); }
[data-section="availability"], [data-section="good-to-know"], [data-section="planning"], [data-section="booking-desk"] { position: relative; }
[data-section="availability"]::after, [data-section="good-to-know"]::after, [data-section="planning"]::after, [data-section="booking-desk"]::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 1; background: radial-gradient(120% 75% at 10% 0%, rgba(255, 255, 255, 0.5), transparent 55%); }
[data-section="opening"] h2, [data-section="opening"] p[data-editable$="-eyebrow"], [data-section="opening"] p[data-editable$="-subheading"] { color: rgb(255, 255, 255) !important; text-shadow: rgba(8, 12, 22, 0.4) 0px 1px 2px, rgba(8, 12, 22, 0.45) 0px 2px 28px; }
[data-page="the-house"] [data-section="opening"] [data-hero-overlay] { background: radial-gradient(55% 45% at 70% 35%, rgba(255, 196, 120, 0.1), transparent 60%), linear-gradient(rgba(30, 23, 15, 0.32) 0%, rgba(30, 23, 15, 0.1) 32%, rgba(22, 16, 10, 0.8) 100%) !important; }
[data-page="the-house"] [data-section="great-hall"]::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 1; background: radial-gradient(60% 50% at 16% 6%, rgba(214, 178, 108, 0.1), transparent 60%), linear-gradient(165deg, rgba(199, 152, 78, 0.05), transparent 55%); }
[data-page="the-house"] [data-section="bathrooms"] { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(242, 246, 247) 100%); }
[data-page="the-house"] [data-section="kitchen"]::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 1; background: linear-gradient(170deg, rgba(186, 108, 58, 0.07), transparent 55%); }
[data-page="the-house"] [data-section="tour"] { background: linear-gradient(rgb(241, 239, 235) 0%, rgb(232, 230, 225) 100%); }
}
/* ==== v2 sheet 18 of https://bhhl.lettiva.com/the-manor-on-the-monnow/the-house: <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 ==== */

/* ==== the house page's own rules (the port's V5 rules, after the marker above) ==== */

/* The section tabs (V2: StickyTabsWrapper's bar, drawn in the browser). A tab goes when the page has no
   section of its id; the tab of the section just followed is marked, V2's own green (V2 moved the mark
   as the page scrolled, with a script). The page scrolls smoothly to 120px under the top, as V2 did. */
:root:not(:has(#great-hall)) .port-tabs a[href="#great-hall"], :root:not(:has(#bedrooms)) .port-tabs a[href="#bedrooms"], :root:not(:has(#bathrooms)) .port-tabs a[href="#bathrooms"], :root:not(:has(#kitchen)) .port-tabs a[href="#kitchen"], :root:not(:has(#amenities)) .port-tabs a[href="#amenities"], :root:not(:has(#good-to-know)) .port-tabs a[href="#good-to-know"] { display: none; }
:root:has(#great-hall:target) .port-tabs a[href="#great-hall"], :root:has(#bedrooms:target) .port-tabs a[href="#bedrooms"], :root:has(#bathrooms:target) .port-tabs a[href="#bathrooms"], :root:has(#kitchen:target) .port-tabs a[href="#kitchen"], :root:has(#amenities:target) .port-tabs a[href="#amenities"], :root:has(#good-to-know:target) .port-tabs a[href="#good-to-know"] { background-color: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
#great-hall, #bedrooms, #bathrooms, #kitchen, #amenities, #good-to-know { scroll-margin-top: 120px; }
.port-tabs > div { scrollbar-width: none; }
.port-tabs > div::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
}

/* The sleeping arrangements (V2: BedroomConfig's cards). The numerals I, II, III are counted in CSS from
   the list; V2's layouts for two floors or more, six rooms or more and a single room are chosen by the
   probes the page carries (an invisible item that exists only when the list is that long). */
.port-probe { display: none; }
.port-lower { text-transform: lowercase; }
/* A room's beds ("2 singles") and their notes come worded from the record (bedCount, bedWord, bedNotes). */
.port-bedroom-cards { counter-reset: port-room; }
.port-bedroom { counter-increment: port-room; }
.port-bedroom-num::before { content: counter(port-room, upper-roman); }
.port-floor-range::before { content: counter(port-floor-first, upper-roman) "–" counter(port-floor-last, upper-roman); }
.port-bedroom-floor:not(:has(.port-probe-floor-rooms-2)) .port-floor-range::before { content: counter(port-floor-first, upper-roman); }
.port-bedroom-config:has(.port-probe-floors-2) .port-floor-rooms { margin-top: 3rem; }
.port-bedroom-config:not(:has(.port-probe-floors-2)) .port-floor-way { display: none; }
.port-bedroom-config h2:has(.port-rooms-many) .port-rooms-one, .port-bedroom-config h2:has(.port-floors-many) .port-floors-one { display: none; }
.port-bedroom-config:not(:has(.port-probe-rooms-6)) .port-bedroom-star { display: none; }

/* The floor plans (V2: FloorPlansWrapper). One plan alone is centred, with no label under it. */
.port-floor-plan-grid:has(> :only-child) { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 32rem; margin-inline: auto; }
.port-floor-plan-grid:has(> :only-child) .port-floor-plan-label { display: none; }

/* The features checklist (V2: PropertyFeaturesWrapper). "Show N more": N is counted in CSS from the list
   itself; the rest opens above the button, as in V2. A list of four or fewer takes two columns. */
.port-features { counter-reset: port-more; }
.port-more-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.port-more-count > * { counter-increment: port-more; }
.port-more-n::before { content: counter(port-more); }
.port-more:not(:has(li)) { display: none; }
.port-more > summary { list-style: none; cursor: pointer; text-align: center; }
.port-more > summary::-webkit-details-marker { display: none; }
.port-more[open] .port-more-show, .port-more:not([open]) .port-more-less { display: none; }
.port-more[open] > summary svg { transform: rotate(180deg); }
.port-more[open] { display: flex; flex-direction: column; }
.port-more[open] > summary { order: 1; }
.port-more-rest { margin-top: 3rem; }
@media (min-width: 1024px) {
.port-features-grid:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The amenities (V2: PropertyAmenitiesWrapper's headline list and its sheet). The sheet is V2's drawer from
   the right, with the platform's own sheet script (scrim, close button, Escape); with no script it opens in
   place under the button. It shows for eight amenities or more, as V2 showed it. */
.port-amenity-icon { display: inline-flex; }
.port-amenity-icon > svg { width: 21px; height: 21px; stroke-width: 1.4; }
.port-amenity-sheet .port-amenity-icon > svg { width: 17px; height: 17px; stroke-width: 1.5; }
.port-amenities:not(:has(.port-probe-amenities-8)) .port-amenity-sheet { display: none; }
.port-amenity-sheet > summary { list-style: none; cursor: pointer; }
.port-amenity-sheet > summary::-webkit-details-marker { display: none; }
.port-amenity-sheet[open] > .sheet-panel { margin-top: 2rem; }
html:not(.js-sheet) .port-amenity-sheet .sheet-head > div { display: none; }
html.js-sheet .port-amenity-sheet[open] > .sheet-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1210; width: min(560px, 92vw); margin: 0; overflow-y: auto; background-color: var(--background); padding: 2rem 2rem 4rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); animation: port-sheet-in 340ms ease-in-out both; }
@media (min-width: 768px) {
html.js-sheet .port-amenity-sheet[open] > .sheet-panel { padding: 2.5rem 2.5rem 4rem; }
}
html.js-sheet .port-amenity-sheet .sheet-close { position: absolute; top: 1.75rem; right: 1.75rem; padding: 0.25rem; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted-foreground-1); cursor: pointer; }
html.js-sheet .port-amenity-sheet .sheet-close:hover { color: var(--foreground); }
.port-amenities > .sheet-scrim { position: fixed; inset: 0; z-index: 1200; background-color: color-mix(in srgb, var(--foreground) 42%, transparent); }
html.sheet-open { overflow: hidden; }
@keyframes port-sheet-in {
from { transform: translateX(100%); }
to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html.js-sheet .port-amenity-sheet[open] > .sheet-panel { animation: none; }
}

/* The film (V2: VirtualTourWrapper's frame). The platform's frame is sized by its own ratio; the frame
   inside V2's rounded box fills it. */
.port-tour .lv-video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The questions: the accordion's rules are the site sheet's (.port-faq). This page's tab strip sits
   under the header, so a question group stops lower. */
.port-faq-group { scroll-margin-top: 9.5rem; }
/* The tab strip sits directly under the header (79px with its rule; V2 typed top:64px, so it slid 15px
   beneath the header and clipped the lit tab), and the sections it jumps to stop below both. */
#great-hall, #bedrooms, #bathrooms, #kitchen, #amenities, #good-to-know { scroll-margin-top: 135px; }

/* The house rules (V2: PropertyHouseRulesWrapper). One column alone takes the width; the prose keeps a rule
   per line (V2 ran those lines together). */
@media (min-width: 768px) {
.port-house-rules-cols:has(> :only-child) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.port-house-rules-prose > p + p { margin-top: 1rem; }
.port-house-rules-cols + .port-house-rules-prose { margin-top: 3.5rem; }
.port-house-rules-prose > p { white-space: pre-line; }

/* The evening (V2: the scrolly story). V2's script lit the chapter crossing the middle of the screen and
   faded in the photograph that goes with it, leaving the last one showing. Here each chapter's own scroll
   position does the same, in browsers that can. Everywhere else, and for anyone who has asked for less
   motion, the first photograph shows and every chapter is lit, as V2 looked with its script off. Below
   900px V2 kept every chapter at full strength and changed only the photograph and the chapter's number,
   and so does this. A chapter counts from 4vh before its middle line to 4vh after, so two photographs
   trade places over 8vh of scroll. Six chapters are wired; the page has 4. */
.scrolly .scroll-col .step { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) and (timeline-scope: --a) {
.scrolly { timeline-scope: --evening-0, --evening-1, --evening-2, --evening-3, --evening-4, --evening-5; }
.scrolly .step[data-step="0"] { view-timeline: --evening-0 block; }
.scrolly .step[data-step="1"] { view-timeline: --evening-1 block; }
.scrolly .step[data-step="2"] { view-timeline: --evening-2 block; }
.scrolly .step[data-step="3"] { view-timeline: --evening-3 block; }
.scrolly .step[data-step="4"] { view-timeline: --evening-4 block; }
.scrolly .step[data-step="5"] { view-timeline: --evening-5 block; }
.scrolly .scroll-col .step, .scrolly .step .step-num, .scrolly .pin img { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-range: cover 46vh cover calc(100% - 46vh); }
.scrolly .scroll-col .step { animation-name: port-step-mid; }
.scrolly .scroll-col .step:first-child { animation-name: port-step-first; }
.scrolly .scroll-col .step:last-child { animation-name: port-step-last; }
.scrolly .step .step-num { animation-name: port-num-mid; }
.scrolly .step:first-child .step-num { animation-name: port-num-first; }
.scrolly .step:last-child .step-num { animation-name: port-num-last; }
.scrolly .pin img { animation-name: port-photo-mid; }
.scrolly .pin img:first-of-type { animation-name: port-photo-first; }
.scrolly .pin img:last-of-type { animation-name: port-photo-last; }
@media (max-width: 900px) {
.scrolly .scroll-col .step, .scrolly .scroll-col .step:first-child, .scrolly .scroll-col .step:last-child { animation-name: none; }
}
.scrolly [data-step="0"], .scrolly [data-step="0"] .step-num, .scrolly [data-step-img="0"] { animation-timeline: --evening-0; }
.scrolly [data-step="1"], .scrolly [data-step="1"] .step-num, .scrolly [data-step-img="1"] { animation-timeline: --evening-1; }
.scrolly [data-step="2"], .scrolly [data-step="2"] .step-num, .scrolly [data-step-img="2"] { animation-timeline: --evening-2; }
.scrolly [data-step="3"], .scrolly [data-step="3"] .step-num, .scrolly [data-step-img="3"] { animation-timeline: --evening-3; }
.scrolly [data-step="4"], .scrolly [data-step="4"] .step-num, .scrolly [data-step-img="4"] { animation-timeline: --evening-4; }
.scrolly [data-step="5"], .scrolly [data-step="5"] .step-num, .scrolly [data-step-img="5"] { animation-timeline: --evening-5; }
@keyframes port-step-mid {
0% { opacity: 0.45; }
15%, 85% { opacity: 1; }
100% { opacity: 0.45; }
}
@keyframes port-step-first {
0%, 85% { opacity: 1; }
100% { opacity: 0.45; }
}
@keyframes port-step-last {
0% { opacity: 0.45; }
15%, 100% { opacity: 1; }
}
@keyframes port-num-mid {
0% { color: inherit; }
15%, 85% { color: var(--accent); }
100% { color: inherit; }
}
@keyframes port-num-first {
0%, 85% { color: var(--accent); }
100% { color: inherit; }
}
@keyframes port-num-last {
0% { color: inherit; }
15%, 100% { color: var(--accent); }
}
@keyframes port-photo-mid {
0% { opacity: 0; }
12%, 88% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes port-photo-first {
0%, 88% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes port-photo-last {
0% { opacity: 0; }
12%, 100% { opacity: 1; }
}
}
}

/* Tap targets (a V5 rule: a link or button is at least 44px tall on a phone). V2 drew this page's small
   controls (the section tabs, "Show N more", "Show all N amenities", the question categories, whose rule is the site
   sheet's) at the height of their words; below 1024px each is 44px tall here, its words centred in it, and from 1024px
   up they are V2's own size. The drawer's close button is 44px square the same way. The phone's tab strip is
   44px tall, so the sections it jumps to stop 8px lower. */
@media (max-width: 1023.98px) {
.port-tabs a { display: inline-flex; align-items: center; min-height: 44px; }
.port-more > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.port-amenity-sheet > summary { min-height: 44px; }
html.js-sheet .port-amenity-sheet .sheet-close { top: 0.75rem; right: 0.75rem; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
#great-hall, #bedrooms, #bathrooms, #kitchen, #amenities, #good-to-know { scroll-margin-top: 143px; }
}

/* The Tailwind utilities the pieces above write that V2's pages never drew here (the Manor has no house
   rules, and V2 hid its film), so the site sheet, pruned to what V2 drew, has no rule for them. V2's own. */
@layer utilities {
.ml-0\.5 { margin-left: calc(var(--spacing)*.5); }
.ml-2 { margin-left: calc(var(--spacing)*2); }
.mb-5 { margin-bottom: calc(var(--spacing)*5); }
.gap-x-16 { column-gap: calc(var(--spacing)*16); }
:where(.space-y-3\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*3.5)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*3.5)*calc(1 - var(--tw-space-y-reverse))); }
.text-emerald-700 { color: var(--color-emerald-700); }
.text-rose-700 { color: var(--color-rose-700); }
.bg-emerald-500 { background-color: var(--color-emerald-500); }
.bg-rose-500 { background-color: var(--color-rose-500); }
.dark\:text-emerald-300:is(.dark,.dark *) { color: var(--color-emerald-300); }
.dark\:text-rose-300:is(.dark,.dark *) { color: var(--color-rose-300); }
.aspect-video { aspect-ratio: var(--aspect-video); }
.border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; }
.mx-\[calc\(-1\*var\(--section-pad-x\,1\.5rem\)\)\] { margin-inline: calc(-1*var(--section-pad-x,1.5rem)); }
.w-\[calc\(100\%\+2\*var\(--section-pad-x\,1\.5rem\)\)\] { width: calc(100% + 2*var(--section-pad-x,1.5rem)); }
@media (min-width: 48rem) {
.md\:mx-0 { margin-inline: calc(var(--spacing)*0); }
.md\:w-full { width: 100%; }
.md\:rounded-xl { border-radius: var(--radius-xl); }
.md\:border { border-style: var(--tw-border-style); border-width: 1px; }
.md\:border-line-2 { border-color: var(--border-line-2); }
.md\:text-\[14px\] { font-size: 14px; }
}
}