/* ==========================================================================
   francisfonseca.com — core stylesheet
   Art direction: "Editorial Archive / Contemporary Institutional"
   Palette: deep aubergine, warm parchment, muted copper, soft stone, ivory
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* colour */
  --ink:          #14101a;
  --ink-soft:     #241d2c;
  --aubergine:    #3b2145;
  --aubergine-dp: #2a1631;
  --copper:       #a9663a;
  --copper-lt:    #c68a57;
  --copper-dk:    #8a4f2b;
  --parchment:    #f2ece0;
  --parchment-dp: #e7dece;
  --ivory:        #fbf8f2;
  --stone:        #b9afa0;
  --stone-dk:     #5f5749;
  --stone-dp:     #4a4339;

  /* semantic */
  --page-bg:      var(--parchment);
  --page-fg:      var(--ink);
  --muted-fg:     #5b5348;
  --rule:         rgba(20, 16, 26, 0.16);
  --rule-soft:    rgba(20, 16, 26, 0.09);
  --rule-invert:  rgba(251, 248, 242, 0.22);

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fluid scale */
  --fs-mega:    clamp(3.25rem, 11vw, 9rem);
  --fs-display: clamp(2.5rem, 6.6vw, 5.25rem);
  --fs-h1:      clamp(2.1rem, 5vw, 3.9rem);
  --fs-h2:      clamp(1.65rem, 3.3vw, 2.6rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead:    clamp(1.06rem, 1.55vw, 1.32rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:   0.9375rem;
  --fs-meta:    0.72rem;

  /* rhythm */
  --gutter:     clamp(1.15rem, 4.2vw, 3.75rem);
  --band:       clamp(3.75rem, 8vw, 8rem);
  --measure:    68ch;

  --shell:      1440px;
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Protected documents stay blank until js/auth.js clears the gate. */
html.is-gated body { visibility: hidden; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.06; letter-spacing: -0.015em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

::selection { background: var(--copper); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--aubergine);
  color: var(--ivory);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.shell--narrow { max-width: 1040px; }

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * 0.6); }

.band--ink      { background: var(--ink);        color: var(--ivory); }
.band--aubergine{ background: var(--aubergine);  color: var(--ivory); }
.band--deep     { background: var(--aubergine-dp); color: var(--ivory); }
.band--ivory    { background: var(--ivory); }
.band--paper    { background: var(--parchment-dp); }

.band--ink a, .band--aubergine a, .band--deep a { color: var(--ivory); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule--invert { background: var(--rule-invert); }

/* --------------------------------------------------------------------------
   4. Typographic components
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-dk);
}
.band--ink .eyebrow,
.band--aubergine .eyebrow,
.band--deep .eyebrow { color: var(--copper-lt); }

.eyebrow::before {
  content: "";
  flex: 0 0 2.25rem;
  height: 1px;
  background: currentColor;
  transform: translateY(-0.3em);
}
.eyebrow--plain::before { display: none; }

.display  { font-family: var(--display); font-size: var(--fs-display); }
.h1       { font-family: var(--display); font-size: var(--fs-h1); }
.h2       { font-family: var(--display); font-size: var(--fs-h2); }
.h3       { font-family: var(--sans); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }

.lead {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted-fg);
}
.band--ink .lead, .band--aubergine .lead, .band--deep .lead { color: rgba(251, 248, 242, 0.82); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 0; }
.prose > * + h3 { margin-top: 2.1rem; }
.prose h3 + p { margin-top: 0.65rem; }

.prose--wide { max-width: 78ch; }

.meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dk);
}
.band--ink .meta, .band--aubergine .meta, .band--deep .meta { color: rgba(251, 248, 242, 0.62); }

.figure-num {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.82;
  color: var(--copper);
  font-style: italic;
}

.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.15em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--aubergine);
}

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease);
}
.btn::after { content: "\2192"; font-family: var(--sans); letter-spacing: 0; }
.btn:hover, .btn:focus-visible { background: var(--aubergine); color: var(--ivory); border-color: var(--aubergine); }
.band--ink .btn:hover, .band--aubergine .btn:hover, .band--deep .btn:hover,
.band--ink .btn:focus-visible, .band--aubergine .btn:focus-visible, .band--deep .btn:focus-visible {
  background: var(--ivory); color: var(--ink); border-color: var(--ivory);
}

.btn--solid { background: var(--aubergine); color: var(--ivory); border-color: var(--aubergine); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--copper); border-color: var(--copper); color: var(--ivory); }

.textlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.28rem;
  transition: color 0.24s var(--ease), gap 0.24s var(--ease);
}
.textlink::after { content: "\2192"; font-family: var(--sans); letter-spacing: 0; }
.textlink:hover, .textlink:focus-visible { color: var(--aubergine); gap: 0.85rem; }
.band--ink .textlink, .band--aubergine .textlink, .band--deep .textlink { color: var(--copper-lt); }
.band--ink .textlink:hover, .band--aubergine .textlink:hover, .band--deep .textlink:hover { color: var(--ivory); }

/* --------------------------------------------------------------------------
   6. Plate — the archive's image unit.
      Every photograph is matted rather than cropped: object-fit is contain,
      so no face, edge or original composition is ever cut away.
   -------------------------------------------------------------------------- */

.plate { margin: 0; }

.plate__mat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--plate-ratio, 4 / 3);
  padding: clamp(0.5rem, 1.4vw, 1rem);
  background: var(--plate-mat, #ded4c2);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.plate__mat::after {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 1.4vw, 1rem);
  border: 1px solid rgba(20, 16, 26, 0.09);
  pointer-events: none;
}

.plate__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}

