/* Subpages compose the shared detail, side-navigation and content patterns. */
.subpage-main {
  box-sizing: border-box;
  inline-size: min(100%, calc(var(--fj-container-max) + var(--fj-gutter) * 2));
  margin-inline: auto;
  padding: var(--fj-space-10) var(--fj-gutter) var(--fj-space-20);
}
.subpage-note {
  margin: var(--fj-space-0);
  color: var(--fj-color-text-muted);
  font-size: var(--fj-font-size-xs);
}
.subpage-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--fj-space-3);
  margin: var(--fj-space-0);
  color: var(--fj-color-brand-text);
  font-weight: var(--fj-font-weight-semibold);
}
.subpage-eyebrow img {
  inline-size: var(--fj-section-header-mark-size);
  block-size: var(--fj-section-header-mark-size);
  object-fit: contain;
}
.subpage-main h1 {
  margin: var(--fj-space-0);
  color: var(--fj-color-heading);
  font-family: var(--fj-font-family-heading);
  font-size: var(--fj-font-size-4xl);
  line-height: var(--fj-line-height-tight);
  text-wrap: balance;
}
.subpage-sidebar-layout,
.subpage-service-layout,
.subpage-editorial-layout {
  display: grid;
  gap: var(--fj-gutter);
  align-items: start;
}
.subpage-sidebar-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
.subpage-service-layout,
.subpage-editorial-layout {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.subpage-main .archive-section {
  inline-size: 100%;
  padding: var(--fj-space-0);
}
.subpage-stack,
.subpage-service-summary {
  display: grid;
  gap: var(--fj-space-6);
  min-inline-size: 0;
}
.subpage-stack > .archive-grid,
.subpage-main > .archive-grid {
  margin-block-end: var(--fj-space-8);
}
.subpage-panel a {
  overflow-wrap: anywhere;
}
.subpage-panel {
  padding: var(--fj-space-6);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-color-surface);
}
.subpage-panel,
.subpage-prose {
  scroll-margin-block-start: calc(var(--archive-sticky-offset, var(--archive-header-height, var(--fj-space-32))) + var(--fj-space-4));
}
/* Space adjacent actions, including when they wrap onto a second line. */
.subpage-panel > fj-button {
  margin-inline-end: var(--fj-space-3);
  margin-block-start: var(--fj-space-2);
}
.subpage-main h2 {
  margin-block: var(--fj-space-0) var(--fj-space-4);
  font-size: var(--fj-font-size-xl);
  color: var(--fj-color-heading);
  text-wrap: balance;
}
.subpage-main p,
.subpage-main li,
.subpage-main dd {
  line-height: var(--fj-line-height-relaxed);
}
.subpage-main p {
  margin-block: var(--fj-space-0) var(--fj-space-4);
}
.subpage-main ul {
  padding-inline-start: var(--fj-space-6);
}
.subpage-main dt {
  font-weight: var(--fj-font-weight-semibold);
  color: var(--fj-color-heading);
}
.subpage-main dd {
  margin: var(--fj-space-1) var(--fj-space-0) var(--fj-space-4);
}
.subpage-feature {
  margin: var(--fj-space-0) var(--fj-space-10);
}
.subpage-feature img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: calc(var(--fj-space-32) * 4);
  object-fit: cover;
  border-radius: var(--fj-radius-lg);
}
.subpage-feature figcaption {
  margin-block-start: var(--fj-space-3);
  color: var(--fj-color-text-muted);
  font-size: var(--fj-font-size-xs);
}
.subpage-related {
  margin-block-start: var(--fj-space-20);
  margin-inline: calc(-1 * var(--fj-gutter));
  padding: var(--fj-space-12) var(--fj-gutter);
  background: var(--fj-color-surface-sunken);
  display: grid;
  gap: var(--fj-space-6);
}
.subpage-related > h2 {
  margin: var(--fj-space-0);
}
@media (width < 40rem) {
  .subpage-related {
    margin-block-start: var(--fj-space-12);
    padding-block: var(--fj-space-8);
  }
}
@media (width < 64rem) {
  .subpage-sidebar-layout,
  .subpage-service-layout,
  .subpage-editorial-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 40rem) {
  .subpage-main {
    padding-inline: var(--fj-gutter);
  }
  .subpage-main h1 {
    font-size: var(--fj-font-size-3xl);
  }
}

