/* ============================================================
   EO1 — Fluid typography, spacing, and architecture
   ============================================================ */

/* ── Palette and scale ──────────────────────────────────────
   teal   = the shared register (substrate)
   ochre  = the clusters (local, human)
   ink    = the written word (the Rule, records)
   frame  = the normative frame (conditions)
   field  = the commons (background)
───────────────────────────────────────────────────────────── */
/* ── Web fonts ─────────────────────────────────────────── */

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
/* ── Fallback fonts with metric overrides ──────────────── */

@font-face {
  font-family: 'EB Garamond Fallback';
  src: local('Georgia');
  size-adjust: 91%;
  ascent-override: 114%;
  descent-override: normal;
  line-gap-override: normal;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'EB Garamond Fallback';
  src: local('Georgia');
  size-adjust: 93%;
  ascent-override: 114%;
  descent-override: normal;
  line-gap-override: normal;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'EB Garamond Fallback';
  src: local('Georgia');
  size-adjust: 87%;
  ascent-override: 114%;
  descent-override: normal;
  line-gap-override: normal;
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'IBM Plex Mono Fallback';
  src: local('Courier New');
  size-adjust: 100%;
  ascent-override: 85%;
  descent-override: normal;
  line-gap-override: normal;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Mono Fallback';
  src: local('Consolas');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: normal;
  line-gap-override: normal;
  font-weight: 500;
  font-style: normal;
}

:root {
  /* Colour */
  --field:       #fafaf7;
  --ink:         #1a1a1a;
  --ink-soft:    #4a4a48;
  --teal:        #1a4a4a;
  --teal-mid:    #2a6a6a;
  --teal-light:  #6a9a9a;
  --ochre:       #b8860b;
  --ochre-text: #6b4e06;   /* passes AAA (7.4:1) */
  --ochre-soft:  #d4a017;
  --frame:       #d8d4cc;

  /* Families */
--serif: 'EB Garamond', 'EB Garamond Fallback', Georgia, 'Times New Roman', serif;
--mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'Lucida Sans Typewriter', 'Courier New', monospace;
  /* Fluid type scale */
  --step--2: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12–13px */
  --step--1: clamp(0.8125rem, 0.78rem + 0.22vw, 0.875rem);  /* 13–14px */
  --step-0:  clamp(1.05rem, 0.95rem + 0.50vw, 1.25rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.55vw, 1.40rem);
  --step-2:  clamp(1.35rem, 1.20rem + 0.80vw, 1.75rem);
  --step-3:  clamp(1.70rem, 1.45rem + 1.25vw, 2.40rem);
  --step-4:  clamp(2.20rem, 1.75rem + 2.20vw, 3.60rem);

  /* Fluid space scale */
  --space-3xs: clamp(0.15rem, 0.12rem + 0.12vw, 0.22rem);
  --space-2xs: clamp(0.30rem, 0.25rem + 0.25vw, 0.45rem);
  --space-xs:  clamp(0.55rem, 0.45rem + 0.45vw, 0.80rem);
  --space-s:   clamp(0.85rem, 0.70rem + 0.75vw, 1.25rem);
  --space-m:   clamp(1.30rem, 1.05rem + 1.25vw, 1.90rem);
  --space-l:   clamp(2.00rem, 1.55rem + 2.25vw, 3.00rem);
  --space-xl:  clamp(3.00rem, 2.10rem + 4.50vw, 5.00rem);
  --space-2xl: clamp(4.50rem, 3.00rem + 7.50vw, 7.50rem);

  /* Measures */
  --measure:        70ch;
  --measure-narrow: 55ch;

  /* Layout */
  --max: 1100px;
  --pad: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.noscript-note {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-m) var(--pad);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}
/* ── Header ──────────────────────────────────────────────── */
header {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad) var(--space-m);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.site-name {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
}

nav {
  display: flex;
  gap: var(--space-s) var(--space-m);
  flex-wrap: wrap;
}

nav a {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

nav a:hover {
  color: var(--ochre);
}

nav a:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 4px;
}
/* Active nav item — matched by the page's own data-page */
body[data-page="ethos"]        nav a[href$="eo1ethos.html"],
body[data-page="structure"]    nav a[href$="eo1structure.html"],
body[data-page="clusters"]     nav a[href$="eo1clusters.html"],
body[data-page="register"]     nav a[href$="eo1register.html"],
body[data-page="blackbox"]     nav a[href$="eo1blackbox.html"],
body[data-page="start"]        nav a[href$="eo1start.html"],
body[data-page="about"]        nav a[href$="eo1about.html"] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
/* ── Nav toggle (mobile) ───────────────────────────────── */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── To-top button ─────────────────────────────────────── */

.to-top {
  position: fixed;
  bottom: var(--space-m);
  right: var(--space-m);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, opacity 0.2s;
  z-index: 100;
}
.to-top:hover {
  transform: translateY(-2px);
}
.to-top:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
.to-top[hidden] {
  display: none;
}
.to-top svg {
  display: block;
}

/* ── Mobile nav ────────────────────────────────────────── */

