/* ==========================================================================
   Evelyn Way Neighbourhood: live home page header, banner and footer
   (owner's request, 20 Oct 2026)

   The header and footer rules (body.hf) apply to every page that uses the
   public layout; the banner and section rules (body.hh) to the home page
   only.

   The banner, header and footer from the preview design, for the live home
   page only (body class "hh", set in views/public/landing.php and loaded by
   layouts/public.php). Built from theme.css and home.css; the sections below
   the banner keep the site's usual look from main.css.
   ========================================================================== */

/* One green in the header and footer, as in the preview */
body.hf .site-header,
body.hf .site-footer {
  --green-dark: #2E4A3B;
}

/* Banner text sizes, as in the preview */
body.hh .hp-hero {
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* ---------- From theme.css: header and footer ---------- */

body.hh,

body.hf {
  --accent: #8A5A00;
  --accent-tint: #FBEFD9;
  --green-tint: #E3EEE8;
  --cream: #F7F3EA;
  --field-edge: rgba(91, 102, 97, 0.75);
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 24px;
  --shadow-1: 0 1px 2px rgba(30, 36, 34, 0.05), 0 2px 8px rgba(30, 36, 34, 0.05);
  --shadow-2: 0 2px 4px rgba(30, 36, 34, 0.04), 0 10px 28px rgba(30, 36, 34, 0.08);
  --shadow-3: 0 4px 10px rgba(30, 36, 34, 0.05), 0 22px 48px rgba(30, 36, 34, 0.11);
  --section-y: 56px;
  --space-5: 40px;
  --houses: url("/assets/images/site/skyline-front.svg?v=2");
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 720px) {
  body.hh,
  body.hf {
    --section-y: 72px;
  }
}
@media (min-width: 1100px) {
  body.hh,
  body.hf {
    --section-y: 88px;
  }
}
body.hf .site-header .btn {
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}
body.hf .site-header .btn:active {
  transform: translateY(0);
}
body.hf .site-header {
  transition: box-shadow 0.25s ease;
}
body.hf .site-header.is-scrolled {
  box-shadow: 0 2px 6px rgba(30, 36, 34, 0.12), 0 10px 30px rgba(30, 36, 34, 0.14);
}
body.hf .site-header__inner {
  padding-top: 10px;
  padding-bottom: 10px;
}
body.hf .site-header__brand img {
  height: 64px;
}
body.hf .site-header .btn--pill {
  background: var(--accent-tint);
  border-color: var(--accent-tint);
  color: var(--green-dark);
}
body.hf .site-header .btn--pill:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--green-dark);
}
@media (min-width: 960px) {
  body.hf .site-header__inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body.hf .site-header__brand img {
    height: 84px;
  }
  body.hf .site-nav ul {
    gap: 4px;
    padding: 4px;
    background: rgba(239, 233, 221, 0.06);
    border-radius: 999px;
  }
  body.hf .site-nav a {
    padding: 0 20px;
    border-radius: 999px;
    transition: background-color 0.2s ease;
  }
  body.hf .site-nav a:hover {
    background: rgba(239, 233, 221, 0.1);
    text-decoration: none;
  }
  body.hf .site-nav a[aria-current="page"] {
    background: rgba(239, 233, 221, 0.16);
  }
  body.hf .site-header__account {
    gap: 8px;
  }
}
@media (max-width: 959px) {
  body.hf .site-menu {
    padding-top: 96px;
  }
  body.hf .site-nav li + li {
    border-top-color: rgba(239, 233, 221, 0.14);
  }
  body.hf .site-nav a {
    font-family: var(--font-heading);
    font-size: 1.375rem;
  }
  body.hf .menu-toggle {
    border-width: 1.5px;
  }
}
body.hf .menu-toggle:hover,
body.hf .site-header .btn--outline-light:hover,
body.hf .account-menu[open] .account-menu__button {
  background: rgba(239, 233, 221, 0.12);
}
body.hf .site-menu,
body.hf .site-nav li + li,
body.hf .member-menu__list li + li {
  border-top-color: rgba(239, 233, 221, 0.14);
}
body.hf .site-footer__body {
  padding: var(--space-8) 0 var(--space-4);
}
body.hf .site-footer__help {
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: rgba(239, 233, 221, 0.06);
  border-color: rgba(239, 233, 221, 0.18);
  border-radius: var(--radius-m);
}
body.hf .site-footer__call {
  padding: 4px 8px;
  margin-left: -8px;
  margin-right: -8px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}