.subpage-index {
  position: sticky;
  inset-block-start: calc(var(--archive-sticky-offset, var(--archive-header-height, var(--fj-space-32))) + var(--fj-space-10));
}
@media (width < 64rem), (max-height: 40rem) {
  .subpage-index {
    position: static;
  }
}

/* Search keeps its page heading accessible without repeating the breadcrumb. */
.archive-search-title {
  position: absolute;
  inline-size: var(--fj-border-width);
  block-size: var(--fj-border-width);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.subpage-main:has(.archive-search) {
  padding-block-start: var(--fj-space-4);
}
.subpage-main:has(.archive-search) .archive-search {
  margin-block-start: var(--fj-space-4);
}
.archive-search__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fj-space-3);
}
.archive-search__controls fj-search-bar {
  flex: 1 1 calc(var(--fj-space-32) * 2);
  min-inline-size: 0;
}
.archive-search__controls fj-button {
  flex-shrink: 0;
}

/* Allow the search grid to shrink below the longest result label. */
.archive-search {
  min-inline-size: var(--fj-space-0);
  grid-template-columns: minmax(0, 1fr);
}

/* Search separates the input surface from solid result cards with system tones. */
.archive-search {
  gap: var(--fj-space-6);
}
.archive-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: var(--fj-space-0);
  gap: var(--fj-space-4);
  padding: var(--fj-space-6);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-color-surface-sunken);
  color: var(--fj-color-text);
}
.archive-search__form h2,
.archive-search__form p,
.archive-search__summary h2,
.archive-search__summary p {
  margin: var(--fj-space-0);
}
.archive-search__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fj-space-3);
}
.archive-search__results {
  gap: var(--fj-space-4);
}
.archive-search__results h3 {
  margin: var(--fj-space-0);
  font: inherit;
}
.archive-search__results mark {
  background: var(--fj-color-brand-soft);
  color: var(--fj-color-brand-text);
}
.archive-search__results [slot='description'] {
  color: var(--fj-color-text);
}
#search-more,
#search-retry {
  justify-self: start;
}
#search-more[hidden] {
  display: none;
}
@media (max-width: 40rem) {
  .archive-search__form {
    padding: var(--fj-space-4);
  }
}

.archive-search__form fj-search-bar {
  inline-size: 100%;
  max-inline-size: 100%;
}

/* Use the system brand fill, matching the other brand actions, not its darker active tone. */
.archive-search__form fj-search-bar::part(submit) {
  background: var(--fj-color-brand);
}
.archive-search__form fj-search-bar::part(submit):hover {
  background: var(--fj-color-brand-hover);
}
.archive-search__form fj-search-bar::part(submit):active {
  background: var(--fj-color-brand-active);
}

/* Last-child margins must not double the panel's bottom padding. */
.subpage-panel > :last-child,
.subpage-prose > :last-child {
  margin-block-end: var(--fj-space-0);
}

/* Story images and context share one reading surface. */
.subpage-panel > .subpage-feature {
  margin-block: var(--fj-space-6);
}
.subpage-prose {
  margin-block-start: var(--fj-space-6);
}
.subpage-prose h3 {
  margin-block: var(--fj-space-0) var(--fj-space-3);
  color: var(--fj-color-heading);
  font-size: var(--fj-font-size-lg);
}
.subpage-related fj-news-card [slot='title'],
.archive-grid fj-news-card [slot='title'] {
  margin: var(--fj-space-0);
  font: inherit;
}
.subpage-editorial-layout > .subpage-stack .subpage-related {
  margin-block-start: var(--fj-space-0);
}

