/* Angus Hot Tub Escapes - design system (approved mock-up 28 Oct 2026, built into every template 28 Oct 2026)
   Layout: guidebook - sticky contents rail + numbered chapters; results = magazine (first card large)
   with a left filter sidebar (bottom sheet on small screens); nav transparent over the hero, solid ink once scrolled;
   two-tone split footer. Classes: camelCase components, prefix "rufo". One light theme by design (Tom: white page, no beige). */
:root {
  color-scheme: light;
  /* colour - site's own colours, shifted (register.json "colours") */
  --rufoInk: #092E58;        /* site navy (logo dark #064976, shifted) - nav, headings, footer left */
  --rufoBlue: #23739A;       /* logo blue #3284BC, shifted - logo circle, links */
  --rufoTeal: #137673;       /* footer teal #137C84, shifted - icons, outline buttons, data */
  --rufoTealDeep: #0E5A58;   /* footer right half, hover */
  --rufoOrange: #D5550B;     /* site orange #FF8814, shifted - the one accent: stars, focus ring, badge icons */
  --rufoOrangeDeep: #BF4C0A; /* solid fill of the primary search button (white text passes AA) */
  --rufoMist: #E8F3F4;       /* nav teal #7CBDC2 as a tint - chips, icon circles, our pick */
  --rufoGrey: #F3F6F7;       /* alternate sections (cool grey, never cream) */
  --rufoLine: #DCE5E8;       /* hairlines */
  --rufoLineSoft: rgba(9, 46, 88, 0.09);
  --rufoText: #1D2B35;
  --rufoMuted: #566874;
  --rufoWhite: #FFFFFF;
  --rufoBook: #C13238;       /* book buttons - fixed by Tom, never restyled */
  --rufoBookHover: #A3282E;
  /* shadows - stacked, low opacity, tinted with the ink */
  --rufoShadow1: 0 1px 2px rgba(9, 46, 88, .05), 0 3px 8px rgba(9, 46, 88, .05);
  --rufoShadow2: 0 2px 4px rgba(9, 46, 88, .05), 0 10px 22px rgba(9, 46, 88, .08), 0 24px 48px rgba(9, 46, 88, .07);
  --rufoShadow3: 0 4px 10px rgba(4, 18, 36, .10), 0 20px 44px rgba(4, 18, 36, .18), 0 44px 90px rgba(4, 18, 36, .20);
  /* radius - cards square (brief), controls slightly softened, pills for chips only */
  --rufoRControl: 3px;
  --rufoRSheet: 14px;
  --rufoRPill: 999px;
  /* spacing - 8 px scale */
  --rufoS1: 8px; --rufoS2: 16px; --rufoS3: 24px; --rufoS4: 32px; --rufoS5: 40px;
  --rufoS6: 48px; --rufoS7: 56px; --rufoS8: 64px; --rufoS10: 80px; --rufoS12: 96px;
  /* type - one modular scale (~1.25), fluid */
  --rufoDisplay: "Josefin Sans", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --rufoBody: "Lora", "Georgia", "Times New Roman", serif;
  --rufoStepS: 0.8125rem;
  --rufoStep0: 1.0625rem;
  --rufoStep1: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --rufoStep2: clamp(1.3rem, 1.18rem + 0.5vw, 1.56rem);
  --rufoStep3: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --rufoStep4: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --rufoStep5: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  /* motion - one curve */
  --rufoEase: cubic-bezier(.2, .7, .2, 1);
  --rufoFast: 200ms;
  --rufoSlow: 600ms;
  --rufoWrap: 1240px;
  --rufoNavH: 72px;
  --rufoHeroPhoto: 540px;   /* mobile photo zone */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--rufoWhite); color: var(--rufoText);
  font: 400 var(--rufoStep0)/1.65 var(--rufoBody); text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--rufoBlue); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--rufoFast) var(--rufoEase); }
a:hover { color: var(--rufoInk); }
h1, h2, h3, h4 { font-family: var(--rufoDisplay); color: var(--rufoInk); text-wrap: balance; margin: 0; }
h2 { font-size: var(--rufoStep4); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--rufoStep1); line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--rufoOrange); outline-offset: 3px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--rufoInk); }

.rufoWrap {
  width: 100%; max-width: calc(var(--rufoWrap) + 2 * var(--rufoS2)); margin: 0 auto;
  padding-left: max(var(--rufoS2), env(safe-area-inset-left, 0px)); padding-right: max(var(--rufoS2), env(safe-area-inset-right, 0px));
}
/* letter-spaced capitals: small eyebrows only */
.rufoEyebrow { font: 600 0.75rem/1.2 var(--rufoDisplay); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rufoTeal); }
.rufoLead { font-size: 1.125rem; line-height: 1.65; color: var(--rufoText); max-width: 64ch; }
.rufoMuted { color: var(--rufoMuted); }
.rufoNum { font-variant-numeric: tabular-nums lining-nums; }
.rufoKeep { white-space: nowrap; }

/* buttons: primary = solid fill; secondary = outline + fill on hover (brief); text link. Josefin sits high, so a little more top padding. */
.rufoBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 48px;
  font: 700 1rem/1 var(--rufoDisplay); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  padding: 0.95em 1.45em 0.78em; border: 2px solid var(--rufoTeal); border-radius: var(--rufoRControl);
  color: var(--rufoTeal); background: transparent; cursor: pointer;
  transition: background-color var(--rufoFast) var(--rufoEase), color var(--rufoFast) var(--rufoEase), border-color var(--rufoFast) var(--rufoEase), transform var(--rufoFast) var(--rufoEase), box-shadow var(--rufoFast) var(--rufoEase);
}
.rufoBtn:hover { background: var(--rufoTeal); color: var(--rufoWhite); }
.rufoBtn:active { transform: translateY(1px); }
.rufoBtn:disabled, .rufoBtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.rufoBtn svg { width: 0.95em; height: 0.95em; transition: transform var(--rufoFast) var(--rufoEase); }
.rufoBtn:hover svg.fa-arrow-right { transform: translateX(3px); }
.rufoBtnInk { border-color: var(--rufoInk); color: var(--rufoInk); }
.rufoBtnInk:hover { background: var(--rufoInk); color: var(--rufoWhite); }
.rufoBtnPrimary { background: var(--rufoOrangeDeep); border-color: var(--rufoOrangeDeep); color: var(--rufoWhite); box-shadow: 0 1px 2px rgba(120, 40, 0, .18), 0 6px 16px rgba(191, 76, 10, .22); }
.rufoBtnPrimary:hover { background: #A6420A; border-color: #A6420A; color: var(--rufoWhite); box-shadow: 0 1px 2px rgba(120, 40, 0, .2), 0 10px 22px rgba(191, 76, 10, .26); }
.rufoBtnLight { border-color: rgba(255, 255, 255, .7); color: var(--rufoWhite); }
.rufoBtnLight:hover { background: var(--rufoWhite); border-color: var(--rufoWhite); color: var(--rufoInk); }
.rufoTextLink {
  font: 700 0.98rem/1.2 var(--rufoDisplay); color: var(--rufoTeal); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.5em; padding: 6px 0 3px; position: relative; background: none; border: 0; cursor: pointer;
}
.rufoTextLink::after { content: ""; position: absolute; left: 0; right: 1.4em; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--rufoFast) var(--rufoEase); }
.rufoTextLink:hover { color: var(--rufoTealDeep); }
.rufoTextLink:hover::after { transform: scaleX(1); }
.rufoTextLink svg { width: 0.85em; height: 0.85em; transition: transform var(--rufoFast) var(--rufoEase); }
.rufoTextLink:hover svg.fa-arrow-right { transform: translateX(3px); }

/* custom select (brand chevron) */
.rufoSelect {
  appearance: none; -webkit-appearance: none; font: 500 1rem/1.2 var(--rufoBody); color: var(--rufoInk);
  padding: 13px 42px 12px 14px; border: 1.5px solid var(--rufoLine); border-radius: var(--rufoRControl); background-color: var(--rufoWhite);
  background-image: linear-gradient(45deg, transparent 50%, var(--rufoTeal) 50%), linear-gradient(135deg, var(--rufoTeal) 50%, transparent 50%);
  background-position: calc(100% - 21px) 52%, calc(100% - 15px) 52%; background-size: 6px 6px; background-repeat: no-repeat;
  cursor: pointer; min-height: 48px; transition: border-color var(--rufoFast) var(--rufoEase), box-shadow var(--rufoFast) var(--rufoEase);
}
.rufoSelect:hover { border-color: var(--rufoTeal); }
.rufoSelect:focus-visible { outline: none; border-color: var(--rufoTeal); box-shadow: 0 0 0 3px rgba(213, 85, 11, .35); }

/* reveal on scroll (classes added by JS only, so no-JS shows everything) */
.rufoReveal { opacity: 0; transform: translateY(14px); transition: opacity var(--rufoSlow) var(--rufoEase), transform var(--rufoSlow) var(--rufoEase); transition-delay: var(--rufoDelay, 0ms); }
.rufoReveal.isIn { opacity: 1; transform: none; }


