@charset "UTF-8";
/* ============================================================
   Supplement Note — 資料体（reference document）
   Loaded after style.css. Overrides tokens rather than rewriting
   6,800 lines, so the whole site turns over from one file.

   The move: cream + mincho display + decorative accents
          -> paper white + gothic display + functional colour,
             with mincho kept for reading passages only.
   ============================================================ */

:root {
  /* ---- ground ------------------------------------------------ */
  --bg-cream: #FFFFFF;          /* was #FAF8F3 — the single biggest tell */
  --bg-white: #FFFFFF;
  --bg-warm: #F2F4F3;           /* cool stone, not warm clay */
  --bg-tertiary: #E9ECEB;

  /* ---- ink --------------------------------------------------- */
  --text-primary: #000000;      /* print black, not a tinted near-black */
  --text-secondary: #5A6167;
  --text-tertiary: #767C82;
  --text-muted: #9AA1A7;

  /* ---- rules ------------------------------------------------- */
  --border-soft: #EEF0EF;
  --border-medium: #C7CCD0;
  --border-strong: #9AA1A7;

  /* ---- functional colour -------------------------------------
     One accent for interaction. The old forest/amber/coral/purple/teal
     set carried no meaning; they now resolve to the certainty ramp. */
  --accent-forest: #0B4F9E;     /* links, references */
  --accent-forest-light: #E7EEF6;
  --accent-amber: #B45309;      /* caution, conflicts of interest */
  --accent-amber-light: #FDF4E7;
  --accent-coral: #8E2436;      /* the masthead seal only */
  --accent-purple: #4D7FB8;
  --accent-purple-light: #E7EEF6;
  --accent-teal: #0B4F9E;
  --accent-teal-light: #E7EEF6;

  /* ---- evidence certainty: one hue, ordered by lightness ------ */
  --grade-high: #0B4F9E;
  --grade-moderate: #4D7FB8;
  --grade-low: #7E99B0;
  --grade-verylow: #C7CCD0;

  /* ---- type --------------------------------------------------
     Headings flip from mincho to gothic. Mincho is kept, but only
     where someone actually reads a long passage. */
  --font-serif: "Zen Kaku Gothic New", "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", sans-serif;
  --font-sans: "Zen Kaku Gothic New", "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", sans-serif;
  --font-numeric: "Zen Kaku Gothic New", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-reading: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", serif;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
}

/* ============================================================
   1. Japanese line breaking
   Headlines were splitting mid-word and stranding 。 at line start.
   ============================================================ */
h1, h2, h3, h4,
.hero-title, .section-title, .article-h1, .column-article-h1,
.column-article-lede, .hero-lede, .section-description {
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: normal;
}
h1, h2, h3, .hero-title, .section-title, .article-h1, .column-article-h1 {
  font-feature-settings: "palt" 1;
  letter-spacing: -0.01em;
}

/* ============================================================
   2. Display type: gothic, tight, no decorative accent word
   ============================================================ */
.hero-title, .article-h1, .column-article-h1 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.42;
}
.section-title { font-weight: 700; letter-spacing: -0.01em; }

/* the single-word colour/italic accent inside headlines */
.hero-title em,
.article-h1 em,
.column-article-h1 em,
.section-title em {
  font-style: normal;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}

/* ============================================================
   3. Eyebrows that survive (the Japanese ones) become metadata,
      not tracked-out display chrome.
   ============================================================ */
