/* === Typefaces ===
   Served from this site rather than from Google Fonts. Nothing is gained by a
   font CDN any more — browsers have partitioned the HTTP cache by site since
   2020, so a visitor never arrives with these already cached from somewhere
   else — and loading them from Google meant disclosing every visitor's IP
   address to a third party on every page view, plus a DNS lookup and TLS
   handshake to two more hosts before any text could be painted.

   Three files, not four: both families are variable fonts, so one file carries
   every weight and the range below selects from it. Google serves the same file
   for 400 and 600 for exactly this reason. Latin subset only — every non-ASCII
   character on the site was checked against that range first. Both families are
   under the SIL Open Font License, included alongside them. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces.woff2') format('woff2');
}

/* === Ink & paper ===
   The whole site — text, rules, and every illustration vignette — recolours
   from these two custom properties. Vignette SVGs use currentColor only. */
:root {
  --ink: #2c261c;
  --ink-soft: #6f6656;
  --paper: #f7f3e8;
  --paper-shade: #efe8d8;
  --line: #ddd4c0;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;
  /* Generic aliases. The easter egg's stylesheet (and any future guest
     stylesheet) reads these, so it sets its text in the site's own faces
     without knowing what they are called here. */
  --display: var(--font-heading);
  --body: var(--font-body);
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === Base === */
html {
  scroll-behavior: smooth;
}

/* === Skip link === */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px;
  z-index: 999;
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* === Staging / preview banner (never on the live site) === */
.env-banner {
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 1.5rem;
  font-size: 0.9rem;
  text-align: center;
}

.env-banner a {
  color: inherit;
}

/* === Focus styles === */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

body {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(44, 38, 28, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

a:hover {
  text-decoration-color: var(--ink);
}

/* === Vignettes ===
   Inline SVG illustrations. They inherit --ink via currentColor, sit alone
   between blocks of text (never behind it), and dissolve into the paper. */
.vignette {
  color: var(--ink);
  margin: 0 auto;
}

.vignette svg {
  display: block;
  margin: 0 auto;
  height: auto;
  width: 100%;
}

/* === Plates ===
   Full-drawing raster illustrations (WebP). multiply melts their white
   ground into the paper, so the plates sit in the page — no white
   rectangles, edges stay dissolved. */
.plate {
  display: block;
  margin: 0 auto;
  height: auto;
  mix-blend-mode: multiply;
}

/* Home headpiece. */
.plate--lynachlaggan {
  width: min(560px, 100%);
  margin-top: 0.5rem;
}

/* Insh seen across the marshes — traced from a photograph of the real view. */
.plate--insh-marshes {
  width: min(560px, 100%);
  margin-top: 0.5rem;
}

/* Looking up through the pines — traced from a photograph. */
.plate--forest {
  width: min(540px, 100%);
  margin: 3.5rem auto 1rem;
}

/* The path cut through the dense plantation — traced from a photograph. */
.plate--woods-path {
  width: min(620px, 100%);
  margin: 0.5rem auto 1.5rem;
}

.plate--curlew {
  width: min(480px, 100%);
  margin: 0.5rem auto 1rem;
}

.plate--songbird {
  width: min(520px, 100%);
  margin: 0.5rem auto 1rem;
}

/* A Highland dry stone wall — traced from a photograph. */
.plate--wall {
  width: min(520px, 100%);
  margin: 2rem auto;
}

/* The green lane down to the marshes — traced from a photograph. */
.plate--marshes-path {
  width: min(340px, 85%);
  margin: 3rem auto 1rem;
}

/* Closes the Weather page, the way the green lane closes Contact. */
.plate--snow-monkey {
  width: min(340px, 85%);
  margin: 3rem auto 1rem;
}

/* The small recurring motifs — dividers and spot illustrations. */
.plate--divider {
  width: min(340px, 80%);
  margin: 3rem auto;
}

.plate--swan {
  width: min(460px, 100%);
  margin: 0.5rem auto 1rem;
}

.plate--lapwing {
  width: min(380px, 90%);
  margin: 0.5rem auto 1rem;
}

.plate--pinecone {
  width: min(300px, 80%);
  margin: 3rem auto 1rem;
}

/* Juniper — burned through the house at New Year to sain it. */
.plate--juniper {
  width: min(300px, 80%);
  margin: 2rem auto;
}

.plate--rush {
  width: min(140px, 50%);
  margin: 2.5rem auto 0;
}

.vignette--fire {
  margin: 3.5rem auto 1.5rem;
}

.vignette--fire svg {
  max-width: 540px;
}

/* === Header === */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 1.5rem;
}

/* Wider than the footer's 1000px: eleven nav items and the wordmark need about
   1160px to sit on one line (see the navigation breakpoint below). */
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Set so that all eleven items measure about 1000px in a row, which is what
   the header width and the hamburger breakpoint below are built around. Adding
   an item means tightening here or widening there; a second row looks bad. */
.nav-links {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

.nav-link {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  color: var(--ink);
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.nav-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.nav-external {
  font-size: 0.8em;
  opacity: 0.7;
}

.nav-link.nav-active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.2s;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}

/* === Footer === */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 1.5rem;
  text-align: center;
  margin-top: 3rem;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.footer-cta {
  display: inline-block;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.5rem 1.5rem;
  border-radius: 2px;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.footer-cta:hover {
  background: var(--ink);
  color: var(--paper);
}

.footer-details {
  width: 100%;
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--ink-soft);
}

.footer-details a,
.footer-link {
  color: inherit;
}

.footer-copyright {
  width: 100%;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* === Side tabs ===
   Three standing links pinned to the right edge. Styled as index tabs cut from
   ink and paper — solid enough to find at a glance, but with no
   shadow and the same invert-on-hover as the other buttons, so a modern
   convenience sits inside a traditional page rather than floating above it.

   Hidden by default and shown only from 55rem up. The reading column is 46rem
   wide, so below about that width a fixed tab either sits on the text or has to
   be bought with a lopsided right-hand gutter — and a page meant for reading
   should not have something pinned alongside the words. All the tabs are in
   the main navigation anyway, so on a phone the hamburger carries them. */
.side-tabs {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 90;
}

/* And only on a window tall enough for the three of them, stacked and
   centred, to stay clear of the header. */
@media (min-width: 55rem) and (min-height: 38rem) {
  .side-tabs {
    display: flex;
  }
}

.side-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-right: none;
  border-radius: 3px 0 0 3px;
  padding: 1.15rem 0.85rem;
  min-width: 48px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

/* Inverts to paper on hover, the same reversal the other buttons use. */
.side-tab:hover {
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

/* === Content === */
.content {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.content h1 {
  font-size: clamp(1.9rem, 1.45rem + 1.8vw, 2.5rem);
  margin-bottom: 1rem;
}

.content h2 {
  font-size: clamp(1.35rem, 1.16rem + 0.75vw, 1.6rem);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.content h3 {
  font-size: clamp(1.15rem, 1.06rem + 0.4vw, 1.3rem);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.content p {
  margin-bottom: 1.2rem;
}

.content ul, .content ol {
  margin-bottom: 1.2rem;
  padding-left: 1.5rem;
}

.content li {
  margin-bottom: 0.4rem;
}

.content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.5rem auto;
  width: 60%;
}

/* Quoted source documents — the constitution extract on About. */
.content blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
}

.content blockquote p:last-child {
  margin-bottom: 0;
}

/* Credit line closing a first-hand account. */
.content .attribution {
  margin-top: 1.75rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* === Hero (home) === */
.hero {
  text-align: center;
  padding: 1.5rem 0 2rem;
}

.hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  margin-bottom: 0.75rem;
}

.hero p {
  font-size: 1.2rem;
  max-width: 34rem;
  margin: 0 auto;
  color: var(--ink-soft);
}

/* === Weather teaser (home) ===
   Under the hero: a link to the Weather page, and beneath it the conditions
   now, filled in by weather.js. The second line's height is held from the
   start, so the cards below do not move when it arrives. */
.content .weather-teaser {
  text-align: center;
  margin: -0.75rem 0 0;
}

.weather-teaser__now {
  display: block;
  min-height: 1.65em;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* With the wind in it the line is some seventy characters, which is two
   lines on a phone (line-height 1.65). */
@media (max-width: 40rem) {
  .weather-teaser__now {
    min-height: 3.3em;
  }
}

/* === CTA Button === */
.cta-button {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.65rem 1.75rem;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.cta-button:hover {
  background: var(--ink);
  color: var(--paper);
}

/* === Home path cards === */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.path-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.4rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.2s;
}

.path-card:hover {
  border-color: var(--ink);
}

.content .path-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.content .path-card p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* === News === */
.content .news-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}

.news-card {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0;
}

.news-card:last-child {
  border-bottom: 1px solid var(--line);
}

.content .news-card h2,
.content .news-card h3 {
  font-size: 1.25rem;
  margin: 0 0 0.3rem;
}

.news-card time {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.5rem;
}

.content .news-card p {
  margin: 0;
  font-size: 1rem;
}

.news-teaser {
  margin-top: 1rem;
}

/* === Post === */
.post-date {
  display: block;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.post-image {
  margin: 0 0 1.5rem;
}

/* === Events === */
.content .event-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}

.event-card {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0;
}

.event-card:last-child {
  border-bottom: 1px solid var(--line);
}

.event-card time {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.3rem;
}

.content .event-card h3 {
  margin: 0 0 0.5rem;
}

.content .event-card .event-contact {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 0;
}

.content .event-card h3 a {
  text-decoration: none;
}

.content .event-card h3 a:hover,
.content .event-card h3 a:focus-visible {
  text-decoration: underline;
}

.content .event-card .event-links {
  font-size: 1.05rem;
  margin: 0.5rem 0 0;
}

/* A single event: the when and where sit under the title like a notice
   pinned to the hall door. */
.content .event-when {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.event-where {
  display: block;
  margin-top: 0.25rem;
}

.content .event-page .event-contact {
  color: var(--ink-soft);
}

/* Calendar, WhatsApp and copy-link, as plain links rather than a button row. */
.content .event-actions {
  list-style: none;
  padding-left: 0;
  margin: 2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 1.05rem;
}

.content .event-actions li {
  margin: 0;
}

.link-button {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(44, 38, 28, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.link-button:hover,
.link-button:focus-visible {
  text-decoration-color: currentColor;
}

/* === Trustees === */
.content .trustee-list {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.trustee-photo {
  width: 100px;
  margin-bottom: 0.6rem;
  filter: grayscale(1) sepia(0.15);
}

.content .trustee h3 {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}

.content .trustee .trustee-role {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.content .trustee .trustee-bio p {
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* === Newsletters === */
.content .newsletter-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}

.newsletter-item {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
}

.newsletter-item:last-child {
  border-bottom: 1px solid var(--line);
}

.newsletter-item time {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The issue takes the room; its season sits alongside like a shelf label. */
.newsletter-item__text {
  flex: 1;
}

.content .newsletter-item h2,
.content .newsletter-item h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.content .newsletter-item p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* The full issue, offered once the summary has been read. */
.content .newsletter-download {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 2rem 0 0;
}

.newsletter-download__meta {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* A way back to the archive from a single issue. */
.content .newsletter-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* === Contact details === */
.contact-details {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.4rem 1.5rem 0.25rem;
  margin: 1.5rem 0 2rem;
}

/* === Contact form === */
.contact-form {
  margin-top: 1.5rem;
  background: var(--paper-shade);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2rem;
}

.form-group {
  margin-bottom: 1.35rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(44, 38, 28, 0.12);
}

.contact-form .cta-button {
  width: 100%;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0.8rem 2rem;
  font-size: 1.05rem;
}

.contact-form .cta-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  padding: 0.75rem 1rem;
  border-radius: 2px;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.form-status--success {
  background: #e7efe4;
  color: #2f5d3a;
  border: 1px solid #b9cfb4;
}

.form-status--error {
  background: #f4e5e0;
  color: #8a2a2a;
  border: 1px solid #dcb3a9;
}

.cf-turnstile {
  margin-bottom: 1.25rem;
}

/* === Membership form ===
   Extends the contact-form styling with a fee panel, grouped choices and a
   required-field marker. Touch targets stay at least 44px on small screens. */
.note {
  background: var(--paper-shade);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: 2px;
  padding: 1.5rem 1.5rem 0.5rem;
  margin: 2rem 0;
}

.note-title {
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.note p {
  margin-bottom: 1rem;
}

.bank-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.bank-details dt {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.bank-details dd {
  margin: 0;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.req {
  color: #8a2a2a;
  font-weight: 700;
}

.form-fieldset {
  border: none;
  padding: 0;
  margin-bottom: 1.35rem;
  min-width: 0;
}

.fieldset-box {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.1rem 1.25rem 0.6rem;
  background: var(--paper);
}

/* The caption sits above the box like every other field label, rather than
   straddling the fieldset border the way a native legend renders. The
   fieldset itself is borderless; .fieldset-box carries the visible box. */
.form-fieldset legend {
  display: block;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  padding: 0;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.45;
  cursor: pointer;
  min-height: 44px;
  padding: 0.5rem 0;
}

.choice input[type="radio"],
.choice input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  /* Centred on the capital letter beside the control, which is what the eye
     lines up, rather than the full-string ink bounds that descenders drag
     down. 0.23rem measured with the EB Garamond webfont loaded; both the
     checkbox and the radios land within a tenth of a pixel. */
  margin-top: 0.23rem;
  flex: 0 0 auto;
  accent-color: var(--ink);
  cursor: pointer;
}

.field-note {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0.8rem;
}

.form-group--confirm {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.4rem 1.25rem;
}

/* .form-group label sets display:block at higher specificity than .choice,
   so restate the flex layout here or the checkbox falls back to an inline
   box sitting on the text baseline. */
.form-group--confirm label,
.form-group--confirm .choice {
  display: flex;
  align-items: flex-start;
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 0;
}

.form-footnote {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0.75rem 0 0;
  text-align: center;
}

.privacy-note {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: 2rem;
}

.plate--pinecone-head {
  width: min(220px, 60%);
  margin: 0.5rem auto 0.5rem;
}

/* === Policy documents (privacy, cookies) === */
.doc-version {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

.doc-footer {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* Wide content scrolls inside its own box rather than breaking the page. */
.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
}

.doc-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.doc-table th,
.doc-table td {
  border: 1px solid var(--line);
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
  background: var(--paper);
}

.doc-table th {
  background: var(--paper-shade);
  font-weight: 600;
}

.doc-table code {
  font-size: 0.95em;
  word-break: keep-all;
  white-space: nowrap;
}

/* === 404 page === */
.error-page {
  text-align: center;
  padding: 4rem 1rem;
}

.error-page h1 {
  font-size: 5rem;
  margin-bottom: 0.5rem;
}

.error-page p {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

/* === Map of Insh ===
   The map is progressive enhancement. An inline script on the map page sets
   .js-map on <html> before this markup is parsed, so the map box is only ever
   given a height when JavaScript is actually running: no reserved empty space,
   no layout shift, and the written fallback shows in its place.

   The page is a lookup rather than a directory — it never lists the houses of
   Insh. Nothing appears on the map until a name is searched for. */
.map-canvas {
  display: none;
}

.js-map .map-canvas {
  display: block;
}

.js-map .map-holder .map-fallback {
  display: none;
}

.map-figure {
  margin: 1.5rem 0 2.5rem;
}

/* A map wants more room than the 46rem reading column allows, so on wide
   screens it spills evenly past both edges of the text.

   The 9rem held back is for the side tabs, which are pinned to the right edge
   and are always drawn at these widths. Without it the map slides underneath
   them between about 1024px and 1100px. */
@media (min-width: 64rem) {
  .map-figure {
    margin-inline: calc((100% - min(62rem, 100vw - 9rem)) / 2);
  }
}

.map-holder {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-shade);
}

/* Shown while the map is fetching its library and tiles, and taken away only
   once MapLibre reports the map drawn and ready to be used. It sits over the
   canvas rather than in the flow, so revealing the map shifts nothing. */
.map-skeleton {
  display: none;
}

.js-map .map-holder.is-loading .map-skeleton {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  background-color: var(--paper-shade);
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    rgba(255, 253, 246, 0.7) 45%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: map-skeleton-sweep 1.8s ease-in-out infinite;
}

@keyframes map-skeleton-sweep {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}

.map-canvas {
  height: clamp(18rem, 55vh, 30rem);
}

.content .map-fallback {
  margin: 0;
  padding: 1.25rem 1.4rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.content .map-credit {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* MapLibre's own controls, brought onto the site's paper. */
.maplibregl-ctrl-group {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
}

.maplibregl-ctrl-group button {
  background: transparent;
}

.maplibregl-ctrl-group button:hover {
  background: var(--paper-shade);
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--line);
}

.maplibregl-ctrl-scale {
  background: transparent;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* A small ink dot inside a generous transparent target: comfortable to tap,
   and it gives the focus ring something worth drawing around. Only houses that
   match a search are ever given a pin. */
.house-pin {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  cursor: pointer;
}

.house-pin__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  transition: transform 0.15s, background 0.15s;
}

.house-pin__label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -3px);
  white-space: nowrap;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--ink);
  /* A paper halo, so names stay legible over roads and woodland. */
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper);
  /* Two results can sit close together; a label must never swallow a
     neighbour's dot. */
  pointer-events: none;
}

.house-pin:hover .house-pin__dot,
.house-pin:focus-visible .house-pin__dot {
  background: var(--ink);
  transform: scale(1.25);
}

.house-pin.is-selected {
  z-index: 2;
}

.house-pin.is-selected .house-pin__dot {
  background: var(--ink);
  transform: scale(1.45);
}

.house-pin.is-selected .house-pin__label {
  font-weight: 600;
}

/* === The house lookup === */
.house-search {
  margin: 1.5rem 0 0;
}

.house-search[hidden] {
  display: none;
}

.house-search label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.house-search__input {
  width: 100%;
  max-width: 24rem;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.2s;
}

.house-search__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(44, 38, 28, 0.12);
}

/* Reserved height, so a result appearing does not shove the map downwards. */
.content .house-search__status {
  margin: 0.5rem 0 0;
  min-height: 1.5rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.content .house-results {
  list-style: none;
  margin: 0;
  padding-left: 0;
  max-width: 30rem;
  /* A results panel, not a directory. Capped so a broad search scrolls within
     itself instead of pushing the map — the actual answer — off the screen. */
  max-height: 10.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.content .house-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line);
}

.content .house-result:first-child {
  border-top: 1px solid var(--line);
}

.content .house-result.is-selected {
  background: var(--paper-shade);
  box-shadow: inset 3px 0 0 var(--ink);
}

.house-result__locate {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.house-result__locate:hover {
  border-bottom-color: var(--ink);
}

.house-result__osm {
  flex: none;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.house-result__osm:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .house-pin__dot {
    transition: none;
  }

  /* A quietly shaded panel says "loading" just as well as a moving one. */
  .js-map .map-holder.is-loading .map-skeleton {
    background-image: none;
    animation: none;
  }
}

/* === Fade-in on scroll === */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Mobile === */
/* === Navigation: hamburger below, full nav above ===
   The eleven nav items measure about 1000px laid out in a row, and the wordmark
   takes another 144px, so with the header's own padding and a scrollbar they
   do not fit on one line until about 1225px. Below that they wrap to two rows
   and crowd the wordmark. 77.99rem (1248px) leaves a little room for a font
   that sets wider, and still gives a 1280px laptop the full navigation.

   Deliberately a wider boundary than the 55rem the side tabs use: the tabs only
   need to clear the 46rem reading column, which happens far sooner. Between the
   two, the tabs are drawn and the hamburger is still in use, which is fine —
   they are a shortcut to three pages, not a substitute for the navigation.

   The rest of the small-screen layout stays at 768px: the three path cards, the
   forms and the footer are all still comfortable at 820px. */
@media (max-width: 77.99rem) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    z-index: 100;
  }

  .nav-links.nav-open {
    display: flex;
  }

  .site-header {
    position: relative;
    padding: 0 1rem;
  }

  .nav-link {
    padding: 0.5rem 0;
    font-size: 1.05rem;
  }
}

@media (max-width: 768px) {
  .content {
    padding: 1.5rem 1.25rem;
  }

  .path-grid {
    grid-template-columns: 1fr;
  }

  .content .trustee-list {
    grid-template-columns: 1fr;
  }

  .newsletter-item {
    flex-direction: column;
    gap: 0.2rem;
  }

  .contact-form {
    padding: 1.25rem;
  }
  .note {
    padding: 1.15rem 1.15rem 0.35rem;
  }

  .bank-details {
    gap: 0.6rem 1.5rem;
    padding: 0.8rem 0.9rem;
  }

  .fieldset-box {
    padding: 0.9rem 1rem 0.4rem;
  }

  .choice-row {
    flex-direction: column;
    gap: 0;
  }

  .site-footer {
    padding: 2rem 1rem;
  }
}

/* === Print ===
   Screen-only conveniences have no place on paper. */
@media print {
  .side-tabs,
  .skip-link,
  .map-holder,
  .house-search {
    display: none;
  }
}