/* Shared newspaper furniture: sidebar, footer, cards, tables, and media. */

.skip-link {
  background: var(--ink);
  color: var(--paper);
  left: 0.75rem;
  padding: 0.5rem 0.8rem;
  position: fixed;
  top: 0.75rem;
  transform: translateY(-180%);
  z-index: 1500;
}
.skip-link:focus {
  transform: translateY(0);
}

#navbar {
  background: var(--paper-soft);
  border-right: 1px solid var(--rule);
  contain: layout paint;
  display: flex;
  flex-direction: column;
  inset: 0 auto 0 0;
  padding: 1.15rem 1rem;
  position: fixed;
  transform: translateX(-105%);
  transition:
    transform var(--transition),
    width var(--transition);
  width: var(--sidebar-w);
  will-change: transform, width;
  z-index: 900;
}

/* Mobile drawer-open state: reserve a top notch so the hamburger button
   never paints over the "The SAC Chronicle" wordmark (button is fixed at
   top-left; the brand starts right under it). */
@media (max-width: 1023px) {
  body.sidebar-open #navbar {
    padding-top: 4.25rem;
  }
  /* wordmark gets breathing room under the button on phones */
  body.sidebar-open .sidebar__brand {
    padding-top: 0;
  }
  /* The drawer sits over the page, so it needs its own edge shadow */
  #navbar {
    box-shadow: 4px 0 18px rgba(24, 20, 16, 0.28);
  }
}

/* ── Mobile masthead strip ───────────────────────────────────────
   A bare floating button gave phone readers no sense of place. This
   sticky strip carries the wordmark and the section they're in, and
   the toggle now sits inside it rather than over the page. */

.mobile-topbar {
  align-items: baseline;
  background: var(--paper-soft);
  border-bottom: var(--rule-double);
  display: none;
  gap: 0.75rem;
  height: var(--topbar-h);
  inset: 0 0 auto 0;
  justify-content: space-between;
  padding: 0 0.9rem 0 3.6rem;
  position: fixed;
  transition: transform var(--transition);
  z-index: 880;
}
.mobile-topbar__brand {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  line-height: var(--topbar-h);
  text-transform: uppercase;
  white-space: nowrap;
}
.mobile-topbar__brand em {
  color: var(--accent);
  font-style: normal;
}
.mobile-topbar__section {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  line-height: var(--topbar-h);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .mobile-topbar {
    display: flex;
  }
  body.has-topbar {
    padding-top: var(--topbar-h);
  }
  /* Reading room: the strip retracts as you go down the page and comes
     back the moment you scroll up. It never hides while the drawer is
     open, or the toggle would float free again. */
  body.topbar-hidden:not(.sidebar-open) .mobile-topbar,
  body.topbar-hidden:not(.sidebar-open) .navbar-corner {
    transform: translateY(calc(-1 * var(--topbar-h) - 8px));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  #navbar {
    transition: none;
  }
}

body.sidebar-open #navbar {
  transform: none;
}

@media (min-width: 1024px) {
  #navbar {
    transform: none;
  }
}

.sidebar__brand {
  border-bottom: var(--rule-double);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 0.92;
  padding: 0.35rem 0.25rem 0.8rem;
  text-transform: uppercase;
}

.sidebar__brand em {
  color: var(--accent);
  font-style: normal;
}
.sidebar__tagline {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  margin: 0.55rem 0 0;
  text-transform: uppercase;
}
.sidebar__nav {
  display: grid;
  gap: 0.15rem;
  margin-top: 1rem;
}
.sidebar__link {
  border-left: 3px solid transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  text-transform: uppercase;
}
.sidebar__link-label {
  display: inline-block;
}
.sidebar__link:hover,
.sidebar__link.is-active {
  background: var(--paper-deep);
  color: var(--accent);
  text-decoration: none;
}
.sidebar__link.is-active {
  border-left-color: var(--accent);
}
.sidebar__foot {
  border-top: 1px solid var(--ink-rule);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-top: auto;
  padding-top: 0.8rem;
  text-transform: uppercase;
}
.sidebar__foot-line {
  margin: 0;
}
.sidebar__action {
  align-items: center;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  gap: 0.5rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
  min-height: 44px;
  padding: 0 0.7rem;
  text-transform: uppercase;
  width: 100%;
}
.sidebar__action:hover {
  background: var(--paper-deep);
  color: var(--accent);
}
.sidebar__action-icon {
  font-size: 1rem;
}
@media (max-width: 1023px) {
  /* On desktop the cog is a short pointer trip away; on a phone it is a
     44px target in the corner of a scrolling page, so the drawer offers
     the same door. */
  .sidebar__action {
    display: flex;
  }
}

