/* 光の勘定 — layout & type. Tokens live in tokens.css (load first). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  background-color: var(--ground);
  /* ledger ground texture: horizontal measure + 0/A/B/C/D verticals. Stops use
     only existing tokens (must resolve to rgb/rgba — color-mix() becomes
     color(srgb) in computed style and the originality gate cannot read it). */
  --ledger-w: min(100%, 78rem);
  --ledger-pad: var(--space-3);
  --ledger-inner: calc(var(--ledger-w) - 2 * var(--ledger-pad));
  --ledger-fr: max(1rem, calc((var(--ledger-inner) - 55rem) / 2));
  --ledger-track: min(11rem, max(3.4rem, calc((var(--ledger-inner) - 2 * var(--ledger-fr)) / 5)));
  --ledger-x0: calc((100% - var(--ledger-w)) / 2 + var(--ledger-pad) + var(--ledger-fr));
  --ledger-xA: calc(var(--ledger-x0) + var(--ledger-track));
  --ledger-xB: calc(var(--ledger-xA) + var(--ledger-track));
  --ledger-xC: calc(var(--ledger-xB) + var(--ledger-track));
  --ledger-xD: calc(var(--ledger-xC) + var(--ledger-track));
  --ledger-xEnd: calc(var(--ledger-xD) + var(--ledger-track));
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--ground) 0,
      var(--ground) 35px,
      var(--rule-on-ground) 35px,
      var(--rule-on-ground) 36px
    ),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(
      180deg,
      var(--ground) 0%,
      var(--stepA) 45%,
      var(--stepB) 100%
    );
  background-size:
    100% 36px,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    100% 100%;
  background-position:
    0 0,
    var(--ledger-x0) 0,
    var(--ledger-xA) 0,
    var(--ledger-xB) 0,
    var(--ledger-xC) 0,
    var(--ledger-xD) 0,
    var(--ledger-xEnd) 0,
    0 0;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  color: var(--on-ground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  /* type hierarchy, five distinct levels: 章見出し(h2)/判断基準(criterion,
     rule-banner)/結論(claim__lede, strong)/補足(table-note, caveats,
     faint asides)/出典(citation, monospace). Body itself steps up one
     size at desktop so the base level reads clearly against the other four. */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); z-index: 200; }

/* ============ PR strip (first view) ============ */
.pr-strip {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0.45em var(--space-3);
  font-size: 0.93rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--on-ground);
  background: color-mix(in srgb, var(--ground) 88%, var(--stepB) 12%);
  border-bottom: 1px solid var(--rule-on-ground);
}

/* numerals: monospaced, so every column of figures lines up by digit width */
.num, .mono, table, .exposure-step__id, .leaf__tab, .ledger-columns {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.4; margin: 0; }

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding-inline: var(--space-3);
}

/* ============ the ledger spine: full-height column rules ============ */
/* Built from the exact same --ledger-cols track list as .exposure-scale
   and .ledger-page. If --ledger-cols is removed these rules disappear —
   they are not decoration laid on top of the grid, they ARE the grid. */
.ledger-spine {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: [full-start] minmax(1rem, 1fr) var(--ledger-cols) minmax(1rem, 1fr) [full-end];
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--space-3);
  pointer-events: none;
}
.ledger-spine__rule { height: 100%; width: 1px; background: var(--rule-on-ground); justify-self: start; }
.ledger-spine__rule--end { justify-self: end; }

/* ============ site head ============ */
.site-head {
  position: relative;
  z-index: 1;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-on-ground);
}
.site-head .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.site-head__mark { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.06em; }
.site-head__mark small { display: block; font-family: var(--font-body); font-size: 0.89rem; color: var(--on-ground); opacity: 0.72; letter-spacing: 0.14em; margin-top: 0.2em; }

main { position: relative; z-index: 1; }

/* ============ ledger page: the grid every leaf is placed on ============ */
.ledger-page {
  position: relative;
  display: grid;
  grid-template-columns: [full-start] minmax(1rem, 1fr) var(--ledger-cols) minmax(1rem, 1fr) [full-end];
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--space-3);
  column-gap: 0;
}