@media (max-width: 760px) {
  html.js header {
    flex-wrap: wrap;
  }
  html.js .nav-toggle {
    display: flex;
  }
  html.js nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding-top: var(--space-m);
  }
  html.js nav[data-open="true"] {
    display: flex;
  }

  .to-top {
    bottom: var(--space-s);
    right: var(--space-s);
  }
}
/* ── The Section ─────────────────────────────────────────── */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-s);
}

.section-layers {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--frame);
  border-radius: 2px;
  overflow: visible;
  /*background: var(--field);*/
}

.layer {
  position: relative;
  transition: background 0.3s;
  outline: none;
}

.layer:focus-visible {
  box-shadow: inset 0 0 0 2px var(--teal);
}

/* Frame  */
.layer-frame {
  height: clamp(28px, 4vw, 52px);
  border-bottom: 1px dashed #afa798;
  border-radius: 2px 2px 0 0;
}
.layer-frame,
.layer-rule {
  background: transparent;
  position: relative;
  z-index: 1;
}
/* Sky — a faint tint at the top of the frame, fading behind the Rule */
.section-layers {
  position: relative;
  background: var(--field);
}

.section-layers::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  background: linear-gradient(
    to bottom,
    rgba(170, 190, 195, 0.32) 0%,
    rgba(170, 190, 195, 0.12) 40%,
    rgba(250, 250, 247, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.section-layers::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  background-image:
    /* brightest stars — upper sky */
    radial-gradient(circle at  6%  4%, rgba(255,255,255,0.95) 2.2px, transparent 3.4px),
    radial-gradient(circle at 22%  2%, rgba(255,255,255,0.85) 2.0px, transparent 3.2px),
    radial-gradient(circle at 39%  7%, rgba(255,255,255,0.90) 2.2px, transparent 3.4px),
    radial-gradient(circle at 57%  3%, rgba(255,255,255,0.80) 2.0px, transparent 3.2px),
    radial-gradient(circle at 73%  8%, rgba(255,255,255,0.95) 2.2px, transparent 3.4px),
    radial-gradient(circle at 90%  2%, rgba(255,255,255,0.82) 2.0px, transparent 3.2px),
    /* mid sky */
    radial-gradient(circle at 13% 14%, rgba(255,255,255,0.95) 1.8px, transparent 3.0px),
    radial-gradient(circle at 30% 12%, rgba(255,255,255,0.95) 1.7px, transparent 2.9px),
    radial-gradient(circle at 48% 18%, rgba(255,255,255,0.82) 1.9px, transparent 3.1px),
    radial-gradient(circle at 65% 15%, rgba(255,255,255,0.98) 1.7px, transparent 2.9px),
    radial-gradient(circle at 82% 20%, rgba(255,255,255,0.84) 1.8px, transparent 3.0px),
    radial-gradient(circle at 96% 13%, rgba(255,255,255,0.90) 1.6px, transparent 2.8px),
    /* fading stars toward the horizon */
    radial-gradient(circle at  4% 26%, rgba(255,255,255,0.95) 1.5px, transparent 2.6px),
    radial-gradient(circle at 17% 30%, rgba(255,255,255,0.98) 1.4px, transparent 2.5px),
    radial-gradient(circle at 34% 27%, rgba(255,255,255,0.93) 1.5px, transparent 2.6px),
    radial-gradient(circle at 51% 32%, rgba(255,255,255,0.95) 1.4px, transparent 2.5px),
    radial-gradient(circle at 68% 28%, rgba(255,255,255,0.90) 1.4px, transparent 2.5px),
    radial-gradient(circle at 85% 33%, rgba(255,255,255,0.92) 1.5px, transparent 2.6px),
    radial-gradient(circle at 98% 27%, rgba(255,255,255,0.98) 1.3px, transparent 2.4px),
    /* faintest, lowest */
    radial-gradient(circle at 10% 42%, rgba(255,255,255,0.98) 1.3px, transparent 2.3px),
    radial-gradient(circle at 27% 40%, rgba(255,255,255,0.96) 1.2px, transparent 2.2px),
    radial-gradient(circle at 44% 44%, rgba(255,255,255,0.98) 1.3px, transparent 2.3px),
    radial-gradient(circle at 61% 41%, rgba(255,255,255,0.96) 1.2px, transparent 2.2px),
    radial-gradient(circle at 78% 45%, rgba(255,255,255,0.98) 1.3px, transparent 2.3px),
    radial-gradient(circle at 94% 39%, rgba(255,255,255,0.98) 1.2px, transparent 2.2px);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;

}
a.layer {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.layer:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
/* Rule */
.layer-rule {
  padding: var(--space-xl) var(--pad);
  text-align: center;

}

.rule-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-m);
}

.rule-text {
  font-family: var(--serif);
  font-size: var(--step-4);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  margin: 0 auto var(--space-s);
  color: var(--ink);
  max-width: var(--measure-narrow);
}

.rule-sub {
  font-family: var(--serif);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: var(--measure-narrow);
}


