/* ====================================================================
   The Free Code Syndicate — stylesheet
   A page laid out like a memo: hard rules, numbered sections, flat
   colour, monospace throughout. Brutalist, not decorated.
   ==================================================================== */

/* ================================================================
   TOKENS
   Every colour in this stylesheet resolves through these variables.
   Adding a theme means adding one [data-theme] block — no other
   selector changes. The five non-colour tokens at the bottom are
   carried over from the previous stylesheet and still used.
   ================================================================ */
:root {
  color-scheme: light;

  /* The FCS brand system v1.0:
     FCS Yellow: #FCCE37
     Black:      #000000
     FCS Cream:  #FFF7E4
     FCS Red:    #D12D2D */
  --paper:        #FFF7E4;   /* FCS Cream - Primary light background */
  --paper-raised: #FFFFFF;
  --ink:          #000000;   /* Black - Primary text and structure */
  --ink-muted:    #555248;
  --ink-faint:    #6e6a5f;
  --rule:         #dcd6c5;
  --rule-strong:  #000000;

  --accent:       #fcce37;   /* FCS Yellow - Primary action / highlight fills */
  --accent-deep:  #f0972a;   /* the sun's orange edge */
  --accent-soft:  #fff0c2;   /* pale yellow, highlighter */
  --accent-ink:   #000000;   /* text on --accent */
  --accent-text:  #855700;   /* contrast text on cream (>5:1) */
  --accent-alert: #d12d2d;   /* FCS Red - Alert / emphasis */
  --focus:        #000000;

  /* Secondaries, used for event and group status indicators. */
  --cyan:         #00d6d6;
  --cyan-text:    #006b6b;
  --magenta:      #ff45d4;
  --live:         #d12d2d;   /* alert red (#D12D2D) */
  --live-soft:    #fde8e8;
  --done:         #5f6b52;
  --mark:         #ffe9ac;

  /* Slabs: inverted panels (nav, stamps, group cards, dispatch). */
  --slab:         #000000;
  --slab-ink:     #FFF7E4;
  --slab-accent:  #fcce37;
  /* Plate: mount behind logo artwork */
  --plate:        #FFF7E4;

  --radius: 0;

  --border-w: 3px;
  --shadow-off: 6px;
  --gap: clamp(1rem, 2vw, 1.75rem);
  --section-pad: clamp(2.5rem, 6vw, 5rem);
  --page-pad: clamp(1.25rem, 4vw, 3rem);

  /* Approved brand fonts */
  --font-mono: "Archivo Mono", "Latin Modern Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-code: "Latin Modern Mono", "Fira Code", "Archivo Mono", ui-monospace, monospace;
  --font-display: "Archivo", "Archivo Mono", "Arial Narrow", system-ui, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper:        #0f0e0b;
  --paper-raised: #181714;
  --ink:          #FFF7E4;
  --ink-muted:    #b3ad9f;
  --ink-faint:    #948f82;
  --rule:         #34312a;
  --rule-strong:  #FFF7E4;

  --accent:       #fcce37;
  --accent-deep:  #f0972a;
  --accent-soft:  #3a2f0d;
  --accent-ink:   #000000;
  --accent-text:  #fcce37;
  --accent-alert: #d12d2d;
  --focus:        #fcce37;

  --cyan:         #00d6d6;
  --cyan-text:    #3ee6e6;
  --magenta:      #ff45d4;
  --live:         #ff6fd8;
  --live-soft:    #3a1030;
  --done:         #9aa88a;
  --mark:         #4a3c10;

  --slab:         #161512;
  --slab-ink:     #FFF7E4;
  --slab-accent:  #fcce37;
  --plate:        #1c1b17;
}

/* ---------- Reset ---------- */
/* Components set their own display, which would otherwise beat the
   hidden attribute. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

code {
  font-family: var(--font-mono);
  background: var(--paper-raised);
  border: 1px solid var(--ink);
  padding: 0.05em 0.35em;
  font-size: 0.9em;
}

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Document header (RFC meta block) ---------- */
.doc-header {
  border-bottom: var(--border-w) solid var(--ink);
  padding: 0.85rem var(--page-pad);
  background: var(--paper);
}

.doc-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.75rem 2rem;
  font-size: 0.72rem;
}

.doc-meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.doc-meta-col--status {
  text-align: right;
}

.doc-meta-label {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.doc-meta-value {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-active {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-end;
  color: var(--ink);
}

.status-active::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  border: 1px solid var(--ink);
  border-radius: 50%;
}

/* ---------- Slabs ---------- */
/* Children only, so a slab's own accent border or shadow keeps the
   page accent while text inside it gets the readable one. */
.doc-nav > *,
.hero-stamp span,
.protocol-stamp,
.principle-index,
.group-card > *,
.dispatch > * {
  --accent-text: var(--slab-accent);
  --focus: var(--slab-accent);
  --cyan-text: #3ee6e6;
  --done: #9aa88a;
  --ink-faint: #a8a49a;
}

/* ---------- Sticky nav ---------- */
.doc-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--slab);
  color: var(--slab-ink);
  border-bottom: var(--border-w) solid var(--accent);
  padding: 0 var(--page-pad);
  height: 3.25rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav-brand-logo,
.admin-brand-logo {
  display: block;
  width: 1.55rem;
  height: 1.45rem;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-brand-sub {
  color: var(--accent-text);
  font-weight: 400;
}

.nav-links {
  display: flex;
  gap: clamp(0.7rem, 1.5vw, 1.35rem);
  height: 100%;
}

.nav-links a {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  font-size: clamp(0.68rem, 0.8vw, 0.8rem);
  letter-spacing: 0.02em;
  color: var(--slab-ink);
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-links a:hover {
  color: var(--accent-text);
}

.nav-links a.is-active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  position: relative;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  color: var(--slab-ink);
  cursor: pointer;
  padding: 0;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--slab-accent);
  outline-offset: 2px;
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(3rem, 7vw, 6rem) var(--page-pad) calc(var(--section-pad) * 0.75);
  max-width: 1200px;
  margin: 0 auto;
}

.hero-art {
  position: relative;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 18% 0 5% -7%;
  background: radial-gradient(circle at 40% 45%,
      var(--mark) 0%,
      var(--accent) 35%,
      transparent 72%);
  z-index: -1;
  opacity: 0.9;
}

.hero-lockup {
  border: var(--border-w) solid var(--ink);
  background: var(--plate);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  overflow: hidden;
  max-height: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 1rem;
}

.hero-lockup img {
  width: 100%;
  max-width: 440px;
  max-height: 380px;
  object-fit: contain;
  display: block;
  height: auto;
}

.hero-stamp {
  position: absolute;
  right: -0.65rem;
  top: 1.1rem;
  display: grid;
  gap: 0.25rem;
  rotate: -2deg;
}

