/* Generated by famco/build.mjs from famco/template/style.css. Edit that file and rebuild, not this one. */
/* ==========================================================
   FamCo house site — styles
   Default look: deep green, Victorian brick, brass and
   parchment, Cormorant Garamond for display and Work Sans for
   reading. Each house can change the colours and fonts in the
   theme block of its content.js; build.mjs writes them into
   the page as CSS variables, which everything below follows.
   ========================================================== */

:root {
  --green-950: #102018;
  --green-900: #17291F;
  --green-800: #1E3628;
  --green-700: #2A4A37;
  --green-100: #E4EBE4;
  --brick: #9C4A2F;
  --brick-dark: #7A3520;
  --mortar: #D9CDB8;
  --brass: #B8935A;
  --brass-light: #D9BE8C;
  --cream: #F3EDE1;
  --paper: #FBF8F2;
  --ink: #1C211D;
  --muted: #5B625C;
  --line: #E1D8C7;
  --line-dark: color-mix(in srgb, var(--brass-light) 22%, transparent);
  --ok: #2F6B45;
  --error: #A33A26;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--green-950) 6%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--green-950) 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: var(--brick); text-underline-offset: 3px; }
a:hover { color: var(--brick-dark); }
[hidden] { display: none !important; }
.no-brick .brick-edge { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--green-900);
}
h2 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }

h3 { font-size: 1.5rem; }
p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brick);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow-light { color: var(--brass-light); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--green-900); color: var(--cream);
  padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ── Bars ──────────────────────────────────────────────── */
.typo-bar {
  background: var(--error); color: #fff;
  padding: 12px var(--gutter); font-weight: 600; text-align: center;
}
.status-banner {
  background: var(--brick); color: var(--cream);
  text-align: center; padding: 9px var(--gutter);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 0.95rem/1 var(--font-body);
  letter-spacing: 0.02em;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-brass { background: var(--brass); color: var(--green-950); }
.btn-brass:hover { background: var(--brass-light); color: var(--green-950); }
.btn-green { background: var(--green-800); color: var(--cream); }
.btn-green:hover { background: var(--green-700); color: var(--cream); }
.btn-outline { border-color: var(--green-800); color: var(--green-800); background: transparent; }
.btn-outline:hover { background: var(--green-800); color: var(--cream); }
.btn-outline-light { border-color: color-mix(in srgb, var(--cream) 45%, transparent); color: var(--cream); background: transparent; }
.btn-outline-light:hover { border-color: var(--brass-light); color: var(--brass-light); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-link-light {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: none; border: 0; padding: 10px 4px;
  color: var(--brass-light); font: 500 0.95rem var(--font-body);
  cursor: pointer;
}
.btn-link-light:hover { color: var(--cream); }

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--green-900) 97%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow .25s;
}
.site-header.is-stuck { box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.45); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--cream); }
.brand:hover { color: var(--cream); }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--green-900), inset 0 0 0 4px color-mix(in srgb, var(--brass) 55%, transparent);
  font: 700 1.45rem/1 var(--font-display);
  color: var(--brass-light);
}
.brand-text {
  display: flex; flex-direction: column;
  font: 600 1.3rem/1.05 var(--font-display);
  letter-spacing: 0.01em;
}
.brand-text small {
  font: 600 0.62rem/1.6 var(--font-body);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-light);
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a {
  color: var(--cream); text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  opacity: 0.88;
}
.site-nav a:hover { opacity: 1; color: var(--brass-light); }
.site-nav .nav-cta {
  opacity: 1;
  border: 1px solid var(--brass);
  color: var(--brass-light);
  padding: 9px 16px; border-radius: var(--radius);
}
.site-nav .nav-cta:hover { background: var(--brass); color: var(--green-950); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 11px 10px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--cream); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--green-900);
    border-bottom: 1px solid var(--line-dark);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 1rem; }
  .site-nav .nav-cta { margin-top: 14px; text-align: center; padding: 14px; border-bottom: 1px solid var(--brass); }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--green-900);
  color: var(--cream);
  padding: clamp(48px, 8vw, 104px) 0 clamp(88px, 10vw, 128px);
  overflow: hidden;
  isolation: isolate;
}
/* faint brick bond across the whole hero */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48'%3E%3Cpath d='M0 .5H72M0 24.5H72M.5 0V24M36.5 24V48' stroke='%23F3EDE1' stroke-opacity='.045' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, rgba(0,0,0,.35) 75%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, rgba(0,0,0,.35) 75%);
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 60% 70% at 78% 35%, color-mix(in srgb, var(--green-700) 90%, transparent), transparent 70%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.hero h1 {
  color: var(--cream);
  font-size: clamp(3rem, 7.2vw, 5.6rem);
  font-weight: 600;
  line-height: 0.98;
  margin-bottom: 0.25em;
}
.hero-address {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 1.6rem;
}
.hero-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--cream) 92%, transparent);
  max-width: 30ch;
  margin-bottom: 1.8rem;
}
.hero-price {
  display: inline-flex; flex-direction: column;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 12px 0;
  margin-bottom: 2rem;
}
.hero-price-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-light);
}
.hero-price-amount { font: 600 2.2rem/1.1 var(--font-display); color: var(--cream); }
.hero-price-note { display: block; margin-top: .35rem; font-size: .9rem; opacity: .85; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* the arched window: Victorian military brickwork */
.hero-visual { display: flex; justify-content: center; }
.arch {
  position: relative;
  width: 100%; max-width: 420px;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 6px 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brass) 10%, transparent), transparent 62%),
    var(--green-950);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brass) 70%, transparent),
    0 0 0 9px var(--green-900),
    0 0 0 10px color-mix(in srgb, var(--brass) 35%, transparent),
    0 40px 80px -30px rgba(0, 0, 0, 0.6);
  display: grid; place-items: center;
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.crest { width: 78%; color: var(--brass); }
.crest svg { width: 100%; height: auto; overflow: visible; }
.crest-ring-text { font: 600 13.5px var(--font-body); letter-spacing: 0.3em; }
.crest-numeral { font: 700 100px var(--font-display); }
.crest-name { font: 600 11.5px var(--font-body); letter-spacing: 0.28em; }