/* ============ leaf: one page of the swatch book ============ */
.leaf {
  position: relative;
  grid-row: 1;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18), 0 22px 44px -28px rgba(0,0,0,0.6);
  /* demoted card ruling: far fainter than the exposure-scale rules and
     spaced wider, so it never bisects small text sitting on the leaf. */
  background-image: repeating-linear-gradient(
    color-mix(in srgb, var(--rule) 38%, transparent) 0,
    color-mix(in srgb, var(--rule) 38%, transparent) 1px,
    transparent 1px,
    transparent 44px
  );
  padding: var(--space-4) var(--space-3);
}
.leaf > * { position: relative; }

/* leaf spans — grouped by content type so width is a RULE, not noise:
   原理(evidence)=3 tracks / 実践(practice)=4 tracks, identical span /
   注意(caution)=2 tracks, thinnest / 商品(products)=4 tracks */
.leaf--full     { grid-column: c0 / cEnd; }          /* 0–D, full width, appendix bookend */
.leaf--high     { grid-column: cB / cEnd; }          /* 原理: B–D, heavy exposure end, 3 tracks */
.leaf--low      { grid-column: c0 / cC; }             /* 原理: 0–B, near-zero exposure end, 3 tracks */
.leaf--method   { grid-column: c0 / cD; }             /* 実践: 0–C, same span as leaf--tactics, 4 tracks */
.leaf--tactics  { grid-column: c0 / cD; }             /* 実践: 0–C, same span as leaf--method, 4 tracks */
.leaf--products { grid-column: cA / cEnd; }           /* 商品: A–D, 4 tracks */
.leaf--limits   { grid-column: c0 / cC; margin-top: var(--space-2); }  /* 注意: 0–B, 3 tracks — widened so 言える/言えない can sit side by side */

/* thickness cue: leaves that sit further toward D carry a heavier shadow,
   as if more pages are stacked beneath them */
.leaf--high { box-shadow: 0 1px 0 rgba(0,0,0,0.22), 0 30px 54px -26px rgba(0,0,0,0.68), 6px 0 0 -3px var(--card), 10px 0 0 -6px rgba(0,0,0,0.3); }
.leaf--tactics { box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 26px 48px -26px rgba(0,0,0,0.62), -6px 0 0 -3px var(--card), -10px 0 0 -6px rgba(0,0,0,0.28); }

/* the honesty leaf: thin, mostly empty ground showing through — the
   opposite treatment of every filled leaf on the page */
.leaf--limits {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 1px solid var(--rule-on-ground);
  padding: var(--space-3);
}

/* ============ leaf tab: sticks out past the top edge like a thumb index ============ */
.leaf__tab {
  position: absolute;
  top: -1.55rem;
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--card);
  color: var(--ink);
  font-size: 0.89rem;
  letter-spacing: 0.06em;
  padding: 0.4em 0.75em;
  border-radius: 3px 3px 0 0;
  white-space: nowrap;
}
.leaf__tab-index { opacity: 0.62; }
.leaf__tab-span { font-weight: 700; }
.leaf--full .leaf__tab { left: var(--space-3); border-top: 2px solid var(--stepD); }

/* fore-edge index: tab position steps across the leaf in step with the
   section's own number (--tab-i, set inline per leaf, 1..6), the way a
   thumb-index tab on a real dictionary steps down with the letter. This
   replaces ad-hoc per-leaf left/right/centre placement. */