body.hf .site-footer__call:hover {
  background: rgba(239, 233, 221, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  body.hf .site-header .btn,
  body.hf .site-header {
    transition: none;
  }
}

/* ---------- From home.css: header, banner and footer ---------- */

body.hh,

body.hf {
  --hp-green: #2E4A3B;
  --hp-cream: #F5EFE1;
  --hp-paper: #FBF8F0;
  --hp-stone: #E8E0CC;
  --hp-ink: #16221B;
  --hp-muted: #4A5950;
  --hp-sage: #D9E4D3;
  --hp-yellow: #F2C14E;
  --hp-coral: #E06C4C;
  --hp-sky: #86B4C6;
  --hp-line: #DCD5C4;
  --hp-display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}
body.hh main {
  overflow-x: clip;
}
body.hh .hp-hero p {
  margin: 0;
}
body.hh main h1 {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--hp-green);
}
body.hf .site-header .wrap,
body.hf .site-footer .wrap,
.hp-wrap {
  --hp-pad: clamp(20px, 3vw, 48px);
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hp-pad);
  padding-right: var(--hp-pad);
}
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1.08rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.hp-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}
.hp-btn:hover svg {
  transform: translateX(3px);
}
.hp-btn--green {
  background: var(--hp-green);
  color: var(--hp-cream);
}
.hp-btn--green:hover {
  color: var(--hp-cream);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(22, 34, 27, 0.6);
}
.hp-btn--line {
  border-color: currentColor;
}
.hp-plate {
  display: inline-block;
  padding: 0.42em 0.6em 0.38em;
  background: #FFFFFF;
  border-radius: 0.22em;
  box-shadow: inset 0 0 0 0.1em #FFFFFF, inset 0 0 0 0.17em #111111, 0 0.12em 0 rgba(0, 0, 0, 0.25);
  color: #111111;
  font: 700 0.56em/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.32em;
  white-space: nowrap;
}
.hp-line {
  display: block;
}
.hp-plate--l {
  transform: rotate(-2.5deg);
}
.hp-plate--r {
  transform: rotate(2deg);
}
body.hf .site-header {
  border-bottom: 1px solid rgba(245, 239, 225, 0.08);
}
body.hf .site-header .btn--pill {
  background: var(--hp-yellow);
  border-color: var(--hp-yellow);
  color: var(--hp-ink);
}
body.hf .site-header .btn--pill:hover {
  background: #F7CF6C;
  border-color: #F7CF6C;
  color: var(--hp-ink);
  transform: translateY(-2px);
}
body.hf .site-header :focus-visible,
body.hh .hp-hero :focus-visible,
body.hf .site-footer :focus-visible {
  outline-color: var(--hp-yellow);
}
body.hf .site-header__brand img {
  height: 76px;
}
@media (min-width: 960px) {
  body.hf .site-header__brand img {
    height: 100px;
  }
}
.hp-hero {
  position: relative;
  background: var(--hp-green);
  color: var(--hp-cream);
}
.hp-hero .hp-wrap {
  position: relative;
  padding-top: clamp(48px, 6vw, 84px);
}
.hp-hero__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
body.hh .hp-hero__title {
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  line-height: 1.12;
  color: var(--hp-cream);
}
.hp-hero__lede {
  padding: 0 0 10px 18px;
  border-left: 2px solid var(--hp-yellow);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--hp-cream);
}
.hp-showcase {
  position: relative;
  z-index: 1;
  margin: -9% 0 -10%;
}
.hp-showcase img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 901px) and (max-width: 1023px) {
  .hp-showcase {
    width: 114%;
    max-width: none;
    margin-left: calc(100% - 114% + (100vw - 100%) / 2);
    margin-right: calc((100% - 100vw) / 2);
  }
  .hp-showcase img {

  }
}
@media (min-width: 1024px) {
  .hp-hero .hp-wrap {
    --hp-left: clamp(48px, 3.4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    max-width: none;
    padding: 24px 0 0 var(--hp-left);
    position: static;
  }
  .hp-hero__top {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding-top: clamp(32px, 4vw, 72px);
  }
  body.hh .hp-hero__title {
    font-size: clamp(3.5rem, 5.4vw, 5.5rem);
    line-height: 1.1;
  }
  .hp-join {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    display: grid;
    gap: 16px;
    width: fit-content;
    max-width: calc(100% - var(--hp-left));
    margin: 24px 0 56px;
  }
  .hp-join .hp-joinbar {
    width: fit-content;
    max-width: 100%;
  }
  .hp-joinbar .hp-joinbar__fields {
    grid-template-columns: auto minmax(200px, 320px) 130px;
  }
  .hp-joinbar__title {
    white-space: nowrap;
  }
  .hp-hero {
    min-height: calc(100vw / 1.864);
  }
  .hp-showcase {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .hp-showcase img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 900px) {
  .hp-hero__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .hp-showcase {
    margin-top: 0;
  }
}
.hp-joinbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-top: calc(10% - 56px);
  padding: 14px 14px 14px 22px;
  background: #FFFFFF;
  border: 1px solid var(--hp-line);
  border-radius: 28px;
  box-shadow: 0 2px 0 rgba(22, 34, 27, 0.04), 0 40px 70px -36px rgba(22, 34, 27, 0.55);
}
.hp-joinbar__fields {
  display: grid;
  grid-template-columns: auto minmax(200px, 1.5fr) minmax(130px, 0.55fr);
  gap: 14px;
  align-items: end;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.hp-joinbar__title {
  float: left;
  align-self: center;
  margin: 0;
  padding: 0 10px 0 0;
  border-right: 1.5px solid var(--hp-line);
  font: 800 1.5rem/1.1 var(--hp-display);
  letter-spacing: -0.02em;
  color: var(--hp-green);
  white-space: nowrap;
}
.hp-field {
  min-width: 0;
}
.hp-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hp-muted);
}
.hp-field select,
.hp-field input {
  width: 100%;
  min-height: 60px;
  padding: 0 14px;
  background-color: #FFFFFF;
  border: 2px solid var(--hp-stone);
  border-radius: 14px;
  color: var(--hp-ink);
  font: 700 1.125rem var(--font-body);
}
.hp-field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232E4A3B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.hp-field--house input {
  font-size: 1.25rem;
  text-align: center;
}
.hp-field select:hover,
.hp-field input:hover {
  border-color: var(--hp-green);
}
.hp-field select:focus,
.hp-field input:focus {
  outline: 3px solid var(--hp-yellow);
  outline-offset: 1px;
  border-color: var(--hp-green);
}
.hp-joinbar .hp-btn {
  min-height: 60px;
  padding: 0 30px;
  font-size: 1.1rem;
  white-space: nowrap;
}
.hp-joinbar--member {
  align-items: center;
  padding: 22px 22px 22px 30px;
}
.hp-joinbar__welcome {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--hp-green);
}
@media (max-width: 1023px) {
  .hp-joinbar {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }
  .hp-joinbar__fields {
    grid-template-columns: minmax(0, 1fr) 160px;
  }
  .hp-joinbar__title {
    grid-column: 1 / -1;
    border-right: 0;
    padding-right: 0;
  }
}
@media (max-width: 560px) {
  .hp-joinbar__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .hp-joinbar__title {
    white-space: normal;
  }
}
.hp-join {
  position: relative;
  z-index: 3;
  margin-top: 24px;
}
.hp-join .hp-joinbar {
  margin-top: 0;
}
.hp-showcase {
  margin-bottom: 0;
}
@media (max-width: 1023px) {
  .hp-join {
    margin-bottom: 8px;
  }
  .hp-showcase {
    margin-top: 16px;
  }
}
body.hf .site-footer {
  overflow: hidden;
}
body.hf .site-footer__body {
  padding: 72px 0 0;
}
body.hf .site-footer__links-title,
body.hf .site-footer__help-title {
  margin: 0 0 14px;
  font: 700 16px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-yellow);
}
body.hf .site-footer__help {
  padding: 24px;
  background: rgba(245, 239, 225, 0.06);
  border: 0;
  border-radius: 24px;
}
body.hf .site-footer__num {
  font-family: var(--hp-display);
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.03em;
}
body.hf .site-footer__bottom {
  margin-top: 56px;
  padding: 22px 0;
  border-top: 1px solid rgba(245, 239, 225, 0.12);
  border-bottom: 0;
}
.hp-giant {
  margin: 30px 0 -0.08em;
  font: 800 clamp(4rem, 17vw, 15rem)/0.8 var(--hp-display);
  letter-spacing: -0.06em;
  color: rgba(245, 239, 225, 0.08);
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 420px) {
  .hp-plate {
    font-size: 0.46em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-btn,
  .hp-btn svg {
    transition: none;
    animation: none;
  }
  .hp-btn--green:hover,
  body.hf .site-header .btn--pill:hover {
    transform: none;
  }
}
.hp-plate {
  box-shadow: inset 0 0 0 0.1em #FFFFFF, inset 0 0 0 0.17em var(--hp-green), 0 0.12em 0 rgba(0, 0, 0, 0.25);
  color: var(--hp-green);
}
.hp-plate--l {
  position: relative;
}
.hp-plate--l::after {
  content: "";
  position: absolute;
  left: calc(100% + 0.4em);
  top: 0.1em;
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23F2C14E' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 22 16 8'/%3E%3Cpath d='M14 32 30 26'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.hp-join .hp-joinbar {
  background: var(--hp-paper);
  border: 0;
  padding: 22px 26px;
}
.hp-join .hp-field {
  display: contents;
}
.hp-joinbar .hp-joinbar__title,
.hp-join .hp-field--house label {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font: 400 1.125rem/1.3 var(--font-body);
  letter-spacing: 0;
  color: var(--hp-ink);
  white-space: nowrap;
}
.hp-join .hp-field select,
.hp-join .hp-field input {
  min-height: 56px;
  background-color: #FFFFFF;
  border: 1.5px solid var(--hp-stone);
  font-weight: 400;
  font-size: 1.0625rem;
}
.hp-join .hp-field--house input {
  font-size: 1.0625rem;
  text-align: left;
}
.hp-join .hp-field input::placeholder {
  color: #6B746F;
  opacity: 1;
}
.hp-join .hp-joinbar__fields {
  grid-template-columns: minmax(0, 1fr) 150px;
  row-gap: 0;
}
@media (min-width: 481px) {
  .hp-joinbar .hp-joinbar__title {
    grid-column: 1; grid-row: 1;
  }
  .hp-join .hp-field--house label {
    grid-column: 2; grid-row: 1;
  }
  .hp-join #hero-street {
    grid-column: 1; grid-row: 2;
  }
  .hp-join #hero-house {
    grid-column: 2; grid-row: 2;
  }
}
@media (max-width: 480px) {
  .hp-join .hp-joinbar__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .hp-join .hp-field--house label {
    margin-top: 12px;
  }
}
.hp-join .hp-btn {
  min-height: 56px;
}
@media (min-width: 1024px) {
  .hp-hero .hp-wrap {
    --hp-left: clamp(48px, 6vw, 128px);
  }
  .hp-hero__top {
    padding-top: clamp(40px, 6vw, 120px);
  }
  body.hh .hp-hero__title {
    font-size: clamp(3.5rem, 5.6vw, 6.25rem);
  }
  .hp-join .hp-joinbar {
    grid-template-columns: auto auto;
    align-items: end;
    gap: 20px;
  }
  .hp-join .hp-joinbar__fields {
    grid-template-columns: minmax(220px, 340px) 160px;
    column-gap: 20px;
  }
}
@media (min-width: 1024px) {
  .hp-hero .hp-wrap {
    --hp-left: 0px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px var(--hp-pad) 0;
  }
}
@media (min-width: 1024px) {
  .hp-hero {
    min-height: calc(80vw / 1.864);
  }
  .hp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.07;
    pointer-events: none;
    background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--hp-cream) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--hp-cream) 47px 48px);
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 40%, #000 75%);
  }
  .hp-showcase {
    left: auto;
    right: 0;
    z-index: 1;
    width: 80%;
  }
  .hp-showcase img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%);
  }
}
.hp-join {
  margin-top: 48px;
}
.hp-join .hp-joinbar {
  padding: 14px 20px 16px;
  border-radius: 22px;
}
.hp-joinbar .hp-joinbar__title,
.hp-join .hp-field--house label {
  margin-bottom: 4px;
  font-size: 1rem;
}
.hp-join .hp-field select,
.hp-join .hp-field input,
.hp-join .hp-btn {
  min-height: 48px;
}
.hp-join .hp-field select,
.hp-join .hp-field input {
  border-radius: 12px;
}
@media (min-width: 1024px) {
  .hp-hero {
    min-height: calc(100vw / 2.364);
  }
  .hp-hero::before {
    content: none;
  }
  .hp-showcase {
    left: 0;
    right: 0;
    width: 100%;
  }
  .hp-showcase img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (min-width: 1024px) {
  .hp-hero {
    background: #143A2D;
  }
}
.hp-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2E4A3B;
  mix-blend-mode: lighten;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .hp-hero {
    background: #2E4A3B;
  }
}
.hp-showcase::after {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 58%);
}
.hp-showcase::after {
  -webkit-mask-image: linear-gradient(110deg, #000 0%, #000 54%, transparent 64%);
  mask-image: linear-gradient(110deg, #000 0%, #000 54%, transparent 64%);
}
body.hh .hp-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
body.hh,
body.hf {
  --hp-display: var(--font-heading);
}
body.hh main h1,
.hp-joinbar__title,
.hp-giant,
body.hf .site-footer__num {
  font-weight: 600;
}
body.hh main h1 {
  letter-spacing: -0.015em;
  line-height: 1.08;
}
.hp-giant {
  letter-spacing: -0.03em;
}
.hp-plate {
  font-size: 0.45em;
}
@media (max-width: 420px) {
  .hp-plate {
    font-size: 0.37em;
  }
}
.hp-plate--l::after {
  content: none;
}
body.hh .hp-hero__title {
  line-height: 1;
}
.hp-hero__title .hp-line {
  margin-top: 0.06em;
}
.hp-showcase::after,
.hp-hero::before {
  content: none;
}
.hp-showcase img {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (min-width: 1024px) {
  .hp-hero {
    min-height: calc(100vw / 1.8315);
  }
}
@media (min-width: 1024px) {
  .hp-hero {
    min-height: calc(80vw / 1.8315);
    background: #294638;
  }
  .hp-showcase {
    left: auto;
    right: 0;
    width: 80%;
  }
  .hp-showcase img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
  }
}
@media (min-width: 1024px) {
  .hp-hero {
    min-height: calc(100vw / 2.2936);
    background: #2E4A3B;
  }
  .hp-showcase {
    left: 0;
    right: 0;
    width: 100%;
  }
  .hp-showcase img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
body.hf .site-header .btn--pill {
  background: var(--hp-cream);
  border-color: var(--hp-cream);
  color: var(--hp-green);
}
body.hf .site-header .btn--pill:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--hp-green);
}
@media (min-width: 1024px) and (max-width: 1599px) {
  .hp-join {
    margin-top: 36px;
  }
  .hp-join .hp-joinbar {
    gap: 14px;
    padding: 12px 16px 14px;
    border-radius: 18px;
  }
  .hp-join .hp-joinbar__fields {
    grid-template-columns: minmax(200px, 260px) 120px;
    column-gap: 12px;
  }
  .hp-joinbar .hp-joinbar__title,
  .hp-join .hp-field--house label {
    margin-bottom: 4px;
    font-size: 1rem;
  }
  .hp-join .hp-field select,
  .hp-join .hp-field input {
    min-height: 48px;
    padding-left: 12px;
    font-size: 1rem;
  }
  .hp-join .hp-field select {
    padding-right: 38px;
    background-position: right 12px center;
  }
  .hp-join .hp-btn {
    min-height: 48px;
    padding: 0 20px;
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .hp-showcase {
    width: auto;
    max-width: none;
    margin-left: calc(-1 * var(--hp-pad));
    margin-right: calc(-1 * var(--hp-pad));
  }
  .hp-showcase picture,
  .hp-showcase img {
    display: block;
    width: 100%;
    height: auto;
  }
}
body.hf .site-footer__links-title,
body.hf .site-footer__help-title {
  color: rgba(245, 239, 225, 0.75);
}

/* Phones only (under 768px, owner's request): headline, then the house
   picture edge to edge, then the join card underneath */
@media (max-width: 767px) {
  .hp-hero .hp-wrap {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
  }

  .hp-hero__top {
    order: 1;
  }

  .hp-showcase {
    order: 2;
    margin-top: 12px;
    margin-bottom: 0;
  }

  .hp-join {
    order: 3;
    margin-top: 28px;
    margin-bottom: 0;
  }
}

/* Join card in the same style as the header's menu box (owner's request):
   a soft cream wash on the green, fully rounded, no shadow. Labels in
   cream; the button cream with green text, like the header's Join button,
   so it still stands out. The boxes stay white for easy reading. */
.hp-join .hp-joinbar {
  background: rgba(239, 233, 221, 0.08); /* as the header menu box */
  border: 0;
  border-radius: 40px;
  box-shadow: none;
}

.hp-joinbar .hp-joinbar__title,
.hp-join .hp-field--house label,
.hp-joinbar__welcome {
  color: #F5EFE1;
}

.hp-join .hp-btn--green {
  background: #F5EFE1;
  color: #2E4A3B;
}

.hp-join .hp-btn--green:hover {
  background: #FFFFFF;
  color: #2E4A3B;
}

.hp-join .hp-field select,
.hp-join .hp-field input {
  border-color: transparent;
}

.hp-join :focus-visible,
.hp-join .hp-field select:focus,
.hp-join .hp-field input:focus {
  outline-color: #F2C14E;
}

/* Phones: the card is taller (stacked), so slightly less rounded */
@media (max-width: 767px) {
  .hp-join .hp-joinbar {
    border-radius: 28px;
  }
}

/* Join card corners: 16px (owner's request), on every screen size */
.hp-join .hp-joinbar {
  border-radius: 16px;
}

@media (max-width: 767px) {
  .hp-join .hp-joinbar {
    border-radius: 16px;
  }
}

/* A stroke round the street and house number boxes (owner's request);
   the button keeps none */
.hp-join .hp-field select,
.hp-join .hp-field input {
  border: 2px solid #E8E0CC;
}

.hp-join .hp-field select:hover,
.hp-join .hp-field input:hover {
  border-color: #C9BFA6;
}

.hp-join .hp-field select:focus,
.hp-join .hp-field input:focus {
  border-color: #2E4A3B;
}

/* Street and house number boxes: no white fill, only the stroke (owner's
   request). Text, hint and arrow in cream so they read on the green; the
   drop-down list itself stays dark text on white, so it's always readable. */
.hp-join .hp-field select,
.hp-join .hp-field input {
  background-color: transparent;
  color: #F5EFE1;
}

.hp-join .hp-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F5EFE1' stroke-width='2'/%3E%3C/svg%3E");
}

.hp-join .hp-field select option {
  background: #FFFFFF;
  color: #16221B;
}

.hp-join .hp-field input::placeholder {
  color: rgba(245, 239, 225, 0.75);
}

.hp-join .hp-field select:hover,
.hp-join .hp-field input:hover {
  border-color: #F5EFE1;
}

.hp-join .hp-field select:focus,
.hp-join .hp-field input:focus {
  border-color: #F5EFE1;
}

/* Footer's giant "Evelyn Way": show the whole name, including the tails of
   the "y"s, instead of cutting it off at the bottom (owner's request) */
.hp-giant {
  margin: 24px 0 0;
  padding-bottom: 0.12em;
  line-height: 1.05;
}


/* ---------- "The sort of thing you'll see" (live home page, owner's
   request): the first-version feed cards (house avatars, gold tags, a
   clock by "Posted by", a gentle stagger) on a soft cream band instead of
   green, so the white cards stand out ---------- */

body.hh section[aria-labelledby="examples"] {
  background: #F7F3EA; /* the site's lighter cream */
}

body.hh .example-grid {
  gap: var(--space-2);
  margin-top: var(--space-5);
}

body.hh .example {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 14px;
  align-items: center;
  padding: var(--space-3);
  background: var(--white);
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 18px 40px rgba(0, 0, 0, 0.16);
  color: var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

body.hh .example:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 26px 50px rgba(0, 0, 0, 0.2);
}

/* Round "avatar" with a little house in it (decoration only) */
body.hh .example::before {
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    var(--green-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4A3B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-6 8 6'/%3E%3Cpath d='M6 9.5V19h12V9.5'/%3E%3Cpath d='M10 19v-5h4v5'/%3E%3C/svg%3E")
    center / 26px no-repeat;
}

/* The admins' post gets a green avatar */
body.hh .example:has(.tag--admin)::before {
  background:
    var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFE9DD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-6 8 6'/%3E%3Cpath d='M6 9.5V19h12V9.5'/%3E%3Cpath d='M10 19v-5h4v5'/%3E%3C/svg%3E")
    center / 26px no-repeat;
}

body.hh .example .tag {
  grid-row: 1;
  grid-column: 2;
  justify-self: start;
  padding: 4px 14px;
}

body.hh .example .tag:not(.tag--admin) {
  background: var(--accent-tint);
  color: var(--accent);
}

body.hh .example__text {
  grid-column: 1 / -1;
  align-self: start;
  margin: var(--space-3) 0;
  font-size: 1.1875rem;
  line-height: 1.55;
}

/* "Posted by" at the foot, with a small clock, like a post's time line */
body.hh .example__by {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

body.hh .example__by::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 1100px) {
  body.hh .example-grid {
    gap: var(--space-3);
  }

  /* A gentle stagger, like notes pinned at slightly different heights */
  body.hh .example:nth-child(even) {
    margin-top: var(--space-5);
  }

  body.hh .example:nth-child(odd) {
    margin-bottom: var(--space-5);
  }
}

/* On cream, a softer shadow than on the green */
body.hh .example {
  box-shadow: 0 1px 3px rgba(30, 36, 34, 0.06), 0 12px 32px rgba(30, 36, 34, 0.09);
}

body.hh .example:hover {
  box-shadow: 0 2px 6px rgba(30, 36, 34, 0.08), 0 20px 44px rgba(30, 36, 34, 0.13);
}

@media (prefers-reduced-motion: reduce) {
  body.hh .example {
    transition: none;
  }

  body.hh .example:hover {
    transform: none;
  }
}


/* ---------- "How joining works" (live home page, owner's request): the
   first-version design: big green numbered circles joined by a dashed
   gold line, bold step titles and dark text. Also used by "What you can
   do here" for logged-in residents. ---------- */

body.hh .how-steps {
  position: relative;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

body.hh .how-steps li {
  position: relative;
  padding-left: 88px;
  min-height: 64px;
}

body.hh .how-steps li::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin: 0;
  font-size: 1.625rem;
  background: var(--green);
  color: var(--paper);
  box-shadow: 0 0 0 8px #FDF9F2, var(--shadow-2);
}

/* The path: down between markers on phones, across from 720px */
body.hh .how-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 72px;
  bottom: calc(-1 * var(--space-5) - 8px);
  border-left: 2.5px dashed var(--accent);
}

body.hh .how-steps h3 {
  margin-bottom: 6px;
  padding-top: 4px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
}

body.hh .how-steps p {
  color: var(--ink);
}

@media (min-width: 720px) {
  body.hh .how-steps {
    gap: var(--space-5);
  }

  body.hh .how-steps li {
    padding: 96px 0 0;
  }

  body.hh .how-steps li:not(:last-child)::after {
    left: 80px;
    right: calc(-1 * var(--space-5) + 8px);
    top: 31px;
    bottom: auto;
    border-left: 0;
    border-top: 2.5px dashed var(--accent);
  }
}

/* "How joining works" (and "What you can do here"): no cream colour, a
   plain white background (owner's request); the ring round each number
   matches it */
body.hh section[aria-labelledby="how-to-join"],
body.hh section[aria-labelledby="what-you-can-do"] {
  background: #FFFFFF;
}

body.hh .how-steps li::before {
  box-shadow: 0 0 0 8px #FFFFFF, var(--shadow-2);
}

/* "A bit of local history": the site's lighter cream band, as behind the
   example cards; "Questions you might have": no cream colour, plain white,
   like "How joining works" (owner's request) */
body.hh section[aria-labelledby="history"] {
  background: #F7F3EA;
}

body.hh section[aria-labelledby="faq"] {
  background: #FFFFFF;
}

/* Thinner stroke round the street and house number boxes (owner's request) */
.hp-join .hp-field select,
.hp-join .hp-field input {
  border-width: 1px;
}

/* "How joining works" (and "What you can do here"): 80px space above and
   below, on every screen size (owner's request) */
body.hh section[aria-labelledby="how-to-join"],
body.hh section[aria-labelledby="what-you-can-do"] {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Header menu: the current page is shown by the pale pill and bold text
   only, without an underline (owner's request) */
body.hf .site-nav a[aria-current="page"] {
  text-decoration: none;
}


/* ==========================================================================
   "The sort of thing you'll see" on a phone (live home page, owner's
   request 20 Oct 2026): pale green band, the heading on the left, the four
   example posts in a tilted phone on a yellow circle. Taken from home.css
   (the preview), scoped to this section.
   ========================================================================== */

/* The heading, as in the preview: Fraunces, large */
body.hh .hp-feed h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--hp-green);
}
body.hh .hp-feed p {
  margin: 0;
}
body.hh .hp-feed h2 {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--hp-green);
}
body.hh .hp-feed h2 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
}
body.hh .hp-post--admin :focus-visible {
  outline-color: var(--hp-yellow);
}
.hp-feed.hp-section {
  padding: clamp(80px, 10vw, 140px) 0;
}
.hp-feed {
  overflow: hidden;
  background: var(--hp-sage);
}
.hp-feed__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.hp-feed__copy {
  display: grid;
  gap: 20px;
}
.hp-feed__copy p {
  max-width: 32ch;
  font-size: 1.2rem;
  color: var(--hp-muted);
}
.hp-phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px 0;
}
.hp-phone-stage::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  background: var(--hp-yellow);
  border-radius: 50%;
  opacity: 0.9;
}
.hp-phone {
  position: relative;
  width: min(400px, 100%);
  padding: 12px;
  background: var(--hp-ink);
  border-radius: 46px;
  box-shadow: 0 50px 80px -40px rgba(22, 34, 27, 0.7);
  transform: rotate(-3deg);
}
.hp-screen {
  overflow: hidden;
  background: var(--hp-paper);
  border-radius: 36px;
}
.hp-screen__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 12px;
  background: var(--hp-green);
  color: var(--hp-cream);
}
.hp-screen__top img {
  width: auto;
  height: 40px;
}
.hp-screen__bell {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  background: rgba(245, 239, 225, 0.12);
  border-radius: 50%;
}
.hp-screen__bell svg {
  width: 18px;
  height: 18px;
}
.hp-posts {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  list-style: none;
}
.hp-post {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(22, 34, 27, 0.06);
}
.hp-post__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.hp-av svg {
  width: 18px;
  height: 18px;
}
.hp-chip {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hp-post__msg {
  font-size: 18px;
  line-height: 1.45;
}
.hp-post__by {
  font-size: 16px;
  color: var(--hp-muted);
}
/* The posts read like real ones (owner's request, 22 Oct 2026): a title,
   who and when, and the comment and like counts (the admins' news has none).
   All text 16px or more. */
.hp-screen__summary {
  margin: 0;
  padding: 10px 20px;
  background: rgba(46, 74, 59, 0.08);
  color: var(--hp-green);
  font-size: 16px;
  font-weight: 700;
}
.hp-post__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.hp-post__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(22, 34, 27, 0.08);
  font-size: 16px;
  font-weight: 700;
  color: var(--hp-muted);
}
.hp-post__likes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hp-post__likes svg {
  width: 18px;
  height: 18px;
  color: #A23E22;
}
.hp-post--admin .hp-post__stats {
  border-top-color: rgba(245, 239, 225, 0.2);
  color: var(--hp-cream);
}
.hp-post--admin {
  background: var(--hp-green);
  color: var(--hp-cream);
}
.hp-post--admin .hp-post__by {
  color: var(--hp-cream);
}
.hp-post--admin .hp-av {
  background: var(--hp-yellow);
  color: var(--hp-ink);
}
.hp-av--y {
  background: #FBE7B4; color: #8A5E0F;
}
.hp-av--c {
  background: #F8D3C6; color: #A23E22;
}
.hp-av--s {
  background: #D5E7EE; color: #2D6377;
}
@media (max-width: 1000px) {
  .hp-feed__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .hp-phone {
    transform: none;
  }
}
body.hh .hp-feed h2 {
  font-weight: 600;
}
body.hh .hp-feed h2 {
  letter-spacing: -0.015em;
  line-height: 1.08;
}


