/* Self-hosted (see bloggen/resources/fonts/OFL.txt for the license) —
   previously loaded from Google's CDN on every visit, which sends every
   visitor's IP address to Google just to render "IM Fell English". */
@font-face {
  font-family: "IM Fell English";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/im-fell-english-v14-latin-regular.woff2") format("woff2");
}

:root {
  --page-max-width: 1260px;
  --content-max-width: 780px;
  --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg: #f5f5f5;
  --paper: #ffffff;
  --ink: #2b2b2b;
  --muted: #767676;
  --border: rgba(0, 0, 0, 0.1);
  --accent: #24890d;
  --accent-hover: #41a62a;
  --accent-active: #55d737;
  --accent-soft: #eef6ec;
  --header-bg: #000000;
  --header-text: #ffffff;
  --header-text-muted: rgba(255, 255, 255, 0.75);
  --radius: 2px;
  --shadow: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  /* Soft/animated scroll for the note-call <-> endnote anchor jumps
     (#note-N / #note-call-N, see app.js and tei_to_html.xsl) instead of an
     instant snap. */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.note-call,
.endnotes-list li {
  /* Keeps the jumped-to anchor from landing flush against the viewport's
     top edge, hidden under nothing here but still uncomfortably tight. */
  scroll-margin-top: 1.5rem;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

body.lightbox-open {
  overflow: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--accent-hover);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.top-banner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.top-banner-link {
  display: inline-block;
  max-width: 100%;
}

.top-banner-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72px;
}

.site-banner {
  position: relative;
  overflow: hidden;
  /* Neutral gray rather than black: shows through on a transparent banner
     image, a still-loading one, or one whose aspect ratio doesn't quite
     fill the configured height — a solid black fallback there reads as a
     broken banner rather than a background. Matches Twenty Fourteen's own
     post-thumbnail fallback tone. */
  background: #b2b2b2;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.site-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-title-group {
  position: absolute;
  left: 1.5rem;
  bottom: 1rem;
  padding: 0.3rem 0.8rem;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border-radius: var(--radius);
}

.banner-title {
  font-family: "IM Fell English", var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: clamp(1.49rem, 2.9vw, 2.19rem);
}

.banner-subtitle {
  font-family: "IM Fell English", var(--font-ui);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  font-size: clamp(1.14rem, 1.9vw, 1.39rem);
}

.masthead {
  background: var(--header-bg);
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 1.5rem;
}

.top-menu {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.top-menu ul {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.top-menu .menu-item a {
  color: var(--header-text-muted);
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.top-menu .menu-item a:hover {
  color: var(--header-text);
  text-decoration: none;
}

.top-menu .menu-item.is-active a {
  color: var(--header-text);
  border-color: var(--accent);
}

.site-search {
  position: relative;
  flex: 0 0 auto;
  padding-left: 1.5rem;
  font-family: var(--font-ui);
}

.site-search-input {
  width: min(240px, 100%);
  padding: 0.4rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  color: var(--header-text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.site-search-input::placeholder {
  color: var(--header-text-muted);
}

.site-search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.site-search-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  width: min(420px, calc(100vw - 3rem));
  margin: 0.4rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  max-height: 60vh;
  overflow-y: auto;
}

.site-search-result {
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius);
}

.site-search-result + .site-search-result {
  margin-top: 0.2rem;
}

.site-search-result:hover,
.site-search-result:focus-within {
  background: var(--accent-soft);
}

.site-search-result a {
  font-weight: 700;
  font-size: 0.95rem;
}

.site-search-excerpt {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.site-search-result mark {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.site-search-error,
.site-search-empty {
  color: var(--muted);
  font-style: italic;
  cursor: default;
}

.site-search-error:hover,
.site-search-error:focus-within,
.site-search-empty:hover,
.site-search-empty:focus-within {
  background: none;
}

.page-layout {
  width: min(var(--page-max-width), 100% - 2.4rem);
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 0;
  /* stretch (not start): the side menu's black background should reach as
     far down as the main content does, not stop short at its own (often
     shorter) list of links. */
  align-items: stretch;
}

.page-layout.no-side-menu {
  grid-template-columns: minmax(0, 1fr);
}

/* Light-on-black, matching .top-menu/.masthead: the side menu is meant to
   read as a continuation of that same bar down the left edge, flush
   against it above (.page-layout's own top margin is 0) and against the
   main content to its right (.page-layout's own gap is 0). */
.side-menu {
  background: var(--header-bg);
  border-radius: var(--radius);
  padding: 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  order: 1;
}

/* Discreet but distinct from a .side-menu-section h3: smaller, muted, and
   set off by a rule below it, so it reads as a label for the whole menu
   ("Menu") rather than as one more navigable entry. */
.side-menu-title {
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--header-text-muted);
}

.side-menu-section + .side-menu-section {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Flyout anchor: the submenu (the section's own <ul>) is positioned
   relative to this box and revealed on hover/focus instead of sitting
   permanently expanded in the flow — keeps a long billet list from
   dumping itself in the sidebar all at once. */
.side-menu-section {
  position: relative;
}

/* Muted by default, like every other first-level menu item — only a
   plain heading (no link target of its own) picks up .side-menu h3's
   color directly, so without this it would sit permanently "lit up"
   next to the other top-level items, which only brighten on hover. */
.side-menu h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--header-text-muted);
}

.side-menu-section:hover > h3,
.side-menu-section:focus-within > h3 {
  color: var(--header-text);
}

/* Chevron hint shown only when the section actually has a submenu to
   reveal; a plain heading (no target, no children) gets none. */
.side-menu-section.has-submenu > h3::after {
  content: "\203A";
  display: inline-block;
  margin-left: 0.35em;
  color: var(--header-text-muted);
}

.side-menu-section-link {
  color: var(--header-text-muted);
  text-decoration: none;
}

.side-menu-section-link:hover {
  color: var(--header-text);
  text-decoration: none;
}

.side-menu-section-link.is-active {
  color: var(--header-text);
}

.side-menu ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Flyout panel: the section's own <ul> (its billets and subsections),
   hidden until the section is hovered/focused and then revealed as a
   floating column, rather than permanently expanded inline. Opens right at
   the sidebar's own edge (left: 100%), where the dark menu zone ends and
   the white article zone begins, rather than stranded mid-sidebar - and
   since it overlaps the section box itself rather than starting past its
   edge, there's no dead zone for the pointer to cross between the heading
   and the panel. */
.side-menu-section.has-submenu > ul {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 30;
  min-width: 200px;
  max-width: 280px;
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--header-bg);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

.side-menu-section.has-submenu:hover > ul,
.side-menu-section.has-submenu:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}

/* Separator rule between each entry of this flyout, so the list of billets
   reads as distinct items rather than a single dense block. */
.side-menu-section.has-submenu > ul > li + li {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.side-menu .menu-item {
  margin: 0.3rem 0;
}

.side-menu .menu-item a {
  color: var(--header-text-muted);
}

.side-menu .menu-item a:hover {
  color: var(--header-text);
  text-decoration: none;
}

.side-menu .menu-item.is-active > a {
  color: var(--header-text);
  font-weight: 700;
}

.side-menu-subsection {
  position: relative;
  list-style: none;
  margin: 0.5rem 0 0.2rem;
}

.side-menu-subsection h4 {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--header-text-muted);
}

/* Same chevron treatment as the top-level section heading, one level in. */
.side-menu-subsection.has-submenu > h4::after {
  content: "\203A";
  display: inline-block;
  margin-left: 0.35em;
  color: var(--header-text-muted);
}

.side-menu-subsection-link {
  color: var(--header-text-muted);
  text-decoration: none;
}

.side-menu-subsection-link:hover {
  color: var(--header-text);
  text-decoration: none;
}

.side-menu-subsection-link.is-active {
  color: var(--header-text);
}

/* Second-level flyout: a subsection's own billets open in their own panel,
   nested the same way and offset from the middle of the parent panel
   rather than its far edge, for the same reason as the section flyout
   above. */
.side-menu-subsection.has-submenu > ul {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 31;
  min-width: 180px;
  max-width: 260px;
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--header-bg);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

.side-menu-subsection.has-submenu:hover > ul,
.side-menu-subsection.has-submenu:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}

.main-content {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem clamp(1.2rem, 3vw, 2.8rem);
  order: 2;
  /* A pasted URL or other unbroken run of characters has no spaces to
     wrap on; without this it keeps its own width and spills past the
     white box's right edge instead of breaking onto the next line. */
  overflow-wrap: break-word;
}

/* Left-anchored, not centered: on a wide screen a centered 780px column
   splits the leftover space evenly, so the reading column drifts away
   from the side menu and looks adrift in the middle of the page. Keeping
   it flush left (against the side menu) and pushing all the slack into
   the right margin instead reads as a normal page margin, not dead
   space, and it's also what leaves room for the margin-notes gutter
   further right on very wide screens (see the 1640px rule below). */
.main-content > * {
  max-width: var(--content-max-width);
  margin-left: 0;
  margin-right: auto;
}

.article-content {
  min-height: 45vh;
}

.article-header {
  margin-bottom: 1.2rem;
}

.article-meta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-transform: uppercase;
}

.tei-fragment h1,
.tei-fragment h2,
.tei-fragment h3,
.tei-fragment h4,
.tei-fragment h5,
.tei-fragment h6 {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-family: var(--font-ui);
  font-weight: 900;
}

.tei-fragment h1 {
  margin-top: 0.2em;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.tei-fragment h2 {
  font-size: calc(1.37rem + 2pt); /* aligné sur la taille actuelle de h3, +2pt */
  font-family: var(--font-body);
  font-weight: 400;
  font-variant: small-caps;
  text-transform: none;
  margin-bottom: 1em;
}

.tei-fragment h3 {
  font-size: 1.37rem; /* +2pt vs. la taille précédente (1.2rem) */
  font-weight: 400;
}

/* The page title is always an h1 for SEO, but keeps the former visual
   treatment of the metadata h2 that preceded that semantic change. */
.tei-fragment .article-title {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: 1em;
  font-family: var(--font-body);
  font-size: calc(1.37rem + 2pt);
  font-weight: 400;
  font-variant: small-caps;
  text-transform: none;
}

/* Editorial heading levels survive the SEO-driven HTML rank shift in a
   data attribute. These rules preserve their pre-shift visual hierarchy. */
.tei-fragment [data-content-heading-level="1"] {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 0.2em;
  margin-bottom: 0.6em;
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 900;
  font-variant: normal;
  text-transform: none;
}

.tei-fragment [data-content-heading-level="2"] {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: 1em;
  font-family: var(--font-body);
  font-size: calc(1.37rem + 2pt);
  font-weight: 400;
  font-variant: small-caps;
  text-transform: none;
}

.tei-fragment [data-content-heading-level="3"] {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-family: var(--font-ui);
  font-size: 1.37rem;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
}

/* No dedicated historical h4 rule existed. Freezing its former effective
   one-rem, heavy treatment makes level 4 explicit and distinct from h3. */
.tei-fragment [data-content-heading-level="4"] {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 900;
  font-variant: normal;
  text-transform: none;
}

.tei-fragment [data-content-heading-level="5"] {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-family: var(--font-ui);
  font-size: 0.83em;
  font-weight: 900;
}

.tei-fragment [data-content-heading-level="6"] {
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-family: var(--font-ui);
  font-size: 0.67em;
  font-weight: 900;
}

.tei-fragment p {
  margin: 0.9rem 0;
  text-align: justify;
}

.tei-fragment p.align-left {
  text-align: left;
}

.tei-fragment p.align-center {
  text-align: center;
}

.tei-fragment p.align-right {
  text-align: right;
}

.tei-fragment p.align-justify {
  text-align: justify;
}

/* Encadré: boîte à bordure simple, marges latérales et titre centré. Le
   rendu graphique appartient au thème ; la TEI ne porte que la structure. */
.tei-fragment .encadre {
  margin-block: 1.5rem;
  margin-inline: 8%;
  padding: 1rem 1.25rem;
  border: 1px solid currentColor;
}

.tei-fragment .encadre-titre {
  margin-top: 0;
  margin-bottom: 0.75rem;
  text-align: center;
  font-weight: 600;
}

.tei-fragment .encadre-sous-titre {
  margin: 0.75rem 0 0.5rem;
  font-weight: 600;
}

.tei-fragment .encadre > :last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .tei-fragment .encadre {
    margin-inline: 0;
    padding: 0.75rem 1rem;
  }
}

.tei-fragment blockquote {
  margin: 1.2rem 0;
  padding: 0 0 0 1.2rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

.tei-fragment blockquote p {
  text-align: left;
}

.tei-fragment ul,
.tei-fragment ol {
  padding-left: 1.4rem;
}

.smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.article-figure {
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem 0;
}

.article-figure.align-left {
  float: left;
  margin: 0.25rem 1.5rem 1rem 0;
  max-width: 50%;
}

.article-figure.align-right {
  float: right;
  margin: 0.25rem 0 1rem 1.5rem;
  max-width: 50%;
}

.article-figure.align-center {
  margin-left: auto;
  margin-right: auto;
}

.figure-image-link,
.article-figure img {
  display: block;
}

.article-figure img {
  height: auto;
  max-width: 100%;
}

.figure-image-link {
  position: relative;
}

.figure-image-link.lightbox-link::after {
  content: "Agrandir";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fefefe;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.figure-image-link:hover::after,
.figure-image-link:focus-visible::after {
  opacity: 1;
}

.article-figure figcaption {
  /* The figure's own width is shrink-to-fit around its widest child. An
     auto-width figcaption would let its caption text (often wider than
     the image on one unwrapped line) size that box, leaving the image
     stranded at the left edge instead of matching the caption's width.
     width: 0 excludes the caption from that shrink-to-fit measurement,
     so only the image sets the figure's width; min-width: 100% then
     stretches the caption back out to match it. */
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
  margin-top: 0.5rem;
  padding: 0.4rem 0.1rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.external-embed-notice {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.external-embed-frame {
  display: block;
  width: 100%;
  height: 75vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}

.video-embed {
  margin: 1.5rem 0;
  width: var(--video-width, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.video-embed-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-embed-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed-fallback {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.video-embed figcaption {
  margin-top: 0.5rem;
  padding: 0.4rem 0.1rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.tei-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.1rem 0;
  font-size: 0.95rem;
}

.tei-table td,
.tei-table th {
  border: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
  text-align: left;
}

.endnotes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.endnotes h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.endnotes-list {
  padding-left: 1.3rem;
}

.endnotes-list li {
  margin-bottom: 0.65rem;
  color: var(--ink);
}

.note-call {
  font-size: 0.74em;
  vertical-align: super;
  margin-left: 0.08em;
}

.note-call a {
  font-family: var(--font-ui);
  font-weight: 700;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.08rem 0.32rem;
}

.note-backref {
  margin-left: 0.4rem;
  font-size: 0.84em;
  color: var(--muted);
}

.note-call-link:hover,
.note-call-link:focus-visible {
  background: #dcefda;
  text-decoration: none;
}

.margin-notes {
  margin: 1.6rem 0 0;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
  font-family: var(--font-ui);
}

.margin-notes h2 {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.margin-notes ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.margin-notes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem;
  font-size: 0.84rem;
  line-height: 1.4;
}

.margin-note-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.margin-note-link {
  color: var(--ink);
}

.archive-page h1 {
  margin-top: 0;
}

.archive-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.archive-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
}

.archive-link {
  font-weight: 700;
}

.archive-date {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.archive-empty {
  color: var(--muted);
  list-style: none;
  margin-left: -1.2rem;
}

.archive-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.archive-pagination-prev,
.archive-pagination-next {
  font-weight: 700;
}

.archive-pagination-disabled {
  color: var(--muted);
}

.archive-pagination-status {
  color: var(--muted);
}

.home-recent-posts h1 {
  margin-top: 0;
}

.recent-posts-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

.recent-post {
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}

.recent-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.recent-post-title {
  margin: 0 0 0.2rem;
}

.recent-post-title a {
  color: inherit;
}

.recent-post-date {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.recent-post-excerpt {
  margin: 0.5rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.recent-post-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
}

.recent-posts-empty {
  color: var(--muted);
}

.site-footer {
  margin-top: 2rem;
  padding: 1.4rem 1rem;
  color: var(--muted);
  text-align: center;
  font-size: 0.8125rem;
  font-family: var(--font-ui);
  background: transparent;
}

.is-targeted {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  transition: outline-color 0.2s ease;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-overlay.lightbox-visible {
  opacity: 1;
}

.lightbox-overlay .lightbox-panel {
  transform: scale(0.94);
  transition: transform 0.22s ease;
}

.lightbox-overlay.lightbox-visible .lightbox-panel {
  transform: scale(1);
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

.lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 1600px);
  max-height: 92vh;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.lightbox-figure {
  /* Explicit placement in the panel's middle track: without it, when
     prev/next are both hidden (single-image group) they stop being grid
     items altogether, so the figure — the only item left — falls back to
     the first (left) auto track instead of the centered 1fr one. */
  grid-column: 2;
  margin: 0;
  max-height: 92vh;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

.lightbox-image {
  /* Fallback sizing until JS (lightbox.js) measures the image and sets an
     explicit width/height that scales it up to fill the available space —
     plain max-width/max-height never enlarges a modest-resolution photo. */
  width: auto;
  height: auto;
  max-width: min(90vw, 1500px);
  max-height: 80vh;
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  background: #202020;
  cursor: zoom-out;
}

.lightbox-caption {
  color: #f0f0f0;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: center;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.3rem;
  line-height: 1;
}

.lightbox-close {
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
}

/* Floating the margin notes out into the page's own right-hand gutter only
   has room once the boxed page-layout (capped at --page-max-width) no
   longer fills the viewport: below this, the sidebar + article already
   consume the full width and there simply isn't a safe gutter, so the
   notes stay in normal flow (see .margin-notes above) rather than risk
   overlapping the sidebar or the article text. */
@media (min-width: 1640px) {
  .tei-fragment {
    position: relative;
  }

  .tei-fragment .margin-notes {
    position: absolute;
    left: 100%;
    margin-left: 2rem;
    top: 1rem;
    width: 200px;
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    margin-top: 1.2rem;
  }

  .side-menu {
    order: 2;
  }

  .main-content {
    order: 1;
    min-width: 0;
  }

  .main-content > * {
    max-width: 100%;
  }

  .archive-item {
    display: block;
  }

  .archive-date {
    display: block;
    margin-top: 0.15rem;
  }

  .side-menu-section.has-submenu > ul,
  .side-menu-subsection.has-submenu > ul {
    /* No pointer to hover with on a touch layout (and the sidebar is
       already full-width here), so fall back to the plain expanded list
       instead of a flyout no one could open. */
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .lightbox-panel {
    width: min(96vw, 860px);
    grid-template-columns: 1fr;
  }

  .lightbox-prev,
  .lightbox-next {
    display: none;
  }
}

@media (max-width: 640px) {
  .top-banner {
    padding: 0.6rem 1rem;
  }

  .top-menu {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .top-menu ul {
    gap: 0.9rem;
    font-size: 0.75rem;
  }

  .masthead {
    padding: 0 1rem;
  }

  .site-search {
    flex: 1 1 100%;
    margin-left: 0;
    padding-left: 0;
    padding-bottom: 0.75rem;
  }

  .video-embed {
    width: 100%;
  }

  .site-search-input {
    width: 100%;
  }

  .main-content {
    padding: 1.3rem 1rem;
  }

  .site-footer {
    font-size: 0.78rem;
  }

  .note-call a {
    padding: 0.05rem 0.26rem;
  }
}