.arch-ribbon {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--brick); color: var(--cream);
  padding: 9px 20px; border-radius: 2px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .arch { max-width: 300px; }
  .arch.has-photo { max-width: 100%; aspect-ratio: 4 / 3; border-radius: 160px 160px 6px 6px; }
}

/* ── Key facts plaque ──────────────────────────────────── */
.facts-band { position: relative; z-index: 2; margin-top: -56px; }
.facts {
  margin: 0;
  display: flex; flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fact {
  flex: 1 1 150px;
  padding: 20px 24px;
  border-left: 1px solid var(--line);
  margin-left: -1px;
}
.fact dt {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.fact dd { margin: 4px 0 0; font: 600 1.5rem/1.2 var(--font-display); color: var(--green-900); }

/* ── Sections ──────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.section-alt { background: var(--cream); }
.section-head { max-width: 640px; margin-bottom: 2.6rem; }
.section-lede { color: var(--muted); }
.subhead {
  font-size: 1.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
.prose p { max-width: 64ch; }
.prose p:first-child::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  color: var(--brick);
}

/* ── About the home ────────────────────────────────────── */
.home-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.plaque {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 20px;
  position: relative;
}
.plaque::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid color-mix(in srgb, var(--brass) 35%, transparent);
  border-radius: 2px; pointer-events: none;
}
.plaque-title {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 1.1rem;
}
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding: 0 0 0.85rem 1.7rem;
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute; left: 2px; top: 0.45em;
  width: 9px; height: 9px;
  background: var(--brass);
  transform: rotate(45deg);
}

.rooms-wrap { margin-top: clamp(48px, 7vw, 80px); }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.room {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: #fff;
}
.room-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 0.4rem; }
.room-name { font-size: 1.35rem; margin: 0; }
.room-size { font-size: 0.85rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.room p { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }

@media (max-width: 820px) {
  .home-inner { grid-template-columns: 1fr; }
}

/* ── Photos ────────────────────────────────────────────── */
.inside-gate { max-width: 40rem; }
.inside-gate > p { margin: 0 0 1.4rem; font-size: 1.05rem; }
.inside-form { margin-top: .4rem; }
.inside-note { margin: .8rem 0 0; font-size: .85rem; color: var(--muted); }
.mosaic { display: grid; gap: 10px; }
.mosaic-item {
  position: relative; overflow: hidden;
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--green-100);
  cursor: zoom-in;
  min-height: 0;
}
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mosaic-item:hover img { transform: scale(1.03); }
.mosaic-caption {
  position: absolute; left: 12px; bottom: 12px;
  background: color-mix(in srgb, var(--green-950) 82%, transparent); color: var(--cream);
  font-size: 0.8rem; padding: 5px 10px; border-radius: 2px;
}

