/* HaruIroAI Journal — shares the homepage's design language (haruiroai-design).
   Tokens below mirror site/index.html's :root exactly; no webfonts are loaded,
   matching the homepage's system-mincho/gothic strategy so both pages render
   with the identical type on the same device. */

:root {
  color-scheme: light;
  --paper: #FBFAF5;
  --paper-raised: #FDFCF8;
  --paper-deep: #F3F1E8;
  --ink-900: #262420;
  --ink-600: #57503F;
  --ink-400: #8A8267;
  --sage: #8A9A5B;
  --sage-deep: #6B7A45;
  --sage-text: #5D6B3C;
  --sakura: #D9A8B4;
  --nanohana: #C9A83C;
  --nanohana-soft: #F4EBC4;
  --sage-soft: #E7EADC;
  --line: #E4DDC9;
  --white: #FFFEFA;
  --muted: var(--ink-600);
  --ink: var(--ink-900);
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--gothic);
  color: var(--ink-900);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); line-height: 1.9; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sage-text); text-underline-offset: .28em; text-decoration-thickness: 1px; }
a:hover { color: #4A5630; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--nanohana); outline-offset: 4px; }
button { font: inherit; }

/* keep-all made long JP heading runs unbreakable on narrow screens, forcing
   overflow-wrap to emergency-break mid-word (e.g. ありませ|ん。). Use normal
   JP line breaking, with phrase-based wrapping where the browser supports it. */
h1, h2, h3 { word-break: normal; line-break: strict; overflow-wrap: break-word; hanging-punctuation: allow-end; text-wrap: pretty; }
@supports (word-break: auto-phrase) {
  h1, h2, h3 { word-break: auto-phrase; }
}

.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.shell-narrow { width: min(760px, calc(100% - 48px)); margin-inline: auto; }

.site-header { position: relative; z-index: 10; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px max(24px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); background: rgba(251,250,245,.96); }
.brand img { width: auto; height: 22px; }
.header-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; font-family: var(--gothic); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--ink-900); border-radius: 3px; text-decoration: none; box-shadow: inset 0 -3px 0 var(--sage); transition: background .3s var(--ease); }
.header-link:hover { color: #fff; background: #3A362E; }

.eyebrow { margin: 0 0 18px; font-family: var(--gothic); font-size: 12px; font-weight: 700; letter-spacing: .28em; color: var(--sage-text); }
.eyebrow::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--nanohana); margin-right: 10px; vertical-align: 4px; }

/* ---- Journal stage: paper gradient + washed Koharu, shared by hero and the
   latest-note panel so the illustration reads as one continuous backdrop,
   the same composition as the homepage's CH.05 band. ---- */
.journal-stage { position: relative; overflow: hidden;
  background:
    radial-gradient(46% 34% at 86% 8%, rgba(201,168,60,.13), transparent 72%),
    radial-gradient(60% 70% at 76% 36%, rgba(138,154,91,.10), transparent 75%),
    linear-gradient(180deg, var(--paper-raised), var(--paper)); }
/* The watermark reuses the homepage cinema's own frame (the CH.05 backdrop
   the Human pointed to as the reference), NOT the article eyecatch — the
   eyecatch appears crisp in the banner card below, so the two must differ. */
.stage-koharu { position: absolute; inset: 0; pointer-events: none;
  background-image: url('/media/cinema/i/frame-090.webp');
  background-repeat: no-repeat;
  background-size: max(1380px, 104vw) auto;
  background-position: left clamp(-140px, -6vw, -60px) top clamp(-70px, -3vw, -20px);
  opacity: .38;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 96%); }

.chlabel { position: absolute; left: clamp(12px, 1.8vw, 28px); top: clamp(240px, 34vh, 400px); z-index: 2;
  display: flex; gap: 12px; align-items: center;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-size: 10.5px; letter-spacing: .32em; color: var(--ink-400); pointer-events: none; }
.chlabel-num { font-family: var(--gothic); letter-spacing: .2em; }
.chlabel-bar { width: 1px; height: 56px; background: var(--nanohana); opacity: .7; }

.journal-hero { position: relative; z-index: 1; padding: clamp(84px, 11vw, 140px) 0 clamp(48px, 6vw, 72px); }
.journal-hero h1 { max-width: 860px; margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 5.6vw, 64px); line-height: 1.42; letter-spacing: .02em; }
.hero-lead { max-width: 640px; margin: 30px 0 0; font-family: var(--gothic); font-size: clamp(14.5px, 1.8vw, 16.5px); line-height: 2.15; color: var(--ink-600); }
.journal-jumps { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 20px; }
.journal-jumps a { display: inline-flex; gap: 14px; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; }
#topics-title, #archive-title { scroll-margin-top: 24px; }