.sidebar-scrim {
  background: rgba(24, 20, 16, 0.5);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity var(--transition);
  z-index: 890;
}
body.sidebar-open .sidebar-scrim {
  opacity: 1;
  pointer-events: auto;
}

.navbar-corner {
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  display: grid;
  height: 42px;
  justify-content: center;
  left: 0.75rem;
  position: fixed;
  top: 0.75rem;
  transition:
    background var(--transition),
    left var(--transition),
    transform var(--transition);
  width: 42px;
  will-change: left, transform;
  z-index: 950;
}

.navbar-corner:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Three bars that fold into a cross when the drawer opens — replaces the
   static <svg> that shipped in every page's markup (see navbar.js). */
.navbar-corner__bars {
  display: block;
  height: 14px;
  position: relative;
  width: 18px;
}
.navbar-corner__bars span {
  background: currentColor;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transition:
    transform var(--transition),
    opacity var(--transition);
  width: 100%;
}
.navbar-corner__bars span:nth-child(1) {
  top: 0;
}
.navbar-corner__bars span:nth-child(2) {
  top: 6px;
}
.navbar-corner__bars span:nth-child(3) {
  top: 12px;
}
body.sidebar-open .navbar-corner__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.sidebar-open .navbar-corner__bars span:nth-child(2) {
  opacity: 0;
}
body.sidebar-open .navbar-corner__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .navbar-corner__bars span {
    transition: none;
  }
}

/* Seat the toggle inside the mobile masthead strip */
@media (max-width: 1023px) {
  .navbar-corner {
    left: 0.55rem;
    top: calc((var(--topbar-h) - 42px) / 2);
  }
}

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

.navbar-corner:hover {
  background: var(--accent);
}

@media (min-width: 1024px) {
  .navbar-corner {
    left: calc(var(--sidebar-w) - 52px);
  }
  .sidebar-scrim {
    display: none;
  }
  body.sidebar-collapsed #navbar {
    width: var(--sidebar-collapsed-w);
  }
  body.sidebar-collapsed .navbar-corner {
    left: calc(var(--sidebar-collapsed-w) - 52px);
  }
  body.sidebar-collapsed .sidebar__brand {
    font-size: 0;
    text-align: center;
  }
  body.sidebar-collapsed .sidebar__brand::before {
    color: var(--accent);
    content: "SAC";
    font-family: var(--font-display);
    font-size: var(--fs-md);
  }
  body.sidebar-collapsed .sidebar__tagline,
  body.sidebar-collapsed .sidebar__foot,
  body.sidebar-collapsed .sidebar__link-label {
    display: none;
  }
  body.sidebar-collapsed .sidebar__link {
    border-left: 0;
    font-size: var(--fs-md);
    padding-inline: 0;
    text-align: center;
  }
  body.sidebar-collapsed .sidebar__link::before {
    color: var(--accent);
    content: attr(aria-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  #navbar {
    max-width: 86vw;
    width: min(280px, 78vw);
  }
  /* Thumb-sized targets: the rail's compact 34px rows are a pointer
     affordance, not a touch one (WCAG 2.5.8 wants 24px minimum; 48px is
     the comfortable target on a phone). */
  .sidebar__link {
    align-items: center;
    display: flex;
    font-size: var(--fs-lg);
    min-height: 48px;
    padding: 0.35rem 0.7rem;
  }
  .sidebar__nav {
    gap: 0.2rem;
  }
  .sidebar__link.is-active::after {
    background: var(--accent);
    border-radius: 50%;
    content: "";
    height: 6px;
    margin-left: auto;
    width: 6px;
  }
}