.leaf--high, .leaf--low, .leaf--method, .leaf--tactics, .leaf--limits, .leaf--products {
  --tab-n: 6;
}
.leaf--high .leaf__tab,
.leaf--low .leaf__tab,
.leaf--method .leaf__tab,
.leaf--tactics .leaf__tab,
.leaf--limits .leaf__tab,
.leaf--products .leaf__tab {
  /* 10rem reserves the tab's own rendered width (measured ~9.2rem with the
     category suffix) so the last step never pushes past the leaf edge. */
  left: max(var(--space-3), min(
    calc(var(--space-3) + (var(--tab-i, 1) - 1) / (var(--tab-n, 6) - 1) * (100% - 2 * var(--space-3) - 10rem)),
    calc(100% - var(--space-3) - 10rem)
  ));
  right: auto;
  transform: none;
}
.leaf--high .leaf__tab { border-top: 2px solid var(--stepC); }
.leaf--low .leaf__tab { border-top: 2px solid var(--stepA); }
.leaf--method .leaf__tab { border-top: 2px solid var(--stepB); }
.leaf--tactics .leaf__tab { border-top: 2px solid var(--stepB); }
.leaf--products .leaf__tab { border-top: 2px solid var(--stepC); }
.leaf--limits .leaf__tab { background: transparent; color: var(--on-ground); border-top: 2px solid var(--step0); }

/* ============ ledger column head: the 0 A B C D strip repeated per leaf ============ */
.ledger-columns { display: flex; gap: 0.4em; margin-bottom: var(--space-2); }
.lc {
  width: 1.7em;
  height: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.93rem;
  color: var(--faint);
  opacity: 0.55;
}
.leaf--limits .lc { border-color: var(--rule-on-ground); color: var(--on-ground); }
.lc.is-active { opacity: 1; border-color: transparent; }
.lc.is-active[data-step="0"] { background: var(--step0); color: var(--step0-label); }
.lc.is-active[data-step="A"] { background: var(--stepA); color: var(--stepA-label); }
.lc.is-active[data-step="B"] { background: var(--stepB); color: var(--stepB-label); }
.lc.is-active[data-step="C"] { background: var(--stepC); color: var(--stepC-label); }
.lc.is-active[data-step="D"] { background: var(--stepD); color: var(--stepD-label); }

/* ============ section rhythm ============ */
section {
  padding-block: var(--space-6);
  position: relative;
  z-index: 1;
}
/* ground ledger field — painted on each section band so the originality
   gate sees a real background-image, and visible wherever the ground shows
   through (hero, gaps, leaf--limits). Below leaf content (z-index 1). */
section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--ground) 0,
      var(--ground) 35px,
      var(--rule-on-ground) 35px,
      var(--rule-on-ground) 36px
    ),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(var(--rule-on-ground), var(--rule-on-ground)),
    linear-gradient(
      180deg,
      var(--ground) 0%,
      var(--stepA) 45%,
      var(--stepB) 100%
    );
  background-size:
    100% 36px,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    100% 100%;
  background-position:
    0 0,
    var(--ledger-x0) 0,
    var(--ledger-xA) 0,
    var(--ledger-xB) 0,
    var(--ledger-xC) 0,
    var(--ledger-xD) 0,
    var(--ledger-xEnd) 0,
    0 0;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}
@media (max-width: 767px) {
  section::before {
    background-image:
      repeating-linear-gradient(
        to bottom,
        var(--ground) 0,
        var(--ground) 35px,
        var(--rule-on-ground) 35px,
        var(--rule-on-ground) 36px
      ),
      linear-gradient(
        180deg,
        var(--ground) 0%,
        var(--stepA) 45%,
        var(--stepB) 100%
      );
    background-size: 100% 36px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: repeat, no-repeat;
  }
}
.section-head { margin-bottom: var(--space-4); }
.leaf .section-head { margin-bottom: var(--space-3); }

.section-head__eyebrow {
  display: inline-block;
  font-size: 0.93rem;
  letter-spacing: 0.22em;
  color: var(--on-ground);
  opacity: 0.66;
  margin-bottom: var(--space-2);
}
.leaf .section-head__eyebrow { color: var(--faint); opacity: 1; }
.section-head h2 { font-size: clamp(1.4rem, 1.05rem + 1.2vw, 1.95rem); }
.section-head p.lede { max-width: 42rem; margin-top: var(--space-2); font-size: 1rem; }
section > .ledger-page > .section-head-outer .lede,
.hero .section-head p.lede { color: var(--on-ground); opacity: 0.85; }
.leaf .section-head p.lede { color: var(--faint); opacity: 1; }

