/* ============================================================
   EO1 — cluster stylesheet
   Default styles for cluster pages generated by the wizard.
   A cluster may replace this file entirely with its own.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */

:root {
  --field:       #fafaf7;
  --ink:         #1a1a1a;
  --ink-soft:    #4a4a48;
  --teal:        #1a4a4a;
  --teal-mid:    #2a6a6a;
  --teal-light:  #6a9a9a;
  --ochre:       #b8860b;
  --ochre-soft:  #d4a017;
  --frame:       #d8d4cc;

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', 'SF Mono', Monaco, monospace;

  --step--2: clamp(0.55rem, 0.50rem + 0.22vw, 0.68rem);
  --step--1: clamp(0.68rem, 0.62rem + 0.30vw, 0.80rem);
  --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);

  --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);

  --measure:        70ch;
  --measure-narrow: 55ch;

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

/* ── Base ───────────────────────────────────────────────── */

* { 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; }

/* ── 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);
  border-bottom-color: var(--ochre);
}

nav a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
/* ── 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;
}



/* ── Mobile navigation (defaults, hidden until the media query) ── */

.nav-toggle-input { display: none; }
.nav-toggle { display: none; }

/* ── Cluster header ─────────────────────────────────────── */

.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 sections ──────────────────────────────────── */

.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;
}

/* ── Entry ─────────────────────────────────────────────── */

.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;
  text-align: right;
  color: var(--ink-soft);
}
.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);
}

.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 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.entry-relations-list li {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: var(--space-2xs) 0;
  border-bottom: 1px dotted var(--frame);
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
}
.entry-relations-list li:last-child { border-bottom: none; }

.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;
}

/* ── Preview ───────────────────────────────────────────── */

.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;
}
.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); }

/* ── Phases (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: ""; }

.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--1);
  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 ───────────────────────────────────────────── */

.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;
}

/* ── Flash ─────────────────────────────────────────────── */

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

/* ── 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); }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 760px) {
  header { padding: var(--space-m) var(--pad); flex-wrap: wrap; }
  nav { gap: var(--space-xs) var(--space-s); }
  .bb-phase { margin-left: 0; }
  .bb-phase-body { padding-left: var(--space-m); }
  .bb-lineage { margin-left: 0; }
  .bb-source-line { flex-direction: column; gap: var(--space-2xs); }
  .bb-source-meta { white-space: normal; }
  .cluster-header { flex-direction: column; gap: var(--space-s); align-items: flex-start; }
  .cluster-title { font-size: var(--step-2); }
  .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; }

  /* Mobile nav */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    order: 2;
  }
  .nav-toggle-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
  }
  header nav {
    order: 3;
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding-top: var(--space-m);
  }
  .nav-toggle-input:checked ~ nav {
    display: flex;
  }
}