.hero-stamp span {
  width: max-content;
  max-width: min(58vw, 330px);
  background: var(--slab);
  color: var(--accent-text);
  border: 2px solid var(--accent);
  padding: 0.25rem 0.45rem;
  font-size: clamp(0.58rem, 1.2vw, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
}

.kicker {
  margin-bottom: 0.8rem;
  color: var(--accent-text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.hero-text {
  min-width: 0;
}

.hero-text h1 {
  position: relative;
  max-width: 11ch;
}

/* One word set on a yellow block: the brand colour carrying the one
   idea the name is about. Black on yellow reads in both themes. */
.hero-text h1 .hl {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-text h1::after {
  content: "";
  display: block;
  width: min(100%, 8ch);
  height: var(--border-w);
  margin-top: 1rem;
  background: var(--ink);
  box-shadow: 0 8px 0 var(--accent);
}

.hero-sub {
  margin-top: 1.4rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.hero-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.55rem 0.9rem;
  border: var(--border-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.hero-actions a+a {
  background: var(--paper);
  color: var(--ink);
}

.hero-actions a:hover,
.hero-actions a:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.hero-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1.6rem 0 0;
  border: 1px solid var(--ink);
  max-width: 560px;
}

.hero-ledger div {
  padding: 0.65rem 0.75rem;
  border-right: 1px solid var(--ink);
  min-width: 0;
}

.hero-ledger div:last-child {
  border-right: 0;
}

.hero-ledger dt {
  margin: 0 0 0.2rem;
  color: var(--ink-muted);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.hero-ledger dd {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.hero-text h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-stretch: 118%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 1.1rem;
  max-width: 34ch;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* ---------- Rule (section divider) ---------- */
.rule {
  height: var(--border-w);
  background: var(--ink);
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Section shell ---------- */
.doc-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad) var(--page-pad);
  scroll-margin-top: 3.25rem;
}

.doc-section h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin-bottom: 1.25rem;
  overflow-wrap: anywhere;
}

.sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 3rem;
  height: 2.6rem;
  padding: 0 0.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.sec-intro {
  color: var(--ink-muted);
  max-width: 62ch;
  margin-bottom: 2rem;
  font-size: 0.92rem;
}

.sec-body p {
  max-width: 68ch;
  margin-bottom: 1rem;
}

.sec-body p:last-child {
  margin-bottom: 0;
}

.mission-line {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  max-width: 46ch !important;
  margin-bottom: 1.75rem !important;
}

.quote-line {
  max-width: 52ch;
  margin-top: 1.35rem;
  padding-left: 1rem;
  border-left: var(--border-w) solid var(--accent);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: calc(var(--gap) * 1.25);
}

.abstract-grid,
.lane-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 2rem;
}

.abstract-grid article,
.lane-card,
.principle-item {
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  padding: 1.15rem 1.2rem;
}

.abstract-grid h3,
.lane-card h3,
.principle-item h3,
.dispatch h3 {
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: 0.55rem;
}

.abstract-grid p,
.lane-card p,
.principle-item p,
.dispatch p {
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.mini-label {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: var(--accent-text);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- Icarus (Section 2) ---------- */
.icarus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.4fr);
  gap: calc(var(--gap) * 1.4);
  align-items: center;
}

.icarus-copy p:not(.sec-intro):not(.quote-line) {
  max-width: 68ch;
  margin-bottom: 1rem;
}

.icarus-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
  border: var(--border-w) solid var(--ink);
  background: var(--plate);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  overflow: hidden;
  padding: 1.5rem;
}

.icarus-mark img {
  width: min(85%, 260px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------- Protocol (Section 3) ---------- */
.protocol-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr);
  gap: calc(var(--gap) * 1.4);
  align-items: stretch;
}

.protocol-panel {
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  min-height: 100%;
  overflow: hidden;
}

.protocol-plate {
  position: relative;
  display: flex;
  min-height: 420px;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.2rem, 3vw, 2rem);
  background:
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    linear-gradient(0deg, var(--rule) 1px, transparent 1px),
    var(--paper-raised);
  background-size: 22px 22px;
}

.protocol-plate::before,
.protocol-plate::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid var(--ink);
  pointer-events: none;
}

.protocol-plate::after {
  inset: auto 1rem 1rem auto;
  width: 42%;
  height: 34%;
  background: var(--accent);
  mix-blend-mode: multiply;
}

.protocol-stamp {
  width: max-content;
  max-width: 100%;
  background: var(--slab);
  color: var(--accent-text);
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.protocol-plate p {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.protocol-plate pre {
  position: relative;
  z-index: 1;
  margin: 2rem 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
}

.principle-list {
  display: grid;
  gap: 0.9rem;
}

.principle-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.95rem 1rem;
}

.principle-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  background: var(--slab);
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---------- Repositories (Section 4) ---------- */
.repo-status {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.cursor {
  display: inline-block;
  animation: blink 1s steps(1) infinite;
  color: var(--accent-text);
  font-weight: 700;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Projects read as an index: one row per repository, columns that
   line up, and a row that inverts to the slab on hover. */
.repo-grid {
  border: var(--border-w) solid var(--rule-strong);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  background: var(--paper-raised);
}

.repo-head,
.repo-card {
  display: grid;
  grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 2.4fr) 6.5rem 7.5rem 3.5rem;
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 1.1rem;
}

.repo-head {
  border-bottom: var(--border-w) solid var(--rule-strong);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.repo-card {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.repo-card + .repo-card {
  border-top: 1px solid var(--rule);
}

.repo-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.repo-desc {
  color: var(--ink-muted);
}

.repo-lang,
.repo-updated,
.repo-stars {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.repo-stars {
  text-align: right;
}

.repo-card:hover,
.repo-card:focus-visible {
  background: var(--slab);
  color: var(--slab-ink);
  outline: none;
}

.repo-card:hover .repo-name,
.repo-card:focus-visible .repo-name {
  color: var(--slab-accent);
}

.repo-card:hover :is(.repo-desc, .repo-lang, .repo-updated, .repo-stars),
.repo-card:focus-visible :is(.repo-desc, .repo-lang, .repo-updated, .repo-stars) {
  color: var(--slab-ink);
}

@media (max-width: 760px) {
  .repo-head {
    display: none;
  }

  .repo-card {
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
  }

  .repo-desc {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .repo-updated {
    display: none;
  }
}

/* One marquee on the page: real recent pushes (Hack Club). */
.activity-ticker {
  display: flex;
  overflow: hidden;
  margin-bottom: var(--gap);
  border-block: var(--border-w) solid var(--rule-strong);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.8rem;
}

.ticker-track {
  display: flex;
  flex: 0 0 auto;
  gap: 2.5rem;
  margin: 0;
  padding: 0.55rem 1.25rem;
  list-style: none;
  white-space: nowrap;
  animation: fcs-ticker 38s linear infinite;
}

.ticker-track li::after {
  content: "/";
  margin-left: 2.5rem;
  opacity: 0.5;
}

.activity-ticker:hover .ticker-track,
.activity-ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

@keyframes fcs-ticker {
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .activity-ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
  .ticker-track[aria-hidden="true"] { display: none; }
}

/* ---------- Study groups (Section 5) ---------- */
.study-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--gap);
}

.group-card {
  background: var(--slab);
  color: var(--slab-ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--accent);
  padding: 1.25rem 1.35rem;
}

.group-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.group-card-top h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border: 1px solid currentColor;
  color: var(--accent-text);
}

.group-card p {
  font-size: 0.88rem;
  color: var(--slab-ink);
  margin-bottom: 1rem;
}

.group-card a {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.group-card a:hover {
  color: var(--slab-ink);
  border-color: var(--slab-ink);
}

.empty-note {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* ---------- Events (Section 6) ---------- */
.event-list {
  display: grid;
  gap: var(--gap);
}

.event-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) 1fr;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
}

.event-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  min-height: 100%;
  padding: 1.15rem 1.2rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-right: var(--border-w) solid var(--ink);
}

.event-date span {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
}

.event-date strong {
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  line-height: 1.1;
}

.event-main {
  padding: 1.15rem 1.25rem;
}

.event-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.event-card h3 {
  font-size: 1.08rem;
  line-height: 1.35;
}

.event-card p {
  max-width: 68ch;
  margin-bottom: 0.9rem;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.event-card a {
  display: inline-block;
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.event-card a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.tag-scheduled,
.tag-open {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--ink);
}

.tag-done {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper-raised);
}

/* ---------- Join cards ---------- */
/* Each room is a command you could type: prompt, destination, and a
   copy button. The whole row presses like a key. */
.join-grid {
  display: grid;
  gap: 0.9rem;
}

.join-card {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  grid-template-areas:
    "cmd url  copy"
    "cmd hint copy";
  gap: 0.2rem 1.25rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  background: var(--paper-raised);
  border: var(--border-w) solid var(--rule-strong);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.join-card:hover,
.join-card:focus-within {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--shadow-off) + 2px) calc(var(--shadow-off) + 2px) 0 var(--ink);
}

.join-command {
  grid-area: cmd;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.join-prompt {
  color: var(--accent-text);
}

.join-card:hover .join-prompt,
.join-card:focus-within .join-prompt {
  color: inherit;
}

.join-url {
  grid-area: url;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  color: inherit;
  text-decoration: none;
}

.join-url:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.join-label {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.05rem;
}

.join-address {
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.join-hint {
  grid-area: hint;
  margin: 0;
  font-size: 0.8rem;
  color: inherit;
  opacity: 0.8;
}

.join-copy {
  grid-area: copy;
  min-width: 5.5rem;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.join-copy:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.join-copy.is-done {
  background: var(--ink);
  color: var(--paper);
}

.join-copy:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .join-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "cmd  copy"
      "url  url"
      "hint hint";
  }
}

/* ---------- Contribution lanes (Section 7) ---------- */
.lane-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lane-card {
  min-height: 100%;
}

.lane-card:nth-child(even) {
  background: var(--paper-raised);
}

.dispatch {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) 1fr;
  gap: var(--gap);
  align-items: center;
  margin-top: calc(var(--gap) * 1.35);
  padding: 1.15rem 1.25rem;
  background: var(--slab);
  color: var(--slab-ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--accent);
}

.dispatch p {
  color: var(--slab-ink);
}

.dispatch .mini-label {
  color: var(--accent-text);
}

/* ---------- Join (Section 9) ---------- */
.join-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
  gap: calc(var(--gap) * 1.35);
  align-items: stretch;
}

.join-note {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  margin: 0;
  padding: 1.15rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper-raised);
  overflow: hidden;
}

.join-note img {
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 220px;
  max-width: none;
  opacity: 0.18;
}

.join-note p {
  position: relative;
  max-width: 24ch;
  font-size: 0.86rem;
  font-weight: 700;
}

/* ---------- Footer ---------- */
/* The footer is a night slab in both themes, so the sky under it
   (js/footer-sky.js) always sits on black. */
