/* ==========================================================================
   Leah Grabelsky — site stylesheet
   Single source of truth. No framework, no page-local overrides.
   ========================================================================== */

:root {
  --forest:        #0E3538;
  --forest-deep:   #0A2629;
  --gold:          #D9A13B;
  --gold-light:    #F0BE5F;
  --cream:         #F6F2E8;
  --cream-warm:    #EFE9DA;
  --paper:         #FFFFFF;
  --ink:           #1C2B25;
  --body:          #26332C;
  --muted:         #5D6B63;
  --rule:          rgba(14, 53, 56, 0.16);
  --rule-soft:     rgba(14, 53, 56, 0.09);

  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;

  --shell: 1240px;
  --gutter: clamp(24px, 5vw, 64px);
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

/* Root paints forest-deep: the iOS/macOS overscroll area past the footer then
   reads as a distinct band rather than blending into the forest footer, which
   made the page feel like it kept scrolling. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--forest-deep);
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--cream);
  overscroll-behavior-y: none;
  color: var(--body);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: #2F6F66; text-decoration: none; }

/* ------------------------------------------------- accessibility (WCAG AA) --
   Visible keyboard focus on every interactive element. Two-tone ring so it
   shows on both the cream body and the forest nav/footer. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-nav :where(a, button):focus-visible,
.site-footer a:focus-visible,
.hero a:focus-visible,
.spine a:focus-visible {
  outline-color: var(--gold-light);
}
/* Focus inside cards should ring the whole card, not just the text */
.card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--cream);
  font-weight: 600;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Links get an underline on hover and focus so they are not colour-only */
main a:not(.btn):not(.pill):not(.card):not(.card__cta):not(.explore-link):not(.next-area__link):hover,
main a:not(.btn):not(.pill):not(.card):not(.next-area__link):focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: pretty;
}

p { margin: 0 0 1em 0; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.measure { max-width: var(--measure); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- nav ----- */

.site-nav {
  background: var(--forest);
  padding: 22px 0;
}

.site-nav .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.brand:hover { color: var(--cream); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(246, 242, 232, 0.82);
  padding-bottom: 5px;
}
.nav-link:hover { color: var(--cream); }

.nav-link.is-current {
  color: var(--cream);
  border-bottom: 2px solid var(--gold);
}

.nav-cta {
  border: 1px solid rgba(246, 242, 232, 0.42);
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
}
.nav-cta:hover {
  background: var(--cream);
  color: var(--forest);
}

.nav-group { position: relative; display: flex; align-items: center; }

.nav-group > .nav-link::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.nav-menu {
  position: absolute;
  top: 100%; left: -18px;
  min-width: 210px;
  margin: 12px 0 0 0;
  padding: 8px 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 44px rgba(10, 38, 41, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 40;
}

.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu a {
  display: block;
  padding: 9px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--forest);
}
.nav-menu a:hover { background: var(--cream); color: var(--forest); }
.nav-menu a.is-current { box-shadow: inset 3px 0 0 var(--gold); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: 1px solid rgba(246, 242, 232, 0.42);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  margin: 4px auto;
  background: var(--cream);
}

/* ------------------------------------------------------------- heroes ---- */

.hero {
  background: var(--forest);
  color: var(--cream);
  padding: clamp(36px, 4.5vw, 60px) 0 clamp(52px, 7vw, 92px);
}

.hero .eyebrow {
  margin: 0 0 20px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero h1 {
  max-width: 20ch;
  margin: 0 0 28px 0;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.hero .lede {
  max-width: 66ch;
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: rgba(246, 242, 232, 0.88);
}

.hero .lede + .lede { margin-top: 1.1em; }

/* Home hero: copy left, portrait right */
.hero--portrait .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 72px;
  align-items: center;
}
.hero--portrait h1 { max-width: 22ch; }
.hero--portrait .lede { max-width: 58ch; }
.hero-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream-warm);
  box-shadow: 0 0 0 1px var(--gold);
}

.hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
@media (max-width: 860px) {
  .hero--portrait .shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-portrait { width: 240px; max-width: 60vw; }
}

/* Category-page hero carries a kicker above the rule */
.hero .kicker {
  display: inline-block;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ----------------------------------------------------------- sections ---- */

.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--tight { padding: clamp(40px, 4.5vw, 60px) 0; }
.section--paper { background: var(--paper); }

.section-title {
  margin: 0 0 18px 0;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.025em;
}

.section-lede {
  max-width: 64ch;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--muted);
}

/* ------------------------------------------------------------- strips ---- */

.stat-strip {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stat-strip .shell { padding: 0; max-width: none; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 30px var(--gutter) 26px;
  color: inherit;
  transition: background 0.18s;
}
.stat + .stat { border-left: 1px solid var(--rule); }
.stat:hover { background: var(--cream-warm); }

.stat strong {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--forest);
  text-wrap: pretty;
}

.stat > span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

.stat em {
  display: block;
  margin-top: auto;
  padding-top: 18px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.18s;
}
.stat em span {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.18s;
}
.stat:hover em { color: var(--forest); }
.stat:hover em span { transform: translateX(3px); }

@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .stat { padding: 22px var(--gutter); }
  .stat em { padding-top: 12px; }
}