.mosaic-1 { grid-template-columns: 1fr; }
.mosaic-1 .mosaic-item { aspect-ratio: 16 / 9; }
.mosaic-2 { grid-template-columns: 1fr 1fr; }
.mosaic-2 .mosaic-item { aspect-ratio: 4 / 3; }
.mosaic-3, .mosaic-4, .mosaic-5 {
  grid-template-rows: repeat(2, clamp(160px, 22vw, 260px));
}
.mosaic-3 { grid-template-columns: 2fr 1fr; }
.mosaic-4, .mosaic-5 { grid-template-columns: 2fr 1fr 1fr; }
.mosaic-3 .mosaic-item:first-child,
.mosaic-4 .mosaic-item:first-child,
.mosaic-5 .mosaic-item:first-child { grid-row: span 2; }
.mosaic-4 .mosaic-item:nth-child(4) { grid-column: span 2; }

@media (max-width: 700px) {
  .mosaic-3, .mosaic-4, .mosaic-5 { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .mosaic-3 .mosaic-item, .mosaic-4 .mosaic-item, .mosaic-5 .mosaic-item { aspect-ratio: 1; }
  .mosaic-3 .mosaic-item:first-child,
  .mosaic-4 .mosaic-item:first-child,
  .mosaic-5 .mosaic-item:first-child { grid-row: auto; grid-column: span 2; aspect-ratio: 4 / 3; }
  .mosaic-3 .mosaic-item:nth-child(3) { grid-column: auto; }
  .mosaic-4 .mosaic-item:nth-child(4) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .mosaic-2 { grid-template-columns: 1fr; }
}
.photos-more { margin-top: 1.6rem; text-align: center; }

.video {
  margin-top: clamp(32px, 5vw, 56px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--green-950);
  box-shadow: var(--shadow);
}
.mosaic:empty + .photos-more + .video { margin-top: 0; }
.video-poster {
  width: 100%; height: 100%;
  border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  color: var(--cream);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brass) 16%, transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48'%3E%3Cpath d='M0 .5H72M0 24.5H72M.5 0V24M36.5 24V48' stroke='%23F3EDE1' stroke-opacity='.045' fill='none'/%3E%3C/svg%3E"),
    var(--green-900);
}
.video-play {
  width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid var(--brass);
  box-shadow: inset 0 0 0 5px var(--green-900), inset 0 0 0 6px color-mix(in srgb, var(--brass) 55%, transparent);
  position: relative;
  transition: transform .25s;
}
.video-play::after {
  content: ""; position: absolute; left: 34px; top: 26px;
  border-style: solid; border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent var(--brass-light);
}
.video-poster:hover .video-play { transform: scale(1.06); }
.video-label { font: 600 1.7rem/1.2 var(--font-display); }
.video-note { font-size: 0.82rem; color: color-mix(in srgb, var(--cream) 60%, transparent); }
.video-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ── Floorplan ─────────────────────────────────────────── */
.floorplan {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 4vw, 40px);
}
.floorplan img { margin: 0 auto; max-height: 80vh; }
.floorplan-download { margin-top: 1.4rem; }

/* ── The area (green section) ──────────────────────────── */
.section-green {
  background: var(--green-900);
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  padding-top: calc(clamp(64px, 9vw, 112px) + 16px);
}
.section-green h2, .section-green h3 { color: var(--cream); }
.prose-light p:first-child::first-letter { color: var(--brass); }

/* a course of Flemish-ish brick to mark the edge of the section */
.brick-edge {
  position: absolute; left: 0; right: 0; top: 0;
  height: 16px;
  background-color: var(--mortar);
  background-image:
    linear-gradient(90deg, var(--brick) 0 calc(100% - 2px), transparent 0),
    linear-gradient(90deg, var(--brick-dark) 0 calc(100% - 2px), transparent 0);
  background-size: 38px 7px, 38px 7px;
  background-position: 0 0, 19px 9px;
  background-repeat: repeat-x;
  opacity: 0.95;
}

.area-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.area-block + .area-block { margin-top: 2.2rem; }
.area-subhead {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-light) !important;
  margin-bottom: 0.9rem;
}
.area-gallery { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.area-gallery figure { margin: 0; }
.area-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: rgba(255,255,255,.06); }
.look-soft .area-gallery img { border-radius: 20px; }
.area-gallery figcaption { margin-top: .6rem; color: var(--cream); font-size: .95rem; line-height: 1.35; }
.area-place, .area-walk { display: block; }
.area-walk { margin-top: .1rem; font-size: .9rem; opacity: .85; }
.area-credit { display: block; margin-top: .2rem; font-size: .72rem; color: var(--brass-light); opacity: .8; }
/* Each card shares the row's lines (photo, place, walk, credit), so a place
   name that wraps onto two lines doesn't knock its neighbours out of line. */
