/* ==========================================================================
   Science Journaling Club
   Visual system: herbarium sheet. Pressed-specimen mounting, flat green ink,
   pale rag paper, ruled label blocks. No gradients anywhere.

   Type:  Andada Pro        headings, humanist serif with flared terminals
          Gentium Book Plus body, SIL's book face for scholarly text
          Spline Sans Mono  labels, specimen data, figures
   ========================================================================== */

:root {
  /* Paper and ink. Brighter than before, closer to a good cartridge sheet
     than to a tinted one, so the colours sitting on it have room to work. */
  --paper:        #f8faf6;
  --paper-raised: #ffffff;
  --paper-sunk:   #eef3ea;
  --ink:          #1f2d26;
  --ink-strong:   #0e1a14;
  --ink-muted:    #5a6a60;

  /* Two colours carry the site rather than one. Green is the club's own,
     used for structure and identity. Blue does the work the reader acts on:
     links, controls, anything live. Splitting them stops every page reading
     as one wash of the same hue. */
  --green-deep:   #17553a;
  --green:        #2a8055;   /* brighter and more saturated than the old #2f6042 */
  --green-bright: #35a06a;
  --lichen:       #86a891;
  --wash:         #dff0e4;

  --blue-deep:    #10456f;
  --blue:         #1f6fb2;   /* links, focus, interactive controls */
  --blue-bright:  #3c92d8;
  --blue-wash:    #dcebf8;

  --rule:         #d2ded0;
  --rule-strong:  #9db3a4;

  /* Natural pigments. Each names an article type, so colour carries
     information rather than decorating. Lifted a step for legibility. */
  --ochre:        #a97d15;   /* yellow earth  */
  --madder:       #b04a2f;   /* root red      */
  --indigo:       #2f5f96;   /* woad blue     */
  --verdigris:    #12867a;   /* copper green  */
  --slate-violet: #6553a0;   /* iron violet   */
  --plum:         #9c3f6b;   /* logwood       */

  /* Figure palette. Figures are free of the site scheme on purpose, and a
     chart should pick the set that suits its data. These are checked for
     deuteranopia and protanopia separation and they hold in both themes. */
  --fig-1: #1f6fb2;   /* blue      */
  --fig-2: #d4763a;   /* orange    */
  --fig-3: #2a8055;   /* green     */
  --fig-4: #9c3f6b;   /* plum      */
  --fig-5: #b8a021;   /* mustard   */
  --fig-6: #5b56a8;   /* violet    */
  --fig-7: #12867a;   /* teal      */
  --fig-8: #8c5a3c;   /* umber     */

  /* kept for per-article skins that reference the old token names */
  --red-pencil:   #2a8055;
  --teal:         #1f6fb2;
  --red-soft:     #dff0e4;
  --teal-soft:    #dcebf8;

  --font-display: "Young Serif", Georgia, serif;
  --font-body:    "Faustina", Georgia, serif;
  --font-mono:    "Azeret Mono", Consolas, monospace;

  /* ---- one type ladder, eight steps ---- */
  --t-micro: 0.6875rem;                    /* 11px */
  --t-label: 0.75rem;                      /* 12px  smallest label permitted */
  --t-small: 0.875rem;                     /* 14px  captions, notes, apparatus */
  --t-body:  1.125rem;                     /* 18px  site body */
  --t-read:  1.1875rem;                    /* 19px  article prose, and h3 */
  --t-h2:    1.5rem;                       /* 24px  1.26x prose */
  --t-h1:    clamp(1.75rem, 4vw, 2.4rem);  /* 28 -> 38.4px */
  --t-hero:  clamp(2.2rem, 5vw, 3.4rem);   /* 35.2 -> 54.4px, 1.96x / 3.02x body */

  /* ---- three leadings, tightening as type grows ---- */
  --lead-tight: 1.1;
  --lead-snug:  1.3;
  --lead-prose: 1.55;

  /* ---- two tracking values, both for uppercase only ---- */
  --track-label:   0.12em;
  --track-eyebrow: 0.2em;

  --max-w: 1120px;
  --article-w: 43rem;   /* 688px box - 40px padding = 648px of text, ~65 characters */
}