@media (min-width: 40.001rem) {
  .subpage-main .archive-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A continuous reading column with a separate index, without stacked panels. */
.subpage-article {
  display: grid;
  gap: var(--fj-space-10);
  min-inline-size: var(--fj-space-0);
}
.subpage-article .subpage-feature {
  margin: var(--fj-space-0);
}
.subpage-article .subpage-feature img {
  max-block-size: none;
  object-fit: contain;
}
.subpage-article .subpage-prose a {
  overflow-wrap: anywhere;
}
.subpage-article-layout {
  column-gap: var(--fj-space-12);
}
.subpage-article-layout .subpage-index h2 {
  margin-block: var(--fj-space-0) var(--fj-space-4);
  font-size: var(--fj-font-size-sm);
  font-weight: var(--fj-font-weight-medium);
  color: var(--fj-color-text-muted);
}
.subpage-related > .archive-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (width < 64rem) {
  .subpage-related > .archive-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width < 40rem) {
  .subpage-related > .archive-grid--three {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - var(--fj-space-8));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .subpage-related fj-news-card {
    scroll-snap-align: start;
  }
}

.subpage-article h2 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Contact fields share one surface; the map has its own full-width section. */
.contact-page, #contact-form, .contact-location, .contact-message {
  display: grid;
  gap: var(--fj-space-6);
  min-inline-size: var(--fj-space-0);
}
.contact-page { gap: var(--fj-space-16); }
.contact-page > section { display: grid; gap: var(--fj-space-6); }
.contact-page h2, .contact-page h3, .contact-location p { margin: var(--fj-space-0); }
.contact-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fj-space-6); }
.contact-channels fj-service-card { min-inline-size: var(--fj-space-0); }
.contact-channels fj-service-card::part(description) { min-block-size: var(--fj-space-0); overflow-wrap: anywhere; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); gap: var(--fj-space-10); background: var(--fj-color-surface-sunken); padding: var(--fj-space-10); border-radius: var(--fj-radius-lg); }
.contact-message { order: -1; gap: var(--fj-space-8); align-content: start; }
.contact-figure { margin: var(--fj-space-0); min-inline-size: var(--fj-space-0); overflow: hidden; border-radius: var(--fj-radius-md); }
.contact-figure img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.contact-required { color: var(--fj-color-brand-text); margin-inline-start: var(--fj-space-1); font-weight: var(--fj-font-weight-medium); }
.contact-optional { color: var(--fj-color-text-muted); font-size: var(--fj-font-size-xs); font-weight: var(--fj-font-weight-regular); margin-inline-start: var(--fj-space-2); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fj-space-6) var(--fj-space-8); }
.contact-field { display: grid; align-content: start; gap: var(--fj-space-3); min-inline-size: var(--fj-space-0); }
.contact-field > span:first-child { font-weight: var(--fj-font-weight-medium); }
.contact-field fj-input, .contact-field fj-textarea { inline-size: 100%; min-inline-size: var(--fj-space-0); }
.contact-field fj-input:is([name="email"], [name="phone"])::part(input) { direction: ltr; text-align: end; }
.contact-field fj-icon { color: var(--fj-color-brand); }
.contact-error { color: var(--fj-color-danger); font-size: var(--fj-font-size-sm); }
.contact-error:empty, #contact-feedback[hidden] { display: none; }
.contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fj-space-4); }
.contact-map-frame { --map-h: calc(var(--fj-space-32) * 4); block-size: var(--map-h); position: relative; display: block; container-type: inline-size; direction: ltr; min-inline-size: var(--fj-space-0); overflow: hidden; border-radius: var(--fj-radius-lg); background: var(--fj-color-surface-sunken); }
/* The map image is physical, so its canvas is centred on the pin in a left-to-right frame. */
.contact-map-canvas { --map-w: max(100cqw, calc(var(--map-h) * 7 / 3)); position: absolute; inset-block-start: var(--fj-space-0); inset-inline-start: clamp(100cqw - var(--map-w), 50cqw - var(--map-w) * 0.4546, 0px); inline-size: var(--map-w); aspect-ratio: 1792 / 768; }
.contact-map-canvas img { display: block; inline-size: 100%; block-size: 100%; }
.contact-map-pin { position: absolute; inset-inline-start: 45.46%; inset-block-start: 39.38%; transform: translate(-50%, -100%); font-size: var(--fj-space-12); color: var(--fj-color-brand); }
.contact-map-credit { position: absolute; inset-block-end: var(--fj-space-2); inset-inline-end: var(--fj-space-2); padding: var(--fj-space-1) var(--fj-space-2); border-radius: var(--fj-radius-sm); background: var(--fj-color-surface); color: var(--fj-color-text-muted); font-size: var(--fj-font-size-xs); }
.contact-page a { overflow-wrap: anywhere; }
@media (width < 64rem) {
  .contact-channels { grid-template-columns: minmax(0, 1fr); }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-figure { display: none; }
}
@media (width < 40rem) {
  .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .contact-layout { padding: var(--fj-space-6); }
  .contact-page { gap: var(--fj-space-10); }
  .contact-map-frame { --map-h: calc(var(--fj-space-32) * 3); }
}

/* Keep introductory copy and its image on one continuous surface. */
.subpage-intro { align-items: center; }
.subpage-intro > .subpage-feature { margin: var(--fj-space-0); }
.subpage-intro > .subpage-prose > p:last-child { margin-block-end: var(--fj-space-0); }