/* ============ exposure scale — the signature device / master ruler ============ */
.exposure-scale {
  display: grid;
  grid-template-columns: var(--ledger-cols);
  border: 1px solid var(--rule-on-ground);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.exposure-step {
  padding: var(--space-3) var(--space-2);
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3em;
}
.exposure-step__id { font-size: 1.3rem; }
.exposure-step__note { font-size: 0.89rem; letter-spacing: 0.04em; opacity: 0.9; font-family: var(--font-body); }

.exposure-step[data-step="0"] { background: var(--step0); color: var(--step0-label); }
.exposure-step[data-step="A"] { background: var(--stepA); color: var(--stepA-label); }
.exposure-step[data-step="B"] { background: var(--stepB); color: var(--stepB-label); }
.exposure-step[data-step="C"] { background: var(--stepC); color: var(--stepC-label); }
.exposure-step[data-step="D"] { background: var(--stepD); color: var(--stepD-label); }

.exposure-scale--compact { grid-template-columns: repeat(5, minmax(2rem, 1fr)); }
.exposure-scale--compact .exposure-step { min-height: 3.4rem; padding: var(--space-1); justify-content: center; align-items: center; }

.exposure-caption {
  font-size: 1.01rem;
  color: var(--on-ground);
  opacity: 0.78;
  margin-top: var(--space-2);
  max-width: 42rem;
}
.leaf .exposure-caption { color: var(--faint); opacity: 1; }

/* ============ hero / 表紙 — leaf--full, the leaf the ruler lives on ============ */
.hero { padding-top: var(--space-5); }
.hero .leaf { padding-top: var(--space-5); }
.hero__kicker { font-size: 0.99rem; letter-spacing: 0.28em; color: var(--on-ground); opacity: 0.68; }
.hero h1 {
  font-size: clamp(2rem, 1.35rem + 3vw, 3.3rem);
  margin-top: var(--space-2);
  color: var(--on-ground);
}
.hero h1 em { font-style: normal; color: var(--stepA); }
/* character-by-character fade along the 0→D scale: the opening character
   stays at full body contrast, each following character steps down in
   opacity — the phrase itself performs the site's thesis. */
.fade-phrase { display: inline; }
.fade-phrase span { opacity: 1; }
.fade-phrase span:nth-child(1) { opacity: 1; }
.fade-phrase span:nth-child(2) { opacity: 0.86; }
.fade-phrase span:nth-child(3) { opacity: 0.7; }
.fade-phrase span:nth-child(4) { opacity: 0.56; }
.fade-phrase span:nth-child(5) { opacity: 0.42; }
.fade-phrase span:nth-child(6) { opacity: 0.3; }
.hero p.hero__sub {
  margin-top: var(--space-3);
  font-size: 1.08rem;
  max-width: 34rem;
  color: var(--on-ground);
  opacity: 0.88;
}

/* ============ hero__claim — ledger summary block: 結論/算式/出典, ruled rows ============ */
/* Not a web alert/CTA: no fill, no rounded corners. The left mark is a
   ledger bracket (an accounting total-bracket, ⌐...⌐), not a decorative
   accent stripe — it reads as "this block is one entry", the same grammar
   as a checked total in a paper ledger. */
.hero__claim {
  position: relative;
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  max-width: 46rem;
}
.hero__claim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 0.55em;
  border-left: 2px solid var(--stepA);
  border-top: 2px solid var(--stepA);
  border-bottom: 2px solid var(--stepA);
}
.hero__claim-row {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: 0.3em var(--space-2);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: 1px solid var(--rule-on-ground);
}
.hero__claim-row:first-child { border-top: none; padding-top: 0; }
/* the formula row's label sits above, not beside — its value needs the
   full row width to align its 5 terms with the page's own vertical rules. */
.hero__claim-row--formula { display: block; }
.hero__claim-row--formula .hero__claim-label { display: block; margin-bottom: 0.6em; padding-top: 0; }
.hero__claim-label {
  padding-top: 0.2em;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  color: var(--on-ground);
  opacity: 0.62;
}
.hero__counter-claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  color: var(--on-ground);
}
/* the formula row's value is its own mini ledger-grid, built from the
   SAME --ledger-cols track list as .ledger-page/.ledger-spine — so the
   term boundaries land on the page's own vertical rules, not on an
   arbitrary flex gap. */