/* ---- Latest note: one full-width banner card.
   Until 2026-08-24 the eyecatch was an illustration with Koharu on the left
   third and near-blank paper on the right, and the copy was overlaid onto that
   reserved blank area. The eyecatch is now the article's conclusion drawn as a
   figure (scripts/blog-automation/banner-figure/), which uses the whole frame —
   so overlaying collided the card's HTML text with the figure's own text, and
   the copy box (554px) also outgrew the image (534px). The two now sit side by
   side and never overlap. ---- */
.latest { position: relative; z-index: 1; padding: clamp(24px, 4vw, 48px) 0 clamp(96px, 10vw, 132px); }
.section-heading { margin-bottom: 34px; }
.section-heading h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.55; letter-spacing: .02em; }

.banner-card { max-width: 1020px; margin-inline: auto; border: 1px solid rgba(228,221,201,.7); border-radius: 4px; background: rgba(253,252,248,.9); box-shadow: 0 22px 60px -20px rgba(38,36,32,.15); overflow: hidden; transition: box-shadow .5s var(--ease); }
.banner-card:hover { box-shadow: 0 28px 74px -20px rgba(38,36,32,.2); }
/* Stacked, not side by side. Beside the copy the figure shrank to 579x304 while
   the text column ran to 746px, so the card grew to 748px tall with a small
   picture in it — and the figure is the content now, not decoration. Full width
   gives it 1020px; cropping it to match a text column is not an option because
   the crop would cut the conclusion off. */
.banner-link { display: block; position: relative; color: inherit; text-decoration: none; }
.banner-art { overflow: hidden; }
.banner-art img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.banner-link:hover .banner-art img { transform: scale(1.015); }
/* The scrim faded the illustration behind overlaid text; with the copy beside
   the figure there is nothing to fade, and dimming a figure only makes its
   numbers harder to read. */
.banner-scrim { display: none; }
.banner-copy { padding: clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px); }
.banner-n { display: flex; gap: 16px; align-items: baseline; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(228,221,201,.9); font-family: var(--gothic); font-weight: 700; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: .18em; color: var(--nanohana); }
.banner-n span { font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--ink-400); }
.banner-copy h3 { margin: 0 0 16px; font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.3vw, 29px); line-height: 1.62; letter-spacing: .02em; color: var(--ink-900); }
/* Sized for the old overlay, where the copy was squeezed into the right
   40% of the image. Now it runs the full card width, so it reads at the
   same size as body copy. */
