/* Memory Library — components */

/* ================= HEADER / NAV ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.75rem;
}
.brand-mark { display: flex; align-items: center; gap: var(--space-2); }
.brand-mark img { height: 3.1rem; width: auto; display: block; }
.brand-mark .t-meta { display: none; }

.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.site-nav__links {
  display: flex;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}
.site-nav__links a {
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  border-bottom-color: var(--c-fg);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
.nav-toggle span { width: 20px; height: 1px; background: var(--c-fg); display: block; }

.nav-search-btn {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: var(--space-1);
}
.nav-search-btn:hover { border-bottom-color: var(--c-fg); }

@media (max-width: 860px) {
  .site-nav__links { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.is-open .site-nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset-inline: 0;
    top: 4.75rem;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    padding: var(--space-6) var(--margin);
    gap: var(--space-6);
    font-size: var(--size-small);
  }
}

/* ================= FOOTER ================= */
.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: var(--space-16) var(--space-8);
}
.site-footer .grid { row-gap: var(--space-8); }
.footer-col { grid-column: span 3; }
@media (max-width: 860px) {
  .footer-col { grid-column: span 12; }
}
.footer-col h3 {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-3);
}
.footer-col a, .footer-col p { font-size: var(--size-small); }
.footer-col a { display: block; margin-bottom: var(--space-2); }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.6;
}

/* ================= STATUS / META ================= */
/* Quiet inline metadata, not a UI badge — weight and a hairline
   underline carry the state, never a border/pill shape or colour fill. */
.status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
}
.status--attention {
  opacity: 1;
  border-bottom: 1px solid var(--c-faded-ochre);
}
.status--closed { opacity: 0.4; text-decoration: line-through; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.75;
}

/* ================= BUTTONS / LINKS ================= */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-fg);
  padding-bottom: 0.2em;
  transition: gap var(--dur-base) var(--ease);
}
.btn-line:hover { gap: var(--space-3); }

/* ================= NOW / NEXT BANNER ================= */
.now-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line-strong);
}
.now-next__cell {
  padding: var(--space-6) var(--margin);
  border-left: 1px solid var(--c-line);
}
.now-next__cell:first-child { border-left: none; }
a.now-next__cell { display: block; color: inherit; text-decoration: none; transition: opacity 150ms var(--ease); }
a.now-next__cell:hover { opacity: 0.7; }
.now-next__label {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-3);
}
.now-next__title {
  font-family: var(--font-display);
  font-size: var(--size-title);
  text-transform: uppercase;
  line-height: var(--leading-title);
  margin-bottom: var(--space-2);
}
@media (max-width: 700px) {
  .now-next { grid-template-columns: 1fr; }
  .now-next__cell { border-left: none; border-top: 1px solid var(--c-line); }
  .now-next__cell:first-child { border-top: none; }
}

/* ================= DATE NAV ================= */
.date-nav {
  position: sticky;
  top: 4.75rem;
  z-index: 40;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.date-nav__inner {
  position: relative;
  display: flex;
  padding-inline: var(--margin);
}
.date-nav button {
  flex: none;
  padding: var(--space-4) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  opacity: 0.55;
}
.date-nav button .d-day { display: block; font-size: 1.1em; margin-top: 2px; opacity: 1; }
.date-nav button[aria-pressed="true"] {
  opacity: 1;
  border-bottom-color: var(--c-fg);
}
.date-nav button:hover { opacity: 0.85; }

/* A single moving indicator (JS-positioned) replaces the instant
   underline swap — before JS runs, or if it fails, the static
   border-bottom above already gives a correct (just non-animated)
   result, so this is a pure enhancement. */
.slide-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-fg);
  transition: transform 280ms var(--ease), width 280ms var(--ease);
  pointer-events: none;
}
.has-slider button[aria-pressed="true"] { border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .slide-indicator { transition: none; }
}

/* ================= VIEW TOGGLE ================= */
.view-toggle {
  position: relative;
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}
.view-toggle button { opacity: 0.5; padding-block: var(--space-1); border-bottom: 1px solid transparent; }
.view-toggle button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--c-fg); }

