/* Inner-page module library, ported from the owner's template pack and wired to the
   site's existing --ar-* tokens so every page shares one palette and type scale. */

.shell {
  width: min(100%, var(--ar-content-max));
  margin-inline: auto;
  padding-inline: var(--ar-page-pad);
}

/* ---------- shared type ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--ar-font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ar-gold);
}

.eyebrow::before {
  content: "";
  width: 2.7rem;
  height: 1px;
  background: currentColor;
}

.kicker {
  font-family: var(--ar-font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-gold);
}

.section-title {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: var(--ar-taupe);
  max-width: 42rem;
}

.small-note {
  color: var(--ar-taupe);
  font-size: 0.85rem;
}

hr.rule {
  width: auto;
  height: 1px;
  border: 0;
  background: color-mix(in srgb, var(--ar-line), transparent 40%);
  margin: 2rem 0;
}

/* ---------- page scaffolding ---------- */

.section { padding-block: var(--ar-section-pad); }
.section-tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section-stone { background: var(--ar-ivory); }

.section-dark {
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
}

.section-dark .lead,
.section-dark .small-note { color: color-mix(in srgb, var(--ar-paper), transparent 30%); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.55fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head p { margin: 0; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 2.2rem;
  font-family: var(--ar-font-ui);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ar-taupe);
}

/* Padding rather than a min-height: these sit in a flex row, so a taller box would push
   the separators out of line with the labels. */
.breadcrumbs a { text-decoration: none; padding-block: 0.45rem; margin-block: -0.45rem; }
.breadcrumbs a:hover { color: var(--ar-gold); }
.breadcrumbs span { opacity: 0.55; }

/* ---------- heroes ---------- */

.page-hero {
  position: relative;
  max-width: var(--ar-content-max);
  margin-inline: auto;
  min-height: 30rem;
  overflow: hidden;
  background: var(--ar-ivory);
}

.page-hero .hero-photo {
  position: absolute;
  inset: 0 0 0 42%;
  background-size: cover;
  background-position: center;
}

.page-hero .hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--ar-ivory) 0%,
    color-mix(in srgb, var(--ar-ivory), transparent 8%) 12%,
    color-mix(in srgb, var(--ar-ivory), transparent 45%) 42%,
    transparent 76%
  );
}

.page-hero .hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 30rem;
}

.page-hero .hero-copy {
  width: min(56%, 44rem);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

.hero-title {
  margin: 0 0 1.6rem;
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 4.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.028em;
  max-width: 14ch;
}

.hero-copy .lead { margin-bottom: 2rem; }

.hero-dark {
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
}

.hero-dark .hero-photo {
  inset: 0 0 0 46%;
  opacity: 0.6;
}

.hero-dark .hero-photo::before {
  background: linear-gradient(
    90deg,
    var(--ar-brown-dark) 0%,
    color-mix(in srgb, var(--ar-brown-dark), transparent 8%) 18%,
    color-mix(in srgb, var(--ar-brown-dark), transparent 58%) 64%,
    color-mix(in srgb, var(--ar-brown-dark), transparent 82%) 100%
  );
}

.hero-dark .lead { color: color-mix(in srgb, var(--ar-paper), transparent 26%); }
.hero-dark .breadcrumbs { color: color-mix(in srgb, var(--ar-paper), transparent 44%); }

.hero-dark .btn-outline {
  border-color: color-mix(in srgb, var(--ar-gold), transparent 30%);
  color: var(--ar-paper);
}

.editorial-hero {
  padding-block: var(--ar-section-pad);
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.editorial-hero .hero-title { max-width: 15ch; }

.editorial-aside {
  border-left: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}

.editorial-aside p { margin-top: 0; }

/* ---------- intro panel ---------- */

.intro-panel {
  position: relative;
  z-index: 5;
  margin-top: -3.2rem;
}

.intro-panel-inner {
  background: var(--ar-white);
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  box-shadow: var(--ar-shadow-soft);
  padding: clamp(2rem, 4vw, 3.6rem);
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}

/* The other .section-title contexts each set their own margin; this one never did, so its
   lead paragraph sat flush against the descenders at every width. */
.intro-panel-inner .section-title { margin: 0 0 1rem; }

.intro-panel .aside-label {
  font-family: var(--ar-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0.8rem 0 0;
}

/* ---------- principles ---------- */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
}

.principle {
  padding: clamp(1.75rem, 3vw, 3rem);
  border-right: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
}

.principle:last-child { border-right: 0; }

.principle .number {
  color: var(--ar-gold);
  font-family: var(--ar-font-display);
  font-size: 1.3rem;
}

/* h2 as well as h3: login and 404 use h2 here so the heading outline does not skip a
   level, and the card component must look identical either way. */
.principle h3,
.card h2,
.card h3 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0.9rem 0 0.7rem;
}

.principle p { margin: 0; color: var(--ar-taupe); }

/* ---------- split feature ---------- */

.split-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: var(--ar-content-max);
  margin-inline: auto;
  background: var(--ar-white);
}