.banner-desc { margin: 0 0 24px; max-width: 46em; font-family: var(--gothic); font-size: 15.5px; line-height: 2.05; color: var(--ink-600); }
.text-link { font-family: var(--gothic); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--sage-text); text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.banner-link:hover .text-link { color: #4A5630; }

/* ---- Monthly archive: month tabs (underline, not pills) + a card grid that
   works whether it holds one article (today) or dozens (future 1/day cadence). ---- */
.archive { position: relative; z-index: 1; padding: 0 0 clamp(90px, 9vw, 128px); }
.archive-months { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.archive.is-enhanced .archive-months { display: flex; }
.archive.is-searching .archive-months { display: none; }
.archive-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin: 0 0 24px; }
.archive-search { display: grid; gap: 8px; flex: 1 1 300px; max-width: 520px; color: var(--ink-600); font-size: 13px; }
.archive-search span { font-weight: 700; }
.archive-search input { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-raised); color: var(--ink-900); font: 16px/1.5 var(--gothic); }
.archive-search input::placeholder { color: var(--ink-600); opacity: .8; }
.archive-search input:focus-visible { outline: 3px solid var(--nanohana); outline-offset: 3px; }
.archive-result-count { margin: 0 0 8px; color: var(--ink-600); font-size: 13px; }
.archive-more { display: block; margin: 28px auto 0; min-height: 48px; padding: 11px 28px; border: 1px solid var(--sage-deep); border-radius: 3px; background: var(--paper-raised); color: var(--sage-text); font-weight: 700; font-size: 14px; cursor: pointer; }
.archive-more:hover { background: var(--sage-soft); }
.archive-empty { padding: 28px 20px; background: var(--paper-deep); font-size: 15px; color: var(--ink-600); }
.archive-card[hidden], .archive-more[hidden], .archive-empty[hidden] { display: none; }
.archive:not(.is-enhanced) .archive-panel + .archive-panel { margin-top: 30px; }
.month-tab { display: flex; align-items: baseline; gap: 6px; padding: 10px 4px 14px; color: var(--ink-400); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: var(--gothic); transition: color .3s var(--ease), border-color .3s var(--ease); }
.month-tab:hover { color: var(--sage-text); }
.month-tab.is-active { color: var(--ink-900); border-bottom-color: var(--nanohana); }
.month-tab-y { font-size: 11px; letter-spacing: .1em; }
.month-tab-m { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.month-tab-m small { font-family: var(--gothic); font-size: 12px; font-weight: 600; margin-left: 1px; }

.archive-panel[hidden] { display: none; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.archive-card { display: block; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised); overflow: hidden; box-shadow: 0 16px 44px -22px rgba(38,36,32,.16); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.archive-card:hover { box-shadow: 0 22px 56px -22px rgba(38,36,32,.2); transform: translateY(-2px); }
.archive-card img { aspect-ratio: 1200 / 630; object-fit: cover; }
.archive-card-copy { padding: 18px 20px 22px; }
.archive-card-meta { display: flex; gap: 14px; align-items: center; margin: 0 0 10px; font-family: var(--gothic); font-size: 11px; letter-spacing: .06em; color: var(--ink-400); }
.archive-card-meta time { color: var(--nanohana); font-weight: 700; }
.archive-card h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 16.5px; line-height: 1.65; color: var(--ink-900); letter-spacing: .01em; }

.editorial-note { padding: clamp(76px, 9vw, 110px) 0; background: var(--paper-deep); border-block: 1px solid var(--line); }
.editorial-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; }
.editorial-note h2 { margin: 0 0 24px; font-family: var(--serif); font-weight: 600; font-size: clamp(27px, 4vw, 44px); line-height: 1.55; letter-spacing: .02em; }
.editorial-note p { max-width: 680px; color: var(--ink-600); }
.em-mark { background: linear-gradient(transparent 62%, rgba(201,168,60,.3) 62%); }

/* ---- Article page ---- */
.article-header { padding: 72px 0 58px; }
.breadcrumb { display: flex; gap: 10px; margin-bottom: 42px; color: var(--ink-400); font-size: 12px; }
.breadcrumb a { color: inherit; }
/* The article h1's markup is locked by check-blog-relaunch.test.mjs, which
   strips only bare `<br>`/`<br />` before comparing against the registry
   title — so a *class* cannot be added to the tag. The break can still be
   made responsive by targeting the bare element, which the 760px block below
   does. On desktop the em-dash break is deliberate; on a phone it fires on
   top of the natural wrap and leaves a stub line. Measured 2026-08-23 on
   /blog/ai/line-bot-build-log/ at 390px: 6 lines with one only 143px wide in
   a 358px box; suppressing the forced break gives 5 lines, shortest 249px. */
.article-header h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.55; letter-spacing: .02em; text-wrap: pretty; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 0 0 24px; color: var(--ink-400); font-size: 12px; }
.article-meta span { color: var(--sage-text); font-weight: 600; }
.article-deck { margin: 30px 0 0; color: var(--ink-600); font-size: clamp(16px, 2vw, 19px); line-height: 2; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.author-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-900); background: var(--nanohana-soft); font: 600 19px/1 var(--serif); }
.byline div { display: grid; }
.byline span { color: var(--ink-400); font-size: 10px; }
.byline strong { font-size: 13px; }

.article-body { padding-bottom: 110px; }
.article-body > p, .article-body > ul, .article-body > ol { font-size: 16px; }
.article-body h2 { margin: 76px 0 24px; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 4vw, 38px); line-height: 1.6; letter-spacing: .02em; }
.article-body h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.65; }
.article-body li + li { margin-top: 9px; }
.summary-box { margin: 0 0 80px; padding: 34px clamp(24px, 5vw, 48px); border-left: 4px solid var(--nanohana); background: var(--white); }
.summary-box h2 { margin: 0 0 14px; font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 3.5vw, 32px); }
.summary-box p:last-child { margin-bottom: 0; }
.source-note { padding: 14px 18px; background: var(--sage-soft); color: var(--ink-600); font-size: 12px !important; }
.caution { padding: 16px 18px; border-left: 3px solid var(--nanohana); background: #FAF6E8; color: var(--ink-600); font-size: 14px; }
.article-body blockquote { margin: 24px 0; padding: 18px 22px; border-left: 4px solid var(--sage-text); background: var(--sage-soft); color: var(--ink-600); }
.article-body blockquote p { margin: 0; font-size: 15px; line-height: 1.95; }
.article-body pre { margin: 26px 0; padding: 22px clamp(18px, 3vw, 26px); overflow-x: auto; border: 1px solid var(--line); border-left: 3px solid var(--nanohana); border-radius: 3px; background: var(--white); box-shadow: 0 18px 48px -24px rgba(38,36,32,.16); white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.9 var(--gothic); }
.article-body .demo-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 26px 0; }
.article-body .demo-figures figure { margin: 0; }
.article-body .demo-figures img { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: var(--paper-deep); }
.article-body .demo-figures figcaption { font-size: 12px; line-height: 1.7; color: var(--ink-600); margin-top: 8px; }
.article-body .demo-figures .demo-note { font-size: 12px; color: var(--ink-400); }

