/* Ancestry Register homepage. Visual system per brand/DESIGN_SYSTEM.md. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The handoff is a 1440px design. Everything below is rem-based and the content frame is
   90rem, so scaling the root font above 1440px scales the whole layout with the screen
   instead of leaving a small page stranded in the middle of a large monitor.
   Kept in rem, not pinned to 1440px, so it shrinks with the 90% root font below: the
   owner wants the resulting margin either side of the hero band, matching the 90% browser
   zoom he designed against. */
:root {
  --ar-content-max: 90rem;

  /* Owner-directed type system, superseding the kit's Cormorant/Libre/Montserrat trio. */
  --ar-font-display: "Newsreader", Georgia, serif;
  --ar-font-body: "Source Serif 4", Georgia, serif;
  --ar-font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Tuned against a 1920px screen: 0.797vw lands on 15.3px there, the size the owner
   settled on. Floored so 1441-1920 does not shrink, capped so ultrawide still grows. */
/* The owner settled on the site viewed at 90% browser zoom, so the root font is 90% of
   the browser default. Everything below is rem-based, so this scales the layout the same
   way zoom does; vw-based clamps are deliberately untouched because zoom does not change
   their rendered size either. Percent, not a px value, so a non-default browser text size
   is still respected. */
html { font-size: 90%; }

/* The 15.3px/0.797vw/17px ceiling above is the pre-scale reference, carried here at 90%. */
@media (min-width: 1441px) {
  html { font-size: clamp(13.77px, 0.7173vw, 15.3px); }
}

body {
  margin: 0;
  background: var(--ar-paper);
  color: var(--ar-ink);
  font-family: var(--ar-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--ar-font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  /* Display type at this size strands single words: "file.", "default." and "it." each sat
     alone on a second line at laptop widths. `balance` evens the lines on the short
     headings the site actually uses; browsers without it fall back to normal wrapping. */
  text-wrap: balance;
}

strong, b { font-weight: 500; }

p { margin: 0; }

img, svg { max-width: 100%; }

a { color: inherit; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ar-white);
  font-family: var(--ar-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

/* ---------- shared elements ---------- */

.btn,
.text-link,
.primary-nav a,
.nav-toggle,
.news-date,
.footer-col h2,
.footer-legal,
.skip-link {
  font-family: var(--ar-font-ui);
  font-weight: 500;
  text-decoration: none;
}

.btn {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  border-radius: var(--ar-radius-sm);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color var(--ar-transition), color var(--ar-transition), border-color var(--ar-transition);
}

.btn-outline {
  border: 1px solid color-mix(in srgb, var(--ar-taupe), transparent 55%);
  color: var(--ar-ink);
  background: transparent;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--ar-gold);
  color: var(--ar-gold);
}

/* Same recipe as the site's only other solid control, .filter-chip[aria-pressed="true"]:
   deep brown fill, paper label. It is the dark surface the footer and stewardship band
   already use, so the button reads as an existing component rather than a new colour.
   The 1px border is load-bearing: without it the filled box sits shorter than an outlined
   button beside it and the pair stops reading as a set. */
.btn-solid {
  background: var(--ar-brown-dark);
  border: 1px solid var(--ar-brown-dark);
  color: var(--ar-paper);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  background: var(--ar-umber);
  border-color: var(--ar-umber);
  color: var(--ar-paper);
}

/* These are standalone calls to action, not links inside a sentence, so WCAG 2.5.8's
   inline exception does not cover them. The uppercase micro-type gives a 17px box, so the
   padding buys the remaining height; the negative block margin keeps the visual position
   the surrounding rules already lay out. */
.text-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  /* Sized so the box still clears 24px at the 13.77px root that applies above 1441px,
     not just at the 14.4px root below it. */
  padding-block: 0.4rem;
  margin-block: -0.4rem;
  color: var(--ar-gold);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-link .arrow { transition: transform var(--ar-transition); }

.text-link:hover .arrow,
.text-link:focus-visible .arrow { transform: translateX(4px); }

.text-link-light { color: var(--ar-gold); }

.rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 1.9rem 0;
  background: var(--ar-gold);
}

.card-icon {
  width: 40px;
  height: 40px;
  display: block;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--ar-font-display);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.18;
  color: var(--ar-ink);
}

/* Tracking is ~30% tighter than the kit drawing and the weight a step up, so the lockup
   reads as an established institution rather than airy fashion lettering. */
.wordmark-line-1 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.154em;
}