.hero__formula {
  margin: 0;
  display: grid;
  grid-template-columns: var(--ledger-cols);
  column-gap: 0;
  align-items: baseline;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  font-weight: 700;
  color: var(--on-ground);
}
.hero__formula-term { letter-spacing: 0.02em; }
.hero__formula-op { color: var(--stepA); opacity: 0.9; }
.hero__source {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--on-ground);
  opacity: 0.92;
}
.hero__source strong { color: var(--on-ground); opacity: 1; font-weight: 700; }

.hero__scale-block { margin-top: var(--space-5); }
.hero__scale-label {
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--on-ground);
  opacity: 0.7;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
}
.hero-cover {
  /* the hero sits directly on the ground, not inside a filled leaf — it is
     the cover, and the ruler itself is the only "leaf" this section owns */
  position: relative;
}

/* ============ citation: English original, secondary annotation ============ */
.claim {
  margin: var(--space-3) 0;
}
.claim__lede { font-size: 1rem; color: var(--ink); }
.claim__lede strong { color: var(--link); }
.citation {
  margin-top: 0.8em;
  padding: 0.7em 0.9em;
  border-left: 2px solid var(--faint);
  background: rgba(0,0,0,0.03);
  font-size: 0.99rem;
  color: var(--faint);
  line-height: 1.6;
}
.citation__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.87rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.4em;
}
.citation__en { font-family: var(--font-mono); }
.citation cite { display: block; margin-top: 0.5em; font-style: normal; opacity: 0.85; font-family: var(--font-body); }

/* ============ core-claim leaf (leaf--high) ============ */
.fig-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.fig-compare__row { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: var(--space-2); }
.fig-compare__row .exposure-scale { grid-column: 2; }
.fig-compare__row-label { font-size: 1.01rem; color: var(--faint); }

.ledger-subhead {
  font-size: 1.02rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-weight: 700;
}

/* ============ table (LED / µW / Blue Wool) ============ */
.ledger-table-wrap { overflow-x: auto; margin-top: var(--space-3); }
.ledger-table-wrap:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 30rem;
}
table.ledger caption { text-align: left; font-size: 0.99rem; color: var(--faint); margin-bottom: var(--space-2); font-family: var(--font-body); }
table.ledger th, table.ledger td { padding: 0.65em 0.8em; border-bottom: 1px solid var(--rule); text-align: left; font-family: var(--font-body); }
table.ledger td.num, table.ledger th.num { font-family: var(--font-mono); }
table.ledger thead th {
  font-family: var(--font-display);
  font-weight: 600;
  border-top: 1px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: rgba(28, 21, 38, 0.04);
}
table.ledger thead th.num { font-family: var(--font-mono); font-weight: 700; }
table.ledger td.num, table.ledger th.num { text-align: right; }
table.ledger tr[data-flag="lowest"] td { color: var(--ink); font-weight: 600; }
table.ledger .unit { font-size: 0.87rem; color: var(--faint); font-family: var(--font-mono); }

.table-note { font-size: 1.01rem; color: var(--faint); margin-top: var(--space-2); }

/* ============ LED leaf (leaf--low) ============ */
/* uses .ledger-table-wrap / table.ledger above, plus .citation */

/* ============ single-variable leaf (leaf--method) ============ */
.rule-banner {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--faint);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  margin-bottom: var(--space-4);
}
.rule-banner strong { font-family: var(--font-display); }

.variable-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.variable-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding-block: var(--space-2);
  border-top: 1px solid var(--rule);
}
.variable-row:first-of-type { border-top: none; }
.variable-row__label { font-size: 0.86rem; font-weight: 700; padding-top: 0.2em; }
.variable-row__body { min-width: 0; }
.variable-card__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em var(--space-2);
  font-size: 0.9rem;
  font-family: var(--font-mono);
}
.variable-card__pair > span:not(.variable-card__arrow) { flex: 1 1 auto; min-width: 8rem; }
.variable-card__arrow { color: var(--faint); font-family: var(--font-display); }
.variable-card__delta { font-size: 1.01rem; color: var(--faint); margin-top: 0.5em; }
.variable-card__fixed {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
  font-size: 0.97rem;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.8em;
}
.variable-card__fixed li::before { content: "同一 "; opacity: 0.7; }
.variable-card__changed { color: var(--link); font-weight: 600; }