/* ── Clusters — a row of marks on the horizon, caption below ── */
.layer-clusters {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) 4% var(--space-m);
  border-bottom: 1px solid #afa798;
 /* background: var(--field);*/
}

/* The row of clusters */
.clusters-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: var(--space-s) var(--space-m);
  flex-wrap: wrap;
  min-height: clamp(110px, 13vw, 160px);
}

.cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  cursor: default;
}

/* The caption — a block, not a flex item */
.clusters-caption {
  margin: var(--space-l) auto 0;
  max-width: var(--measure-narrow);
  text-align: center;
  font-family: var(--serif);
  font-size: var(--step-0);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Marks sit at the very bottom of the layer, resting on the line */
.cluster-mark {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ochre);
  transition: transform 0.3s ease, background 0.3s ease;
}
.cluster:hover .cluster-mark {
  transform: scale(1.35);
  background: var(--ochre-soft);
}

.cluster-name {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cluster-note {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.cluster-empty .cluster-mark {
  background: transparent;
  border: 1px dashed var(--ochre);
}
.cluster-empty .cluster-name { color: var(--ochre-text); }


/* ── Horizon — the label band under the line ─────────────── */
.layer-horizon {
  position: relative;
  padding: var(--space-s) var(--pad) var(--space-m);
  text-align: center;
  background: var(--field);
}

/* Teal glow, emanating from the line above, bleeding down */
.layer-horizon::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 48px;
  background:
    /* Faint echo right at the line */
    linear-gradient(
      to bottom,
      rgba(42, 106, 106, 0.10) 0%,
      rgba(42, 106, 106, 0.00) 18%
    ),
    /* Main glow */
    linear-gradient(
      to bottom,
      rgba(42, 106, 106, 0.16) 0%,
      rgba(42, 106, 106, 0.00) 100%
    );
  pointer-events: none;
}
.horizon-label {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.layer-horizon:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* Ocean (the commons) */
.layer-ocean {
  position: relative;
  min-height: clamp(70px, 8vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* Fine ripples — very faint, 11px spacing */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 10px,
      rgba(255,255,255,0.15) 10px,
      rgba(255,255,255,0.15) 11px
    ),
    /* Depth gradient — unchanged from your version */
    linear-gradient(
      to bottom,
      rgba(42, 106, 106, 0.18) 0%,
      rgba(26, 74, 74, 0.42) 100%
    );
  border-bottom: 1px solid rgba(26, 74, 74, 0.5);
}

.ocean-label {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  padding: 0 var(--space-s);
}

.layer-ocean::before,
.layer-ocean::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.18) 0 6px,
    transparent 6px 14px
  );
}
.layer-ocean::before { top: 22%; }
.layer-ocean::after  { top: 62%; opacity: 0.6; }

/* ── Register — the geological substrate ─────────────────── */
/* ── Register — the geological substrate ─────────────────── */
.layer-register {
  position: relative;
  height: clamp(150px, 17vw, 200px);
  background-color: var(--teal);
  /* Sediment grain — four dot patterns at different scales */
  background-image:
    radial-gradient(circle at 18% 32%, rgba(255,255,255,0.22) 1.6px, transparent 2.6px),
    radial-gradient(circle at 68% 74%, rgba(255,255,255,0.16) 1.2px, transparent 2.2px),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,0.18) 2.0px, transparent 3.0px),
    radial-gradient(circle at 42% 52%, rgba(255,255,255,0.12) 1.0px, transparent 1.8px);
  background-size: 46px 46px, 67px 67px, 89px 89px, 113px 113px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 2px 2px;
}

/* Faint strata — horizontal lines between the sediment grain */
.layer-register::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 29px,
    rgba(255,255,255,0.11) 29px,
    rgba(255,255,255,0.11) 30px
  );
  pointer-events: none;
  z-index: 1;
}

.currents {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.currents path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.5;
}
.current-1 { animation: drift 45s ease-in-out infinite; }
.current-2 { animation: drift 60s ease-in-out infinite reverse; }
.current-3 { animation: drift 75s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-60px); }
}
@media (prefers-reduced-motion: reduce) {
  .current-1, .current-2, .current-3 { animation: none; }
}

.register-label {
  position: relative;
  z-index: 3;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  padding: 0 var(--space-s);
  max-width: var(--measure-narrow);
}
.register-label {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 0 var(--space-s);
  max-width: var(--measure-narrow);
}

/* Section caption (hover readout) */
/* Section caption (hover readout) */
.section-caption {
  max-width: var(--measure);
  margin: var(--space-m) auto 0;
  min-height: calc(var(--step-0) * 3);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  transition: color 0.3s;
}
.section-caption.active { color: var(--ink); }
/* ── HOME PAGE ─────────────────────────────────────────── */

.home-intro {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-m) var(--pad) var(--space-l);
  text-align: center;
}
.home-intro p {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.home-next {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad) var(--space-2xl);
  display: flex;
  justify-content: center;
  gap: var(--space-m) var(--space-l);
  flex-wrap: wrap;
  border-top: 1px solid var(--frame);
}
.home-next a {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.home-next a:hover {
  color: var(--ochre);
  border-bottom-color: var(--ochre);
}
/* ── Statement ───────────────────────────────────────────── */
.statement {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-2xl) var(--pad) var(--space-l);
}