.wordmark-line-2 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.238em;
  padding-left: 0.17em;
}

.wordmark-light { color: var(--ar-paper); }

/* ---------- header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--ar-paper);
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
}

.header-inner {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: 0.9rem var(--ar-page-pad);
  min-height: 4.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.nav-letter-mobile { display: none; }

/* The 9.9px uppercase label gives an 11px box, well under the 24px target minimum. The
   padding grows the hit area and the negative margin keeps the bar's height and the gaps
   between links exactly as laid out. The stacked mobile menu sets its own padding. */
.primary-nav a {
  display: inline-block;
  padding-block: 0.45rem;
  margin-block: -0.45rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ar-umber);
  transition: color var(--ar-transition);
}

.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--ar-gold); }

.nav-alert {
  padding: 0.75rem 1.5rem;
  white-space: nowrap;
}

/* The links and the button cluster to the right of the wordmark; the auto margin absorbs
   the free space so the header does not spread into evenly spaced columns. */
.primary-nav { margin-left: auto; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 30%);
  border-radius: var(--ar-radius-sm);
  color: var(--ar-umber);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* ---------- hero ---------- */

/* The photo is bounded by the same 1440px frame as every other section, otherwise it
   runs to the viewport edge on wide screens and the page reads as shifted left. */
.hero {
  position: relative;
  max-width: var(--ar-content-max);
  margin: 0 auto;
  background: var(--ar-ivory);
  isolation: isolate;
}

.hero-band { background: var(--ar-ivory); }

.hero-media {
  position: absolute;
  inset: 0 0 0 30%;
  z-index: -2;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  display: block;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--ar-ivory) 0%,
    var(--ar-ivory) 32%,
    color-mix(in srgb, var(--ar-ivory), transparent 28%) 44%,
    color-mix(in srgb, var(--ar-ivory), transparent 72%) 54%,
    transparent 68%
  );
}

.hero .hero-inner {
  /* The deep bottom pad existed to give the audience panel overlap room; the letter
     banner replaced the overlap, so the hero holds a normal bottom margin instead. */
  padding: clamp(3.5rem, 7vw, 6rem) var(--ar-page-pad) clamp(3.5rem, 5.5vw, 5rem);
  /* rem, not px, so the homepage's 90% root font shrinks the hero the way browser zoom
     does. 29.0625rem is the original 465px at a 16px root. */
  min-height: 29.0625rem;
  display: flex;
  align-items: center;
}

/* Wide enough to hold the reference's four heading lines at the specified type size. */
.hero .hero-copy { max-width: 48rem; }

.hero h1 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 5.4vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

/* Above 1440 the root font already scales the page, so the heading is capped in rem to
   keep the four reference line breaks; unchecked 5.4vw pushes it onto five lines. */
@media (min-width: 1441px) {
  .hero h1 { font-size: min(5.4vw, 4.85rem); }
}

.hero .hero-copy p {
  max-width: 24rem;
  margin-bottom: 2.4rem;
  color: var(--ar-umber);
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- received a letter banner ---------- */

/* Same dark surface as the stewardship band, held to roughly a third of its height: a
   signpost between the hero and the audience rows, not a second hero. */
.letter-banner {
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
}

.letter-banner-inner {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: clamp(1.7rem, 3vw, 2.4rem) var(--ar-page-pad);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: center;
}

/* box-sizing keeps the ring at 52px, so the glyph inside renders at 26px. */
.letter-icon {
  width: 52px;
  height: 52px;
  padding: 13px;
  border: 1px solid var(--ar-gold);
  border-radius: 50%;
}

.letter-copy h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }

.letter-copy p {
  max-width: 34rem;
  margin-top: 0.45rem;
  color: color-mix(in srgb, var(--ar-paper), transparent 22%);
  font-size: 0.9375rem;
}

.letter-banner .text-link { white-space: nowrap; }

/* ---------- audience cards ---------- */

.audience {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 4vw, 3.5rem) var(--ar-page-pad) 0;
}

.audience-panel {
  position: relative;
  /* The panel used to pull itself up over the hero's bottom edge; the letter banner now
     sits in that seam, so the overlap is retired rather than covering the new band. */
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ar-paper);
  box-shadow: var(--ar-shadow-soft);
}

.audience-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 3rem);
  text-align: center;
}

.audience-card + .audience-card {
  border-left: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
}

.audience-card h2 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }

.audience-card p {
  max-width: 21rem;
  color: var(--ar-umber);
  font-size: 1rem;
}

