:root {
  --forest: #142b20;
  --ivory: #f4efe4;
  --gold-soft: #c4aa76;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--forest);
}

.mobile-reader,
.article-carousel,
.article-track,
.article-slide {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.mobile-reader {
  position: relative;
  color: var(--ivory);
}

.reader-back,
.page-indicator {
  position: fixed;
  z-index: 5;
  top: calc(14px + env(safe-area-inset-top));
  height: 44px;
  border: 1px solid rgba(244, 239, 228, .7);
  background: rgba(20, 43, 32, .94);
  color: var(--ivory);
}

.reader-back {
  left: calc(14px + env(safe-area-inset-left));
  width: 44px;
  display: grid;
  place-items: center;
  text-decoration: none;
}

.reader-back svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.reader-back:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: 3px;
}

.page-indicator {
  right: calc(14px + env(safe-area-inset-right));
  min-width: 52px;
  display: grid;
  place-items: center;
  margin: 0;
  padding-inline: 8px;
  font: 11px/1 Georgia, serif;
  letter-spacing: .08em;
  white-space: nowrap;
}

.page-indicator[hidden] {
  display: none;
}

.article-carousel {
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
}

.article-track {
  display: flex;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.article-track.is-animating {
  transition: transform .28s ease-in-out;
}

.article-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding-top: calc(68px + env(safe-area-inset-top));
  padding-right: calc(10px + env(safe-area-inset-right));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  padding-left: calc(10px + env(safe-area-inset-left));
  overflow: hidden;
}

.zoom-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.zoom-surface {
  position: absolute;
  will-change: transform;
  transform-origin: center center;
}

.zoom-surface img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .article-track.is-animating {
    transition: none;
  }
}

/* ===========================================================================
   AUDIT additions — August 2026. Nothing above this line was changed.
   =========================================================================== */

/* Every page needs an <h1>; this one is spoken, not seen, because the title
   is already printed inside the article image. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Page arrows for visitors on a laptop — a shared link opens here too, and
   dragging with a mouse was the only way through a multi-page article.
   These are created by JavaScript only when a fine pointer is present, so
   they never appear on a phone. */
.page-nav {
  position: fixed;
  z-index: 5;
  top: 50%;
  width: 44px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(244, 239, 228, .7);
  background: rgba(20, 43, 32, .94);
  color: var(--ivory);
  font: 23px/1 Georgia, serif;
  cursor: pointer;
  transform: translateY(-50%);
}

.page-nav[hidden] { display: none; }
.page-nav-prev { left: calc(14px + env(safe-area-inset-left)); }
.page-nav-next { right: calc(14px + env(safe-area-inset-right)); }

.page-nav:focus-visible,
.page-indicator:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: 3px;
}

/* Shown only when JavaScript is unavailable. */
.noscript-note {
  max-width: 34rem;
  margin: 0 auto 1rem;
  padding-inline: 24px;
  color: var(--ivory);
  font: 16px/1.6 Georgia, serif;
}

.noscript-note a {
  color: var(--gold-soft);
}