/* Hallmark · tokens · theme: custom (next-research)
 * vibe: "editorial austere fundraising decks"
 * paper: #0e1013 · paper-2: #1a1c1f · ink: #f3efe6
 * muted: #9a9488 · soft: #5c574e · accent: #e8b86d
 * display: Newsreader + Noto Serif TC · body: IBM Plex Sans + Noto Sans TC
 * outlier: Geist Mono · axes: dark-warm / roman-serif / chromatic-amber
 */
:root {
  --color-paper: #0e1013;
  --color-paper-2: #1a1c1f;
  --color-ink: #f3efe6;
  --color-ink-2: #c8c2b4;
  --color-muted: #9a9488;
  --color-soft: #5c574e;
  --color-accent: #e8b86d;
  --color-accent-ink: #0e1013;
  --color-rule: #2a2c2f;
  --color-warn: #c45c4a;
  --color-ok: #7d9a6f;
  --color-link: #8aa0c4;
  --color-focus: #e8b86d;

  --font-display: "Newsreader", "Noto Serif TC", ui-serif, Georgia, serif;
  --font-body: "IBM Plex Sans", "Noto Sans TC", ui-sans-serif, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, monospace;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-gutter: clamp(1rem, 6vw, 4rem);
  --page-pad-y: clamp(1.5rem, 7vh, 4rem);
  --page-pad-end: clamp(3rem, 12vh, 7rem);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3.05rem;
  --text-4xl: 3.81rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2rem, 3.4vw + 0.8rem, 3.5rem);
  --text-stat: clamp(3.5rem, 8vw + 1rem, 7rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --radius-card: 0;
  --radius-pill: 999px;
  --radius-input: 2px;

  --rule-hair: 1px;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  --banner-height: 3rem;
  --stage-h: 17.5rem;
  --art-max-h: 36vh;
  --bar-h: 3.25rem;
  --toc-mobile-h: 2.25rem;
}

html, body { overflow-x: clip; }
/* deck lock removed — this site is a scrolling page */
.deck { touch-action: pan-y; }

/* TOC tree — orientation chrome, every deck */
.toc {
  position: fixed;
  z-index: var(--z-sticky-nav);
  pointer-events: none;
  color: var(--color-soft);
  font-family: var(--font-outlier);
  letter-spacing: 0.04em;
}
.toc a, .toc button { pointer-events: auto; }
.toc-crumb { pointer-events: none; }
.toc-line { display: flex; align-items: baseline; gap: var(--space-xs); line-height: 1.35; }
.toc-line i {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-soft);
  min-width: 1.25rem;
}
.toc-line b {
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc-line:last-child b { color: var(--color-accent); }
.toc-tree { display: none; }
.toc-rail { display: none; }
.toc-trunk-name {
  font-size: var(--text-xs);
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.toc-branch { margin: 0 0 var(--space-sm); }
.toc-branch strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-3xs);
}
.toc-leaf {
  display: block;
  text-decoration: none;
  color: var(--color-soft);
  font-size: 0.6875rem;
  line-height: 1.45;
  padding: 0.05rem 0;
}
.toc-leaf.on { color: var(--color-accent); }
.toc-leaf:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.toc-rail-base { stroke: var(--color-rule); stroke-width: 1; }
.toc-rail-live { stroke: var(--color-accent); stroke-width: 1.5; }

@media (max-width: 55.99rem) {
  :root {
    --stage-h: min(38vw, 11.5rem);
    --art-max-h: min(38vw, 11.5rem);
    --page-pad-y: clamp(1.25rem, 6vh, 2.25rem);
    --page-pad-end: clamp(3.25rem, 10vh, 4.5rem);
  }

  /* Thin top crumb — 幹 / 枝 / 葉 on one or two compact lines. No tree. */
  .toc {
    top: 0; left: 0; right: 0;
    padding: 0.32rem var(--page-gutter);
    background: var(--color-paper);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    max-height: none;
  }
  body:has(.nav-edge) .toc { top: var(--banner-height); }
  .toc-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.12rem 0.85rem;
  }
  .toc-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    line-height: 1.2;
    min-width: 0;
  }
  .toc-line i {
    font-size: 0.625rem;
    min-width: 0;
  }
  .toc-line b {
    font-size: 0.6875rem;
    max-width: 16ch;
  }
  .toc-tree, .toc-rail { display: none; }

  html body.has-toc .deck .slide {
    padding-top: calc(var(--toc-mobile-h) + var(--space-lg));
    padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + var(--space-lg));
  }
  html body.has-toc:has(.nav-edge) .deck .slide {
    padding-top: calc(var(--banner-height) + var(--toc-mobile-h) + var(--space-md));
  }

  /* Short slides sit in the middle third; long slides scroll from real padding. */
  html body .deck .slide {
    justify-content: center;
    justify-content: safe center;
    gap: var(--space-md);
  }
  html body .deck .slide.is-scroll {
    justify-content: flex-start;
  }
  html body .deck .slide > * { flex-shrink: 0; }
  html body .deck .slide h1,
  html body .deck .slide h2 { margin-bottom: 0; }
  html body .deck .slide p { margin-top: var(--space-md); }
  html body .deck .art {
    max-height: var(--art-max-h);
    width: 100%;
  }
  html body .deck .stage {
    height: var(--stage-h);
    width: 100%;
    max-width: 45rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    overflow: hidden;
    flex: 0 0 var(--stage-h);
  }
  html body .deck .stage .art { max-height: none; }

  html body .deck { touch-action: pan-y; }
  html body .deck .slide.is-scroll { touch-action: pan-y; }

  /* Home directory: cards not glued to the top */
  html body:not(:has(.deck)) {
    padding-top: max(var(--space-2xl), 10vh);
    padding-bottom: var(--space-3xl);
  }
}

@media (min-width: 56rem) {
  .toc {
    left: var(--page-gutter);
    top: calc(var(--banner-height, 3rem) + var(--space-sm));
    width: 9.5rem;
    bottom: 4rem;
    overflow: auto;
  }
  .toc-crumb { margin-bottom: var(--space-md); }
  .toc-tree { display: block; position: relative; padding-left: 1rem; }
  .toc-rail {
    display: block;
    position: absolute;
    left: 0; top: 0.2rem; bottom: 0;
    width: 12px; height: calc(100% - 0.2rem);
  }
  body.has-toc .slide { padding-left: calc(var(--page-gutter) + 10rem); }
  body:has(.nav-rail) .toc { left: 2.75rem; }
}

.stage {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: min(100%, 45rem);
  height: var(--stage-h);
}
.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.stage .art { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; }
.stage.is-live:has(canvas) .art { display: none; }
.stage.is-live:not(:has(canvas)) .art { display: block; }


/* spoken so-what under a claim */
.so {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-top: var(--space-md);
  max-width: 52ch;
  line-height: 1.55;
}
.so::before {
  content: "所以呢 · ";
  color: var(--color-soft);
  letter-spacing: 0.06em;
}