:root[data-theme="dark"] {
  --paper:        #101813;
  --paper-raised: #17231c;
  --paper-sunk:   #0b120e;
  --ink:          #d6e4da;
  --ink-strong:   #f0f7f2;
  --ink-muted:    #8fa396;

  --green-deep:   #7fd4a2;
  --green:        #5ec288;
  --green-bright: #86e0ab;
  --lichen:       #6a8574;
  --wash:         #1b2e22;

  --blue-deep:    #8ec7f2;
  --blue:         #6fb3e8;
  --blue-bright:  #9bd0f7;
  --blue-wash:    #14293a;

  --rule:         #2b3f33;
  --rule-strong:  #48604f;

  --ochre:        #e0bc55;
  --madder:       #ef8f6d;
  --indigo:       #83b3e6;
  --verdigris:    #55c8ba;
  --slate-violet: #a99ae4;
  --plum:         #e08ab2;

  --fig-1: #6fb3e8;
  --fig-2: #f0955c;
  --fig-3: #5ec288;
  --fig-4: #e08ab2;
  --fig-5: #dcc44a;
  --fig-6: #9b95e0;
  --fig-7: #55c8ba;
  --fig-8: #c79068;

  --red-pencil:   #5ec288;
  --teal:         #6fb3e8;
  --red-soft:     #1b2e22;
  --teal-soft:    #14293a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lead-prose);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  font-weight: 700;
  line-height: var(--lead-snug);
}

/* the accent lives in the underline; the word stays the colour of the text */
a {
  color: inherit;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

mark { background: var(--wash); color: inherit; padding: 0 0.12em; }

.mono { font-family: var(--font-mono); font-variant-numeric: lining-nums tabular-nums; }

/* the brightest value on the sheet belongs to focus and nowhere else */
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }

/* ---------- specimen label header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule-strong);
}

.masthead-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  padding: 0 1.25rem;
}

.masthead .brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.7rem 1.4rem 0.7rem 0;
  text-decoration: none;
  color: var(--ink-strong);
}

.brand .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  line-height: var(--lead-tight);
}

.brand .brand-sub {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}

.masthead nav {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  gap: 0.2rem;
}

.masthead nav a {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.masthead nav a:hover { color: var(--blue); }

.masthead nav a[aria-current="page"] {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}

.theme-toggle {
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
  padding: 0 0.6rem;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--blue); }

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

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }

/* sections separate by space alone: 5.5rem above against a 1.55em paragraph
   gap is Emergence's 3:1 ratio. No rule is drawn at a boundary. */
.section { padding: 5.5rem 0 0; }
.section:first-of-type { padding-top: 3.5rem; }

.section-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.7rem;
}

.section h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 400;
  line-height: var(--lead-tight);
  margin: 0 0 1.6rem;
}

/* ---------- opening sheet ---------- */

.hero { padding: 4.5rem 0 3rem; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3.5rem;
  align-items: start;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lead-tight);
  margin: 0.5rem 0 1.3rem;
  color: var(--ink-strong);
}

/* one treatment, not five: the accent is the rule, the word stays ink */
.hero h1 .underlined {
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}

.hero .lede {
  font-size: var(--t-read);
  max-width: 44ch;
  margin: 0 0 2rem;
  color: var(--ink);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-decoration: none;
  padding: 0.72rem 1.35rem;
  border: 1px solid var(--green);
  color: var(--green-deep);
  background: transparent;
}
.btn:hover { background: var(--wash); color: var(--green-deep); }

.btn.primary { background: var(--green); border-color: var(--green); color: var(--paper-raised); }
:root[data-theme="dark"] .btn.primary { color: #10160f; }
.btn.primary:hover { background: var(--green-deep); color: var(--paper-raised); }
:root[data-theme="dark"] .btn.primary:hover { color: #10160f; }

.log-line {
  margin-top: 2.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-muted);
}
.log-line b { color: var(--ink); font-weight: 400; }

/* ---------- mounted specimen card (weekly paper) ---------- */

.index-card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 1.7rem 1.6rem 1.2rem;
}