.statement p {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--space-m);
}

.statement-lead {
  font-size: var(--step-2) !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  margin-bottom: var(--space-l) !important;
  letter-spacing: 0.01em;
}
.statement + .structure-section {
  padding-top: var(--space-l);
}
.statement + * {
  margin-top: 0;
}
.statement p:last-child {
  margin-bottom: 0;
}

.statement-link {
  margin-top: var(--space-l) !important;
}
.statement-link a {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.statement-link a:hover { opacity: 0.65; }
a.cluster {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
a.cluster:hover .cluster-name {
  color: var(--ochre-soft);
}
a.cluster:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 2px;
}
/* ── Footer ──────────────────────────────────────────────── */
footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad) var(--space-xl);
  border-top: 1px solid var(--frame);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-soft);
}
footer a:hover { color: var(--ink); }


/* ── ETHOS PAGE ────────────────────────────────────────── */

.ethos-rule {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--pad) var(--space-xl);
  text-align: center;
}

.ethos-rule {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--pad) var(--space-l);
  text-align: center;
}

.ethos-lead {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-l);
  text-align: center;
  border-bottom: 1px solid var(--frame);
}

.ethos-lead + .statement {
  padding-top: var(--space-xl);
}

.ethos-lead p {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: 0.01em;
  max-width: var(--measure-narrow);
  margin: 0 auto;
}

/* ── ABOUT PAGE ────────────────────────────────────────── */

.about-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: var(--space-xl) 0 var(--space-s);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--frame);
}

.about-contact {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.8;
}
.about-contact a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted var(--teal);
}
.about-contact a:hover { opacity: 0.7; }

/* THE REGISTER */
/* ── Register viewer ─────────────────────────────────────── */

.viewer-intro {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-2xl) var(--pad) var(--space-l);
}
.viewer-intro p {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--space-m);
}
.intro-lead {
  font-size: var(--step-2) !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-l) !important;
}


/* Register list */


.register {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-m) var(--pad) var(--space-l);
}

.register-empty {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  padding: var(--space-2xl) 0;
}
/* ── Register controls ──────────────────────────────────── */

.register-controls {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-l);
  border-bottom: 1px solid var(--frame);
}

.controls-search {
  margin-bottom: var(--space-l);
}
.controls-search input {
  width: 100%;
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--frame);
  padding: var(--space-xs) 0;
  outline: none;
  transition: border-color 0.2s;
}
.controls-search input:focus { border-bottom-color: var(--teal); }
.controls-search input::placeholder { color: var(--ink-soft); opacity: 0.6; }

.controls-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-xl);
  margin-bottom: var(--space-m);
}

.filter-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s);
}

.filter-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: var(--space-2xs);
}

.chip {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  background: none;
  border: none;
  padding: 2px 0 3px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.controls-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  flex-wrap: wrap;
  padding-top: var(--space-s);
  border-top: 1px solid var(--frame);
}


.result-count {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Orphan works simulator ────────────────────────────── */

.entry-simulator {
  margin: var(--space-m) 0;
  padding: var(--space-m) 0;
  border-top: 1px dotted var(--frame);
  border-bottom: 1px dotted var(--frame);
}

.entry-simulator-toggle {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--frame);
  padding: var(--space-2xs) var(--space-s);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.entry-simulator-toggle:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.entry-simulator-note {
  margin: var(--space-s) 0 0;
  padding: var(--space-s) var(--space-m);
  border-left: 2px solid var(--teal);
  background: rgba(42, 106, 106, 0.06);
  font-family: var(--serif);
  font-size: var(--step-0);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
}
.entry-simulator-note p { margin: 0; }

/* Contested state — overrides the orphan's dashed mark */
.entry[data-contested="true"] .entry-mark {
  background: var(--teal-mid);
  border: none;
}
.entry[data-contested="true"] .entry-licence {
  font-family: var(--serif);
  font-size: var(--step-0);
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--teal-mid);
}


/* ── Pagination ─────────────────────────────────────────── */

.pagination {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-2xl);
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
}
.pagination button {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-s);
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  min-width: 2.4em;
}
.pagination button:hover { color: var(--ink); }
.pagination button[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ── Screen reader only ─────────────────────────────────── */

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

/*regsiter page entries*/

.entry {
  border-bottom: 1px solid var(--frame);
  padding: var(--space-m) 0;
}
.entry:last-child { border-bottom: none; }

.entry-head {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--space-m);
  align-items: baseline;
  cursor: pointer;
}

.entry-mark {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ochre);
  margin-top: 0.4em;
}
.entry[data-type="reference"] .entry-mark { background: var(--ink-soft); }
.entry[data-type="orphan"] .entry-mark {
  background: transparent;
  border: 1px dashed var(--ink-soft);
}

.entry-title {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
  line-height: 1.35;
}