/* ---------- nav: transparent over the hero, solid ink after scroll (or always on inner pages) ---------- */
.rufoNav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; color: var(--rufoWhite);
  transition: background-color 300ms var(--rufoEase), box-shadow 300ms var(--rufoEase);
}
.rufoNav.isSolid, .rufoNavSolid { background: var(--rufoInk); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(4, 18, 36, .18); }
.rufoNavBar { display: flex; align-items: center; gap: var(--rufoS4); min-height: var(--rufoNavH); }
.rufoBrand { display: flex; align-items: center; gap: 12px; color: var(--rufoWhite); text-decoration: none; flex-shrink: 0; }
.rufoBrand:hover { color: var(--rufoWhite); }
.rufoBrandMark { width: 46px; height: 46px; border-radius: 50%; background: var(--rufoBlue); display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.rufoBrandMark img { width: 34px; height: auto; }
.rufoBrandWord { display: grid; line-height: 1.05; }
.rufoBrandWord b { font: 700 1.08rem/1 var(--rufoDisplay); letter-spacing: 0.24em; text-transform: uppercase; padding-top: 3px; }
.rufoBrandWord i { font: italic 500 0.95rem/1.2 var(--rufoBody); opacity: .92; }
.rufoNavLinks { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.rufoNavLinks a:not(.rufoBtn) {
  color: var(--rufoWhite); text-decoration: none; font: 600 1rem/1 var(--rufoDisplay); padding: 10px 0 7px; position: relative;
  display: inline-flex; align-items: center; gap: 7px;
}
.rufoNavLinks a:not(.rufoBtn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rufoOrange); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--rufoEase); }
.rufoNavLinks a:not(.rufoBtn):hover::after, .rufoNavLinks a[aria-current]::after { transform: scaleX(1); }
.rufoNavLinks a svg { width: 0.85em; height: 0.85em; color: #F4A06B; }
.rufoNavLinks .rufoBtn { min-height: 44px; padding: 0.8em 1.15em 0.62em; font-size: 0.95rem; }
.rufoNavMenu {
  display: none; margin-left: auto; background: transparent; border: 0; border-radius: var(--rufoRControl); color: var(--rufoWhite);
  width: 44px; height: 44px; font-size: 1.25rem; cursor: pointer; transition: background-color var(--rufoFast) var(--rufoEase);
}
.rufoNavMenu:hover { background: rgba(255, 255, 255, .1); }
.rufoNavMenu:active { background: rgba(255, 255, 255, .18); }

/* ---------- hero ---------- */
.rufoHero { position: relative; margin-top: calc(-1 * var(--rufoNavH)); color: var(--rufoWhite); background: var(--rufoInk); overflow: hidden; isolation: isolate; }
.rufoHeroImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; z-index: -2; filter: brightness(1.06) saturate(1.04); }
.rufoHero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 20, 40, .55) 0%, rgba(5, 20, 40, 0) 20%),
    radial-gradient(85% 75% at 0% 30%, rgba(5, 20, 40, .74) 0%, rgba(5, 20, 40, .48) 42%, rgba(5, 20, 40, 0) 72%),
    radial-gradient(55% 45% at 0% 100%, rgba(5, 20, 40, .62) 0%, rgba(5, 20, 40, 0) 75%);
}
.rufoHeroInner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: var(--rufoS8);
  grid-template-areas: "text search" "proof ."; grid-template-rows: auto 1fr;
  min-height: clamp(700px, 92vh, 860px); padding-block: calc(var(--rufoNavH) + var(--rufoS7)) var(--rufoS7);
}
.rufoHeroText { grid-area: text; align-self: start; }
.rufoHero .rufoEyebrow { color: #A6E0DA; }
.rufoHero h1 {
  color: var(--rufoWhite); font-weight: 700; font-size: var(--rufoStep5); line-height: 1; letter-spacing: -0.022em;
  margin: var(--rufoS2) 0 var(--rufoS2); text-shadow: 0 2px 24px rgba(4, 18, 36, .35);
}
.rufoTagline { font: italic 400 clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem)/1.35 var(--rufoBody); color: #F1F6F8; max-width: 24ch; text-wrap: balance; text-shadow: 0 1px 14px rgba(4, 18, 36, .4); }
.rufoProof { grid-area: proof; align-self: end; list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.rufoProof li { display: grid; gap: 4px; padding: 2px var(--rufoS3) 2px 0; margin-right: var(--rufoS3); border-right: 1px solid rgba(255, 255, 255, .22); }
.rufoProof li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.rufoProof b { font: 700 2.1rem/1 var(--rufoDisplay); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; padding-top: 4px; }
.rufoProof span { font-size: 0.94rem; color: #DCE8EE; }

.rufoSearch { grid-area: search; align-self: start; margin-top: -4px; background: var(--rufoWhite); color: var(--rufoText); padding: var(--rufoS4) 28px 26px; box-shadow: var(--rufoShadow3); }
.rufoSearch .rufoSearchTitle { font: 700 1.5rem/1.15 var(--rufoDisplay); letter-spacing: -0.01em; color: var(--rufoInk); padding-top: 3px; }
.rufoSearchLede { font-size: 0.97rem; color: var(--rufoMuted); margin: 6px 0 var(--rufoS3); }
.rufoField { display: grid; gap: 7px; margin-bottom: var(--rufoS2); min-width: 0; }
.rufoField label, .rufoFieldLabel { font: 600 0.9rem/1 var(--rufoDisplay); color: var(--rufoInk); padding-top: 2px; }
.rufoField .rufoSelect { width: 100%; }
.rufoFieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rufoToggle {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--rufoLine); border-radius: var(--rufoRControl); padding: 10px 12px;
  cursor: pointer; min-height: 48px; font: 400 0.98rem/1.2 var(--rufoBody); color: var(--rufoInk); white-space: nowrap;
  transition: border-color var(--rufoFast) var(--rufoEase);
}
.rufoToggle:hover { border-color: var(--rufoTeal); }
.rufoToggle input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: var(--rufoRPill); background: #C9D6DB; position: relative; margin: 0; cursor: pointer; transition: background-color var(--rufoFast) var(--rufoEase); flex-shrink: 0; }
.rufoToggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--rufoWhite); box-shadow: 0 1px 2px rgba(9, 46, 88, .25); transition: transform var(--rufoFast) var(--rufoEase); }
.rufoToggle input:checked { background: var(--rufoTeal); }
.rufoToggle input:checked::after { transform: translateX(16px); }
.rufoToggle input:focus-visible { outline: 3px solid var(--rufoOrange); outline-offset: 2px; }
.rufoSearch .rufoBtn { width: 100%; margin-top: var(--rufoS1); min-height: 54px; font-size: 1.17rem; }
.rufoSearchNote { margin-top: 14px; font-size: 0.86rem; color: var(--rufoMuted); text-align: center; }

/* ---------- guidebook: sticky contents rail + chapters ---------- */
.rufoGuide { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--rufoS10); padding-block: var(--rufoS12) var(--rufoS5); }
.rufoRail { position: sticky; top: calc(var(--rufoNavH) + var(--rufoS4)); align-self: start; }
.rufoRail .rufoEyebrow { color: var(--rufoMuted); }
.rufoRailList { list-style: none; padding: 0; margin: var(--rufoS2) 0 var(--rufoS3); border-left: 1px solid var(--rufoLine); position: relative; }
.rufoRailList::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: calc(var(--rufoRead, 0) * 100%); background: var(--rufoTeal); transition: height 160ms linear; }
.rufoRailList a {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px; padding: 9px 0 9px var(--rufoS2);
  text-decoration: none; color: var(--rufoMuted); font-size: 0.98rem; line-height: 1.3; transition: color var(--rufoFast) var(--rufoEase);
}
.rufoRailList a span { font: 700 0.8rem/1.65 var(--rufoDisplay); color: var(--rufoTeal); font-variant-numeric: tabular-nums; }
.rufoRailList a:hover { color: var(--rufoInk); }
.rufoRailList a.isActive { color: var(--rufoInk); font-weight: 600; }
.rufoRailNote { font-size: 0.86rem; line-height: 1.55; color: var(--rufoMuted); border-top: 1px solid var(--rufoLine); padding-top: 14px; text-wrap: balance; }
.rufoRail .rufoBtn { margin-top: var(--rufoS3); width: 100%; }

