/* ==========================================================================
   Home page: The SisterListers.

   To the standard of the reference John chose (14 October 2026): a
   full-screen photograph with a centred serif headline, cream paper, small
   tracked labels over each heading, generous air, outlined buttons, listing
   sales, photo tiles for the towns, and a valuation ask over a second
   photograph. Playfair Display for headings, Montserrat for text.

   15 October: given motion and asymmetry after "close but boring". One
   orchestrated moment on load (the opening), one continuous one (the run
   of towns), one answered by scrolling (the figures). Nothing else moves
   unless a visitor's pointer asks it to. Every animation is off under
   prefers-reduced-motion.

   Every colour, face and measure is a brand token from brand_css_vars().
   ========================================================================== */

.page-ed {
  background: var(--c-paper);
  color: var(--c-body);
  font-weight: 400;
}
.page-ed .wrap { width: min(1240px, 100% - (var(--s-gutter) * 2)); margin-inline: auto; }

:where(.page-ed) p { margin: 0; }
:where(.page-ed) p + p { margin-top: 1rem; }

:where(.page-ed) a { color: var(--c-ink); }
.page-ed a:focus-visible,
.page-ed button:focus-visible,
.page-ed input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --- Shared pieces ---------------------------------------------------------- */

.kicker {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ghost);
}
.kicker--light { color: rgba(255, 255, 255, 0.8); }

.page-ed .h2,
.page-ed .h3,
.ask__q {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--c-ink);
  margin: 0;
  letter-spacing: 0;
}
.page-ed .h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.18; text-wrap: balance; }
.page-ed .h2--big { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.12; }
.page-ed .h3 { font-size: clamp(1.45rem, 2.1vw, 1.8rem); line-height: 1.25; }
.ask__q { font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.3; }
.page-ed .h2--light { color: var(--c-white); }

.page-ed .centre { text-align: center; }

/* Outlined and filled buttons, the reference's shape: small tracked caps
   inside a thin rule. */
.btn-line, .btn-fill {
  display: inline-block;
  padding: 0.95rem 1.9rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  background: transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn-line:hover { background: var(--c-ink); color: var(--c-white); }
.btn-fill { background: var(--c-ink); color: var(--c-white); }
.btn-fill:hover { background: var(--c-accent-deep); }
.btn-line--light { border-color: rgba(255, 255, 255, 0.85); color: var(--c-white); }
.btn-line--light:hover { background: var(--c-white); color: var(--c-ink); }
.btn-fill--light { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.btn-fill--light:hover { background: var(--c-paper-alt); border-color: var(--c-paper-alt); }

.page-ed .source-note {
  margin: 1.5rem auto 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 72ch;
  text-align: center;
}

/* --- Opening --------------------------------------------------------------- */

.opening {
  position: relative;
  min-height: clamp(600px, 100svh, 920px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-white);
  text-align: center;
}
.opening__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform-origin: 50% 60%;
  animation: opening-drift 28s ease-out forwards;
}
@keyframes opening-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
/* The video sits exactly where the photograph would, poster first. */
.opening__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--c-ink);
}
.opening::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A steady wash over the whole frame, deeper top and bottom, so the
     words hold against the white water in the video (John, 15 October
     2026: the type was hard to read on the waves). */
  background: linear-gradient(180deg, rgba(20, 22, 26, 0.62) 0%, rgba(20, 22, 26, 0.42) 45%, rgba(20, 22, 26, 0.62) 100%);
}
.opening__inner {
  position: relative;
  z-index: 1;
  width: min(880px, 100% - (var(--s-gutter) * 2));
  /* Clear of the fixed header, whose height site.js writes to
     --tp-header-h (notice band plus two rows since 3 November 2026). */
  padding: calc(var(--tp-header-h, 201px) + 1.5rem) 0 5rem;
  /* Soft and wide, so it lifts the words off passing foam without
     reading as a drop shadow. */
  text-shadow: 0 1px 28px rgba(10, 12, 16, 0.55), 0 1px 3px rgba(10, 12, 16, 0.35);
}
/* The words arrive once, in reading order, and then hold still. */
.opening__inner > * { animation: opening-rise 1s cubic-bezier(.2,.7,.2,1) both; }
.opening__inner > :nth-child(1) { animation-delay: .15s; }
.opening__inner > :nth-child(2) { animation-delay: .3s; }
.opening__inner > :nth-child(3) { animation-delay: .5s; }
.opening__inner > :nth-child(4) { animation-delay: .7s; }
.opening__inner > :nth-child(5) { animation-delay: .9s; }
@keyframes opening-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.opening__head {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: 1.06;
  color: var(--c-white);
  letter-spacing: -0.01em;
}
.opening__sub {
  margin: 1.5rem auto 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  max-width: 44ch;
}
.opening__choices {
  margin: 2.25rem 0 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* The shared search box, white on the photograph. */
.opening__search {
  margin: 2.75rem auto 0;
  max-width: 520px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
}
.opening__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0.75rem 0;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--c-white);
  background: transparent;
  text-align: left;
}
.opening__search input::placeholder { color: rgba(255, 255, 255, 0.75); }
.opening__search input:focus { outline: none; }
.opening__search button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  padding: 0 0.25rem;
  display: grid;
  place-items: center;
}
.opening__search button svg { width: 20px; height: 20px; }
.opening .sug { text-align: left; color: var(--c-ink); }