@supports (grid-template-rows: subgrid) {
  .area-gallery li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .area-gallery figure, .area-gallery figcaption { display: contents; }
  .area-gallery img { grid-row: 1; }
  .area-place { grid-row: 2; margin-top: .6rem; }
  .area-walk { grid-row: 3; }
  .area-credit { grid-row: 4; }
}
.area-credit a { color: inherit; }
@media (max-width: 820px) { .area-gallery { grid-template-columns: 1fr 1fr; gap: 24px 12px; } }
.nearby, .travel { list-style: none; margin: 0; padding: 0; }
.nearby li, .travel li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  line-height: 1.45;
}
.nearby li:first-child, .travel li:first-child { border-top: 1px solid var(--line-dark); }
.nearby-name, .travel-to { color: var(--cream); }
.travel-to small { display: block; font-size: 0.82rem; color: color-mix(in srgb, var(--cream) 60%, transparent); }
.nearby-distance, .travel-time { color: var(--brass-light); font-size: 0.92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.map {
  margin-top: clamp(40px, 6vw, 64px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  min-height: 240px;
  display: flex; flex-direction: column;
  background: var(--green-950);
}
.map.is-loaded { height: clamp(300px, 42vw, 440px); }
.map-placeholder {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 .5H48M.5 0V48' stroke='%23D9BE8C' stroke-opacity='.07' fill='none'/%3E%3C/svg%3E");
}
.map-address { font: 600 1.6rem/1.2 var(--font-display); color: var(--cream); margin-bottom: 1.2rem; }
.map-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.map-note { margin: 1rem 0 0; font-size: 0.8rem; color: color-mix(in srgb, var(--cream) 55%, transparent); }
.map-frame { width: 100%; flex: 1; border: 0; display: block; }

@media (max-width: 820px) {
  .area-inner { grid-template-columns: 1fr; }
}

/* ── Good to know ──────────────────────────────────────── */
.details-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.details { margin: 0; border-top: 2px solid var(--green-900); }
.details > div {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.details dt { font-weight: 600; color: var(--green-900); }
.details dd { margin: 0; color: var(--ink); }
@media (max-width: 820px) {
  .details-inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .details > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Enquire ───────────────────────────────────────────── */
.enquire-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.open-days {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brick);
  border-radius: var(--radius);
  padding: 20px 22px 6px;
  margin: 1.6rem 0;
}
.open-days ul { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.open-days li { font: 600 1.3rem/1.4 var(--font-display); color: var(--green-900); padding: 2px 0; }
.open-days-note { font-size: 0.9rem; color: var(--muted); }
.private-sale {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.98rem;
}
.private-sale strong { color: var(--green-900); }

.enquire-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-800);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 36px);
  box-shadow: var(--shadow);
}
.enquire-form.is-disabled { opacity: 0.8; }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; color: var(--green-900); }
.optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #CFC5B2;
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231E3628' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent);
}
.field textarea { resize: vertical; min-height: 110px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0.9rem 0 0; font-size: 0.95rem; min-height: 1.4em; color: var(--muted); }
.form-status.is-ok { color: var(--ok); font-weight: 600; }
.form-status.is-error { color: var(--error); font-weight: 600; }

@media (max-width: 820px) {
  .enquire-inner { grid-template-columns: 1fr; }
}

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: var(--green-950);
  color: color-mix(in srgb, var(--cream) 75%, transparent);
  padding: 64px 0 28px;
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-address { margin: 1rem 0 0; font-size: 0.95rem; line-height: 1.6; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; }
.footer-nav a { color: var(--cream); text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--brass-light); }
.footer-base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8rem; line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}
.footer-base p { max-width: 80ch; margin-bottom: 0.6rem; }