.plate--dark .plate__mat { background: var(--plate-mat, #241d2c); border-color: var(--rule-invert); }
.plate--dark .plate__mat::after { border-color: rgba(251, 248, 242, 0.12); }

.plate--tall  { --plate-ratio: 3 / 4; }
.plate--port  { --plate-ratio: 4 / 5; }
.plate--sq    { --plate-ratio: 1 / 1; }
.plate--wide  { --plate-ratio: 16 / 10; }
.plate--pano  { --plate-ratio: 21 / 9; }

.plate__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  margin-top: 0.85rem;
}
.plate--dark .plate__caption { border-top-color: var(--rule-invert); }

.plate__index {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  color: var(--copper-dk);
  white-space: nowrap;
}
.plate--dark .plate__index { color: var(--copper-lt); }

.plate__text {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted-fg);
}
.plate--dark .plate__text { color: rgba(251, 248, 242, 0.78); }

/* --------------------------------------------------------------------------
   7. Masthead / sticky navigation
   -------------------------------------------------------------------------- */

.masthead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(242, 236, 224, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead { background: var(--parchment); }
}
.masthead.is-stuck { box-shadow: 0 1px 24px rgba(20, 16, 26, 0.09); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 74px;
  transition: min-height 0.3s var(--ease);
}
.masthead.is-stuck .masthead__inner { min-height: 62px; }

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.wordmark__name {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  letter-spacing: 0.005em;
  line-height: 1;
}
.wordmark__mark {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper-dk);
  border-left: 1px solid var(--rule);
  padding-left: 0.6rem;
}

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.8rem); }
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.8rem); list-style: none; }

.nav__link {
  position: relative;
  display: block;
  padding: 0.55rem 0;
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.24s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--aubergine); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }

.nav__link.is-current { color: var(--aubergine); font-weight: 600; }
.nav__link.is-current::after { transform: scaleX(1); background: var(--aubergine); }

.nav__cta { display: none; }

/* burger */
.burger {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.burger__bars { position: relative; display: block; width: 26px; height: 12px; }
.burger__bars i {
  position: absolute; left: 0; right: 0;
  height: 1.5px; background: currentColor;
  transition: transform 0.34s var(--ease), opacity 0.2s var(--ease);
}
.burger__bars i:nth-child(1) { top: 0; }
.burger__bars i:nth-child(2) { top: 10.5px; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: var(--aubergine-dp);
  color: var(--ivory);
  padding: var(--gutter);
  padding-top: 96px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease), visibility 0.34s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__list { list-style: none; }
.drawer__list li { border-bottom: 1px solid var(--rule-invert); }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 7.5vw, 2.4rem);
  line-height: 1.1;
  color: var(--ivory);
  text-decoration: none;
}
.drawer__link span {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--copper-lt);
}
.drawer__link.is-current { color: var(--copper-lt); }

.drawer__foot { margin-top: auto; padding-top: 2.25rem; }
.drawer__foot a { color: var(--ivory); text-decoration: none; }
.drawer__foot p { margin-bottom: 0.4rem; }