.rufoChapters { display: grid; min-width: 0; }
.rufoChapter { padding-bottom: var(--rufoS10); margin-bottom: var(--rufoS10); border-bottom: 1px solid var(--rufoLine); scroll-margin-top: calc(var(--rufoNavH) + var(--rufoS3)); min-width: 0; }
.rufoChapter:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: var(--rufoS6); }
.rufoChapterHead { display: grid; gap: var(--rufoS2); margin-bottom: var(--rufoS5); }
/* numbered chapter marker: 01 ---- COTTAGES FOR TWO */
.rufoChapterNo { display: flex; align-items: center; gap: 12px; font: 600 0.75rem/1 var(--rufoDisplay); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rufoTeal); }
.rufoChapterNo b { font: 700 0.95rem/1 var(--rufoDisplay); letter-spacing: 0; color: var(--rufoInk); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rufoChapterNo i { width: 32px; height: 1px; background: currentColor; opacity: .6; }
.rufoSubhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rufoS2); margin: 0 0 var(--rufoS3); flex-wrap: wrap; }
.rufoSubhead h3 { font-size: var(--rufoStep2); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- cards: photo top, square corners; sleeps first, icon row ---------- */
.rufoCardRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS3); }
.rufoCard {
  position: relative; display: flex; flex-direction: column; background: var(--rufoWhite); min-width: 0;
  border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1);
  transition: box-shadow 300ms var(--rufoEase), transform 300ms var(--rufoEase), opacity var(--rufoSlow) var(--rufoEase);
}
.rufoCard:hover { box-shadow: var(--rufoShadow2); transform: translateY(-2px); }
.rufoCardPhoto {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(135deg, #E3EEF0 0%, #D3E3E7 100%);   /* tinted placeholder while lazy images load */
}
.rufoCardPhoto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rufoSlow) var(--rufoEase), opacity 400ms var(--rufoEase); }
.rufoJs .rufoCardPhoto img:not(.isLoaded) { opacity: 0; }
.rufoCard:hover .rufoCardPhoto img, .rufoStretch:hover .rufoCardPhoto img { transform: scale(1.04); }
.rufoBadge {
  position: absolute; left: 12px; top: 12px; max-width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 255, 255, .95); color: var(--rufoInk); font: 600 0.85rem/1 var(--rufoDisplay); border-radius: var(--rufoRPill);
  padding: 8px 12px 6px 10px; display: flex; align-items: center; gap: 7px; box-shadow: 0 2px 8px rgba(4, 18, 36, .14);
}
.rufoBadge svg { width: 0.95em; height: 0.95em; color: var(--rufoOrange); flex-shrink: 0; margin-top: -2px; }
.rufoHeart {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95);
  color: var(--rufoInk); display: grid; place-items: center; cursor: pointer; font-size: 1rem; z-index: 2;
  box-shadow: 0 2px 8px rgba(4, 18, 36, .14); transition: color var(--rufoFast) var(--rufoEase), transform var(--rufoFast) var(--rufoEase);
}
.rufoHeart:hover { color: var(--rufoBook); }
.rufoHeart:active { transform: scale(.92); }
.rufoHeart.isOn { color: var(--rufoBook); }
.rufoCardBody { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }
.rufoCardPlace { font: 600 0.88rem/1.2 var(--rufoDisplay); color: var(--rufoMuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.rufoCardName { font-size: 1.2rem; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; margin-top: -4px; }
.rufoCardName a { color: var(--rufoInk); text-decoration: none; }
.rufoCardName a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole card clickable */
.rufoCardName a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.rufoSpecs { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--rufoLine); display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 0 12px; }
.rufoSpecs li { display: grid; gap: 3px; min-width: 0; }
.rufoSpecs b { display: flex; align-items: center; gap: 7px; font: 700 1.12rem/1 var(--rufoDisplay); color: var(--rufoInk); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; padding-top: 3px; }
.rufoSpecs b svg { width: 0.85em; height: 0.85em; color: var(--rufoTeal); flex-shrink: 0; margin-top: -3px; }
.rufoSpecs span { font-size: 0.84rem; color: var(--rufoMuted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rufoCardFoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 6px; }
.rufoRating { display: inline-flex; align-items: center; gap: 6px; font: 700 1rem/1 var(--rufoDisplay); color: var(--rufoInk); font-variant-numeric: tabular-nums; padding-bottom: 3px; }
.rufoRating svg { color: var(--rufoOrange); width: 0.9em; height: 0.9em; margin-top: -3px; }
.rufoRating small { color: var(--rufoMuted); font: 400 0.84rem/1 var(--rufoBody); }
/* refined "from £x a night" */
.rufoPrice { display: grid; justify-items: end; gap: 2px; margin: 0; text-align: right; }
.rufoPrice small { font: 400 0.8rem/1 var(--rufoBody); color: var(--rufoMuted); }
.rufoPrice span { display: flex; align-items: baseline; gap: 5px; }
.rufoPrice b { font: 700 1.7rem/1 var(--rufoDisplay); color: var(--rufoInk); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.rufoPrice em { font: italic 400 0.86rem/1 var(--rufoBody); color: var(--rufoMuted); }

/* reveal timing wins over the card's own hover transitions until JS hands them back */
.rufoCard.rufoReveal, .rufoStretch.rufoReveal { transition: opacity var(--rufoSlow) var(--rufoEase) var(--rufoDelay, 0ms), transform var(--rufoSlow) var(--rufoEase) var(--rufoDelay, 0ms); }

/* magazine results: first card large, rest grid */
.rufoMagazine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS3); }
.rufoMagazine > .rufoCard:first-child { grid-column: span 2; grid-row: span 2; }
.rufoMagazine > .rufoCard:first-child .rufoCardPhoto { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.rufoMagazine > .rufoCard:first-child .rufoCardPhoto img { position: absolute; inset: 0; object-position: 50% 72%; }
.rufoMagazine > .rufoCard:first-child .rufoCardBody { padding: var(--rufoS3) 28px 26px; gap: 14px; flex: 0 0 auto; }
.rufoMagazine > .rufoCard:first-child .rufoCardName { font-size: var(--rufoStep3); min-height: 0; letter-spacing: -0.015em; }
.rufoMagazine > .rufoCard:first-child .rufoSpecs { justify-content: start; column-gap: var(--rufoS7); }
.rufoCardExcerpt { color: var(--rufoText); font-size: 1rem; max-width: 62ch; }
.rufoFeaturedFoot { display: flex; align-items: flex-end; gap: var(--rufoS4); flex-wrap: wrap; margin-top: 2px; padding-top: 6px; }
.rufoFeaturedFoot .rufoPrice { margin-left: auto; }
.rufoFeaturedFoot .rufoBtn { position: relative; z-index: 2; }

/* stretch cards (glens / coast / Perthshire) */
.rufoStretches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS3); }
.rufoStretch { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--rufoWhite); border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); transition: box-shadow 300ms var(--rufoEase), transform 300ms var(--rufoEase), opacity var(--rufoSlow) var(--rufoEase); }
.rufoStretch:hover { box-shadow: var(--rufoShadow2); transform: translateY(-2px); }
.rufoStretch .rufoCardPhoto { aspect-ratio: 3 / 2; }
.rufoStretchBody { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rufoStretchStats { font: 600 0.9rem/1.2 var(--rufoDisplay); color: var(--rufoTeal); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rufoStretchStats span + span::before { content: "·"; margin: 0 8px; color: var(--rufoMuted); }
.rufoStretchBody h3 { font-size: 1.25rem; }
.rufoStretchBody p { font-size: 0.98rem; line-height: 1.6; }
.rufoStretchBody .rufoTextLink { margin-top: auto; align-self: start; }
.rufoStretchBody .rufoTextLink::before { content: ""; position: absolute; inset: 0; }   /* whole card clickable */

/* tub data: bars drawn to scale (count / 51) */
.rufoTubData { display: grid; border-top: 1px solid var(--rufoInk); margin-bottom: 12px; }
.rufoTubRow { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) 3.2rem; gap: var(--rufoS3); align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rufoLine); }
.rufoTubRow b { font: 600 1.06rem/1.25 var(--rufoDisplay); color: var(--rufoInk); display: block; padding-top: 2px; }
.rufoTubRow span.rufoMuted { font-size: 0.9rem; display: block; margin-top: 2px; }
.rufoBar { height: 10px; background: var(--rufoGrey); position: relative; overflow: hidden; }
.rufoBar i { position: absolute; inset: 0 auto 0 0; background: var(--rufoTeal); transform-origin: left; transition: transform 900ms var(--rufoEase) 150ms; }
.rufoJs .rufoTubData:not(.isIn) .rufoBar i { transform: scaleX(0); }
.rufoTubRow.isQuiet .rufoBar i { background: #A9BAC1; }
.rufoTubNum { font: 700 1.6rem/1 var(--rufoDisplay); color: var(--rufoInk); text-align: right; font-variant-numeric: tabular-nums lining-nums; padding-top: 3px; }
.rufoDataNote { font-size: 0.86rem; color: var(--rufoMuted); margin-bottom: var(--rufoS5); }
.rufoTwoCol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rufoS3) var(--rufoS5); }
.rufoTwoCol h3 { margin-bottom: 10px; display: flex; gap: 12px; align-items: center; }
.rufoTwoCol p { font-size: 1rem; }
.rufoIconDot { width: 36px; height: 36px; border-radius: 50%; background: var(--rufoMist); color: var(--rufoTealDeep); display: inline-grid; place-items: center; flex-shrink: 0; }
.rufoIconDot svg { width: 15px; height: 15px; }

/* seasons */
.rufoSeasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rufoS2); }
.rufoSeason { position: relative; padding: var(--rufoS3) 22px 26px; background: var(--rufoGrey); display: grid; gap: 8px; align-content: start; min-width: 0; }
.rufoSeason > svg { color: var(--rufoTeal); width: 1.3em; height: 1.3em; margin-bottom: 6px; }
.rufoSeason h3 { font-size: 1.25rem; }
.rufoSeasonWhen { font: 600 0.9rem/1 var(--rufoDisplay); color: var(--rufoMuted); padding-top: 2px; }
.rufoSeason p:last-child { font-size: 0.97rem; line-height: 1.6; margin-top: 4px; }
.rufoSeason.isPick { background: var(--rufoMist); box-shadow: inset 0 3px 0 var(--rufoTeal); }
.rufoPick { position: absolute; top: var(--rufoS3); right: 18px; background: var(--rufoTeal); color: var(--rufoWhite); font: 600 0.8rem/1 var(--rufoDisplay); padding: 6px 10px 4px; border-radius: var(--rufoRPill); white-space: nowrap; }