.audience-card .text-link { margin-top: auto; }

/* ---------- stewardship ---------- */

.stewardship {
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
  overflow: hidden;
}

.stewardship-inner {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: var(--ar-section-pad) var(--ar-page-pad);
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.seal {
  width: min(100%, 26.25rem);
  height: auto;
  justify-self: center;
  opacity: 0.34;
}

.stewardship h2 {
  font-size: clamp(2rem, 3.4vw, 2.625rem);
  line-height: 1.1;
}

.stewardship p {
  max-width: 34rem;
  color: color-mix(in srgb, var(--ar-paper), transparent 22%);
  font-size: 1rem;
}

.stewardship .text-link { margin-top: 2.2rem; }

/* ---------- news and reassurance ---------- */

.news-reassurance-inner {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: var(--ar-section-pad) var(--ar-page-pad);
  display: grid;
  grid-template-columns: 1fr minmax(300px, 0.52fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 35%);
}

.news-head h2 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); }

.news-list li {
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 55%);
}

.news-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  padding: 1.5rem 0;
  text-decoration: none;
  transition: color var(--ar-transition);
}

.news-date {
  grid-column: 1 / -1;
  font-family: var(--ar-font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ar-taupe);
}

.news-title { font-size: 1rem; }

.news-list .arrow {
  align-self: end;
  color: var(--ar-taupe);
  transition: transform var(--ar-transition), color var(--ar-transition);
}

.news-list a:hover,
.news-list a:focus-visible { color: var(--ar-gold); }

.news-list a:hover .arrow,
.news-list a:focus-visible .arrow {
  color: var(--ar-gold);
  transform: translateX(4px);
}

.reassurance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 3rem);
  border: var(--ar-border);
  background: var(--ar-ivory);
  text-align: center;
}

.reassurance h2 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }

.reassurance p {
  max-width: 22rem;
  color: var(--ar-umber);
  font-size: 1rem;
}

.reassurance .btn { margin-top: 0.6rem; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ar-brown-dark);
  color: color-mix(in srgb, var(--ar-paper), transparent 18%);
  font-size: 0.875rem;
}

.footer-inner {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 5rem) var(--ar-page-pad) clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.footer-brand p {
  max-width: 16rem;
  margin-top: 1.6rem;
  color: color-mix(in srgb, var(--ar-paper), transparent 35%);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.footer-col h2 {
  margin-bottom: 1.4rem;
  font-family: var(--ar-font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ar-paper), transparent 42%);
}

/* On desktop the toggle is typography only: it inherits everything from the h2 around it
   and cannot be operated (nav.js parks it with tabindex -1 and CSS drops the pointer),
   so the rendered footer is identical to the plain headings it replaced. On a phone it
   becomes the accordion control for its link group. */
.footer-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
}

.footer-toggle-mark { display: none; }

.footer-col li + li { margin-top: 0.85rem; }

/* 17px tall with no padding, which is under the 24px target minimum on every touch width.
   The negative margin keeps the visual rhythm of the column while the box grows. */
.footer-col a {
  display: inline-block;
  text-decoration: none;
  padding-block: 0.25rem;
  margin-block: -0.25rem;
  transition: color var(--ar-transition);
}

.footer-col a:hover,
.footer-col a:focus-visible { color: var(--ar-gold); }

.footer-contact address {
  font-style: normal;
  line-height: 1.6;
}