/* The phone section keeps its pale green (the cards' cream band rule shares
   its label) */
body.hh section.hp-feed {
  background: var(--hp-sage);
}


/* ==========================================================================
   "What you can do" tiles after the banner (live home page, owner's
   request 20 Oct 2026): a large green "Post news" tile with chat bubbles,
   a beige "Read official updates" tile and a pale green "Know your
   neighbours" tile with little doors. Taken from home.css (the preview),
   in the owner's colours and the site's heading font.
   ========================================================================== */

/* The section: same space as the phone section, above and below */
body.hh section[aria-label="What you can do"] {
  padding: clamp(64px, 8vw, 110px) 0;
}

body.hh .hp-tile h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}
body.hh .hp-tile p {
  margin: 0;
}
body.hh .hp-tile h2 {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--hp-green);
}
body.hh .hp-tile h2 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
}
.hp-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 18px;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.hp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 30px;
}
body.hh .hp-tile h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  letter-spacing: -0.03em;
}
.hp-tile p {
  max-width: 26ch;
  font-size: 1.15rem;
}
.hp-tile--news {
  grid-column: span 7;
  grid-row: span 2;
  background: var(--hp-green);
  color: var(--hp-cream);
}
body.hh .hp-tile--news h2 {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  color: var(--hp-cream);
}
.hp-tile--updates {
  grid-column: span 5;
  background: var(--hp-yellow);
  color: var(--hp-ink);
}
body.hh .hp-tile--updates h2 {
  color: var(--hp-ink);
}
.hp-tile--neigh {
  grid-column: span 5;
  background: var(--hp-coral);
  color: var(--hp-ink);
}
body.hh .hp-tile--neigh h2 {
  color: var(--hp-ink);
}
.hp-tile__ico {
  position: absolute;
  top: 28px;
  right: 28px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}
