/* ==========================================================================
   CIRSENTRA Labs public site
   Design language inherited from Science Deck v4: flat editorial, rules
   instead of boxes, mono micro-labels, petrol accent with a rust signal.
   Adapted for reading rather than projection: serif carries the long form,
   sans carries labels and data, measure is capped, dark mode is designed
   rather than inverted.
   No build step. One stylesheet. System fonts only, so nothing leaves the
   visitor's browser to a third party.
   ========================================================================== */

:root {
  --paper:       #F7F6F3;
  --paper-2:     #FFFFFF;
  --paper-3:     #EFEDE7;
  --ink:         #15181B;
  --ink-2:       #41474E;
  --ink-3:       #616872;
  --muted:       #666C74;

  --accent:      #123C4E;
  --accent-2:    #1B5A73;
  --accent-soft: #E7EDEF;
  --signal:      #AD4F2B;
  --signal-soft: #F6ECE7;

  --rule:        #D8D5CD;
  --rule-2:      #E6E3DC;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Avenir Next", Avenir, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 34rem;
  --wide: 74rem;
  --rail: clamp(1.25rem, 5vw, 5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #14161A;
    --paper-2:     #1B1E23;
    --paper-3:     #202429;
    --ink:         #ECE9E2;
    --ink-2:       #B9BDC3;
    --ink-3:       #949AA2;
    --muted:       #858A93;

    --accent:      #7FBBD2;
    --accent-2:    #A6D3E5;
    --accent-soft: #1C2A31;
    --signal:      #E08256;
    --signal-soft: #2A1E19;

    --rule:        #2E333A;
    --rule-2:      #24282E;
  }
}

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

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

::selection { background: var(--signal); color: #fff; }

/* ---------- layout ---------------------------------------------------- */

.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: var(--rail); }
.col  { max-width: var(--measure); }

section { border-top: 1px solid var(--rule-2); }
section > .wrap { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
section:first-of-type { border-top: 0; }

.grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .g2, .g3 { grid-template-columns: minmax(0, 1fr); } }

.lede-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 58rem) { .lede-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- masthead --------------------------------------------------- */

.rail {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule-2);
}
.rail .wrap {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.9rem;
}
.mark {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.mark span { color: var(--signal); }
.rail nav {
  margin-left: auto;
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 2rem);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.rail nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.rail nav a:hover { color: var(--ink); border-bottom-color: var(--signal); }
.rail nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* below this width the nav takes its own line rather than wrapping mid-label */
@media (max-width: 32rem) {
  .rail .wrap { flex-wrap: wrap; row-gap: 0.45rem; padding-block: 0.75rem; }
  .rail nav { margin-left: 0; width: 100%; gap: 1.15rem; }
}

/* ---------- type ------------------------------------------------------- */

h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; letter-spacing: -0.014em; }

h1 {
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4.15rem);
  line-height: 1.06;
}
h2 {
  font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.65rem);
  line-height: 1.14;
}
h3 {
  font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.45rem);
  line-height: 1.24;
}
/* a small sans label that sits at h3 level in the document outline */
h3.sub, h4 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}
span.sig, .lede .sig, h1 .sig, h2 .sig, h3 .sig { color: var(--signal); }
.acc { color: var(--accent); }

p + p { margin-top: 0.9em; }
p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.15rem, 1.03rem + 0.5vw, 1.42rem);
  line-height: 1.48;
  color: var(--ink-2);
  max-width: 42rem;
}
.lede strong { font-weight: 600; color: var(--ink); }

.small { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.tiny  { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.35rem;
}
.eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}
.eyebrow.sig { color: var(--signal); }

.klabel {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.6rem;
}
.klabel.sig { color: var(--signal); }
.klabel.mute { color: var(--muted); }

a { color: inherit; }
.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding-bottom: 1px;
}
.link:hover { border-bottom-color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.25rem; }
.cta {
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--signal);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  transition: gap 160ms ease;
}
.cta::after { content: "\2192"; color: var(--signal); }
.cta:hover { gap: 0.85rem; }
.cta.quiet { border-bottom-color: var(--rule); }
.cta.quiet::after { color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }

/* ---------- hero ------------------------------------------------------- */

.hero > .wrap { padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 5.5rem); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 44rem; }
.hero .byline {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* ---------- numbered failure list -------------------------------------- */

.fails { border-top: 1px solid var(--rule); }
.fails li {
  list-style: none;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule-2);
}
.fails .n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--signal);
}
.fails p { font-size: 1.0625rem; line-height: 1.45; }

/* ---------- set-off passages ------------------------------------------- */

.pull {
  border-left: 2px solid var(--signal);
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-size: clamp(1.15rem, 1.03rem + 0.45vw, 1.4rem);
  line-height: 1.42;
}
.pull.accent { border-left-color: var(--accent); }

.note {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding: 1.35rem 1.6rem;
}
.note.sig { background: var(--signal-soft); border-left-color: var(--signal); }
.note { color: var(--ink); }
.note h3, .note h4 { color: var(--ink); }
.note p { font-size: 1rem; line-height: 1.55; }

