/* Round 2 batch 5: shared layout, accessibility, responsive, and print rules. */
:root {
  --clay: #ad452b;
  --pad: max(clamp(1.15rem, 4vw, 4.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

body.home-page {
  --pad: max(clamp(1.15rem, 3.4vw, 4rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

h1,
h2,
h3,
.related-links strong {
  text-wrap: balance;
}

.btn,
.button,
.textbar a {
  font-size: .875rem;
  font-weight: 700;
}

.eyebrow,
.section-label,
.resource-kicker,
.related-label,
.related-links span,
.kicker,
.guide-card span,
.family-figure figcaption,
.work-band figcaption,
.hero-image figcaption {
  font-size: .75rem;
}

.wordmark .wordmark-tagline {
  display: block;
  margin-top: .24rem;
  font-size: .6875rem;
  line-height: 1.2;
  letter-spacing: .1em;
  white-space: nowrap;
}

.wordmark .wordmark-prefix {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.text-link,
.form-fallback,
.early-reviews-heading a,
.guide-cta .form-fallback {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: .45rem;
}

.prose > .pull-quote {
  color: var(--ink);
  line-height: 1.2;
  margin-top: 2rem;
  text-wrap: balance;
}

.guide-hero h1 { line-height: .9; }
.prose h2,
.content-heading h2 { line-height: 1; }
.guide-cta h2 { line-height: .95; }

.content-heading > .section-label {
  grid-column: 1 / -1;
  position: static;
  color: var(--clay);
  margin: 0 0 -.5rem;
}

.info-card > h3:first-child { margin-top: 0; }

.town-shortlist .shortlist-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.4vw, 2.5rem);
  font-weight: 450;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.official-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.4rem;
  margin-top: 1.15rem;
}
.official-links .official-link { margin: 0; }
.inline-source {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.guide-nav a[aria-current="location"],
.guide-nav a[aria-current="page"] {
  border-color: var(--peach);
}

.relocation-download .section-label { color: var(--peach); }

.home-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--serif);
  font-size: .92rem;
}
.home-nav > a { padding-block: .5rem; }

#copy-geoff-number {
  font: inherit;
  font-family: var(--serif);
  font-size: .95rem;
}

.site-footer {
  padding: clamp(2.8rem, 4.5vw, 4.5rem) var(--pad) clamp(3rem, 5vw, 4.5rem);
  background: var(--paper);
  color: var(--ink);
}
.site-footer .socials { margin-top: 0; }
.legal {
  justify-content: flex-start;
  column-gap: 2rem;
}

.nowrap { white-space: nowrap; }
.eyebrow { align-items: flex-start; }
.fl-contents a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.related-links strong { text-wrap: balance; }

.fl-number-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.6rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.fl-number-list li {
  padding-top: .6rem;
  border-top: 1px solid currentColor;
}

.batch5-alt-cream { background: var(--cream); }

.worksheet-print-header { display: none; }
.print-worksheet {
  min-height: 44px;
  margin-top: 1.25rem;
  padding: .7rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.worksheet {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.worksheet li {
  position: relative;
  margin: .55rem 0;
  padding-left: 1.7em;
  line-height: 1.45;
}
.worksheet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: .9em;
  height: .9em;
  border: 1.5px solid currentColor;
}

.parcel-diagram .parcel-caption {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (min-width: 861px) {
  .content-heading h2 { max-width: 15ch; }
}

@media (max-width: 860px) {
  .guide-hero h1 { line-height: 1; }
  .guide-header {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
  }
  .guide-nav {
    width: 100%;
    order: 3;
    justify-content: flex-start;
    gap: 0 1.4rem;
  }
  .guide-nav a:not(.nav-cta) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .875rem;
    letter-spacing: .05em;
  }
  .guide-nav a.header-call { display: none; }
  .guide-nav .nav-cta {
    position: absolute;
    top: 1rem;
    right: var(--pad);
  }
  .home-nav { display: none; }
  .guide-expansion .official-link + .official-link {
    margin-left: 0;
    margin-top: .75rem;
  }
  .hero-actions .call-link { align-self: flex-start; }
  .guide-card-wide strong { margin-top: .2rem; }
  .guide-card-wide small { margin-top: .8rem; }
  .hero h1 { line-height: .9; }
  .thing h3 { font-size: clamp(2.6rem, 13vw, 4.6rem); }
  .parcel-diagram img {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  .wordmark .wordmark-prefix { display: none; }
  .wordmark .wordmark-tagline {
    max-width: none;
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .home-page .hero { min-height: auto; }
  .home-page .hero-copy {
    padding-top: 4.5rem;
    padding-bottom: 1.2rem;
  }
  .home-page .hero h1 {
    font-size: clamp(2.4rem, 11vh, 3.4rem);
    line-height: .82;
  }
  .home-page .hero-bottom {
    flex-direction: row;
    align-items: center;
  }
  .home-page .hero-actions { flex-direction: row; }
  .home-page .btn { width: auto; }
  .home-page .header-call { display: inline-flex; }
}

@page { margin: .55in; }

@media print {
  html,
  body {
    background: #fff !important;
    color: #111 !important;
  }
  .skip-link,
  .site-header,
  .guide-header,
  .guide-footer,
  .site-footer,
  .textbar,
  .sticky-cta,
  .print-worksheet,
  .hero-image,
  .ph-bg,
  .ph-tint,
  .shade,
  .scene-tag,
  .work-band {
    display: none !important;
  }
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .scene,
  .hero,
  .guide-hero,
  .dark,
  .quote-slab,
  .things,
  .guide-cta,
  .ask {
    min-height: 0 !important;
    background: #fff !important;
    color: #111 !important;
  }
  .hero,
  .guide-hero,
  .hero-copy,
  .hero-bottom {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
  }
  .hero h1,
  .guide-hero h1 {
    max-width: none !important;
    font-size: 28pt !important;
    line-height: 1.05 !important;
  }
  .hero-copy,
  .guide-body,
  .content-section,
  .related-guides,
  .guide-cta,
  .ask,
  .things,
  .quote-slab,
  .work,
  .local-guide,
  .family-section,
  .letters {
    padding: .25in 0 !important;
  }
  .hero h1,
  .guide-hero h1,
  .guide-cta h2,
  .dark h2,
  .dark h3,
  .dark p,
  .scene p,
  .scene h1,
  .quote-slab blockquote {
    color: #111 !important;
  }
  .card-grid,
  .area-grid,
  .resource-list,
  .related-links,
  .guide-intro,
  .content-heading {
    break-inside: auto;
  }
  article,
  details,
  figure,
  .info-card,
  .resource-item,
  .area {
    break-inside: avoid;
  }
  a { text-decoration: underline; }

  body.lot-worksheet-page .guide-hero,
  body.lot-worksheet-page main > :not(#lot-worksheet),
  body.lot-worksheet-page .textbar {
    display: none !important;
  }
  body.lot-worksheet-page main,
  body.lot-worksheet-page #lot-worksheet {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.lot-worksheet-page .worksheet-print-header {
    display: block;
    margin: 0 0 .25in;
    padding-bottom: .12in;
    border-bottom: 1px solid #111;
    font-size: 10pt;
    line-height: 1.3;
  }
  body.lot-worksheet-page #lot-worksheet .content-heading {
    display: block;
  }
  body.lot-worksheet-page #lot-worksheet .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .18in;
  }
  body.lot-worksheet-page #lot-worksheet .area {
    padding: .14in;
  }
  body.lot-worksheet-page #lot-worksheet h2 { font-size: 24pt; }
  body.lot-worksheet-page #lot-worksheet h3 { font-size: 15pt; }
  body.lot-worksheet-page .worksheet li {
    margin: .08in 0;
    font-size: 10.5pt;
    line-height: 1.25;
  }
}
