/* ==========================================================================
   WORKS — shared frame for the CASE detail template AND the WORKS INDEX.
   Presentation only. Reuses tokens.css / base.css / components.css / pages.css
   (section-header, section-index, meta-list, image-block, quote, timeline,
   reading, mono). No new colour, type or spacing scale.

   Site hierarchy: TOP (excerpt) -> WORKS INDEX (/works/) -> CASE DETAIL
   (/works/case-NN/). This file arranges shared primitives into:

   CASE DETAIL:
     00 HERO -> 01 ORIGIN/QUESTION -> 02 EXPLORATION -> 03 DISCOVERY
     -> 04 DEVELOPMENT -> 05 CONNECTION -> 06 OUTCOME/FIELD -> END/NEXT CASE

   01–06 are a shared rhythm, not a fixed content template — a given CASE may
   skip, repeat or merge any of them once its manuscript exists. Nothing in
   this file encodes case-specific content, node graphs or outcomes.

   WORKS INDEX:
     00 HERO -> 01 CASE INDEX (one .works-entry per CASE, extend as CASEs
     are added — no fixed count)
   ========================================================================== */

.case-page {
  --silence: 21%;
  /* WORKS INDEX functional green — "observed/connected" information only
     (CASE numbers, CONNECTION points, one accent edge per relation, a
     handful of tiny marks). Codebase-searched first: the only existing
     green-ish token, --color-accent #244b5a, reads as near-black at the
     small sizes this page needs, so per explicit instruction this page
     uses its own clearly-green functional color instead. Not used by
     CASE DETAIL or any other page. */
  --works-green: #456b55;
}

@media (max-width: 62rem) {
  .case-page {
    --silence: clamp(1.75rem, 9vw, 3.5rem);
  }
}

/* -------------------------------------------------------------------------
   shared numbered section header — identical arrangement to the TOP / ABOUT
   pages: the index sits in the left margin, the heading starts the shared
   text column at --silence.
   ------------------------------------------------------------------------- */
.case-page .section-header {
  display: grid;
  grid-template-columns: var(--silence) minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
}

.case-page .section-header > .section-index {
  grid-column: 1;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--color-muted);
}

.case-page .section-header > .section-index span:first-child {
  color: var(--color-ink);
}

.case-page .section-header > h2 {
  grid-column: 2;
  margin: 0;
  font-size: var(--text-section);
  font-weight: 410;
  letter-spacing: var(--tracking-heading);
  line-height: 1.25;
}

.case-page .section-header > p {
  grid-column: 2;
  margin: var(--space-3) 0 0;
  max-width: 32rem;
  color: var(--color-muted);
  line-height: var(--leading-body);
}

@media (max-width: 62rem) {
  .case-page .section-header {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .case-page .section-header > .section-index {
    flex-direction: row;
    gap: var(--space-4);
  }
  .case-page .section-header > h2,
  .case-page .section-header > p {
    grid-column: 1;
    margin-left: var(--silence);
  }
}

/* -------------------------------------------------------------------------
   section wrapper — one register per numbered chapter. Spacing is generous
   and uniform between chapters; density differences live inside each
   chapter, not between them.
   ------------------------------------------------------------------------- */
.case-section {
  padding-block: var(--section-space);
}

.case-section + .case-section {
  border-top: var(--border);
}

/* the shared text column every chapter's prose sits on */
.case-copy {
  margin-left: var(--silence);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: var(--reading-max);
}

.case-copy p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.case-copy p + p {
  margin-top: var(--space-6);
}

.case-copy .lede {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 460;
  line-height: 1.75;
}

.case-copy .placeholder {
  color: var(--color-muted);
  font-style: italic;
}

/* a field wider than the reading column — for FIG / NOTE / DATA plates that
   need to breathe beyond the 43rem prose measure without going full-bleed */
.case-field {
  margin-left: var(--silence);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 58rem;
}

@media (max-width: 62rem) {
  .case-copy,
  .case-field {
    margin-left: var(--silence);
    max-width: none;
  }
}

/* -------------------------------------------------------------------------
   FIG — an inline plate: image or diagram, numbered, captioned. Can be
   dropped between any two paragraphs of .case-copy.
   ------------------------------------------------------------------------- */
.case-fig {
  margin: clamp(3rem, 6vw, 4.5rem) 0;
}

.case-fig__plate {
  border: var(--border);
}

.case-fig__plate img {
  display: block;
  filter: grayscale(1) contrast(0.93);
  height: clamp(16rem, 26vw, 26rem);
  object-fit: cover;
  width: 100%;
}

.case-fig__placeholder {
  align-items: center;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      var(--color-line) 11px 12px
    );
  display: flex;
  justify-content: center;
}

