/* TMPU column presentation: existing site colours and Noto Sans JP.
 * Responsive presentation shared by every viewport width.
 * Load after article-specific styles. Diagrams, semantic notice colours,
 * disclosure controls and chart geometry remain under their original styles.
 */
@media all {
  body.column-brand-article,
  body.column-brand-index {
    color: #1f2937;
    background: #fff;
    font-family: "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* A continuous reading surface rather than a floating card. */
  body.column-brand-article .page-wrapper,
  body.column-brand-article > .wrap {
    box-sizing: border-box;
    width: min(100%, 960px) !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: clamp(20px, 3vw, 28px) clamp(20px, 5vw, 60px) 48px !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  body.column-brand-article :is(h1, h2, h3, .hero-subtitle,
    .hero-lead, .lead, .section-lead, .title, .back, .vol-label,
    .column-related, .column-editorial-info, .column-unified-nav a) {
    font-family: "Noto Sans JP", sans-serif;
  }

  body.column-brand-article :is(.hero, .site-header) {
    position: relative;
    padding: 48px 0 40px;
    overflow: visible;
    text-align: left;
    border-bottom: 1px solid #dbe5e1;
    background: #fff;
  }

  body.column-brand-article :is(.hero, .site-header)::before,
  body.column-brand-article .hero-card::after {
    content: none;
  }

  body.column-brand-article :is(.hero-content, .hero h1, .site-header h1) {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  body.column-brand-article .column-title-phrase { white-space: nowrap; }

  body.column-brand-article :is(.hero h1, .site-header h1) {
    max-width: none;
    margin-top: 0;
    margin-bottom: 18px;
    color: #123c35;
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .015em;
    text-wrap: balance;
  }

  body.column-brand-article :is(.hero-illustration, .hero > .illustration) {
    float: right;
    width: 160px;
    height: 128px;
    margin: 0 0 20px 28px;
  }

  body.column-brand-article :is(.hero, .site-header)::after {
    content: "";
    display: block;
    clear: both;
  }

  body.column-brand-article :is(.hero-badge, .hero-eyebrow, .badge, .vol-label) {
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #065f46;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: left;
  }

  body.column-brand-article :is(.hero-subtitle, .hero-lead, .hero > p) {
    margin-left: 0;
    margin-right: 0;
    color: #4b5563;
    font-size: 17px;
    line-height: 1.9;
    text-align: left;
  }

  body.column-brand-article :is(.hero-divider, .hero > .divider) {
    width: 48px;
    height: 3px;
    margin: 24px 0 0;
    border-radius: 0;
    background: #065f46;
  }

  body.column-brand-article :is(.section, .content-section) {
    margin: 0;
    padding: 40px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.column-brand-article .content-section + .content-section {
    border-top: 1px solid #dbe5e1;
  }

  body.column-brand-article :is(h2.section-title, h2.title, h2.quick-title, .content-section > h2) {
    margin: 0 0 24px;
    color: #123c35;
    font-size: clamp(21px, 2.7vw, 27px);
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
  }

  body.column-brand-article :is(.section-label, .section-kicker, .label) {
    color: #065f46;
    font-size: 12px;
    letter-spacing: .12em;
  }

  body.column-brand-article :is(p, li) { line-height: 1.95; }
  body.column-brand-article :is(.section-lead, .section-intro, .lead, .body) {
    font-size: 16px;
    line-height: 1.95;
  }

  /* Tame decorative containers, without changing the colour meaning of alerts. */
  body.column-brand-article :is(.info-card, .card, .voice-card, .voice,
    .compare-card, .compare-wrap, .prep-step, .service-item, .step, .col,
    .mode, .ecard, .symptom-card, .intro-box, .quick-panel, .quick-item,
    .hero-card, .jump-nav, .empathy-section, .empathy,
    .checklist li, .checks li, .thought-list li,
    .callout, .quote, .notice-box, .notice,
    .infobox, .note, .highlight-box, .highlight, .key-message,
    .column-related__card, .column-unified-nav) {
    border-radius: 6px;
    box-shadow: none;
    background-image: none;
  }

  body.column-brand-article :is(.info-card, .card, .voice-card, .voice,
    .compare-card, .prep-step, .step, .mode, .symptom-card, .quick-item,
    .checklist li, .checks li, .thought-list li) {
    border: 1px solid #dbe5e1;
  }

  /* Dark panels need their own foreground after the common heading rules. */
  body.column-brand-article :is(.highlight-box:not(:has(.highlight-head)),
    .highlight, .key-message) {
    color: #fff;
    background-color: #065f46;
  }

  body.column-brand-article :is(.highlight-box:not(:has(.highlight-head)),
    .highlight, .key-message) :is(h1, h2, h3, .key-message-text) {
    color: #fff;
  }

  /* The secondary-findings notice uses the article's original warning palette. */
  body.column-brand-article .highlight-box:has(.highlight-head) {
    background-color: var(--accent-warn-bg);
  }

  body.column-brand-article :is(.soft-divider, .soft) {
    height: 1px;
    background: #dbe5e1;
  }

  body.column-brand-article :is(.topnav, .top-nav) {
    margin-bottom: 28px;
    padding-top: 0;
  }

  body.column-brand-article :is(.back, .nav-button, .cta-btn,
    .cta-button, .column-unified-nav a) {
    border-radius: 4px;
    box-shadow: none;
  }

  body.column-brand-article :is(.column-related__card, .column-unified-nav a):hover,
  body.column-brand-article :is(.column-related__card, .column-unified-nav a):focus-visible {
    transform: none;
    box-shadow: none;
  }

  body.column-brand-article .column-related__card { background: #fff; }
  body.column-brand-article .column-unified-nav {
    padding: 24px 0;
    border-width: 1px 0 0;
    background: #fff;
  }

  body.column-brand-article :is(.reference-list, .refs, .references) {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  body.column-brand-article :is(.animate-in, .reveal) {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  /* Index: a restrained title band and consistent, flat article rows. */
  .column-brand-index main > section:first-child {
    padding: 64px 0 56px;
    background: #123c35;
  }
  .column-brand-index main > section:first-child > .absolute { display: none; }
  .column-brand-index main > section:first-child h1 {
    font-size: clamp(27px, 3.6vw, 36px);
    line-height: 1.5;
  }
  .column-brand-index main > section:first-child p { line-height: 1.9; }
  .column-brand-index main > section + section { padding: 48px 0 64px; }
  .column-brand-index main .max-w-4xl { max-width: 960px; }
  .column-brand-index .column-education-note {
    margin-bottom: 36px;
    padding: 24px 28px;
    border: 1px solid #dbe5e1;
    border-left: 3px solid #065f46;
    border-radius: 4px;
    background: #f5faf8;
    box-shadow: none;
  }
  .column-brand-index .column-education-note .w-12 { display: none; }
  .column-brand-index .column-education-note a {
    border-radius: 4px;
    box-shadow: none;
  }
  .column-brand-index .column-list { gap: 0; border-top: 1px solid #dbe5e1; }
  .column-brand-index .column-list > a {
    border: 0;
    border-bottom: 1px solid #dbe5e1;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    transform: none;
    transition: background-color .15s ease;
  }
  .column-brand-index .column-list > a:hover { background: #f5faf8; }
  .column-brand-index .column-list > a:focus-visible {
    outline: 2px solid #065f46;
    outline-offset: -2px;
    background: #f5faf8;
  }
  .column-brand-index .column-list > a > .w-full { display: none; }
  .column-brand-index .column-list > a > .p-6 { padding: 28px 8px; }
  .column-brand-index .column-list h2 {
    color: #123c35;
    font-size: clamp(20px, 2.5vw, 23px);
    line-height: 1.6;
  }
  .column-brand-index .column-list .rounded-full {
    padding: 0;
    border-radius: 0;
    background: transparent;
    letter-spacing: .04em;
  }
  .column-brand-index .column-list .rounded-full + .rounded-full {
    padding-left: 12px;
    border-left: 1px solid #dbe5e1;
  }
  .column-brand-index .column-list .italic { font-style: normal; }
  .column-brand-index .column-list .leading-relaxed { line-height: 1.9; }
  .column-brand-index main .animate-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 767px) {
  body.column-brand-article :is(.hero, .site-header) {
    padding: 24px 0 28px;
  }
  body.column-brand-article :is(.hero-illustration, .hero > .illustration) {
    float: none;
    width: 100px;
    height: 80px;
    margin: 0 0 20px;
  }
  body.column-brand-article :is(.section, .content-section) {
    padding: 28px 0;
  }
  body.column-brand-article :is(.hero-subtitle, .hero-lead, .hero > p) {
    font-size: 15px;
  }
  body.column-brand-article :is(.empathy, .empathy-section, .quick-panel,
    .hero-card, .jump-nav) {
    margin-left: 0;
    margin-right: 0;
    padding: 20px 16px;
  }
  body.column-brand-article :is(.checklist, .card-grid) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  body.column-brand-article :is(.checks li, .checklist li,
    .quick-item, .info-card, .card) { min-width: 0; }
  body.column-brand-article .column-unified-nav { padding: 20px 0; }
  .column-brand-index main > section:first-child { padding: 36px 0; }
  .column-brand-index main > section + section { padding: 28px 0 40px; }
  .column-brand-index .column-education-note { padding: 20px 18px; }
  .column-brand-index .column-list > a > .p-6 { padding: 24px 0; }
}

/* Decoration-free column articles; explanatory diagrams and controls remain. */
body.column-brand-article .voice-card::before,
body.column-brand-article .thought-list li::before,
body.column-brand-article .quote::before,
body.column-brand-article .example-list li::before,
body.column-brand-article .do-not-list li::before {
  content: none;
}
body.column-brand-article :is(.example-list, .do-not-list) li {
  padding-left: .85rem;
}