/* Sibling strip: artifacts within the current category */
.sibling-strip {
  background: var(--forest-deep);
  padding: 16px 0;
}

.sibling-strip .shell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.sibling-strip__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.sibling-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}

.pill {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(246, 242, 232, 0.28);
  font-size: 14px;
  font-weight: 600;
  color: rgba(246, 242, 232, 0.85);
}
.pill:hover {
  border-color: var(--gold);
  color: var(--cream);
}
.pill.is-current {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest-deep);
}

/* -------------------------------------------------------------- cards ---- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 2.6vw, 36px);
}

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

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(14, 53, 56, 0.18);
  border-top: 5px solid var(--forest);
  color: var(--body);
}
.card:hover { color: var(--body); }

a.card:hover {
  border-top-color: var(--gold);
  box-shadow: 0 16px 40px rgba(10, 38, 41, 0.1);
}

/* ---------------------------------------------------------------------------
   ARTIFACT THUMBNAILS — ONE SYSTEM OWNS THE MAT.

   Rules, so this never drifts again:
     1. Image files are RAW. Never bake a white mat into a thumbnail file.
     2. --thumb-mat is the single source of truth for the border. Change it
        here and every card on the site updates identically.
     3. The image fills its inner box (cover), so there is never letterboxing
        and the mat can never be cropped away — the mat lives outside the image.
     4. Documents anchor to the top and fade at the bottom, so a tall page
        reads as continuing rather than being cut mid-line.
   -------------------------------------------------------------------------- */

.thumb {
  --thumb-mat: 16px;
  position: relative;
  aspect-ratio: 1.4 / 1;
  padding: var(--thumb-mat);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.thumb__inner {
  position: relative;
  width: 100%; height: 100%;
  background: var(--paper);
  overflow: hidden;
}

.thumb__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--paper);
}

/* Photographs and artwork read better centred. */
.thumb__inner--photo img { object-position: center center; }

/* Tall documents: soften the bottom edge instead of cutting mid-line. */
.thumb__inner--doc::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 92%);
}

/* A pair of pages in one frame: the frame is taller so each half sits close to
   page proportions, which keeps the crop shallow. */
.thumb:has(.thumb__inner--pair) { aspect-ratio: 1.52 / 1; }
.thumb__inner--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;      /* definite row, or the images size to their
                                    own ratio and overflow the frame */
  gap: var(--thumb-mat);
  background: transparent;
}
.thumb__inner--pair img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}

/* Contact page: two blocks side by side */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
  margin-bottom: 56px;
}
.contact-block h2 {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
}
.contact-block p {
  margin: 18px 0 0 0;
  font-size: 20px;
}

/* Contact page: two blocks side by side — end */

.thumb::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 11px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

.card__body { padding: 30px 32px 34px; }

.card__body h3 {
  margin: 0 0 14px 0;
  font-size: clamp(22px, 1.9vw, 27px);
  letter-spacing: -0.025em;
  color: var(--forest);
}

.card__rule {
  width: 46px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--gold);
}

.card__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.card__cta {
  display: block;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
  color: #2F6F66;
}
a.card:hover .card__cta { color: var(--gold); }

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.btn--primary:hover { background: var(--forest-deep); color: var(--cream); }