.entry-sub {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.entry-licence {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;           /* was 0.12em — tighter reads better for mixed case */
  text-align: right;
  color: var(--ink-soft);
  /* no text-transform — case is preserved */
}
.entry[data-type="contribution"] .entry-licence {
  font-family: var(--serif);
  font-size: var(--step-0);
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--ochre-text);
}


.entry-body {
  display: none;
  padding: var(--space-m) 0 0 calc(18px + var(--space-m));
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.entry.is-open .entry-body { display: block; }
.entry-body p { margin: 0 0 var(--space-s); }

.entry-relations { margin-top: var(--space-m); }
.entry-relations-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
}
.entry-relations-list li {
  padding: 0;
  border-bottom: 1px dotted var(--frame);
}
.entry-relations-list li:last-child { border-bottom: none; }

.entry-relations-list a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-2xs) 0;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.entry-relations-list a:hover {
  color: var(--teal);
}
.entry-relations-list a:hover span:first-child {
  border-bottom: 1px dotted var(--teal);
}

.entry-hash {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  word-break: break-all;
  margin-top: var(--space-s);
  opacity: 0.75;
  line-height: 1.6;
}

.entry-contested-note {
  margin: var(--space-s) 0;
  padding: var(--space-s) var(--space-m);
  border-left: 2px solid var(--teal);
  background: rgba(42, 106, 106, 0.06);
  font-style: italic;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.entry-preview {
  margin: var(--space-m) 0;
  padding-left: var(--space-m);
  border-left: 2px solid var(--frame);
}
.entry-preview-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.entry-preview-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-s);
  max-width: var(--measure);
}
.entry-preview-link {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted var(--teal);
}
.entry-preview-link:hover { opacity: 0.7; }
.entry-preview-link[aria-disabled="true"] {
  color: var(--ink-soft);
  border-bottom-color: var(--ink-soft);
  cursor: default;
  pointer-events: none;
}

/* Public domain excerpts — the source's own voice */
.entry[data-type="reference"] .entry-preview {
  border-left-color: var(--ink-soft);
}
.entry[data-type="orphan"] .entry-preview {
  border-left-color: var(--teal-mid);
  border-left-style: dashed;
}
.entry[data-type="contribution"] .entry-preview {
  border-left-color: var(--ochre);
}

.viewer-intro-link {
  margin-top: var(--space-m);
}
.viewer-intro-link a {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
}
.viewer-intro-link a:hover {
  opacity: 0.7;
}


/* ── BLACKBOX feed ─────────────────────────────────────── */

.feed {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-m) var(--pad) var(--space-2xl);
}

.feed-item {
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--frame);
  transition: background 0.4s ease;
}
.feed-item:last-child { border-bottom: none; }
.feed-item.is-flash { background: rgba(42, 106, 106, 0.06); }

.feed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-s);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
}
.feed-cluster {
  color: var(--ochre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a.feed-cluster:hover {
  border-bottom-color: var(--ochre);
}

.feed-title {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 var(--space-s);
  max-width: var(--measure);
}

.feed-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-s) var(--space-m);
  font-family: var(--serif);
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.feed-phase {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}
.feed-from {
  font-style: italic;
  max-width: var(--measure);
}
.feed-from-link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--frame);
}
.feed-from-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.feed-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-soft);
  text-align: center;
  padding: var(--space-2xl) 0;
}
.feed-item {
  cursor: pointer;
}
.feed-item a {
  cursor: pointer;
}

/* ── Phase sections (collapsible) ──────────────────────── */

.bb-phase {
  margin-top: var(--space-l);
  margin-left: calc(var(--bb-indent, 0) * 1.5rem);
  transition: margin-left 0.2s;
}

.bb-phase-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  flex-wrap: wrap;
  font-weight: 400;
  margin: 0 0 var(--space-s);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--frame);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bb-phase-label::-webkit-details-marker { display: none; }
.bb-phase-label::marker { display: none; content: ""; }

/* Chevron marker */
.bb-phase-label::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid var(--ink-soft);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: var(--space-xs);
  transform-origin: 2px 4px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}
.bb-phase[open] .bb-phase-label::before {
  transform: rotate(90deg);
}

.bb-phase-name {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bb-phase[open] .bb-phase-name {
  color: var(--ink);
}

.bb-phase-role {
  font-family: var(--serif);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.bb-phase-count {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  opacity: 0.6;
  margin-left: auto;
}

.bb-phase-body {
  padding-left: var(--space-l);
}

/* Sources list */
.bb-source-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bb-source-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  padding: var(--space-xs) 0;
  border-bottom: 1px dotted var(--frame);
}
.bb-source-line:last-child { border-bottom: none; }
.bb-source-title {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--ink);
  line-height: 1.4;
}
.bb-source-meta {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Lineage line inside each entry */
.bb-lineage {
  margin: var(--space-s) 0 0 calc(18px + var(--space-m));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bb-lineage-part {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  flex-wrap: wrap;
}
.bb-lineage-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.7;
  margin-right: var(--space-2xs);
}
.bb-lineage-item {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--frame);
}
.bb-lineage-item:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.bb-lineage-empty {
  color: var(--ink-soft);
  opacity: 0.5;
  font-style: italic;
}