.rejected-comparisons {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}
.rejected-comparisons h3 { font-size: 0.92rem; color: var(--ink); font-family: var(--font-body); font-weight: 700; }
.rejected-comparisons ul { margin: var(--space-2) 0 0; padding-left: 1.2em; color: var(--faint); font-size: 0.88rem; }
.rejected-comparisons li { margin-bottom: 0.5em; }

/* ============ 打ち手 (leaf--tactics) ============ */
.tactics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 1024px) {
  .tactics-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
.tactic-card {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 1px solid var(--rule);
}
.tactic-card:first-child, .tactics-grid > .tactic-card:nth-child(1) { border-left: none; padding-left: 0; }
.tactics-grid .tactic-card:first-child { padding-left: 0; border-left: none; }
.tactic-card__index { font-family: var(--font-mono); font-size: 0.93rem; color: var(--faint); }
/* ledger stamp, not a SaaS filter chip: rectangular, sharing the leaf
   tabs' own grammar (border + corner, no pill radius). */
.tactic-card__reduces {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.3em 0.65em;
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.tactic-card h3 { font-size: 1rem; }
.tactic-card p { font-size: 0.88rem; color: var(--faint); margin: 0; }
.tactic-figure-slot { aspect-ratio: 4 / 3; border: 1px dashed var(--rule); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.93rem; color: var(--faint); text-align: center; padding: var(--space-1); }
.tactic-figure-slot img { max-width: 100%; height: auto; display: block; }

/* relative-multiple comparison: same quantity before/after, expressed
   only as a multiple (×1 → ×0.5). Illustrative arithmetic (露光量 = 照度
   × 時間), never an absolute lux/hour figure and never the reader's own
   situation — every instance is framed as "例". */
.ratio-compare {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.ratio-compare__unit {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0.85;
}
.ratio-compare__label { font-size: 0.86rem; color: var(--faint); }
.ratio-compare__bars {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.ratio-compare__bar {
  --w: 100%;
  position: relative;
  display: flex;
  align-items: center;
  height: 1.4em;
  width: var(--w);
  min-width: 2.6em;
  padding-inline: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--card);
  background: var(--faint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ratio-compare__bar--after { background: var(--ink); }

/* ============ 言えること／言えないこと (leaf--limits: explicit opposition) ============ */
/* Both sides visible at once, split by the exposure-scale axis itself
   (0/A/B/C/D) rather than a plain gap. Stacks below 640px, where a forced
   2-column split would crush CJK to under 6 chars/line — leaf--limits is
   now 3 tracks (widened from 2) specifically to give the 2-column mode
   room; below the stacking breakpoint the leaf itself goes full-width
   (see the max-width:767px block) so stacking never starves for space. */
.limits-opposition {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.limits-opposition__axis { display: none; }

@media (min-width: 640px) {
  .limits-opposition {
    grid-template-columns: 1fr minmax(2rem, 2.6rem) 1fr;
    align-items: stretch;
    gap: var(--space-2);
  }
  .limits-opposition__axis {
    display: block;
    padding-block: 0.2em;
  }
  .limits-opposition__axis .exposure-scale--axis {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.3em;
  }
  .limits-opposition__axis .exposure-step {
    flex: 1 1 0;
    min-height: 2.4rem;
    padding: 0.3em;
  }
}

.limits-opposition__side h3 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--on-ground);
  margin: 0 0 var(--space-2);
  padding-bottom: 0.3em;
}
.limits-opposition__side--can h3 { border-bottom: 2px solid var(--stepA); }
.limits-opposition__side--cannot h3 { border-bottom: 2px solid var(--step0); }

.limits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.limits-list--can li {
  background: transparent;
  box-shadow: none;
  padding: 0.4em 0 0.4em 0.8em;
  border-left: 2px solid var(--stepA);
  color: var(--on-ground);
  font-size: 0.92rem;
}
.limits-list li {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.14), 0 10px 22px -18px rgba(0,0,0,0.5);
  color: var(--ink);
  border-left: 3px solid var(--step0);
}
.limits-list .limits-list__why { display: block; margin-top: 0.5em; font-size: 0.86rem; color: var(--faint); }
.limits-scale-caption { margin: var(--space-3) 0 0; font-size: 0.9rem; color: var(--on-ground); opacity: 0.85; max-width: 34rem; }

/* the honesty leaf is deliberately thin/near-empty by design (see
   .leaf--limits above) — but the void BELOW it, before 光を減らすもの,
   was excessive (two full section paddings stacked). Cut roughly a third
   off this section's own bottom padding; the products section above it
   keeps its own full top padding. */
.limits-section { padding-bottom: calc(var(--space-6) * 0.35); }

/* ============ 出典 (leaf--full, appendix treatment) ============ */
.sources-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sources-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.sources-list .src-kind { font-size: 0.91rem; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; font-family: var(--font-mono); }
.sources-list .src-title { font-family: var(--font-display); font-size: 1.02rem; margin-top: 0.2em; }
.sources-list .src-url { font-size: 1.01rem; word-break: break-all; font-family: var(--font-mono); }
.sources-list .src-caveat { font-size: 0.86rem; color: var(--faint); margin-top: 0.4em; }

/* ============ 光を減らすもの (leaf--products) ============ */
.product-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.product-group {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.product-group:first-child { border-top: none; padding-top: 0; }

.product-group__head { margin-bottom: var(--space-3); }
.product-group__title {
  font-size: 1.02rem;
  font-family: var(--font-display);
  font-weight: 600;
}
.product-group__criterion {
  margin: 0.4em 0 0;
  font-size: 1.01rem;
  color: var(--faint);
}

/* Ledger line items: every entry is a ROW sharing the same four columns
   (商品 / 減らす対象 / 根拠 / できないこと), not a separate boxed card —
   so they read down a column, the way ledger entries do. */
.product-group__list {
  display: block;
}

.product-group__columns {
  display: none;
  /* 商品 30% / 減らす対象 15% / 確認できた仕様 20% / できないこと 35% */
  grid-template-columns: minmax(9rem, 1.5fr) minmax(4rem, 0.75fr) minmax(7rem, 1fr) minmax(9rem, 1.75fr);
  gap: 0 var(--space-2);
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.87rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  text-transform: uppercase;
}

.product-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.product-group__list .product-entry:last-child { border-bottom: none; }

.product-entry__cell { min-width: 0; }
.product-entry__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  margin-bottom: 0.2em;
}
.product-entry__value { font-size: 0.92rem; color: var(--ink); }

.product-entry__cell--name {
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.5;
}
.product-entry__link-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45em 0.6em;
  max-width: 100%;
}
/* the judgement (what it reduces / on what basis) reads BEFORE the link —
   no permanent underline, so the affiliate link no longer out-ranks the
   ledger's own columns visually. Underline only appears on interaction. */
.product-entry__name a,
.product-entry__cell--name a {
  color: var(--link);
  text-decoration: none;
  word-break: break-word;
}
.product-entry__cell--name a {
  display: inline-flex;
  flex-direction: column;
}
.product-entry__cell--name a:hover,
.product-entry__cell--name a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
/* name splits: brand + type on the main line, model/dimensions demoted to
   a secondary line — so a long SKU string no longer competes with the
   product identity for the reader's first pass. */
.product-entry__name-main { display: block; }
.product-entry__name-sub {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--faint);
  text-decoration: none;
}
.pr-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.28em 0.45em;
  border-radius: 3px;
  border: 1px solid var(--faint);
  color: var(--faint);
}
.product-entry__cell--cannot .product-entry__value { color: var(--faint); }