/* ================= FILTER BAR ================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
/* Filter state as quiet inline type — the same selection language as
   the primary nav (dim by default, underline + full opacity when
   active) rather than a pill/button component. */
.filter-chip {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  padding-bottom: 0.2em;
  border-bottom: 1px solid transparent;
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.filter-chip[aria-pressed="true"] {
  opacity: 1;
  border-bottom-color: var(--c-fg);
}
.filter-chip:hover { opacity: 1; }

.filter-group { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-group__label {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.5;
}

/* ================= PROGRAMME LIST (What's On) ================= */
.prog-day-heading {
  font-family: var(--font-display);
  font-size: var(--size-title);
  text-transform: uppercase;
  padding-block: var(--space-8) var(--space-4);
  border-top: 1px solid var(--c-line-strong);
}
.prog-day-heading:first-of-type { border-top: none; }

.prog-row {
  border-top: 1px solid var(--c-line);
}
.prog-row:first-child { border-top: none; }

.prog-row__trigger {
  display: grid;
  grid-template-columns: 6rem 1fr auto 1.25rem;
  grid-template-areas: "time body status chevron";
  gap: var(--space-6);
  align-items: baseline;
  width: 100%;
  padding-block: var(--space-6);
  text-align: left;
  cursor: pointer;
}
.prog-row__time { grid-area: time; font-family: var(--font-mono); font-size: var(--size-small); letter-spacing: var(--tracking-meta); }
.prog-row__body { grid-area: body; display: block; }
.prog-row__title {
  display: block;
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: var(--size-intro);
  margin-bottom: var(--space-1);
}
.prog-row__desc {
  display: block;
  font-family: var(--font-editorial);
  font-size: var(--size-small);
  line-height: 1.45;
  opacity: 0.65;
  margin-bottom: var(--space-1);
  max-width: 38em;
}
.prog-row__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.6;
}
.prog-row__status { grid-area: status; justify-self: end; align-self: start; }
.prog-row__chevron {
  grid-area: chevron;
  justify-self: end;
  align-self: start;
  opacity: 0.4;
  transition: transform var(--dur-base) var(--ease);
}
.prog-row.is-open .prog-row__chevron { transform: rotate(180deg); }

.prog-row__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease);
}
.prog-row.is-open .prog-row__detail { grid-template-rows: 1fr; }
.prog-row__detail-inner { overflow: hidden; }
.prog-row__detail-content {
  padding-bottom: var(--space-6);
  padding-left: calc(6rem + var(--space-6));
  max-width: 34em;
}

@media (max-width: 700px) {
  .prog-row__trigger {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "time chevron"
      "body body"
      "status status";
    gap: var(--space-2);
  }
  .prog-row__status { justify-self: start; }
  .prog-row__detail-content { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .prog-row__detail { transition: none; }
  .prog-row__chevron { transition: none; }
}

.prog-row--ongoing { opacity: 0.9; }
.prog-row--past { opacity: 0.4; }

#view-list, #view-timetable {
  transition: opacity 160ms var(--ease);
}
#view-list.is-updating, #view-timetable.is-updating { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #view-list, #view-timetable { transition: none; }
}

/* ================= TIMETABLE ================= */
.timetable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.timetable {
  display: grid;
  min-width: 760px;
  border-top: 1px solid var(--c-line-strong);
  border-left: 1px solid var(--c-line-strong);
}
.timetable__head, .timetable__time, .timetable__cell {
  border-right: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line-strong);
  padding: var(--space-3);
}
.timetable__head {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  background: var(--c-paper-white);
}
.timetable__time {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  background: var(--c-paper-white);
  display: flex;
  align-items: flex-start;
}
.timetable__cell {
  min-height: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.timetable__block {
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  padding: var(--space-2) var(--space-3);
  transition: background var(--dur-base) var(--ease);
}
.timetable__block:hover { background: var(--c-foxed-paper); }
.timetable__block .t-meta { opacity: 0.6; display: block; margin-top: 2px; }
.timetable__block-title { font-size: var(--size-small); font-weight: 600; }
.timetable__block.is-linked { border-color: var(--c-fg); }

/* ================= INDEX ROWS (artists) ================= */
.index-row {
  display: grid;
  grid-template-columns: 3rem 1fr 9rem;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--c-line);
  transition: padding var(--dur-base) var(--ease);
}
.index-row:first-child { border-top: 1px solid var(--c-line-strong); }
.index-row__n {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  opacity: 0.5;
}
.index-row__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-title);
  text-transform: uppercase;
}
.index-row__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: var(--space-2);
}
.index-row__thumb { aspect-ratio: 4/5; }