/* A thin line at the foot of the photograph that keeps drawing itself. */
.opening__cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 1;
  width: 1px;
  height: 56px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.opening__cue span {
  position: absolute;
  inset: 0;
  background: var(--c-white);
  transform-origin: 50% 0;
  animation: opening-cue 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes opening-cue {
  0%   { transform: scaleY(0); transform-origin: 50% 0; }
  45%  { transform: scaleY(1); transform-origin: 50% 0; }
  55%  { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

.fair {
  margin: 1.25rem auto 0;
  font-size: 0.78rem;
  color: var(--c-muted);
  text-align: center;
}
.fair a { color: inherit; }

/* --- The run of towns ------------------------------------------------------ */

.run {
  margin-top: 2.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.run__track {
  display: flex;
  width: max-content;
  animation: run-along 90s linear infinite;
}
.run:hover .run__track { animation-play-state: paused; }
@keyframes run-along {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.run__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  flex: none;
}
.run__list li {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  color: var(--c-ink);
  white-space: nowrap;
  padding-right: 2.6rem;
  display: flex;
  align-items: center;
  gap: 2.6rem;
}
.run__list li::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--c-ghost);
  transform: rotate(45deg);
}
.run__lead { font-style: italic; color: var(--c-muted); }

/* --- Danielle and Kim ------------------------------------------------------ */

/* Two portraits at a modest size, the second set lower than the first, the
   text beside them. */
.meet { padding: var(--s-section) 0; }
.meet__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.meet__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.meet__one { margin: 0; }
.meet__one:nth-child(2) { margin-top: 4.5rem; }
.meet__one a { display: block; overflow: hidden; background: var(--c-ink); }
.meet__one img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.meet__one a:hover img { transform: scale(1.04); }
.meet__one figcaption { margin-top: 0.9rem; }
.meet__name { display: block; font-family: var(--f-display); font-size: 1.15rem; color: var(--c-ink); }
.meet__role {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.meet__text p { font-size: 1rem; line-height: 1.75; font-weight: 300; max-width: 52ch; }
.meet__text .h2--big { max-width: 14ch; }
.meet__lede {
  margin-top: 1.5rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--c-ink);
}
.meet__text .meet__lede + p { margin-top: 1.5rem; }
.meet__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.meet__text .meet__actions { margin-top: 2rem; }

/* --- Figures --------------------------------------------------------------- */

.numbers { background: var(--c-ink); color: var(--c-paper); padding: calc(var(--s-section) * 0.8) 0; }
.numbers__row {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.numbers__row div { display: flex; flex-direction: column-reverse; }
.numbers__row dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  line-height: 1;
  color: var(--c-white);
  font-variant-numeric: lining-nums tabular-nums;
}
.numbers__row dt {
  margin-top: 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.numbers .numbers__source { margin-top: 2.5rem; color: rgba(255, 255, 255, 0.55); }

/* --- Recently sold --------------------------------------------------------- */

.sold { padding: var(--s-section) 0; overflow: hidden; }
.sold__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.sold__figure { margin: 1rem 0 0; max-width: 48ch; font-size: 0.98rem; line-height: 1.7; font-weight: 300; }
.sold__nav { display: flex; align-items: center; gap: 0.6rem; }
.sold__nav .btn-line { margin-right: 0.6rem; }
.track-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}
.track-btn svg { width: 20px; height: 20px; }
.track-btn:hover:not(:disabled) { background: var(--c-ink); color: var(--c-white); }
.track-btn:disabled { opacity: 0.3; cursor: default; }

/* The track starts at the page's left margin and runs off the right edge. */
.sales {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0 var(--s-gutter);
  padding-left: max(var(--s-gutter), calc((100% - 1240px) / 2));
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--s-gutter), calc((100% - 1240px) / 2));
  scrollbar-width: none;
}
.sales::-webkit-scrollbar { display: none; }
.sale {
  flex: 0 0 clamp(260px, 26vw, 360px);
  scroll-snap-align: start;
}
.sale__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.sale__media { position: relative; display: block; overflow: hidden; background: var(--c-ink); }
.sale__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.sale__link:hover .sale__media img { transform: scale(1.05); }
.sale__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.6rem;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sale__body { display: block; padding: 1.1rem 0 0; }
.sale__addr { display: block; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.25; color: var(--c-ink); }
.sale__town { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--c-muted); }
.sale__spec { display: block; margin-top: 0.7rem; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--c-ink-soft); white-space: pre; }
.sale__price { display: block; margin-top: 0.5rem; font-family: var(--f-display); font-size: 1.2rem; color: var(--c-ink); }
.sale__meta { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--c-muted); }
.sale__link:hover .sale__addr { text-decoration: underline; text-underline-offset: 0.15em; }
.sold .source-note { margin-top: 2.25rem; }