.hp-tile__ico svg {
  width: 30px;
  height: 30px;
}
.hp-bubbles {
  position: absolute;
  top: 34px;
  left: clamp(26px, 3vw, 40px);
  right: clamp(26px, 3vw, 40px);
  display: grid;
  gap: 14px;
}
.hp-bub {
  display: grid;
  gap: 8px;
  width: 72%;
  padding: 16px 18px;
  background: rgba(245, 239, 225, 0.1);
  border-radius: 22px 22px 22px 6px;
}
.hp-bub--me {
  justify-self: end;
  width: 58%;
  background: var(--hp-yellow);
  border-radius: 22px 22px 6px 22px;
}
.hp-bub--s {
  width: 46%;
}
.hp-bub i {
  display: block;
  height: 10px;
  background: rgba(245, 239, 225, 0.35);
  border-radius: 6px;
}
.hp-bub--me i {
  background: rgba(22, 34, 27, 0.3);
}
.hp-bub i:nth-child(2) {
  width: 70%;
}
.hp-minidoors {
  position: absolute;
  top: 26px;
  right: 26px;
  display: flex;
  gap: 8px;
}
.hp-minidoors span {
  position: relative;
  width: 30px;
  height: 46px;
  background: rgba(255, 248, 238, 0.9);
  border-radius: 15px 15px 3px 3px;
}
.hp-minidoors span::after {
  content: "";
  position: absolute;
  inset: 9px 5px 0;
  background: var(--k);
  border-radius: 3px 3px 0 0;
}
.hp-minidoors span:nth-child(1) {
  --k: var(--hp-green);
}
.hp-minidoors span:nth-child(2) {
  --k: var(--hp-yellow);
}
.hp-minidoors span:nth-child(3) {
  --k: var(--hp-sky);
}
.hp-minidoors span:nth-child(4) {
  --k: var(--hp-green);
}
@media (max-width: 1000px) {
  .hp-tile--news,
  .hp-tile--updates,
  .hp-tile--neigh {
    grid-column: span 12;
  }
  .hp-tile--news {
    grid-row: auto;
    min-height: 460px;
  }
}
body.hh .hp-tile h2,
body.hh .hp-tile h2,
body.hh .hp-tile--news h2 {
  font-weight: 600;
}
body.hh .hp-tile h2,
body.hh .hp-tile h2 {
  letter-spacing: -0.015em;
  line-height: 1.08;
}

/* The owner's colours for the tiles */
.hp-tile--updates {
  background: #E8DBBC; /* warm beige */
  color: var(--hp-green);
}

body.hh .hp-tile--updates h2 {
  color: var(--hp-green);
}

.hp-tile--updates .hp-tile__ico {
  background: rgba(46, 74, 59, 0.08);
}

.hp-tile--neigh {
  background: var(--hp-sage);
  color: var(--hp-green);
}

body.hh .hp-tile--neigh h2 {
  color: var(--hp-green);
}

.hp-bub--me {
  background: #E8DBBC;
}

.hp-bub--me i {
  background: rgba(46, 74, 59, 0.3);
}

.hp-minidoors span {
  background: #FFFFFF;
}