/* ── Lightbox ──────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 18, 13, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 64px;
}
.lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 2px; }
.lightbox figcaption { color: var(--cream); font-size: 0.9rem; margin-top: 12px; text-align: center; opacity: 0.85; }
.lightbox button {
  position: absolute;
  background: color-mix(in srgb, var(--cream) 10%, transparent);
  color: var(--cream);
  border: 1px solid color-mix(in srgb, var(--cream) 25%, transparent);
  border-radius: 50%;
  width: 48px; height: 48px;
  font-size: 1.8rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.lightbox button:hover { background: color-mix(in srgb, var(--cream) 20%, transparent); }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox { padding: 64px 8px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 14px; transform: none; }
  .lightbox-prev { left: calc(50% - 60px); }
  .lightbox-next { right: calc(50% - 60px); }
}

/* ── Reveal ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* Cormorant's default old-style "1" reads as a capital I, which matters
   when the house is number 1. Lining figures everywhere. (Kept down here
   because the font shorthand above resets it.) */
h1, h2, h3, h4, .brand-mark, .crest text, .hero-price-amount, .fact dd, .open-days li, .map-address, .room-name,
.prose p:first-child::first-letter {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ── The "soft" look ───────────────────────────────────────
   theme.look: "soft" in content.js. A light header and hero,
   pill-shaped buttons and fields, and softly rounded photos
   and cards, in place of the arched, brick-edged default.
   Colours still come from the house's theme.                 */
.look-soft { --radius: 22px; --radius-lg: 32px; }

.look-soft .btn { border-radius: 999px; padding: 15px 28px; font-weight: 700; }
.look-soft .btn-brass, .look-soft .btn-green { background: var(--brass); border-color: var(--brass); color: #fff; }
.look-soft .btn-brass:hover, .look-soft .btn-green:hover { background: var(--brick); border-color: var(--brick); color: #fff; }
.look-soft .btn-outline, .look-soft .btn-outline-light { border-width: 2px; }
.look-soft .skip-link { border-radius: 999px; }

/* header: light, with a pill call to action */
.look-soft .site-header { background: color-mix(in srgb, var(--paper) 95%, transparent); border-bottom: 1px solid var(--line); }
.look-soft .site-header.is-stuck { box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--green-950) 40%, transparent); }
.look-soft .site-header .brand, .look-soft .site-header .brand:hover { color: var(--green-900); }
.look-soft .site-header .brand-mark {
  color: var(--brass); border-color: var(--brass);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px color-mix(in srgb, var(--brass) 45%, transparent);
}
.look-soft .site-header .brand-text small { color: var(--brick); }
.look-soft .site-nav a { color: var(--green-900); opacity: 1; }
.look-soft .site-nav a:hover { color: var(--brick); }
.look-soft .site-nav .nav-cta {
  background: var(--brass); border-color: var(--brass); color: #fff;
  border-radius: 999px; padding: 11px 22px; font-weight: 700;
}
.look-soft .site-nav .nav-cta:hover { background: var(--brick); border-color: var(--brick); color: #fff; }
.look-soft .nav-toggle span { background: var(--green-900); }
@media (max-width: 900px) {
  .look-soft .site-nav { background: var(--paper); border-bottom-color: var(--line); }
  .look-soft .site-nav a { border-bottom-color: var(--line); }
  .look-soft .site-nav .nav-cta { border-bottom: 1px solid var(--brass); margin-top: 16px; padding: 15px; }
}

/* hero: light, the photo in a rounded frame */
.look-soft .hero { background: var(--paper); color: var(--ink); padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 9vw, 112px); }
.look-soft .hero::before, .look-soft .hero::after { display: none; }
.look-soft .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.look-soft .hero .eyebrow {
  display: inline-flex; padding: 8px 16px; border-radius: 999px;
  background: var(--cream); color: var(--brick);
  letter-spacing: 0.12em; margin-bottom: 1.4rem;
}
.look-soft .hero .eyebrow::before { display: none; }
.look-soft .hero h1 { color: var(--green-900); font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.02; }
.look-soft .hero-address { color: var(--brick); }
.look-soft .hero-lede {
  font-family: var(--font-body); font-style: normal; font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.6;
  color: var(--muted); max-width: 34ch;
}
.look-soft .hero-price { border-color: var(--line); }
.look-soft .hero-price-label { color: var(--brick); }
.look-soft .hero-price-amount { color: var(--brass); font-size: 2.5rem; }
.look-soft .hero .btn-outline-light { border-color: var(--green-900); color: var(--green-900); }
.look-soft .hero .btn-outline-light:hover { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.look-soft .hero .btn-link-light { color: var(--green-900); }
.look-soft .hero .btn-link-light:hover { color: var(--brick); }
.look-soft .hero-visual { display: block; }
.look-soft .arch {
  max-width: none; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--tint);
  box-shadow: 0 34px 64px -34px color-mix(in srgb, var(--green-950) 50%, transparent);
}
.look-soft .arch:not(.has-photo) { max-width: 440px; margin: 0 auto; }
.look-soft .arch-ribbon { border-radius: 999px; background: var(--brass); color: #fff; }
@media (max-width: 820px) {
  .look-soft .hero-inner { grid-template-columns: 1fr; }
  .look-soft .arch.has-photo { max-width: 100%; aspect-ratio: 4 / 3; border-radius: 26px; }
}

/* texture: a row of rooftops along the foot of the dark section, drawn
   as a mask so it takes the house's own colours. */
.look-soft {
  --skyline: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22640%22 height=%2296%22 viewBox=%220 0 640 96%22 fill=%22%23000%22%3E%3Cpath d=%22M0 96V58h18v-8h6v8h22l26-24 26 24v38zM98 96V52l30-26 30 26v44zM112 52h8v-10h-8zM158 96V60h14v-9h7v9h10v-9h7v9h36v36z%22/%3E%3Cpath d=%22M242 96V44l38-30 38 30v52zM270 30h8V18h-8zM318 96V62h70v34zM334 62v-8h6v8zM360 62v-8h6v8z%22/%3E%3Cpath d=%22M388 96V56l26-22 26 22v40zM440 96V64h46v32zM452 64v-7h6v7zM486 96V50l34-28 34 28v46zM530 30h7v-11h-7z%22/%3E%3Cpath d=%22M554 96V60h86v36zM570 60v-9h7v9zM612 60v-9h7v9z%22/%3E%3Cpath d=%22M236 96V68h2v28zM231 68h12l-2-8h-8zM232 60l5-5 5 5z%22/%3E%3C/svg%3E");
}
.look-soft .section-green { isolation: isolate; }
.look-soft .section-green::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  z-index: -1; pointer-events: none;
  background: var(--brass-light);
  -webkit-mask: var(--skyline) 0 100% / 640px 96px repeat-x;
          mask: var(--skyline) 0 100% / 640px 96px repeat-x;
  opacity: 0.09;
}
@media (max-width: 700px) {
  .look-soft .section-green::after {
    height: 72px; -webkit-mask-size: 480px 72px; mask-size: 480px 72px;
  }
}

/* cards, photos and the form */
.look-soft .facts { background: #fff; border-top: 1px solid var(--line); overflow: hidden; }
.look-soft .plaque { background: #fff; }
.look-soft .plaque::before { display: none; }
.look-soft .ticks li::before { border-radius: 50%; transform: none; }
.look-soft .mosaic { gap: 14px; }
.look-soft .mosaic-caption {
  left: 14px; bottom: 14px; border-radius: 999px; padding: 6px 14px;
  background: color-mix(in srgb, var(--green-950) 78%, transparent);
}
.look-soft .open-days { background: #fff; border-left-width: 1px; }
.look-soft .enquire-form { background: #fff; border-top: 1px solid var(--line); border-radius: var(--radius-lg); }
.look-soft .field label { padding-left: 6px; }
.look-soft .field input, .look-soft .field select {
  border-radius: 999px; padding: 13px 20px; min-height: 50px;
  border-color: color-mix(in srgb, var(--green-900) 24%, #fff);
}
.look-soft .field select { padding-right: 44px; background-position: right 20px center; }
.look-soft .field textarea { border-radius: 22px; padding: 14px 20px; border-color: color-mix(in srgb, var(--green-900) 24%, #fff); }

/* ── Print: a tidy one-pager of the details ────────────── */
@media print {
  .site-header, .status-banner, .typo-bar, .hero-actions, .map, .video, .enquire-form,
  .photos-more, .lightbox, .footer-nav, .brick-edge, .skip-link { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero, .section-green, .site-footer { background: #fff !important; color: var(--ink) !important; padding: 16pt 0 !important; }
  .hero h1, .section-green h2, .section-green h3, .hero-price-amount, .nearby-name, .travel-to, .map-address { color: var(--green-900) !important; }
  .hero-lede, .section-green, .prose-light p { color: var(--ink) !important; }
  .hero::before, .hero::after { display: none; }
  .hero-visual { display: none; }
  .hero-inner, .home-inner, .area-inner, .details-inner, .enquire-inner { grid-template-columns: 1fr; }
  .facts-band { margin-top: 0; }
  .section { padding: 16pt 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { color: inherit; text-decoration: none; }
}