.doc-footer {
  --ink: var(--slab-ink);
  --ink-muted: #b3ad9f;
  --rule-strong: var(--slab-ink);
  --paper-raised: var(--slab);
  --accent-text: var(--slab-accent);
  --focus: var(--slab-accent);
  background: var(--slab);
  border-top: var(--border-w) solid var(--accent);
  padding: 1.5rem var(--page-pad) 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.footer-sky {
  display: block;
  width: calc(100% + 2 * var(--page-pad));
  height: clamp(240px, 30vw, 480px);
  margin: 1.5rem calc(-1 * var(--page-pad)) 0;
  touch-action: pan-y;
}

.doc-footer p {
  margin-bottom: 0.3rem;
}

.doc-footer p:last-of-type {
  margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .doc-meta {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.9rem;
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-lockup {
    max-height: 380px;
    padding: 1rem;
  }

  .hero-lockup img {
    min-height: auto;
    max-height: 280px;
    object-fit: contain;
    object-position: center;
  }

  .icarus-layout,
  .protocol-layout,
  .join-layout {
    grid-template-columns: 1fr;
  }

  .protocol-plate {
    min-height: 300px;
  }

  .abstract-grid,
  .lane-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .event-card {
    grid-template-columns: 1fr;
  }

  .event-date {
    border-right: 0;
    border-bottom: var(--border-w) solid var(--ink);
  }
}

@media (max-width: 1100px) {
  .nav-toggle {
    display: grid;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    height: auto;
    background: var(--slab);
    border-bottom: var(--border-w) solid var(--accent);
    padding: 0.5rem 0;
    gap: 0;
    display: none;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    height: auto;
    padding: 0.85rem var(--page-pad);
    border-bottom: 1px solid var(--ink-muted);
    border-left: 3px solid transparent;
  }

  .nav-links a.is-active {
    border-bottom: 1px solid var(--ink-muted);
    border-left-color: var(--accent);
  }
}

@media (max-width: 520px) {
  /* Only the five non-colour tokens are overridden here. Every colour
     resolves through the token block at the top, so this media query
     needs no [data-theme] counterpart. */
  :root {
    --border-w: 2px;
    --shadow-off: 4px;
    --gap: 0.85rem;
    --section-pad: 2rem;
    --page-pad: 0.9rem;
  }

  body {
    font-size: 15px;
  }

  .doc-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 0.65rem;
    column-gap: 0.8rem;
  }

  .doc-meta-col--status {
    text-align: left;
  }

  .doc-nav {
    height: 3rem;
  }

  .nav-brand-sub {
    display: none;
  }

  .hero {
    padding-top: 2rem;
  }

  .hero-lockup {
    max-height: 300px;
    box-shadow: none;
  }

  .hero-lockup img {
    min-height: 220px;
  }

  .hero-stamp {
    right: 0.5rem;
    top: 0.7rem;
  }

  .hero-stamp span {
    max-width: calc(100vw - 2.6rem);
  }

  .hero-actions a {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 2.75rem;
    text-align: center;
  }

  .hero-ledger,
  .dispatch {
    grid-template-columns: 1fr;
  }

  .hero-ledger div {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .hero-ledger div:last-child {
    border-bottom: 0;
  }

  .abstract-grid,
  .lane-grid {
    grid-template-columns: 1fr;
  }

  .abstract-grid article,
  .lane-card,
  .principle-item,
  .repo-card,
  .group-card,
  .event-card,
  .join-card,
  .protocol-panel,
  .icarus-mark,
  .dispatch {
    box-shadow: none;
  }

  .repo-card-top,
  .group-card-top,
  .event-card-top,
  .join-card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .repo-meta {
    flex-direction: column;
    gap: 0.25rem;
  }

  .principle-item {
    grid-template-columns: 1fr;
  }

  .protocol-plate {
    min-height: 260px;
  }

  .protocol-plate::before {
    inset: 0.65rem;
  }

  .protocol-plate pre {
    margin: 1.4rem 0;
  }

  .event-date strong {
    font-size: 1.35rem;
  }

  .join-note {
    min-height: 210px;
  }

  .join-note img {
    right: -5.5rem;
    top: -3.5rem;
  }
}

/* --------------------------------------------------------- theme toggle */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--border-w) solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.theme-toggle:hover { border-color: var(--rule-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle-icons {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}
/* --------------------------------------------------------- next session */
/* Built from the same parts as every other card on the page: a 3px ink
   rule and a hard offset shadow. No blur shadows, no pills. */
.next-band {
  position: relative;
  border: var(--border-w) solid var(--rule-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--accent);
  padding: 1.1rem 1.35rem 1.25rem;
  margin-bottom: calc(var(--gap) * 1.25);
}
.next-band h3 { margin: 0.4rem 0 0.25rem; font-size: clamp(1.1rem, 2.2vw, 1.4rem); text-wrap: balance; }
.next-band p { margin: 0; color: var(--ink-muted); font-size: 0.88rem; }
.next-group:not(:empty) { display: block; margin-bottom: 2px !important; }
.next-countdown {
  margin-top: 0.75rem !important;
  font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
  font-weight: 700;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.next-band[data-mode="live"] { box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--live); }
.next-band[data-mode="live"] .next-countdown { color: var(--live) !important; }
.next-band[data-mode="none"] { box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--rule); }

.live-dot {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--live);
  animation: fcs-pulse 1.4s ease-in-out infinite;
}
@keyframes fcs-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* --------------------------------------------------------- event lists */
.event-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap);
}
.event-filters { display: flex; flex-wrap: wrap; gap: 10px; }

/* Filter chips and the subscribe button share one pressable recipe:
   square, 2px rule, small hard shadow that collapses on press. */
.chip,
.btn-subscribe {
  border: 2px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.chip:hover,
.btn-subscribe:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.chip:active,
.btn-subscribe:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.chip.is-active { background: var(--accent); color: var(--accent-ink); }
.chip:focus-visible,
.btn-subscribe:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn-subscribe { background: var(--accent); color: var(--accent-ink); }
.btn-subscribe[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.event-card.is-live { border-color: var(--live); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--live); }

/* Status tags are rubber stamps: bold, 2px, coloured by currentColor. */
.tag { border: 2px solid currentColor; font-weight: 700; }
.tag-live { color: var(--live); }
.tag-upcoming { color: var(--cyan-text); }
.tag-finished { color: var(--ink-faint); }
.tag-active { color: var(--done); }
.tag-forming { color: var(--cyan-text); }
.tag-paused { color: var(--ink-faint); }
.tag-completed { color: var(--ink-faint); }

.event-links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.link-button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink-muted);
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { color: var(--ink); }
.link-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.past-events { margin-top: var(--gap); }
.past-events > summary { cursor: pointer; color: var(--ink-muted); font-size: 0.82rem; font-weight: 600; padding: 8px 0; }
.past-events > summary:hover { color: var(--ink); }
/* Past cards step back with a lighter rule, not opacity — opacity would
   drop the muted body text below AA. */
.past-events .event-card { border-color: var(--rule); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--rule); }

/* ------------------------------------------------------------ resources */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--gap);
}
.resource-card {
  display: flex;
  flex-direction: column;
  border: var(--border-w) solid var(--rule-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  padding: 1rem 1.1rem;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.resource-card:hover { transform: translate(-3px, -3px); box-shadow: calc(var(--shadow-off) + 3px) calc(var(--shadow-off) + 3px) 0 var(--accent); }
.resource-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.resource-card h3 { margin: 0.7rem 0 0.35rem; font-size: 0.95rem; text-wrap: balance; }
.resource-card p { margin: 0; color: var(--ink-muted); font-size: 0.82rem; }
.resource-card-top { display: flex; gap: 8px; align-items: center; }
.resource-ext { margin-left: auto; color: var(--ink-muted); }
.resource-kind, .resource-origin {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border: 2px solid currentColor;
  color: var(--ink-muted);
}
.resource-origin { color: var(--accent-text); }
.join-label { display: inline-flex; align-items: center; gap: 8px; }

/* ================================================================
   INTERACTION LAYER
   Each piece answers one question for the reader. Everything here
   stands still under prefers-reduced-motion.
   ================================================================ */

/* Where am I on the page? A reading bar along the nav's bottom rule,
   driven by scroll position with no JavaScript. Browsers without
   scroll-driven animations keep the plain yellow rule. */
@supports (animation-timeline: scroll()) {
  .doc-nav {
    border-bottom-color: color-mix(in srgb, var(--slab-accent) 25%, var(--slab));
  }

  .doc-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--border-w) * -1);
    height: var(--border-w);
    background: var(--slab-accent);
    transform-origin: 0 50%;
    animation: fcs-read-progress linear both;
    animation-timeline: scroll(root);
  }

  @keyframes fcs-read-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* Did the page just arrive? Section contents rise in once, in order. */
.will-reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

.will-reveal.is-revealed > * {
  opacity: 1;
  transform: none;
}

/* Did my click land? Pressable things sink into their own shadow. */
.hero-actions a:active,
.resource-card:active,
.join-card:active {
  transform: translate(var(--shadow-off), var(--shadow-off));
  box-shadow: 0 0 0 var(--ink);
  transition-duration: 0.05s;
}

/* When is the next session? The countdown reads as a live prompt. */
.next-countdown::before {
  content: "$ starts_in ";
  font-size: 0.45em;
  font-weight: 600;
  vertical-align: middle;
  color: var(--accent-text);
}

.next-band[data-mode="countdown"] .next-countdown::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-left: 0.15em;
  vertical-align: -0.08em;
  background: var(--accent);
  animation: fcs-caret 1.1s steps(1) infinite;
}

.next-band:not([data-mode="countdown"]) .next-countdown {
  display: none;
}

@keyframes fcs-caret {
  50% { opacity: 0; }
}

/* What happens each week? Mon to Sun, today in yellow (Launch Week). */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0 0 calc(var(--gap) * 1.25);
  padding: 0;
  list-style: none;
  border: var(--border-w) solid var(--rule-strong);
  background: var(--paper-raised);
}

.week-day {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 6.5rem;
  padding: 0.7rem 0.75rem;
  font-size: 0.78rem;
}

.week-day + .week-day {
  border-left: 1px solid var(--rule);
}

.week-day.is-empty {
  color: var(--ink-faint);
}

.week-day.is-today {
  background: var(--accent);
  color: var(--accent-ink);
}