.hp-minidoors span:nth-child(1) { --k: var(--hp-green); }
.hp-minidoors span:nth-child(2) { --k: #E8DBBC; }
.hp-minidoors span:nth-child(3) { --k: #A6C3B5; }
.hp-minidoors span:nth-child(4) { --k: #1F3529; }

.hp-tile--news p {
  color: rgba(245, 239, 225, 0.85);
}



/* ==========================================================================
   "How joining works" as three cards (live home page, owner's request
   20 Oct 2026): heading with its line on the right, white cards with big
   outlined numbers, the last card green with a beige number. Taken from
   home.css (the preview), with the site's heading font.
   ========================================================================== */

body.hh .hp-steps-sec {
  padding: clamp(64px, 8vw, 110px) 0;
}

body.hh .hp-steps-sec h2,
body.hh .hp-steps-sec h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--hp-green);
}

body.hh .hp-steps-sec h2 {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
}

body.hh .hp-steps-sec p {
  margin: 0;
}
body.hh .hp-steps-sec p {
  margin: 0;
}
body.hh .hp-steps-sec h2,
body.hh .hp-steps-sec h3 {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--hp-green);
}
body.hh .hp-steps-sec h2 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
}
body.hh .hp-steps-sec h3 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.hp-steps-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.hp-steps-top p {
  max-width: 30ch;
  font-size: 1.2rem;
  color: var(--hp-muted);
}
.hp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: hp-step;
}
.hp-steps li {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 30px;
  background: #FFFFFF;
  border: 1.5px solid var(--hp-line);
  border-radius: 30px;
  counter-increment: hp-step;
  transition: transform 0.25s, box-shadow 0.25s;
}
.hp-steps li:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -28px rgba(22, 34, 27, 0.5);
}
.hp-steps li::before {
  content: counter(hp-step);
  margin-bottom: 18px;
  font: 800 clamp(5rem, 9vw, 7.5rem)/0.85 var(--hp-display);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--hp-green);
}
.hp-steps p {
  font-size: 1.08rem;
  color: var(--hp-muted);
}
.hp-steps h3 a {
  color: inherit;
}
.hp-steps li:last-child {
  background: var(--hp-green);
  border-color: var(--hp-green);
  color: var(--hp-cream);
}
.hp-steps li:last-child::before {
  color: var(--hp-yellow);
  -webkit-text-stroke: 0;
}
body.hh .hp-steps li:last-child h3,
.hp-steps li:last-child p {
  color: var(--hp-cream);
}
.hp-steps li:last-child :focus-visible {
  outline-color: var(--hp-yellow);
}
@media (max-width: 720px) {
  .hp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-steps li {
    transition: none;
    animation: none;
  }
  .hp-steps li:hover {
    transform: none;
  }
}
body.hh .hp-steps-sec h2,
body.hh .hp-steps-sec h3,
.hp-steps li::before {
  font-weight: 600;
}
body.hh .hp-steps-sec h2,
body.hh .hp-steps-sec h3 {
  letter-spacing: -0.015em;
  line-height: 1.08;
}
.hp-steps li::before {
  letter-spacing: -0.02em;
}

/* Owner's colours: the last card's number in beige; numbers in Fraunces */
.hp-steps li::before {
  font-family: var(--font-heading);
  font-weight: 600;
}

.hp-steps li:last-child::before {
  color: #E8DBBC;
}


/* ==========================================================================
   "Questions you might have" (live home page, owner's request 20 Oct
   2026): large heading on the left with pill links; each question a white
   card with a thin border and a round + button, pale green when open. On
   a soft cream background so the cards show.
   ========================================================================== */

body.hh section[aria-labelledby="faq"] {
  background: var(--hp-paper);
}

body.hh .faq__intro h2 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

body.hh .faq__intro .section__intro {
  font-size: 1.15rem;
}

body.hh .faq__links {
  gap: 12px;
}

