/* The archive front page.

   A dark, printed-page look that owns the whole viewport: a left rail carrying
   the site's navigation, and a catalogue of the wiki beside it. Bootstrap is
   still loaded — the wiki's own HTML in the preamble needs the shims in
   project.css — so every rule here is scoped under .archive and wins on
   source order rather than by fighting specificity.

   Type is sized in rem throughout so the site's base size — the html rule in
   project.css — moves this page with the rest of the site.

   Loaded only by pages/home.html. */

/* The palette lives at the root, not on .archive, so that a section with its
   own stylesheet can dress itself in the same colours — geopo does, and its
   rules are ancestors of .archive, which cannot inherit from a descendant. */
:root {
  /* Ground and ink. */
  --arc-bg: #0e0b08;
  --arc-panel: #16130e;
  --arc-panel-lit: #1e1610;
  --arc-line: #2e2416;

  /* Gilt, from the brightest highlight down to the faintest rule. */
  --arc-gold: #c9a84c;
  --arc-gold-dim: #8a6a30;
  --arc-title: #e0cfa0;
  --arc-title-lit: #ecddb8;
  --arc-heading: #d4c098;
  --arc-body: #7a6a4a;
  --arc-muted: #5a4a2a;
  --arc-faint: #4a3a20;
  --arc-fainter: #3a2a10;

  /* The nation's red, for the crest and the banner. */
  --arc-red: #b03030;

  --arc-display: "Cinzel", Georgia, "Times New Roman", serif;
  --arc-prose: "Crimson Text", Georgia, "Times New Roman", serif;
  --arc-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* In rem, not px: the rail is a fixed column with nowhere for its text to
     overflow to, so it has to grow with the base type size. */
  --arc-rail: 16.875rem;
}

.archive {
  background: var(--arc-bg);
  color: var(--arc-body);
  font-family: var(--arc-prose);
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
}

/* The page paints its own ground; Bootstrap's white body would show through
   the moment the content is shorter than the viewport. */
body.archive-page {
  background: #0e0b08;
}

.archive a {
  color: inherit;
  text-decoration: none;
}

/* A label in small caps and wide tracking — the design's recurring device for
   naming a region without giving it a heading. */
.archive-eyebrow {
  color: var(--arc-faint);
  font-family: var(--arc-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Eyebrow plus a hairline running to the right edge. */
.archive-rule {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.archive-rule::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--arc-line);
}

.archive-rule--lit .archive-eyebrow {
  color: var(--arc-gold);
}

/* ── Frame ──────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .archive {
    display: grid;
    grid-template-columns: var(--arc-rail) 1fr;
    transition: grid-template-columns 0.2s ease;
  }

  /* Collapsed by ArchiveNav.svelte. The rail keeps its DOM — it is the site's
     navigation and screen readers should still reach it — but gives its column
     back to the page. */
  .archive[data-rail="collapsed"] {
    grid-template-columns: 0 1fr;
  }

  .archive[data-rail="collapsed"] .archive__rail {
    overflow: hidden;
    visibility: hidden;
  }
}

/* ArchiveNav's mount point. Both of the buttons it renders are fixed, so the
   wrapper has no business taking a column of the grid — without this it lands
   between the rail and the main column and pushes the layout apart. */
.archive__islands {
  display: contents;
}

.archive__rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--arc-line);
}