.btn--ghost {
  border-color: var(--rule);
  color: var(--forest);
}
.btn--ghost:hover { border-color: var(--forest); color: var(--forest); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* Full-bleed band holding a single onward link */
.explore-band {
  background: var(--cream-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 30px 0;
}

.explore-link {
  display: inline-flex;
  align-items: center;
  padding: 17px 30px;
  background: var(--forest);
  color: var(--cream) !important;
  gap: 12px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--forest);
}
.explore-link:hover { background: var(--forest-deep); color: var(--gold-light) !important; }
.explore-link svg { flex-shrink: 0; }

/* --------------------------------------------------------- about page ---- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.about-copy h1 {
  margin: 0 0 26px 0;
  font-size: clamp(32px, 3.9vw, 50px);
  letter-spacing: -0.03em;
}

.about-copy .intro {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.58;
  color: var(--forest);
}

.about-copy .vignettes {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.about-copy .vignettes p { margin-bottom: 1.2em; }

.about-copy .closing {
  margin-top: 28px;
  padding-left: 22px;
  border-left: 3px solid var(--gold);
  font-size: 19px;
  font-weight: 600;
  color: var(--forest);
}

.about-photo { margin: 0; }
.about-photo img {
  width: 100%;
  border: 1px solid var(--rule);
}
.about-photo figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* ------------------------------------------------ artifact page parts ---- */

/* Breadcrumb above an artifact title */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 242, 232, 0.6);
}
.crumb a { color: var(--gold); }
.crumb a:hover { color: var(--gold-light); }

/* Facts rail under an artifact hero */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.fact { padding: 24px var(--gutter); }
.fact + .fact { border-left: 1px solid var(--rule); }

.fact dt {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--forest);
}

/* A block of prose + a full artifact image, stacked */
.exhibit { margin-top: clamp(40px, 5vw, 68px); }
.exhibit:first-child { margin-top: 0; }

.exhibit__head { max-width: 68ch; margin-bottom: 26px; }

.exhibit__head h2 {
  margin: 0 0 14px 0;
  font-size: clamp(24px, 2.4vw, 33px);
  letter-spacing: -0.025em;
  color: var(--forest);
}

.exhibit__head p { color: var(--muted); }

/* Full artifact: uncropped, matted, captioned. This is the evidence — it is
   never cropped to fit a frame the way a card thumbnail is. */
.plate {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(16px, 2vw, 28px);
}
.plate img { width: 100%; }

.plate figcaption {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.plate-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

/* Facsimile: newspaper / letter reproductions set in serif */
.facsimile {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--forest);
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3.4vw, 52px);
}

.facsimile__slug {
  margin: 0 0 18px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2F6F66;
}

.facsimile h3 {
  margin: 0 0 10px 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.facsimile__deck {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px);
  color: #414C44;
}

.facsimile__body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.66;
  color: var(--body);
}
.facsimile__body--two-col { column-count: 2; column-gap: 44px; }

/* Pull quote */
.pullquote {
  margin: clamp(36px, 4vw, 56px) 0;
  padding-left: clamp(20px, 2.4vw, 32px);
  border-left: 3px solid var(--gold);
  max-width: 52ch;
}
.pullquote p {
  font-size: clamp(21px, 2.1vw, 29px);
  line-height: 1.34;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--forest);
}
.pullquote cite {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Ordered sequence (lesson arcs, phases) */
.steps { counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold);
}

.step h4 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: var(--forest);
}
.step p { margin: 0; color: var(--muted); }

/* Matched pair: two source images shown in identical boxes, both uncropped */
.plate-row--match .plate img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--paper);
}

/* Numbered exhibit head, for artifact pages that walk through stages */
.exhibit__head--numbered {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  max-width: 74ch;
  align-items: start;
}

.exhibit__num {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
}

/* A run of deck slides or sequential pages, each with its own caption */
.slide-seq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

.slide-seq figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.slide-seq img {
  width: 100%;
  border-bottom: 1px solid var(--rule-soft);
}

.slide-seq figcaption {
  padding: 16px 18px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.slide-seq figcaption strong {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--forest);
}

.seq-num {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--forest);
  background: var(--cream-warm);
  border-bottom: 1px solid var(--rule-soft);
}

/* A stack of consecutive document pages, read top to bottom */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}

.page-stack__gap {
  padding: 14px 20px;
  background: var(--cream-warm);
  border: 1px dashed var(--rule);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.jump {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--gold);
  font-size: 15px;
  font-weight: 700;
  color: var(--forest);
}
.jump:hover { color: var(--gold); }

/* Small overlay label on a source image (date, provenance) */
.tag {
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  margin-bottom: 12px;
  padding: 5px 12px;
  background: var(--forest);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

/* Student letter card — serif body, audience named above the heading */
.letter {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--gold);
  padding: clamp(22px, 2.2vw, 32px);
}

.letter__audience {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2F6F66;
}

.letter h3 {
  margin: 0 0 18px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--forest);
}

.letter__body,
.letter__body p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.68;
  color: var(--body);
}

.letter__signature {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
}