/* paper mounting straps, flat colour */
.index-card::before,
.index-card::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 15px;
  background: var(--wash);
  border: 1px solid var(--rule);
}
.index-card::before { top: -8px; left: 26px; }
.index-card::after  { top: -8px; right: 26px; }

.index-card .card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
  margin: 0 0 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.index-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-read);
  line-height: var(--lead-snug);
  margin: 0 0 0.6rem;
}

.index-card .card-citation {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: var(--lead-snug);
  color: var(--ink-muted);
  margin: 0 0 0.9rem;
}

.index-card .card-why { font-size: var(--t-body); margin: 0 0 1.2rem; }

.index-card .card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
}

.index-card .card-foot a { color: inherit; }

.week-dots { display: flex; gap: 6px; }
.week-dots span {
  width: 7px;
  height: 7px;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
}
.week-dots span:hover { border-color: var(--blue); }
.week-dots span.active { background: var(--green); border-color: var(--green); }

/* ---------- mounted photographs ---------- */

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.8rem;
}

.photo-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--lichen);
}

/* the mounting straps belong to the one object that is genuinely mounted,
   the weekly-paper card. An empty slot is an empty slot. */

.photo-slot figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
  padding: 0 1rem;
  text-align: center;
}

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

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.6rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 1.4rem 1.45rem 1.1rem;
}

.article-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
  margin-bottom: 0.85rem;
}

.badge {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--rule-strong);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* two states, not five flavours: work the club did itself, and everything
   else. Five greens at 10px separated nothing a reader could name. */
.badge.type-research { color: var(--green-deep); border-color: var(--green); }

.article-card h3 {
  font-family: var(--font-display);
  font-size: var(--t-read);
  font-weight: 400;
  line-height: var(--lead-snug);
  margin: 0 0 0.6rem;
}
.article-card h3 a { color: var(--ink-strong); text-decoration: none; }
.article-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--blue); }

.article-card .card-abstract {
  font-size: var(--t-small);
  margin: 0 0 1rem;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card .card-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
}

.card-foot .tex-link { color: inherit; }

/* ---------- filters ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}

.filter-bar .chip {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.filter-bar .chip:hover { color: var(--blue); border-color: var(--blue); }
.filter-bar .chip.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper-raised);
}
:root[data-theme="dark"] .filter-bar .chip.active { color: #10160f; }

.search-input {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  min-width: 210px;
}
.search-input::placeholder { color: var(--lichen); }

/* ---------- roster ---------- */

.role-section { margin-bottom: 2.8rem; }

.role-section h3 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.5rem;
  margin: 0 0 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.role-section h3 .count { color: var(--lichen); }

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}

.member-card {
  background: var(--paper-raised);
  padding: 0.85rem 1rem;
}

.member-card .m-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  line-height: var(--lead-snug);
  color: var(--ink-strong);
}

.member-card .m-role {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
  margin-top: 3px;
}

.member-card .m-focus {
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 5px;
}

.member-card.officer { box-shadow: inset 3px 0 0 var(--green); }

/* ---------- article pages ---------- */

.article-page {
  max-width: var(--article-w);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4.5rem;
  counter-reset: sec;
  font-size: var(--t-read);            /* 19px, RBGE sets its whole site at 19 */
  line-height: var(--lead-prose);      /* 29.45px */
}

/* the paragraph gap is exactly one line, so the column never loses its
   baseline. Emergence sets 32px leading against a 32px paragraph margin. */
.article-page p { margin: 1.55em 0; }

/* apparatus keeps its own tighter spacing */
.article-page header p,
.article-page aside p,
.article-page figcaption p,
.article-page li p,
.article-page td p,
.abstract-block p { margin: 0.5em 0; }

.article-header {
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1.8rem;
  margin-bottom: 2.4rem;
}

.article-header .issue-line {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-muted);
  margin: 0 0 1rem;
}

.article-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lead-tight);
  margin: 0 0 1rem;
}

.article-header .authors {
  font-family: var(--font-body);
  font-size: var(--t-body);
  margin: 0 0 0.5rem;
}

.article-header .affil {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: var(--lead-prose);
  color: var(--ink-muted);
  margin: 0;
}