/* Preserve the entire historical sheet and its marginal information. */
.subpage-map img { max-block-size: none; object-fit: contain; }

.content-listing { display: grid; gap: var(--fj-space-6); }
.listing-tools {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fj-space-4);
}
.content-listing .listing-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-listing [hidden] { display: none; }
.listing-tools > * { min-inline-size: var(--fj-space-0); }
@media (width < 40rem) {
  .listing-tools, .content-listing .listing-results { grid-template-columns: minmax(0, 1fr); }
  .listing-reset { justify-self: start; }
}

.listing-results fj-event-card [slot="title"] { margin: var(--fj-space-0); font: inherit; }

/* The inactive reset action leaves no empty column in the filter toolbar. */
.listing-tools:not(:has(.listing-reset:not([hidden]))) {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (width < 40rem) {
  .listing-tools:not(:has(.listing-reset:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
}

/* Event facts and editorial content follow one shared spacing rhythm. */
.event-detail { display: grid; gap: var(--fj-space-10); }
.event-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fj-space-6);
  margin: var(--fj-space-0);
  padding-block-end: var(--fj-space-6);
  border-block-end: var(--fj-border-width-thin) solid var(--fj-color-border-strong);
}
.event-facts > div { display: flex; align-items: start; gap: var(--fj-space-3); }
.event-facts fj-icon { color: var(--fj-color-brand-text); font-size: var(--fj-font-size-xl); flex-shrink: 0; }
.event-facts dt { margin: var(--fj-space-0) var(--fj-space-0) var(--fj-space-2); font-size: var(--fj-font-size-sm); color: var(--fj-color-text-muted); }
.event-facts dd { margin: var(--fj-space-0); font-weight: var(--fj-font-weight-semibold); }
.event-editorial { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--fj-space-10); align-items: start; }
.event-copy { display: grid; gap: var(--fj-space-8); min-inline-size: var(--fj-space-0); }
.event-copy .subpage-prose h2 { margin-block: var(--fj-space-0) var(--fj-space-4); }
.event-copy .subpage-prose p:last-child { margin-block-end: var(--fj-space-0); }
.event-visual { display: grid; gap: var(--fj-space-3); min-inline-size: var(--fj-space-0); }
.event-visual .subpage-feature { margin: var(--fj-space-0); }
.event-actions { display: flex; justify-content: start; }
.event-actions fj-button { inline-size: fit-content; }
@media (width < 48rem) {
  .event-editorial { grid-template-columns: minmax(0, 1fr); gap: var(--fj-space-8); }
  .event-visual { grid-row: 1; }
  .event-facts { grid-template-columns: minmax(0, 1fr); gap: var(--fj-space-4); }
}

/* Contribution guidance uses an open editorial introduction and three clear steps. */
.contribution-page { display: grid; gap: var(--fj-space-16); }
.contribution-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fj-space-12);
  align-items: center;
}
.contribution-intro-copy { min-inline-size: var(--fj-space-0); }
.contribution-intro-copy fj-button { margin-block-start: var(--fj-space-4); }
.contribution-page .contribution-image { margin: var(--fj-space-0); }
.contribution-image img { inline-size: 100%; max-block-size: none; }
.contribution-preparation { display: grid; gap: var(--fj-space-10); }
.contribution-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fj-space-10);
  margin: var(--fj-space-0);
  padding-inline-start: var(--fj-space-6);
}
.contribution-steps li { padding-inline-start: var(--fj-space-2); }
.contribution-steps li::marker { color: var(--fj-color-brand-text); font-weight: var(--fj-font-weight-bold); }
.contribution-steps fj-icon { display: block; font-size: var(--fj-space-10); color: var(--fj-color-brand-text); margin-block-end: var(--fj-space-6); }
.contribution-steps h3 { font-size: var(--fj-font-size-lg); margin-block: var(--fj-space-0) var(--fj-space-4); }
.contribution-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fj-space-8);
  padding: var(--fj-space-10);
  background: var(--fj-color-surface-sunken);
}
.contribution-next p { margin-block-end: var(--fj-space-0); }
.contribution-next fj-button { flex-shrink: 0; }
@media (width < 64rem) {
  .contribution-intro { gap: var(--fj-space-8); }
  .contribution-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 40rem) {
  .contribution-page { gap: var(--fj-space-12); }
  .contribution-intro { grid-template-columns: minmax(0, 1fr); }
  .contribution-next { flex-direction: column; align-items: start; padding: var(--fj-space-6); }
}