.consequence {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 2px solid var(--signal);
  padding-top: 0.9rem;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 58rem;
}
.consequence .klabel { color: var(--signal); margin: 0; padding-top: 0.2rem; }
.consequence p { font-size: 1.0625rem; line-height: 1.45; }
@media (max-width: 40rem) {
  .consequence { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
}

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

.card { border-top: 2px solid var(--accent); padding-top: 1.05rem; color: var(--ink); }
.card.sig { border-top-color: var(--signal); }
.card h3, .card h4 { color: var(--ink); margin-bottom: 0.55rem; }
.card h3.sub { margin-bottom: 0.5rem; }
.card p { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.card p + p { margin-top: 0.7em; }
.card .more { margin-top: 0.9rem; }

a.card { display: block; text-decoration: none; color: inherit; transition: border-color 160ms ease; }
a.card:hover { border-top-color: var(--signal); }
a.card:hover h3 { color: var(--signal); }
@media (prefers-reduced-motion: reduce) { a.card { transition: none; } }

/* ---------- statistic rows --------------------------------------------- */

.stats { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.stat { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.stat .v {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.1vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat .v small { font-size: 0.45em; letter-spacing: 0.02em; color: var(--ink-3); }
.stat p { font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); margin-top: 0.6rem; }

/* ---------- tables ----------------------------------------------------- */

.tblwrap { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.9375rem;
  min-width: 34rem;
}
th, td { text-align: left; vertical-align: top; padding: 0.7rem 1.25rem 0.7rem 0; border-bottom: 1px solid var(--rule-2); }
th {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule);
}
td:first-child { color: var(--ink); }
td { color: var(--ink-2); }

/* ---------- definition list -------------------------------------------- */

.defs { border-top: 1px solid var(--rule); }
.defs > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1rem 2rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule-2);
}
.defs dt { font-family: var(--sans); font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.defs dd { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 44rem) {
  .defs > div { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}

/* ---------- the cycle figure ------------------------------------------- */

figure { margin: 0; }
.fig { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.fig svg { width: 100%; height: auto; display: block; }
figcaption {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 1.1rem;
  max-width: 46rem;
}

.cyc-box { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }
.cyc-top { fill: var(--accent); }
.cyc-top.hl { fill: var(--signal); }
.cyc-q { font-family: var(--sans); font-size: 12.5px; fill: var(--ink); }
.cyc-g { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.13em; fill: var(--accent); }
.cyc-g.hl { fill: var(--signal); }
.cyc-g.mute { fill: var(--muted); }
.cyc-ln { fill: none; stroke: var(--rule); stroke-width: 1; }
.cyc-ln.sig { stroke: var(--signal); }
.cyc-ar { fill: var(--muted); }
.cyc-ar.sig { fill: var(--signal); }
.cyc-rt { font-family: var(--mono); font-size: 8px; letter-spacing: 0.13em; fill: var(--signal); }

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

footer { border-top: 2px solid var(--accent); background: var(--paper-3); }
footer .wrap { padding-block: clamp(2.75rem, 5vw, 4rem); }
footer .cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (max-width: 50rem) { footer .cols { grid-template-columns: minmax(0, 1fr); } }
footer p, footer li { font-family: var(--sans); font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
footer ul { list-style: none; }
footer li { padding-block: 0.22rem; }
footer a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover { color: var(--ink); border-bottom-color: var(--signal); }
.colophon {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- skip link and focus ---------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  z-index: 100;
}
.skip:focus { left: 0; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- entrance --------------------------------------------------- */

.rise { opacity: 0; transform: translateY(9px); transition: opacity 520ms ease, transform 520ms ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}
.no-js .rise { opacity: 1; transform: none; }

@media print {
  .rail, .skip { display: none; }
  body { background: #fff; color: #000; }
  section { border-top: 1px solid #ccc; }
}

/* ---------- spacing and sizing utilities -------------------------------- */
/* Kept as classes rather than inline styles so the site can ship a strict
   Content-Security-Policy with no 'unsafe-inline' for styles. */

.mt-1 { margin-top: 0.9rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.25rem; }
.mt-6 { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.mt-7 { margin-top: clamp(2.25rem, 4vw, 3rem); }
.mt-8 { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.d-block { display: block; }

.mw-44 { max-width: 44rem; }
.mw-52 { max-width: 52rem; }
.mw-56 { max-width: 56rem; }

.scrollx { overflow-x: auto; }
.cycsvg { min-width: 640px; }

.gap-s { gap: 1.5rem; }
.gap-m { gap: 1.75rem; }

/* ---------- citations ---------------------------------------------------- */

.ref {
  font-family: var(--sans);
  font-size: 0.68em;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  color: var(--signal);
  text-decoration: none;
  padding: 0 0.1em 0 0.12em;
  border-bottom: 0;
}
.ref::before { content: "["; }
.ref::after  { content: "]"; }
.ref:hover { color: var(--ink); background: var(--signal-soft); }

.refs { list-style: none; counter-reset: ref; border-top: 1px solid var(--rule); max-width: 58rem; }
/* The list item stays a block, so inline children such as <i> and the DOI link
   keep flowing as text. An earlier grid version made each of them its own cell
   and broke every citation across three narrow columns. */
.refs li {
  counter-increment: ref;
  position: relative;
  padding: 0.85rem 0 0.85rem 2.4rem;
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
  scroll-margin-top: 5rem;
}
.refs li::before {
  content: counter(ref);
  position: absolute;
  left: 0;
  top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--signal);
}
.refs li i { font-style: italic; color: var(--ink); }
.refs li:target { background: var(--signal-soft); }

.doi {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
}
.doi:hover { border-bottom-color: var(--accent); }

.back { color: var(--muted); text-decoration: none; margin-left: 0.35rem; }
.back:hover { color: var(--signal); }

/* a compact source line under a figure or statistic */
.src {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.src a { color: var(--ink-3); }