.provenance {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* Collapsible long text. Height comes from data-clamp-height; the toggle is
   appended by js/clamp.js, so the full text is present without JS. */
.clamp { position: relative; }

.clamp.is-clamped > .clamp__content {
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

.clamp__toggle {
  display: inline-block;
  margin-top: 16px;
  padding: 0 0 3px 0;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--gold);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
}
.clamp__toggle:hover { color: var(--gold); }

/* In-site deck viewer */
.deck {
  background: var(--paper);
  border: 1px solid var(--rule);
}

.deck__stage {
  background: var(--cream-warm);
  padding: clamp(14px, 1.8vw, 24px);
}
.deck__stage img {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
}

.deck__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(14px, 1.8vw, 24px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.deck__btn {
  width: 40px; height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule);
  font-size: 17px;
  color: var(--forest);
  cursor: pointer;
}
.deck__btn:hover:not(:disabled) { border-color: var(--forest); background: var(--cream); }
.deck__btn:disabled { opacity: .32; cursor: default; }

.deck__counter {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.deck__hint {
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
}

.deck__rail {
  display: flex;
  gap: 8px;
  padding: 14px clamp(14px, 1.8vw, 24px);
  overflow-x: auto;
  scrollbar-width: thin;
}

.deck__rail button {
  flex: 0 0 auto;
  width: 108px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  cursor: pointer;
  line-height: 0;
}
.deck__rail button:hover { border-color: var(--forest); }
.deck__rail button[aria-current="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}
.deck__rail img { width: 100%; }

@media (max-width: 600px) {
  .deck__rail button { width: 84px; }
  .deck__hint { display: none; }
}

/* Category spine at the foot of a case page */
.spine {
  background: var(--forest-deep);
  padding: 22px 0;
}
.spine .shell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.spine__prefix {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 242, 232, 0.55);
}
.spine ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0; padding: 0;
  list-style: none;
}
.spine a {
  font-size: 16px;
  font-weight: 600;
  color: rgba(246, 242, 232, 0.82);
  padding-bottom: 3px;
}
.spine a:hover { color: var(--cream); }
.spine a.is-current {
  color: var(--cream);
  border-bottom: 2px solid var(--gold);
}

/* Prev / next variant: artifact-to-artifact navigation */
.spine--nav .shell { justify-content: space-between; }

.spine__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 30ch;
  padding: 9px 18px;
  border: 1px solid rgba(246, 242, 232, 0.28);
  font-size: 14px;
  font-weight: 600;
  color: rgba(246, 242, 232, 0.85);
}
.spine__step:hover { border-color: var(--gold); color: var(--cream); }

/* -------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--forest);
  padding: 36px 0;
}

.site-footer .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.footer-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--cream);
}
.footer-name:hover { color: var(--cream); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-links a {
  font-size: 15px;
  color: rgba(246, 242, 232, 0.75);
}
.footer-links a:hover { color: var(--gold); }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 900px) {
  .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--rule); }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--rule); }
  .facsimile__body--two-col { column-count: 1; }
}

@media (max-width: 780px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 18px;
    background: var(--forest-deep);
  }
  .site-nav { position: relative; }
  .site-nav.is-open .nav-links { display: flex; }
  .nav-toggle { display: block; }
  /* 44px minimum tap target on every nav item (WCAG 2.5.5) */
  .nav-links > * { padding: 0; }
  .nav-links > a,
  .nav-group > .nav-link,
  .nav-menu a,
  .nav-cta {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--gutter);
  }
  .nav-link.is-current { border-bottom: 0; box-shadow: inset 3px 0 0 var(--gold); }
  .nav-group > .nav-link::after { display: none; }
  .nav-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    margin: 6px 0 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-menu a { padding: 8px 0 8px 16px; color: rgba(246,242,232,0.8); }
  .nav-menu a:hover { background: transparent; color: var(--cream); }
  .nav-cta { text-align: left; border: 0; box-shadow: inset 0 1px 0 rgba(246,242,232,0.2); }
  .nav-cta:hover { background: transparent; color: var(--gold); }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step::before { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* Links on the dark hero: the body teal is far too dark against forest.
   Cream text with a gold underline, going full gold on hover. */
.hero a,
.spine a {
  color: var(--cream);
}
.hero .lede a,
.hero p a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.hero .lede a:hover,
.hero p a:hover,
.hero .lede a:focus-visible,
.hero p a:focus-visible {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* ------------------------------------------------------- contact form ---- */

.contact-form-wrap {
  max-width: 720px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.contact-form { margin-top: 36px; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.field { display: flex; flex-direction: column; margin-bottom: 24px; }
.field label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
}
.field input,
.field textarea {
  font-family: inherit;
  font-size: 18px;
  line-height: 1.55;
  color: var(--body);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 13px 15px;
}
.field input:focus,
.field textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--forest);
}
.field textarea { resize: vertical; }
.contact-form .btn { margin-top: 4px; }


/* --------------------------------------------- plates that size themselves --
   No fixed frame ratio and no cropping: the mat is padding, the image keeps
   its own proportions, so every document sits in an identical border however
   tall or wide it happens to be. */
.plate--auto {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 22px;
  margin: 0;
}
.plate--auto > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
}
.plate--auto figcaption {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.plate--strip { padding: 16px 18px; }
.plate__tag {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
}
.strip-stack {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}
.exhibit__aside {
  margin: 44px 0 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-stack--pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  align-items: start;
}
.credit {
  margin-top: 36px;
  font-size: 15px;
  color: var(--muted);
}


/* ------------------------------------------------------ document viewer ----
   One page at a time, each keeping its own proportions inside an identical
   mat. Nothing is cropped and nothing is letterboxed. */
.viewer {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 22px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.viewer__stage { position: relative; }
.viewer__page { display: none; margin: 0; }
.viewer__page.is-active { display: block; }
.viewer__page img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 76vh;
  height: auto;
  margin: 0 auto;
}
.viewer__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.viewer__btn {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--forest);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.viewer__btn:hover:not(:disabled) { background: var(--forest); color: var(--cream); }
.viewer__btn:disabled { opacity: 0.3; cursor: default; }
.viewer__counter {
  min-width: 66px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------- video ---- */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--forest-deep);
  border: 1px solid var(--rule);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}