.article-body pre code { font: inherit; color: var(--ink-900); white-space: inherit; overflow-wrap: inherit; }
/* Prompts, checklists and worksheets are prose: wrap their display without
   changing the original text or copied whitespace. Code and ASCII diagrams
   opt into their necessary two-dimensional layout. */
.article-body pre.code-block, .article-body pre.diagram-block { white-space: pre; overflow-wrap: normal; font: 13px/1.85 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
.cta-links { margin: 24px 0 0; padding-left: 1.2em; color: var(--ink-600); font-size: 14px; }
.cta-links li + li { margin-top: 8px; }
.method-note .eyebrow { margin-bottom: 10px; }
.method-note small { color: var(--ink-600); font-size: 13px; line-height: 1.9; }
.evidence-figure { width: min(1000px, calc(100vw - 48px)); margin: 70px 50% 90px; transform: translateX(-50%); }
.figure-frame { max-height: 650px; overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: 0 22px 60px -20px rgba(38,36,32,.14); }
.figure-frame img { width: 100%; }
.evidence-figure figcaption { margin-top: 14px; color: var(--ink-400); font-size: 12px; line-height: 1.7; }
/* 図解。evidence-figure は「実画面の合成データ」専用で合成である旨の注記を必須に
   しているため（check-blog-relaunch.test.mjs が強制）、説明のための作図は型を分ける。
   2026-08-30 追加。 */
.diagram-figure { width: min(1000px, calc(100vw - 48px)); margin: 56px 50% 64px; transform: translateX(-50%); }
.diagram-figure .figure-frame { max-height: none; }
.diagram-figure figcaption { margin-top: 12px; color: var(--ink-400); font-size: 12px; line-height: 1.7; }

.numbered-section { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 32px 0; border-top: 1px solid var(--line); }
.numbered-section:last-of-type { border-bottom: 1px solid var(--line); }
.number { margin: 0; color: var(--nanohana); font: 600 24px/1.5 var(--gothic); letter-spacing: .1em; }
.numbered-section p:last-child { margin-bottom: 0; }
.steps { padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 190px 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps strong { color: var(--sage-text); }
.steps span { color: var(--ink-600); }


/* Price-range chart. Two variants: the desktop one puts labels to the right of
   each bar, the mobile one stacks label above bar so nothing is squeezed.
   Shrinking one SVG to phone width makes the type unreadable. */
.price-chart { width: 100%; height: auto; display: block; margin: 26px 0; }
.price-chart--sp { display: none; }
@media (max-width: 640px) {
  .price-chart--pc { display: none; }
  .price-chart--sp { display: block; }
}
/* Rate tables — grounded in the 2026-08-22 research pass.
   JLReq §4.4: a long table is split into 5-10 row groups; money is right
   aligned; only the header rule is heavy (mid 0.25mm vs thin 0.12mm ≈ 2:1);
   cell padding is at least 0.5em and never 0; the table sets one step smaller
   than body text. Numerals lead with a Latin face because Hiragino Sans and
   Noto Sans CJK ship no `tnum` (verified against the font binaries), so
   font-variant-numeric alone does not align digits on macOS/iOS. */
.rate-block { margin: 34px 0; }
.rate-h {
  margin: 0 0 12px; font-family: var(--serif); font-weight: 600;
  font-size: 18px; line-height: 1.6; color: var(--ink-900);
}
.rate-h span {
  display: inline-block; margin-left: 12px; font-family: var(--gothic);
  font-size: 12.5px; font-weight: 400; color: var(--ink-400);
}
.rate-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--gothic); font-size: 0.875em; line-height: 1.6;
}
.rate-table th, .rate-table td {
  padding: 0.55em 0.75em; text-align: left; vertical-align: top;
  overflow-wrap: anywhere;
}
.rate-table thead th {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--sage-text);
  border-bottom: 2px solid var(--sage);
  padding-block: 0.4em;
}
.rate-table thead th:nth-child(2) { text-align: right; }
.rate-table thead th:nth-child(3) { text-align: center; width: 5.5em; }
/* 3列目に長い文章が入る表。既定の .rate-table は「ラベル｜数値｜短い注釈」を
   前提に3列目を5.5em固定にしているため、そこへ本文を入れると1文字ずつ折り返す。
   2026-08-30に実際に発生したので、文章用の型を分けた。 */