body.hh .faq__links a {
  min-height: 52px;
  padding: 0 26px;
  background: #FFFFFF;
  border: 1.5px solid var(--hp-line);
  border-radius: 999px;
  color: var(--hp-ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

body.hh .faq__links a:hover {
  border-color: var(--hp-green);
  color: var(--hp-ink);
}

body.hh .faq__list {
  display: grid;
  gap: 14px;
}

body.hh .faq__list details,
body.hh .faq__list details:first-child {
  background: #FFFFFF;
  border: 1.5px solid var(--hp-line);
  border-radius: 22px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.hh .faq__list details[open] {
  background: var(--hp-sage);
  border-color: var(--hp-sage);
}

/* Question line, with a round button on the right */
body.hh .faq__list summary {
  min-height: 80px;
  padding: 20px 92px 20px 28px;
  border-radius: 22px;
  color: var(--hp-ink);
  font-size: 1.15rem;
  background: radial-gradient(circle at calc(100% - 52px) 50%, var(--hp-paper) 22px, transparent 23px);
}

body.hh .faq__list summary:hover {
  text-decoration: none;
}

/* The + (two bars) centred in the round button */
body.hh .faq__list summary::before,
body.hh .faq__list summary::after {
  right: 43px;
  width: 18px;
  height: 2.5px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--hp-green);
}

body.hh .faq__list details[open] summary {
  background: radial-gradient(circle at calc(100% - 52px) 50%, var(--hp-green) 22px, transparent 23px);
}

body.hh .faq__list details[open] summary::before,
body.hh .faq__list details[open] summary::after {
  background: var(--hp-cream);
}

body.hh .faq__list details p {
  max-width: 60ch;
  padding: 0 28px 24px;
  color: var(--hp-ink);
  font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  body.hh .faq__list details,
  body.hh .faq__links a {
    transition: none;
  }
}

/* Tiles (owner's request): the chat bubbles show real example messages
   instead of grey bars, and "Know your neighbours" has an icon box like
   "Read official updates" instead of the little doors */
body.hh .hp-bub {
  display: block;
  width: auto;
  max-width: 78%;
  justify-self: start;
  margin: 0;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.4;
  color: #F5EFE1;
}

body.hh .hp-bub--me {
  justify-self: end;
  color: #2E4A3B;
}

body.hh .hp-bub--s {
  max-width: 70%;
}

.hp-tile--neigh .hp-tile__ico {
  background: rgba(46, 74, 59, 0.08);
  color: var(--hp-green);
}

/* "A bit of local history": the brief's soft green tint, so it stands
   apart from the cream sections around it (owner's request) */
body.hh section[aria-labelledby="history"] {
  background: #E3EEE8;
}

/* Only the theme's colours (owner's request): the header green #2E4A3B and
   the creams. The pale greens used by the phone section, the "Know your
   neighbours" tile and the opened questions become the theme cream. */
body.hh {
  --hp-sage: #EFE9DD;
  --green-tint: #EFE9DD;
}

/* "A bit of local history": the header green with cream text */
body.hh section[aria-labelledby="history"] {
  background: #2E4A3B;
  color: #F5EFE1;
}

body.hh section[aria-labelledby="history"] h2,
body.hh section[aria-labelledby="history"] p,
body.hh section[aria-labelledby="history"] a,
body.hh section[aria-labelledby="history"] a:hover {
  color: #F5EFE1;
}

body.hh section[aria-labelledby="history"] :focus-visible {
  outline-color: #F5EFE1;
}

/* "Post news" tile: a small picture of a real board post (owner's request,
   in place of chat bubbles, which the site doesn't have). A white post card
   with its category, title, text, heart and comments, and a second post
   peeking out behind it. Theme colours only. */
.hp-minipost {
  position: absolute;
  top: clamp(26px, 3vw, 40px);
  left: clamp(26px, 3vw, 40px);
  right: clamp(26px, 3vw, 40px);
  display: grid;
  pointer-events: none;
}

.hp-minipost__card {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 6px;
  width: min(100%, 420px);
  padding: 18px 20px 16px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  color: #16221B;
  transform: rotate(-1.5deg);
}

.hp-minipost__card--back {
  z-index: 0;
  justify-self: end;
  margin-top: -14px;
  background: #EFE9DD;
  opacity: 0.9;
  transform: rotate(3deg) translateY(-6px);
}

.hp-minipost__tag {
  padding: 2px 12px;
  background: #EFE9DD;
  border-radius: 999px;
  color: #2E4A3B;
  font-size: 16px;
  font-weight: 700;
}

.hp-minipost__tag--parking {
  background: #FBEFD9;
  color: #8A5A00;
}

body.hh .hp-minipost__title {
  margin: 4px 0 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: #2E4A3B;
}

body.hh .hp-minipost__text {
  max-width: none;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #16221B;
}

.hp-minipost__foot {
  display: flex;
  gap: 18px;
  width: 100%;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #E8E0CC;
  color: #2E4A3B;
  font-size: 16px;
  font-weight: 700;
}

.hp-minipost__foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hp-minipost__foot svg {
  width: 18px;
  height: 18px;
}

/* Phones: the back post is hidden so the front one has room */
@media (max-width: 600px) {
  .hp-minipost__card--back {
    display: none;
  }
}

/* Mini posts, laid out properly (owner's request): side by side, the
   second a little lower and tilted, nothing overlapping; each card only as
   tall as its own content. Only the first shows where the tile is narrow. */
.hp-minipost {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.hp-minipost__card {
  flex: 0 1 420px;
  align-content: start;
  width: auto;
}

.hp-minipost__card--back {
  flex: 0 1 340px;
  justify-self: auto;
  margin-top: 40px;
  opacity: 1;
  transform: rotate(2.5deg);
}

.hp-minipost__tag {
  align-self: start;
  line-height: 1.5;
}

@media (max-width: 600px), (min-width: 1001px) and (max-width: 1279px) {
  .hp-minipost__card--back {
    display: none;
  }
}

/* The second post has a photo, as board posts can (owner's request) */
.hp-minipost__card--back {
  background: #FFFFFF;
  padding-top: 12px;
}

.hp-minipost__photo {
  width: 100%;
  height: 130px;
  margin-bottom: 6px;
  object-fit: cover;
  border-radius: 12px;
}

/* Room for the two posts above "Post news" on wide screens */
.hp-minipost__photo {
  height: 104px;
}

.hp-minipost__card--back {
  margin-top: 32px;
}

@media (min-width: 1280px) {
  .hp-tile--news {
    min-height: 560px;
  }
}

/* Text post on the left, photo post on the right (owner's request); "Post
   news" stays at the bottom left */
.hp-minipost__card {
  order: 1;
}

.hp-minipost__card--back {
  order: 2;
  margin-left: auto;
}

/* ---------- "Post news" tile laid out like the owner's mockup ----------
   Left: the small text post (tilted), then "Post news" and its line.
   Right: a larger photo post, straight, like a news card inside the site.
   Where the tile is too narrow for both, only the text post shows. */

.hp-minipost__tag--official {
  background: #2E4A3B;
  color: #F5EFE1;
}

body.hh .hp-minipost__card--back .hp-minipost__title {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

body.hh .hp-minipost__date {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--hp-muted);
}

@media (min-width: 601px) and (max-width: 1000px), (min-width: 1280px) {
  .hp-tile--news {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto auto;
    column-gap: 32px;
    row-gap: 10px;
    align-items: start;
  }

  /* The two posts become items of the tile's grid */
  .hp-tile--news .hp-minipost {
    position: static;
    display: contents;
  }

  /* Text post: top left, small and tilted */
  .hp-tile--news .hp-minipost__card:not(.hp-minipost__card--back) {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 100%;
    max-width: 340px;
    transform: rotate(-2deg);
  }

  .hp-tile--news h2 {
    grid-column: 1;
    grid-row: 2;
  }

  .hp-tile--news > p {
    grid-column: 1;
    grid-row: 3;
  }

  /* Photo post: the whole right side, straight */
  .hp-tile--news .hp-minipost__card--back {
    display: grid;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 14px 14px 18px;
    transform: none;
  }

  .hp-tile--news .hp-minipost__photo {
    height: clamp(180px, 20vw, 280px);
  }
}

/* "Post news" tile (owner's request): both posts straight (no tilt) and
   vertically centred in their space; where only the text post shows, it
   sits centred between the top of the tile and "Post news" */
.hp-tile--news .hp-minipost__card,
.hp-tile--news .hp-minipost__card--back {
  transform: none;
}

.hp-tile--news .hp-minipost {
  position: static;
  margin: auto 0;
  padding-bottom: 24px;
}

@media (min-width: 601px) and (max-width: 1000px), (min-width: 1280px) {
  .hp-tile--news {
    align-items: center;
  }

  .hp-tile--news .hp-minipost {
    margin: 0;
    padding: 0;
  }

  .hp-tile--news .hp-minipost__card:not(.hp-minipost__card--back),
  .hp-tile--news .hp-minipost__card--back {
    align-self: center;
  }
}

/* Photo credit on the post picture (the photo's licence asks for it) */
body.hh .hp-minipost__credit {
  margin: -2px 0 6px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--hp-muted);
}

/* "Post news" tile (owner's request): the text post straight, and the left
   side (text post, "Post news", its line) grouped and vertically centred,
   level with the photo post */
.hp-tile--news .hp-minipost__card:not(.hp-minipost__card--back) {
  transform: none;
}

@media (min-width: 601px) and (max-width: 1000px), (min-width: 1280px) {
  .hp-tile--news {
    grid-template-rows: auto auto auto;
    align-content: center;
  }

  .hp-tile--news .hp-minipost__card:not(.hp-minipost__card--back) {
    align-self: end;
    margin-bottom: 36px;
    transform: none;
  }

  .hp-tile--news h2,
  .hp-tile--news > p {
    align-self: start;
  }
}

/* Centre the left group by putting equal flexible space above and below
   it, however tall the photo post is */
@media (min-width: 601px) and (max-width: 1000px), (min-width: 1280px) {
  .hp-tile--news {
    grid-template-rows: 1fr auto auto auto 1fr;
  }

  .hp-tile--news .hp-minipost__card:not(.hp-minipost__card--back) {
    grid-row: 2;
  }

  .hp-tile--news h2 {
    grid-row: 3;
  }

  .hp-tile--news > p {
    grid-row: 4;
  }

  .hp-tile--news .hp-minipost__card--back {
    grid-row: 1 / 6;
    align-self: center;
  }
}

/* "The sort of thing you'll see": no yellow (owner's request). The circle
   behind the phone and the yellow icons use the theme's beige and cream. */
body.hh .hp-feed .hp-phone-stage::before {
  background: #E8DBBC;
  opacity: 1;
}

body.hh .hp-feed .hp-post--admin .hp-av {
  background: #F5EFE1;
  color: #2E4A3B;
}

body.hh .hp-feed .hp-av--y {
  background: #E8DBBC;
  color: #2E4A3B;
}

/* Home page: every section the same width (owner's request). The older
   sections (local history, questions, join card) use the same page width
   and side margins as the banner and the new sections. */
body.hh main .wrap {
  max-width: 1600px;
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
}

/* ---------- "Post news" tile (owner's request) ----------
   The text post lines up with the top of the photo post, and "Post news"
   with its bottom (no vertical centring). Both posts use the header menu
   box's light see-through cream instead of white, with cream text. */

@media (min-width: 601px) and (max-width: 1000px), (min-width: 1280px) {
  .hp-tile--news {
    grid-template-rows: auto 1fr auto auto;
    align-content: stretch;
  }

  .hp-tile--news .hp-minipost__card:not(.hp-minipost__card--back) {
    grid-row: 1;
    align-self: start;
    margin-bottom: 24px;
  }

  .hp-tile--news h2 {
    grid-row: 3;
    align-self: end;
  }

  .hp-tile--news > p {
    grid-row: 4;
    align-self: end;
  }

  .hp-tile--news .hp-minipost__card--back {
    grid-row: 1 / 5;
    align-self: stretch;
  }
}

/* Light see-through cards with cream text */
.hp-tile--news .hp-minipost__card,
.hp-tile--news .hp-minipost__card--back {
  background: rgba(239, 233, 221, 0.08); /* as the header menu box */
  box-shadow: none;
  color: #F5EFE1;
}

body.hh .hp-tile--news .hp-minipost__title,
body.hh .hp-tile--news .hp-minipost__text,
.hp-tile--news .hp-minipost__foot {
  color: #F5EFE1;
}

body.hh .hp-tile--news .hp-minipost__credit,
body.hh .hp-tile--news .hp-minipost__date {
  color: rgba(245, 239, 225, 0.8);
}

.hp-tile--news .hp-minipost__tag {
  background: rgba(239, 233, 221, 0.14);
  color: #F5EFE1;
}

.hp-tile--news .hp-minipost__tag--official {
  background: #F5EFE1;
  color: #2E4A3B;
}

.hp-tile--news .hp-minipost__foot {
  border-top-color: rgba(239, 233, 221, 0.2);
}

/* ==========================================================================
   History page (owner's request, 20 Oct 2026), compact version.
   Opening: title and intro beside one photo. Chapters on laptops: one row
   each, with the date by a timeline on the left, the story and its
   pull-quote in the middle and the photo on the right. Phones: one column.
   Only the brief's colours and fonts; body text 18px; tap targets 48px.
   ========================================================================== */

body.page-history {
  background: var(--paper);
}

body.page-history .hist {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 20px clamp(48px, 6vw, 80px);
}

/* Opening */
.hist__intro {
  margin: 0 0 24px;
}

body.page-history .hist__intro h1 {
  margin: 0 0 14px;
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--green);
}

.hist__lede {
  max-width: 42ch;
  margin: 0;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink);
}

.hist__fig {
  margin: 0;
}

.hist__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: var(--green);
}

.hist__fig figcaption {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}

.hist__fig--hero {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.hist__fig--hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 960px) {
  body.page-history .hist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 56px;
    align-items: center;
  }

  .hist__intro {
    grid-column: 1;
    margin: 0;
  }

  .hist__fig--hero {
    grid-column: 2;
    margin: 0;
  }

  .hist__fig--hero img {
    aspect-ratio: 4 / 3;
  }

  .hist__chapters,
  .hist__sources {
    grid-column: 1 / -1;
  }

  .hist__chapters {
    margin-top: 56px;
  }
}

/* Chapters */
.hist__chapters {
  position: relative;
}

.hist__ch {
  position: relative;
  padding: 0 0 36px 28px;
  border-left: 2px solid rgba(46, 74, 59, 0.2);
}

.hist__ch::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  width: 14px;
  height: 14px;
  background: var(--green);
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--green);
}

.hist__when {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--green);
}

body.page-history .hist__ch h2 {
  margin: 0 0 10px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  line-height: 1.2;
  color: var(--green);
}

body.page-history .hist__ch p,
body.page-history .hist__invite p {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}

.hist__quote {
  margin: 14px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accent, #8A5A00);
}

body.page-history .hist__quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green);
}

.hist__ch .hist__fig {
  margin-top: 18px;
}

.hist__ch .hist__fig--narrow {
  max-width: 320px;
}