/* --- In their clients' words ---------------------------------------------- */

.said { padding: var(--s-section) 0; border-top: 1px solid var(--c-line); overflow: hidden; }
.said__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.said__nav { display: flex; align-items: center; gap: 0.6rem; }
.said__summary {
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 300;
}
.said__summary strong { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; color: var(--c-ink); }
.said__stars { display: inline-flex; gap: 2px; font-size: 0.95rem; line-height: 1; color: var(--c-line); }
.said__stars .is-on { color: var(--c-accent); }
/* A track like the sold homes: starts at the page's left margin, runs off
   the right edge, one card per arrow press. */
.said__list {
  margin-top: 2.75rem;
  padding: 0 var(--s-gutter);
  padding-left: max(var(--s-gutter), calc((100% - 1240px) / 2));
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--s-gutter), calc((100% - 1240px) / 2));
  scrollbar-width: none;
}
.said__list::-webkit-scrollbar { display: none; }
.said__one {
  flex: 0 0 clamp(300px, 30vw, 400px);
  scroll-snap-align: start;
  margin: 0;
  padding: 1.75rem 1.75rem 1.6rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.said__one blockquote { margin: 0.9rem 0 0; }
.said__one blockquote p {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--c-ink);
}
.said__one.is-clamped blockquote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
}
.said__more {
  margin-top: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  cursor: pointer;
}
.said__by { margin-top: 1.1rem; font-size: 0.82rem; color: var(--c-ink); }
.said__by span { display: block; margin-top: 0.2rem; font-size: 0.74rem; color: var(--c-muted); }
.said__source { margin-top: 2rem; font-size: 0.8rem; line-height: 1.6; color: var(--c-muted); }
.said__source a { color: inherit; }

