:root {
  --case-font-ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
  --case-font-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --case-body-size: 1rem;
  --case-body-leading: 1.85;
  --case-h3-size: 1.125rem;
  --case-h3-leading: 1.55;
  --case-inline-code-size: 0.875rem;
  /* One horizontal rhythm for every dedicated Case Note. */
  --case-inline-gutter: clamp(20px, 4vw, 32px);

  /*
   * Dedicated Case Notes retain article-specific diagrams, but share one
   * report type system. `--mincho` is remapped while older inline article CSS
   * is migrated: display copy must not reintroduce an editorial serif voice.
   */
  --mincho: var(--case-font-ui) !important;
  --gothic: var(--case-font-ui) !important;
  --mono: var(--case-font-mono) !important;
}

/* Dedicated articles retain their diagrams and layouts, but prose must not
 * change density when a reader moves between Case Notes. Local legacy CSS
 * still declares 15px and 16px body bases, so these shared role tokens win. */
body {
  font-family: var(--case-font-ui) !important;
  font-size: var(--case-body-size) !important;
  line-height: var(--case-body-leading) !important;
}

.wrap {
  width: min(1020px, calc(100% - (var(--case-inline-gutter) * 2))) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.hero {
  padding: clamp(52px, 7vw, 80px) 0 48px !important;
}

/* The line above an H1 identifies the report; it is not a second headline.
 * Keep one readable target/problem/path line and move dates or status claims
 * to the report itself. */
.case-line,
.eyebrow {
  display: block !important;
  margin: 0 0 20px !important;
  font-family: var(--case-font-mono) !important;
  font-size: clamp(0.875rem, 1.2vw, 1rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
}

.case-line span,
.eyebrow span {
  display: block;
}

.case-line span::before,
.eyebrow span::before {
  content: none !important;
}

.hero h1,
main > h1,
h1 {
  font-family: var(--case-font-ui) !important;
  font-size: clamp(28px, calc(1.8vw + 20px), 44px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-wrap: balance;
  /* Phrase-aware wrapping belongs to display headlines only; see the prose rule below. */
  word-break: auto-phrase !important;
}

.case-section-head h2 {
  font-family: var(--case-font-ui) !important;
  font-size: clamp(22px, calc(2vw + 14px), 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  /* Section headings are display headlines too. Without phrase-aware wrapping they
   * break mid-word: measured at 375px, 81 of 91 headings broke inside a word or verb
   * (「継ぎ目で起 / きる」「実行バイナリを特 / 定する」). */
  word-break: auto-phrase !important;
}

.subtitle,
.dek {
  font-family: var(--case-font-ui) !important;
  font-size: clamp(1rem, 1.4vw, 1.125rem) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.7 !important;
}

p.body,
main > .wrap > section > p,
main > section > p {
  font-size: 1rem !important;
  line-height: 1.85 !important;
}

h3 {
  font-family: var(--case-font-ui) !important;
  font-size: var(--case-h3-size) !important;
  font-weight: 700 !important;
  line-height: var(--case-h3-leading) !important;
}

/* Inline identifiers use one mono stack and one proportion across articles.
 * Code blocks keep the size and weight chosen by their surrounding log/pre UI. */
code {
  font-family: var(--case-font-mono) !important;
  font-size: var(--case-inline-code-size) !important;
  font-weight: 600 !important;
  line-height: inherit !important;
}

pre code {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/*
 * `word-break: auto-phrase` breaks Japanese lines at phrase boundaries. That is
 * an aid for a short headline, but on prose it ends lines far short of the
 * measure: measured at 375px, one hero lead ran 209-335px against a 335px
 * column (126px of rag) with auto-phrase, and 320-335px (15px) without it.
 * Keep it on the display h1; keep prose on normal wrapping.
 */
body,
p,
li,
dd,
td,
figcaption,
.hero-lead,
.lead,
.dek,
.subtitle,
.callout {
  word-break: normal !important;
}

/* Technical paths are content, not fine print: readable on touch devices. */
.hexstrip {
  font-size: clamp(0.875rem, 1.2vw, 1rem) !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
}

.case-section-head {
  display: grid;
  gap: 6px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.case-section-head h2 {
  margin: 0;
}

.case-section-label {
  width: fit-content;
  margin: 0;
  color: var(--note-accent, #1d6b8f);
  font-family: var(--mono, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0.1em;
  white-space: nowrap;
}