/* Stage 12 Batch 2 — source-specific Articles structures, composed with the
   accepted shared shell/tokens. No new design tokens are introduced here. */
.tonsa-articles-hero h1, .tonsa-article-header h1 { max-width: none; margin: 1.35rem 0 0; color: var(--color-ink); font-size: clamp(1.9375rem, 5vw, 3.125rem); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.tonsa-articles-hero__lede { max-width: 37.5rem; margin: 1rem 0 0; color: var(--color-ink-muted); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.55; }
.tonsa-articles-archive { --tonsa-articles-grid-section-margin-top: 2.5rem; }
.tonsa-articles-filter-section { padding-top: 0; padding-bottom: 1.25rem; }
.tonsa-articles-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tonsa-article-chip { min-height: 44px; padding: 9px 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); background: var(--glass-surface-1); color: var(--color-ink-muted); font: 500 13px/1 var(--font-text); cursor: pointer; transition: background var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard); }
.tonsa-article-chip:hover, .tonsa-article-chip:focus-visible, .tonsa-article-chip.is-active { border-color: var(--color-primary); background: rgb(172 255 98 / 10%); color: var(--color-primary); outline: none; }
.tonsa-articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
/* Archive cards use the shared portfolio-card owner.  The legacy article
   card remains scoped to single-article related-content until that route is
   explicitly migrated. */