/* --- The towns ------------------------------------------------------------- */

.towns { background: var(--c-paper-alt); padding: var(--s-section) 0; }
.towns__top { text-align: center; }
.towns__top .h2 { margin-inline: auto; max-width: 24ch; }

/* The first town, where the office is, takes the full height on the left;
   the two they live in stack on the right. */
.tiles {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-auto-rows: minmax(300px, 1fr);
  gap: 1.25rem;
}
.tile:first-child { grid-row: span 2; }
.tile {
  position: relative;
  display: block;
  min-height: 300px;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-white);
  text-decoration: none;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.tile:hover img { transform: scale(1.04); }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, 0.05) 30%, rgba(20, 22, 26, 0.78) 100%);
}
.tile__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
}
.tile__name {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1;
}
.tile:first-child .tile__name { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.tile__line { margin-top: 0.8rem; font-size: 0.92rem; line-height: 1.55; font-weight: 300; max-width: 42ch; color: rgba(255, 255, 255, 0.95); }
.tile__now { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.tile__go {
  margin-top: 1.1rem;
  align-self: flex-start;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  padding-bottom: 0.25rem;
}
.tile__credit { margin-top: 1rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.6); }

/* --- Questions they get asked ---------------------------------------------- */

.asked { padding: var(--s-section) 0; }
.asked__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.asked__sticky { position: sticky; top: 7rem; }
.asked__lede { margin-top: 1.25rem; font-size: 0.98rem; line-height: 1.7; font-weight: 300; max-width: 38ch; }
.asked__who {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.asked__who li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; letter-spacing: 0.04em; }
.asked__who img { width: 56px; height: 75px; object-fit: cover; object-position: 50% 15%; display: block; }
.asked__list .ask { padding: 2rem 0; border-top: 1px solid var(--c-line); }
.asked__list .ask:last-child { border-bottom: 1px solid var(--c-line); }
.ask__a { margin-top: 1rem; font-size: 0.98rem; line-height: 1.75; font-weight: 300; max-width: 62ch; }
.ask__who {
  margin-top: 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ghost);
}

/* --- What is your house worth ---------------------------------------------- */

.worth {
  position: relative;
  padding: calc(var(--s-section) * 1.5) 0;
  color: var(--c-white);
  background: var(--c-ink);
  text-align: center;
  overflow: hidden;
}
.worth__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.worth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 26, 0.6);
}
.worth__inner { position: relative; z-index: 1; max-width: 680px; }
.worth__inner .h2 { margin-inline: auto; }
.worth__lede { margin-top: 1.25rem; font-size: 1rem; line-height: 1.7; font-weight: 300; color: rgba(255, 255, 255, 0.9); }
.worth__form {
  margin: 2rem auto 0;
  max-width: 520px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
}
.worth__form [data-suggest-wrap] { position: relative; display: block; flex: 1 1 auto; min-width: 0; text-align: left; }
.worth__form input {
  width: 100%;
  border: 0;
  padding: 0.75rem 0;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--c-white);
  background: transparent;
}
.worth__form input::placeholder { color: rgba(255, 255, 255, 0.75); }
.worth__form input:focus { outline: none; }
.worth__form .btn-fill { align-self: center; padding: 0.7rem 1.4rem; }
.worth .sug { color: var(--c-ink); }
.worth__fine { margin-top: 1.1rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); }

/* --- Motion off ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .opening__photo, .opening__inner > *, .opening__cue span { animation: none; }
  .run__track { animation: none; width: auto; }
  .run__list:last-child { display: none; }
  .run__list { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.6rem; justify-content: center; padding: 0 var(--s-gutter); }
  .run { mask-image: none; -webkit-mask-image: none; }
  .meet__one img, .sale__media img, .tile img { transition: none; }
  .meet__one a:hover img, .sale__link:hover .sale__media img, .tile:hover img { transform: none; }
}

/* --- Narrow screens -------------------------------------------------------- */