/* The hover-reveal treatment only applies where hover is a real,
   precise interaction (mouse) — touch and reduced-motion contexts keep
   the metadata plainly visible at rest instead. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .index-row__meta {
    opacity: 0.35;
    transition: opacity var(--dur-base) var(--ease);
  }
  .index-row:hover .index-row__meta,
  .index-row:focus-visible .index-row__meta {
    opacity: 0.7;
  }
}

@media (max-width: 700px) {
  .index-row { grid-template-columns: 2.5rem 1fr; }
  .index-row__thumb { display: none; }
}

/* ================= EXPLORE / ARCHIVE ================= */
.record-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--c-line);
}
.record-row:first-child { border-top: 1px solid var(--c-line-strong); }
.record-row__id {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  opacity: 0.55;
}
.record-row__title { font-size: var(--size-body); font-weight: 600; }
.record-row__meta {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 2px;
}
.record-row__type { justify-self: end; }
@media (max-width: 700px) {
  .record-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .record-row__type { justify-self: start; }
}

.record-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-top: 1px solid var(--c-line-strong);
  align-items: center;
}
@media (max-width: 700px) {
  .record-feature { grid-template-columns: 1fr; }
}

/* ================= SEARCH ================= */
.search-field {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-fg);
  padding-bottom: var(--space-2);
}
.search-field input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--size-title);
  text-transform: uppercase;
}
.search-field input::placeholder { color: var(--c-line-strong); }

@media (max-width: 700px) {
  .search-field input { font-size: var(--size-intro); }
}

/* ================= RELATED MODULES ================= */
.related-list { display: flex; flex-direction: column; gap: var(--space-4); }
.related-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-line);
}
.related-item:first-child { border-top: none; }

/* A compact, reflowing grid of open days — used on an event's own page
   where every cell is that same event, so there's no need to repeat its
   title per row the way .related-list does when cross-referencing
   several different events. Reads left-to-right across the available
   width and only wraps to a new row once it runs out of room. */
.open-days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-5) var(--space-4);
}
.open-day__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: var(--space-1);
}
.open-day__time {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  opacity: 0.55;
}
.open-day__note {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 2px;
}

/* ================= AGENDA (Past Makes Future / Pageant running order) ================= */
.agenda-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-4);
  border-top: 1px solid var(--c-line);
}
.agenda-row:first-child { border-top: 1px solid var(--c-line-strong); }
.agenda-row__time {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-meta);
}
.agenda-row__title { font-weight: 600; font-size: var(--size-body); }
.agenda-row__purpose { font-size: var(--size-small); opacity: 0.7; margin-top: 2px; }
.agenda-row__who {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.6;
  justify-self: end;
  text-align: right;
  max-width: 16rem;
}
.agenda-row--break .agenda-row__title { opacity: 0.4; font-weight: 400; }

@media (max-width: 700px) {
  .agenda-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .agenda-row__who { justify-self: start; text-align: left; margin-top: var(--space-1); max-width: none; }
}

/* ================= HOMEPAGE HERO FRAME ================= */
/* Wordmark, photograph and metadata composed as one frame rather than
   three stacked blocks. */