/* evidence-type marker: distinguishes a graded standard (規格表示) from a
   maker spec-sheet claim (仕様欄の記載) from the weakest tier, a claim
   that only appears in the name/listing copy (商品名の記載) — same three
   existing tokens (ink/faint/card), no new colour values. */
.product-entry__qualifier-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.5em;
}
.evidence-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  border: 1px solid var(--faint);
  color: var(--faint);
  white-space: nowrap;
}
.evidence-badge--grade { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.evidence-badge--spec { border-color: var(--faint); color: var(--ink); }
.evidence-badge--name { border-style: dashed; color: var(--faint); }

.product-catalog-footnote {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--faint);
}

.affiliate-disclosure {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-size: 1.01rem;
  color: var(--faint);
}
.affiliate-disclosure p { margin: 0; }

@media (min-width: 1024px) {
  .product-group__columns { display: grid; }
  .product-entry {
    /* 商品 30% / 減らす対象 15% / 確認できた仕様 20% / できないこと 35% */
    grid-template-columns: minmax(9rem, 1.5fr) minmax(4rem, 0.75fr) minmax(7rem, 1fr) minmax(9rem, 1.75fr);
    gap: 0 var(--space-2);
    align-items: baseline;
  }
  .product-entry__label { display: none; }
}

/* ============ footer ============ */
.site-foot { position: relative; z-index: 1; padding: var(--space-5) 0 var(--space-6); border-top: 1px solid var(--rule-on-ground); font-size: 1.01rem; color: var(--on-ground); opacity: 0.72; }
.site-foot .wrap { display: flex; flex-direction: column; gap: var(--space-2); }