.footer-legal {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: 1.6rem var(--ar-page-pad) 2.2rem;
  border-top: 1px solid color-mix(in srgb, var(--ar-paper), transparent 88%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  font-family: var(--ar-font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ar-paper), transparent 48%);
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

/* The trading-disclosure line is long; give it its own full-width row. */
.legal-company { flex-basis: 100%; }

/* Header telephone: handset icon and number between the links and the letter button. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.25rem;
  margin-block: -0.45rem;
  font-family: var(--ar-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--ar-ink);
  text-decoration: none;
  margin-left: 0.5rem;
  transition: color var(--ar-transition);
}
.header-phone:hover,
.header-phone:focus-visible { color: var(--ar-gold); }
/* Handset in the same deep brown as the solid letter button, per the founder. */
.header-phone-icon { flex: 0 0 auto; color: var(--ar-brown-dark); }

@media (max-width: 989px) and (min-width: 816px) {
  .header-phone { font-size: 0.75rem; letter-spacing: 0.04em; gap: 0.45rem; }
}

/* Collapsed header: the number moves next to the button and menu on the right. The
   matching .nav-alert override lives at the end of this file so it wins the cascade. */
@media (max-width: 815px) {
  .header-phone { order: 1; margin-left: auto; }
}

/* Phones: wordmark, number, hamburger. Below 360px the number gives way to the icon alone. */
@media (max-width: 767px) {
  .header-phone { min-height: 44px; padding: 0.5rem 0.4rem; margin-block: 0; }
}
@media (max-width: 360px) {
  .header-phone-number { display: none; }
  .header-phone { min-width: 44px; justify-content: center; }
}

/* 12px tall as shipped, the smallest targets on the site. */
.legal-links a {
  display: inline-block;
  text-decoration: none;
  padding-block: 0.375rem;
  margin-block: -0.375rem;
  transition: color var(--ar-transition);
}

.legal-links a:hover,
.legal-links a:focus-visible { color: var(--ar-gold); }

/* ---------- breakpoints ---------- */

/* Six nav items plus the button is a tight bar below 990, so the links tighten rather
   than wrapping onto a second line. Re-measured with tools/header_min_width.py after the
   root font moved to 90%: the untightened bar now needs 990px, not the 1200px this rule
   used to start at, so tightening above 990 was shrinking type that already fitted. */
@media (max-width: 989px) and (min-width: 816px) {
  .header-inner { gap: 1rem; }
  .primary-nav { gap: 1rem; }
  .primary-nav ul { gap: clamp(0.75rem, 1.6vw, 1.5rem); }
  .primary-nav a { font-size: 0.625rem; letter-spacing: 0.05em; white-space: nowrap; }

  .nav-alert { padding: 0.7rem 1rem; font-size: 0.625rem; }
}

/* Three columns for four .footer-col children stranded the contact block alone with two
   thirds of its row empty. Two columns divide the four evenly. minmax(0, 1fr) rather than
   bare 1fr because the contact column's min-content is the 193px email address, which
   otherwise makes the columns unequal. */
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .stewardship-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .stewardship .rule { margin-inline: auto; }
  .stewardship p { margin-inline: auto; }
  .seal { width: min(72%, 20rem); }

  .news-reassurance-inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .audience-panel { grid-template-columns: 1fr; }
  .audience-card + .audience-card {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
  }
}

/* Re-measured with tools/header_min_width.py: at the 90% root the tightened bar fits in
   816px, so the links collapse behind the menu from 815 down rather than the 999 this
   rule used to start at, which was derived at the old 16px root and left the menu hiding
   a nav that had 200px of room to spare. The button stays in the bar either way. */
@media (max-width: 815px) {
  .nav-toggle { display: inline-flex; order: 3; }

  .header-inner { gap: 0.6rem; }

  .nav-alert {
    order: 1;
    margin-left: auto;
    padding: 0.7rem 1rem;
  }

  .primary-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    order: 4;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--ar-page-pad) 1.5rem;
    background: var(--ar-paper);
    border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
  }

  .primary-nav.is-open { display: flex; }

  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }

  .primary-nav ul a {
    display: block;
    padding: 0.95rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 65%);
  }
}

@media (max-width: 767px) {
  /* The hard breaks set the four designed lines of the desktop headline. On a phone they
     force the text into as many as eight ragged lines, so the copy flows naturally here. */
  .hero h1 br { display: none; }

  .hero-media { inset: 0; }

  .hero-media img { object-position: 62% 45%; }

  .hero::after {
    background: linear-gradient(
      180deg,
      var(--ar-ivory) 0%,
      color-mix(in srgb, var(--ar-ivory), transparent 8%) 52%,
      color-mix(in srgb, var(--ar-ivory), transparent 32%) 100%
    );
  }

  .hero-inner { min-height: 0; padding-bottom: clamp(3.5rem, 10vw, 5rem); }

  .footer-inner { grid-template-columns: repeat(2, 1fr); }

  .footer-legal { flex-direction: column; align-items: flex-start; }
}

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

/* Below this the bar cannot hold the wordmark, the button and the toggle on one line
   without shrinking the brand or dropping the UI type below spec. Instead of paying for
   the button with those concessions, it takes its own full-width line inside the same
   header: still above the fold, never behind the menu, and a 46px tap target. */
/* The headline's 3.5rem floor applies at every phone width, so a 320px screen got a
   346px-tall heading and pushed "Received a letter?" 183px below the fold (measured with
   tools/fold_check.py on real device viewports). Scaling it here brings the primary CTA
   back into view from 375px up; the 320x568 iPhone SE still needs a short scroll. */