.abstract-block {
  background: var(--wash);
  border-left: 2px solid var(--rule-strong);
  padding: 1.2rem 1.4rem;
  margin: 0 0 2.4rem;
  font-size: var(--t-body);
}

.abstract-block .abs-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

/* 5.5rem above against a 1.55em paragraph gap is 3:1 -- the whole section
   system, with no rule drawn at any boundary. */
.article-page h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lead-snug);
  margin: 3.4rem 0 1.1rem;
  counter-increment: sec;
}

.article-page h2::before {
  content: counter(sec) ".";
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  color: var(--ink-muted);
  margin-right: 0.6rem;
  vertical-align: 0.18em;
}

/* h3 sits at the size of the prose and is told apart by weight and space */
.article-page h3 {
  font-size: var(--t-read);
  font-weight: 700;
  line-height: var(--lead-snug);
  margin: 2.6rem 0 0.6rem;
}

/* the figure sits on the page ground: no frame, no panel, no padding */
.article-page figure { margin: 2.4rem 0; }

.article-page figure svg,
.article-page figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* escape hatch: one class widens a chart past the measure */
.article-page figure.wide { width: min(92vw, 1040px); margin-inline: calc(50% - min(46vw, 520px)); }

/* caption: 14px on a 24px line, bound to the image by space alone */
.article-page figcaption {
  font-size: var(--t-small);
  line-height: 1.7142857143;
  color: var(--ink-muted);
  margin-top: 0.7rem;
}
.article-page figcaption b { color: var(--ink); }

.article-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 2.4rem 0;
}
.article-page th, .article-page td {
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0.7rem;
  text-align: left;
}
.article-page th {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-strong);
}

.table-scroll { overflow-x: auto; }

.margin-note {
  float: right;
  clear: right;
  width: 195px;
  margin: 0.3rem -225px 1rem 1.4rem;
  font-size: var(--t-small);
  line-height: var(--lead-prose);
  color: var(--ink-muted);
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
}

/* 688px column + two 225px rails needs 1138px, so the note is actually in
   the margin on a 1366px laptop rather than only above 1480px */
@media (max-width: 1180px) {
  .margin-note {
    float: none;
    width: auto;
    margin: 1.4rem 0;
    padding: 0.7rem 1rem;
    background: var(--wash);
    border-top: none;
    border-left: 2px solid var(--rule-strong);
  }
}

.refs { font-size: var(--t-small); }
.refs ol { padding-left: 1.5rem; }
.refs li { margin-bottom: 0.6rem; line-height: var(--lead-prose); }

.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.article-nav a { color: inherit; text-decoration: none; }
.article-nav a:hover { text-decoration: underline; text-decoration-color: var(--blue); }

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--green);
  z-index: 100;
}

blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.3rem;
  border-left: 2px solid var(--lichen);
  font-style: italic;
  color: var(--ink-muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--wash);
  padding: 0.1em 0.35em;
}

pre {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: var(--t-small);
}
pre code { background: none; padding: 0; }

/* ---------- interactive models ---------- */

.sim-shell {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 1.5rem;
  margin: 2.2rem 0;
}

.sim-stage {
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.sim-stage canvas, .sim-stage svg { display: block; width: 100%; height: auto; }

.sim-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.sim-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-muted);
}
.sim-controls label output { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }

.sim-controls input[type="range"] { accent-color: var(--blue); width: 100%; }

.sim-controls select,
.sim-controls input[type="number"],
.sim-controls input[type="text"] {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}

.sim-controls input[type="checkbox"] { accent-color: var(--blue); }

.sim-btn {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  padding: 0.55rem 1rem;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green-deep);
  cursor: pointer;
}
.sim-btn:hover { background: var(--wash); }
.sim-btn.primary { background: var(--green); border-color: var(--green); color: var(--paper-raised); }
:root[data-theme="dark"] .sim-btn.primary { color: #10160f; }

.sim-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-muted);
}
.sim-readout b { color: var(--ink); font-weight: 400; }

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

footer.colophon {
  margin-top: 4.5rem;
  border-top: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}

.colophon-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.8rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: var(--lead-prose);
  color: var(--ink-muted);
}