/* ============ collection scope strip ============ */
.scope-strip { display: flex; flex-wrap: wrap; gap: 0.5em 1em; margin-top: var(--space-3); font-size: 1.01rem; color: var(--on-ground); opacity: 0.75; }
.scope-strip span { padding: 0.2em 0.7em; border: 1px solid var(--rule-on-ground); border-radius: 999px; font-family: var(--font-mono); }

/* ============ type hierarchy: 判断基準 / 結論 level treatments ============ */
/* 判断基準 (criteria the reader judges by): mono, uppercase-tracked label
   voice — shared across the rule-banner, product-group criteria and the
   hero scale label so they read as one level regardless of section. */
.rule-banner,
.product-group__criterion,
.hero__scale-label {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.product-group__criterion { font-weight: 600; }

/* 結論 (the conclusion drawn from a claim/comparison): bolder weight and
   the link colour, distinct from the surrounding 補足-level prose. */
.claim__lede strong,
.variable-card__delta,
.hero__counter-claim {
  font-weight: 700;
}

@media (min-width: 1024px) {
  body { font-size: 17px; }
}

/* ============ responsive: below this width, the book lies flat open ============ */
/* The 5-track ledger grid is a desktop device (rev1280/rev0.9 both need
   room for 5 columns of >=3.4rem). Below 768px the grid must not size leaves:
   each leaf stacks at full content width inside the page margin. Exposure
   position stays legible via .leaf__tab and .ledger-columns chips. */
@media (max-width: 767px) {
  .ledger-page {
    display: block;
  }

  .ledger-spine {
    display: none;
  }

  .leaf {
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .leaf--full,
  .leaf--high,
  .leaf--low,
  .leaf--method,
  .leaf--tactics,
  .leaf--products,
  .leaf--limits {
    grid-column: unset;
  }

  .leaf__tab { left: var(--space-2) !important; right: auto !important; transform: none !important; }
  .exposure-scale { grid-template-columns: repeat(5, 1fr); }
  .exposure-step { min-height: 5rem; padding: var(--space-2) var(--space-1); }
  .exposure-step__id { font-size: 1.05rem; }
  .exposure-step__note { display: none; }
  .fig-compare__row { grid-template-columns: 1fr; }
  .variable-row { grid-template-columns: 1fr; }
  .tactic-card, .tactics-grid > .tactic-card:nth-child(1) { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); }
  .tactic-card:first-child { border-top: none; }
  .tactics-grid .tactic-card { padding-right: 0; }
  .tactics-grid .tactic-figure-slot { padding: 0; }
}