/* ============================================================
   sustainer.ai — landing styles
   Editorial / atelier system. Type-driven, paper-grounded.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=JetBrains+Mono:wght@300;400;500;600&display=swap");

/* ---- Tokens ---- */
:root {
  --paper:        #F2EEDF;
  --paper-deep:   #E9E3CF;
  --paper-soft:   #F7F3E6;
  --ink:          #181613;
  --ink-soft:     #2B2823;
  --ink-quiet:    #4A453C;
  --muted:        #6E6859;
  --muted-soft:   #9A9384;
  --rule:         #CFC8B4;
  --rule-soft:    #DDD6C2;

  --accent:       #B5391A;   /* burnt sienna */
  --accent-deep:  #7A2410;
  --accent-quiet: #C66A45;

  --ochre:        #A98123;
  --olive:        #3D4E37;
  --teal-ink:     #1E4248;
  --burgundy:     #6F2434;
  --indigo-ink:   #243651;

  --shadow-paper: 0 1px 0 rgba(24,22,19,.04), 0 16px 40px -22px rgba(24,22,19,.18);
  --shadow-card:  0 1px 0 rgba(24,22,19,.05), 0 24px 56px -28px rgba(24,22,19,.28);

  --serif-display: "Instrument Serif", "Newsreader", serif;
  --serif-body:    "Newsreader", Georgia, serif;
  --mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 64ch;
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(1200px 800px at 90% -10%, rgba(181,57,26,.06), transparent 60%),
    radial-gradient(900px 700px at -10% 35%, rgba(30,66,72,.05), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 380;
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--paper); }

/* ---- Type primitives ---- */
.display     { font-family: var(--serif-display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.96; }
.display-it  { font-family: var(--serif-display); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.serif       { font-family: var(--serif-body); }
.mono        { font-family: var(--mono); font-weight: 400; }
.smallcaps {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-quiet);
}
.dropcap::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  float: left;
  font-size: 5.2rem;
  line-height: 0.86;
  padding: .35rem .55rem 0 0;
  color: var(--accent);
}

/* ---- Layout helpers ---- */
.wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 40px; }
.rule { border-top: 1px solid var(--rule); }
.rule-ink { border-top: 1px solid var(--ink); }
.hairline { height: 1px; background: var(--rule); width: 100%; }
.hairline-ink { height: 1px; background: var(--ink); width: 100%; }

/* ---- Running header ---- */
.running {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.running .bar { display: flex; align-items: center; gap: 32px; padding: 10px 0; color: var(--ink-quiet); }
.running .bar > .grow { flex: 1; }
.running .mark { color: var(--ink); font-weight: 600; }

/* ---- Masthead ---- */
.masthead { padding: 28px 0 18px; }
.masthead-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
}
.wordmark {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.85;
  letter-spacing: -0.03em;
}
.wordmark .dot { font-style: normal; color: var(--accent); }
.wordmark .ai  { font-style: normal; font-family: var(--mono); font-size: .42em; letter-spacing: 0.08em; vertical-align: 0.8em; margin-left: .2em; color: var(--ink-quiet); }
.masthead-left, .masthead-right { display: flex; align-items: flex-end; gap: 24px; min-height: 80px; }
.masthead-right { justify-content: flex-end; }

.nav { display: flex; gap: 26px; }
.nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---- Hero ---- */
.hero { padding: 64px 0 96px; position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: start;
}
.hero-head {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(54px, 8.4vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.hero-head em { font-style: italic; color: var(--accent); }
.hero-head .soft { color: var(--muted); }
.hero-sub {
  margin-top: 36px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 38ch;
}
.hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn .arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* sidenote / hero meta panel */
.sidenote {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}
.sidenote h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; margin: 0 0 10px; color: var(--ink-quiet);
}
.sidenote p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.sidenote .figure {
  font-family: var(--serif-display);
  font-size: 56px;
  line-height: 0.9;
  color: var(--ink);
}

/* counters strip */
.status-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  margin-top: 56px;
}
.status-strip .cell {
  padding: 22px 18px;
  border-right: 1px solid var(--rule);
}
.status-strip .cell:last-child { border-right: 0; }
.status-strip .num {
  font-family: var(--serif-display);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.status-strip .num em { font-style: italic; color: var(--accent); }
.status-strip .lbl { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); }