/* A supporting image balances the questions without delaying access to them. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--fj-space-10);
  align-items: start;
}
.faq-layout > fj-accordion { grid-column: 1; grid-row: 1; min-inline-size: var(--fj-space-0); }
.faq-layout > .faq-visual { grid-column: 2; grid-row: 1; margin: var(--fj-space-0); }
.faq-visual img { aspect-ratio: 1; object-fit: cover; }
@media (width < 64rem) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--fj-space-6); }
  .faq-layout > .faq-visual, .faq-layout > fj-accordion { grid-column: auto; grid-row: auto; }
  .faq-visual img { aspect-ratio: 1; }
}

/* Maps are reading surfaces, not decorative thumbnails in an introduction. */
.map-reading { display: grid; gap: var(--fj-space-12); }
.map-reading-heading, .map-reading-next { display: flex; align-items: center; justify-content: space-between; gap: var(--fj-space-8); }
.map-reading h2, .map-reading h3, .map-reading p { margin: var(--fj-space-0); }
.map-reading-heading h2 { margin-block-start: var(--fj-space-3); }
.map-reading-heading fj-button { flex-shrink: 0; }
.map-reading-sheet { margin: var(--fj-space-0); }
.map-reading-sheet img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--fj-radius-lg); }
.map-reading-guide { display: grid; gap: var(--fj-space-10); }
.map-reading-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--fj-space-10); }
.map-reading-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fj-space-10); margin: var(--fj-space-0); padding-inline-start: var(--fj-space-6); }
.map-reading-steps li { padding-inline-start: var(--fj-space-2); }
.map-reading-steps li::marker { color: var(--fj-color-brand-text); font-weight: var(--fj-font-weight-bold); }
.map-reading-steps h3 { font-size: var(--fj-font-size-lg); margin-block-end: var(--fj-space-4); }
.map-reading-next { background: var(--fj-color-surface-sunken); padding: var(--fj-space-10); }
.map-reading-next p { margin-block-start: var(--fj-space-4); }
.map-reading-actions { display: flex; flex-wrap: wrap; gap: var(--fj-space-4); flex-shrink: 0; }
.map-reading-record { color: var(--fj-color-text-muted); font-size: var(--fj-font-size-sm); }
.map-reading-record summary { cursor: pointer; inline-size: fit-content; }
.map-reading-record p { margin-block-start: var(--fj-space-4); }
@media (width < 64rem) {
  .map-reading-heading, .map-reading-next { flex-direction: column; align-items: start; }
  .map-reading-intro, .map-reading-steps { grid-template-columns: minmax(0, 1fr); gap: var(--fj-space-6); }
}
@media (width < 40rem) {
  .map-reading { gap: var(--fj-space-8); }
  .map-reading-next { padding: var(--fj-space-6); }
}

/* About uses the design system's vertical selection menu and a single region. */
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--fj-space-12); align-items: start; }
.about-navigation { position: sticky; inset-block-start: calc(var(--archive-sticky-offset, var(--archive-header-height, var(--fj-space-32))) + var(--fj-space-10)); }
.about-navigation, .about-content { min-inline-size: var(--fj-space-0); }
.about-content { min-block-size: max(var(--fj-space-0), calc(100svh - var(--archive-sticky-offset, var(--fj-space-32)) - var(--fj-space-16))); }
.about-panel { display: block; }
.about-panel h3 { margin-block: var(--fj-space-10) var(--fj-space-4); }
.about-panel[hidden], .about-navigation fj-side-nav[hidden] { display: none; }
.about-panel h2 { margin-block: var(--fj-space-0) var(--fj-space-6); }
.about-panel p, .about-panel ul { margin-block: var(--fj-space-0) var(--fj-space-6); }
.about-panel fj-button { margin-inline-end: var(--fj-space-3); margin-block-end: var(--fj-space-3); }
.about-panel .about-image { margin: var(--fj-space-8) var(--fj-space-0) var(--fj-space-0); }
.about-image img { aspect-ratio: var(--fj-media-aspect-wide); object-fit: cover; }
@media (width < 64rem) {
  .about-layout { grid-template-columns: minmax(0, 1fr); gap: var(--fj-space-8); }
  .about-navigation { position: static; }
}