.week-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.week-name em {
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.week-session {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}

.week-time {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .week-strip {
    grid-template-columns: 1fr;
  }

  .week-day {
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 0;
  }

  .week-day + .week-day {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .week-day.is-empty {
    display: none;
  }

  .week-name {
    min-width: 5rem;
  }
}

/* Who made this, and how? A printer's colophon (Stripe Press). */
.colophon a {
  color: inherit;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .next-band[data-mode="countdown"] .next-countdown::after {
    animation: none;
  }
}

/* ================================================================
   PIXEL ICONS
   pixelarticons, drawn on a 24px grid. They render at exactly 24px
   so every drawn pixel lands on a device pixel; scaled to 18 or 20
   they blur. One family, filled with currentColor, decorative only.
   ================================================================ */
.icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

/* Two icons share one slot and cross-fade: the leaving one shrinks and
   blurs out, the arriving one settles in. Motion is a hint; the icon
   itself is the state. */
.theme-toggle-icons .icon,
.nav-toggle .icon {
  grid-area: 1 / 1;
  transition:
    opacity 0.3s cubic-bezier(0.2, 0, 0, 1),
    transform 0.3s cubic-bezier(0.2, 0, 0, 1),
    filter 0.3s cubic-bezier(0.2, 0, 0, 1);
}

/* Light theme shows the moon (what you switch to), dark shows the sun. */
.theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon,
.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu {
  opacity: 0;
  transform: scale(0.25);
  filter: blur(4px);
}

[data-theme="dark"] .theme-toggle .icon-sun,
.nav-toggle[aria-expanded="true"] .icon-close {
  opacity: 1;
  transform: none;
  filter: none;
}

.theme-toggle:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.3rem;
}

.join-url .join-icon {
  align-self: center;
}

.join-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.join-copy .icon-check,
.join-copy.is-done .icon-copy {
  display: none;
}

.join-copy.is-done .icon-check {
  display: block;
}

.resource-card .resource-ext {
  margin-left: auto;
  color: var(--ink-muted);
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0 1.1rem;
  padding: 0;
  list-style: none;
}

.footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--rule-strong);
  color: var(--ink);
  background: var(--paper-raised);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
  outline: none;
}

.footer-socials a:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

/* ================================================================
   GLASS NAV
   Once the memo header has scrolled away, the sticky nav turns to
   tinted glass so the page reads through it. Blur lives only on this
   one sticky element. Solid when the reader asks for less
   transparency or the browser cannot blur.
   ================================================================ */
.doc-nav {
  transition: background-color 0.3s cubic-bezier(0.2, 0, 0, 1);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .doc-nav.is-glass {
    background: color-mix(in srgb, var(--slab) 84%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }

  /* The mobile menu drops out of the nav; it must stay opaque to be read. */
  .doc-nav.is-glass .nav-links.is-open {
    background: var(--slab);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .doc-nav.is-glass {
    background: var(--slab);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-icons .icon,
  .nav-toggle .icon,
  .doc-nav {
    transition: none;
  }
}

/* ================================================================
   LIVE MEMO HEADER
   ================================================================ */
.doc-meta-value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.doc-meta-value a:hover {
  text-decoration-color: currentColor;
}

a.status-active {
  text-decoration: none;
}

a.status-active:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.status-active:focus-visible,
.doc-meta-value a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Live: the dot turns magenta and pulses; the text says so too. */
.status-active[data-state="live"] {
  color: var(--live);
}

.status-active[data-state="live"]::before {
  background: var(--magenta);
  animation: fcs-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .status-active[data-state="live"]::before {
    animation: none;
  }
}

/* The online count gets a small green-free cue: the brand cyan dot. */
.meta-online::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--cyan);
  border: 1px solid var(--ink);
  vertical-align: 0.05em;
}

/* Five facts on a phone: two columns, status spans the last row. */
@media (max-width: 520px) {
  .doc-meta-col--status {
    grid-column: 1 / -1;
  }

  .doc-meta-col--status .status-active {
    align-self: flex-start;
  }
}

/* ================================================================
   CORE MEMBERS (Section 9)
   Leads: personnel-file cards. Everyone else: a roster whose rows
   expand into the same file, with a preview panel on desktop.
   ================================================================ */
.core-count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
  align-self: flex-end;
  margin-bottom: 0.35rem;
}

/* ---- portrait: pixels by default, the photo develops over them ---- */
.portrait {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--plate);
}

.portrait.portrait-sm { width: 24px; height: 24px; border-width: 1px; }
.portrait.portrait-lg { width: 96px; height: 96px; }
.portrait.portrait-xl { width: 192px; height: 192px; border-width: var(--border-w); }

.portrait img,
.portrait-initial {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-pixel {
  image-rendering: pixelated;
}

.portrait-initial {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2em;
}

/* The photo wipes down in eight hard steps, like a scanline. */
.portrait-photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.48s steps(8, end);
}

.portrait-photo:not([src]) {
  visibility: hidden;
}

.portrait.is-developing .portrait-photo {
  clip-path: inset(0 0 0 0);
}

/* The roster's 24px thumbnails stay pixel art: too small for a photo. */
.portrait-sm .portrait-photo {
  display: none;
}

/* ---- the personnel file (both faces of every card) ---- */
.core-name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.core-title {
  font-size: 0.85rem;
  font-weight: 600;
}

.core-handle {
  font-size: 0.8rem;
  color: var(--accent-text);
  text-decoration: none;
}

.core-handle:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stamp {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 2px solid var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
}

.stamp-lead { background: var(--accent); color: var(--accent-ink); }
.stamp-mentor { background: var(--cyan); color: #0a0a0a; }

.core-whois {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 0.8rem;
}

.core-whois-cmd {
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.core-whois-cmd span {
  color: var(--accent-text);
}

.core-whois dl {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.core-whois dl div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
}

.core-whois dt {
  color: var(--ink-muted);
}

.core-whois dd {
  margin: 0;
  font-weight: 600;
}

.core-bio {
  max-width: 62ch;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.core-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.core-links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.core-links a:hover,
.core-links a:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
  outline: none;
}

.core-links a:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.core-links .core-discord {
  min-height: 44px;
  min-width: 0;
  font-size: 0.75rem;
}

/* ---- groups: Leads, then Mentors ---- */
.core-group + .core-group {
  margin-top: calc(var(--gap) * 2.2);
}

.core-subhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--gap);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.core-subhead::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--rule-strong);
}

.core-filters {
  margin-bottom: calc(var(--gap) * 1.2);
}

/* ---- the roster: one card for leads and mentors alike ------------
   Every member gets the same personnel file; the stamp's colour is the
   only thing that says lead or mentor. Cards in a row stretch to the
   tallest, so nothing scrolls and the row lines up. */
.core-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: calc(var(--gap) * 1.5) calc(var(--gap) * 1.3);
  padding: 8px 6px 14px;
  perspective: 1800px;
}

.core-card {
  position: relative;
  isolation: isolate;
  transform: translateZ(var(--tz, 0px)) rotate(var(--tilt, 0deg)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s ease, filter 0.25s ease;
}

/* The face carries the border and paper, so the two coloured cards
   behind it (the pseudo-elements) can fan out underneath. */
.core-file {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  padding: 1.1rem 1.2rem 1.2rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper-raised);
}

.core-card::before,
.core-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--border-w) solid var(--ink);
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
}

.core-card::before { background: var(--cyan); transform: translate(6px, 6px); }
.core-card::after { z-index: -2; background: var(--magenta); transform: translate(6px, 6px); }

.core-file-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.core-file-id {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  min-width: 0;
}

.core-card .core-name { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.core-card .core-bio { font-size: 0.84rem; }
.core-card .core-links { margin-top: auto; }
.core-card .core-links a { width: 40px; height: 40px; }

.portrait.portrait-md { width: 80px; height: 80px; }

/* Hover or focus develops the photo over the pixel portrait. */
.core-card:hover .portrait-photo,
.core-card:focus-within .portrait-photo,
.core-card.is-developed .portrait-photo {
  clip-path: inset(0 0 0 0);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* The card you're on lifts, straightens toward the cursor (the tilt
     itself is set from main.js) and fans its colour cards out; the
     rest of the roster steps back, like a spotlight. */
  .core-card:hover,
  .core-card:focus-within {
    --tz: 24px;
    z-index: 2;
  }

  .core-card:hover::before,
  .core-card:focus-within::before { transform: translate(10px, 10px) rotate(2.5deg); }

  .core-card:hover::after,
  .core-card:focus-within::after { transform: translate(17px, 14px) rotate(-3deg); }

  .core-roster:has(.core-card:hover) .core-card:not(:hover) {
    opacity: 0.55;
    filter: saturate(0.3);
  }
}

@media (max-width: 620px) {
  /* Tilted cards on a narrow screen read as broken, not playful. */
  .core-card { transform: none; }
  .core-roster { padding-inline: 0; perspective: none; }
}

@media (prefers-reduced-motion: reduce) {
  .core-card,
  .core-card::before,
  .core-card::after { transition: none; }
}

/* ---- alumni ---- */
.core-alumni {
  margin-top: calc(var(--gap) * 1.5);
}

.core-alumni ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
}

.core-alumni li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.core-alumni a {
  color: var(--accent-text);
}

@media (prefers-reduced-motion: reduce) {
  .portrait-photo { transition: none; }
}

/* ------------------------------------------------------------------
 * Event subscriptions: the calendar menu and the email dialog.
 * ---------------------------------------------------------------- */