/* ---- Manifesto ---- */
.manifesto { padding: 120px 0 120px; }
.manifesto blockquote {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: left;
}
.manifesto blockquote .accent { color: var(--accent); }
.manifesto .credit {
  margin-top: 32px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet);
}

/* ---- Section heads ---- */
.sect-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 60px 0 28px;
  border-top: 1px solid var(--ink);
  align-items: baseline;
}
.sect-head .num {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.sect-head h2 {
  font-family: var(--serif-display);
  font-weight: 400; font-style: normal;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1; letter-spacing: -0.02em;
  margin: 0;
}
.sect-head h2 em { font-style: italic; color: var(--accent); }
.sect-head .lede {
  margin-top: 18px; max-width: 56ch;
  font-size: 18px; line-height: 1.5; color: var(--ink-soft);
}

/* ---- Boards (editorial spreads) ---- */
.board {
  border-top: 1px solid var(--rule);
  padding: 56px 0;
}
.board-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: start;
}
.board.reverse .board-grid {
  grid-template-columns: 1fr 360px;
}
.board.reverse .board-text { order: 2; }
.board.reverse .board-preview { order: 1; }

.board-text .seal {
  display: inline-block; padding: 4px 10px;
  border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.board-text h3 {
  font-family: var(--serif-display); font-style: italic; font-weight: 400;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 0.95; letter-spacing: -0.02em;
  margin: 22px 0 14px; color: var(--ink);
}
.board-text .one-liner {
  font-size: 19px; line-height: 1.4;
  color: var(--ink-soft); margin: 0 0 18px;
  max-width: 32ch;
}
.board-text .desc {
  font-size: 16px; line-height: 1.6; color: var(--ink-quiet);
  margin: 0 0 24px; max-width: 36ch;
}
.board-text ul.facts {
  list-style: none; padding: 0; margin: 0 0 28px;
  border-top: 1px solid var(--rule);
}
.board-text ul.facts li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.board-text ul.facts li span:first-child { color: var(--muted); }
.board-text ul.facts li span:last-child  { color: var(--ink); }

.enter-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.enter-link .arrow { transition: transform .25s ease; }
.enter-link:hover .arrow { transform: translateX(4px); }

/* ---- Preview cards (the demonstrative surfaces) ---- */
.preview {
  position: relative;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}
.preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.preview-head .dots { display: inline-flex; gap: 6px; }
.preview-head .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--paper-deep); opacity: .55; }
.preview-head .dot:nth-child(1) { background: var(--accent); opacity: 1; }
.preview-body { padding: 24px; }

/* —— Project board (Kanban) —— */
.kanban {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.kanban .col {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px;
  min-height: 320px;
}
.kanban .col-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-quiet);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.kanban .col-head .count {
  background: var(--ink); color: var(--paper);
  padding: 1px 7px; font-size: 10px;
}
.kanban .card {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ochre);
  padding: 11px 12px;
  margin-bottom: 10px;
  font-family: var(--serif-body);
  font-size: 14px; line-height: 1.35;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(24,22,19,.04);
}
.kanban .card.tag-field { border-left-color: var(--olive); }
.kanban .card.tag-write { border-left-color: var(--accent); }
.kanban .card.tag-ship  { border-left-color: var(--indigo-ink); }
.kanban .card .meta {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--muted);
}
.kanban .pill {
  display: inline-block; padding: 1px 7px;
  background: var(--paper-deep); color: var(--ink-quiet);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em;
}
.kanban .avatars { display: inline-flex; gap: -4px; }
.kanban .avatars span {
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-soft);
  margin-left: -5px;
}
.kanban .avatars span:nth-child(1){ background: var(--accent); }
.kanban .avatars span:nth-child(2){ background: var(--olive); }
.kanban .avatars span:nth-child(3){ background: var(--ochre); color: var(--ink); }

/* —— Chat board (multi-agent transcript) —— */
.chat {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-topic {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet);
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between;
}
.msg { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.msg .sigil {
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px;
  background: var(--ink); color: var(--paper);
  letter-spacing: 0.04em;
  margin-top: 3px;
}
.msg .head {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-quiet);
  text-transform: uppercase;
}
.msg .head strong { color: var(--ink); font-weight: 600; }
.msg .head .role { color: var(--muted); }
.msg .body {
  margin-top: 4px;
  font-family: var(--serif-body); font-size: 15.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.msg.prof .sigil  { background: var(--accent); }
.msg.ta   .sigil  { background: var(--olive); }
.msg.stud .sigil  { background: var(--indigo-ink); }
.msg.aid  .sigil  { background: var(--burgundy); }
.typing {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--muted);
  padding-top: 4px;
}
.typing .dot { display: inline-block; width: 4px; height: 4px; border-radius: 999px; background: var(--muted); margin: 0 1px; animation: blink 1.4s infinite both; }
.typing .dot:nth-child(2) { animation-delay: .18s; }
.typing .dot:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