@media (min-width: 1024px) {
  .archive__rail {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

.archive__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── The rail ───────────────────────────────────────────────────────────── */

.archive__crest {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--arc-line);
}

.archive__arms {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px #b0303035);
}

.archive__wordmark {
  margin-top: 1rem;
  font-family: var(--arc-display);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--arc-gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.archive__wordmark-of {
  margin-bottom: 12px;
  font-family: var(--arc-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--arc-gold-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Language switch. Buttons rather than a select: the design is a row of pills,
   and the whole thing is one set_language POST either way. */
.archive__langs {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  margin: 0 auto;
  width: fit-content;
  border: 1px solid var(--arc-line);
}

.archive__lang {
  padding: 1px 4px;
  color: var(--arc-body);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  background: none;
  border: 0;
  opacity: 0.4;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.archive__lang:hover {
  color: var(--arc-gold);
  opacity: 1;
}

.archive__lang[aria-current="true"] {
  color: var(--arc-gold);
  opacity: 1;
}

.archive__search {
  position: relative;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--arc-line);
}

.archive__search input {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 11px 7px 30px;
  color: var(--arc-heading);
  font-family: var(--arc-prose);
  font-size: 0.875rem;
  background: var(--arc-panel);
  border: 1px solid var(--arc-line);
  outline: none;
}

.archive__search input::placeholder {
  color: var(--arc-muted);
}

.archive__search input:focus {
  border-color: #c9a84c55;
}

.archive__search::before {
  position: absolute;
  top: 50%;
  left: calc(1.5rem + 9px);
  color: var(--arc-faint);
  font-size: 0.8125rem;
  content: "⌕";
  transform: translateY(-50%);
}

.archive__sections {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--arc-line);
}

.archive__sections .archive-eyebrow {
  display: block;
  padding: 0 1.5rem;
  margin-bottom: 0.6rem;
}

/* One tab. --accent comes from nav.py, inline, so a new tab colours itself. */
.archive__section {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 1.5rem;
  color: var(--arc-body);
  font-family: var(--arc-prose);
  font-size: 0.9375rem;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.archive__section:hover {
  color: var(--accent, var(--arc-gold));
  background: var(--arc-panel);
}

.archive__section[aria-current="page"] {
  color: var(--accent, var(--arc-gold));
  background: var(--arc-panel-lit);
  border-left-color: var(--accent, var(--arc-gold));
}

.archive__section-glyph {
  margin-right: 8px;
  font-size: 0.6875rem;
}

/* A section only signed-in visitors may open; the link goes to sign-in. */
.archive__section--locked {
  opacity: 0.65;
}

.archive__section-lock {
  font-size: 0.75rem;
}

.archive__section-count {
  color: var(--arc-fainter);
  font-family: var(--arc-mono);
  font-size: 0.5625rem;
}

.archive__section[aria-current="page"] .archive__section-count {
  color: var(--accent, var(--arc-gold));
  opacity: 0.7;
}

.archive__recent {
  flex: 1;
  padding: 1.1rem 1.5rem;
}

.archive__recent .archive-eyebrow {
  display: block;
  margin-bottom: 0.75rem;
}

.archive__recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.archive__recent-title {
  display: block;
  margin-bottom: 3px;
  color: #c0aa78;
  font-family: var(--arc-display);
  font-size: 0.71875rem;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.archive__recent-item:hover .archive__recent-title {
  color: var(--arc-title-lit);
}

.archive__recent-meta {
  color: var(--arc-fainter);
  font-family: var(--arc-mono);
  font-size: 0.5625rem;
}

/* Sign in / account, folded into the rail because the front page has no top
   navbar to hold them. */
.archive__account {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 1.5rem 1rem;
}

.archive__account a,
.archive__account button {
  padding: 0;
  color: var(--arc-body);
  font-family: var(--arc-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color 0.2s ease;
}

.archive__account a:hover,
.archive__account button:hover {
  color: var(--arc-gold);
}

.archive__banner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 1rem;
  margin: 0 1.5rem;
  border-top: 1px solid var(--arc-line);
}

.archive__banner img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.45;
}

.archive__banner-nation {
  display: block;
  color: #5a4020;
  font-family: var(--arc-display);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

.archive__banner-site {
  color: var(--arc-fainter);
  font-family: var(--arc-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
}

/* ── The main column ────────────────────────────────────────────────────── */

.archive__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2rem 2.5rem 1.5rem;
  border-bottom: 1px solid var(--arc-line);
}

.archive__head h1 {
  margin: 0.4rem 0 0;
  color: var(--arc-title);
  font-family: var(--arc-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.archive__head-sub {
  margin: 0.45rem 0 0;
  color: var(--arc-muted);
  font-size: 0.875rem;
  font-style: italic;
}

.archive__tally {
  color: var(--arc-faint);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-align: right;
}

.archive__tally span {
  display: block;
  margin-top: 3px;
  color: var(--arc-fainter);
  font-size: 0.5625rem;
}

.archive__body {
  flex: 1;
  padding: 2rem 2.5rem;
}

.archive__section-block {
  margin-bottom: 3rem;
}

/* ── The preamble: the wiki root article, rendered inline ───────────────── */

.archive__preamble {
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--arc-line);
}

.archive__preamble .wiki-article {
  max-width: 68ch;
  color: #9a8a64;
}

/* The article's own headings, sized down: Bootstrap's h1 is bigger than the
   page title, and the preamble sits under it rather than competing with it. */
.archive__preamble .wiki-article h1,
.archive__preamble .wiki-article h2,
.archive__preamble .wiki-article h3,
.archive__preamble .wiki-article h4 {
  margin-top: 1.5rem;
  color: var(--arc-heading);
  font-family: var(--arc-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.025em;
}

.archive__preamble .wiki-article h1 {
  margin-top: 0;
  font-size: 1.4rem;
}

.archive__preamble .wiki-article h2 {
  font-size: 1.2rem;
}

.archive__preamble .wiki-article h3,
.archive__preamble .wiki-article h4 {
  font-size: 1.05rem;
}

.archive__preamble .wiki-article a {
  color: var(--arc-gold);
  text-decoration: underline;
  text-decoration-color: #c9a84c55;
  text-underline-offset: 2px;
}

.archive__preamble .wiki-article a:hover {
  text-decoration-color: var(--arc-gold);
}

.archive__preamble .wiki-article code,
.archive__preamble .wiki-article pre {
  color: var(--arc-heading);
  background: var(--arc-panel);
  border: 1px solid var(--arc-line);
}

.archive__preamble .wiki-article blockquote {
  padding-left: 1rem;
  color: var(--arc-body);
  font-style: italic;
  border-left: 2px solid var(--arc-line);
}

.archive__preamble .wiki-article figure.thumbnail {
  background: var(--arc-panel);
  border-color: var(--arc-line);
}

.archive__preamble .wiki-article .caption {
  color: var(--arc-muted);
}

/* A link that reads as an action without being a button. */
.archive__more {
  display: inline-block;
  padding: 6px 14px;
  margin-top: 1.25rem;
  color: var(--arc-gold);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid #c9a84c40;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.archive__more:hover {
  background: #c9a84c12;
  border-color: var(--arc-gold);
}

/* ── The selection strip ────────────────────────────────────────────────── */

.archive__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.archive-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  overflow: hidden;
  background: var(--arc-panel);
  border: 1px solid var(--arc-line);
  transition: border-color 0.3s ease;
}

.archive-feature:hover {
  border-color: #b0303050;
}

.archive-feature__art {
  position: absolute;
  inset: 0;
}

.archive-feature__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: sepia(50%) contrast(115%);
  transition: opacity 0.4s ease;
}

.archive-feature:hover .archive-feature__art img {
  opacity: 0.32;
}

/* Enough gradient that the text sits on ink no matter what the art is. */
.archive-feature__art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, #0e0b08 45%, #0e0b0888 78%, transparent);
}

.archive-feature__text {
  position: relative;
  padding: 1.25rem;
}

.archive-feature__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.archive-feature__mark {
  color: var(--arc-gold);
  font-family: var(--arc-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.archive-feature h3 {
  margin: 0 0 0.6rem;
  color: var(--arc-title-lit);
  font-family: var(--arc-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.archive-feature p {
  margin: 0 0 0.9rem;
  color: #8a7a52;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ── The section cards ──────────────────────────────────────────────────── */

.archive__section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.archive-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  overflow: hidden;
  background: var(--arc-panel);
  border: 1px solid var(--arc-line);
  border-left: 3px solid var(--accent, var(--arc-gold));
  transition: border-color 0.3s ease;
}

.archive-section:hover {
  border-color: var(--accent, var(--arc-gold));
}

/* No art of its own: the section's colour stands in for it. */
.archive-section--plain {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--accent, var(--arc-gold)) 28%, transparent),
      transparent 65%
    ),
    var(--arc-panel);
}

.archive-section__art {
  position: absolute;
  inset: 0;
}

.archive-section__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: sepia(50%) contrast(115%);
  transition: opacity 0.4s ease;
}

.archive-section:hover .archive-section__art img {
  opacity: 0.5;
}

.archive-section__art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, #0e0b08 40%, #0e0b0888 75%, transparent);
}

.archive-section__text {
  position: relative;
  padding: 1.5rem;
}

.archive-section h3 {
  margin: 0 0 0.6rem;
  color: var(--arc-title-lit);
  font-family: var(--arc-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.archive-section p {
  margin: 0 0 0.9rem;
  color: #8a7a52;
  font-size: 0.9rem;
  line-height: 1.5;
}

.archive-section__count {
  color: var(--accent, var(--arc-gold));
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ── The entry grid ─────────────────────────────────────────────────────── */

.archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 2rem;
}

.archive-entry {
  display: block;
  padding: 1rem 1rem 1.25rem 0;
  border-top: 1px solid var(--arc-line);
  transition: border-color 0.25s ease;
}

.archive-entry:hover {
  border-top-color: #c9a84c45;
}

.archive-entry h3 {
  margin: 0 0 0.6rem;
  color: var(--arc-heading);
  font-family: var(--arc-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.025em;
  transition: color 0.2s ease;
}

.archive-entry:hover h3 {
  color: var(--arc-title-lit);
}

.archive-entry p {
  margin: 0 0 1rem;
  color: var(--arc-body);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Category badge, read time, byline, date, breadcrumb — the small print that
   runs above and below every card, in both card shapes. */
.archive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.archive-badge {
  padding: 2px 7px;
  color: var(--accent, var(--arc-gold));
  font-family: var(--arc-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid;
  /* The badge's own colour at ~20% — one custom property, two uses. */
  border-color: color-mix(in srgb, var(--accent, #c9a84c) 35%, transparent);
}

.archive-minutes {
  color: var(--arc-muted);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
}

.archive-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.archive-author {
  color: #6a5a3a;
  font-size: 0.8125rem;
  font-style: italic;
}

.archive-date {
  color: var(--arc-faint);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
}

.archive-trail {
  margin-top: 0.75rem;
  color: var(--arc-faint);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
}

/* ── Empty state and footer ─────────────────────────────────────────────── */

.archive__empty {
  padding: 4rem 2rem;
  color: var(--arc-faint);
  font-style: italic;
  text-align: center;
}

.archive__empty::before {
  display: block;
  margin-bottom: 1rem;
  font-size: 2rem;
  content: "◈";
  opacity: 0.2;
}

.archive__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem;
  border-top: 1px solid var(--arc-line);
}

.archive__foot-mark {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: var(--arc-faint);
  font-family: var(--arc-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.archive__foot-mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.4;
}

.archive__foot-credit {
  color: var(--arc-fainter);
  font-family: var(--arc-mono);
  font-size: 0.5625rem;
  text-align: right;
}

.archive__foot-commit {
  display: block;
  margin-top: 3px;
  opacity: 0.7;
}

/* ── The rail's wide-screen handle ──────────────────────────────────────── */

/* Hidden by default: on a narrow screen the drawer toggle in the bar is the
   control, and this would be a second one doing the same job. */
.archive__handle {
  display: none;
}

@media (min-width: 1024px) {
  .archive__handle {
    position: fixed;
    top: 50%;
    left: var(--arc-rail);
    z-index: 40;
    display: block;
    padding: 1.1rem 1px;
    color: var(--arc-faint);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    background: var(--arc-panel);
    border: 1px solid var(--arc-line);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    transform: translateY(-50%);
    transition:
      left 0.2s ease,
      color 0.15s ease,
      border-color 0.15s ease;
  }

  /* The handle is fixed, so where it sits in the DOM only matters for this
     selector: ArchiveNav mounts inside .archive, alongside the bar. */
  .archive[data-rail="collapsed"] .archive__handle {
    left: 0;
  }

  .archive__handle:hover {
    color: var(--arc-gold);
    border-color: #c9a84c55;
  }

  .archive__handle:focus-visible {
    color: var(--arc-gold);
    outline: 1px solid var(--arc-gold-dim);
    outline-offset: 2px;
  }
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

/* The bar only exists to hold the drawer toggle, so it appears only once the
   toggle does — see ArchiveNav.svelte, which sets data-drawer on .archive. */
.archive__bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--arc-bg);
  border-bottom: 1px solid var(--arc-line);
}

.archive__bar img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.archive__bar-brand {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.archive__bar-name {
  display: block;
  color: var(--arc-gold);
  font-family: var(--arc-display);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.archive__toggle {
  padding: 4px 10px;
  color: var(--arc-body);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 1px solid var(--arc-line);
}

.archive__toggle:hover {
  color: var(--arc-gold);
  border-color: #c9a84c55;
}

/* ArchiveNav mounts outside the bar (the bar is hidden on wide screens and
   would take the collapse handle with it), so on a narrow screen the toggle is
   placed over the bar rather than laid out inside it. The offsets match the
   bar's own padding. */
.archive__toggle {
  position: fixed;
  top: 0.9rem;
  right: 1.25rem;
  z-index: 56;
}

@media (min-width: 1024px) {
  /* Wide screens have the handle instead. */
  .archive__toggle {
    display: none;
  }
}

/* Rendered by ArchiveNav.svelte only while the drawer is open, inside the
   bar's stacking context — hence 55, between the bar's own contents and the
   rail at 60. */
.archive__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #0e0b08cc;
  border: 0;
}

@media (max-width: 1023.98px) {
  .archive__head,
  .archive__body,
  .archive__foot {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .archive__grid,
  .archive__section-cards {
    grid-template-columns: 1fr;
  }

  /* Right-aligned against the left edge of a narrow column reads as a mistake. */
  .archive__tally {
    text-align: left;
  }

  /* Without JavaScript the rail simply stacks above the catalogue, which is
     usable if long. The drawer below only takes over once the toggle exists. */
  .archive[data-drawer] .archive__bar {
    display: flex;
  }

  .archive[data-drawer] .archive__rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(var(--arc-rail), 84vw);
    overflow-y: auto;
    background: var(--arc-bg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .archive[data-drawer="open"] .archive__rail {
    transform: translateX(0);
  }

}

@media (prefers-reduced-motion: reduce) {
  .archive *,
  .archive *::before,
  .archive *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ── The divisions ──────────────────────────────────────────────────────── */

/* The strip on the front page that introduces the three divisions. */
.archive__divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.archive-division {
  display: block;
  padding: 1.25rem;
  background: var(--arc-panel);
  border: 1px solid var(--arc-line);
  border-left: 2px solid var(--accent, var(--arc-gold));
  transition: background 0.2s ease, border-color 0.2s ease;
}

.archive-division:hover {
  background: var(--arc-panel-lit);
  border-color: color-mix(in srgb, var(--accent, #c9a84c) 45%, transparent);
  border-left-color: var(--accent, var(--arc-gold));
}

.archive-division__glyph {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent, var(--arc-gold));
  font-size: 0.9375rem;
}

.archive-division__name {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--arc-title);
  font-family: var(--arc-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.archive-division__tagline {
  display: block;
  color: var(--arc-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.archive-division__count {
  display: block;
  margin-top: 0.75rem;
  color: var(--arc-faint);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* A division page's own header: the glyph sits with the name. */
.archive__head-titled {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.archive__head-glyph {
  color: var(--accent, var(--arc-gold));
  font-size: 1.2rem;
}

/* ── A division's prose ─────────────────────────────────────────────────── */

.archive__prose {
  max-width: 68ch;
  padding-bottom: 2.5rem;
  margin-bottom: 3rem;
  color: #9a8a64;
  border-bottom: 1px solid var(--arc-line);
}

.archive__prose p {
  margin: 0 0 1.1rem;
}

.archive__prose h2 {
  margin: 2rem 0 1rem;
  color: var(--arc-heading);
  font-family: var(--arc-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* The opening paragraph, set a little larger — the division in one breath. */
.archive__lede {
  color: var(--arc-heading);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Something the archive has not built yet, said plainly rather than implied. */
.archive__note {
  padding: 0.75rem 1rem;
  color: var(--arc-body);
  font-family: var(--arc-mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  border-left: 2px solid var(--arc-line);
}

/* ── Knowledge status ───────────────────────────────────────────────────── */

/* One classification chip. Shaped now so that the tagging system, when it
   lands, has the component it needs already drawn. */
.archive-status {
  display: inline-block;
  padding: 3px 9px;
  color: var(--accent, var(--arc-gold));
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent, #c9a84c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #c9a84c) 45%, transparent);
}

/* A status that carries its own definition. Hover or focus, so the note is
   reachable by keyboard and by tap — on touch there is no hover, but tapping
   the chip focuses it. */
.archive-status--noted {
  position: relative;
  cursor: help;
  outline: none;
}

.archive-status__note {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 10;
  display: none;
  width: max-content;
  max-width: min(30ch, 70vw);
  padding: 0.6rem 0.75rem;
  color: var(--arc-heading);
  font-family: var(--arc-prose);
  font-size: 0.9rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  background: var(--arc-panel-lit);
  border: 1px solid color-mix(in srgb, var(--accent, #c9a84c) 45%, transparent);
  box-shadow: 0 4px 18px #00000080;
}

.archive-status--noted:hover .archive-status__note,
.archive-status--noted:focus-visible .archive-status__note,
.archive-status--noted:focus .archive-status__note {
  display: block;
}

.archive-status--noted:focus-visible {
  border-color: var(--accent, var(--arc-gold));
}

/* What the status and sources look like on an article, shown as an example. */
.archive-tagblock {
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  background: var(--arc-panel);
  border: 1px solid var(--arc-line);
}

.archive-tagblock .archive-eyebrow {
  display: block;
  margin-bottom: 0.9rem;
}

.archive-tagblock__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.35rem 0;
}

.archive-tagblock__key {
  min-width: 9rem;
  color: var(--arc-faint);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.archive-tagblock__value {
  color: var(--arc-heading);
  font-size: 0.95rem;
}

/* The five statuses and what each one means. */
.archive-legend {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.85rem 1.25rem;
  margin: 0 0 1.75rem;
}

.archive-legend dt {
  font-weight: inherit;
}

.archive-legend dd {
  margin: 0;
  color: var(--arc-body);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 599.98px) {
  .archive-legend {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .archive-legend dd {
    margin-bottom: 0.9rem;
  }
}

.archive__empty-where {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--arc-mono);
  font-size: 0.6875rem;
  font-style: normal;
}

.archive__empty-where code {
  color: var(--arc-body);
}

/* ── The Shattersun Library ─────────────────────────────────────────────── */

.library-lede {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.library-lede__text {
  flex: 1;
  min-width: 0;
}

.library-portrait {
  width: clamp(140px, 24vw, 240px);
  height: auto;
  filter: drop-shadow(0 8px 20px #000000b3);
}

.library-heraldry {
  margin: 1.5rem 0 0;
}

.library-heraldry img {
  width: clamp(80px, 12vw, 110px);
  height: auto;
  filter: drop-shadow(0 4px 14px #00000099);
}

.library-heraldry figcaption {
  display: block;
  margin-top: 0.5rem;
}

.library-entry h3 a {
  color: inherit;
}

.library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: baseline;
}

.library-actions a {
  color: var(--accent, var(--arc-gold));
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.library-actions a:hover {
  border-bottom-color: currentcolor;
}

/* The browser's own PDF viewer. Tall enough to read a page at a time, and
   sized off the viewport because the archive's main column has no height of
   its own to fill. */
.library-viewer {
  width: 100%;
  height: min(80vh, 1000px);
  border: 1px solid var(--arc-line);
  background: var(--arc-panel);
}

.library-pagination {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--arc-line);
  font-family: var(--arc-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.library-pagination a {
  color: var(--arc-gold);
}

@media (max-width: 599.98px) {
  .library-lede {
    flex-direction: column;
  }

  .library-portrait {
    order: -1;
    align-self: center;
  }
}