.drawer__close {
  position: absolute;
  top: 1.35rem;
  right: var(--gutter);
  min-height: 48px;
  min-width: 48px;
  border: 1px solid var(--rule-invert);
  background: none;
  color: var(--ivory);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.drawer__close:hover { background: rgba(251, 248, 242, 0.1); }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Page opener (shared, but composed differently per page)
   -------------------------------------------------------------------------- */

.opener { padding-block: clamp(3rem, 7vw, 6.25rem) clamp(2.25rem, 5vw, 4rem); }

.opener__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
}

.opener__title { font-family: var(--display); font-size: var(--fs-display); line-height: 0.96; }
.opener__title em { font-style: italic; color: var(--copper); }

.opener__aside {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin-bottom: 1.6rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dk);
}
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--copper-dk); border-bottom-color: currentColor; }
.crumbs li + li::before { content: "\2044"; margin-right: 0.5rem; color: var(--stone); }

/* --------------------------------------------------------------------------
   9. Ledger (the "At a Glance" register — rules, not cards)
   -------------------------------------------------------------------------- */

.ledger { border-top: 1px solid var(--ink); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger__key {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  padding-top: 0.2rem;
}
.ledger__val { font-size: var(--fs-body); line-height: 1.5; }
.ledger__val em { font-style: normal; color: var(--muted-fg); display: block; font-size: var(--fs-small); margin-top: 0.2rem; }

.band--ink .ledger, .band--aubergine .ledger, .band--deep .ledger { border-top-color: var(--ivory); }
.band--ink .ledger__row, .band--aubergine .ledger__row, .band--deep .ledger__row { border-bottom-color: var(--rule-invert); }
.band--ink .ledger__key, .band--aubergine .ledger__key, .band--deep .ledger__key { color: var(--copper-lt); }
.band--ink .ledger__val em, .band--aubergine .ledger__val em, .band--deep .ledger__val em { color: rgba(251,248,242,0.7); }

/* --------------------------------------------------------------------------
   10. Entry list (numbered editorial items)
   -------------------------------------------------------------------------- */

.entries { list-style: none; border-top: 1px solid var(--rule); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.4vw, 2.9rem) 0;
  border-bottom: 1px solid var(--rule);
}
.entry__num {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  color: var(--copper-dk);
}
.entry__title { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.08; margin-bottom: 0.7rem; }
.entry__body { color: var(--muted-fg); }
.entry__body p { margin-bottom: 0.85em; }
.entry__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Quotes
   -------------------------------------------------------------------------- */

.quote { margin: 0; }
.quote__text {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.quote__text::before { content: "\201C"; color: var(--copper); }
.quote__text::after  { content: "\201D"; color: var(--copper); }

.quote__cite {
  display: block;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-dk);
  line-height: 1.7;
}
.band--ink .quote__cite, .band--aubergine .quote__cite, .band--deep .quote__cite {
  border-top-color: var(--rule-invert);
  color: rgba(251, 248, 242, 0.66);
}

.pullquote {
  margin: 2.5rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--copper);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.28;
  color: var(--aubergine);
}
.pullquote cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-dk);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--ivory); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule-invert);
}

.footer__mark { font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.85rem); line-height: 1.02; }
.footer__mark span { display: block; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper-lt); margin-bottom: 0.85rem; }

.footer__title {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-lt);
  margin-bottom: 1.15rem;
}

.footer__nav { list-style: none; columns: 2; column-gap: 1.5rem; }
.footer__nav li { margin-bottom: 0.55rem; break-inside: avoid; }
.footer__nav a { color: rgba(251, 248, 242, 0.8); text-decoration: none; font-size: var(--fs-small); }
.footer__nav a:hover, .footer__nav a:focus-visible { color: var(--ivory); text-decoration: underline; }

.footer__contact { list-style: none; }
.footer__contact li { margin-bottom: 0.7rem; font-size: var(--fs-small); }
.footer__contact a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid rgba(251, 248, 242, 0.3); }
.footer__contact a:hover, .footer__contact a:focus-visible { border-bottom-color: var(--copper-lt); color: var(--copper-lt); }
.footer__contact b { display: block; font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(251, 248, 242, 0.55); margin-bottom: 0.15rem; }