/* —— Avatar board (blendshape visualizer) —— */
.avatar-stage {
  display: grid; grid-template-columns: 220px 1fr;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
}
.avatar-face {
  position: relative;
  background:
    radial-gradient(80% 60% at 50% 32%, #1f4248 0%, #0e1d22 60%, #0a1316 100%);
  border-right: 1px solid #2a2a26;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 14px;
}
.avatar-portrait {
  width: 130px; height: 170px;
  border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
  background:
    radial-gradient(40% 30% at 50% 28%, #d9c1a2 0%, #c8a988 55%, #ad8a6a 100%);
  position: relative;
  box-shadow: 0 24px 30px -16px rgba(0,0,0,.6);
}
.avatar-portrait::before, .avatar-portrait::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 999px;
  background: #1c1814; top: 56px;
}
.avatar-portrait::before { left: 38px; }
.avatar-portrait::after  { right: 38px; }
.avatar-mouth {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 36px;
  width: 32px; height: 6px; border-radius: 0 0 16px 16px;
  background: #5a2a26;
  animation: mouth 2.2s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes mouth {
  0%,100% { transform: translateX(-50%) scaleY(0.4); }
  35%     { transform: translateX(-50%) scaleY(1.4); }
  60%     { transform: translateX(-50%) scaleY(0.8); }
}
.avatar-meta {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: rgba(242,238,223,.6);
}
.avatar-latency {
  position: absolute; bottom: 12px; right: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: #6acba9;
}
.avatar-latency::before { content: "● "; color: #6acba9; }

.blendshapes {
  padding: 16px 18px;
  display: grid; grid-template-columns: 110px 1fr;
  row-gap: 6px; column-gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.05em;
  align-content: start;
}
.blendshapes .lbl { color: rgba(242,238,223,.7); }
.blendshapes .track {
  height: 8px; background: rgba(242,238,223,.08); position: relative;
  align-self: center;
}
.blendshapes .track::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w, 30%);
  background: linear-gradient(90deg, var(--accent-quiet), var(--accent));
  animation: pulse 2.8s ease-in-out infinite;
  transform-origin: left;
}
.blendshapes .track.b1::after { animation-delay: .0s; }
.blendshapes .track.b2::after { animation-delay: .2s; }
.blendshapes .track.b3::after { animation-delay: .4s; }
.blendshapes .track.b4::after { animation-delay: .6s; }
.blendshapes .track.b5::after { animation-delay: .8s; }
.blendshapes .track.b6::after { animation-delay: 1.0s; }
.blendshapes .track.b7::after { animation-delay: 1.2s; }
.blendshapes .track.b8::after { animation-delay: 1.4s; }
@keyframes pulse {
  0%, 100% { width: 18%; }
  30%      { width: 78%; }
  55%      { width: 32%; }
  80%      { width: 64%; }
}
.avatar-foot {
  border-top: 1px solid #2a2a26;
  padding: 10px 18px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: rgba(242,238,223,.55);
}
.avatar-foot strong { color: #f2eedf; }

/* —— Job board (classifieds) —— */
.classifieds {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink);
}
.listing {
  display: grid; grid-template-columns: 88px 1fr 160px;
  gap: 24px; padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.listing .no {
  font-family: var(--serif-display); font-size: 36px;
  line-height: 1; color: var(--burgundy);
  font-style: italic;
}
.listing .title {
  font-family: var(--serif-display); font-style: italic;
  font-size: 26px; line-height: 1.05;
  letter-spacing: -0.01em; margin: 0 0 6px;
}
.listing .org {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-quiet); margin-bottom: 8px;
}
.listing .excerpt {
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  margin: 0; max-width: 50ch;
}
.listing .right {
  text-align: right;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.listing .right strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* —— Workshop board (schedule) —— */
.schedule {
  display: grid; grid-template-columns: 90px 1fr;
  border-top: 1px solid var(--ink);
}
.schedule .row {
  display: contents;
}
.schedule .time {
  padding: 16px 14px 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--ink-quiet);
}
.schedule .session {
  padding: 16px 0 16px 18px;
  border-left: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.schedule .session::before {
  content: ""; position: absolute; left: -5px; top: 22px;
  width: 9px; height: 9px; border-radius: 999px; background: var(--olive);
}
.schedule .session.live::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(181,57,26,.18); }
.schedule .session h5 {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: 22px; line-height: 1.1;
  margin: 0 0 6px;
}
.schedule .session .who {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-quiet); margin-bottom: 6px;
}
.schedule .session .dots {
  display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle;
}
.schedule .session .dots i {
  width: 6px; height: 6px; background: var(--ink); border-radius: 999px; display: inline-block;
}
.schedule .session .dots i.empty { background: var(--rule); }
.schedule .session .blurb {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  margin: 0; max-width: 56ch;
}