/* Laptops: each chapter is one row: date, story, photo */
@media (min-width: 960px) {
  .hist__ch {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 360px;
    column-gap: 40px;
    row-gap: 0;
    align-items: start;
    padding: 0 0 48px 0;
    border-left: 0;
  }

  /* The timeline runs down the date column */
  .hist__ch::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(46, 74, 59, 0.2);
  }

  .hist__ch:has(+ .hist__invite)::after {
    bottom: 48px;
  }

  .hist__ch::before {
    left: 0;
    top: 8px;
    z-index: 1;
  }

  .hist__when {
    grid-column: 1;
    grid-row: 1;
    padding-left: 32px;
  }

  .hist__body {
    grid-column: 2;
    grid-row: 1;
  }

  .hist__ch .hist__fig,
  .hist__ch .hist__fig--narrow {
    grid-column: 3;
    grid-row: 1;
    max-width: none;
    margin: 0;
  }

  .hist__ch .hist__fig--narrow img {
    max-height: 420px;
    object-fit: cover;
  }

  /* Chapters without a photo use the extra width for their text */
  .hist__ch:not(:has(.hist__fig)) .hist__body {
    grid-column: 2 / 4;
    max-width: 760px;
  }
}

/* Our two streets: a slim green banner */
.hist__invite {
  margin: 8px 0 0;
  padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px);
  background: var(--green);
  border-radius: 20px;
  color: var(--paper);
}

.hist__kicker {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

body.page-history .hist__invite h2 {
  margin: 0 0 10px;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  line-height: 1.15;
  color: var(--paper);
}

body.page-history .hist__invite p {
  color: var(--paper);
}

.hist__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 6px;
  padding: 0 26px;
  background: var(--paper);
  border-radius: 999px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.hist__btn:hover {
  background: #FFFFFF;
  color: var(--green);
}

.hist__invite :focus-visible {
  outline-color: var(--paper);
}

@media (min-width: 960px) {
  .hist__invite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
  }

  .hist__invite > * {
    grid-column: 1;
  }

  .hist__invite .hist__btn {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin: 0;
  }
}

/* Sources: small, at the very end */
.hist__sources {
  margin: 36px 0 0;
}

body.page-history .hist__sources h2 {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
}

.hist__sources ul {
  margin: 0;
  padding-left: 1.1em;
}

.hist__sources li {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

@media (min-width: 960px) {
  .hist__sources ul {
    columns: 2;
    column-gap: 40px;
  }
}

/* History, new banner and chapter style (owner's design, live since
   21 Oct 2026; class .hist--v2, overriding the older rules above).
   Banner: big title, intro and reading time beside one photo with a curved
   lower-left corner. Chapters: full-width bands, two creams in turn;
   heading and italic date on their own row, then the text (one width for
   every chapter) with its photo beside it, both starting on the same line.
   A large first letter starts each chapter. Brief colours and fonts only. */
/* Same edges as the header and footer (logo on the left, account button
   on the right) */
body.page-history .hist.hist--v2 {
  max-width: 1600px;
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
}

body.page-history .hist--v2 .hist__intro h1 {
  margin-bottom: 28px;
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem);
  line-height: 1.02;
}

.hist--v2 .hist__lede {
  max-width: 38ch;
  line-height: 1.75;
}

.hist__read {
  margin: 20px 0 0;
  font-size: 18px;
  color: var(--muted);
}

.hist--v2 .hist__fig--hero img {
  aspect-ratio: 4 / 3;
  border-radius: 28px 28px 28px clamp(96px, 14vw, 200px);
}

/* Chapters as bands that run the full width of the screen */
.hist--v2 .hist__chapters {
  margin-top: clamp(40px, 6vw, 80px);
}

.hist--v2 .hist__ch {
  --band: var(--paper);
  padding: clamp(48px, 7vw, 88px) 0;
  border-left: 0;
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}

/* No white on this page (owner's request): cream and the lighter cream
   #FDF9F2 (the home page background) in turn */
.hist--v2 .hist__ch:nth-of-type(odd) {
  --band: #FDF9F2;
}

.hist--v2 .hist__ch::before,
.hist--v2 .hist__ch::after {
  display: none;
}

/* Our two streets: kept simple (owner's request) - a full-width band in the
   light cream #FDF9F2 (owner's choice; not green, so it stands apart from
   the footer),
   with the kicker, heading, text and button centred */
body.page-history .hist.hist--v2 {
  padding-bottom: 0;
}

.hist--v2 .hist__invite,
.hist--v2 .hist__invite > * {
  grid-column: auto;
}

.hist--v2 .hist__invite {
  --invite-bg: #FDF9F2;
  display: block;
  margin: 0;
  padding: clamp(64px, 9vw, 112px) 0;
  border-radius: 0;
  background: var(--invite-bg);
  box-shadow: 0 0 0 100vmax var(--invite-bg);
  clip-path: inset(0 -100vmax);
  color: var(--ink);
  text-align: center;
}

.hist--v2 .hist__kicker {
  margin-bottom: 10px;
  color: var(--accent, #8A5A00);
}

body.page-history .hist--v2 .hist__invite h2 {
  margin: 0 0 20px;
  font-size: var(--heading-size);
  line-height: 1.1;
  color: var(--green);
}

body.page-history .hist--v2 .hist__invite p {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
  color: var(--ink);
}

.hist--v2 .hist__invite .hist__btn {
  margin-top: 20px;
  background: var(--green);
  color: var(--paper);
}

.hist--v2 .hist__invite .hist__btn:hover {
  background: #1F4237;
  color: var(--paper);
}

.hist--v2 .hist__invite :focus-visible {
  outline-color: var(--green);
}

/* Every chapter photo on the History page: 6px corners (owner's request,
   21 Oct 2026; replaces the square corners). The banner photo keeps its
   curved corner */
body.page-history .hist--v2 .hist__ch .hist__fig img {
  border-radius: 6px;
}

.hist__head {
  margin-bottom: 28px;
}

body.page-history .hist--v2 .hist__ch h2 {
  margin: 0 0 10px;
  font-size: var(--heading-size);
  line-height: 1.1;
}

body.page-history .hist--v2 .hist__ch .hist__when {
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--accent, #8A5A00);
}

body.page-history .hist--v2 .hist__ch p {
  line-height: 1.75;
}

/* The large first letter of each chapter */
.hist--v2 .hist__body > p:first-child::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-family: var(--font-heading);
  font-size: 4.25em;
  font-weight: 600;
  line-height: 0.8;
  color: var(--green);
}

.hist--v2 .hist__ch .hist__fig {
  margin-top: 28px;
}

/* Chapter photos have square corners (owner's request); the banner photo
   keeps its curve */
.hist--v2 .hist__ch .hist__fig img {
  border-radius: 0;
}

@media (min-width: 960px) {
  body.page-history .hist.hist--v2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 80px;
  }

  /* Heading and text on the left (same width in every chapter); the photo
     on the right runs from the top of the heading to the end of the text,
     with its caption just below */
  .hist--v2 .hist__ch {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    /* Heading row only as tall as the heading: when the photo is taller
       than the text, the spare room goes below the text, not above it */
    grid-template-rows: auto 1fr;
    column-gap: 80px;
    align-items: start;
    padding: 88px 0;
  }

  .hist--v2 .hist__head {
    grid-column: 1;
    grid-row: 1;
  }

  .hist--v2 .hist__body,
  .hist--v2 .hist__ch:not(:has(.hist__fig)) .hist__body {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }

  .hist--v2 .hist__ch .hist__fig,
  .hist--v2 .hist__ch .hist__fig--narrow {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    margin: 0;
  }

  .hist--v2 .hist__ch .hist__fig img,
  .hist--v2 .hist__ch .hist__fig--narrow img {
    flex: 1 1 auto;
    height: 0;
    min-height: 340px;
    max-height: none;
    object-fit: cover;
  }

  /* A photo of an object on a plain background (the Domesday Book) is
     shown whole, never cropped */
  .hist--v2 .hist__ch .hist__fig--contain img {
    object-fit: contain;
    background: transparent;
    border-radius: 0;
  }

  /* Photos shown at their own shape, not cropped (The railway arrives,
     Beddington Park today; owner's request): they start with the heading
     and keep their full height */
  .hist--v2 .hist__ch .hist__fig--natural {
    align-self: start;
    container-type: inline-size;
  }

  .hist--v2 .hist__ch .hist__fig--natural img {
    flex: none;
    height: auto;
    min-height: 0;
    object-fit: initial;
  }

  /* A few of those are trimmed a little at the top and bottom (owner's
     request; the px are set per photo in the page data, as --trim-top and
     --trim-bottom, with the photo's shape as --ratio) */
  .hist--v2 .hist__ch .hist__fig--trim img {
    height: calc(var(--ratio) * 100cqw - var(--trim-top) - var(--trim-bottom));
    object-fit: cover;
    object-position: center calc(-1 * var(--trim-top));
  }

  /* The caption hangs just below, so the photo itself ends with the text */
  .hist--v2 .hist__ch .hist__fig {
    position: relative;
  }

  .hist--v2 .hist__ch .hist__fig figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}

/* ==========================================================================
   Page banner in the History page's style (partials/page-hero.php): Rules
   first (owner's request, 21 Oct 2026). Same sizes and photo shape as the
   History banner, and the same edges as the header.
   ========================================================================== */
.ph {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 48px) clamp(40px, 5vw, 72px);
}

body.hf .ph h1 {
  margin: 0 0 28px;
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--green);
}

.ph__lede {
  max-width: 38ch;
  margin: 0;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.75;
  color: var(--ink);
}

.ph__read {
  margin: 20px 0 0;
  font-size: 18px;
  color: var(--muted);
}

.ph__fig {
  margin: 32px 0 0;
}

.ph__fig img,
.ph__fig--empty {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 28px 28px 28px clamp(96px, 14vw, 200px);
}

.ph__fig figcaption {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}

/* Preview only, until the photo arrives */
.ph__fig--empty {
  display: grid;
  place-items: center;
  border: 2px dashed rgba(46, 74, 59, 0.3);
  color: var(--muted);
  font-size: 18px;
}

/* Banner with no photo (Privacy): the text on its own */
.ph--text .ph__lede {
  max-width: 48ch;
}