.colophon-inner b {
  display: block;
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.colophon-inner a { color: inherit; text-decoration: none; }
.colophon-inner a:hover { text-decoration: underline; text-decoration-color: var(--blue); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .masthead-inner { flex-wrap: wrap; }
  .masthead .brand { padding-right: 0; }
  .masthead nav { margin-left: 0; width: 100%; border-top: 1px solid var(--rule); }
  .masthead nav a { flex: 1; justify-content: center; padding: 0.65rem 0.3rem; font-size: var(--t-micro); }
  .member-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .section { padding-top: 4rem; }
  .article-page h2 { margin-top: 2.6rem; }
}

/* no scroll-reveal: nothing in the reference set animates content into view.
   .reveal / .reveal.in are left as inert hooks for the existing markup. */

.empty-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-muted);
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}

/* ---------- issue contents ---------- */

.issue-count-line {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 2.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-strong);
}

.issue-contents { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.issue-entry {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1.4rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.issue-entry .entry-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--rule-strong);
  text-align: right;
  padding-top: 0.15rem;
}

.issue-entry:hover .entry-num { color: var(--green); }

.entry-kind {
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.entry-area {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.issue-entry h3 {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1.22;
  margin: 0 0 0.55rem;
}
.issue-entry h3 a { color: var(--ink-strong); text-decoration: none; }
.issue-entry h3 a:hover { color: var(--green-deep); text-decoration: underline; }

.entry-abstract { margin: 0 0 0.7rem; font-size: 0.97rem; max-width: 64ch; }

.entry-links {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.entry-links a { color: var(--blue); text-decoration: none; }
.entry-links a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .issue-entry { grid-template-columns: 1fr; gap: 0.4rem; }
  .issue-entry .entry-num { text-align: left; font-size: 1.3rem; }
}

/* ==========================================================================
   Standing-page blocks: about, roster explanation.
   Colours come from the themed tokens at the top of this file, so every rule
   below resolves in light and dark. Where a value could not be a token, the
   dark counterpart is written out.
   ========================================================================== */

/* ---------- running prose on a listing page ---------- */

.page-prose { max-width: 64ch; color: var(--ink); }
.page-prose p { margin: 0 0 1.2rem; }
.page-prose p:last-child { margin-bottom: 0; }
.page-prose b { color: var(--ink-strong); font-weight: 700; }
.page-prose a { color: inherit; }

.page-prose ul { margin: 0 0 1.2rem; padding-left: 1.35rem; }
.page-prose li { margin-bottom: 0.6rem; }
.page-prose li::marker { color: var(--lichen); }

/* ---------- meeting run sheet ---------- */

.runsheet {
  border-top: 1px solid var(--rule-strong);
  margin: 0 0 1.8rem;
  max-width: 60rem;
}

.runsheet-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}

.runsheet-row .clock {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--green-deep);
  padding-left: 0.4rem;
}
:root[data-theme="dark"] .runsheet-row .clock { color: var(--green); }

.runsheet-row h3 {
  font-family: var(--font-display);
  font-size: var(--t-read);
  font-weight: 400;
  line-height: var(--lead-snug);
  margin: 0 0 0.3rem;
  color: var(--ink-strong);
}

.runsheet-row p {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink);
  max-width: 60ch;
}

@media (max-width: 620px) {
  .runsheet-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .runsheet-row .clock { padding-left: 0; }
}

/* ---------- labelled list: first month, standing faults ---------- */

.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 64ch;
  border-top: 1px solid var(--rule-strong);
}

.spec-list li {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink);
}

.spec-list b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.4rem;
}
:root[data-theme="dark"] .spec-list b { color: var(--green); }

.spec-list a { color: inherit; }

/* ---------- card body that is read rather than previewed ---------- */

/* .card-abstract clamps to four lines because it previews an article.
   .card-note is the same slot used for text that is the whole point. */
.article-card .card-note {
  font-size: var(--t-small);
  margin: 0 0 1rem;
  color: var(--ink);
}


/* ---------- overflow guards ---------- */

.article-page { overflow-wrap: break-word; }