/* ---------- browse: left sidebar filters (bottom sheet on small screens) + magazine results ---------- */
.rufoBrowse { background: var(--rufoGrey); padding-block: var(--rufoS12); scroll-margin-top: var(--rufoNavH); }
.rufoBrowseHead { display: grid; gap: var(--rufoS2); margin-bottom: var(--rufoS5); }
.rufoBrowseHead h2 { max-width: 24ch; }
.rufoBrowseGrid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--rufoS5); align-items: start; }
.rufoFilters { background: var(--rufoWhite); border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); position: sticky; top: calc(var(--rufoNavH) + 20px); display: flex; flex-direction: column; max-height: calc(100vh - var(--rufoNavH) - 40px); }
.rufoFilterHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--rufoLine); }
.rufoFilterHead b { font: 700 1.08rem/1 var(--rufoDisplay); color: var(--rufoInk); padding-top: 3px; display: flex; gap: 10px; align-items: center; }
.rufoFilterHead b svg { color: var(--rufoTeal); width: 0.95em; height: 0.95em; margin-top: -3px; }
.rufoClear { background: none; border: 0; color: var(--rufoBlue); font: 500 0.92rem var(--rufoBody); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 2px; min-height: 36px; }
.rufoClear:hover { color: var(--rufoInk); }
.rufoSheetClose { display: none; }
.rufoFilterBody { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #C9D6DB transparent; padding-bottom: var(--rufoS3); -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); }
.rufoFilterGroup { padding: 16px 20px 12px; border: 0; border-bottom: 1px solid var(--rufoLine); margin: 0; min-width: 0; }
.rufoFilterGroup:last-child { border-bottom: 0; }
.rufoFilterGroup legend { font: 700 0.95rem/1 var(--rufoDisplay); color: var(--rufoInk); padding: 3px 0 0; margin-bottom: 8px; float: left; width: 100%; }
.rufoFilterGroup legend + * { clear: both; }
.rufoCheck { display: flex; align-items: center; gap: 12px; padding: 6px 0; cursor: pointer; font-size: 0.97rem; color: var(--rufoText); min-height: 36px; }
.rufoCheck span { min-width: 0; }
.rufoCheck input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid #9DB3BC; border-radius: var(--rufoRControl); margin: 0; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; background: var(--rufoWhite); transition: background-color var(--rufoFast) var(--rufoEase), border-color var(--rufoFast) var(--rufoEase); }
.rufoCheck:hover input { border-color: var(--rufoTeal); }
.rufoCheck input:checked { background: var(--rufoTeal); border-color: var(--rufoTeal); }
.rufoCheck input:checked::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--rufoWhite); border-bottom: 2px solid var(--rufoWhite); transform: rotate(-45deg) translate(1px, -1px); }
.rufoCheck input:focus-visible { outline: 3px solid var(--rufoOrange); outline-offset: 2px; }
.rufoCheck em { margin-left: auto; font-style: normal; font-size: 0.86rem; color: var(--rufoMuted); font-variant-numeric: tabular-nums; padding-left: 8px; }
.rufoFilterFoot { display: none; }
.rufoSheetShade { display: none; }
.rufoResultsBar { display: flex; align-items: center; gap: 12px; margin-bottom: var(--rufoS2); flex-wrap: wrap; }
.rufoCount { font: 600 1.05rem/1 var(--rufoDisplay); color: var(--rufoInk); padding-top: 3px; }
.rufoCount b { font-variant-numeric: tabular-nums; }
.rufoSort { display: flex; gap: 10px; align-items: center; margin-left: auto; font: 600 0.92rem/1 var(--rufoDisplay); color: var(--rufoMuted); }
.rufoSort .rufoSelect { font-size: 0.95rem; padding-block: 11px 10px; min-height: 44px; }
.rufoFilterOpen { display: none; }
.rufoChips { display: flex; gap: 8px; flex-wrap: wrap; }
.rufoChips:not(:empty) { margin-bottom: var(--rufoS2); }
.rufoChip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--rufoMist); color: var(--rufoTealDeep); font: 600 0.88rem/1 var(--rufoDisplay);
  padding: 8px 12px 6px; white-space: nowrap; border: 0; border-radius: var(--rufoRPill); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
button.rufoChip { cursor: pointer; min-height: 34px; transition: background-color var(--rufoFast) var(--rufoEase); }
button.rufoChip:hover { background: #D6EAEC; }
.rufoChip svg { width: 0.8em; height: 0.8em; flex-shrink: 0; margin-top: -2px; }
.rufoLoadMore { display: grid; justify-items: center; gap: 14px; margin-top: var(--rufoS6); text-align: center; }
.rufoLoadMore p { font-size: 0.94rem; color: var(--rufoMuted); font-variant-numeric: tabular-nums; }
.rufoProgress { width: 240px; height: 3px; background: var(--rufoLine); }
.rufoProgress i { display: block; height: 100%; background: var(--rufoInk); }

/* ---------- questions ---------- */
.rufoFaq { padding-block: var(--rufoS12); scroll-margin-top: var(--rufoNavH); }
.rufoFaqGrid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--rufoS8); align-items: start; }
.rufoFaqAside { position: sticky; top: calc(var(--rufoNavH) + var(--rufoS4)); display: grid; gap: var(--rufoS2); }
.rufoFaqAside .rufoMuted { max-width: 36ch; }
.rufoFaqList { border-top: 1px solid var(--rufoInk); }
.rufoFaqList details { border-bottom: 1px solid var(--rufoLine); }
.rufoFaqList summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0 19px;
  font: 600 1.15rem/1.3 var(--rufoDisplay); color: var(--rufoInk); transition: color var(--rufoFast) var(--rufoEase);
}
.rufoFaqList summary:hover { color: var(--rufoTeal); }
.rufoFaqList summary::-webkit-details-marker { display: none; }
.rufoFaqList summary::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; margin-top: -3px;
  background: linear-gradient(var(--rufoTeal), var(--rufoTeal)) center / 12px 2px no-repeat, linear-gradient(var(--rufoTeal), var(--rufoTeal)) center / 2px 12px no-repeat;
  transition: transform 250ms var(--rufoEase);
}
.rufoFaqList details[open] summary::after { transform: rotate(45deg); }
.rufoFaqList details p { padding: 0 0 22px; max-width: 64ch; }
.rufoFaqSolo { max-width: 860px; }
.rufoFaqSolo h2 { margin-bottom: var(--rufoS4); }