.split-feature.reverse .feature-image { order: 2; }

.feature-image {
  min-height: 30rem;
  background-size: cover;
  background-position: center;
}

.feature-copy {
  padding: clamp(2.5rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-copy .section-title { max-width: 14ch; margin: 0.9rem 0 1.4rem; }
.feature-copy p { color: var(--ar-taupe); }
/* Same opt-in gap as .content-block and .article-body; without it the two paragraphs on
   the-register run together as a single block. */
.feature-copy p + p { margin-top: 1.1rem; }
.feature-copy .text-link { margin-top: 1.6rem; align-self: flex-start; }

/* ---------- timeline ---------- */

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: steps;
}

.timeline-step {
  position: relative;
  padding: 1.4rem 2rem 1.75rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  counter-increment: steps;
}

.timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 42%;
  height: 2px;
  background: var(--ar-gold);
}

.timeline-step::before {
  content: "0" counter(steps);
  display: block;
  color: var(--ar-gold);
  font-family: var(--ar-font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  margin-bottom: 1rem;
}

.timeline-step h3 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 0 0 0.7rem;
}

.timeline-step p { color: var(--ar-taupe); margin: 0; font-size: 0.95rem; }

/* ---------- asymmetric card grid ---------- */

.module-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
}

.card {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--ar-white), transparent 28%);
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  padding: clamp(1.75rem, 3vw, 3rem);
}

.card.span-4 { grid-column: span 4; }
.card.span-5 { grid-column: span 5; }
.card.span-6 { grid-column: span 6; }
.card.span-7 { grid-column: span 7; }
.card.span-8 { grid-column: span 8; }

.card p { color: var(--ar-taupe); }
.card .text-link { margin-top: 1.4rem; }

.card.dark {
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
  border-color: transparent;
}

.card.dark p { color: color-mix(in srgb, var(--ar-paper), transparent 28%); }
.card.dark .checklist li { border-top-color: color-mix(in srgb, var(--ar-paper), transparent 82%); }

.card.soft { background: var(--ar-ivory); }

.card.image-card {
  min-height: 26rem;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

/* The old two-stop scrim was still 60-70% transparent where the text block sits, leaving
   the gold kicker at 1.03:1 against the photograph and the body copy at 2.79:1. The middle
   stop holds the scrim dark across the full height of the text and only then opens up, so
   the photograph still reads in the upper two thirds of the card.
   Measured with tools/kicker_contrast.py, which samples composited pixels rather than
   declared colours; a photo backdrop cannot be checked any other way. */
.card.image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--ar-brown-dark), transparent 6%),
    color-mix(in srgb, var(--ar-brown-dark), transparent 22%) 42%,
    color-mix(in srgb, var(--ar-brown-dark), transparent 92%) 82%
  );
}

.card.image-card > div { position: relative; color: var(--ar-paper); }

/* --ar-gold is a dark gold tuned for the paper background; over a photograph it lands at
   1.8:1 even through the scrim, so the accent is lifted toward paper here. The body copy
   is held closer to opaque for the same reason: 26% transparency measured 3.27:1. */
.card.image-card .kicker { color: color-mix(in srgb, var(--ar-gold), var(--ar-paper) 48%); }
.card.image-card p { color: color-mix(in srgb, var(--ar-paper), transparent 10%); }

.card .icon-ring {
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid color-mix(in srgb, var(--ar-gold), transparent 40%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ar-gold);
  font-family: var(--ar-font-display);
}

/* ---------- checklist ---------- */

.checklist {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
}