.entry.is-flash {
  transition: background 0.4s ease;
  background: rgba(42, 106, 106, 0.06);
}

/* ── CLUSTER PAGE ──────────────────────────────────────── */

.cluster-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad) var(--space-m);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  background: linear-gradient(
    to bottom,
    rgba(184, 134, 11, 0.08) 0%,
    rgba(184, 134, 11, 0.02) 100%
  );
  border-radius: 0 0 2px 2px;
}
.cluster-header-id {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.cluster-header-name {
  font-family: var(--mono);
  font-size: var(--step-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.cluster-header-ens {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.cluster-header-status {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}
.cluster-header-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: var(--space-2xs);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.cluster-title {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad) var(--space-s);
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.25;
}

.cluster-inquiry {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-l);
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.cluster-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad);
  border-top: 1px solid var(--frame);
}

.cluster-section-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 var(--space-m);
}

.cluster-people {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
}
.cluster-person {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--ink);
}
.cluster-person-empty {
  color: var(--ink-soft);
  font-style: italic;
}

.cluster-rules {
  margin: 0;
  padding: 0 0 0 var(--space-m);
  max-width: var(--measure);
}
.cluster-rules li {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.cluster-rules li:last-child {
  margin-bottom: 0;
}

.cluster-apply-call {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink);
  margin: 0 0 var(--space-m);
  max-width: var(--measure);
}

.cluster-timeline {
  margin: 0 0 var(--space-m);
  padding: 0 0 0 var(--space-m);
  max-width: var(--measure);
}
.cluster-timeline li {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
}

.cluster-apply-note {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--space-s);
  max-width: var(--measure);
}

.cluster-apply-contact {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}
/* ── CLUSTERS DIRECTORY ───────────────────────────────── */

.cluster-card {
  margin-top: var(--space-l);
  padding: var(--space-l) var(--space-m) var(--space-l) var(--space-l);
  border-left: 2px solid var(--ochre);
  background: linear-gradient(
    to bottom,
    rgba(184, 134, 11, 0.06) 0%,
    rgba(184, 134, 11, 0.02) 100%
  );
}
.cluster-card:first-child {
  margin-top: 0;
}

.cluster-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}
.cluster-card-id {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.cluster-card-name {
  font-family: var(--mono);
  font-size: var(--step-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.cluster-card-name:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
.cluster-card-ens {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.cluster-card-status {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}
.cluster-card-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: var(--space-2xs);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.cluster-card-title {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: var(--space-xs) 0 var(--space-s);
  line-height: 1.3;
}

.cluster-card-inquiry {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--space-m);
  max-width: var(--measure);
}

.cluster-card-people {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  flex-wrap: wrap;
  margin-bottom: var(--space-s);
}
.cluster-card-people-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cluster-card-people-names {
  font-family: var(--serif);
  font-size: var(--step-0);
  color: var(--ink);
}

.cluster-card-counts {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0;
}
.cluster-card-placeholder {
  border-left-style: dashed;
  background: none;
}

.cluster-card-placeholder .cluster-card-name {
  color: var(--ochre);
  border-bottom-color: var(--ochre);
  cursor: default;
}
.cluster-card-placeholder .cluster-card-name:hover {
  color: var(--ochre);
  border-bottom-color: var(--ochre);
}

.cluster-card-status-empty {
  color: var(--ink-soft);
}
.cluster-card-status-empty::before {
  background: var(--ink-soft);
}

.cluster-card-action {
  margin: var(--space-m) 0 0;
}
.cluster-card-action a {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
}
.cluster-card-action a:hover {
  opacity: 0.7;
}
/* Start-a-cluster prompt */
.clusters-start {
  max-width: var(--max);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-l) var(--pad);
  border-top: 1px solid var(--frame);
  text-align: center;
}
.clusters-start-text {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 var(--space-s);
}
.clusters-start-link {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
}
.clusters-start-link:hover {
  opacity: 0.75;
}
/* ── WIZARD — start a cluster ──────────────────────────── */

.wizard {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-2xl);
}

.wizard-fieldset {
  border: none;
  border-top: 1px solid var(--frame);
  padding: var(--space-l) 0;
  margin: 0;
}
.wizard-fieldset:first-of-type { border-top: none; padding-top: 0; }

.wizard-legend {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0 var(--space-s) 0;
  margin: 0;
}

.wizard-row {
  margin-bottom: var(--space-m);
}
.wizard-row label {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2xs);
}
.wizard-row input,
.wizard-row textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: var(--step-0);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--frame);
  padding: var(--space-xs) var(--space-s);
  outline: none;
  transition: border-color 0.2s;
}
.wizard-row input:focus,
.wizard-row textarea:focus {
  border-color: var(--teal);
}
.wizard-row textarea {
  resize: vertical;
  line-height: 1.6;
}
.wizard-hint {
  font-family: var(--serif);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--ink-soft);
  margin: var(--space-2xs) 0 0;
}
.wizard-optional {
  font-family: var(--serif);
  font-size: var(--step--1);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: var(--space-2xs);
}