/* ------------------------------------------------------------ prompts ---- */
.prompt {
  margin: 22px 0 0 0;
  padding: 18px 20px;
  background: var(--cream-warm);
  border-left: 3px solid var(--gold);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}
.prompt strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--forest);
}


/* -------------------------------------------------- documents on paper ---- */
.paper {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 34px;
}
.sample-label, .curated-intro {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.paper h2 {
  margin: 30px 0 14px 0;
  font-size: 22px;
  line-height: 1.3;
  color: var(--forest);
}
.paper h2:first-of-type { margin-top: 12px; }
.table-hint {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--muted);
}
.table-outer { border: 1px solid var(--rule); }
.table-scroll { overflow-x: auto; }
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.data-table th, .data-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  text-align: center;
  white-space: nowrap;
}
.data-table th {
  background: var(--cream-warm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--forest);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table th:last-child, .data-table td:last-child { border-right: 0; }
.data-table td.correct   { background: #E7F1EA; color: #1B5638; font-weight: 600; }
.data-table td.incorrect { background: #F7E9E7; color: #8E2F26; font-weight: 600; }
.data-table td.unclear   { background: #FBF3DC; color: #6F5610; font-weight: 600; }
.data-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 14px 0;
  font-size: 14px;
  color: var(--muted);
}
.data-legend span { display: flex; align-items: center; gap: 8px; }
.data-legend i {
  width: 15px; height: 15px;
  border: 1px solid;
  display: inline-block;
}

/* exam questions */
.q-block { margin: 0 0 34px 0; }
.q-block:last-child { margin-bottom: 0; }
.unit-label {
  margin: 0 0 20px 0;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
}
.q-item { margin: 0 0 28px 0; }
.q-item > p { margin: 0 0 12px 0; font-size: 17px; line-height: 1.6; }
.q-num { font-weight: 700; color: var(--forest); margin-right: 4px; }
.q-quote {
  margin: 0 0 14px 0 !important;
  padding: 15px 18px;
  background: var(--cream-warm);
  border-left: 3px solid var(--forest);
  font-size: 16px;
  font-style: italic;
  color: var(--body);
}
.q-choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.q-choices li {
  font-size: 16px;
  line-height: 1.55;
  padding-left: 4px;
}
.full-exam { margin-top: 14px; }
.full-exam > summary {
  cursor: pointer;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
}
.full-exam > summary:hover { color: var(--gold-deep, var(--forest)); }
.viewer--text { border: 0; padding: 0; }
.viewer__hint {
  margin: 12px 0 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* interactive activity frames */
.activity-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.activity-tab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 18px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.activity-tab span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.activity-tab strong { font-size: 16px; color: var(--forest); }
.activity-tab:hover { border-color: var(--forest); }
.activity-tab[aria-selected="true"] {
  background: var(--forest);
  border-color: var(--forest);
}
.activity-tab[aria-selected="true"] span { color: var(--gold-light, var(--gold)); }
.activity-tab[aria-selected="true"] strong { color: var(--cream); }
.activity-frame {
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.activity-frame iframe {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
}
.activity-note {
  margin: 14px 0 0 0;
  font-size: 15px;
  color: var(--muted);
}


/* -------------------------------------------------------- transcript ---- */
.transcript-part { margin: 0 0 34px 0; max-width: 64ch; }
.transcript-part:last-child { margin-bottom: 0; }
.transcript-part p { font-size: 16px; line-height: 1.62; margin: 0 0 14px 0; }
.transcript-part h2 { font-size: 19px; margin: 0 0 12px 0; }
.transcript-fade h2 { font-size: 19px; margin: 0 0 12px 0; }
.transcript-fade p { font-size: 16px; line-height: 1.62; margin: 0 0 14px 0; }
.transcript-fade { max-width: 64ch; }
.transcript-questions {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--cream-warm);
  border-left: 3px solid var(--gold);
}
.transcript-questions strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
}
.transcript-questions ol { font-size: 16px; line-height: 1.6; }

.transcript-fade {
  position: relative;
  max-height: 260px;
  overflow: hidden;
}
.transcript-fade::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--paper) 88%);
}
.transcript-more-note {
  margin: 4px 0 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--muted);
}