/* —— Publications board (citations) —— */
.cite-list { padding: 0; margin: 0; list-style: none; counter-reset: cite; border-top: 1px solid var(--ink); }
.cite-list li {
  padding: 18px 0 18px 56px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  counter-increment: cite;
}
.cite-list li::before {
  content: "[" counter(cite, decimal-leading-zero) "]";
  position: absolute; left: 0; top: 20px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--accent);
}
.cite-list .title {
  font-family: var(--serif-display); font-style: italic;
  font-size: 22px; line-height: 1.15; margin: 0 0 6px;
  color: var(--ink);
}
.cite-list .authors {
  font-family: var(--serif-body); font-size: 14px;
  color: var(--ink-soft); margin: 0 0 6px;
}
.cite-list .meta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--ink-quiet);
  text-transform: uppercase;
}
.cite-list .meta .doi { color: var(--accent); }
.cite-list .abstract {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 10px 0 0; max-width: 70ch;
}

/* ---- Process / method ---- */
.method { padding: 80px 0; border-top: 1px solid var(--ink); }
.method-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; }
.step .step-no {
  font-family: var(--serif-display); font-size: 64px; line-height: 0.9;
  color: var(--accent); font-style: italic;
  border-bottom: 1px solid var(--ink); padding-bottom: 8px;
  margin-bottom: 14px;
}
.step h4 {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: 28px; line-height: 1.1;
  margin: 0 0 10px;
}
.step p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* ---- Colophon ---- */
.colophon { padding: 70px 0 60px; border-top: 1px solid var(--ink); margin-top: 80px; }
.colophon-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.colophon h6 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet); margin: 0 0 12px;
}
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin-bottom: 6px; font-size: 14.5px; }
.colophon li a:hover { color: var(--accent); }
.colophon-mark {
  font-family: var(--serif-display); font-style: italic;
  font-size: 48px; line-height: 0.9; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.colophon-foot {
  border-top: 1px solid var(--rule);
  margin-top: 36px; padding-top: 16px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-quiet);
}