/* Collection guides separate prose, reading steps and practical notes by rhythm. */
.collection-guide { display: grid; gap: var(--fj-space-16); }
.collection-guide h2, .collection-guide h3, .collection-guide p { margin: var(--fj-space-0); }
.collection-reading { display: grid; gap: var(--fj-space-8); }
.collection-reading-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fj-space-10); padding-inline-start: var(--fj-space-6); margin: var(--fj-space-0); }
.collection-reading-steps li { padding-inline-start: var(--fj-space-2); }
.collection-reading-steps li::marker { color: var(--fj-color-brand-text); font-weight: var(--fj-font-weight-bold); }
.collection-reading-steps h3 { margin-block-end: var(--fj-space-4); font-size: var(--fj-font-size-lg); }
.collection-notes { display: grid; gap: var(--fj-space-8); background: var(--fj-color-surface-sunken); padding: var(--fj-space-10); }
.collection-notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fj-space-8); margin: var(--fj-space-0); }
.collection-notes-grid dt { font-weight: var(--fj-font-weight-semibold); margin-block-end: var(--fj-space-3); }
.collection-notes-grid dd { margin: var(--fj-space-0); }
.collection-next { display: flex; justify-content: space-between; align-items: center; gap: var(--fj-space-8); }
.collection-next p { margin-block-start: var(--fj-space-4); }
.collection-next-actions { display: flex; flex-wrap: wrap; gap: var(--fj-space-4); flex-shrink: 0; }
@media (width < 64rem) {
  .collection-reading-steps, .collection-notes-grid { grid-template-columns: minmax(0, 1fr); gap: var(--fj-space-6); }
  .collection-next { flex-direction: column; align-items: start; }
}
@media (width < 40rem) {
  .collection-guide { gap: var(--fj-space-10); }
  .collection-notes { padding: var(--fj-space-6); }
}

/* Page rhythm: sections are farther apart than their own headings and content. */
.subpage-main {
  --archive-section-space: var(--fj-space-24);
  --archive-content-space: var(--fj-space-8);
  padding-block-start: var(--fj-space-16);
}
.collection-guide, .map-reading, .contribution-page, .contact-page {
  gap: var(--archive-section-space);
}
.collection-reading, .map-reading-guide, .contribution-preparation {
  gap: var(--archive-content-space);
  padding-block: var(--fj-space-12);
  padding-inline: var(--fj-gutter);
  margin-inline: calc(var(--fj-gutter) * -1);
  background: var(--fj-color-surface);
}
.collection-reading-steps, .map-reading-steps, .contribution-steps {
  column-gap: var(--fj-space-16);
  row-gap: var(--fj-space-8);
}
.collection-notes { gap: var(--archive-content-space); padding: var(--fj-space-12); }
.collection-notes-grid { gap: var(--fj-space-10); }
.event-detail { gap: var(--fj-space-12); }
.event-copy { gap: var(--fj-space-10); }
.subpage-main > .subpage-stack { gap: var(--fj-space-12); }
.subpage-main :is(.collection-next-actions, .map-reading-actions, .contact-actions, .listing-tools) > * {
  min-inline-size: var(--fj-space-0);
  max-inline-size: 100%;
}
.subpage-main :is(.collection-next-actions, .map-reading-actions) { flex-shrink: 1; }
.subpage-main fj-button { max-inline-size: 100%; }
@media (width < 64rem) {
  .subpage-main { --archive-section-space: var(--fj-space-16); padding-block-start: var(--fj-space-12); }
  .collection-reading, .map-reading-guide, .contribution-preparation { padding-block: var(--fj-space-10); }
  .collection-notes { padding: var(--fj-space-8); }
  .contribution-next { flex-direction: column; align-items: start; }
}
@media (width < 40rem) {
  .subpage-main { --archive-section-space: var(--fj-space-12); --archive-content-space: var(--fj-space-6); padding-block-start: var(--fj-space-8); padding-block-end: var(--fj-space-12); }
  .collection-reading, .map-reading-guide, .contribution-preparation { padding-block: var(--fj-space-8); }
  .collection-notes, .map-reading-next { padding: var(--fj-space-6); }
  .subpage-main > .subpage-stack { gap: var(--fj-space-8); }
  .contact-layout { padding: var(--fj-space-4); }
  .event-facts { gap: var(--fj-space-6); }
}
@media (max-height: 40rem) {
  .about-navigation { position: static; }
}

/* All section surfaces stay on the same content edges. */
.collection-reading, .map-reading-guide, .contribution-preparation, .subpage-related {
  margin-inline: var(--fj-space-0);
}