/* ---------- footer: two-tone split ---------- */
.rufoFoot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); color: #DCE8EE; font-size: 0.97rem; }
.rufoFootBrand { background: var(--rufoInk); }
.rufoFootLinks { background: var(--rufoTealDeep); }
.rufoFootIn { padding-block: var(--rufoS10) var(--rufoS5); display: flex; flex-direction: column; gap: var(--rufoS3); height: 100%; }
.rufoFootBrand .rufoFootIn { padding-left: max(var(--rufoS2), env(safe-area-inset-left, 0px), calc((100vw - var(--rufoWrap)) / 2)); padding-right: var(--rufoS7); }
.rufoFootLinks .rufoFootIn { padding-right: max(var(--rufoS2), env(safe-area-inset-right, 0px), calc((100vw - var(--rufoWrap)) / 2)); padding-left: var(--rufoS7); }
.rufoFootTag { font: italic 400 1.35rem/1.35 var(--rufoBody); color: var(--rufoWhite); max-width: 26ch; text-wrap: balance; }
.rufoFootBrand p { max-width: 46ch; }
.rufoFootCols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS4); }
.rufoFootHead { font: 600 0.75rem/1 var(--rufoDisplay); letter-spacing: 0.16em; text-transform: uppercase; color: #A9E0DA; margin-bottom: var(--rufoS2); }
.rufoFootCols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.rufoFootCols a { display: inline-block; padding: 4px 0; }
.rufoFoot a { color: var(--rufoWhite); text-decoration: none; }
.rufoFoot a:hover { color: var(--rufoWhite); text-decoration: underline; }
.rufoFootBase { font-size: 0.86rem; color: #A8BCC8; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; margin-top: auto; }
.rufoFootBase a { color: #DCE8EE; text-decoration: underline; text-underline-offset: 3px; }

/* toast (shortlist messages) */
.rufoToast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0;
  background: #20262B; color: #FFFFFF; font: 500 0.92rem/1.4 system-ui, sans-serif; padding: 12px 18px; max-width: min(92vw, 520px); border-radius: var(--rufoRControl);
  pointer-events: none; transition: opacity var(--rufoFast) var(--rufoEase), transform var(--rufoFast) var(--rufoEase); z-index: 90; text-align: center;
}
.rufoToast.isOn { opacity: 1; transform: translate(-50%, 0); }

/* ---------- cottage page ---------- */
.rufoCrumbs { font-size: 0.9rem; color: var(--rufoMuted); padding-block: 18px 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rufoCrumbs a { color: var(--rufoMuted); }
.rufoCrumbs a:hover { color: var(--rufoInk); }
.rufoCrumbs svg { width: 0.5em; height: 0.5em; color: #9DB3BC; }
.rufoTabs { position: sticky; top: calc(var(--rufoNavH) + env(safe-area-inset-top, 0px)); z-index: 40; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--rufoLine); }
.rufoTabsIn { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rufoTabsIn::-webkit-scrollbar { display: none; }
.rufoTabsIn a {
  flex-shrink: 0; padding: 17px 14px 13px; font: 600 1rem/1 var(--rufoDisplay); color: var(--rufoMuted); text-decoration: none;
  border-bottom: 3px solid transparent; display: inline-flex; gap: 8px; align-items: center; min-height: 52px;
  transition: color var(--rufoFast) var(--rufoEase), border-color 250ms var(--rufoEase);
}
.rufoTabsIn a:hover { color: var(--rufoInk); }
.rufoTabsIn a.isActive { color: var(--rufoInk); border-bottom-color: var(--rufoTeal); }
.rufoTabsIn a.rufoBack { color: var(--rufoInk); padding-left: 0; margin-right: 12px; }
.rufoTabsIn a.rufoBack svg { width: 0.9em; height: 0.9em; margin-top: -3px; }
.rufoTitle { padding-block: 28px var(--rufoS3); display: grid; gap: 12px; }
.rufoTitle h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.rufoTitleMeta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 0.98rem; color: var(--rufoMuted); }
.rufoTitleMeta > span.rufoRating { gap: 6px; }
.rufoTitleMeta > span + span::before { content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background: #B4C3C9; margin: -3px 14px 0 0; }
.rufoTitleMeta b { color: var(--rufoInk); font-variant-numeric: tabular-nums; }

.rufoTop { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: var(--rufoS6); align-items: start; padding-bottom: var(--rufoS10); }
.rufoGallery { display: grid; gap: 10px; min-width: 0; }
.rufoGalleryMain { position: relative; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #E3EEF0 0%, #D3E3E7 100%); overflow: hidden; }
.rufoGalleryMain img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms var(--rufoEase); }
.rufoGalleryMain .rufoHeart { top: 14px; right: 14px; }
.rufoThumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rufoThumbs button { padding: 0; border: 0; aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer; position: relative; background: #DCE8EB; outline-offset: 2px; }
.rufoThumbs button img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity var(--rufoFast) var(--rufoEase), transform var(--rufoSlow) var(--rufoEase); }
.rufoThumbs button:hover img, .rufoThumbs button.isOn img { opacity: 1; }
.rufoThumbs button:hover img { transform: scale(1.04); }
.rufoThumbs button.isOn::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--rufoInk); }
.rufoThumbs button span { position: absolute; inset: 0; background: rgba(9, 46, 88, .62); color: var(--rufoWhite); display: grid; place-items: center; font: 700 1rem/1.2 var(--rufoDisplay); padding-top: 3px; }

.rufoInfo { display: grid; gap: var(--rufoS3); min-width: 0; }
/* spec row (Tom's rule): icon + big value + small label, one even row, no separators */
.rufoSpecRow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 20px 0 18px; border-block: 1px solid var(--rufoLine); }
.rufoSpec { display: grid; justify-items: center; gap: 5px; text-align: center; }
.rufoSpec svg { color: var(--rufoTeal); width: 1.3em; height: 1.3em; }
.rufoSpec b { font: 700 1.6rem/1 var(--rufoDisplay); color: var(--rufoInk); padding-top: 5px; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
.rufoSpec span { font-size: 0.86rem; color: var(--rufoMuted); line-height: 1.2; }
.rufoIntro { position: relative; max-height: 10.6em; overflow: hidden; transition: max-height 500ms var(--rufoEase); display: grid; gap: 0.8em; }
.rufoIntro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.2em; background: linear-gradient(rgba(255, 255, 255, 0), var(--rufoWhite)); transition: opacity 300ms var(--rufoEase); pointer-events: none; }
.rufoIntro.isOpen { max-height: 60em; }
.rufoIntro.isOpen::after { opacity: 0; }
.rufoReadMore { justify-self: start; margin-top: -12px; }
.rufoReadMore svg.fa-chevron-down { transition: transform 250ms var(--rufoEase); }
.rufoReadMore[aria-expanded="true"] svg.fa-chevron-down { transform: rotate(180deg); }
.rufoHighlights { display: flex; flex-wrap: wrap; gap: 6px; }
.rufoHighlights .rufoChip { font-size: 0.84rem; padding: 7px 11px 5px 10px; gap: 7px; }

/* book buttons: position, size and red kept from the live page (rule 2) */
.rufoBook { display: grid; gap: 8px; }
.rufoBookBtn {
  display: block; text-align: center; background: var(--rufoBook); color: #FFFFFF; text-decoration: none;
  font: 700 15pt/1.2 var(--rufoDisplay); letter-spacing: 0.02em; padding: 21px 20px 19px; border: 0;
  box-shadow: 0 8px 22px rgba(193, 50, 56, .28); transition: background-color .15s ease, transform .15s ease;
}
.rufoBookBtn:hover, .rufoBookBtn:focus-visible { background: var(--rufoBookHover); color: #FFFFFF; transform: translateY(-1px); }
.rufoBookVia { text-align: center; font-size: 0.88rem; color: var(--rufoMuted); }
.rufoBookMid { max-width: 520px; margin: var(--rufoS1) 0 0; }
.rufoBookSticky { display: none; }

.rufoSection { padding-block: var(--rufoS10); border-top: 1px solid var(--rufoLine); scroll-margin-top: calc(var(--rufoNavH) + 64px); }
.rufoSection > .rufoWrap > h2 { margin-bottom: var(--rufoS4); }
.rufoAbout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--rufoS6); align-items: start; }
.rufoProse { display: grid; gap: 1em; max-width: 64ch; }
.rufoProse strong { color: var(--rufoInk); font-weight: 600; }
.rufoMap { display: grid; gap: 12px; margin: 0; }
.rufoMapBox { position: relative; aspect-ratio: 4 / 3; background: #E4EEF0; overflow: hidden; border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); }
.rufoMapBox svg.rufoMapArt { position: absolute; inset: 0; width: 100%; height: 100%; }
.rufoMapCap { font-size: 0.88rem; line-height: 1.55; color: var(--rufoMuted); }
.rufoNeed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--rufoS6); }
.rufoNeedGroup { padding: var(--rufoS3) 0 var(--rufoS4); border-top: 1px solid var(--rufoLine); }
.rufoNeedGroup h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rufoNeedGroup ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 0.98rem; }
.rufoNeedGroup li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.rufoNeedGroup li svg { color: var(--rufoTeal); width: 0.85em; height: 0.85em; margin-top: 0.45em; }
.rufoNeedGroup li[hidden] { display: none; }
.rufoNeedMore { margin-top: 10px; }
.rufoNote { margin-top: var(--rufoS3); background: var(--rufoMist); padding: 18px 22px; font-size: 0.98rem; display: flex; gap: 14px; align-items: center; }
.rufoNote .rufoIconDot { background: var(--rufoWhite); }
.rufoSuits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS3); }
.rufoSuit { border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); padding: 22px 22px 26px; display: grid; gap: 12px; align-content: start; background: var(--rufoWhite); }
.rufoSuitHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rufoSuitHead h3 { display: flex; gap: 12px; align-items: center; }
.rufoVerdict { font: 600 0.86rem/1 var(--rufoDisplay); padding: 7px 11px 5px; white-space: nowrap; border-radius: var(--rufoRPill); }
.rufoVerdict.isYes { background: var(--rufoMist); color: var(--rufoTealDeep); }
.rufoVerdict.isNo { background: #F6E9E9; color: #8E2A2E; }
.rufoSuit p { font-size: 0.98rem; line-height: 1.6; }
.rufoReviewSum { display: flex; gap: var(--rufoS4); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--rufoInk); padding-top: var(--rufoS3); }
.rufoReviewSum > b { font: 700 3.2rem/1 var(--rufoDisplay); color: var(--rufoInk); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; padding-top: 6px; }
.rufoStars { display: inline-flex; gap: 3px; color: var(--rufoOrange); }
.rufoStars svg { width: 1em; height: 1em; }
.rufoReviewSum .rufoBtn { margin-left: auto; }

/* ---------- icons, skip link, nav count ---------- */
.rufoIc { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; overflow: visible; }
.rufoSkip { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--rufoWhite); color: var(--rufoInk); padding: 14px 18px 11px; font: 700 0.95rem/1 var(--rufoDisplay); box-shadow: var(--rufoShadow2); text-decoration: none; transition: top var(--rufoFast) var(--rufoEase); }
.rufoSkip:focus { top: 12px; }
.rufoNavCount { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 3px 6px 0; margin-left: 2px; border-radius: var(--rufoRPill); background: var(--rufoOrange); color: var(--rufoWhite); font: 700 0.72rem/1 var(--rufoDisplay); font-variant-numeric: tabular-nums; }
.rufoNavCount:empty { display: none; }
main { display: block; }

/* ---------- cards: states the mock-up didn't need ---------- */
.rufoCardNoPhoto { display: grid; place-items: center; color: var(--rufoTeal); font-size: 2.6rem; }
.rufoRatingNone { font: 600 0.84rem/1 var(--rufoDisplay); color: var(--rufoMuted); }
.rufoPriceAsk span { padding-top: 6px; }
.rufoPriceAsk em { font-size: 0.9rem; }