.nav-menu__all {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nav-menu li:has(.nav-menu__all) {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(246, 242, 232, 0.18);
}


/* ------------------------------------------- artifact-to-artifact spine ---- */
.spine-bar {
  border-top: 1px solid var(--rule);
  background: var(--cream-warm);
}
.spine-bar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 28px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.spine-bar .pill--prev { margin-right: auto; }
.spine-bar .pill--next { margin-left: auto; }
.spine-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.spine-cats__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.spine-cats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spine-cats a {
  font-size: 16px;
  color: var(--forest);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.spine-cats a:hover { border-bottom-color: var(--gold); }
.spine-cats a.is-current {
  font-weight: 700;
  border-bottom-color: var(--gold);
}
@media (max-width: 720px) {
  .spine-bar .shell { justify-content: flex-start; }
  .spine-bar .pill--prev, .spine-bar .pill--next { margin: 0; }
}

.spine-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spine-nav--prev { margin-right: auto; align-items: flex-start; }
.spine-nav--next { margin-left: auto; align-items: flex-end; }
.spine-nav__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.spine-bar .pill--prev, .spine-bar .pill--next { margin: 0; }
@media (max-width: 720px) {
  .spine-nav--prev, .spine-nav--next { margin: 0; align-items: flex-start; }
}

/* paired plates: equal columns, equal heights, captions aligned */
.page-stack--pair { align-items: stretch; }
.page-stack--pair > .plate { display: flex; flex-direction: column; }
.page-stack--pair > .plate > img { flex: 0 0 auto; }
.page-stack--pair > .plate figcaption { margin-top: auto; }

/* spine bar: three fixed slots so prev/next never wrap under the categories */
.spine-bar .shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px 32px;
}
.spine-bar .spine-cats { justify-content: center; }
@media (max-width: 860px) {
  .spine-bar .shell { grid-template-columns: 1fr; }
  .spine-bar .spine-cats { justify-content: flex-start; }
}

/* .pill is built for the dark green strip; on the cream spine bar it needs
   forest ink or it reads as invisible and unclickable. */
.spine-bar .pill {
  color: var(--forest);
  border-color: rgba(14, 53, 56, 0.35);
  background: var(--paper);
}
.spine-bar .pill:hover {
  color: var(--forest);
  border-color: var(--forest);
  background: var(--cream);
}

/* Argument-writing exhibit: the rubric is dense, so trade mat for image size.
   Scoped to this exhibit only. */
#argument-writing .plate--auto { padding: 10px; }
#argument-writing .plate--auto figcaption { margin-top: 14px; padding-top: 12px; }


/* ------------------------------------------------------ click-to-zoom ---- */
a.zoomable {
  position: relative;
  display: block;
  cursor: zoom-in;
}
a.zoomable img { display: block; width: 100%; height: auto; }
.zoom-cue {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 14px;
  background: rgba(14, 53, 56, 0.92);
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
a.zoomable:hover .zoom-cue,
a.zoomable:focus-visible .zoom-cue { opacity: 1; }

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px;
  background: rgba(10, 38, 41, 0.96);
}
.zoom-overlay.is-open { display: flex; }
.zoom-frame {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  overflow: hidden;
  background: #FFFFFF;
  cursor: zoom-in;
}
.zoom-frame img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto; height: auto;
  transition: transform 0.2s ease;
}
.zoom-frame.is-zoomed { cursor: move; }
.zoom-frame.is-zoomed img { transform: scale(2.6); transition: none; }
.zoom-close {
  position: absolute;
  top: 22px; right: 26px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(246, 242, 232, 0.4);
  border-radius: 0;
  cursor: pointer;
}
.zoom-close:hover { border-color: var(--gold); color: var(--gold-light, var(--gold)); }
.zoom-hint {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(246, 242, 232, 0.7);
}