.tonsa-articles-archive .tonsa-article-card--featured { grid-column: span 2; }
.tonsa-articles-archive .tonsa-article-card[hidden] { display: none; }
.tonsa-article-single { position: relative; z-index: 1; }
.tonsa-article-toc { position: relative; z-index: 1; width: min(47.5rem, calc(100% - 40px)); margin: var(--space-xl) auto 0; }
.tonsa-article-toc__island { display: block; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); background: var(--glass-surface-2); padding: var(--space-xs); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.tonsa-article-toc__island[open] { border-radius: var(--radius-lg); }
.tonsa-article-toc__island summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 var(--space-sm); color: var(--color-ink); cursor: pointer; font-size: var(--text-button-size); font-weight: 500; list-style: none; }
.tonsa-article-toc__island summary::-webkit-details-marker { display: none; }
.tonsa-article-toc__island summary::after { content: '+'; color: var(--color-primary); font-size: var(--text-headline-size); }
.tonsa-article-toc__island[open] summary::after { content: '−'; }
.tonsa-article-toc__links { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); margin-top: var(--space-xs); font-size: 14px; font-weight: 300; }
.tonsa-article-toc a { display: flex; min-width: 0; min-height: 44px; align-items: center; padding: var(--space-xs) var(--space-sm); box-sizing: border-box; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-ink-muted); font-size: inherit; font-weight: inherit; line-height: 1.3; text-decoration: none; }
.tonsa-article-toc a:hover, .tonsa-article-toc a:focus-visible, .tonsa-article-toc a.is-active { border-color: var(--color-primary); background: var(--glass-surface-1); color: var(--color-ink); outline: none; }
.tonsa-article-header__frame, .tonsa-article-content { max-width: 43.75rem; }
.tonsa-article-content-section { border-top: none; }
.tonsa-article-cta-section { padding: 40px 0; border-top: none; }
.tonsa-article-cta-section .tonsa-cta-banner { width: min(var(--content-max), calc(100% - 40px)); margin: 0 auto; }
.tonsa-article-back { display: inline-flex; margin-bottom: 2.5rem; }
.tonsa-article-byline { display: flex; align-items: center; gap: 14px; margin-top: 22px; color: var(--color-ink-muted); font-size: 13px; }
.tonsa-article-byline__mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--glass-border); border-radius: 50%; background: var(--glass-surface-2); color: var(--color-primary); font-family: var(--font-display); font-weight: 600; }
.tonsa-article-byline strong, .tonsa-article-byline small { display: block; color: var(--color-ink); font-size: 14px; font-weight: 500; line-height: 1.3; }
.tonsa-article-byline small { margin-top: 2px; color: var(--color-ink-subtle); font-size: 13px; font-weight: 400; }
.tonsa-article-content { padding-inline: clamp(20px, 5vw, 40px); margin-inline: auto; }
.tonsa-article-content p, .tonsa-article-content li { color: var(--color-ink-muted); font-size: 17px; line-height: 1.75; letter-spacing: -.005em; }
.tonsa-article-content p { margin: 20px 0 0; }
.tonsa-article-content h2 { margin: 44px 0 0; scroll-margin-top: 150px; color: var(--color-ink); font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.tonsa-article-content h3 { margin: 32px 0 0; scroll-margin-top: 150px; color: var(--color-ink); font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.tonsa-article-content ul { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding-left: 22px; }
.tonsa-article-content blockquote { margin: 32px 0 0; border-left: 2px solid var(--color-primary); padding: 6px 0 6px 22px; color: var(--color-ink); font-size: 19px; font-style: italic; line-height: 1.55; }
.tonsa-article-content figure { max-width: 100%; margin: var(--space-xl) 0 0; overflow-x: auto; touch-action: pan-x pan-y; }
.tonsa-article-content table { width: 100%; min-width: 38rem; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass-surface-1); color: var(--color-ink-muted); font-size: .875rem; line-height: 1.45; }
.tonsa-article-content th, .tonsa-article-content td { padding: var(--space-sm); border-bottom: 1px solid var(--glass-border); text-align: left; vertical-align: top; }
.tonsa-article-content th { color: var(--color-ink); font-weight: 600; background: var(--glass-surface-2); }
.tonsa-article-content tbody tr:last-child td { border-bottom: 0; }
.tonsa-article-content .tonsa-article-inline-banner { overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); }
.tonsa-article-content .tonsa-article-inline-banner img { display: block; width: 100%; height: auto; }
.tonsa-article-content .tonsa-article-faq { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.tonsa-article-content .tonsa-article-faq h3 { margin-top: var(--space-md); }
.tonsa-article-placeholder { color: var(--color-ink-muted); font-style: italic; }
.tonsa-article-placeholder-wrap { max-width: 43.75rem; }
@media (min-width: 641px) {
  /* Pinned Article source: an approximately 395px centred chip pill above a
     760px header frame. The 700px reading column remains the body owner. */
  .tonsa-article-toc { position: sticky; top: var(--space-section); }
  /* Matches the body.admin-bar offset applied to the fixed header itself
     (site.css) — without it the sticky TOC's top offset stays unaware of
     the extra 32px and slides in underneath the header instead of below it. */
  body.admin-bar .tonsa-article-toc { top: calc(var(--space-section) + 32px); }
  .tonsa-article-toc a { min-height: 44px; }
  .tonsa-article-header { padding-bottom: calc(var(--space-md) + var(--space-xxs)); }
  .tonsa-article-header__frame { max-width: 760px; }
  .tonsa-article-header h1 { font-size: var(--text-display-lg-size); }
  .tonsa-article-back { display: flex; width: fit-content; margin-bottom: 2.5rem; }
}
@media (min-width: 768px) { .tonsa-articles-archive .tonsa-articles-grid-section { margin-top: var(--tonsa-articles-grid-section-margin-top); padding-top: 0; } .tonsa-article-content { max-width: var(--content-max); } }
@media (max-width: 640px) { .tonsa-article-content-section { padding-top: 3px; } .tonsa-articles-grid { grid-template-columns: 1fr; } .tonsa-article-related .tonsa-articles-grid { display: flex; overflow-x: auto; gap: var(--space-md); padding-bottom: var(--space-xs); scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-y; } .tonsa-article-related .tonsa-articles-grid::-webkit-scrollbar { display: none; } .tonsa-article-related .tonsa-articles-grid .tonsa-article-card { flex: 0 0 88vw; scroll-snap-align: start; } .tonsa-articles-archive .tonsa-article-card--featured { grid-column: auto; } .tonsa-article-toc { position: sticky; z-index: 18; top: var(--space-sm); bottom: auto; width: calc(100% - 24px); margin-top: var(--space-sm); } .tonsa-article-toc__island { border-radius: var(--radius-pill); } .tonsa-article-toc__island[open] { border-radius: var(--radius-lg); } .tonsa-article-toc__island summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 var(--space-sm); color: var(--color-ink); cursor: pointer; font-size: var(--text-button-size); font-weight: 500; list-style: none; } .tonsa-article-toc__island summary::-webkit-details-marker { display: none; } .tonsa-article-toc__island summary::after { content: '+'; color: var(--color-primary); font-size: var(--text-headline-size); } .tonsa-article-toc__island[open] summary::after { content: '−'; } .tonsa-article-toc__links { display: none; grid-template-columns: 1fr; margin-top: var(--space-xs); } .tonsa-article-toc__island[open] .tonsa-article-toc__links { display: grid; } .tonsa-article-content table { min-width: 34rem; } .tonsa-articles-grid--related .tonsa-article-card__media { height: 200px; } }
@media (prefers-reduced-motion: reduce) { .tonsa-articles-grid--related .tonsa-article-card { transition: none; } }