.hero-scroll-sticky {
  padding-top: clamp(1rem, 0.5rem + 2vw, 2rem);
}
.hero-frame__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-library-black);
}
.hero-frame__media img.hero-photo,
.hero-frame__media video.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-frame__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, transparent 30%),
    linear-gradient(to top, rgba(10,10,10,0.6) 0%, transparent 35%);
  pointer-events: none;
}
.hero-frame__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(58%, 620px);
  margin: 0;
  z-index: 1;
}
.hero-frame__logo img { width: 100%; height: auto; display: block; }
.hero-frame__meta {
  position: absolute;
  bottom: clamp(1.25rem, 1rem + 2vw, 3rem);
  right: clamp(1.25rem, 1rem + 2vw, 3rem);
  z-index: 1;
  color: var(--c-archive-white);
  text-align: right;
}
.hero-frame__meta p:first-child { margin-bottom: var(--space-3); }
.hero-frame__meta p:last-child { opacity: 0.75; }
.hero-frame__caption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.55;
}
@media (max-width: 700px) {
  .hero-frame__media { aspect-ratio: 3 / 4; }
  .hero-frame__logo { width: 72%; }
}

.statement-mark {
  aspect-ratio: 1;
  justify-self: start;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.statement-mark img { width: 55%; height: auto; display: block; }
@media (max-width: 760px) {
  .statement-mark { width: 45vw; max-width: 220px; }
}

/* ================= HERO SCROLL REVEAL =================
   The frame opens from a small square centred on the page and grows in
   place into its full-width resting size as the hero is scrolled past —
   its own centre point never moves, it simply expands around it. The
   wordmark holds a fixed size and stays dead-centre for most of that
   growth (sized in viewport units, not as a percentage of the frame, so
   it never visibly scales up with it), then dissolves in the final
   stretch as the photograph — which already carries the Memory Library
   name painted on the boathouse windows — finishes revealing itself. The
   metadata fades in afterwards, once the frame has nearly reached full
   size. Pure CSS (a named view() timeline tied to the tall stage below),
   no scroll JS.

   Only runs where the browser supports it, on wide-enough viewports, and
   when the visitor hasn't asked for reduced motion — everywhere else this
   whole block is inert and the hero renders exactly as its static markup
   describes (full-size frame, logo and metadata visible immediately). */
@supports (animation-timeline: view()) {
  @media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
    .hero-scroll-stage {
      height: 240vh;
      view-timeline-name: --hero-reveal;
      view-timeline-axis: block;
    }
    .hero-scroll-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      padding-top: 0;
      overflow: hidden;
    }
    .hero-scroll-sticky .hero-frame__media {
      width: min(42vmin, 420px);
      aspect-ratio: 1 / 1;
      margin-inline: auto;
      animation: hero-grow linear both;
      animation-timeline: --hero-reveal;
      animation-range: contain 0% contain 65%;
    }
    .hero-scroll-sticky .hero-frame__logo {
      width: min(24vmin, 244px);
      animation: hero-logo-fade-out linear both;
      animation-timeline: --hero-reveal;
      animation-range: contain 0% contain 65%;
    }
    .hero-scroll-sticky .hero-frame__meta {
      opacity: 0;
      animation: hero-fade-in linear both;
      animation-timeline: --hero-reveal;
      animation-range: contain 55% contain 85%;
    }
  }
}
@keyframes hero-grow {
  from { width: min(42vmin, 420px); aspect-ratio: 1 / 1; }
  to { width: 100%; aspect-ratio: 16 / 10; }
}
@keyframes hero-logo-fade-out {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ================= FULL-BLEED IMAGE MOMENT ================= */
.full-bleed-media {
  position: relative;
  width: 100%;
  height: min(85vh, 900px);
  overflow: hidden;
}
.full-bleed-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.full-bleed-media__caption {
  position: absolute;
  left: var(--margin);
  bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--c-archive-white);
  opacity: 0.75;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ================= PARTNER / FUNDER LOGOS ================= */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
}
.partner-strip img {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
}
.tone-black .partner-strip img {
  filter: grayscale(1) invert(1);
}

/* ================= ACCESS TAGS ================= */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.tag {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.8;
  position: relative;
}
.tag:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--space-6) / -2 - 1px);
  top: 0.35em;
  width: 3px; height: 3px;
  background: currentColor;
  opacity: 0.5;
  border-radius: 50%;
}