/* social */
.social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; list-style: none; }
.social__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--rule-invert);
  color: rgba(251, 248, 242, 0.75);
  background: transparent;
  transition: background-color 0.26s var(--ease), color 0.26s var(--ease), border-color 0.26s var(--ease);
}
.social__item svg { width: 19px; height: 19px; fill: currentColor; display: block; }
a.social__item:hover, a.social__item:focus-visible { background: var(--copper); border-color: var(--copper); color: var(--ivory); }
.social__item[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.social__note { margin-top: 0.9rem; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: none; color: rgba(251, 248, 242, 0.5); line-height: 1.6; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  padding-top: 1.75rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  color: rgba(251, 248, 242, 0.6);
}
.footer__bottom a { color: rgba(251, 248, 242, 0.82); text-decoration: none; border-bottom: 1px solid rgba(251, 248, 242, 0.28); }
.footer__bottom a:hover, .footer__bottom a:focus-visible { color: var(--copper-lt); border-bottom-color: var(--copper-lt); }

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); }
.js-on .reveal { transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

html:not(.js-on) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   14. HOME — editorial identity / living record
   ========================================================================== */

/* No overflow clip here: .hero__portrait is position:sticky at >=1024px and
   any overflow value other than visible on an ancestor would silently
   disable it. See the note in README.md. */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

.hero__title {
  font-family: var(--display);
  font-size: var(--fs-mega);
  line-height: 0.84;
  letter-spacing: -0.028em;
  margin-bottom: 1.75rem;
}
.hero__title span { display: block; }
.hero__title .is-indent { padding-left: 0.09em; color: var(--aubergine); font-style: italic; }

.hero__standfirst {
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted-fg);
  border-left: 1px solid var(--copper);
  padding-left: clamp(0.95rem, 1.7vw, 1.5rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.hero__stamp {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 2rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dk);
}
.hero__stamp b { font-weight: 500; color: var(--copper-dk); }

.hero__portrait { position: relative; }
.hero__portrait .plate__mat { --plate-mat: #e2d8c6; }

.hero__tag {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.5rem 0.9rem;
  background: var(--aubergine);
  color: var(--ivory);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* chronology rail preview */
.rail { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-invert); }
.rail__item { padding: 1.6rem 0; border-bottom: 1px solid var(--rule-invert); }
.rail__year { font-family: var(--display); font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 0.9; color: var(--copper-lt); display: block; margin-bottom: 0.6rem; }
.rail__label { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251,248,242,0.6); display: block; margin-bottom: 0.5rem; }
.rail__text { font-size: var(--fs-small); line-height: 1.55; color: rgba(251, 248, 242, 0.85); }

/* context split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}

.marginal {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted-fg);
}
.marginal b {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  margin-bottom: 0.6rem;
}
.marginal + .marginal { margin-top: 1.6rem; }

.closing { text-align: left; }
.closing__mark { font-family: var(--display); font-style: italic; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.9; color: var(--copper); }

/* ==========================================================================
   15. BIOGRAPHY — long-form magazine
   ========================================================================== */

.bio-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.chapter { border-top: 1px solid var(--ink); padding-top: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.75rem, 6vw, 5rem); }
.chapter:first-of-type { margin-top: 0; }

.chapter__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.chapter__numeral {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-dk);
  padding-top: 0.5rem;
}
.chapter__title { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.04; }

.chapter__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }

/* record of office table */
.record { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.record caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  padding-bottom: 0.9rem;
}
.record th, .record td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.record thead th {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-dk);
  border-bottom-color: var(--ink);
}
.record tbody th { font-family: var(--mono); font-weight: 500; color: var(--copper-dk); white-space: nowrap; padding-right: 1.5rem; }
.record tbody tr:hover td, .record tbody tr:hover th { background: rgba(169, 102, 58, 0.05); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   16. JOURNEY — chronology
   ========================================================================== */

.chrono { position: relative; }

.chrono__track {
  display: grid;
  grid-auto-flow: row;
  gap: 0;
}

.stage {
  position: relative;
  padding: clamp(1.9rem, 3.6vw, 2.9rem) 0 clamp(1.9rem, 3.6vw, 2.9rem) clamp(2.5rem, 5vw, 4rem);
  border-left: 1px solid var(--rule);
}
.stage::before {
  content: "";
  position: absolute;
  left: -5px; top: clamp(2.4rem, 4vw, 3.4rem);
  width: 9px; height: 9px;
  background: var(--copper);
  border-radius: 50%;
}
.stage:last-child { border-left-color: transparent; }
.stage:last-child::after {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: auto;
  height: clamp(2.4rem, 4vw, 3.4rem);
  border-left: 1px solid var(--rule);
}

.stage__year {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 0.86;
  color: var(--aubergine);
  display: block;
  margin-bottom: 0.35rem;
}
.stage__where {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  display: block;
  margin-bottom: 1rem;
}
.stage__title { font-family: var(--display); font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.12; margin-bottom: 0.75rem; }
.stage__body { max-width: 58ch; color: var(--muted-fg); }

.stage__more { margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.stage__more summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 0;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}
.stage__more summary::-webkit-details-marker { display: none; }
.stage__more summary::after { content: "+"; margin-left: auto; font-size: 1.1rem; line-height: 1; }
.stage__more[open] summary::after { content: "\2013"; }
.stage__more summary:hover { color: var(--aubergine); }
.stage__more-body { padding-bottom: 1.25rem; max-width: 58ch; font-size: var(--fs-small); color: var(--muted-fg); }
.stage__more-body dt { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-dk); margin-top: 0.9rem; }
.stage__more-body dt:first-child { margin-top: 0; }
.stage__more-body dd { margin: 0.3rem 0 0; }

.stage__figure { margin-top: 1.9rem; max-width: 460px; }

/* ==========================================================================
   17. CONTRIBUTIONS — evidence wall
   ========================================================================== */

.dossier { border-top: 2px solid var(--ink); padding-top: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(3rem, 6vw, 5.5rem); }
.dossier:first-of-type { margin-top: 0; }

.dossier__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.dossier__file {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-dk);
}
.dossier__file b { display: block; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); font-style: italic; font-weight: 400; letter-spacing: 0; line-height: 0.9; color: var(--copper); margin-bottom: 0.35rem; }
.dossier__title { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.05; margin-bottom: 0.9rem; }
.dossier__standfirst { max-width: 56ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted-fg); }

.dossier__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }

.fields { border-top: 1px solid var(--rule); }
.fields > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem clamp(1.25rem, 2.5vw, 2.5rem);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.fields dt {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  padding-top: 0.2rem;
}
.fields dd { margin: 0; color: var(--muted-fg); }
.fields dd p { margin-bottom: 0.7em; }

.datapoints { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); margin-top: 2rem; }
.datapoint { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.datapoint b { display: block; font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--aubergine); margin-bottom: 0.3rem; }
.datapoint span { font-size: var(--fs-small); color: var(--muted-fg); line-height: 1.45; display: block; }

/* ==========================================================================
   18. MILESTONES — large-number archive
   ========================================================================== */

.mstone { border-bottom: 1px solid var(--rule); }
.mstone__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem clamp(1.5rem, 3.5vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  align-items: start;
}
.mstone__year {
  font-family: var(--display);
  font-size: clamp(3.4rem, 11vw, 8rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--aubergine);
}
.mstone__cat {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--copper);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-dk);
}
.mstone__title { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.1; margin-bottom: 0.65rem; }
.mstone__text { max-width: 58ch; color: var(--muted-fg); font-size: var(--fs-small); }

.mstone--feature { background: var(--ivory); }
.mstone--feature .mstone__year { color: var(--copper); }

/* ==========================================================================
   19. PERSPECTIVES — magazine quotation layout
   ========================================================================== */

.theme { border-top: 1px solid var(--ink); padding-top: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2.75rem, 5.5vw, 4.5rem); }
.theme:first-of-type { margin-top: 0; }

.theme__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.theme__label { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-dk); }
.theme__title { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.05; margin-bottom: 1rem; }

.excerpt {
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--copper);
}
.excerpt p {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--aubergine);
  margin-bottom: 0;
}
.excerpt p + p { margin-top: 0.8em; }
.excerpt footer {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--stone-dk);
  line-height: 1.75;
}
.excerpt + .excerpt { margin-top: 1.25rem; }

.sourcelist { list-style: none; border-top: 1px solid var(--rule); }
.sourcelist li { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted-fg); }
.sourcelist b { display: block; color: var(--page-fg); font-weight: 500; }

/* ==========================================================================
   20. GALLERY — curated visual archive
   ========================================================================== */