.event-subscribe { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.btn-subscribe-alt { background: var(--paper-raised); color: var(--ink); }

.cal-menu { position: relative; }
@media (max-width: 620px) {
  /* The menu opens under the button, left-aligned and never wider than the screen. */
  .cal-menu-list { right: auto; left: 0; width: min(300px, calc(100vw - 2 * var(--page-pad, 16px))); }
}
.cal-menu > summary { list-style: none; cursor: pointer; }
.cal-menu > summary::-webkit-details-marker { display: none; }
.cal-menu[open] > summary .icon:last-child { transform: rotate(180deg); }
.cal-menu-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: min(300px, 86vw);
  display: grid;
  border: 2px solid var(--rule-strong);
  background: var(--paper-raised);
  box-shadow: 4px 4px 0 var(--ink);
}
.cal-menu-list a,
.cal-menu-list button {
  display: block;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid var(--rule-strong);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cal-menu-list a:hover,
.cal-menu-list button:hover { background: var(--accent); color: var(--accent-ink); }
.cal-menu-list a:focus-visible,
.cal-menu-list button:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.cal-menu-list p { margin: 0; padding: 10px 14px; font-size: 0.75rem; color: var(--ink-muted); }

.notify-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 3px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.notify-dialog::backdrop { background: rgb(10 10 10 / 0.55); }
.notify-dialog form { display: grid; gap: 10px; padding: 24px; }
.notify-dialog h3 { margin: 0; }
.notify-what, .notify-fine { margin: 0; font-size: 0.85rem; color: var(--ink-muted); }
.notify-fine { font-size: 0.75rem; }
.notify-dialog label { font-size: 0.8rem; font-weight: 700; }
.notify-dialog input[type="email"] {
  padding: 10px 12px;
  border: 2px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.notify-dialog input[type="email"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notify-status { margin: 0; min-height: 1.2em; font-size: 0.82rem; font-weight: 600; }
.notify-status[data-tone="ok"] { color: var(--cyan-text); }
.notify-status[data-tone="error"] { color: var(--live); }
.notify-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }

/* subscribe.html: confirm and unsubscribe links from event emails. */
.sub-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.sub-card {
  width: min(480px, 100%);
  display: grid;
  gap: 14px;
  padding: 32px 28px;
  border: 3px solid var(--rule-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
}
.sub-mark { border: 2px solid var(--rule-strong); }
.sub-card h1 { margin: 0; font-size: 1.8rem; }
.sub-card p { margin: 0; }
.sub-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-actions a { text-decoration: none; }
.sub-foot { font-size: 0.8rem; color: var(--ink-muted); }

/* "Other" links show the site's own favicon in the icon slot. */
.icon-favicon { object-fit: contain; border-radius: 4px; }

/* Event and study-group links carry their site's icon. */
a.site-link { display: inline-flex; align-items: center; gap: 6px; }

/* A study group's own link, then the repos linked to it in the admin. */
.group-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }

/* Footer privacy line and the privacy page. */
.doc-footer .privacy-line { font-size: 0.8rem; }
.doc-footer .privacy-line a { color: var(--accent-text); }
.privacy { width: min(640px, 100%); }
.privacy h2 { margin: 12px 0 0; font-size: 1.05rem; }
.privacy ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; list-style: disc; }
.privacy a { color: var(--accent-text); }

/* Brand Typography: Latin Modern Mono for code snippets, RFC identifiers and technical metadata */
code, kbd, samp, pre, .protocol-stamp, .sec-num, [data-meta], .kicker, .hero-ledger {
  font-family: var(--font-code);
}

/* ==================================================================
 * Blog: the index and each post (tools/blog-build.mjs), and the
 * editor's preview. A Notion-style page: full-width cover, the icon
 * overlapping it, a large title, then the post in a readable sans.
 * ================================================================== */
.blog-page {
  --font-read: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --read-width: 720px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.blog-page main { flex: 1; }
.blog-nav {
  display: flex; align-items: center; gap: 20px;
  padding: 12px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.85rem;
}
.blog-nav a { color: var(--ink); text-decoration: none; }
.blog-nav a:hover { text-decoration: underline; }
.blog-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.blog-foot { padding: 32px; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }
.blog-foot a { color: var(--accent-text); }

.post-cover { height: clamp(180px, 30vh, 320px); overflow: hidden; background: var(--rule); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-page { width: min(var(--read-width), 100% - 48px); margin: 0 auto; padding: 48px 0 64px; }
.post.has-cover .post-page { padding-top: 0; }
.page-icon { font-size: 4.5rem; line-height: 1; width: 1.1em; height: 1.1em; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.post.has-cover .page-icon { margin-top: -0.55em; position: relative; }
.post.has-cover:not(.has-icon) .post-title { margin-top: 40px; }
.page-icon-emoji { width: 0.95em; height: 0.95em; }
img.emoji { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; }

/* Icon colours (Notion's palette), for pixel icons and the picker. */
:root {
  --icon-default: var(--ink); --icon-gray: #8b8a86; --icon-brown: #9f6b53; --icon-orange: #d9730d;
  --icon-yellow: #cb912f; --icon-green: #448361; --icon-blue: #337ea9; --icon-purple: #9065b0;
  --icon-pink: #c14c8a; --icon-red: #d44c47;
}
[data-theme="dark"] {
  --icon-gray: #9b9b9b; --icon-brown: #ba856f; --icon-orange: #c77d48; --icon-yellow: #ca9849;
  --icon-green: #529e72; --icon-blue: #5e87c9; --icon-purple: #9d68d3; --icon-pink: #d15796; --icon-red: #df5452;
}
.page-icon-svg { color: var(--ink); }
.icon-gray { color: var(--icon-gray); } .icon-brown { color: var(--icon-brown); } .icon-orange { color: var(--icon-orange); }
.icon-yellow { color: var(--icon-yellow); } .icon-green { color: var(--icon-green); } .icon-blue { color: var(--icon-blue); }
.icon-purple { color: var(--icon-purple); } .icon-pink { color: var(--icon-pink); } .icon-red { color: var(--icon-red); }
.page-icon-svg, .pixel-icon { fill: currentColor; }
.page-icon-svg { width: 0.85em; height: 0.85em; }
.page-icon-img { width: 1em; height: 1em; object-fit: cover; border-radius: 6px; }
.page-icon-sm { font-size: 1.6rem; margin: 0; }
.post-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.15; margin: 0 0 8px; overflow-wrap: anywhere; width: fit-content; max-width: 100%; }
.post-meta { margin: 0 0 28px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }

/* ---- the blog index (blog-pages.js indexPage) ---------------------------- */
.blog-index { width: min(1160px, 100% - 48px); margin: 0 auto; padding: 56px 0 72px; }
.blog-hero { margin-bottom: 36px; }
.blog-eyebrow {
  margin: 0 0 12px; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.blog-headline {
  margin: 0; max-width: 30ch; font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance;
}
.blog-headline span { display: block; color: var(--accent-text); }
.blog-section-label {
  margin: 56px 0 18px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.blog-empty {
  display: grid; justify-items: center; gap: 12px; padding: 56px 24px; text-align: center;
  border: var(--border-w) dashed var(--rule-strong); color: var(--ink-muted);
}
.blog-empty p { margin: 0; }
.blog-empty a { color: var(--accent-text); }

/* The home page's "From the blog" heading row: title left, "All posts" right. */
.sec-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.sec-more { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--ink); text-underline-offset: 4px; }
.sec-more:hover { color: var(--accent-text); }

/* ---- post cards (blog-pages.js postCardHTML): the blog index, the home
 * page and the admin's gallery. The title's link covers the whole card. */
.post-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.post-grid > li { display: flex; min-width: 0; }
.post-grid.is-compact { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.post-card {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
  border: var(--border-w) solid var(--rule-strong); background: var(--paper-raised); color: var(--ink);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-card:hover { box-shadow: calc(var(--shadow-off) + 3px) calc(var(--shadow-off) + 3px) 0 var(--accent); }
.post-card:has(.post-card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.post-card-link { color: inherit; text-decoration: none; outline: none; }
.post-card-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.post-card-cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; flex: none;
  border-bottom: var(--border-w) solid var(--rule-strong); background-color: var(--bg-gray);
}
.post-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
/* No cover: a tint from the post's address, dotted like the footer sky, with the icon large in it. */
.post-card-cover.is-blank {
  display: grid; place-items: center;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.6px);
  background-size: 14px 14px;
}
.post-card-glyph { display: flex; font-size: 4rem; line-height: 1; filter: drop-shadow(3px 3px 0 color-mix(in srgb, var(--ink) 18%, transparent)); }

/* The icon over the cover's lower edge, as on a Notion page. */
.post-card-icon {
  position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: -28px 0 0 16px; font-size: 1.9rem; line-height: 1;
  background: var(--paper-raised); border: 2px solid var(--rule-strong); box-shadow: 3px 3px 0 var(--ink);
}
.post-card-icon .page-icon-svg, .post-card-glyph .page-icon-svg { width: 0.9em; height: 0.9em; }
.post-card-icon img, .post-card-glyph img { width: 1em; height: 1em; }

.post-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; font-family: var(--font-read, inherit); }
.post-card.has-icon .post-card-body { padding-top: 10px; }
.post-card-title {
  margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; line-height: 1.25;
  text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.post-card-text {
  margin: 0; color: var(--ink-muted); font-size: 0.92rem; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.post-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 12px; font-size: 0.82rem;
}
.post-card-authors { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.post-card-authors > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-card-authors .avatar { width: 24px; height: 24px; font-size: 0.56rem; box-shadow: 0 0 0 2px var(--paper-raised); }
.post-card-more { color: var(--ink-muted); font-weight: 400; }
.post-card-meta { margin: 0; flex: none; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-muted); white-space: nowrap; }

/* Compact: older posts on the index. Icon, title, date. */
.post-card.is-compact { flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px; box-shadow: 4px 4px 0 var(--ink); }
.post-card.is-compact:hover { box-shadow: 6px 6px 0 var(--accent); }
.post-card.is-compact .post-card-icon { margin: 0; width: 40px; height: 40px; font-size: 1.4rem; box-shadow: none; }
.post-card.is-compact .post-card-body { padding: 0; gap: 6px; }
.post-card.is-compact .post-card-title { font-size: 1rem; }
.post-card.is-compact .post-card-meta { white-space: normal; }

/* A status over the cover (the admin's gallery). */
.post-card-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .post-card:hover { transform: translate(-3px, -3px); }
  .post-card:hover .post-card-cover img { transform: scale(1.03); }
}

/* The post body: shared by the public page and the editor. */
.prose { font-family: var(--font-read, ui-sans-serif, system-ui, sans-serif); font-size: 1.05rem; line-height: 1.7; display: flow-root; }
.prose > * { margin: 0 0 0.9em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-display); line-height: 1.25; margin: 1.6em 0 0.4em; scroll-margin-top: 16px; }
.prose h2 { font-size: 1.8rem; }
.prose h3 { font-size: 1.4rem; }
.prose h4 { font-size: 1.15rem; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* A link's site icon, sitting on the text's baseline like a letter (markdown.js linkIconHTML). */
/* The underline is drawn as a background so it runs under the icon too. */
.prose a.link, .nb-text a.link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.05em) / 100% 1px no-repeat;
}
.prose a.link:hover, .nb-text a.link:hover { background-size: 100% 2px; }
.link-lead { white-space: nowrap; }
.link-icon {
  display: inline-block; width: 1em; height: 1em; margin-right: 0.3em;
  vertical-align: -0.14em; border-radius: 3px; overflow: hidden; user-select: none;
}
.link-icon > img, .link-icon > svg { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit; }

/* Hover a link in a post: a screenshot of where it goes (js/link-preview.js). */
.link-preview {
  position: fixed; z-index: 90; width: 240px; padding: 4px; pointer-events: none;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 12px;
  box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.35);
  opacity: 0; transform: translateY(4px) scale(0.96); transition: opacity 0.1s, transform 0.1s;
}
.link-preview.is-open { opacity: 1; transform: none; transition-duration: 0.16s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.link-preview-shot { position: relative; aspect-ratio: 8 / 5; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.link-preview-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.2s; }
.link-preview-shot.is-loaded img { opacity: 1; }
.link-preview-shot span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; color: var(--ink-muted); }
.link-preview-shot.is-loaded span { display: none; }
.link-preview-host { margin: 0; padding: 6px 6px 2px; font: 500 0.7rem/1.3 ui-sans-serif, system-ui, sans-serif; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .link-preview, .link-preview.is-open { transition: none; transform: none; } }
.prose strong { font-weight: 700; }
.prose mark, .nb mark { background: var(--mark); color: inherit; padding: 0 2px; }
.prose code { font-family: "Fira Code", var(--font-code); font-size: 0.86em; padding: 0.1em 0.35em; border: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 4px; color: var(--accent-alert); }
.prose ul, .prose ol { padding-left: 1.6em; }
.prose ul { list-style: disc; }
.prose ul ul { list-style: circle; }
.prose ul ul ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose ol ol { list-style: lower-alpha; }
.prose li { margin: 0.2em 0; }
.prose li > ul, .prose li > ol { margin: 0.2em 0 0; }
.prose .todo-list { list-style: none; padding-left: 0.2em; }
.prose .todo-list .todo-list { padding-left: 1.6em; }
.prose .todo { display: block; }
.prose .todo input { width: 1em; height: 1em; margin: 0 0.4em 0 0; vertical-align: -0.12em; accent-color: var(--accent-deep); }
.prose .todo.is-done > span { text-decoration: line-through; color: var(--ink-muted); }
.prose blockquote { padding: 0 0 0 1em; border-left: 3px solid var(--ink); }
.prose blockquote p { margin: 0; }
/* The Medium attribution line, which markdown.js marks as it renders: a quote
   in the body's grammar, the sign-off under the article on the page. Italic and
   centred, with the marks drawn around the sentence - the opening lifted above
   the cap line, the closing dropped below the line the underline sits on and set
   a little clear of the link it follows, so the pair reads as a reversed
   quotation. The block is given room above it, so the
   sign-off stands clear of the article's last line. The marks are
   pseudo-elements, so they never enter the body, and they take the accent: the
   deep amber on cream, the brand yellow in the dark theme. */
.prose blockquote.attr-quote { padding: 0; border-left: 0; margin-top: 1.6em; font-style: italic; text-align: center; }
.prose blockquote.attr-quote p::before,
.prose blockquote.attr-quote p::after {
  font-style: normal; display: inline-block; line-height: 0; position: relative;
  font-size: 1.8em; color: var(--accent-text);
}
.prose blockquote.attr-quote p::before { content: "\201C"; top: -0.19em; margin-right: -0.02em; }
.prose blockquote.attr-quote p::after { content: "\201D"; top: 0.8em; margin-left: 0.08em; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6em 0; }
.prose img { max-width: 100%; height: auto; }
.prose .image { margin: 1.4em 0; }
.prose .image img { display: block; margin: 0 auto; border-radius: 4px; }
.prose .image figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--ink-muted); text-align: center; }
.prose .callout { display: flex; gap: 12px; padding: 16px 16px 16px 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 6px; }
.prose .callout-icon { font-size: 1.3em; line-height: 1.35; flex: none; }
.prose .callout-icon .emoji { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.blog-foot p { margin: 0 0 4px; }
.blog-credit { font-size: 0.72rem; opacity: 0.8; }
.prose .toggle summary { cursor: pointer; font-weight: 600; list-style: none; }
.prose .toggle summary::-webkit-details-marker { display: none; }
.prose .toggle summary::before { content: "▸"; display: inline-block; width: 1.2em; transition: transform 0.15s; }
.prose .toggle[open] > summary::before { transform: rotate(90deg); }
.prose .toggle-body { padding-left: 1.2em; margin-top: 0.4em; }
.prose .toggle-body > * { margin: 0 0 0.6em; }
.prose .code-block { margin: 1.2em 0; }
.prose .code-block figcaption { margin: 0 0 4px; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.prose pre { margin: 0; padding: 16px 18px; overflow-x: auto; background: color-mix(in srgb, var(--ink) 5%, var(--paper)); border: 1px solid var(--rule); border-radius: 6px; line-height: 1.55; }
.prose pre code { padding: 0; background: none; color: var(--ink); font-size: 0.88rem; border-radius: 0; }
.prose .math-block { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.prose .math .katex { font-size: 1.05em; }
.prose .video { position: relative; aspect-ratio: 16 / 9; }
.prose .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }
.prose .table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: color-mix(in srgb, var(--ink) 5%, transparent); font-weight: 600; }
.toc { display: grid; gap: 4px; padding: 4px 0 4px 2px; }
.toc a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule); cursor: pointer; }
.toc .toc-3 { padding-left: 1.2em; }
.toc .toc-4 { padding-left: 2.4em; }
.toc p { margin: 0; color: var(--ink-muted); }