.checklist li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
}

.checklist li::before {
  content: "\2713";
  color: var(--ar-gold);
  font-family: var(--ar-font-ui);
  font-size: 0.8rem;
  padding-top: 0.3rem;
}

/* ---------- seal band ---------- */

.quote-band {
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
  overflow: hidden;
}

.quote-band-inner {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  align-items: center;
  min-height: 24rem;
}

.seal-wrap {
  display: grid;
  place-items: center;
  min-height: 24rem;
}

/* height:auto or the 330 height attribute stays the used height and the box is taller
   than the artwork; the SVG's own aspect ratio keeps the seal round either way, but the
   dead space below it is real. */
.seal-wrap img { width: min(64%, 20rem); height: auto; opacity: 0.3; }

.quote-copy {
  padding: 3.5rem 0 3.5rem clamp(1.5rem, 5vw, 5rem);
  border-left: 1px solid color-mix(in srgb, var(--ar-gold), transparent 75%);
}

.quote-copy blockquote {
  font-family: var(--ar-font-display);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
  max-width: 18ch;
}

.quote-copy p { color: color-mix(in srgb, var(--ar-paper), transparent 30%); max-width: 38rem; }

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  background: color-mix(in srgb, var(--ar-white), transparent 44%);
}

.stat {
  padding: 2.4rem;
  border-right: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
}

.stat:last-child { border-right: 0; }

.stat strong {
  display: block;
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--ar-umber);
}

.stat span {
  font-family: var(--ar-font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ar-taupe);
}

/* ---------- side navigation and long-form content ---------- */

.side-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.side-nav {
  position: sticky;
  top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
}

.side-nav a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  font-family: var(--ar-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ar-taupe);
  text-decoration: none;
}

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

.content-stack > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }

.content-block h2 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.9rem 0 1rem;
}

.content-block h3 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 2rem 0 0.6rem;
}

/* About nests its module-grid inside a .content-block, where this rule and `.card h3` tie
   on specificity and source order hands it to the prose size. The result was the same card
   component rendering 20.16px on About and 23.76px everywhere else. */
.content-block .card h2,
.content-block .card h3 {
  font-size: 1.65rem;
  margin: 0.9rem 0 0.7rem;
}

.content-block p { color: var(--ar-taupe); }
.content-block p + p { margin-top: 1.1rem; }

.content-block ul:not(.checklist) {
  list-style: disc;
  padding-left: 1.2rem;
  margin-top: 1rem;
  color: var(--ar-taupe);
}

.content-block ul:not(.checklist) li + li { margin-top: 0.5rem; }
/* The list opens with a margin-top but closed with nothing, so a following paragraph was
   glued to the last bullet and read as a bullet-less extra item. Matches the p + p step. */
.content-block ul:not(.checklist) + p { margin-top: 1.1rem; }

/* ---------- accordion ---------- */

.accordion { border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%); }

.accordion details { border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%); }

.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 3rem 1.2rem 0;
  position: relative;
  font-family: var(--ar-font-display);
  font-size: 1.3rem;
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ar-gold);
  font-family: var(--ar-font-ui);
}

.accordion details[open] summary::after { content: "\2212"; }

.accordion details p {
  color: var(--ar-taupe);
  max-width: 52rem;
  padding: 0 2rem 1.3rem 0;
  margin: 0;
}

.accordion details p + p { padding-top: 0.9rem; }

/* ---------- articles ---------- */

.article-feature {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 30rem;
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  background: var(--ar-white);
}

.article-feature-image { background-size: cover; background-position: center; }

.article-feature-copy {
  padding: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-feature-copy h2 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.9rem 0 1.2rem;
}

.article-feature-copy p { color: var(--ar-taupe); }
.article-feature-copy .text-link { margin-top: 1.6rem; align-self: flex-start; }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem 2rem;
}

/* The cards are equal-height grid items but their headings wrap to different line counts,
   so the gold "Read more" sat at up to three different heights across one row. A column
   flex box with the link pushed to the bottom lines them up; align-self keeps the link at
   its own width rather than stretching the full column. */
.article-card {
  border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
}

.article-card[hidden] { display: none; }

.article-card .text-link { margin-top: auto; align-self: flex-start; padding-top: 1.1rem; }