.wizard-actions {
  display: flex;
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: 1px solid var(--frame);
}
.wizard-submit,
.wizard-reset {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--frame);
  background: none;
  padding: var(--space-xs) var(--space-m);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.wizard-submit {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
}
.wizard-submit:hover { opacity: 0.85; }
.wizard-reset {
  color: var(--ink-soft);
}
.wizard-reset:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

/* Output section */
.wizard-output {
  max-width: var(--max);
  margin: var(--space-2xl) auto 0;
  padding: 0 var(--pad);
}
.wizard-output-title {
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--frame);
}

.wizard-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}
.wizard-file {
  padding: var(--space-m);
  border-left: 2px solid var(--ochre);
  background: linear-gradient(
    to bottom,
    rgba(184, 134, 11, 0.06) 0%,
    rgba(184, 134, 11, 0.02) 100%
  );
}
.wizard-file-name {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0 0 var(--space-s);
  word-break: break-all;
}
.wizard-file-desc {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--space-m);
}
.wizard-file-desc code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
}
.wizard-file-actions {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.wizard-download,
.wizard-copy {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--frame);
  background: none;
  padding: var(--space-2xs) var(--space-s);
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color 0.2s, color 0.2s;
}
.wizard-download:hover,
.wizard-copy:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.wizard-preview {
  margin-bottom: var(--space-xl);
}
.wizard-preview-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 var(--space-s);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--frame);
}
.wizard-preview-frame {
  width: 100%;
  height: 700px;
  border: 1px solid var(--frame);
  background: var(--field);
}

.wizard-next {
  padding-top: var(--space-l);
  border-top: 1px solid var(--frame);
}
.wizard-next-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 var(--space-m);
}
.wizard-next-list {
  margin: 0;
  padding: 0 0 0 var(--space-m);
  max-width: var(--measure);
}
.wizard-next-list li {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.wizard-next-list code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
}
/* ── GRAPH PAGE ────────────────────────────────────────── */

.graph-controls {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-m);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--frame);
}
.graph-legend {
  display: flex;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.graph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.graph-legend-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.graph-legend-contribution { background: var(--ochre); }
.graph-legend-reference    { background: var(--ink-soft); }
.graph-legend-orphan {
  background: transparent;
  border: 1px dashed var(--ink-soft);
}
.graph-legend-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.graph-hint {
  font-family: var(--serif);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
}

.graph-container {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad);
  position: relative;
}

.graph-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Column labels and hairlines */
.graph-column-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;                  /* was 11px */
  letter-spacing: 0.24em;
  fill: var(--ink);                 /* was --ink-soft */
  font-weight: 500;           /* added */
}

.graph-column-line {
  stroke: var(--ink-soft);          /* was --frame */
  stroke-width: 1;
  stroke-dasharray: 2 4;            /* was 1 3 */
  opacity: 0.6;
}

.graph-node-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;                  /* was 10px */
  letter-spacing: 0.04em;
  fill: var(--ink-soft);            /* unchanged, but see note below */
  transition: fill 0.2s, opacity 0.2s;
  pointer-events: none;
}
.graph-node:hover .graph-node-label {
  fill: var(--ink);
}

.graph-edge {
  fill: none;
  stroke: var(--teal-mid);
  stroke-width: 1;                /* was 1 */
  opacity: 0.4;                    /* was 0.28 */
  transition: opacity 0.2s, stroke-width 0.2s;
}
.graph-edge.is-active {
  opacity: 1;
  stroke-width: 1.8;
}
.graph-edge.is-dim {
  opacity: 0.1;                     /* was 0.05 */
}

/* Nodes */
.graph-node {
  cursor: pointer;
}
.graph-node-circle {
  transition: r 0.15s, opacity 0.2s;
}
.graph-node-contribution .graph-node-circle {
  fill: var(--ochre);
}
.graph-node-reference .graph-node-circle {
  fill: var(--ink-soft);
}
.graph-node-orphan .graph-node-circle {
  fill: transparent;
  stroke: var(--ink-soft);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.graph-node-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  fill: var(--ink);
  transition: fill 0.2s, opacity 0.2s;
  pointer-events: none;
}

.graph-node:hover .graph-node-label {
  fill: var(--teal);
}

.graph-node:hover .graph-node-circle {
  r: 11;
}


.graph-node.is-dim .graph-node-circle { opacity: 0.15; }
.graph-node.is-dim .graph-node-label  { opacity: 0.15; }

/* Detail panel */
.graph-detail {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) var(--space-2xl);
}
.graph-detail-card {
  padding: var(--space-l);
  border-left: 2px solid var(--ochre);
  background: linear-gradient(
    to bottom,
    rgba(184, 134, 11, 0.06) 0%,
    rgba(184, 134, 11, 0.02) 100%
  );
}
.graph-detail-close {
  float: right;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px dotted var(--ink-soft);
}
.graph-detail-close:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.graph-detail-id {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
}
.graph-detail-title {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
  max-width: var(--measure);
}
.graph-detail-meta {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-m);
}
.graph-detail-relations {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--frame);
}
.graph-detail-relations-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
}
.graph-detail-relations-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.graph-detail-relations-list li {
  font-family: var(--serif);
  font-size: var(--step-0);
  color: var(--ink-soft);
  padding: var(--space-2xs) 0;
  border-bottom: 1px dotted var(--frame);
}
.graph-detail-relations-list li:last-child { border-bottom: none; }
.graph-detail-relations-list a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted var(--teal);
  cursor: pointer;
}
.graph-detail-relations-list a:hover { opacity: 0.7; }

