/* Archive home page layout. Every value is a design token (var(--fj-...)). */
body {
  margin: 0;
}

    /* Skip link (WCAG bypass blocks): hidden above the viewport until focused. */
    .skip-link {
      position: fixed;
      inset-block-start: var(--fj-space-4);
      inset-inline-start: var(--fj-space-4);
      z-index: var(--fj-z-tooltip);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: var(--fj-space-10);
      padding-block: var(--fj-space-3);
      padding-inline: var(--fj-space-5);
      border: var(--fj-border-width) solid var(--fj-color-border-strong);
      border-radius: var(--fj-radius-bar);
      background: var(--fj-color-surface-raised);
      color: var(--fj-color-heading);
      font-size: var(--fj-font-size-sm);
      font-weight: var(--fj-font-weight-bold);
      text-decoration: none;
      transform: translateY(calc(-100% - var(--fj-space-4)));
      outline: var(--fj-border-width-thick) solid transparent;
      outline-offset: var(--fj-border-width-thick);
      transition: transform var(--fj-transition-base),
        background-color var(--fj-transition-fast),
        outline-color var(--fj-transition-fast);
    }

    .skip-link:focus,
    .skip-link:focus-visible {
      transform: translateY(var(--fj-space-0));
    }

    .skip-link:focus-visible {
      outline-color: var(--fj-color-focus-ring);
    }

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

    .archive-page {
      min-block-size: 100dvh;
      overflow-inline: clip;
      background: var(--fj-color-background);
      color: var(--fj-color-text);
      font-family: var(--fj-font-family-base);
    }

    .archive-logo {
      display: block;
      block-size: var(--fj-space-12);
      inline-size: auto;
      max-inline-size: 38vw;
      object-fit: contain;
    }

    /* Keep the official identity on an opaque white surface in both themes.
       The navigation remains over the hero, outside the identity band. */
    .archive-page fj-header {
      position: sticky;
      inset-block-start: var(--fj-space-0);
    }

    .archive-page fj-header::part(header) {
      background: var(--fj-color-white);
      --fj-color-background: var(--fj-color-white);
      --fj-gradient-header-scroll: none;
    }

    .archive-page fj-header::part(menu-toggle) {
      --fj-color-glass-text: var(--fj-color-black);
      --fj-color-glass: var(--fj-color-neutral-50);
      --fj-color-glass-control-hover: var(--fj-color-neutral-100);
    }

    .archive-page fj-header::part(bottom) {
      position: absolute;
      inset-block-start: 100%;
      inset-inline: var(--fj-space-0);
      max-inline-size: calc(100% - var(--fj-space-10) * 2);
      margin-inline: auto;
      padding-block-start: var(--fj-space-5);
    }

    @media (max-width: 48rem) {
      .archive-page fj-header::part(bottom) {
        max-inline-size: calc(100% - var(--fj-space-4) * 2);
        max-block-size: calc(100svh - var(--fj-space-32));
        overflow-block: auto;
        overscroll-behavior-block: contain;
        scrollbar-width: none;
        padding-block-end: var(--fj-space-4);
      }
    }

    .archive-brand {
      display: flex;
      align-items: center;
      gap: var(--fj-space-2);
      color: var(--fj-color-black);
      text-align: start;
    }

    .archive-brand__mark {
      display: block;
      flex: none;
      inline-size: var(--fj-space-16);
      block-size: var(--fj-space-10);
      /* Crop only the transparent square canvas around the fortress. */
      object-fit: cover;
    }

    .archive-brand__text {
      display: grid;
      gap: var(--fj-space-1);
      line-height: var(--fj-line-height-tight);
    }

    .archive-brand__name {
      font-size: var(--fj-font-size-md);
      font-weight: var(--fj-font-weight-semibold);
      line-height: var(--fj-line-height-normal);
    }

    .archive-brand__latin {
      font-size: var(--fj-font-size-xs);
    }

    .archive-page fj-header::part(bottom) {
      gap: var(--fj-space-4);
      min-inline-size: 0;
    }

    .archive-page fj-nav {
      min-inline-size: 0;
    }

    .archive-hero-cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--fj-gutter);
    }

    .archive-section {
      box-sizing: border-box;
      inline-size: min(100%, var(--fj-container-max));
      margin-inline: auto;
      padding-block: var(--fj-space-20);
      padding-inline: var(--fj-gutter);
    }

    .archive-section fj-section-header {
      inline-size: 100%;
      margin-block-end: var(--fj-space-10);
    }

    /* Director General message: a flat surface panel, text first, portrait
       at the inline-end. Separation is by tone only. */
    .archive-director__panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--fj-space-8);
      padding: var(--fj-space-5);
      border-radius: var(--fj-radius-lg);
      background: var(--fj-color-surface);
    }

    .archive-director__text {
      display: flex;
      flex-direction: column;
      gap: var(--fj-space-3);
      padding-inline: var(--fj-space-2);
      padding-block-start: var(--fj-space-8);
    }

    .archive-director__text p {
      margin: 0;
      color: var(--fj-color-text);
      font-size: var(--fj-font-size-md);
      line-height: var(--fj-line-height-relaxed);
    }

    .archive-director__portrait {
      inline-size: 100%;
      block-size: 100%;
      min-block-size: 0;
      object-fit: cover;
      object-position: center top;
      border-radius: var(--fj-radius-md);
    }

    .archive-quote {
      margin: auto 0 0;
      display: grid;
      gap: var(--fj-space-3);
    }

    .archive-quote__mark {
      color: var(--fj-color-brand);
      font-size: var(--fj-font-size-6xl);
      font-weight: var(--fj-font-weight-extrabold);
      line-height: var(--fj-line-height-tight);
      text-align: end;
    }

    .archive-quote__year {
      color: var(--fj-color-brand-text);
      font-size: var(--fj-font-size-xs);
      font-weight: var(--fj-font-weight-bold);
    }

    .archive-quote blockquote {
      margin: 0;
      color: var(--fj-color-heading);
      font-size: var(--fj-font-size-lg);
      font-weight: var(--fj-font-weight-bold);
      line-height: var(--fj-line-height-relaxed);
    }

    .archive-quote figcaption {
      color: var(--fj-color-brand-text);
      font-size: var(--fj-font-size-sm);
      font-weight: var(--fj-font-weight-semibold);
    }

    .archive-links__intro {
      display: grid;
      gap: var(--fj-space-3);
      margin-block-end: var(--fj-space-10);
      text-align: center;
    }

    .archive-links__intro h2 {
      margin: 0;
      color: var(--fj-color-brand-text);
      font-family: var(--fj-font-family-heading);
      font-size: var(--fj-font-size-4xl);
      font-weight: var(--fj-font-weight-extrabold);
      line-height: var(--fj-line-height-tight);
    }

    .archive-links__intro p {
      margin: 0 auto;
      max-inline-size: 36rem;
      color: var(--fj-color-text);
      font-size: var(--fj-font-size-md);
      line-height: var(--fj-line-height-relaxed);
    }

    .archive-grid {
      display: grid;
      gap: var(--fj-gutter);
    }

    .archive-grid--four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .archive-grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .archive-news-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The dark publications panel is a full surface band: a nested dark theme
       re-resolves every colour token for the subtree. */
    .archive-publications {
      inline-size: min(calc(100% - 2 * var(--fj-gutter)), var(--fj-container-max));
      border-radius: var(--fj-radius-lg);
      background: var(--fj-color-background);
      color: var(--fj-color-text);
    }

    .archive-grid--rail {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .archive-publication {
      display: grid;
      align-content: start;
      gap: var(--fj-space-2);
    }

    .archive-publication fj-cover-card {
      --fj-cover-card-min-size: var(--fj-space-0);
    }

    .archive-publication h3 {
      margin: var(--fj-space-2) 0 0;
      color: var(--fj-color-heading);
      font-size: var(--fj-font-size-md);
      font-weight: var(--fj-font-weight-bold);
    }

    .archive-publication p {
      margin: 0;
      color: var(--fj-color-text-muted);
      font-size: var(--fj-font-size-sm);
      line-height: var(--fj-line-height-relaxed);
    }

    /* Collections bento: the leading tile spans two rows. Column flow keeps
       RTL automatic (the first tile sits at the inline-start edge). */
    .archive-bento {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: calc(var(--fj-space-32) * 1.8);
      gap: var(--fj-gutter);
    }

    /* Tiles fill their grid track instead of using the card's own minimum
       height, so the featured tile spans exactly two rows. */
    .archive-bento fj-cover-card {
      --fj-cover-card-min-size: var(--fj-space-0);
      block-size: 100%;
    }

    .archive-bento fj-cover-card[featured] {
      grid-row: span 2;
    }

    .archive-floating-shortcut {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-inline-size: var(--fj-space-11);
      min-block-size: var(--fj-space-11);
      color: var(--fj-color-brand-text);
      font-size: var(--fj-space-5);
      border-radius: var(--fj-radius-bar);
      outline: var(--fj-border-width-thick) solid transparent;
      transition: outline-color var(--fj-transition-fast),
        background-color var(--fj-transition-fast);
    }

    .archive-floating-shortcut:hover {
      background: var(--fj-color-glass-item-hover);
    }

    .archive-floating-shortcut:focus-visible {
      outline-color: var(--fj-color-focus-ring);
    }

    @media (prefers-reduced-motion: reduce) {
      .archive-floating-shortcut {
        transition: none;
      }
    }

    .footer-logo {
      inline-size: calc(var(--fj-space-32) * 1.45);
      block-size: auto;
    }

    .footer-logo--white {
      display: none;
    }

    [data-fj-theme='dark'] .footer-logo--color {
      display: none;
    }

    [data-fj-theme='dark'] .footer-logo--white {
      display: block;
    }

    .footer-contact {
      display: inline-flex;
      align-items: center;
      gap: var(--fj-space-2);
      color: inherit;
      text-decoration: none;
    }

    .footer-social {
      display: flex;
      align-items: center;
      gap: var(--fj-space-4);
      font-size: var(--fj-font-size-xl);
    }

    .footer-social a {
      color: inherit;
    }

    .footer-newsletter-title {
      margin: 0;
      font-size: var(--fj-font-size-sm);
      font-weight: var(--fj-font-weight-medium);
      color: var(--fj-color-heading);
    }

    /* Match --fj-breakpoint-xl; custom properties cannot be used in media queries.
       Important links move directly from four columns to two. */
    @media (max-width: 80rem) {
      .archive-links .archive-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 56rem) {
      .archive-page fj-header::part(bottom) {
        flex-wrap: wrap;
        justify-content: center;
      }

      .archive-hero-cards,
      .archive-grid--four,
      .archive-grid--rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .archive-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .archive-director__panel {
        grid-template-columns: minmax(0, 1fr);
      }

      .archive-director__portrait {
        order: -1;
        block-size: auto;
        aspect-ratio: 4 / 5;
      }

      .archive-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* Phones: a multi-card row becomes one horizontal free-scroll carousel
       (one card in focus, the next peeking) instead of a tall column. The
       column flow and logical scroll make RTL automatic. */
    @media (max-width: 40rem) {
      .archive-hero-cards,
      .archive-grid--rail,
      .archive-grid--three {
        grid-auto-flow: column;
        grid-auto-columns: var(--fj-hero-cards-carousel-item-size);
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        gap: var(--fj-space-4);
        /* The next card signals swiping; keep focus rings inside the rail. */
        padding: var(--fj-space-2);
        scroll-padding-inline: var(--fj-space-2);
        scroll-snap-type: inline proximity;
      }

      .archive-hero-cards::-webkit-scrollbar,
      .archive-grid--rail::-webkit-scrollbar,
      .archive-grid--three::-webkit-scrollbar {
        display: none;
      }

      .archive-hero-cards > *,
      .archive-grid--rail > *,
      .archive-grid--three > * {
        scroll-snap-align: start;
      }

      .archive-news-grid fj-news-card[variant='featured'] {
        grid-column: auto;
      }

      .archive-bento {
        grid-template-columns: minmax(0, 1fr);
      }

      .archive-bento fj-cover-card[featured] {
        grid-row: auto;
      }

      .archive-section {
        padding-inline: var(--fj-space-4);
      }

      .archive-links__intro h2 {
        font-size: var(--fj-font-size-3xl);
      }
    }

    /* Existing brand art and motif decorate the page without intercepting input. */
    .archive-section {
      position: relative;
      isolation: isolate;
    }

    .archive-publications::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: var(--fj-color-text-muted);
      mask-image: url('../img/pattern-3.svg');
      mask-repeat: repeat;
      opacity: var(--fj-footer-pattern-opacity);
      pointer-events: none;
    }

    .archive-section > * {
      position: relative;
      z-index: 1;
    }

    .archive-section-heading {
      display: flex;
      align-items: center;
      gap: var(--fj-space-3);
      margin-block-end: var(--fj-space-10);
      min-inline-size: 0;
    }

    .archive-section-heading fj-section-header {
      flex: 1;
      min-inline-size: 0;
      margin-block-end: 0;
    }

    /* Let the news action use its content width so the tabs retain room. */
    .archive-news fj-section-header {
      --fj-section-header-action-inline-size: auto;
    }

    .archive-section-art {
      flex: none;
      inline-size: var(--fj-section-header-mark-size);
      block-size: var(--fj-section-header-mark-size);
      object-fit: contain;
    }

    .archive-section-heading--center {
      justify-content: center;
      margin-block-end: 0;
    }

/* Search layout composes the system dialog and inline field. */
.archive-search {
  display: grid;
  gap: var(--fj-space-4);
  min-inline-size: 0;
}
.archive-search__hint,
.archive-search__status {
  margin: var(--fj-space-0);
  font-size: var(--fj-font-size-sm);
  line-height: var(--fj-line-height-normal);
}
.archive-search__results {
  display: grid;
  gap: var(--fj-space-4);
  margin: var(--fj-space-0);
  padding: var(--fj-space-0);
  list-style: none;
}
.archive-search__results li {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.archive-search__results p {
  margin-block: var(--fj-space-1) var(--fj-space-0);
  font-size: var(--fj-font-size-sm);
}
#search-empty[hidden],
#search-retry[hidden] {
  display: none;
}

/* Phone section actions follow the cards in visual and keyboard order. */
.archive-section-action {
  display: block;
  inline-size: 100%;
  margin-block-start: var(--fj-space-6);
}

/* Phone readers keep the contact links in the normal footer without an overlay. */
@media (max-width: 40rem) {
  .archive-page fj-floating-footer {
    display: none;
  }
}

/* Nested disclosures expand in the phone menu instead of overlaying its links. */
.archive-page fj-dropdown::part(panel) {
  background: var(--fj-color-surface);
}
@media (max-width: 48rem) {
  .archive-page fj-nav fj-dropdown {
    display: block;
    container-type: inline-size;
    inline-size: 100%;
  }
  .archive-page fj-nav fj-dropdown::part(trigger) {
    inline-size: 100%;
    justify-content: space-between;
  }
  .archive-page fj-nav fj-dropdown::part(panel) {
    position: static;
    inline-size: 100%;
    min-inline-size: 100cqi;
    max-inline-size: 100cqi;
    box-sizing: border-box;
  }
}

@media (max-width: 48rem) {
  .archive-page fj-nav fj-dropdown:not([open])::part(panel) {
    display: none;
  }
}

@media (max-width: 48rem) {
  .archive-page fj-nav fj-dropdown[open]::part(trigger) {
    position: absolute;
    inset-block-start: var(--fj-space-0);
    inset-inline: var(--fj-space-0);
  }
  .archive-page fj-nav fj-dropdown[open]::part(panel) {
    margin-block-start: var(--fj-space-12);
  }
}

@media (max-width: 48rem) {
  .archive-page fj-nav::part(nav),
  .archive-page fj-header::part(actions) {
    background: var(--fj-color-surface);
  }
}