/* p { margin: 0 } is global, so the status line was flush against the grid and read as a
   caption on the last card rather than a note about the whole set. */
.article-grid + .small-note { margin-top: 1.8rem; }

.article-card .tag {
  font-family: var(--ar-font-ui);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-taupe);
}

.article-card h3 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0.7rem 0;
}

.article-card p { color: var(--ar-taupe); margin-bottom: 1.1rem; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 2rem 0 3rem;
}

.filter-chip {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  background: transparent;
  color: inherit;
  padding: 0.6rem 1rem;
  font-family: var(--ar-font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--ar-transition), color var(--ar-transition);
}

.filter-chip[aria-pressed="true"] {
  background: var(--ar-brown-dark);
  border-color: var(--ar-brown-dark);
  color: var(--ar-paper);
}

.glossary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
}

.glossary a {
  padding: 1.1rem 0.8rem 1.1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  color: var(--ar-taupe);
  text-decoration: none;
}

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

.definition-list { border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%); }

.definition-list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
}

.definition-list dt {
  font-family: var(--ar-font-display);
  font-size: 1.35rem;
  scroll-margin-top: 6rem;
}

.definition-list dd { margin: 0; color: var(--ar-taupe); }

.article-body { max-width: 44rem; }
.article-body p + p { margin-top: 1.2rem; }
.article-body h2 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 2.4rem 0 0.9rem;
}
.article-body ul { list-style: disc; padding-left: 1.2rem; margin-top: 1rem; color: var(--ar-taupe); }
.article-body ul li + li { margin-top: 0.5rem; }
.article-body ul + p { margin-top: 1.2rem; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--ar-font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-taupe);
  margin-bottom: 1.4rem;
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  background: var(--ar-white);
}

.contact-details {
  padding: clamp(2rem, 4vw, 4rem);
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
}

.contact-details p,
.contact-details address {
  color: color-mix(in srgb, var(--ar-paper), transparent 28%);
  font-style: normal;
}

.contact-details a { color: inherit; }
.contact-details .section-title { margin: 0.9rem 0 1.2rem; }

/* Global `p { margin: 0 }` makes paragraph spacing opt-in, and this block never opted in,
   so Telephone, Email and Post stacked as one undifferentiated run. The address is
   included because it is the last of the same three-item list. */
.contact-details p + p,
.contact-details p + address { margin-top: 1.1rem; }

.contact-form { padding: clamp(2rem, 4vw, 4rem); }
.contact-form .section-title { margin: 0.9rem 0 1rem; }
.contact-form .lead { margin-bottom: 2rem; }

.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form button[type="submit"]:disabled { opacity: 0.65; cursor: wait; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.field { display: grid; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }

.field label {
  font-family: var(--ar-font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 30%);
  border-radius: 0;
  padding: 0.7rem 0;
  color: var(--ar-ink);
  font: inherit;
}

.field textarea { min-height: 8rem; resize: vertical; }

/* This used to set `outline: 0` on :focus, which at 0,2,1 beat the global :focus-visible
   ring at 0,1,0 and left keyboard users with only a 2.5:1 colour change to go on. The
   border and underline stay as the styled affordance; the ring comes back on top. */
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--ar-gold);
  box-shadow: 0 1px 0 var(--ar-gold);
}

.field-note { color: var(--ar-taupe); font-size: 0.85rem; }

.form-status {
  margin-top: 1.2rem;
  color: var(--ar-umber);
  font-size: 0.9rem;
}

.form-status[data-state] {
  padding: 1rem;
  border-left: 3px solid var(--ar-gold);
  background: var(--ar-paper);
}

.form-status[data-state="error"] { border-left-color: var(--ar-brown-dark); }

/* ---------- quiet callout ---------- */