/* ---- Welcome page extras ---- */
.welcome-hero { padding: 80px 0 64px; }
.welcome-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.welcome-stamp {
  border: 1px solid var(--ink);
  padding: 22px;
  background: var(--paper-soft);
  position: relative;
}
.welcome-stamp::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px dashed var(--rule); pointer-events: none;
}
.welcome-stamp h5 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet); margin: 0 0 8px;
}
.welcome-stamp .id {
  font-family: var(--serif-display); font-style: italic;
  font-size: 42px; line-height: 1; margin: 0;
}
.welcome-stamp dl {
  margin: 18px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.welcome-stamp dt {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.welcome-stamp dd { margin: 0; font-size: 14px; }
.welcome-stamp .seal-mark {
  position: absolute; top: 18px; right: 22px;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 9px;
  padding: 4px 8px; letter-spacing: 0.2em;
  border-radius: 999px;
  transform: rotate(8deg);
}

.next-list { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: nx; }
.next-list li {
  counter-increment: nx;
  display: grid; grid-template-columns: 88px 1fr 130px;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.next-list li::before {
  content: counter(nx, decimal-leading-zero);
  font-family: var(--serif-display); font-style: italic;
  font-size: 48px; line-height: 0.95;
  color: var(--accent);
}
.next-list .what h4 {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: 26px; line-height: 1.1;
  margin: 0 0 6px;
}
.next-list .what p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.next-list .when {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-quiet);
  text-align: right;
}

/* board access strip */
.access-strip {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.access-cell {
  padding: 22px 16px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 160px;
  transition: background .2s ease;
}
.access-cell:last-child { border-right: 0; }
.access-cell:hover { background: var(--paper-soft); }
.access-cell .seal {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet);
}
.access-cell h5 {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: 26px; line-height: 1.05;
  margin: 14px 0 8px;
}
.access-cell .enter {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.access-cell .enter .arrow { transition: transform .2s ease; display: inline-block; }
.access-cell:hover .enter .arrow { transform: translateX(4px); }
.access-cell .status {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--olive);
  margin-top: 6px;
}
.access-cell .status.soon { color: var(--ochre); }

/* office hours block */
.office {
  background: var(--ink); color: var(--paper);
  padding: 32px; margin-top: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center;
}
.office h3 {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: 44px; line-height: 1;
  margin: 0 0 12px;
}
.office .when {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  color: rgba(242,238,223,.7); text-transform: uppercase; margin-bottom: 14px;
}
.office p { font-size: 15px; line-height: 1.55; color: rgba(242,238,223,.85); margin: 0; max-width: 50ch; }
.office .add {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border: 1px solid var(--paper); background: transparent; color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; margin-top: 18px;
  transition: background .2s ease, color .2s ease;
}
.office .add:hover { background: var(--accent); border-color: var(--accent); }

/* ---- Language switcher ---- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.lang-switch a {
  color: var(--ink-quiet); padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.active { color: var(--ink); border-bottom-color: var(--accent); }
.lang-switch .sep { color: var(--muted-soft); }
.lang-switch .zh {
  font-family: "Newsreader", "Noto Serif TC", "Noto Sans TC", serif;
  font-style: italic;
  letter-spacing: 0;
  font-size: 14px;
}

/* ---- Laboratory section: lineage timeline ---- */
.lineage {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  border-top: 1px solid var(--ink);
  position: relative;
}
.lin-node {
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--rule);
  position: relative;
}
.lin-node:last-child { border-right: 0; }
.lin-node::before {
  content: ""; position: absolute;
  top: -8px; left: 0;
  width: 14px; height: 14px;
  border-radius: 999px; background: var(--paper);
  border: 2px solid var(--ink);
}
.lin-node.current::before {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(181,57,26,.15);
}
.lin-years {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quiet); margin-bottom: 10px;
}
.lin-name {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: 38px;
  line-height: 1; letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.lin-node.current .lin-name { color: var(--accent); }
.lin-full {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
  max-width: 28ch;
}
.lin-blurb {
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft); margin: 0; max-width: 32ch;
}