.graph-return {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-l) var(--pad) var(--space-2xl);
  text-align: center;
  border-top: 1px solid var(--frame);
}
.graph-return a {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
}
.graph-return a:hover {
  opacity: 0.7;
}
/* ── STRUCTURE PAGE ────────────────────────────────────── */

.structure-section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-xl) var(--pad) var(--space-l);
  border-top: 1px solid var(--frame);
}

.structure-name {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: baseline;
  gap: var(--space-s);
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 var(--space-m);
  line-height: 1.3;
}

.structure-num {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-style: normal;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

.structure-body {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--space-l);
}

.structure-list-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: var(--space-m) 0 var(--space-s);
}

.structure-list {
  margin: 0;
  padding: 0 0 0 var(--space-m);
}
.structure-list li {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.structure-list li:last-child { margin-bottom: 0; }

.structure-open {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-xl) var(--pad) var(--space-2xl);
  border-top: 1px solid var(--frame);
}

.structure-open-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--frame);
}

.structure-open p {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--space-m);
}

.structure-open-list {
  margin: 0;
  padding: 0 0 0 var(--space-m);
}
.structure-open-list li {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.structure-open-list li:last-child { margin-bottom: 0; }
/* ── CONTACT PAGE ──────────────────────────────────────── */

.contact-section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-xl) var(--pad) var(--space-l);
  border-top: 1px solid var(--frame);
}

.contact-label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--frame);
}

.contact-list {
  margin: 0;
  padding: 0 0 0 var(--space-m);
}
.contact-list li {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.contact-list li:last-child { margin-bottom: 0; }
.contact-list a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted var(--teal);
}
.contact-list a:hover { opacity: 0.7; }

.contact-form { margin: 0; }

.contact-row {
  margin-bottom: var(--space-m);
}
.contact-row label {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2xs);
}
.contact-row input,
.contact-row select,
.contact-row textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: var(--step-0);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--frame);
  padding: var(--space-xs) var(--space-s);
  outline: none;
  transition: border-color 0.2s;
}
.contact-row input:focus,
.contact-row select:focus,
.contact-row textarea:focus {
  border-color: var(--teal);
}
.contact-row textarea {
  resize: vertical;
  line-height: 1.6;
}
.contact-row select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a4a48' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-s) center;
  padding-right: calc(var(--space-s) + 24px);
}

.contact-actions {
  padding-top: var(--space-s);
}
.contact-submit {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--teal);
  color: white;
  border: 1px solid var(--teal);
  padding: var(--space-xs) var(--space-l);
  cursor: pointer;
  transition: opacity 0.2s;
}
.contact-submit:hover { opacity: 0.85; }

.contact-privacy {
  font-family: var(--serif);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
  margin: var(--space-m) 0 0;
  line-height: 1.55;
}
/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 760px) {
  .clusters-row .cluster:nth-child(3) {display: none;}
    .clusters-row {
    gap: var(--space-s);
    padding: 0 var(--space-s);
  }
  .controls-filters { gap: var(--space-m); }
  .filter-group { gap: var(--space-2xs) var(--space-s); }
  .controls-meta { gap: var(--space-s); }
  .register { padding-top: var(--space-s); }
  .viewer-controls { flex-direction: column; gap: var(--space-s); }
  .control-group-end { margin-left: 0; }
  .entry-head { grid-template-columns: 14px 1fr; }
  .entry-licence {
    grid-column: 2;
    text-align: left;
    margin-top: var(--space-xs);}
  .entry-body { padding-left: 0; }
  header { padding: var(--space-m) var(--pad); }
  nav { gap: var(--space-xs) var(--space-s); }
  .layer-clusters { padding: var(--space-m) 2% 0; gap: var(--space-xs); }
  .statement { padding: var(--space-xl) var(--pad); }
  /*Blackbox page */
  .feed-title { font-size: var(--step-1); }
  .feed-meta { gap: var(--space-xs); }
  .bb-lineage { margin-left: 0; }
  .bb-source-line { flex-direction: column; gap: var(--space-2xs); }
  .bb-source-meta { white-space: normal; }
  .bb-phase {
    margin-left: 0;}
  .bb-phase-body {
    padding-left: var(--space-m);}
  /*cluster pages*/
  .cluster-header { flex-direction: column; gap: var(--space-s); align-items: flex-start; }
  .cluster-title { font-size: var(--step-2); }
  /*graph view*/
  .graph-controls { flex-direction: column; gap: var(--space-s); }
  .graph-node-label { display: none; }
}