.callout {
  border: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  background: color-mix(in srgb, var(--ar-white), transparent 45%);
  padding: clamp(1.75rem, 3vw, 3.2rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.callout h2 {
  font-family: var(--ar-font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.6rem 0;
}

.callout p { margin: 0; color: var(--ar-taupe); }

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

/* Halving span-4 alone leaves the 12-column rows not adding up: three span-4 cards became
   6+6+6, stranding the third at half width, and for-estates' 8+4+4+8 became 8 / 6+6 / 8
   with a third of each outer row empty. Every span the pages actually use is remapped
   here so each row still closes. */
@media (max-width: 1050px) {
  .module-grid .span-4 { grid-column: span 6; }
  /* An odd card left over from the 6+6 pairing takes the full row rather than sitting
     alone at half width. Only the three-card grids (contact, 404) can hit this. */
  .module-grid .span-4:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* span-8 only ever appears opposite a halved span-4 pair (for-estates), so it takes the
     full row. span-7/span-5 are left alone: they already total 12 on for-heirs and login. */
  .module-grid .span-8 { grid-column: 1 / -1; }

  .timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .page-hero .hero-copy { width: 62%; }
}

@media (max-width: 900px) {
  .editorial-grid,
  .section-head,
  .intro-panel-inner,
  .split-feature,
  .quote-band-inner,
  .article-feature,
  .contact-grid,
  .side-layout { grid-template-columns: 1fr; }

  .editorial-aside {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ar-line), transparent 45%);
    padding: 1.75rem 0 0;
  }

  .intro-panel { margin-top: -2rem; }
  .principles { grid-template-columns: 1fr; }

  .principle {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
  }

  .principle:last-child { border-bottom: 0; }
  .split-feature.reverse .feature-image { order: 0; }
  .feature-image { min-height: 20rem; }

  /* The 14ch measure keeps the title inside the narrow half of the two-column split; once
     .split-feature is a single column the cap just forces three lines and an orphan. */
  .feature-copy .section-title { max-width: none; }


  /* The side-nav becomes a horizontal scroller here, but with no fade, scrollbar or any
     other affordance it silently hid five of seven links on /terms. Wrapping keeps every
     link reachable and costs one extra row. */
  .side-nav { flex-wrap: wrap; overflow-x: visible; row-gap: 0.5rem; }

  .module-grid .span-4,
  .module-grid .span-5,
  .module-grid .span-6,
  .module-grid .span-7,
  .module-grid .span-8 { grid-column: 1 / -1; }

  .quote-copy {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ar-gold), transparent 75%);
    padding: 2.5rem 0 3rem;
  }

  .seal-wrap { min-height: 18rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%); }

  .side-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 1.2rem;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%);
    margin-bottom: 2rem;
  }

  .side-nav a { white-space: nowrap; border: 0; }
  .article-grid { grid-template-columns: 1fr 1fr; }
  .glossary { grid-template-columns: repeat(2, 1fr); }
  .definition-list > div { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (max-width: 767px) {
  .page-hero { min-height: 0; }
  .page-hero .hero-photo { inset: 0; background-position: 68% 40%; }

  .page-hero .hero-photo::before {
    background: linear-gradient(
      0deg,
      var(--ar-ivory) 6%,
      color-mix(in srgb, var(--ar-ivory), transparent 6%) 40%,
      color-mix(in srgb, var(--ar-ivory), transparent 40%) 100%
    );
  }

  .hero-dark .hero-photo::before {
    background: linear-gradient(
      0deg,
      var(--ar-brown-dark) 6%,
      color-mix(in srgb, var(--ar-brown-dark), transparent 6%) 44%,
      color-mix(in srgb, var(--ar-brown-dark), transparent 45%) 100%
    );
  }

  .page-hero .hero-inner { min-height: 0; align-items: flex-end; }
  .page-hero .hero-copy { width: 100%; padding-block: 12rem 3rem; }

  .article-grid { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  /* justify-items defaults to stretch, so collapsing the two-column callout left the
     inline-block button filling the whole 638px track with its label pinned left. */
  .callout { grid-template-columns: 1fr; justify-items: start; }

  /* The connector runs rightwards to the next step in the four-across row; stacked, it
     points at nothing and only three of the four steps carry it. */
  .timeline-step:not(:last-child)::after { display: none; }

  /* The 14ch/15ch measures exist to keep the title off the photo in the two-column hero.
     .hero-copy goes full width here, so the cap only forces a 345px heading into a 690px
     block, wrapping to four lines with an orphan. */
  .hero-title,
  .editorial-hero .hero-title { max-width: none; }
  .timeline { grid-template-columns: 1fr; gap: 1rem; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--ar-line), transparent 40%); }
  .stat:last-child { border-bottom: 0; }
  .glossary { grid-template-columns: 1fr; }
}