/* ---- Vision / Mission credo ---- */
.credo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin: 80px 0 60px;
  border-top: 1px solid var(--ink);
  padding-top: 36px;
}
.credo h4 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.credo .pull {
  font-family: var(--serif-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.12; letter-spacing: -0.012em;
  margin: 0 0 22px; color: var(--ink);
}
.credo p {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 14px;
  max-width: 50ch;
}
.credo .src {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  border-top: 1px dotted var(--rule);
  padding-top: 12px; margin-top: 18px;
}

/* ---- Foundational topics grid ---- */
.topics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: 60px;
}
.topic {
  padding: 22px 22px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.topic:nth-child(3n) { border-right: 0; }
.topic:nth-last-child(-n+3) { border-bottom: 0; }
.topic .num {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.topic h5 {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: 26px;
  line-height: 1.05; margin: 0 0 6px;
}
.topic p {
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft); margin: 0;
}

/* ---- Alice in the IoT panel ---- */
.alice {
  display: grid; grid-template-columns: 1.15fr 1fr;
  background: var(--ink); color: var(--paper);
  margin-bottom: 60px;
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-card);
}
.alice-text { padding: 48px; }
.alice-text .tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-quiet); margin-bottom: 18px;
  display: inline-block; padding: 4px 8px;
  border: 1px solid var(--accent-quiet); border-radius: 999px;
}
.alice-text h3 {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400; font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1; letter-spacing: -0.015em; margin: 0 0 22px;
}
.alice-text p {
  font-size: 16px; line-height: 1.6;
  color: rgba(242,238,223,.85); margin: 0 0 14px; max-width: 52ch;
}
.alice-text p em { color: var(--accent-quiet); font-style: italic; }
.alice-text .meta {
  margin-top: 28px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242,238,223,.55);
  border-top: 1px solid rgba(242,238,223,.18); padding-top: 14px;
  display: flex; justify-content: space-between; gap: 24px;
}
.alice-text .meta strong { color: var(--paper); }
.alice-art {
  background:
    radial-gradient(60% 50% at 50% 30%, #284b4f 0%, #15292c 60%, #0a1416 100%);
  position: relative;
  padding: 36px;
  border-left: 1px solid rgba(242,238,223,.14);
  display: flex; flex-direction: column; gap: 14px;
  justify-content: space-between;
}
.alice-art .header {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: rgba(242,238,223,.55);
}
.alice-art .header strong { color: #6acba9; }
.alice-art .header strong::before { content: "● "; }
.alice-art .scan {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.05em;
  border: 1px solid rgba(242,238,223,.16);
  padding: 10px 12px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: center;
  color: rgba(242,238,223,.75);
}
.alice-art .scan strong { color: var(--paper); font-weight: 500; }
.alice-art .scan.ok b   { color: #6acba9; font-weight: 500; }
.alice-art .scan.warn b { color: var(--accent-quiet); font-weight: 500; }
.alice-art .scan.neutral b { color: rgba(242,238,223,.85); font-weight: 500; }
.alice-art .stack { display: grid; gap: 8px; }
.alice-art .foot {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: rgba(242,238,223,.4);
  border-top: 1px solid rgba(242,238,223,.14); padding-top: 12px;
  display: flex; justify-content: space-between;
}

/* ---- Location ---- */
.location {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--ink);
  padding-top: 36px; margin-bottom: 24px;
}
.loc-card {
  padding: 26px;
  border: 1px solid var(--ink);
  background: var(--paper-soft);
  position: relative;
}
.loc-card h5 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet); margin: 0 0 14px;
}
.loc-card .mark {
  font-family: var(--serif-display); font-style: italic;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.05; margin: 0 0 8px;
}
.loc-card address {
  font-style: normal;
  font-family: var(--serif-body);
  font-size: 16px; line-height: 1.5;
  color: var(--ink);
}
.loc-card .room {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 10px;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.loc-detail p {
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 14px;
}
.loc-detail dl {
  margin: 18px 0 0;
  display: grid; grid-template-columns: 120px 1fr;
  row-gap: 8px; column-gap: 18px;
  border-top: 1px solid var(--rule); padding-top: 14px;
}
.loc-detail dt {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.loc-detail dd { margin: 0; font-size: 14.5px; color: var(--ink); }

/* ---- Reveal animation ---- */
.reveal { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal.d1 { animation-delay: .05s; }
.reveal.d2 { animation-delay: .15s; }
.reveal.d3 { animation-delay: .28s; }
.reveal.d4 { animation-delay: .42s; }
.reveal.d5 { animation-delay: .58s; }
.reveal.d6 { animation-delay: .76s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .hero-grid, .board-grid, .board.reverse .board-grid, .welcome-grid { grid-template-columns: 1fr; gap: 40px; }
  .kanban { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .access-strip { grid-template-columns: repeat(3, 1fr); }
  .office { grid-template-columns: 1fr; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  .lineage { grid-template-columns: 1fr 1fr; }
  .lin-node { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
  .lin-node:nth-child(2n) { border-right: 0; }
  .credo { grid-template-columns: 1fr; gap: 40px; }
  .topics { grid-template-columns: 1fr 1fr; }
  .topic:nth-child(3n) { border-right: 1px solid var(--rule); }
  .topic:nth-child(2n) { border-right: 0; }
  .alice { grid-template-columns: 1fr; }
  .location { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 22px; }
  .masthead-grid { grid-template-columns: 1fr; align-items: start; }
  .masthead-left, .masthead-right { min-height: auto; flex-wrap: wrap; }
  .status-strip { grid-template-columns: 1fr 1fr; }
  .sect-head { grid-template-columns: 1fr; }
  .next-list li { grid-template-columns: 56px 1fr; }
  .next-list .when { grid-column: 1 / -1; text-align: left; }
  .access-strip { grid-template-columns: 1fr 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .listing { grid-template-columns: 1fr; gap: 8px; }
  .listing .right { text-align: left; }
  .avatar-stage { grid-template-columns: 1fr; }
  .avatar-face { min-height: 220px; }
  .lineage { grid-template-columns: 1fr; }
  .lin-node { border-right: 0 !important; }
  .topics { grid-template-columns: 1fr; }
  .topic { border-right: 0 !important; }
  .alice-text { padding: 28px; }
  .alice-art  { padding: 24px; }
}