.section-eyebrow, .article-eyebrow, .column-article-eyebrow,
.column-card-eyebrow, .column-promo-eyebrow, .hero-eyebrow,
.column-category-eyebrow, .column-hero-eyebrow,
.column-promo-series-eyebrow {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.section-eyebrow::after { content: none; }

/* the digest badge was a filled pill with an emoji; it becomes a dateline */
.research-label {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.research-label::before,
.research-label::after { content: none; }

/* ============================================================
   4. Rules carry information; cards stop pretending to
   ============================================================ */
.section-header { border-bottom: 2px solid var(--text-primary); padding-bottom: 10px; }

.concept-card, .criteria-card, .intro-card, .nutrient-card,
.column-card, .column-promo-card, .stat-card, .faq-item,
.study-card, .column-callout {
  border-radius: 0;
  box-shadow: none;
}
.stat-card { background: transparent; border: none; border-top: 1px solid var(--border-medium); }

/* data blocks read as tables, not as floating cards */
.study-card {
  border: 1px solid var(--border-medium);
  background: var(--bg-white);
}
.study-card-header { border-bottom: 1px solid var(--border-medium); }

/* ============================================================
   5. Reading passages keep mincho
   ============================================================ */
.column-article-body p,
.column-article-body li,
.column-article-lede,
.article-body p,
.article-body li {
  font-family: var(--font-reading);
  line-height: 2.05;
}
.column-article-body p { max-width: 42em; }

/* ============================================================
   6. Buttons: a button is a button. No arrow, no gradient.
   ============================================================ */
.btn-primary, .cta-button, .hero-cta-primary, .hero-cta-secondary {
  border-radius: 0;
  background-image: none;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.btn-primary, .cta-button {
  background: var(--text-primary);
  color: #FFFFFF;
}
.btn-primary:hover, .cta-button:hover { background: #2A3036; }

a { color: var(--accent-forest); }

/* ============================================================
   7. Evidence badges use the certainty ramp
   ============================================================ */
.evidence-badge { border-radius: 0; font-family: var(--font-sans); font-weight: 700; }
.evidence-badge.level-meta,
.evidence-badge.level-rct { background: var(--grade-high); color: #FFFFFF; }
.evidence-badge.level-obs { background: var(--grade-low); color: #FFFFFF; }
.evidence-badge.level-guideline { background: var(--grade-verylow); color: #1A1A1A; }

/* ============================================================
   8. Numerals line up
   ============================================================ */
.stat-value, .hero-metric-value, .score-value, .rank-score,
.study-card-item-value, td, th, .column-article-breadcrumb time {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   9. Eyecatch
   ============================================================ */
.eyecatch {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto 8px;
  border: 1px solid var(--border-soft);
}
.eyecatch-wrap { padding: 0 24px 24px; }
.eyecatch-caption {
  max-width: 980px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

/* ============================================================
   10. Masthead + mobile navigation
   The nav did not collapse; five items overlapped the headline
   at 390px.
   ============================================================ */
.site-header { border-bottom: 2px solid var(--text-primary); }
.site-logo-mark { color: var(--accent-coral); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .site-nav { position: relative; flex-wrap: wrap; }
  .site-nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 4px 0 8px;
    border-top: 1px solid var(--border-medium);
  }
  .site-nav-menu.is-open { display: flex; }
  .site-nav-menu li { width: 100%; }
  .site-nav-menu a {
    display: block;
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 15px;
  }
}

/* ============================================================
   11. Phone width
   ============================================================ */
@media (max-width: 640px) {
  .column-article-body p { font-size: 15.5px; line-height: 2.0; }
  .eyecatch-wrap { padding: 0 16px 16px; }
  table { font-size: 13px; }
  .table-scroll { overflow-x: auto; }
}

/* ============================================================
   12. Grounds that were hard-coded past the tokens
   style.css pins the cream in nine places, several of them inside a
   prefers-color-scheme block with !important.
   ============================================================ */
html { background-color: #FFFFFF; }
body { background-color: #FFFFFF; }

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid var(--text-primary);
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #FFFFFF !important;
    color: #000000 !important;
  }
  .study-card { background-color: #FFFFFF !important; color: #000000 !important; }
  .study-card-result { background-color: #F2F4F3 !important; }
  .evidence-badge.level-rct,
  .evidence-badge.level-meta { background-color: var(--grade-high) !important; color: #FFFFFF !important; }
  .evidence-badge.level-obs { background-color: var(--grade-low) !important; color: #FFFFFF !important; }
  .evidence-badge.level-guideline { background-color: var(--grade-verylow) !important; color: #1A1A1A !important; }
  .site-header { background-color: rgba(255, 255, 255, 0.96) !important; }
}

/* ============================================================
   13. Display sizes
   The hero was set at 56px against a 1.25 leading, which broke
   Japanese headlines across three lines on a laptop.
   ============================================================ */
.hero-title { font-size: 44px; line-height: 1.42; max-width: 22em; }
.article-h1, .column-article-h1 { font-size: 34px; line-height: 1.45; }
.section-title { font-size: 26px; }

@media (min-width: 1280px) {
  .hero-title { font-size: 48px; }
}

/* ============================================================
   14. Quality floor
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent-forest);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   15. Deck
   The remainder of the old SEO headline, set as a subheading.
   ============================================================ */
.article-deck {
  font-family: var(--font-reading);
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-primary);
  margin: 10px 0 0;
  max-width: 38em;
}
@media (max-width: 640px) { .article-deck { font-size: 15px; } }

/* ============================================================
   16. Emphasis discipline
   Scattered mid-sentence bold is one of the tells this redesign is
   removing. Rather than restating 27 digests, emphasis is capped so
   it marks a term instead of shouting a clause.
   ============================================================ */
.column-article-lede strong,
.column-article-body p strong,
.article-body p strong {
  font-weight: 600;
}
.column-article-lede { font-size: 16px; line-height: 2.05; }

/* ============================================================
   17. Reading passages keep mincho
   style.css now routes every font through the tokens, which made the
   whole site gothic. The long-form wrappers are set back to mincho —
   the one place a serif earns its keep in Japanese.
   ============================================================ */
.column-article-body,
.column-hero-lede,
.article-lede {
  font-family: var(--font-reading);
}
/* …but their headings stay gothic */
.column-article-body h2,
.column-article-body h3,
.column-article-body h4 {
  font-family: var(--font-serif);
  font-weight: 700;
}
.column-article-body .study-card,
.column-article-body .study-card *,
.column-article-body table,
.column-article-body table * {
  font-family: var(--font-sans);
}
.column-article-body .study-card-result-text { font-family: var(--font-reading); }


/* ============================================================
   18. Phone type scale
   Declared last on purpose: sections 11 and 13 set the same
   properties at the same specificity, so order decides.
   ============================================================ */
@media (max-width: 820px) {
  .hero-title { font-size: 30px; line-height: 1.45; }
  .article-h1, .column-article-h1 { font-size: 26px; }
  .section-title { font-size: 20px; }
  .article-deck { font-size: 15px; }
}
@media (max-width: 420px) {
  .hero-title { font-size: 26px; }
  .article-h1, .column-article-h1 { font-size: 23px; }
}

/* ============================================================
   19. The seal colour, demoted
   The crimson now marks the masthead and the editorial stamp only.
   Calls to action take the ink colour, so nothing on the page competes
   with the figure.

   Most CTAs set their fill in an inline style as
   `var(--color-accent, #9B2843)` — a token that was never defined, so it
   fell back to the crimson. Defining it here turns them all over without
   touching the markup; the rest are caught by the rules below.
   ============================================================ */
:root { --color-accent: #16191C; }

.btn-primary,
.cta-button,
.column-promo-link,
.hero-cta-primary {
  background: #16191C !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.btn-primary:hover,
.cta-button:hover,
.column-promo-link:hover,
.hero-cta-primary:hover {
  background: #343B41 !important;
}
.hero-cta-secondary {
  background: transparent !important;
  color: #16191C !important;
  border: 1px solid #16191C !important;
  border-radius: 0 !important;
}

/* ============================================================
   20. The figure at phone width
   A 1200x630 plate inside a 390px column renders its labels at a third
   of their size. Full bleed buys back the gutters; the figure is still
   a summary there, with the detail in the page below it.
   ============================================================ */
@media (max-width: 640px) {
  .eyecatch-wrap {
    padding: 0 0 14px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
  .eyecatch { border-left: none; border-right: none; max-width: 100vw; }
  .eyecatch-caption { padding-right: 16px; }
}