/* ---------- letter guide ---------- */
/* The consolidated guide uses the photographic and editorial treatments of the
   Register pages. Keep these rules inside this page's wrapper. */
.letter-guide {
  font-size: max(1.12rem, 16px);
  overflow-wrap: anywhere;
  --letter-muted: #66584b;
}

.letter-guide [id] { scroll-margin-top: 2rem; }
.letter-guide .eyebrow,
.letter-guide .kicker { font-size: 0.76rem; color: var(--letter-muted); }
.letter-guide .eyebrow::before { background: var(--ar-gold); }
.letter-guide .lead { color: var(--letter-muted); }

.letter-guide .letter-hero .hero-photo {
  inset-inline-start: 36%;
  background-position: 64% center;
}

.letter-guide .letter-hero .hero-photo::before {
  background: linear-gradient(90deg, var(--ar-ivory) 0%,
    color-mix(in srgb, var(--ar-ivory), transparent 5%) 15%,
    color-mix(in srgb, var(--ar-ivory), transparent 38%) 42%, transparent 78%);
}

.letter-guide .letter-hero .hero-inner { min-height: 35rem; }
.letter-guide .letter-hero .hero-copy { width: 54%; padding-block: 3.5rem 4.5rem; }
.letter-guide .breadcrumbs { flex-wrap: wrap; color: var(--letter-muted); margin-bottom: 3rem; }
.letter-guide .breadcrumbs span { opacity: 1; }
.letter-guide .hero-title {
  max-width: 12ch;
  margin: 1.1rem 0 0;
  font-size: clamp(3.3rem, 5.5vw, 5.5rem);
}
.letter-guide .letter-hero .lead { max-width: 32rem; margin: 0; color: var(--ar-umber); }
.letter-guide .letter-hero .rule { margin-block: 1.8rem; }

.letter-contents {
  border-block: 1px solid color-mix(in srgb, var(--ar-line), transparent 35%);
}
.letter-contents-inner { display: flex; align-items: center; gap: 3rem; padding-block: 0.9rem; }
.letter-contents .kicker { flex-shrink: 0; }
.letter-contents ol {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.letter-contents a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  color: var(--ar-umber);
  font-family: var(--ar-font-ui);
  font-size: 0.85rem;
  text-decoration: none;
}
.letter-contents a span { color: var(--letter-muted); font-size: 0.75rem; }
.letter-contents a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.letter-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.letter-explanation .section-title { max-width: 15ch; margin: 1.3rem 0 1.8rem; }
.letter-explanation p { max-width: 34rem; }
.letter-explanation p + p { margin-top: 1.3rem; }