/* ---------- browse extras: link chips, clear link, empty state, page numbers ---------- */
.rufoResults { min-width: 0; }
a.rufoChip { text-decoration: none; min-height: 34px; transition: background-color var(--rufoFast) var(--rufoEase); }
a.rufoChip:hover { background: #D6EAEC; color: var(--rufoTealDeep); }
a.rufoClear { display: inline-flex; align-items: center; }
.rufoCheck.isEmpty { color: var(--rufoMuted); }
.rufoCheck.isEmpty input { border-color: #C9D6DB; }
.rufoNoJs { display: flex; }
.rufoEmpty { background: var(--rufoWhite); border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); padding: var(--rufoS7) var(--rufoS4); display: grid; justify-items: center; gap: 12px; text-align: center; }
.rufoEmptyTitle { font: 700 var(--rufoStep2)/1.2 var(--rufoDisplay); color: var(--rufoInk); padding-top: 4px; }
.rufoEmpty .rufoBtn { margin-top: var(--rufoS1); }
.rufoPages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rufoJs .rufoPages:not(.isDeep) { display: none; }
.rufoPages a, .rufoPages span {
  min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 3px 10px 0; border: 1.5px solid var(--rufoLine); border-radius: var(--rufoRControl);
  background: var(--rufoWhite); color: var(--rufoInk); font: 700 0.98rem/1 var(--rufoDisplay); font-variant-numeric: tabular-nums; text-decoration: none;
  transition: border-color var(--rufoFast) var(--rufoEase), background-color var(--rufoFast) var(--rufoEase);
}
.rufoPages a:hover { border-color: var(--rufoInk); }
.rufoPages a svg { width: 0.7em; height: 0.7em; margin-top: -3px; }
.rufoPages span[aria-current] { background: var(--rufoInk); border-color: var(--rufoInk); color: var(--rufoWhite); }
.rufoLoadMoreBtn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- inner pages: head, bands, stats, towns ---------- */
.rufoPageHead { display: grid; gap: var(--rufoS2); padding-block: var(--rufoS3) var(--rufoS7); max-width: 880px; }
.rufoPageHead h1, .rufoH1 { font-size: clamp(2.1rem, 1.45rem + 2.6vw, 3.4rem); line-height: 1.03; font-weight: 700; letter-spacing: -0.024em; }
.rufoPageHead .rufoLead { font-size: 1.15rem; }
.rufoBand { background: var(--rufoGrey); padding-block: var(--rufoS10); }
.rufoBlock { padding-block: var(--rufoS10); }
.rufoBlockHead { display: grid; gap: var(--rufoS2); margin-bottom: var(--rufoS5); max-width: 760px; }
.rufoStats { list-style: none; margin: var(--rufoS1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rufoS2) 0; }
.rufoStats li { display: grid; gap: 4px; padding-right: var(--rufoS3); margin-right: var(--rufoS3); border-right: 1px solid var(--rufoLine); }
.rufoStats li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.rufoStats b { font: 700 1.9rem/1 var(--rufoDisplay); color: var(--rufoInk); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; padding-top: 4px; }
.rufoStats span { font-size: 0.92rem; color: var(--rufoMuted); }
.rufoTowns { display: flex; flex-wrap: wrap; gap: 10px; }
.rufoTowns a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px 10px; background: var(--rufoWhite);
  border: 1.5px solid var(--rufoLine); border-radius: var(--rufoRControl); color: var(--rufoInk); text-decoration: none; font: 600 1rem/1 var(--rufoDisplay);
  transition: border-color var(--rufoFast) var(--rufoEase), color var(--rufoFast) var(--rufoEase);
}
.rufoTowns a:hover { border-color: var(--rufoTeal); color: var(--rufoTealDeep); }
.rufoTowns a[aria-current] { background: var(--rufoInk); border-color: var(--rufoInk); color: var(--rufoWhite); }
.rufoTowns small { font: 400 0.86rem/1 var(--rufoBody); color: var(--rufoMuted); font-variant-numeric: tabular-nums; }
.rufoTowns a[aria-current] small { color: #C9D8E2; }

/* long-form text (location guides, legal pages) */
.rufoArticle { max-width: 70ch; font-size: 1.0625rem; line-height: 1.72; }
.rufoArticle > * + * { margin-top: 1em; }
.rufoArticle h2 { font-size: var(--rufoStep3); line-height: 1.12; margin-top: 1.9em; scroll-margin-top: calc(var(--rufoNavH) + var(--rufoS3)); }
.rufoArticle h3 { font-size: var(--rufoStep2); line-height: 1.2; margin-top: 1.6em; }
.rufoArticle h4 { font-size: var(--rufoStep1); margin-top: 1.4em; }
.rufoArticle > :first-child { margin-top: 0; }
.rufoArticle h2 + *, .rufoArticle h3 + *, .rufoArticle h4 + * { margin-top: 0.6em; }
.rufoArticle ul, .rufoArticle ol { padding-left: 1.25em; margin-bottom: 0; }
.rufoArticle li + li { margin-top: 0.45em; }
.rufoArticle li::marker { color: var(--rufoTeal); }
.rufoArticle strong { color: var(--rufoInk); font-weight: 600; }
.rufoArticle img { height: auto; }
.rufoArticle figure { margin-inline: 0; }
.rufoArticle table { width: 100%; border-collapse: collapse; font-size: 0.96rem; display: block; overflow-x: auto; }
.rufoArticle th, .rufoArticle td { text-align: left; padding: 11px 14px 10px 0; border-bottom: 1px solid var(--rufoLine); vertical-align: top; }
.rufoArticle th { font: 600 0.95rem/1.3 var(--rufoDisplay); color: var(--rufoInk); border-bottom-color: var(--rufoInk); }
.rufoArticle blockquote { margin-inline: 0; padding-left: var(--rufoS3); border-left: 2px solid var(--rufoTeal); font-style: italic; }
.rufoDoc { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--rufoS10); padding-block: var(--rufoS2) var(--rufoS12); }
.rufoDocMeta { font-size: 0.92rem; color: var(--rufoMuted); }

/* panels, forms */
.rufoPanel { background: var(--rufoWhite); border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); padding: var(--rufoS4); }
.rufoPanel h2 { font-size: var(--rufoStep2); letter-spacing: -0.01em; margin-bottom: var(--rufoS2); }
.rufoSplit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--rufoS6); align-items: start; }
.rufoSplit > aside { position: sticky; top: calc(var(--rufoNavH) + var(--rufoS4)); display: grid; gap: var(--rufoS3); }
.rufoForm { display: grid; gap: var(--rufoS3); }
.rufoForm .rufoField { margin: 0; }
.rufoInput, .rufoTextarea {
  width: 100%; min-height: 48px; padding: 13px 14px 12px; font: 400 1rem/1.4 var(--rufoBody); color: var(--rufoInk); background: var(--rufoWhite);
  border: 1.5px solid var(--rufoLine); border-radius: var(--rufoRControl); transition: border-color var(--rufoFast) var(--rufoEase), box-shadow var(--rufoFast) var(--rufoEase);
}
.rufoInput:hover, .rufoTextarea:hover { border-color: var(--rufoTeal); }
.rufoInput:focus-visible, .rufoTextarea:focus-visible { outline: none; border-color: var(--rufoTeal); box-shadow: 0 0 0 3px rgba(213, 85, 11, .35); }
.rufoTextarea { min-height: 168px; resize: vertical; }
.rufoInput::placeholder, .rufoTextarea::placeholder { color: #8A9AA4; }
.rufoFormNote { font-size: 0.88rem; color: var(--rufoMuted); }
.rufoReq { color: var(--rufoTeal); }
.rufoAlert { display: flex; gap: 14px; align-items: center; padding: 16px 20px; background: var(--rufoMist); color: var(--rufoTealDeep); }
.rufoAlert.isBad { background: #F6E9E9; color: #8E2A2E; }
.rufoChecklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rufoChecklist li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.rufoChecklist li svg { color: var(--rufoTeal); width: 0.85em; height: 0.85em; margin-top: 0.45em; }
.rufoCards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS3); }
.rufoFact { border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); padding: 22px 22px 26px; display: grid; gap: 10px; align-content: start; background: var(--rufoWhite); }
.rufoFact h3 { display: flex; gap: 12px; align-items: center; font-size: 1.15rem; }
.rufoFact p { font-size: 0.98rem; line-height: 1.6; }
.rufoFactNum { font: 700 2.2rem/1 var(--rufoDisplay); color: var(--rufoInk); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; padding-top: 4px; }

/* html site map */
.rufoMapCols { columns: 3 260px; column-gap: var(--rufoS5); }
.rufoMapCols section { break-inside: avoid; margin-bottom: var(--rufoS5); }
.rufoMapCols h2 { font-size: var(--rufoStep1); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rufoInk); }
.rufoMapCols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.rufoMapCols a { display: inline-block; padding: 5px 0; color: var(--rufoText); text-decoration: none; }
.rufoMapCols a:hover { color: var(--rufoBlue); text-decoration: underline; }
.rufoMapCols small { color: var(--rufoMuted); font-variant-numeric: tabular-nums; }

/* 404 */
.rufoLost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rufoS8); align-items: center; padding-block: var(--rufoS8) var(--rufoS10); }
.rufoLostCode { font: 700 clamp(5rem, 3rem + 9vw, 10rem)/0.9 var(--rufoDisplay); color: var(--rufoMist); letter-spacing: -0.04em; -webkit-text-stroke: 2px var(--rufoTeal); padding-top: 0.1em; }
.rufoLost > div { display: grid; gap: var(--rufoS2); justify-items: start; }
.rufoEnd { height: var(--rufoS10); }
.rufoBtnRow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--rufoS1); }