.gal-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.gal-filter {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted-fg);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.24s var(--ease), color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.gal-filter:hover { border-color: var(--copper); color: var(--copper-dk); }
.gal-filter[aria-pressed="true"] { background: var(--aubergine); border-color: var(--aubergine); color: var(--ivory); }

.gal-feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.gal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
.gal-item[hidden] { display: none !important; }

.gal-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: left;
  color: inherit;
}
.gal-open .plate__mat { transition: border-color 0.3s var(--ease); }
.gal-open:hover .plate__mat, .gal-open:focus-visible .plate__mat { border-color: var(--copper); }
.gal-open:hover .plate__img { transform: scale(1.014); }

.gal-empty { padding: 2.5rem 0; color: var(--muted-fg); font-size: var(--fs-small); }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(20, 16, 26, 0.96);
  color: var(--ivory);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding-block: 1rem; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.lightbox__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.lightbox__cap { font-size: var(--fs-small); line-height: 1.5; color: rgba(251, 248, 242, 0.86); max-width: 62ch; }
.lightbox__cap b { display: block; font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-lt); margin-bottom: 0.35rem; }
.lightbox__close {
  flex: 0 0 auto;
  min-width: 48px; min-height: 48px;
  border: 1px solid var(--rule-invert);
  background: none;
  color: var(--ivory);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(251, 248, 242, 0.12); }
.lightbox__nav { display: flex; gap: 0.5rem; }
.lightbox__btn {
  min-width: 48px; min-height: 48px;
  border: 1px solid var(--rule-invert);
  background: none; color: var(--ivory);
  font-size: 1rem; cursor: pointer;
}
.lightbox__btn:hover { background: rgba(251, 248, 242, 0.12); }

/* ==========================================================================
   21. CONTACT — minimal institutional
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.card-panel { border: 1px solid var(--rule); background: var(--ivory); padding: clamp(1.5rem, 3.5vw, 2.75rem); }

.contact-line { border-top: 1px solid var(--rule); padding: 1.35rem 0; }
.contact-line:last-child { padding-bottom: 0; }
.contact-line dt {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-dk);
  margin-bottom: 0.5rem;
}
.contact-line dd { margin: 0; font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.2; }
.contact-line dd a { color: var(--aubergine); text-decoration: none; border-bottom: 1px solid rgba(59, 33, 69, 0.28); transition: border-color 0.24s var(--ease), color 0.24s var(--ease); word-break: break-word; }
.contact-line dd a:hover, .contact-line dd a:focus-visible { color: var(--copper); border-bottom-color: var(--copper); }

.social--light .social__item { border-color: var(--rule); color: var(--muted-fg); }
.social--light a.social__item:hover, .social--light a.social__item:focus-visible { background: var(--aubergine); border-color: var(--aubergine); color: var(--ivory); }
.social--light .social__note,
.social__note--light { color: var(--stone-dk); }
.social__note--light a { color: var(--copper-dk); }

/* ==========================================================================
   22. 404
   ========================================================================== */

.notfound { min-height: 78vh; display: flex; align-items: center; padding-block: var(--band); }
.notfound__code { font-family: var(--display); font-size: clamp(5rem, 20vw, 13rem); line-height: 0.8; color: var(--copper); letter-spacing: -0.04em; }

/* chronology scroll affordance — shown only where the track scrolls sideways */
.chrono__hint {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.chrono__nav { display: flex; gap: 0.5rem; }
.chrono__btn {
  min-width: 48px; min-height: 48px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.24s var(--ease), border-color 0.24s var(--ease), opacity 0.24s var(--ease);
}
.chrono__btn:hover:not([disabled]) { background: var(--aubergine); border-color: var(--aubergine); color: var(--ivory); }
.chrono__btn[disabled] { opacity: 0.32; cursor: default; }

/* Gallery archive: one mat proportion across the grid so the rows align.
   The photographs keep their own proportions inside it (object-fit: contain),
   so alignment is achieved without cropping anything. */
.gal-grid[data-gallery] .plate__mat { aspect-ratio: 4 / 3; }
.gal-grid[data-gallery] .gal-item,
.gal-grid[data-gallery] .gal-open,
.gal-grid[data-gallery] .plate { height: 100%; }
.gal-grid[data-gallery] .plate { display: flex; flex-direction: column; }
.gal-grid[data-gallery] .plate__caption { margin-top: auto; }