.case-fig__placeholder span {
  background: var(--color-paper);
  color: var(--color-muted);
  padding: var(--space-2) var(--space-4);
}

.case-fig figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
}

.case-fig figcaption .fig-label {
  color: var(--color-ink);
  white-space: nowrap;
}

.case-fig figcaption .fig-credit {
  color: var(--color-muted);
  text-align: right;
}

/* -------------------------------------------------------------------------
   NOTE — a marginal annotation. Narrower than FIG, set off with a left rule
   rather than a full frame, so it reads as an aside, not a plate.
   ------------------------------------------------------------------------- */
.case-note {
  border-left: 2px solid var(--color-ink);
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  max-width: 30rem;
  padding-left: var(--space-6);
}

.case-note .note-label {
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.case-note p {
  line-height: var(--leading-body);
  margin: 0;
}

/* -------------------------------------------------------------------------
   DATA — a small measured record: label / value rows, same grammar as
   .meta-list, framed as its own block so it can sit mid-paragraph.
   ------------------------------------------------------------------------- */
.case-data {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  max-width: 34rem;
}

.case-data .data-label {
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.case-data dl {
  border-top: 1px solid var(--color-ink);
}

.case-data dl div {
  border-bottom: var(--border);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
  padding: var(--space-3) 0;
}

.case-data dd {
  text-transform: none;
}

/* -------------------------------------------------------------------------
   00 CASE HERO
   ------------------------------------------------------------------------- */
.case-hero {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 23% 1fr;
  padding-bottom: var(--space-16);
  padding-top: var(--space-8);
}

.case-hero-main {
  display: flex;
  flex-direction: column;
}

.case-hero-eyebrow {
  color: var(--color-muted);
}

.case-hero h1 {
  font-size: var(--text-page-title);
  font-weight: 410;
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
  margin: var(--space-6) 0 var(--space-12);
  max-width: 16ch;
}

.case-hero-lede {
  display: grid;
  gap: var(--space-16);
  grid-template-columns: 1.2fr 1fr;
}

.case-hero-lede p {
  font-size: var(--text-lead);
  letter-spacing: -0.03em;
  line-height: 1.5;
  max-width: 26ch;
}

@media (max-width: 62rem) {
  .case-hero {
    grid-template-columns: 1fr;
  }
  .case-hero h1 {
    font-size: clamp(3rem, 12vw, 5rem);
  }
  .case-hero-lede {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* -------------------------------------------------------------------------
   03 DISCOVERY — a deliberate change of rhythm: one isolated statement set
   apart by whitespace and rule, NOT by type size. It carries the exact
   heading spec of a numbered section h2 — never a larger scale.
   ------------------------------------------------------------------------- */
.case-discovery {
  margin-left: var(--silence);
  margin-top: clamp(3rem, 7vw, 5rem);
  max-width: 44rem;
}

.case-discovery-text {
  font-size: var(--text-section);
  font-weight: 410;
  letter-spacing: var(--tracking-heading);
  line-height: 1.25;
}

@media (max-width: 62rem) {
  .case-discovery {
    margin-left: var(--silence);
    max-width: none;
  }
}

/* -------------------------------------------------------------------------
   REFERENCE — a published-literature citation dropped inside a chapter.
   Smaller than the prose and set as a footnote / bibliography line, not a
   NOTE aside. Tokens only, no new scale. First used by CASE 01 (KIERUKIN);
   reusable by any CASE that cites external work.
   ------------------------------------------------------------------------- */
.case-reference {
  border-top: 1px solid var(--color-line);
  margin-left: var(--silence);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: var(--reading-max);
  padding-top: var(--space-3);
}

.case-reference .ref-label {
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.case-reference p {
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  margin: 0;
}

.case-reference a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

@media (max-width: 62rem) {
  .case-reference {
    margin-left: var(--silence);
    max-width: none;
  }
}

/* CONNECTION diagram labels — CASE 01 is the first CASE whose manuscript
   exists, so its plate carries a real node graph instead of the TBD
   placeholder. Quiet sans, same muted ink as the plate's lines. */
.case-connection text.cn-label {
  fill: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

/* -------------------------------------------------------------------------
   TURNING POINTS — a small number of chapters in a CASE carry a pivot in
   the story rather than another even step of the record. They are lifted
   one register above the surrounding chapters with weight, space and rule
   ONLY — never a larger type scale, never broken-up copy. First used by
   CASE 01 (KIERUKIN): the founding finding, the shift to a social aim,
   medicine's rejection, and the field result.
   ------------------------------------------------------------------------- */
.case-page .case-section.case-section--turn {
  border-top: 2px solid var(--color-ink);
  padding-block: calc(var(--section-space) * 1.35);
}

/* §02 — the founding finding, framed as an extracted record: hairlines
   above and below, extra air. The line itself keeps the shared
   .case-discovery size. */
.case-section--turn .case-discovery {
  border-block: 1px solid var(--color-line);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* §06 — a compact professional profile set directly below the prose, read
   as a bibliographic bio: small, ruled, quiet. Keeps a medical colleague
   from looking like an anonymous helper. */
.case-bio {
  border-top: 1px solid var(--color-ink);
  margin-left: var(--silence);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 34rem;
  padding-top: var(--space-3);
}

.case-bio .bio-label {
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--space-3);
}

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

.case-bio li {
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.65;
  padding: var(--space-1) 0;
}

.case-bio li + li {
  border-top: 1px solid var(--color-soft);
}

.case-bio li.bio-now {
  color: var(--color-ink);
}

/* §06 — the sentence medicine met USOHONTO with. One register above a
   NOTE: a pulled quote with a hanging mark and rules, at reading-lead
   size — never the discovery scale. */
.case-quote {
  border-block: 1px solid var(--color-line);
  margin-left: var(--silence);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 40rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}

.case-quote p {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1.55;
  margin: 0;
  text-indent: -0.5em;
}

.case-quote .case-quote__src {
  color: var(--color-muted);
  display: block;
  font-size: var(--text-small);
  margin-top: var(--space-4);
  text-indent: 0;
}

/* §06 — PROFILE -> statement -> medical background -> REFERENCE, bracketed
   as ONE research-record entry. Rule and whitespace only: no card, no
   background, no colour. The child blocks drop their own top rules and
   tighten their rhythm so the group reads as a single record. */
.case-record {
  border-top: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  margin-block: clamp(3rem, 6vw, 4.5rem);
  margin-left: var(--silence);
  max-width: 40rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.case-record > * {
  margin-left: 0;
  margin-top: clamp(1.5rem, 3.2vw, 2.1rem);
  max-width: none;
}

.case-record > *:first-child {
  margin-top: 0;
}

.case-record .case-bio,
.case-record .case-reference {
  border-top: 0;
  padding-top: 0;
}

/* inside the record the quote is the pulled statement — a left rule, not
   its own top/bottom rules doubling the record's frame */
.case-record .case-quote {
  border-block: 0;
  border-left: 2px solid var(--color-ink);
  padding-block: 0;
  padding-left: var(--space-6);
}

/* §07 — the field reading shown as a quiet result figure: 1.00 -> 0.67 in
   a plain bordered plate, mono, moderate size. The "-33%" lives only in
   the caption below — never a large number. */
.case-readout {
  margin-left: var(--silence);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 40rem;
}

.case-readout .readout-label {
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.case-readout__plate {
  align-items: baseline;
  border: var(--border);
  display: flex;
  font-family: var(--font-mono);
  gap: clamp(1.25rem, 4vw, 2.75rem);
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.25rem) var(--space-6);
}

.case-readout__plate b {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 420;
  letter-spacing: 0.02em;
}

.case-readout__plate .readout-arrow {
  color: var(--color-muted);
  font-size: 1.05rem;
}

.case-readout .readout-sub {
  color: var(--color-muted);
  display: block;
  margin-top: var(--space-3);
}

@media (max-width: 62rem) {
  .case-bio,
  .case-quote,
  .case-record,
  .case-readout {
    margin-left: var(--silence);
    max-width: none;
  }
}

/* -------------------------------------------------------------------------
   NOTES & REFERENCE apparatus. The story runs uninterrupted; supplementary
   caveats and sources move to two page-bottom lists.
     *1 *2 ...  = a caveat / note  (#note-N,  set in NOTES)
     [01] [02]  = an external source (#ref-N,  set in REFERENCE)
   In-body markers are small superscripts only. The lists are one step
   below body size with tighter leading and muted ink — clearly auxiliary,
   still readable.
   ------------------------------------------------------------------------- */
.fn-ref {
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.fn-ref a {
  color: var(--color-muted);
}

.fn-ref a:hover {
  color: var(--color-ink);
}

/* two markers on one spot (e.g. *1 *2, or *4 [01]) — keep them apart */
.fn-ref + .fn-ref {
  margin-left: 0.25em;
}

.case-apparatus {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  margin-left: var(--silence);
  max-width: var(--reading-max);
  padding: 0;
}

.case-apparatus li {
  border-top: 1px solid var(--color-soft);
  column-gap: var(--space-4);
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding: var(--space-4) 0;
}

.case-apparatus li:first-child {
  border-top: 0;
  padding-top: 0;
}

.case-apparatus .fn-num {
  color: var(--color-muted);
  font-size: var(--text-small);
  padding-top: 0.12em;
}

.case-apparatus p {
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.6;
  margin: 0;
}

.case-apparatus a {
  color: var(--color-muted);
}

.case-apparatus .case-ref-list a,
.case-ref-list.case-apparatus a[href^="http"] {
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.case-apparatus a.fn-back {
  color: var(--color-line);
  margin-left: var(--space-2);
  text-decoration: none;
  word-break: normal;
}

.case-apparatus a.fn-back:hover {
  color: var(--color-muted);
}

/* the apparatus sections' margin-lane glyph ("*" / "[ ]") is a system mark,
   not a chapter number — keep it muted, not ink */
#notes .section-header > .section-index span:first-child,
#references .section-header > .section-index span:first-child {
  color: var(--color-muted);
}

@media (max-width: 62rem) {
  .case-apparatus {
    margin-left: var(--silence);
    max-width: none;
  }
}

/* -------------------------------------------------------------------------
   LEFT EDGE — the margin lane carries the chapter number + label ONLY.
   Every heading, paragraph, quote, reference, figure, data plate and note
   begins on the one shared body-grid edge (--silence). FIG / DATA still
   run WIDER than the 43rem prose measure, but nothing hangs into the
   margin. (.case-fig / .case-data set `margin: <block> 0`, which was
   zeroing the left offset .case-field intends — this restores it with the
   specificity to win, outside any DEVELOPMENT block.)
   ------------------------------------------------------------------------- */
.case-page .case-section > .case-field,
.case-page .case-section > .case-fig.case-field,
.case-page .case-section > .case-data.case-field,
.case-page .case-section > .case-note {
  margin-left: var(--silence);
}

/* a NOTE inside the prose column already rides the column's offset —
   never a second indent */
.case-page .case-copy .case-note {
  margin-left: 0;
}

@media (max-width: 62rem) {
  .case-page .case-section > .case-field,
  .case-page .case-section > .case-fig.case-field,
  .case-page .case-section > .case-data.case-field,
  .case-page .case-section > .case-note {
    margin-left: var(--silence);
  }
}

/* -------------------------------------------------------------------------
   04 DEVELOPMENT — a free sequence of blocks (copy / FIG / NOTE / DATA),
   each its own beat, separated by a hairline. The count and mix is decided
   per CASE once the manuscript exists.
   ------------------------------------------------------------------------- */
.case-development-block + .case-development-block {
  border-top: var(--border);
  margin-top: var(--space-16);
  padding-top: var(--space-16);
}

.case-development-block .block-label {
  color: var(--color-muted);
  display: block;
  margin-left: var(--silence);
  margin-bottom: var(--space-2);
}

/* a FIG / NOTE / DATA / timeline nested inside a DEVELOPMENT block already
   sits on .case-field's --silence offset — cancel the second indent */
.case-development-block .case-copy,
.case-development-block .case-data,
.case-development-block .timeline {
  margin-left: 0;
}

.case-development-block .timeline {
  margin-top: var(--space-8);
}

/* -------------------------------------------------------------------------
   05 CONNECTION — the one section every CASE carries. For now: enough space
   for a future interactive point/line diagram, plus the same numbered plate
   convention as the rest of the page. No nodes or relations are fixed here.
   ------------------------------------------------------------------------- */
.case-connection {
  margin-left: var(--silence);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.case-connection__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-muted);
}

.case-connection__plate {
  aspect-ratio: 16 / 8;
  border: var(--border);
  margin-top: var(--space-4);
  max-width: 62rem;
  position: relative;
}

.case-connection__plate svg {
  display: block;
  height: 100%;
  width: 100%;
}

.cn-node {
  fill: var(--color-line);
}

.cn-edge {
  stroke: var(--color-line);
  stroke-width: 1;
}

.case-connection__label {
  color: var(--color-muted);
  left: var(--space-4);
  position: absolute;
  top: var(--space-4);
}

.case-connection__caption {
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin-top: var(--space-4);
  max-width: 40rem;
}

@media (max-width: 62rem) {
  .case-connection {
    margin-left: var(--silence);
  }
}

/* -------------------------------------------------------------------------
   06 OUTCOME / FIELD
   ------------------------------------------------------------------------- */
.case-outcome-data {
  margin-left: var(--silence);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 40rem;
}

/* -------------------------------------------------------------------------
   END / NEXT CASE — the quiet close: CASE number + FIELD restated, then one
   large link forward. No card, no image, no colour change.
   ------------------------------------------------------------------------- */
.case-end {
  padding-block: clamp(4rem, 9vh, 7rem);
}

.case-end__meta {
  color: var(--color-muted);
}

.case-end__next {
  align-items: center;
  border-top: 1px solid var(--color-ink);
  display: flex;
  gap: var(--space-8);
  justify-content: space-between;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.case-end__next-label {
  color: var(--color-muted);
}

/* "CASE 02 / AQUACULTURE & FOOD" — the case number + field being linked to,
   set apart from the label above and the title below so this reads as a
   link to another page, never as a continuation of the current one */
.case-end__next-number {
  color: var(--color-muted);
  margin: var(--space-4) 0 0;
}

.case-end__next-title {
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  font-weight: 410;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin: var(--space-3) 0 0;
}

.case-end__next-icon {
  align-items: center;
  border: var(--border);
  border-radius: 50%;
  display: flex;
  flex: none;
  height: 3.5rem;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  width: 3.5rem;
}

.case-end__next:hover .case-end__next-icon {
  background: var(--color-ink);
  color: var(--color-white);
}

/* small, quiet — a way back, not a competing call to action */
.case-end__back {
  color: var(--color-muted);
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

@media (max-width: 45rem) {
  .case-end__next {
    align-items: start;
    flex-direction: column;
    gap: var(--space-8);
  }
}

/* ==========================================================================
   WORKS INDEX (/works/) — a vertical case archive, not a portfolio grid.
   Reuses .case-hero / .section-header from above; only the entry list below
   is new. Each .works-entry is a set of flat children placed with named grid
   areas so mobile can reorder without duplicating markup.

   Scoped overrides below (.works-hero, #case-index) only ever apply on this
   one page — .case-hero / .section-header themselves are untouched, so the
   CASE DETAIL template and every other page keep their existing sizes.
   ========================================================================== */

/* HERO — the same type scale TOP already uses for this exact line
   (--text-section, i.e. an ordinary .section-header h2), not the CASE
   DETAIL page-title scale. That was oversized and, combined with the old
   16ch cap, wrapped "何と何をつないだか。" onto its own broken third line.
   Grid runs on --silence so 03/WORKS lines up with 01/CASE INDEX below it. */
.works-hero {
  grid-template-columns: var(--silence) minmax(0, 1fr);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.works-hero h1 {
  font-size: var(--text-section);
  font-weight: 410;
  letter-spacing: var(--tracking-heading);
  line-height: 1.25;
  margin: var(--space-4) 0 0;
  max-width: none;
}

.works-hero-tag {
  color: var(--color-muted);
  margin-top: var(--space-4);
}

/* the first green on the page — once, not twice. "03 / WORKS" carries it;
   "INDEX / CASE ARCHIVE" stays the ordinary muted label below it. Scoped to
   .works-hero only, so the identical .case-hero-eyebrow class on CASE
   DETAIL pages is untouched. */
.works-hero .case-hero-eyebrow {
  color: var(--works-green);
}

@media (max-width: 62rem) {
  .works-hero {
    grid-template-columns: 1fr;
  }
}

/* "これまでのCASE。" is a section label, not a second HERO — shrunk further
   (~20-25% below the first pass) so the visual hierarchy reads HERO ->
   each CASE title -> this label -> body copy, not HERO -> this -> CASE. */
#case-index .section-header h2 {
  font-size: clamp(1.3rem, 1.85vw, 1.65rem);
}

/* "01" is identification, "CASE INDEX" is the ordinary label beside it —
   only the number carries green (scoped to this one section-index, the
   sitewide default in components.css is untouched). */
#case-index .section-index span:first-child {
  color: var(--works-green);
}

/* the gap from that label down to the first hairline/CASE 01 — short
   enough that CASE INDEX reads as "a chapter that starts, then the
   record immediately follows", not two separate blocks. */
.works-index {
  border-top: 1px solid var(--color-ink);
  margin-left: var(--silence);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 64rem;
  position: relative;
}

/* a small reference mark where the chapter heading gives way to the record
   itself — a calibration tick, not a decoration. Full-strength green: this
   is identification information, not a faded hint. */
.works-index::before {
  background: var(--works-green);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: -1px;
  width: 1.5rem;
}

/* Each CASE is one PLATE of a research record, not a list row split into
   two equal columns. The text measure is deliberately narrower than its
   own grid cell (whitespace shows before the gap), the figure is not
   vertically centered against it (each CASE gets its own offset below),
   and the two CASEs use different column ratios — this is controlled
   irregularity, not a template stamped out twice. No card, no thumbnail,
   no shadow; the whole unit still links to its detail page. */
.works-entry {
  border-bottom: var(--border);
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0;
  position: relative;
  transition: background var(--duration-normal) var(--ease);
}

.works-index .works-entry:nth-of-type(2) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.works-entry:hover {
  background: var(--color-soft);
}

.works-entry__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 34rem;
}

/* the one place a CASE reads as an archived record rather than an article:
   its index number carries this page's functional green at full strength —
   identification information, not a decorative fade. FIELD stays neutral —
   only the number and its marker point are green. */
.works-entry__num {
  color: var(--works-green);
  letter-spacing: 0.08em;
  padding-left: 0.9em;
  position: relative;
}

/* a small mark ahead of the number — the record's own identification
   point, not a bullet */
.works-entry__num::before {
  background: var(--works-green);
  content: "";
  height: 0.35em;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.35em;
}

.works-entry__label {
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* the size gap between this tiny meta line and the title below it is the
   point — a plate caption, then a display-scale headline, not one smooth
   type ramp */
.works-entry__title {
  font-size: clamp(2rem, 2.9vw, 3.3rem);
  font-weight: 420;
  letter-spacing: var(--tracking-heading);
  line-height: 1.12;
  margin: var(--space-1) 0 0;
}

.works-entry__desc {
  color: var(--color-muted);
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0;
  max-width: 30rem;
}

.works-entry__desc .placeholder {
  display: block;
  font-size: var(--text-small);
  font-style: italic;
  margin-top: var(--space-2);
}

/* the figure column — an irregular relation diagram sitting in its own
   whitespace, captioned below like the site's other FIG plates, with a
   quiet corner mark (not a companion icon) leading into the record. Each
   CASE gets its own vertical drop from the text baseline — never aligned
   center-to-center with .works-entry__info, so the two halves of the
   plate read as placed, not slotted into a grid. */
.works-entry__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}

.works-index .works-entry:nth-of-type(1) .works-entry__side {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.works-index .works-entry:nth-of-type(2) .works-entry__side {
  margin-top: clamp(0.25rem, 1.5vw, 1rem);
}

.works-entry__relation-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* the caption sits BELOW the plate — the same convention the CASE DETAIL
   pages already use for FIG captions — not a header floating above it. */
.works-entry__relation-tag {
  color: var(--color-muted);
  display: block;
  margin-top: var(--space-2);
  order: 2;
}

.works-entry__relation {
  order: 1;
}

/* the small reference mark that says "this is a plate", without a box —
   full-strength green, the same identification color as the CASE number */
.works-entry__relation-tag::after {
  background: var(--works-green);
  content: "";
  display: inline-block;
  height: 2px;
  margin-left: var(--space-2);
  vertical-align: middle;
  width: 0.85rem;
}

.works-entry__relation svg {
  display: block;
  height: auto;
  width: 100%;
}

/* concepts stay legible, human-read information: black text, never green.
   Green marks only the observed/measured layer: every connection POINT,
   full strength, plus one accent edge per diagram — the relation that
   stood out — while the rest of the lines stay the page's ordinary gray.
   Not "all green" and not "green so faint it reads as gray". */
.wr-label {
  fill: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 11px;
}

.wr-node {
  fill: var(--works-green);
}

.wr-edge {
  stroke: var(--color-line);
  stroke-width: 1;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease);
}

.wr-edge--accent {
  stroke: var(--works-green);
  stroke-width: 1.1;
  opacity: 0.9;
  transition: stroke-width var(--duration-fast) var(--ease);
}

.works-entry:hover .wr-edge {
  opacity: 1;
}

.works-entry:hover .wr-edge--accent {
  stroke-width: 1.6;
}

/* a quiet corner mark leading into the record — not a companion icon
   riding beside the figure. Anchored to the figure column's own bottom
   whitespace (.works-entry__side reserves padding-bottom for exactly this). */
.works-entry__arrow {
  align-items: center;
  border: var(--border);
  border-radius: 50%;
  bottom: 0;
  display: flex;
  flex: none;
  height: 2.75rem;
  justify-content: center;
  position: absolute;
  right: 0;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  width: 2.75rem;
}

/* the CASE is "selected" — the link reacts in the same green as the record
   it points to, not a solid fill */
.works-entry:hover .works-entry__arrow {
  border-color: var(--works-green);
  color: var(--works-green);
}

@media (max-width: 45rem) {
  .works-entry,
  .works-index .works-entry:nth-of-type(2) {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }
  .works-entry__info {
    max-width: none;
  }
  .works-index .works-entry:nth-of-type(1) .works-entry__side,
  .works-index .works-entry:nth-of-type(2) .works-entry__side {
    margin-top: 0;
  }
}