.rate-table--prose thead th:nth-child(2) { text-align: left; }
.rate-table--prose thead th:nth-child(3) { text-align: left; width: auto; }
.rate-table--prose thead th:nth-child(1) { width: 22%; }
.rate-table--prose thead th:nth-child(2) { width: 34%; }
.rate-table tbody tr { border-bottom: 1px solid var(--line); }
.rate-table tbody th {
  font-weight: 600; color: var(--ink-900); padding-left: 0;
}
.rate-num {
  text-align: right; white-space: nowrap; color: var(--ink-900);
  font-family: "Helvetica Neue", Arial, var(--gothic);
  font-variant-numeric: tabular-nums;
}
.rate-pay {
  text-align: center; font-size: 11.5px; color: var(--ink-400);
  white-space: nowrap; padding-right: 0;
}
.rate-note {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400;
  line-height: 1.75; color: var(--ink-400);
}
@media (max-width: 640px) {
  .rate-table { font-size: 13px; }
  .rate-table th, .rate-table td { padding: 0.5em 0.4em; }
  .rate-table thead th:nth-child(3), .rate-pay { display: none; }
  /* ...but --prose puts a real content column third, so hiding its header leaves an
     unlabelled column on mobile. Six published articles shipped that way. */
  .rate-table--prose thead th:nth-child(3) { display: table-cell; }
  .rate-h { font-size: 16.5px; }
  .rate-h span { display: block; margin: 3px 0 0; }
}

/* Topic navigation (2026-08-22). The blog index only offered a date-ordered
   list, so neither readers nor Googlebot ever reached the category pages —
   the index inspection found /blog/subsidy/ and /blog/seo/ with
   lastCrawlTime: null. Cards are the entry point for both. */
