/* FUBUKI BLOCKS — client-data（これまで。）ページ専用。styles.css の後に読む */
.hero-cd { background:
    radial-gradient(42% 60% at 28% 72%, rgba(150, 80, 255, .45), transparent 70%),
    radial-gradient(46% 64% at 72% 35%, rgba(41, 141, 255, .55), transparent 70%),
    radial-gradient(34% 44% at 55% 80%, rgba(106, 195, 241, .35), transparent 70%),
    radial-gradient(40% 50% at 15% 20%, rgba(12, 60, 140, .6), transparent 70%),
    #05070b; }
.hero-cd .hero-word-top { font-size: clamp(56px, 10.6vw, 188px); }
.hero-cd .hero-word-bottom { font-size: clamp(32px, 7.2vw, 128px); }

/* summary: 大きな数字 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: -16px 0 64px; border-top: 1px solid var(--rule); }
.stats > div { padding: 26px 20px 28px 0; border-bottom: 1px solid var(--rule); }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--soft); }
.stats b { display: block; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(44px, 5.4vw, 92px); line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stats b .num { font: inherit; }
.stats b small { font-family: var(--jp); font-size: .34em; font-weight: 800; letter-spacing: 0; margin-left: .15em; }
.stats > div:nth-child(3) b { color: var(--signal-ink); }
.stats > div > span { display: block; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }

/* data rows */
.data { padding-bottom: 96px; }
.data .giant { margin-bottom: 0; border-bottom: 0; }
.data-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px 72px; align-items: start; padding: 56px 0 64px; border-top: 1px solid var(--rule); }
.data-copy .sec-head { border-top: 0; padding-top: 0; }
.data-copy h2 { margin: 22px 0 20px; font-size: clamp(26px, 3vw, 46px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.data-copy p { margin: 0 0 14px; font-size: 14px; line-height: 1.95; }
.data-copy .detail { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--soft); font-size: 12px; line-height: 1.9; color: var(--muted); }
.data-copy .detail a { text-decoration: underline; text-underline-offset: 3px; }
.data .note { margin-top: 56px; }

/* bar charts */
.chart { padding-top: 6px; --bar: var(--ink); }
.chart svg { width: 100%; height: auto; display: block; font-family: var(--mono); overflow: visible; }
.chart .axis { stroke: var(--soft); stroke-width: 1; }
.chart .lbl { font-size: 11px; letter-spacing: .04em; fill: currentColor; }
.chart .val { font-size: 11px; font-weight: 700; fill: currentColor; }
.chart rect.bar { fill: var(--bar); transform-box: fill-box; transform-origin: left center; transition: transform .9s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--i) * 60ms + .15s); }
.chart rect.bar.top { fill: var(--signal); }
.chart .val { transition: opacity .5s ease; transition-delay: calc(var(--i) * 60ms + .75s); }
.js .chart:not(.is-in) rect.bar { transform: scaleX(0); }
.js .chart:not(.is-in) .val { opacity: 0; }
.chart-note { margin: 14px 0 0; font-size: 11px; line-height: 1.8; color: var(--muted); }

/* ring (75%) */
.ring { max-width: 300px; margin: 0 auto; font-family: var(--display); }
.ring .bg { fill: none; stroke: var(--soft); stroke-width: 10; }
.ring .fg { fill: none; stroke: var(--signal); stroke-width: 10; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: center; stroke-dasharray: var(--c); stroke-dashoffset: calc(var(--c) * (1 - var(--p))); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .1, 1) .2s; }
.js .chart:not(.is-in) .ring .fg { stroke-dashoffset: var(--c); }
.ring .pct { font-size: 34px; font-weight: 900; font-stretch: 125%; letter-spacing: -.04em; fill: currentColor; text-anchor: middle; dominant-baseline: central; }
.ring .unit { font-size: 16px; font-weight: 700; }
.ring-label { margin: 10px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }

/* works list（ink帯） */
.issues.works li { align-items: baseline; font-weight: 400; font-size: 14px; line-height: 1.85; }
.issues.works .idx { flex: none; }
.issues.works li b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.issues.works li:first-child { border-top: 0; }
.works { border-top: 0; }

/* dark variants */
.data.green { background: linear-gradient(180deg, #0d3a1c 0%, #082313 38%, var(--deep) 100%); color: #eef1ee; --rule: rgba(238, 241, 238, .7); --soft: rgba(238, 241, 238, .2); --muted: #b7c4ba; --ink: #eef1ee; }
.data.green .giant { color: var(--signal); }
.data.green .idx, .data.green .sec-head .idx { color: var(--signal); }
.data.green h2 { color: #fff; }
.data.green .chart { --bar: #eef1ee; }
.data.ink { background: #16191d; color: var(--bg); --rule: #f2f3f455; --soft: #f2f3f42e; --muted: #b9b9b6; --ink: #f2f3f4; }
.data.ink .idx, .data.ink .sec-head .idx { color: var(--signal); }
.data.ink .chart { --bar: #f2f3f4; }
.data.ink .note { color: #b9b9b6; }

/* reveal (blocks.js が [data-reveal] を監視) */
.js .chart[data-reveal]:not(.is-in) { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .data-row { gap: 32px 48px; }
}
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .data-row { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 48px; }
}
@media (max-width: 600px) {
  .stats > div { padding: 18px 12px 20px 0; }
  .stats b { font-size: 40px; }
  .data { padding-bottom: 64px; }
  .chart .lbl, .chart .val { font-size: 13px; }
  .issues.works li { font-size: 13px; }
}