@media (max-width: 470px) {
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .hero .hero-inner { padding-top: clamp(2rem, 6vw, 3.5rem); }
  .hero .hero-copy p { margin-bottom: 1.6rem; }

  .header-inner {
    flex-wrap: wrap;
    row-gap: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .nav-alert {
    order: 4;
    flex: 0 0 100%;
    margin-left: 0;
    padding: 0.85rem 1rem;
    min-height: 46px;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .nav-toggle-label { display: none; }
  .nav-toggle { padding: 0.5rem 0.6rem; min-width: 44px; justify-content: center; }
}

/* ---------- mobile homepage (approved 2026-08 design pack) ---------- */

/* A reflow of the desktop page, not a new design system: same tokens, same type, same
   assets. Values are in px because the pack specifies device-width measurements; the
   surrounding rem system tracks the desktop's scaling root, which phones do not use.
   Last in the file so these rules win ties against the older phone breakpoints above. */
@media (max-width: 767px) {
  /* The letter route moves into the menu on phones. */
  .header-inner {
    min-height: 72px;
    padding: 0 20px;
    flex-wrap: nowrap;
    gap: 0.6rem;
  }

  .nav-alert { display: none; }
  .nav-letter-mobile { display: list-item; }

  .nav-toggle-label { display: none; }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    justify-content: center;
    border: 0;
  }

  .primary-nav { padding-inline: 20px; }

  /* Hero: the pack's left-to-right cream fade over the same photo, books kept top right
     and the pen lower right. The heading reflows naturally; the desktop line breaks
     stay hidden (rule above) because 42px in a 292px column sets its own honest wrap. */
  .hero-media img { object-position: 66% 50%; }

  .hero::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--ar-ivory), transparent 2%) 0%,
      color-mix(in srgb, var(--ar-ivory), transparent 7%) 34%,
      color-mix(in srgb, var(--ar-ivory), transparent 45%) 57%,
      transparent 79%
    );
  }

  .hero .hero-inner {
    min-height: clamp(500px, 138vw, 560px);
    padding: 52px 20px 34px;
    align-items: flex-start;
  }

  .hero .hero-copy {
    width: 72%;
    max-width: 292px;
  }

  .hero h1 {
    font-size: clamp(42px, 11.5vw, 48px);
    letter-spacing: -0.035em;
  }

  .hero .rule {
    width: 38px;
    margin: 22px 0 20px;
  }

  .hero .hero-copy p {
    max-width: 286px;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-actions {
    width: min(100%, 278px);
    margin-top: 27px;
    display: grid;
    gap: 10px;
  }

  .hero-actions .btn {
    min-height: 46px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
  }

  /* Legibility floor for the outlined action where the photo shows through the fade. */
  .hero-actions .btn-outline { background: color-mix(in srgb, var(--ar-ivory), transparent 40%); }

  /* Letter banner: compact one-column layout, action on its own row. */
  .letter-banner-inner {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    padding: 25px 20px 26px;
    align-items: start;
  }

  .letter-copy h2 { font-size: 27px; }

  .letter-copy p {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.45;
  }

  .letter-banner .text-link {
    grid-column: 2;
    min-height: 44px;
    margin-top: -4px;
    white-space: normal;
    font-size: 11px;
  }

  /* Audience: the three panels become full-width rows. Icon in a pale circular field,
     copy beside it, divider between rows; the stretched link makes the whole row the
     tap target while the visible CTA keeps its place under the description. */
  .audience { padding: 0 20px; }

  .audience-panel {
    margin-top: 0;
    background: transparent;
    box-shadow: none;
  }

  .audience-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 4px 16px;
    align-items: center;
    padding: 26px 0;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
  }

  .audience-card:last-child { border-bottom: 0; }

  .audience-card + .audience-card { border-top: 0; }

  .audience-card > * { grid-column: 2; }

  .audience-card .card-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: 58px;
    height: 58px;
    padding: 15px;
    border-radius: 50%;
    background: var(--ar-ivory);
  }

  .audience-card h2 {
    margin-bottom: 3px;
    font-size: clamp(25px, 7vw, 29px);
  }

  .audience-card p {
    max-width: none;
    font-size: 14px;
    line-height: 1.45;
  }

  .audience-card .text-link {
    margin-top: 10px;
    font-size: 11px;
  }

  /* The whole row is clickable, not only the text link. */
  .audience-card .text-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* Stewardship: compact two-column band, seal held at 104px. The desktop watermark
     opacity would leave a 104px seal illegible, so it renders as a solid mark here. */
  .stewardship { margin-top: 40px; }

  .stewardship-inner {
    padding: 43px 20px;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 24px;
    justify-items: start;
    text-align: left;
  }

  .seal {
    width: 104px;
    opacity: 1;
  }

  .stewardship h2 { font-size: clamp(28px, 8vw, 32px); }

  .stewardship .rule {
    width: 38px;
    margin: 17px 0 15px;
    margin-inline: 0;
  }

  .stewardship p {
    margin-inline: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .stewardship .text-link {
    margin-top: 14px;
    font-size: 11px;
  }

  /* News and reassurance: single column, text-led rows. */
  .news-reassurance-inner {
    display: block;
    padding: 38px 20px 40px;
  }

  .news-head { padding-bottom: 1rem; }

  .news-head h2 { font-size: 30px; }

  .news-head .text-link { font-size: 11px; }

  .news-list a { padding: 13px 0; }

  .news-title { font-size: 15px; line-height: 1.3; }

  .news-list .arrow { align-self: center; }

  /* The reassurance panel keeps its border and ivory field but reads as a compact row:
     feather in a circular field, copy beside it, action beneath. */
  .reassurance {
    margin-top: 38px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 6px 16px;
    align-items: start;
    padding: 23px;
    text-align: left;
  }

  .reassurance > * { grid-column: 2; }

  .reassurance .card-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 50%;
    background: var(--ar-stone);
  }

  .reassurance h2 { font-size: 25px; }

  .reassurance p {
    max-width: none;
    font-size: 14px;
    line-height: 1.45;
  }

  .reassurance .btn {
    margin-top: 15px;
    width: fit-content;
    min-width: 136px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }

  /* Footer: brand first, link groups as collapsed accordions (nav.js), contact always
     visible, legal at the bottom. 12px floor per the pack. */
  .footer-inner {
    display: block;
    padding: 38px 20px 10px;
  }

  .footer-brand p {
    margin: 1rem 0 1.6rem;
    max-width: 270px;
  }

  .footer-col { border-top: 1px solid color-mix(in srgb, var(--ar-paper), transparent 82%); }

  .footer-col h2 {
    margin-bottom: 0;
    font-size: 12px;
  }

  .footer-toggle {
    min-height: 52px;
    cursor: pointer;
  }

  .footer-toggle-mark {
    display: block;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--ar-transition);
  }

  .footer-toggle[aria-expanded="true"] .footer-toggle-mark { transform: rotate(225deg); }

  .footer-col ul { padding-bottom: 1.3rem; }

  .footer-contact { padding-bottom: 0.6rem; }

  .footer-contact h2 { margin: 1.1rem 0 0.9rem; }

  .footer-legal {
    padding: 1.4rem 20px 2rem;
    font-size: 12px;
  }
}