.topics { position: relative; z-index: 1; padding: 0 0 clamp(56px, 6vw, 84px); }
.topic-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.topic-card {
  border: 1px solid rgba(228, 221, 201, .8); border-radius: 4px;
  background: rgba(253, 252, 248, .9);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.topic-card:hover {
  box-shadow: 0 18px 44px -18px rgba(38, 36, 32, .18);
  transform: translateY(-2px);
}
.topic-card a {
  display: block; padding: 24px 22px 22px; color: inherit; text-decoration: none;
  border-top: 3px solid var(--nanohana); border-radius: 4px 4px 0 0;
}
.topic-name {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  letter-spacing: .04em; color: var(--ink-900);
}
.topic-count {
  font-family: var(--gothic); font-size: 11.5px; font-weight: 400;
  letter-spacing: .1em; color: var(--ink-400);
}
.topic-lead {
  display: block; margin-top: 10px;
  font-family: var(--gothic); font-size: 13px; line-height: 1.95; color: var(--ink-600);
}

.article-cta { margin-top: 84px; padding: clamp(34px, 7vw, 64px); border: 1px solid #DCCB87; background: linear-gradient(135deg, var(--nanohana-soft), var(--white) 62%); }
.article-cta h2 { margin: 0 0 16px; font-family: var(--serif); font-weight: 600; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 22px; border-radius: 3px; font-size: 14px; font-weight: 700; text-decoration: none; }
.button-primary { color: #fff; background: var(--sage-deep); border: 1px solid var(--sage-deep); box-shadow: inset 0 -3px 0 rgba(38,36,32,.22); }
.button-primary:hover { color: #fff; background: #55623B; }
.button-secondary { color: var(--sage-text); background: var(--white); border: 1px solid var(--sage-deep); }
.cta-note { margin: 24px 0 0; color: var(--ink-600); font-size: 12px !important; }
.method-note { margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--line); }
.method-note h2 { margin-top: 0; font-family: var(--serif); font-weight: 600; font-size: 22px; }
.method-note p { color: var(--ink-600); font-size: 13px; }

.author-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.author-profile { display: flex; gap: 22px; align-items: flex-start; margin-top: 88px; padding: 30px clamp(24px, 5vw, 48px); border-left: 4px solid var(--nanohana); background: var(--white); }
.author-profile img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-profile .author-name { margin: 8px 0 10px; font-weight: 600; font-size: 15px; }
.author-profile .author-bio { margin: 0; color: var(--ink-600); font-size: 13.5px; line-height: 1.95; }
@media (max-width: 480px) { .author-profile { flex-direction: column; } }

/* Related articles: a topic cluster needs its members linked to each other, so
   every article carries three same-category links. The block sits between the
   body and the CTA and never alters reviewed body copy. */
.related-links { margin-top: 72px; padding: 28px clamp(20px, 4vw, 36px); border-left: 4px solid var(--nanohana); background: var(--white); }
.related-links h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.related-links ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.related-links a { display: block; color: var(--ink-800, inherit); font-size: 14px; line-height: 1.7; text-decoration: none; }
.related-links a:hover { text-decoration: underline; }
.related-topic { display: block; margin-bottom: 3px; color: var(--ink-400); font-size: 11px; letter-spacing: .08em; }

.site-footer { padding: 64px 0; border-top: 1px solid var(--line); background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.footer-grid img { width: auto; height: 24px; }
.footer-grid p { color: var(--ink-400); font-size: 12px; }
.footer-grid nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 14px 24px; }
.footer-grid a, .footer-grid button { color: var(--ink-600); background: none; border: 0; padding: 0; font-size: 12px; text-decoration: underline; cursor: pointer; }

/* Mobile-only forced break at a natural clause boundary (same pattern as the
   homepage's .cs-h2-break): keep-all alone would break mid-compound-word. */
.m-break { display: none; }
@media (max-width: 540px) {
  .m-break { display: block; }
}

@media (max-width: 860px) {
  /* Narrow enough that the figure and the copy cannot share a row: stack them.
     The desktop rules above already dropped the overlay, so this block only
     needs to collapse the two columns into one. */
  .banner-copy { padding: 26px 22px 34px; }
  .banner-desc { max-width: none; }
}

@media (max-width: 760px) {
  .shell, .shell-narrow { width: min(100% - 32px, 760px); }
  .site-header { min-height: 64px; padding: 14px 16px; }
  .brand img { height: 18px; }
  .chlabel { display: none; }
  .stage-koharu { background-size: 210vw auto; background-position: left -14vw top 0; opacity: .26; }
  .journal-hero { padding: 68px 0 34px; }
  .journal-category .journal-hero { padding: 48px 0 28px; }
  .journal-category .journal-hero h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.5; font-feature-settings: "palt"; }
  .journal-category .journal-hero > .shell > p:last-child { font-size: 15px; line-height: 1.95; color: var(--ink-600); }
  .archive .section-heading { margin-bottom: 24px; }
  .archive-card-copy { padding: 16px 18px 20px; }
  .archive-card h3 { font-size: 16px; line-height: 1.7; }
  .archive-card-meta { flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-600); }
  .archive-card-meta time { color: var(--sage-text); }
  .archive-result-count { width: 100%; margin-bottom: 0; }
  .archive-more { width: 100%; }
  .latest { padding: 20px 0 78px; }
  .editorial-grid, .footer-grid { grid-template-columns: 1fr; }
  .editorial-note { padding: 72px 0; }
  .editorial-grid { gap: 16px; }
  .article-header { padding: 50px 0 42px; }
  .article-header h1 br { display: none; }
  .breadcrumb { margin-bottom: 30px; }
  .summary-box { margin-bottom: 60px; }
  .article-body h2 { margin-top: 62px; }
  .article-body pre { padding: 18px 16px; font-size: 15px; }
  .article-body pre.code-block, .article-body pre.diagram-block { font-size: 13px; }
  .evidence-figure figcaption, .diagram-figure figcaption { font-size: 13px; line-height: 1.85; color: var(--ink-600); }
  .evidence-figure { width: calc(100vw - 32px); margin-top: 54px; margin-bottom: 70px; }
  .diagram-figure { width: calc(100vw - 32px); margin-top: 44px; margin-bottom: 52px; }
  .figure-frame { max-height: 520px; }
  .numbered-section { grid-template-columns: 42px 1fr; gap: 12px; }
  .steps li { grid-template-columns: 1fr; gap: 3px; }
  .cta-actions { flex-direction: column; }
  .footer-grid nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}