/* Session banner: a header-scale artefact, so it sits above the exhibits with
   a tighter mat and no heading of its own. */
.plate--banner {
  margin-bottom: 52px;
  padding: 12px;
}
.plate--banner figcaption {
  margin-top: 12px;
  padding-top: 10px;
}

.source-line { margin: 0; font-size: 16px; }


/* ------------------------------------------------- activity frame sizing ---
   The games are authored at a fixed pixel width; the wrapper scales them down
   to fit and takes the scaled height, so nothing scrolls inside the frame. */
.activity-frame--wide {
  position: relative;
  overflow: hidden;
}
.activity-scaler {
  transform-origin: top left;
}
.activity-scaler iframe {
  display: block;
  border: 0;
  overflow: hidden;
}
  height: auto;
}
/* let this exhibit use the full page width — the games need the room */
.exhibit:has(.activity-frame--wide) {
  max-width: none;
}
.exhibit:has(.activity-frame--wide) .activity-tabs { max-width: none; }


/* --------------------------------------------- work page: label-first cards --
   On /work the image is a sample from inside a category, not the content
   itself — the page's job is to teach the four-part map. So the title leads
   and the image sits below as supporting evidence. Category and artifact
   pages keep image-first, where the artifact IS the content. */
/* One aspect ratio for all four map cards, single or paired, so every
   description and link in a row sits on a shared baseline. */
.card-grid--map .thumb,
.card-grid--map .thumb:has(.thumb__inner--pair) { aspect-ratio: 1.52 / 1; }

/* The four areas, named in the hero */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 34px 0 0 0;
  padding: 22px 0 0 0;
  border-top: 1px solid rgba(246, 242, 232, 0.22);
  list-style: none;
  counter-reset: area;
}
.area-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.area-list li + li::before {
  content: "";
  width: 1px;
  height: 14px;
  background: rgba(246, 242, 232, 0.3);
}
.area-list a {
  color: var(--cream);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.area-list a:hover { border-bottom-color: var(--gold); }


/* Category-map hero: shorter, so the four areas arrive sooner */
.hero--compact { padding-top: 64px; padding-bottom: 64px; }
.hero--compact h1 { max-width: 20ch; }
.hero--compact .lede { max-width: 60ch; }


/* ------------------------------------- archived 1999 webpage (camp page) ----
   The proposal is shown as it was published: the site's own coloured nav on
   the left, the article scan on the right, capped so it reads as a period
   screenshot rather than a full-width scan. */

.archive-frame {
  width: min(100%, 620px);
  margin: 0 auto;
}
.archive-frame__page {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule);
  box-shadow: 0 12px 30px rgba(31, 45, 70, 0.08);
  padding: 12px 0 14px;
  overflow: hidden;
}
.archive-nav {
  display: grid;
  gap: 2px;
  padding: 2px 14px 0 11px;
  align-content: start;
}
.archive-nav span {
  position: relative;
  padding: 7px 2px 2px;
  color: #272727;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}
.archive-nav span::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: -8px;
  height: 8px;
  background: linear-gradient(135deg, transparent 38%, var(--accent) 39% 60%, transparent 61%) 0 0 / 8px 8px repeat-x;
}
.archive-frame__article {
  min-width: 0;
  background: #fff;
}
.archive-frame__article img {
  display: block;
  width: 100%;
  height: auto;
}
.archive-frame figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.exhibit__source {
  width: min(100%, 620px);
  margin: 10px auto 0;
  text-align: right;
  font-size: 15px;
}
.exhibit__source a { font-weight: 600; }

@media (max-width: 620px) {
  .archive-frame__page { grid-template-columns: 32% 1fr; }
  .archive-nav span { font-size: 9px; }
}


/* The 2002 pair: one landscape scan (1.458) and one tall poster (0.670).
   Equal columns made their rendered heights wildly different, so the columns
   are weighted by the images' own ratios instead — both then render at exactly
   the same height with no cropping and no added white. */
.pair--2002 {
  grid-template-columns: 2.18fr 1fr;
  align-items: start;
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .pair--2002 { grid-template-columns: 1fr; }
}