/* Extra compact adjustments per the pack: below 375px the copy column widens, the icon
   fields shrink a step, and the stewardship band stacks instead of squeezing its copy. */
@media (max-width: 374px) {
  .hero-media img { object-position: 62% 50%; }

  .hero .hero-copy { width: 77%; }

  .letter-banner-inner {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
  }

  .letter-icon {
    width: 44px;
    height: 44px;
    padding: 11px;
  }

  .audience-card {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 4px 12px;
  }

  .audience-card .card-icon {
    width: 52px;
    height: 52px;
    padding: 13px;
  }

  .stewardship-inner { grid-template-columns: 1fr; }

  .seal { width: 94px; }

  .reassurance {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 13px;
  }

  .reassurance .card-icon {
    width: 44px;
    height: 44px;
    padding: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Collapsed header (see .header-phone): the letter button gives up its auto margin so the
   number, the button and the menu cluster together on the right. Kept last to win. */
@media (max-width: 815px) {
  .nav-alert { order: 2; margin-left: 0; }
}

/* The hero now carries two paragraphs; on phones the single-paragraph rule above zeroes
   the margin, so give the second paragraph its own gap. */
@media (max-width: 767px) {
  .hero .hero-copy p + p { margin-top: 0.9rem; }
}

/* Smallest phones: the seven-line headline plus the hero paragraph pushed the letter button
   below the fold on 320 to 375px devices. A slightly smaller display size on those widths
   only; 390px and up are unchanged. */
@media (max-width: 375px) {
  .hero h1 { font-size: clamp(2.1rem, 9.6vw, 3rem); }
}