.site-footer {
  border-top: var(--rule-double);
  margin-left: 0;
  padding: 1.75rem 1rem 1rem;
}

@media (min-width: 1024px) {
  .site-footer {
    margin-left: var(--sidebar-w);
  }
  body.sidebar-collapsed .site-footer {
    margin-left: var(--sidebar-collapsed-w);
  }
}
.site-footer__inner {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0 auto;
  max-width: var(--max-w);
}
.site-footer__brand {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.site-footer__brand-icon {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  padding: 0.45rem;
}
.site-footer__brand-name,
.site-footer__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.site-footer__heading {
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  padding-bottom: 0.35rem;
}
.site-footer__desc,
.site-footer__address,
.site-footer__credit,
.site-footer__meta {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.site-footer__links {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.site-footer__links li {
  margin: 0.2rem 0;
}
.site-footer__links a {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.site-footer__map iframe {
  border: 1px solid var(--rule) !important;
  height: 120px;
  margin: 0.5rem 0;
  width: 100%;
}
.site-footer__meta {
  border-top: 1px solid var(--ink-rule);
  margin: 1.5rem auto 0;
  max-width: var(--max-w);
  padding-top: 0.7rem;
}

.club-grid,
.paper-card-grid,
.thumb-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.paper-card,
.club-card {
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  color: var(--ink);
  display: block;
  height: 100%;
  padding: 0.9rem;
  position: relative;
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}
.paper-card:hover,
.club-card:hover {
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-3px) rotate(var(--card-rotate, -0.5deg));
}
.paper-card__logo,
.club-card__logo {
  align-items: center;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  display: flex;
  height: 128px;
  justify-content: center;
  margin: -0.9rem -0.9rem 0.8rem;
  padding: 0.7rem;
}
.paper-card__logo img,
.club-card__logo img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.paper-card__logo-fallback,
.club-card__logo-fallback {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
}
.paper-card__name,
.club-card__name {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.45rem;
  text-transform: none;
  text-wrap: balance;
}
.paper-card__rule {
  border-top: 2px solid var(--accent);
  display: block;
  margin-bottom: 0.55rem;
  width: 38%;
}
.paper-card__excerpt,
.club-card__count {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.paper-card__cta {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.club-card__count {
  color: var(--ink-muted);
  margin: 0;
}

/* Thumb — newspaper pin-board card with correct aspect preservation
   Each image keeps its intrinsic aspect ratio (width/height from JSONL) via
   --thumb-aspect fallback. Long portraits are clamped to avoid page-stretch.
   Pin is a CSS-only dot; rotation is subtle to avoid layout thrash. */
.thumb {
  break-inside: avoid;
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  max-width: 360px;
  min-width: min(100%, 220px);
  position: relative;
  transform: rotate(var(--pin-rotate, 0deg));
  transform-origin: 50% 0%;
}

/* Valid figure/figcaption semantics inside the pin card */
.thumb__figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

.thumb::before {
  /* pin head */
  background: radial-gradient(circle at 30% 30%, #c9a86a, #8b6f32 65%, #5a4220 100%);
  border: 1px solid rgba(24, 20, 16, 0.35);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(24, 20, 16, 0.35);
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  width: 12px;
  z-index: 2;
}

.thumb-grid {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1rem;
}

.thumb a {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  box-shadow: 0 1px 0 rgba(24, 20, 16, 0.08);
  display: flex;
  justify-content: center;
  min-height: 128px;
  overflow: hidden;
  padding: 0.45rem;
  position: relative;
}

.thumb__media {
  align-items: center;
  aspect-ratio: var(--thumb-aspect, auto);
  display: flex;
  justify-content: center;
  max-height: min(360px, 48vw);
  max-width: 100%;
  min-height: 108px;
  overflow: hidden;
  width: 100%;
}

.thumb img {
  display: block;
  height: auto;
  max-height: min(340px, 46vw);
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  width: auto;
  /* Preserve intrinsic ratio when width/height attrs are present — prevents layout shift */
  aspect-ratio: attr(width) / attr(height);
}

.thumb video {
  display: block;
  height: auto;
  max-height: min(340px, 46vw);
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.thumb__cap {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.35;
  min-height: calc(var(--caption-lines, 1) * 1.2em);
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
}

.thumb__badge {
  background: var(--accent);
  border-radius: 999px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  position: absolute;
  right: 0.5rem;
  text-transform: uppercase;
  top: 0.5rem;
  z-index: 3;
}

.thumb--missing-name {
  outline: 1.5px dashed var(--accent);
  outline-offset: 2px;
}

/* Shared hidden state for search filtering (avoids fragile style-attr probes) */
.is-hidden {
  display: none !important;
}
.thumb--reveal {
  opacity: 0;
  transform: translateY(12px) rotate(var(--pin-rotate, 0deg));
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}
.thumb--reveal.is-revealed {
  opacity: 1;
  transform: rotate(var(--pin-rotate, 0deg));
}

.media-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.media-card {
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  min-width: 0;
  padding: 0.65rem;
  transform: rotate(var(--pin-rotate, 0deg));
}

.media-card__player {
  align-items: center;
  background: var(--paper-deep);
  display: flex;
  min-height: 72px;
  overflow: hidden;
  padding: 0.35rem;
}

.media-card video {
  display: block;
  height: auto;
  max-height: 280px;
  width: 100%;
}

.media-card audio {
  width: 100%;
}

.media-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  margin: 0.55rem 0 0.15rem;
  overflow-wrap: anywhere;
}

.media-card__meta {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  margin: 0;
}

.ob-table {
  font-size: var(--fs-sm);
  margin: 1rem 0;
}
.ob-table th,
.ob-table td {
  border: 1px solid var(--ink-rule);
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
}
.ob-table th {
  background: var(--paper-deep);
  font-family: var(--font-display);
  text-transform: uppercase;
}
.ob-role {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
}
.contact-list {
  list-style: none;
  padding: 0;
}
.contact-list li {
  margin-bottom: 0.5rem;
}

.reveal-section {
  contain: layout paint;
}

@media (max-width: 520px) {
  .thumb {
    flex-basis: 100%;
    max-width: none;
  }
  .thumb__media {
    max-height: none;
  }
  .thumb img {
    max-height: min(460px, 100vw);
  }
  .ob-table,
  .ob-table thead,
  .ob-table tbody,
  .ob-table tr,
  .ob-table th,
  .ob-table td {
    display: block;
  }
  .ob-table thead {
    position: absolute;
    clip: rect(0 0 0 0);
  }
  .ob-table tr {
    border: 1px solid var(--ink-rule);
    margin-bottom: 0.75rem;
  }
  .ob-table td {
    border: 0;
    border-bottom: 1px solid var(--paper-edge);
    padding-left: 7rem;
    position: relative;
  }
  .ob-table td::before {
    color: var(--ink-muted);
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    left: 0.5rem;
    position: absolute;
    text-transform: uppercase;
    top: 0.55rem;
  }
}

.back-to-top {
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  bottom: 4.5rem;
  box-shadow: 3px 3px 0 var(--paper-edge);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  height: 44px;
  position: fixed;
  right: 1.5rem;
  transition:
    opacity var(--transition),
    transform var(--transition),
    background var(--transition);
  width: 44px;
  z-index: 800;
}

.back-to-top:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .back-to-top {
    bottom: 4.25rem;
    right: 1rem;
  }
}

/* ── Paper flourishes ─────────────────────────────────────────── */

/* Torn-edge section divider — zig-zag clip on a strip of paper */
.paper-tear {
  background: var(--paper-soft);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 6px),
    96% 100%,
    92% calc(100% - 5px),
    88% 100%,
    84% calc(100% - 7px),
    80% 100%,
    76% calc(100% - 4px),
    72% 100%,
    68% calc(100% - 6px),
    64% 100%,
    60% calc(100% - 5px),
    56% 100%,
    52% calc(100% - 7px),
    48% 100%,
    44% calc(100% - 4px),
    40% 100%,
    36% calc(100% - 6px),
    32% 100%,
    28% calc(100% - 5px),
    24% 100%,
    20% calc(100% - 6px),
    16% 100%,
    12% calc(100% - 4px),
    8% 100%,
    4% calc(100% - 6px),
    0 100%
  );
  height: 12px;
  margin: 1.5rem 0;
}

/* Postmark stamp — circular ink postmark for club mastheads */
.postmark {
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  height: 74px;
  letter-spacing: 0.08em;
  opacity: 0.75;
  padding: 0.5rem;
  pointer-events: none;
  position: absolute;
  right: 1rem;
  text-align: center;
  text-transform: uppercase;
  top: 1rem;
  transform: rotate(8deg);
  width: 74px;
  z-index: 1;
}
.postmark::after {
  border: 1px solid var(--accent);
  border-radius: 50%;
  content: "";
  inset: 4px;
  position: absolute;
}
.postmark__lines {
  border-block: 1px solid var(--accent);
  display: inline-block;
  line-height: 1.3;
  margin-top: 0.35rem;
  padding: 0.15rem 0.3rem;
}

/* Washing-tape strip for pinned thumbs */
.thumb__tape {
  background: rgba(183, 141, 47, 0.4);
  box-shadow: 0 1px 2px rgba(24, 20, 16, 0.18);
  height: 16px;
  left: 50%;
  position: absolute;
  top: -8px;
  transform: translateX(-50%) rotate(-2deg);
  width: 58px;
  z-index: 3;
}

/* Venue / map card — paper frame for embeds */
.map-card {
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--paper-edge);
  margin: 1.5rem 0;
  padding: 0.6rem;
}
.map-card__frame {
  border: 1px solid var(--rule);
  overflow: hidden;
}
.map-card__frame iframe {
  border: 0;
  display: block;
  height: 260px;
  width: 100%;
}
.map-card__label {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  margin: 0.5rem 0 0;
  text-transform: uppercase;
}

/* Header count chip — archive size straight from the map */
.count-chip {
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  color: var(--ink-muted);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  margin-left: 0.75rem;
  padding: 0.25rem 0.55rem;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  vertical-align: middle;
}

/* Reading-progress ink rule — accent fills as you scroll */
.reading-progress {
  background: var(--accent);
  height: 3px;
  inset: 0 0 auto 0;
  pointer-events: none;
  position: fixed;
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1100;
}
.reading-progress {
  will-change: transform;
}

/* ── Skeleton scaffolding — paper placeholders while the map loads ── */
@keyframes sac-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.skeleton {
  animation: sac-skeleton-pulse 1.4s ease-in-out infinite;
  background: var(--paper-deep);
  border: 1px dashed var(--ink-rule);
  color: transparent;
  min-height: 1em;
  position: relative;
}
.skeleton--thumb {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--ink-rule);
  margin: 0.6rem;
  min-height: 108px;
}
.skeleton--grid {
  display: grid;
  gap: 1.25rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
.skeleton--grid > li {
  aspect-ratio: 4 / 3;
  animation: sac-skeleton-pulse 1.4s ease-in-out infinite;
  background: var(--paper-deep);
  border: 1px dashed var(--ink-rule);
}
.skeleton--identity {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}
.skeleton--identity > * {
  animation: sac-skeleton-pulse 1.4s ease-in-out infinite;
  background: var(--paper-deep);
  border: 1px dashed var(--ink-rule);
}
.skeleton--identity .sk-logo {
  flex: 0 0 96px;
  height: 96px;
}
.skeleton--identity .sk-lines {
  flex: 1;
  display: grid;
  gap: 0.5rem;
}
.skeleton--identity .sk-lines span {
  height: 0.9rem;
}
.skeleton--identity .sk-lines span:nth-child(2) {
  width: 70%;
}
.skeleton--identity .sk-lines span:nth-child(3) {
  width: 45%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton--grid > li,
  .skeleton--identity > *,
  .skeleton--identity .sk-lines span {
    animation: none;
  }
}

/* Backstopped thumbs skip the fade: their sections live offscreen under
   content-visibility:auto, which freezes running transitions — a fading
   reveal would paint blank until scrolled into view. */
.thumb--reveal.is-backstopped {
  transition: none;
}