.refs li, .article-header .affil, .card-citation, .entry-links {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-page pre,
.article-page .table-scroll { max-width: 100%; }

.article-page figure svg,
.sim-stage svg,
.sim-stage canvas { max-width: 100%; height: auto; }

/* a figure caption should never be wider than the figure it describes */
.article-page figcaption { max-width: 100%; }

/* katex sets its own display width and can run wide on a narrow screen */
.article-page .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.3rem;
}

/* ==========================================================================
   Responsive coverage

   Tested shapes: 1920 desktop, 1366 laptop, 1180 laptop with a sidebar,
   1024 iPad landscape, 834 iPad portrait, 768 half a laptop screen,
   540 a narrow split pane, 414 and 390 phones, 320 the smallest phone
   still in use. The side gutter never drops below 16px and nothing
   scrolls sideways except a table, a figure or a code block, each in
   its own scroller.
   ========================================================================== */

/* iPad landscape and small laptops */
@media (max-width: 1024px) {
  .article-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .colophon-inner { gap: 1.4rem; }
}

/* iPad portrait, and a browser taking half a desktop screen */
@media (max-width: 834px) {
  .wrap, .article-page { padding-left: 1.25rem; padding-right: 1.25rem; }
  .article-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .photo-wall { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.4rem; }
  .sim-shell { padding: 1.1rem; }
  .sim-controls { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem 1.1rem; }
}

/* narrow split panes and large phones in landscape */
@media (max-width: 680px) {
  .article-grid { grid-template-columns: 1fr; }
  .photo-wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .filter-bar { gap: 0.4rem; }
  .search-input { min-width: 0; flex: 1 1 100%; }
  .colophon-inner { grid-template-columns: 1fr; gap: 1.3rem; }
  .article-nav { flex-direction: column; gap: 0.6rem; }
  .article-page { font-size: 1.0625rem; }          /* 17px, easier at arm's length */
  .article-page h2 { margin-top: 2.4rem; }
}

/* phones */
@media (max-width: 480px) {
  .wrap, .article-page { padding-left: 1rem; padding-right: 1rem; }
  .masthead .brand { padding: 0.55rem 0; }
  .brand .brand-name { font-size: 0.95rem; }
  .masthead nav a { padding: 0.6rem 0.25rem; letter-spacing: 0.06em; }
  .hero { padding: 2.5rem 0 2rem; }
  .section { padding: 2.6rem 0 1.8rem; }
  .photo-wall { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .member-grid { grid-template-columns: 1fr 1fr; }
  .sim-controls { grid-template-columns: 1fr; }
  .sim-readout { gap: 0.4rem 1.2rem; font-size: var(--t-label); }
  .index-card { padding: 1.4rem 1.1rem 1.1rem; }
  .log-line { gap: 0.35rem 1.4rem; }
  .article-page { padding-top: 2.2rem; padding-bottom: 3rem; }
}

/* the smallest phones still in circulation */
@media (max-width: 380px) {
  .photo-wall, .member-grid { grid-template-columns: 1fr; }
  .brand .brand-sub { display: none; }
  .masthead nav a { font-size: 0.62rem; padding: 0.55rem 0.15rem; }
  .entry-num { font-size: 1.1rem; }
}

/* a very short window, for example a phone in landscape */
@media (max-height: 520px) and (orientation: landscape) {
  .masthead { position: static; }
  .hero { padding: 1.8rem 0 1.4rem; }
}

/* pointer-coarse devices need a bigger hit area than a mouse does */
@media (pointer: coarse) {
  .masthead nav a { min-height: 44px; }
  .filter-bar .chip { min-height: 40px; }
  .sim-btn { min-height: 44px; }
  .week-dots span { width: 12px; height: 12px; }
  .sim-controls input[type="range"] { height: 28px; }
}

/* print, since a club journal gets printed */
@media print {
  .masthead, .colophon, .progress-bar, .filter-bar, .sim-controls { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .article-page { max-width: none; padding: 0; }
  .article-page h2 { margin-top: 1.4rem; page-break-after: avoid; }
  figure, table, .issue-entry { page-break-inside: avoid; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="#"]::after, nav a::after { content: ""; }
}

.issue-teaser {
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: var(--lead-prose);
  color: var(--ink);
  margin: 0 0 1.6rem;
}