@media (min-width: 960px) {
  .ph:not(.ph--text) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 80px;
    align-items: center;
  }

  .ph__fig {
    margin: 0;
  }
}

/* ==========================================================================
   House rules, new design (owner's reference, live since 21 Oct 2026). On the light cream: "How we look after each other"
   over a thick green line; each rule a row with a big number, the rule and
   its amber italic line, and the two examples as soft green and soft red
   panels with round tick and cross icons; thin lines between the rules.
   Then the report steps.
   ========================================================================== */
.hr {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px);
}

.hr__rules,
.hr__report {
  --band: var(--paper);
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}

.hr__rules {
  --band: #FDF9F2;
}

body.hf .hr .hr__intro {
  margin: 0;
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 3px solid var(--green);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  line-height: 1.08;
  color: var(--green);
}

.hr__intro {
  max-width: none;
}

.hr__rule {
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid rgba(46, 74, 59, 0.15);
}

.hr__intro + .hr__rule {
  border-top: 0;
}

.hr__no {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--green);
}

body.hf .hr .hr__rule h3 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1.12;
  color: var(--green);
}

.hr__line {
  max-width: 38ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--accent, #8A5A00);
}

/* The examples: soft green and soft red panels */
.hr__eg {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.hr__good,
.hr__bad {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border-radius: 12px;
  background: #E3EEE8;
}

.hr__bad {
  background: rgba(178, 58, 46, 0.12);
}

.hr__ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
}

.hr__bad .hr__ic {
  background: var(--brick);
}

.hr__ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #FDF9F2;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hr__label {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--green);
}

.hr__bad .hr__label {
  color: var(--brick);
}

.hr__text {
  margin: 4px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

/* If a post breaks the rules (owner asked for a new design): on the cream,
   heading centred (no line under it), then three steps with
   round green icons joined by a dashed amber path, as in How joining works */
.hr__report {
  --band: var(--paper);
}

body.hf .hr .hr__report h2 {
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  line-height: 1.08;
  color: var(--green);
  text-align: center; /* centred, no line under it (owner's request) */
}

.hr__report ol {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hr__report li {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}

/* The dashed path: down the left on phones */
.hr__report li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 84px;
  bottom: -32px;
  border-left: 2px dashed var(--accent, #8A5A00);
}

.hr__step-ic {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green);
}

.hr__step-ic svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #FDF9F2;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hr__report strong {
  display: block;
  margin: 6px 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--green);
}

.hr__report li > span:last-child {
  display: block;
  grid-column: 2;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}

@media (min-width: 960px) {
  /* Laptops: side by side and centred (owner's request), icon on top, the
     path running from each icon to the next */
  .hr__report ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 56px;
  }

  .hr__report li {
    display: block;
    text-align: center;
  }

  .hr__report li:not(:last-child)::after {
    left: calc(50% + 48px);
    right: calc(-50% - 8px);
    top: 35px;
    bottom: auto;
    border-left: 0;
    border-top: 2px dashed var(--accent, #8A5A00);
  }

  .hr__step-ic {
    margin: 0 auto 24px;
  }

  .hr__report strong {
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  /* Number, rule, examples */
  .hr__rule {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }

  .hr__no {
    margin: 0;
  }

  .hr__eg {
    margin-top: 0;
  }

  /* Rule 6 has no examples: its text uses the space */
  .hr__rule--plain .hr__head {
    grid-column: 2 / -1;
  }

}

/* ==========================================================================
   Privacy notice, new design in the Rules page's style (owner's request,
   live since 21 Oct 2026). Full-width bands,
   the light cream #FDF9F2 and the page cream in turn: what we keep as a
   simple table with thin lines; things we never do as red-cross items;
   your choices in three columns; leaving the site and questions side by side.
   ========================================================================== */
.pv {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px);
}

.pv__sec {
  --band: var(--paper);
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
  color: var(--ink);
}

.pv__sec--light {
  --band: #FDF9F2;
}

/* Section headings: like "How we look after each other" on Rules */
body.hf .pv .pv__title {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
  border-bottom: 3px solid var(--green);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  line-height: 1.08;
  color: var(--green);
}

body.hf .pv .pv__title--centre {
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}

.pv__intro {
  max-width: 60ch;
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--accent, #8A5A00);
}

/* What we keep: a plain table with thin lines, no box */
.pv__keep {
  width: 100%;
  border-collapse: collapse;
}

.pv__keep thead th {
  padding: 0 24px 14px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
}

.pv__keep tbody th,
.pv__keep td {
  padding: 22px 24px 22px 0;
  border-top: 1px solid rgba(46, 74, 59, 0.15);
  text-align: left;
  vertical-align: top;
  font-size: 18px;
  line-height: 1.6;
}

.pv__keep tbody th {
  width: 30%;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--green);
}

.pv__opt {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}

/* Phones: each row stacks, with its labels shown */
@media (max-width: 759px) {
  .pv__keep thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .pv__keep tr,
  .pv__keep tbody th,
  .pv__keep td {
    display: block;
    width: auto;
  }

  .pv__keep tr {
    padding: 22px 0;
    border-top: 1px solid rgba(46, 74, 59, 0.15);
  }

  .pv__keep tbody th,
  .pv__keep td {
    padding: 0;
    border: 0;
  }

  .pv__keep td {
    margin-top: 10px;
  }

  .pv__keep td::before {
    content: attr(data-label);
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Things we never do: red crosses, two by two */
.pv__never {
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pv__never li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 12px;
  background: rgba(178, 58, 46, 0.12);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ink);
}

.pv__ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brick);
}

.pv__ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #FDF9F2;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Your choices: soft green panels with round icons, the friendly
   counterpart of the red "never do" panels above */
.pv__choices {
  display: grid;
  gap: 18px;
  margin: 0;
}

.pv__choices > div {
  padding: 28px;
  border-radius: 12px;
  background: #E3EEE8;
}

.pv__ic--green {
  margin-bottom: 18px;
  background: var(--green);
}

.pv__ic--green svg {
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.pv__choices dt {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--green);
}

.pv__choices dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
}

/* Leaving the site and Questions: two light cream panels side by side */
.pv__pair {
  display: grid;
  gap: 18px;
}

.pv__card {
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: 12px;
  background: #FDF9F2;
}

.pv__card .pv__ic {
  width: 56px;
  height: 56px;
}

.pv__card .pv__ic svg {
  width: 28px;
  height: 28px;
}

body.hf .pv .pv__pair h2 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  color: var(--green);
}

.pv__pair p {
  max-width: 60ch;
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
}

.pv__updated {
  margin: 40px 0 0;
  font-size: 16px;
  color: var(--muted);
  text-align: center;
}

@media (min-width: 960px) {
  .pv__never {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pv__choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }

  .pv__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* ==========================================================================
   Log in, Join, Forgotten password and the other account pages (owner's
   request, 21 Oct 2026): the same width as the header and the History,
   Rules and Privacy pages, and the same text sizes. The admin login has its
   own layout and is not changed.
   ========================================================================== */
body.hf .auth .wrap {
  max-width: 1600px;
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
}

body.hf .auth {
  padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 6vw, 88px);
}

/* Page headings like the section headings on the other pages */
body.hf .auth-panel h1,
body.hf .auth h1 {
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--green);
}

/* The line under the heading: the size of the other pages' intros */
body.hf .auth-panel__lede {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink);
}

/* "Good to know" and the other boxes beside the form */
body.hf .auth-aside__box h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.12;
}

body.hf .auth-aside__box li,
body.hf .auth-aside__box p {
  font-size: 18px;
  line-height: 1.65;
}

/* Chrome shows saved (autofilled) details in its own smaller font: keep
   them at the site's 18px */
body.hf .field input:-webkit-autofill,
body.hf .field input:-webkit-autofill::first-line {
  font-family: var(--font-body);
  font-size: 18px;
}

/* Logged in (home page banner): the "Go to your members' home" button sits
   under the welcome line, not beside it (owner's request) */
.hp-join .hp-joinbar.hp-joinbar--member {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 14px;
  max-width: 560px;
  padding: 20px 22px;
}

.hp-join .hp-joinbar.hp-joinbar--member .hp-btn {
  width: auto;
}

/* "What you can do here" cards (logged in, owner's request): headings
   without an underline, and the whole card opens its page (the heading's
   link is stretched over the card). A clear outline shows for keyboards. */
.hp-steps li {
  position: relative;
  cursor: pointer;
}

.hp-steps h3 a {
  color: inherit;
  text-decoration: none;
}

.hp-steps h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.hp-steps h3 a:focus-visible {
  outline: none;
}

.hp-steps li:has(a:focus-visible) {
  outline: 3px solid var(--hp-green);
  outline-offset: 3px;
}

.hp-steps li:last-child:has(a:focus-visible) {
  outline-color: var(--hp-green);
}

/* "The sort of thing you'll see", wider and less tall (owner's requests,
   26 Oct 2026): on laptops and desktops one post to a row in an ordinary
   phone-width screen (450px), and each post shorter: its text cut to one line
   with "..." (the title, who and when, comments and likes stay). The phone
   gets more of the row and the band has a little less padding. Tablets and
   phones keep the one-column phone as before. */
.hp-feed.hp-section {
  padding: clamp(64px, 8vw, 110px) 0;
}

@media (min-width: 1001px) {
  .hp-feed__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  /* The phone 450px wide (owner's requests, 26 Oct 2026) */
  .hp-phone {
    width: min(450px, 100%);
  }

  .hp-post {
    gap: 6px;
    padding: 14px 16px;
  }

  .hp-post__msg {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .hp-phone-stage::before {
    width: 74%;
  }
}