/* Two camp photographs read as one image: a single frame, no gap between. */
.photo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--thumb-mat);
}
.photo-duo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
}
@media (max-width: 620px) {
  .photo-duo { grid-template-columns: 1fr; }
}

.archive-frame__page img { display: block; width: 100%; height: auto; }


/* ------------------------------------------------ video transcript ---- */

.transcript-toggle {
  margin-top: 28px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.transcript-toggle summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  list-style: none;
}
.transcript-toggle summary::-webkit-details-marker { display: none; }
.transcript-toggle summary::after {
  content: " +";
  color: var(--gold);
}
.transcript-toggle[open] summary::after { content: " –"; }
.tr-body {
  margin-top: 26px;
  max-width: 62ch;
}
.tr-line {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.tr-time {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 4px;
}
.tr-line p { margin: 0; }
.tr-note {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--muted);
}
@media (max-width: 620px) {
  .tr-line { grid-template-columns: 1fr; gap: 4px; }
}


/* Synced transcript: scroll box + active turn, only once the SDK is live */
.tr-body.is-synced {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 14px;
  scroll-behavior: smooth;
}
.tr-body.is-synced .tr-time {
  cursor: pointer;
  color: var(--link, #2F6F66);
}
.tr-body.is-synced .tr-time:hover { text-decoration: underline; }
.tr-line {
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.tr-line.is-active {
  border-left-color: var(--gold);
  background: var(--cream-warm);
}
.tr-line.is-active p { color: var(--forest); }


/* --------------------------------------------------- process line ---- */
/* Sits under the facts rail: how the work actually happened, in one line. */

.process {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: #E7E0CE;
}
.process p {
  margin: 0;
  padding: 22px 0;
  max-width: 92ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}
.process__label {
  display: inline-block;
  margin-right: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 2px;
}
@media (max-width: 620px) {
  .process__label { display: block; margin: 0 0 8px 0; }
}


/* Section heading above a category's card grid */
.section-heading {
  margin: 0 0 clamp(28px, 3vw, 40px) 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}


/* The pullquote used to sit at the end of these sections. With it gone, the
   section's bottom padding stacks on the next-area's own padding. */
.section:has(+ .next-area) { padding-bottom: clamp(24px, 3vw, 40px); }

/* ------------------------------------------------ next-area closing ---- */
/* Ends a category page by naming how it relates to the next one. */

.next-area {
  border-top: 1px solid var(--rule);
  background: var(--cream-warm);
}
.next-area .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: baseline;
  padding: clamp(34px, 4vw, 52px) var(--gutter);
}
.next-area__text {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--forest);
}
.next-area__link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px;
  white-space: nowrap;
}
.next-area__link:hover { color: var(--gold-deep, #A8761F); }
@media (max-width: 720px) {
  .next-area .shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ------------------------------------------------- artifact index grid ---- */
/* A contact sheet of all twelve artifacts under the four category cards:
   a second, flatter route into the work. Small by design — these read as an
   index, not as evidence; the category pages carry the readable images. */

.index-section {
  background: var(--cream-warm);
  border-top: 1px solid var(--rule);
  padding-top: clamp(13px, 1.5vw, 20px);
  padding-bottom: 38px;
}

.index-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* One scrollable row: light on the page, and a part-visible tile at the
   right edge signals there is more without demanding interaction. */
.tile-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 22px;
  margin-top: 26px;
  overflow-x: auto;
  scroll-snap-type: none;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.tile-grid::-webkit-scrollbar { height: 6px; }
.tile-grid::-webkit-scrollbar-thumb { background: var(--rule); }
/* Snap is off: it fights the silent scrollLeft jump that makes the loop seamless. */

.tile {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.tile__frame {
  display: block;
  aspect-ratio: 1.4 / 1;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--forest);
  padding: 10px;
  transition: border-top-color 0.18s, box-shadow 0.18s;
}
.tile:hover .tile__frame { box-shadow: 0 6px 18px rgba(14, 53, 56, 0.10); }
.tile:hover .tile__frame { border-top-color: var(--gold); }

.tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.tile__cat {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A5F14;
}

.tile__title {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--forest);
  text-wrap: pretty;
}
.tile:hover .tile__title { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .tile-grid { grid-auto-columns: 168px; gap: 16px; }
}

/* Cream above the first card and cream below the last are the same height;
   the band's own top padding is separate from that gap. */
.section--tight-bottom { padding-bottom: clamp(26px, 3vw, 40px); }
.section--tight-top { padding-top: clamp(26px, 3vw, 40px); }