@media (max-width: 1000px) {
  .numbers__row { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .asked__grid { grid-template-columns: 1fr; }
  .asked__sticky { position: static; }
}

@media (max-width: 820px) {
  .tiles { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile:first-child { grid-row: auto; }
  .tile { min-height: 0; aspect-ratio: 4 / 3; }
  .meet__grid { grid-template-columns: 1fr; }
  .meet__one:nth-child(2) { margin-top: 3rem; }
}

@media (max-width: 600px) {
  .opening__inner { padding: calc(var(--tp-header-h, 222px) + 1rem) 0 4rem; }
  .opening__head { font-size: 2.5rem; }
  .opening__cue { display: none; }
  /* On a phone the search is the one action in the opening; the two
     outlined buttons come off (John, 15 October 2026). The valuation ask
     has its own section further down and the menu. */
  .opening__choices { display: none; }
  .opening__search { margin-top: 2.25rem; }
  .numbers__row dd { font-size: 2.4rem; }
  .sale { flex-basis: 78vw; }
  .said__one { flex-basis: 82vw; }
  .sold__nav .btn-line { display: none; }
}

/* ==========================================================================
   About page (about.php), on the same pieces as the home page.
   ========================================================================== */

/* A shorter opening than the home page's full screen. */
.opening--short { min-height: clamp(420px, 62svh, 640px); }
.opening--short .opening__inner { padding: calc(var(--tp-header-h, 201px) + 1.5rem) 0 4rem; }

.story { padding: var(--s-section) 0 calc(var(--s-section) * 0.6); }
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.story__side .h2--big { max-width: 16ch; }
.story__text p { font-size: 1.05rem; line-height: 1.8; font-weight: 300; max-width: 60ch; }
.story__text p + p { margin-top: 1.25rem; }

.one { padding: calc(var(--s-section) * 0.6) 0; }
.one__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.one--flip .one__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.one--flip .one__photo { order: 2; }
.one__photo { margin: 0; overflow: hidden; background: var(--c-ink); }
.one__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.one__text p { font-size: 1rem; line-height: 1.75; font-weight: 300; max-width: 54ch; }
.one__before { margin-top: 1.5rem; font-family: var(--f-display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--c-ink); }
.one__facts {
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem 1.5rem;
  border-top: 1px solid var(--c-line);
  padding-top: 1.5rem;
}
.one__facts div { display: flex; flex-direction: column-reverse; }
.one__facts dd { margin: 0; font-family: var(--f-display); font-size: 1.1rem; color: var(--c-ink); }
.one__facts dt { margin-top: 0.3rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted); }
.one__reach { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: 0.8rem; letter-spacing: 0.04em; }
.one__reach a { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); padding-bottom: 0.2rem; }
.one__reach a:hover { border-bottom-color: var(--c-ink); }

.how { background: var(--c-paper-alt); padding: var(--s-section) 0; }
.how__top { text-align: center; }
.how__top .h2 { margin-inline: auto; max-width: 24ch; }
.how__grid {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.how__one { padding: 2rem; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.how__one p { margin-top: 0.9rem; font-size: 0.98rem; line-height: 1.75; font-weight: 300; max-width: 52ch; }

.start { padding: var(--s-section) 0; text-align: center; }
.start .h2 { margin-inline: auto; }
.start__lede { margin: 1.25rem auto 0; max-width: 56ch; font-size: 1rem; line-height: 1.75; font-weight: 300; }
.start__actions { margin-top: 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 1000px) {
  .story__grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .one__grid, .one--flip .one__grid { grid-template-columns: 1fr; }
  .one--flip .one__photo { order: 0; }
  .one__photo { max-width: 360px; }
  .how__grid { grid-template-columns: 1fr; }
}

/* The link line under the town tiles to the town seller pages (9 November 2026). */
.towns__selling { text-align: center; max-width: 44rem; margin: 2.5rem auto 0; font-size: 1.05rem; line-height: 1.6; }
.towns__selling a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.towns__selling a:hover { color: var(--c-accent-deep); }