/* highlight.js, in the site's colours. */
.hljs-comment, .hljs-quote { color: var(--ink-faint); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-meta .hljs-keyword { color: #b3247a; }
.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-addition { color: #2f7d32; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: #a34d00; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #1f5fbf; }
.hljs-type, .hljs-title.class_, .hljs-variable.language_ { color: #7a3fb8; }
.hljs-deletion { color: var(--accent-alert); }
.hljs-meta, .hljs-property, .hljs-attribute { color: var(--cyan-text); }
[data-theme="dark"] .hljs-keyword, [data-theme="dark"] .hljs-selector-tag, [data-theme="dark"] .hljs-built_in { color: #ff7ac6; }
[data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-attr, [data-theme="dark"] .hljs-addition { color: #9be38c; }
[data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-literal { color: #ffb067; }
[data-theme="dark"] .hljs-title, [data-theme="dark"] .hljs-title.function_, [data-theme="dark"] .hljs-section { color: #8ab8ff; }
[data-theme="dark"] .hljs-type, [data-theme="dark"] .hljs-title.class_ { color: #c9a2ff; }

/* Latin Modern Mono (GUST Font License, assets/fonts), for posts set in the
   editor's "Technical" font only. Its own family name keeps it out of the
   site's --font-mono / --font-code stacks, which fall back to Fira Code. */
@font-face { font-family: "FCS Technical"; src: url("../assets/fonts/lmmono10-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "FCS Technical"; src: url("../assets/fonts/lmmono10-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "FCS Technical"; src: url("../assets/fonts/lmmonolt10-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Page styles from the editor's "..." menu: font, small text, full width. */
.post.font-mono, .nb.font-mono { --font-read: "Archivo Mono", var(--font-mono); }
.post.font-technical, .nb.font-technical { --font-read: "FCS Technical", var(--font-code); }
.post.font-mono .post-title, .nb.font-mono .nb-title { font-family: "Archivo Mono", var(--font-mono); letter-spacing: -0.02em; }
.post.font-technical .post-title, .nb.font-technical .nb-title { font-family: "FCS Technical", var(--font-code); }
.post.is-small .prose { font-size: 0.92rem; }
.post.is-wide { --read-width: min(1200px, 100%); }

/* Colours (text and background), shared by the post and the editor. */
:root {
  --bg-gray: #f0efed; --bg-brown: #f4eeee; --bg-orange: #fbecdd; --bg-yellow: #fbf3db; --bg-green: #edf3ec;
  --bg-blue: #e7f3f8; --bg-purple: #f6f3f9; --bg-pink: #faf1f5; --bg-red: #fdebec;
}
[data-theme="dark"] {
  --bg-gray: #2f2f2f; --bg-brown: #4a3228; --bg-orange: #5c3b23; --bg-yellow: #564328; --bg-green: #243d30;
  --bg-blue: #143a4e; --bg-purple: #3c2d49; --bg-pink: #4e2c3c; --bg-red: #522e2a;
}
.c-gray { color: var(--icon-gray); } .c-brown { color: var(--icon-brown); } .c-orange { color: var(--icon-orange); }
.c-yellow { color: var(--icon-yellow); } .c-green { color: var(--icon-green); } .c-blue { color: var(--icon-blue); }
.c-purple { color: var(--icon-purple); } .c-pink { color: var(--icon-pink); } .c-red { color: var(--icon-red); }
.bg-gray { background: var(--bg-gray); } .bg-brown { background: var(--bg-brown); } .bg-orange { background: var(--bg-orange); }
.bg-yellow { background: var(--bg-yellow); } .bg-green { background: var(--bg-green); } .bg-blue { background: var(--bg-blue); }
.bg-purple { background: var(--bg-purple); } .bg-pink { background: var(--bg-pink); } .bg-red { background: var(--bg-red); }
span[class*="bg-"] { padding: 0 2px; border-radius: 3px; }
.prose .has-bg { padding: 4px 8px; border-radius: 4px; }
.align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; }
.prose u { text-underline-offset: 3px; }
.prose sup, .prose sub { font-size: 0.75em; line-height: 0; }

/* Columns, toggle headings, images, tables. */
.prose .columns { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 24px; margin: 1em 0; }
.prose .column > * { margin: 0 0 0.9em; }
.prose .column > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .prose .columns { grid-template-columns: 1fr; } }
.prose .toggle-heading { display: inline; margin: 0; }
.prose .toggle > summary:has(.toggle-heading)::before { font-size: 1.1em; }
.prose figure.image { max-width: 100%; }
.prose figure.image.align-center { margin-left: auto; margin-right: auto; }
.prose figure.image.align-right { margin-left: auto; margin-right: 0; }
.prose figure.image.align-left { margin-left: 0; margin-right: auto; }
.prose figure.image img { width: 100%; }

/* Click to zoom (js/image-zoom.js), as in Notion. */
.post .prose img:not(.emoji, .mention-avatar, a img, .mention img, .bookmark img, .link-icon img) { cursor: zoom-in; }
.image-zoom {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 32px; border: 0; background: transparent;
  display: grid; place-items: center; cursor: zoom-out; overflow: hidden;
}
.image-zoom::backdrop { background: rgb(15 15 15 / 0.85); animation: image-zoom-fade 280ms ease both; }
.image-zoom.is-closing::backdrop { animation: image-zoom-fade-out 280ms ease both; }
.image-zoom img {
  max-width: 100%; max-height: calc(100vh - 64px); width: auto; height: auto;
  object-fit: contain; border-radius: 4px; transform-origin: center;
}
@keyframes image-zoom-fade { from { opacity: 0; } }
@keyframes image-zoom-fade-out { to { opacity: 0; } }
.prose th.align-center, .prose td.align-center { text-align: center; }
.prose th.align-right, .prose td.align-right { text-align: right; }

/* Printing a post (the editor's Export > PDF): just the page. */
@media print {
  .blog-nav, .blog-foot, .nb-top, .nb-toolbar, .nb-pop { display: none !important; }
  .nb, .nb-preview { position: static !important; overflow: visible !important; }
  .nb-scroll:not(.nb-preview) { display: none !important; }
  .post-page { padding-top: 0; }
}

/* Garet, the brand guide's digital and social face (Spacetype free-font
   EULA: web embedding allowed; the font files may not be redistributed
   or modified). Book for text, Heavy for titles. */
@font-face { font-family: "Garet"; src: url("../assets/fonts/Garet-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Garet"; src: url("../assets/fonts/Garet-Heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
.post.font-garet, .nb.font-garet { --font-read: "Garet", ui-sans-serif, system-ui, sans-serif; }
.post.font-garet .post-title, .nb.font-garet .nb-title { font-family: "Garet", var(--font-display); font-weight: 800; }
.post.font-garet .prose h2, .post.font-garet .prose h3, .post.font-garet .prose h4,
.nb.font-garet .nb-block[data-type^="h"] .nb-text { font-family: "Garet", var(--font-display); font-weight: 800; }

/* Authors: round avatars (a photo or initials), overlapped in a group. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  font: 600 0.62rem/1 ui-sans-serif, system-ui, sans-serif; color: #fff; letter-spacing: 0.02em;
  background: var(--rule); box-shadow: 0 0 0 2px var(--paper);
}
.avatar-group { display: inline-flex; align-items: center; }
.avatar-group .avatar + .avatar { margin-left: -7px; }
.avatar-more { background: var(--rule); color: var(--ink-muted); font-size: 0.6rem; }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 28px; }
.post-byline .post-meta { margin: 0; }
.post-authors { font-size: 0.9rem; font-weight: 500; }
.post-authors a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }

/* ---- card <-> post page: cross-document view transitions ----------------
 * Each part of a card (cover, icon, title, summary, authors, date) has the
 * same view-transition-name as on the post page (blog-pages.js vt()), so it
 * travels to its place: "same thing, going deeper". Following Vercel's view
 * transitions guide:
 * - images morph (cover, icon, avatars), with a light blur mid-way;
 * - text never scales a snapshot (a small card title blown up to a heading
 *   ghosts): the old one hides and the new one travels at full sharpness;
 * - the rest of the page slides by depth, never just fades under a morph:
 *   into a post slides left ("forward"), back out slides right ("back").
 *   js/page-transitions.js names the direction;
 * - exit 150ms, enter 210ms after it, morph 400ms; none with reduced motion.
 * Browsers without support simply navigate. */
@view-transition { navigation: auto; }
:root { --vt-exit: 150ms; --vt-enter: 210ms; --vt-move: 400ms; --vt-ease: cubic-bezier(0.2, 0, 0, 1); }
@keyframes vt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-slide { from { translate: var(--vt-offset); } to { translate: 0; } }
@keyframes vt-via-blur { 30% { filter: blur(3px); } }

/* The page around the moving parts: slides by depth; a quick cross-fade otherwise. */
::view-transition-old(root) { animation: var(--vt-exit) ease-in both vt-fade reverse; }
::view-transition-new(root) { animation: var(--vt-enter) ease-out var(--vt-exit) both vt-fade; }
html:active-view-transition-type(nav-forward)::view-transition-old(root) {
  --vt-offset: -60px;
  animation: var(--vt-exit) ease-in both vt-fade reverse, var(--vt-move) ease-in-out both vt-slide reverse;
}
html:active-view-transition-type(nav-forward)::view-transition-new(root) {
  --vt-offset: 60px;
  animation: var(--vt-enter) ease-out var(--vt-exit) both vt-fade, var(--vt-move) ease-in-out both vt-slide;
}
html:active-view-transition-type(nav-back)::view-transition-old(root) {
  --vt-offset: 60px;
  animation: var(--vt-exit) ease-in both vt-fade reverse, var(--vt-move) ease-in-out both vt-slide reverse;
}
html:active-view-transition-type(nav-back)::view-transition-new(root) {
  --vt-offset: -60px;
  animation: var(--vt-enter) ease-out var(--vt-exit) both vt-fade, var(--vt-move) ease-in-out both vt-slide;
}

/* Images: one morph, cropped (a 16:9 card cover becomes a wide banner), never stretched. */
::view-transition-group(.vt-media) { animation-duration: var(--vt-move); animation-timing-function: var(--vt-ease); }
::view-transition-image-pair(.vt-media) { animation-name: vt-via-blur; animation-duration: var(--vt-move); }
::view-transition-old(.vt-media), ::view-transition-new(.vt-media) { width: 100%; height: 100%; object-fit: cover; }

/* Text: the new words travel into place, sharp; the old snapshot is hidden. */
::view-transition-group(.vt-text) { animation-duration: var(--vt-move); animation-timing-function: var(--vt-ease); }
::view-transition-old(.vt-text) { display: none; }
/* Opacity only, so it stays sharp; it settles in as the card fades away. */
::view-transition-new(.vt-text) { animation: var(--vt-enter) ease-out both vt-fade; object-fit: none; object-position: left top; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*),
  ::view-transition-image-pair(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

/* The post's own summary, under its title. */
.post-dek { margin: -2px 0 16px; max-width: 60ch; font-size: 1.15rem; line-height: 1.5; color: var(--ink-muted); }
.post-byline-people { display: inline-flex; align-items: center; gap: 10px; }

/* "Photo by <name> on Unsplash" on a cover (blog-pages.js coverCreditHTML). Kept
 * quiet: it shows when the cover first appears, fades after a few seconds,
 * and comes back while the cover is hovered (with the editor's cover tools)
 * or a credit link has keyboard focus. Touch screens cannot hover, so there
 * it stays, as Unsplash's guidelines ask for a visible credit. */
.post-cover, .nb-cover { position: relative; }
.cover-credit {
  position: absolute; top: 12px; right: 12px; margin: 0; padding: 3px 9px; border-radius: 6px;
  font: 500 0.72rem/1.5 ui-sans-serif, system-ui, sans-serif; color: #fff; background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(6px);
  /* Shown while the intro runs or the cover is hovered: each fades on its own. */
  opacity: max(var(--credit-intro), var(--credit-hover));
  animation: cover-credit-intro 4s ease forwards; transition: --credit-hover 0.25s ease;
}
@property --credit-intro { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --credit-hover { syntax: "<number>"; inherits: false; initial-value: 0; }
.cover-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@keyframes cover-credit-intro { 0% { --credit-intro: 0; } 8%, 75% { --credit-intro: 1; } 100% { --credit-intro: 0; } }
:is(.post-cover, .nb-cover):hover .cover-credit, .cover-credit:focus-within { --credit-hover: 1; }
@media (hover: none) { .cover-credit { --credit-hover: 1; } }

/* People and dates in text, as in Notion (markdown.js mentionHTML). A soft
 * pill, so they read as different from the words around them. */
.mention, .mention-date {
  display: inline-flex; align-items: center; gap: 0.3em; vertical-align: -0.12em; margin: 0 0.05em;
  padding: 0.05em 0.45em 0.05em 0.2em; border-radius: 999px; line-height: 1.35;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: background 0.15s;
}
a.mention:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.prose a.mention { color: var(--ink); text-decoration: none; background-image: none; }
.mention-avatar { width: 1.15em; height: 1.15em; border-radius: 50%; object-fit: cover; flex: none; }
.mention-initials { display: inline-grid; place-items: center; font-size: 0.55em; font-weight: 700; color: #fff; }
.mention-date { padding-left: 0.45em; color: var(--ink-muted); }
.mention-at { opacity: 0.55; margin-right: -0.15em; }

/* Web bookmarks, as in Notion: text on the left, the page's image on the right. */
.bookmark {
  display: flex; min-height: 104px; overflow: hidden; border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink); text-decoration: none; background: var(--paper-raised); transition: background 0.15s, border-color 0.15s;
}
.prose .bookmark { color: var(--ink); text-decoration: none; }
.bookmark:hover { background: color-mix(in srgb, var(--ink) 3%, var(--paper-raised)); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.bookmark-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 0; padding: 12px 16px; }
.bookmark-title { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-desc { font-size: 0.8rem; line-height: 1.45; color: var(--ink-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bookmark-url { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.75rem; color: var(--ink-muted); min-width: 0; }
.bookmark-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-favicon { width: 14px; height: 14px; flex: none; margin: 0; border-radius: 3px; }
.bookmark-thumb { flex: 0 0 min(34%, 240px); position: relative; border-left: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.bookmark-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
@media (max-width: 520px) { .bookmark-thumb { display: none; } }
.prose .mention-avatar { height: 1.15em; } .prose .bookmark-favicon { height: 14px; }

/* ---- the reading rail (js/post-rail.js), after claude.dev's blog ----------
 * Fixed in the left margin on wide screens. Its parts arrive one after
 * another (icon, title, authors, contents, progress, share): each rises 6px
 * out of a light blur over 400ms, 60ms apart, on a strong ease-out; leaving
 * is quicker and all at once. Hidden for full-width posts and on narrow
 * screens, where the post's own contents block does the job. */
.post-rail { display: none; }
@media (min-width: 1240px) {
  .post-rail {
    display: flex; flex-direction: column; gap: 22px;
    position: fixed; z-index: 5; top: 88px; bottom: 32px; left: max(24px, calc((100vw - var(--read-width)) / 2 - 360px));
    width: min(300px, calc((100vw - var(--read-width)) / 2 - 72px));
    overflow: hidden auto; scrollbar-width: none; pointer-events: none;
    font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted);
  }
  .post-rail::-webkit-scrollbar { display: none; }
  .post-rail.is-shown { pointer-events: auto; }
  .post-rail > *, .rail-head > * {
    opacity: 0; transform: translateY(6px); filter: blur(4px);
    transition: opacity 150ms ease-in, transform 150ms ease-in, filter 150ms ease-in;
  }
  .post-rail.is-shown > *, .post-rail.is-shown .rail-head > * {
    opacity: 1; transform: none; filter: none;
    transition: opacity 400ms var(--rail-ease), transform 400ms var(--rail-ease), filter 400ms var(--rail-ease);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .rail-head { transform: none !important; filter: none !important; opacity: 1 !important; }
  .rail-share { margin-top: auto; }
}
:root { --rail-ease: cubic-bezier(0.23, 1, 0.32, 1); }
.rail-head { display: grid; gap: 10px; }
.rail-icon { display: flex; font-size: 2rem; line-height: 1; }
.rail-icon .page-icon-svg, .rail-icon img { width: 1em; height: 1em; }
.rail-title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.rail-byline { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-read, inherit); font-size: 0.82rem; color: var(--ink-muted); }
.rail-byline .avatar { width: 22px; height: 22px; font-size: 0.55rem; box-shadow: 0 0 0 2px var(--paper); }
.rail-label { margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint, var(--ink-muted)); }
.rail-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rail-tree li { padding-left: calc(var(--depth, 0) * 18px); }
.rail-tree a { display: flex; gap: 8px; color: var(--ink-muted); text-decoration: none; line-height: 1.45; transition: color 0.2s; }
.rail-tree a:hover { color: var(--ink); }
.rail-tree a.is-current { color: var(--ink); font-weight: 700; }
.rail-branch { flex: none; opacity: 0.45; }
.rail-progress { display: flex; align-items: center; gap: 12px; }
.rail-bar {
  position: relative; flex: 0 1 170px; height: 12px; overflow: hidden;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 30%, transparent) 0 1px, transparent 1px 3px);
}
.rail-bar > span { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 120ms linear; }
.rail-pct { font-variant-numeric: tabular-nums; color: var(--ink); }
.rail-hint { margin: -8px 0 0; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-muted) 75%, transparent); }
.rail-share ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rail-share a { color: var(--ink-muted); text-decoration: none; }
.rail-share a::before { content: "└ "; opacity: 0.45; }
.rail-share a:hover, .rail-share a:focus-visible { color: var(--ink); }
.rail-share a.is-copied { color: var(--accent-text); }
.rail-status { min-height: 1.2em; margin: 8px 0 0; color: var(--accent-text); }
.post.is-wide ~ .post-rail { display: none; }
@media (prefers-reduced-motion: reduce) {
  .post-rail > *, .rail-head > *, .post-rail.is-shown > *, .post-rail.is-shown .rail-head > * { transition-duration: 0s !important; transition-delay: 0s !important; filter: none; transform: none; }
}

/* ---- "More from the blog" under a post -------------------------------------- */
.more-posts { padding: 56px 0 72px; border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 2%, var(--paper)); }
.more-posts-inner { width: min(1160px, 100% - 48px); margin: 0 auto; }
.more-posts-title { display: grid; gap: 8px; margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; }
.more-posts-title .blog-eyebrow { margin: 0; }

/* ---- the blog's footer: the slab, credits in columns, the Icarus sky ---------- */
.blog-footer {
  --ink: var(--slab-ink); --ink-muted: #b3ad9f; --rule-strong: var(--slab-ink); --accent-text: var(--slab-accent); --focus: var(--slab-accent);
  background: var(--slab); color: var(--ink-muted); border-top: var(--border-w) solid var(--accent);
  padding: 48px var(--page-pad, 24px) 0; font-size: 0.85rem;
}
.blog-footer-grid {
  display: grid; gap: 32px 40px; width: min(1160px, 100%); margin: 0 auto;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
}
.bf-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
.bf-tag { margin: 12px 0 0; max-width: 30ch; line-height: 1.5; }
.bf-legal { margin: 28px 0 0; font-size: 0.75rem; line-height: 1.9; }
.bf-legal a { margin-right: 14px; color: var(--ink-muted); text-underline-offset: 3px; }
.bf-col { display: grid; align-content: start; gap: 9px; }
.bf-head { margin: 0 0 4px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); opacity: 0.8; }
.bf-col a { color: var(--ink); text-decoration: none; font-size: 0.95rem; width: fit-content; }
.bf-col a:hover, .bf-col a:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.bf-credits p:not(.bf-head) { display: grid; margin: 0; line-height: 1.35; }
.bf-credits p > span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.bf-credits p:not(.bf-head), .bf-credits p a { font-size: 0.85rem; color: var(--ink); }
.bf-credits small { font-size: 0.72rem; color: var(--ink-muted); }
.blog-footer .footer-sky { margin-top: 40px; }
@media (max-width: 860px) { .blog-footer-grid { grid-template-columns: 1fr 1fr; } .bf-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .blog-footer-grid { grid-template-columns: 1fr; } }
.post-dek { font-family: var(--font-read, inherit); }

/* The rail's contents: sections, with their subheadings folded until you
 * reach that section (they open with a short height animation). */
.rail-tree > li { padding-left: 0; }
.rail-sub { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 320ms var(--rail-ease), opacity 200ms ease; }
.rail-sub > ol { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 7px; }
.rail-sub > ol > li { padding-left: calc(var(--depth, 0) * 14px); }
.rail-sub > ol > li:first-child { margin-top: 7px; }
.rail-tree > li.is-open > .rail-sub { grid-template-rows: 1fr; opacity: 1; }
.rail-tree > li.is-active > a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .rail-sub { transition: none; } }