/* ---------- cottage page extras ---------- */
.rufoGalleryMain .rufoGalleryOpen { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 14px 7px; border: 0; border-radius: var(--rufoRPill); background: rgba(255, 255, 255, .95); color: var(--rufoInk); font: 600 0.88rem/1 var(--rufoDisplay); cursor: pointer; box-shadow: 0 2px 8px rgba(4, 18, 36, .14); transition: background-color var(--rufoFast) var(--rufoEase); }
.rufoGalleryOpen:hover { background: var(--rufoWhite); }
.rufoGalleryOpen svg { color: var(--rufoTeal); margin-top: -2px; }
.rufoGalleryNav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--rufoInk); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(4, 18, 36, .16); opacity: 0; transition: opacity var(--rufoFast) var(--rufoEase), transform var(--rufoFast) var(--rufoEase); }
.rufoGalleryNav.isPrev { left: 14px; }
.rufoGalleryNav.isNext { right: 14px; }
.rufoGalleryMain:hover .rufoGalleryNav, .rufoGalleryNav:focus-visible { opacity: 1; }
.rufoGalleryNav:active { transform: scale(.94); }
.rufoViewer { position: fixed; inset: 0; z-index: 95; background: rgba(4, 18, 36, .95); display: none; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--rufoWhite); }
.rufoViewer.isOpen { display: grid; }
.rufoViewerBar { display: flex; justify-content: space-between; align-items: center; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); font: 600 0.95rem/1 var(--rufoDisplay); font-variant-numeric: tabular-nums; }
.rufoViewer figure { margin: 0; display: grid; place-items: center; min-height: 0; padding: 0 72px; }
.rufoViewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rufoViewer figcaption { text-align: center; font-size: 0.92rem; color: #C9D8E2; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 3em; }
.rufoViewer button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--rufoWhite); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; transition: background-color var(--rufoFast) var(--rufoEase); }
.rufoViewer button:hover { background: rgba(255, 255, 255, .2); }
.rufoViewer .rufoViewerPrev, .rufoViewer .rufoViewerNext { position: absolute; top: 50%; margin-top: -24px; }
.rufoViewerPrev { left: 12px; }
.rufoViewerNext { right: 12px; }
.rufoMapBox .rufoLeaflet { position: absolute; inset: 0; z-index: 0; }
.rufoMapBox .leaflet-container { font: 500 0.82rem/1.3 var(--rufoBody); background: #E4EEF0; }
.rufoMapPin { border-radius: 50%; background: var(--rufoBook); border: 3px solid var(--rufoWhite); box-shadow: 0 0 0 6px rgba(193, 50, 56, .18), 0 2px 6px rgba(4, 18, 36, .3); }
.rufoSubTitle { font-size: var(--rufoStep2); font-weight: 600; letter-spacing: -0.01em; margin: var(--rufoS7) 0 var(--rufoS3); }
.rufoProseHead { display: flex; gap: 12px; align-items: center; font-size: 1.15rem; margin-top: 0.4em; }
.rufoLoves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS4) var(--rufoS3); }
.rufoLove { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-content: start; padding-top: var(--rufoS3); border-top: 1px solid var(--rufoLine); }
.rufoLove h3 { font-size: 1.12rem; margin-bottom: 6px; padding-top: 7px; }
.rufoLove p { font-size: 0.98rem; line-height: 1.6; }
.rufoQuote { margin: 0 0 var(--rufoS6); padding: var(--rufoS5) 0 0; border-top: 1px solid var(--rufoInk); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--rufoS3); max-width: 920px; }
.rufoReviewSum + .rufoQuote { margin-top: var(--rufoS5); border-top-color: var(--rufoLine); }
.rufoQuote > svg { width: 40px; height: 40px; color: var(--rufoOrange); }
.rufoQuote blockquote { margin: 0; font: italic 400 clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem)/1.4 var(--rufoBody); color: var(--rufoInk); text-wrap: pretty; }
.rufoQuote figcaption { margin-top: var(--rufoS2); font: 600 0.92rem/1.3 var(--rufoDisplay); color: var(--rufoMuted); }
.rufoNearby { display: grid; gap: var(--rufoS3); }
.rufoNearbyTabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rufoNearbyTabs button { min-height: 44px; padding: 10px 16px 8px; border: 1.5px solid var(--rufoLine); border-radius: var(--rufoRPill); background: var(--rufoWhite); color: var(--rufoInk); font: 600 0.92rem/1 var(--rufoDisplay); cursor: pointer; transition: border-color var(--rufoFast) var(--rufoEase), background-color var(--rufoFast) var(--rufoEase), color var(--rufoFast) var(--rufoEase); }
.rufoNearbyTabs button:hover { border-color: var(--rufoTeal); }
.rufoNearbyTabs button[aria-pressed="true"] { background: var(--rufoTeal); border-color: var(--rufoTeal); color: var(--rufoWhite); }
.rufoPlaces { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--rufoS6); }
.rufoPlaces li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0 13px; border-bottom: 1px solid var(--rufoLine); }
.rufoPlaces li[hidden] { display: none; }
.rufoPlaces b { font: 600 1.02rem/1.3 var(--rufoDisplay); color: var(--rufoInk); display: block; padding-top: 3px; }
.rufoPlaces span { font-size: 0.88rem; color: var(--rufoMuted); }
.rufoPlaces em { font-style: normal; font-size: 0.9rem; color: var(--rufoText); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rufoReviewList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rufoS3); margin-top: var(--rufoS4); }
.rufoReviewItem { border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; background: var(--rufoWhite); }
.rufoReviewItem p { font-size: 1rem; line-height: 1.65; }
.rufoReviewWho { font: 600 0.92rem/1.3 var(--rufoDisplay); color: var(--rufoInk); padding-top: 2px; }
.rufoReviewWho span { color: var(--rufoMuted); font-weight: 400; font-family: var(--rufoBody); }
.rufoReviewForm { margin-top: var(--rufoS5); border-top: 1px solid var(--rufoLine); }
.rufoReviewForm > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: var(--rufoS3) 0 6px; font: 700 1.05rem/1 var(--rufoDisplay); color: var(--rufoTeal); }
.rufoReviewForm > summary::-webkit-details-marker { display: none; }
.rufoReviewForm > summary svg { transition: transform 250ms var(--rufoEase); }
.rufoReviewForm[open] > summary svg { transform: rotate(180deg); }
.rufoReviewForm form { max-width: 640px; margin-top: var(--rufoS3); }
.rufoGone { display: flex; gap: var(--rufoS2); align-items: center; padding: 18px 22px; margin-bottom: var(--rufoS3); background: #F6E9E9; color: #8E2A2E; }

/* ---------- forms, quiet panels, shortlist, timeline ---------- */
.rufoVisuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rufoFieldError { font-size: 0.88rem; color: #8E2A2E; }
.rufoInput[aria-invalid="true"], .rufoTextarea[aria-invalid="true"] { border-color: #B54A4F; }
.rufoFormGroup { padding: 0; border: 0; }
.rufoFormGroup legend { font: 600 0.9rem/1 var(--rufoDisplay); margin-bottom: 10px; }
.rufoFormGroup .rufoCheck { display: inline-flex; margin-right: var(--rufoS3); }
.rufoPanelQuiet { background: var(--rufoGrey); border: 0; box-shadow: none; }
.rufoPanelQuiet h2 { font-size: var(--rufoStep1); }
.rufoPanelQuiet p { font-size: 0.98rem; }
.rufoPanel > h2 + .rufoForm { margin-top: var(--rufoS1); }
.rufoPanel .rufoAlert + h2 { margin-top: var(--rufoS4); }
.rufoBand.isFirst { padding-top: var(--rufoS7); }
.rufoStatUnit { font: 600 1rem/1 var(--rufoDisplay); letter-spacing: 0; color: var(--rufoMuted); }
.rufoShortGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rufoS3); }
.rufoCompare { margin-top: var(--rufoS8); }
.rufoCompare h2 { font-size: var(--rufoStep3); margin-bottom: var(--rufoS3); }
.rufoCompareScroll { overflow-x: auto; background: var(--rufoWhite); border: 1px solid var(--rufoLineSoft); box-shadow: var(--rufoShadow1); }
.rufoCompareScroll:focus-visible { outline-offset: 2px; }
.rufoCompare table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rufoCompare th, .rufoCompare td { padding: 14px 18px 12px; text-align: left; border-bottom: 1px solid var(--rufoLine); white-space: nowrap; }
.rufoCompare thead th { font: 600 1rem/1.3 var(--rufoDisplay); vertical-align: bottom; white-space: normal; min-width: 180px; }
.rufoCompare thead a { color: var(--rufoInk); text-decoration: none; }
.rufoCompare thead a:hover { text-decoration: underline; }
.rufoCompare tbody th { font: 600 0.9rem/1.2 var(--rufoDisplay); color: var(--rufoMuted); }
.rufoCompare tbody tr:last-child > * { border-bottom: 0; }
.rufoTimeline { display: grid; gap: var(--rufoS8); }
.rufoMonth h2 { margin: var(--rufoS2) 0 var(--rufoS4); font-size: var(--rufoStep3); }
.rufoLostCode .rufoIc { width: 0.9em; height: 0.9em; color: var(--rufoTeal); -webkit-text-stroke: 0; }
.rufoLocGuide { padding-top: var(--rufoS10); }
.rufoReviewNote { margin-top: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .rufoGuide { grid-template-columns: 184px minmax(0, 1fr); gap: var(--rufoS6); }
  .rufoNavLinks { gap: 20px; }
}
@media (max-width: 1100px) {
  .rufoGuide { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: var(--rufoS8); }
  .rufoRail { display: none; }
  .rufoBrowseGrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* filters become a bottom sheet */
  .rufoFilterOpen {
    display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px 8px; background: var(--rufoWhite); color: var(--rufoInk);
    border: 1.5px solid var(--rufoLine); border-radius: var(--rufoRControl); font: 700 0.98rem/1 var(--rufoDisplay); cursor: pointer;
    transition: border-color var(--rufoFast) var(--rufoEase);
  }
  .rufoFilterOpen:hover { border-color: var(--rufoTeal); }
  .rufoFilterOpen svg { color: var(--rufoTeal); width: 0.95em; height: 0.95em; margin-top: -3px; }
  .rufoFilterOpen em { font-style: normal; background: var(--rufoTeal); color: var(--rufoWhite); border-radius: var(--rufoRPill); min-width: 22px; height: 22px; display: none; place-items: center; font-size: 0.8rem; padding: 3px 6px 0; }
  .rufoFilterOpen.hasCount em { display: inline-grid; }
  .rufoFilters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 85; max-height: 88vh; max-height: 88svh;
    border: 0; border-radius: var(--rufoRSheet) var(--rufoRSheet) 0 0; box-shadow: 0 -12px 40px rgba(4, 18, 36, .22);
    transform: translateY(105%); visibility: hidden; transition: transform 420ms var(--rufoEase), visibility 0s linear 420ms;
  }
  .rufoFilters.isOpen { transform: none; visibility: visible; transition: transform 420ms var(--rufoEase), visibility 0s; }
  .rufoFilters::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: var(--rufoRPill); background: #C9D6DB; }
  .rufoFilterHead { padding: 24px max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px)); }
  .rufoFilterHead .rufoClear { margin-left: auto; }
  .rufoSheetClose { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--rufoInk); font-size: 1.15rem; cursor: pointer; border-radius: 50%; }
  .rufoSheetClose:hover { background: var(--rufoGrey); }
  .rufoFilterBody { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .rufoFilterGroup { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .rufoCheck { min-height: 44px; }
  .rufoFilterFoot { display: flex; gap: 12px; padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--rufoLine); background: var(--rufoWhite); }
  .rufoFilterFoot .rufoBtn { flex: 1; }
  .rufoSheetShade { display: block; position: fixed; inset: 0; z-index: 84; background: rgba(4, 18, 36, .48); opacity: 0; pointer-events: none; transition: opacity 300ms var(--rufoEase); }
  .rufoSheetShade.isOn { opacity: 1; pointer-events: auto; }
  .rufoResultsBar { gap: 10px; }
  .rufoCount { order: 3; width: 100%; margin-top: 6px; font: 400 0.92rem/1.2 var(--rufoBody); color: var(--rufoMuted); }
  .rufoSort { margin-left: auto; }
  .rufoSort > span { display: none; }
}
@media (max-width: 960px) {
  :root { --rufoNavH: 64px; }
  .rufoNavLinks { display: none; }
  .rufoNavMenu { display: grid; place-items: center; }
  .rufoNav.isMenuOpen { background: var(--rufoInk); }
  .rufoNav.isMenuOpen .rufoNavLinks { display: grid; position: absolute; top: 100%; left: 0; right: 0; background: var(--rufoInk); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 30px rgba(4, 18, 36, .3); }
  .rufoNav.isMenuOpen .rufoNavLinks a:not(.rufoBtn) { padding: 15px 0 12px; font-size: 1.08rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .rufoNav.isMenuOpen .rufoNavLinks a:not(.rufoBtn)::after { display: none; }
  .rufoNav.isMenuOpen .rufoNavLinks .rufoBtn { margin-top: 18px; justify-self: start; }
  /* hero: art-directed - text over the sky, the tub clear below it, search on ink underneath */
  .rufoHeroImg { height: var(--rufoHeroPhoto); bottom: auto; object-position: 63% 100%; }
  .rufoHero::before {
    height: var(--rufoHeroPhoto); bottom: auto;
    background:
      linear-gradient(180deg, rgba(5, 20, 40, .72) 0%, rgba(5, 20, 40, .42) 38%, rgba(5, 20, 40, 0) 60%),
      linear-gradient(0deg, var(--rufoInk) 0, rgba(9, 46, 88, 0) 56px);
  }
  .rufoHeroInner { display: block; min-height: 0; padding-block: calc(var(--rufoNavH) + var(--rufoS3)) var(--rufoS6); }
  .rufoHeroText { padding-top: 0; min-height: calc(var(--rufoHeroPhoto) - var(--rufoNavH) - var(--rufoS3) - 36px); }
  .rufoTagline { max-width: 24ch; }
  .rufoSearch { max-width: 560px; }
  .rufoProof { margin-top: var(--rufoS4); }
  .rufoCardRow, .rufoStretches {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: var(--rufoS2);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rufoS2); overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--rufoS2)); padding: 4px var(--rufoS2) var(--rufoS3); scrollbar-width: none;
  }
  .rufoCardRow::-webkit-scrollbar, .rufoStretches::-webkit-scrollbar { display: none; }
  .rufoCardRow > *, .rufoStretches > * { scroll-snap-align: start; }
  .rufoCardRow .rufoCard:hover, .rufoStretch:hover { transform: none; }
  .rufoMagazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rufoMagazine > .rufoCard:first-child { grid-row: auto; }
  .rufoMagazine > .rufoCard:first-child .rufoCardPhoto { min-height: 0; aspect-ratio: 16 / 9; flex: 0 0 auto; }
  .rufoSeasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rufoFaqGrid, .rufoAbout { grid-template-columns: minmax(0, 1fr); gap: var(--rufoS4); }
  .rufoFaqAside { position: static; }
  .rufoFoot { grid-template-columns: minmax(0, 1fr); }
  .rufoFootBrand .rufoFootIn, .rufoFootLinks .rufoFootIn { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: var(--rufoS6) var(--rufoS4); }
  .rufoTop { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: var(--rufoS7); }
  .rufoSuits { grid-template-columns: minmax(0, 1fr); }
  .rufoNeed { grid-template-columns: minmax(0, 1fr); }
  .rufoMapBox { aspect-ratio: 1 / 1; }
  /* sticky mobile book button (kept from the live page) */
  .rufoBookSticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #C13238;
    padding: 0 0 env(safe-area-inset-bottom, 0px); /* full width, edge to edge, as on the live page (rule 2) */
    box-shadow: 0 -8px 24px rgba(9, 46, 88, .16);
  }
  .rufoBookSticky .rufoBookBtn { display: block; width: 100%; border-radius: 0; font-size: 12pt; padding: 16px 15px 14px; box-shadow: none; }
  .rufoHasSticky { padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px)); }
  .rufoHasSticky .rufoToast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  body { font-size: 1.03rem; }
  .rufoBrandWord b { font-size: 0.98rem; letter-spacing: 0.2em; }
  .rufoBrandWord i { font-size: 0.88rem; }
  .rufoBrandMark { width: 42px; height: 42px; }
  .rufoBrandMark img { width: 31px; }
  .rufoHero .rufoEyebrow { letter-spacing: 0.13em; }
  .rufoSearch { padding: var(--rufoS3) 18px 20px; }
  .rufoSearch .rufoSearchTitle { font-size: 1.35rem; }
  .rufoFieldRow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .rufoProof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rufoProof li { padding: 2px 12px 2px 0; margin-right: 12px; }
  .rufoProof li + li { padding-left: 0; }
  .rufoProof b { font-size: 1.7rem; }
  .rufoProof span { font-size: 0.86rem; line-height: 1.3; }
  .rufoChapter { padding-bottom: var(--rufoS7); margin-bottom: var(--rufoS7); }
  .rufoChapterHead { margin-bottom: var(--rufoS4); }
  .rufoMagazine { grid-template-columns: minmax(0, 1fr); gap: var(--rufoS2); }
  .rufoMagazine > .rufoCard:first-child { grid-column: auto; }
  .rufoMagazine > .rufoCard:first-child .rufoCardPhoto { aspect-ratio: 4 / 3; }
  .rufoMagazine > .rufoCard:first-child .rufoCardBody { padding: 18px 20px 20px; }
  .rufoMagazine > .rufoCard:first-child .rufoCardName { font-size: 1.45rem; }
  .rufoFeaturedFoot { gap: var(--rufoS2); }
  .rufoFeaturedFoot .rufoBtn { width: 100%; order: 3; }
  .rufoTubRow { grid-template-columns: minmax(0, 1fr) 3rem; gap: 10px var(--rufoS2); }
  .rufoTubRow .rufoBar { grid-column: 1 / -1; grid-row: 2; }
  .rufoTwoCol { grid-template-columns: minmax(0, 1fr); }
  .rufoSeasons {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rufoS2); margin-inline: calc(-1 * var(--rufoS2)); padding: 0 var(--rufoS2) 8px; scrollbar-width: none;
  }
  .rufoSeasons::-webkit-scrollbar { display: none; }
  .rufoSeason { scroll-snap-align: start; }
  .rufoFootCols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rufoTabsIn { justify-content: space-between; gap: 0; }
  .rufoTabsIn a { padding-inline: 8px; font-size: 0.95rem; }
  .rufoTabsIn a.rufoBack { margin-right: 0; padding-right: 8px; }
  .rufoTabsIn a.rufoBack span { display: none; }
  .rufoSpecRow { gap: 2px; }
  .rufoSpec b { font-size: 1.32rem; }
  .rufoSpec span { font-size: 0.78rem; }
  .rufoThumbs { gap: 6px; }
  .rufoThumbs button span { font-size: 0.88rem; }
  .rufoSection { padding-block: var(--rufoS7); }
  .rufoTitleMeta > span + span::before { display: none; }
  .rufoTitleMeta { gap: 6px 16px; }
  .rufoReviewSum { gap: var(--rufoS2) var(--rufoS3); }
  .rufoReviewSum > div { flex: 1 1 180px; }
  .rufoReviewSum .rufoBtn { margin-left: 0; }
}
@media (max-width: 1100px) {
  .rufoDoc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rufoDoc .rufoRail { display: none; }
}
@media (max-width: 960px) {
  .rufoSplit, .rufoLost { grid-template-columns: minmax(0, 1fr); gap: var(--rufoS5); }
  .rufoSplit > aside { position: static; }
  .rufoLoves, .rufoCards3 { grid-template-columns: minmax(0, 1fr); gap: var(--rufoS2); }
  .rufoShortGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rufoS2); }
  .rufoLocGuide { padding-top: var(--rufoS7); }
  .rufoPlaces, .rufoReviewList { grid-template-columns: minmax(0, 1fr); }
  .rufoBand, .rufoBlock { padding-block: var(--rufoS7); }
  .rufoViewer figure { padding: 0 8px; }
  .rufoViewer .rufoViewerPrev, .rufoViewer .rufoViewerNext { top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
  .rufoGalleryNav { opacity: 1; }
}
@media (max-width: 640px) {
  .rufoPageHead { padding-bottom: var(--rufoS5); }
  .rufoStats li { padding-right: var(--rufoS2); margin-right: var(--rufoS2); }
  .rufoStats b { font-size: 1.55rem; }
  .rufoStats span { font-size: 0.84rem; }
  .rufoPanel { padding: var(--rufoS3) 20px; }
  .rufoQuote { grid-template-columns: minmax(0, 1fr); gap: var(--rufoS2); }
  .rufoQuote > svg { width: 30px; height: 30px; }
  .rufoPlaces li { grid-template-columns: 36px minmax(0, 1fr); }
  .rufoPlaces em { grid-column: 2; text-align: left; margin-top: -8px; }
  .rufoTowns a { flex: 1 1 calc(50% - 5px); justify-content: space-between; }
  .rufoForm .rufoFieldRow { grid-template-columns: minmax(0, 1fr); }
  .rufoStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rufoStats li { padding-right: 12px; margin-right: 12px; }
  .rufoLostCode { display: none; }
  .rufoLost { padding-block: var(--rufoS4) var(--rufoS7); }
  .rufoShortGrid { grid-template-columns: minmax(0, 1fr); }
  .rufoFormGroup .rufoCheck { display: flex; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rufoReveal { opacity: 1; transform: none; }
  .rufoJs .rufoTubData:not(.isIn) .rufoBar i { transform: none; }
}