.letter-check {
  background: var(--ar-brown-dark);
  color: var(--ar-paper);
  padding: clamp(2rem, 3.5vw, 3.5rem);
}
.letter-guide .letter-check .eyebrow { color: #cfb489; }
.letter-check h2 { font-size: clamp(2rem, 2.6vw, 2.65rem); line-height: 1.12; margin: 1.2rem 0; }
.letter-check p { color: #e0d7cb; }
.letter-check-list { list-style: none; margin: 1.8rem 0 1.4rem; padding: 0; }
.letter-check-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: 1rem;
  border-top: 1px solid #57483b;
}
.letter-check-list li > span { color: #cfb489; font-family: var(--ar-font-ui); font-size: 0.76rem; padding-top: 0.3rem; }
.letter-check-list strong { font-weight: 500; overflow-wrap: anywhere; }
.letter-check a { color: var(--ar-paper); text-underline-offset: 0.2em; }
.letter-check a:hover { color: #cfb489; }
.letter-check .letter-check-note { padding-top: 1.3rem; border-top: 1px solid #57483b; font-size: 0.95em; }

.letter-guide .section-head { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); }
.letter-guide .section-head .section-title { margin-top: 1.3rem; }
.letter-guide .section-head .lead { max-width: 30rem; }
.letter-steps { list-style: none; margin: 0; padding: 0; gap: 2rem; }
.letter-steps .timeline-step { padding: 1.5rem 0 0; }
.letter-steps .timeline-step::before {
  font-family: var(--ar-font-display);
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.7rem;
  color: var(--letter-muted);
}
.letter-steps .timeline-step::after { display: none; }
.letter-steps .timeline-step h3 { font-size: 1.7rem; margin-bottom: 1rem; }
.letter-steps .timeline-step p { font-size: 1em; color: var(--letter-muted); }

.letter-faq-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(3rem, 7vw, 7rem); }
.letter-faq-heading .section-title { max-width: 11ch; margin-top: 1.3rem; }
.letter-guide .accordion summary { font-size: 1.55rem; line-height: 1.4; padding-block: 1.5rem; }
.letter-guide .accordion summary::after { color: var(--letter-muted); }
.letter-guide .accordion details p { color: var(--letter-muted); padding-bottom: 1.6rem; }
.letter-guide .accordion details p a { text-underline-offset: 0.2em; }

.letter-contact { padding-bottom: var(--ar-section-pad); }
.letter-contact-inner { grid-template-columns: auto minmax(0, 1fr) auto; background: var(--ar-ivory); gap: 2rem; }
.letter-contact .letter-icon { width: 64px; height: 64px; padding: 18px; color: var(--ar-gold); }
.letter-contact-copy { max-width: 42rem; }
.letter-contact-copy h2 { margin: 0.8rem 0 1rem; font-size: clamp(2rem, 3vw, 2.8rem); }
.letter-contact-copy p { color: var(--letter-muted); }
.letter-contact-copy a { text-underline-offset: 0.2em; }
.letter-contact .btn { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 48px; max-width: 100%; font-size: 0.76rem; }
.letter-contact .btn span { font-size: 1.1rem; }

@media (max-width: 1050px) {
  .letter-guide .letter-hero .hero-copy { width: 63%; }
  .letter-contents-inner { gap: 1.5rem; }
  .letter-contents .kicker { display: none; }
  .letter-intro-grid { gap: 3rem; }
  .letter-contact-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .letter-contact .letter-icon { display: none; }
}

@media (max-width: 800px) {
  .letter-intro-grid,
  .letter-guide .section-head,
  .letter-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .letter-explanation .section-title,
  .letter-faq-heading .section-title { max-width: none; }
  .letter-explanation p { max-width: 42rem; }
  .letter-guide .section-head .lead { max-width: 38rem; }
  .letter-guide .letter-check { padding: 2.5rem; }
}

@media (max-width: 767px) {
  .letter-guide .letter-hero .hero-photo { inset: 0; background-position: 68% top; }
  .letter-guide .letter-hero .hero-photo::before {
    background: linear-gradient(0deg, var(--ar-ivory) 4%,
      var(--ar-ivory) 37%, color-mix(in srgb, var(--ar-ivory), transparent 4%) 55%,
      color-mix(in srgb, var(--ar-ivory), transparent 68%) 100%);
  }
  .letter-guide .letter-hero .hero-inner { min-height: 0; }
  .letter-guide .letter-hero .hero-copy { width: 100%; padding-block: 8rem 3rem; }
  .letter-guide .breadcrumbs { margin-bottom: 2rem; }
  .letter-guide .hero-title { font-size: clamp(3.1rem, 8vw, 4.5rem); max-width: 12ch; }
  .letter-guide .letter-hero .lead { max-width: 36rem; }
  .letter-contents-inner { padding-block: 0.8rem; }
  .letter-contents ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.1rem 1rem; }
  .letter-contents a { font-size: 0.85rem; gap: 0.55rem; }
  .letter-introduction,
  .letter-next,
  .letter-questions { padding-block: 3.75rem; }
  .letter-guide .letter-check { padding: 1.8rem; }
  .letter-guide .section-head { margin-bottom: 2.5rem; gap: 1.5rem; }
  .letter-steps { gap: 0; }
  .letter-steps .timeline-step { padding: 1.5rem 0 1.8rem 3.5rem; }
  .letter-steps .timeline-step::before { position: absolute; left: 0; top: 1.5rem; font-size: 2.2rem; }
  .letter-steps .timeline-step h3 { font-size: 1.6rem; }
  .letter-steps .timeline-step:last-child { padding-bottom: 0; }
  .letter-faq-grid { gap: 2rem; }
  .letter-guide .accordion summary { font-size: 1.4rem; padding-right: 2rem; }
  .letter-guide .accordion details p { padding-right: 0; }
  .letter-contact { padding-bottom: 3.75rem; }
  .letter-contact-inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 1.8rem; }
}