/* Model overview and a consistent four-tab navigation. */
.club-projections {margin-top: 0; padding-top: 12px; border-top: 0}
.club-projections h3 {margin: 0 0 8px; color: var(--active-color); font-size: var(--type-data); font-weight: 600}
.club-projections .projection-note {margin: 14px 0 0; line-height: 1.6}
.club-projections .stat-row strong {white-space: nowrap}
body:has(#method:not([hidden])) {--active-color: #89601f; --active-tint: #f7eedc; --active-edge: #d6bc89}
html[data-theme="dark"] body:has(#method:not([hidden])) {--active-color: #e3bb72; --active-tint: #403522; --active-edge: #806b45}
header .main-tabs .nav-logo {font-size: 1.125rem; flex: 0 0 auto; vertical-align: 0}
header .main-tabs .model-tab.active {--nav-logo-color: #fff}
html[data-theme="dark"] header .main-tabs .model-tab.active {--nav-logo-color: #111b23}
html[data-theme] header .main-tabs .model-tab.active .nav-logo::before,
html[data-theme] header .main-tabs .model-tab.active .nav-logo::after {background-color: var(--nav-logo-color)}
#method {--section-color: var(--active-color); --section-tint: var(--active-tint); --section-edge: var(--active-edge)}
html[data-theme="dark"] #method {--section-color: var(--active-color); --section-tint: var(--active-tint); --section-edge: var(--active-edge)}
#method .model-intro {max-width: 780px; margin: 0 0 28px}
#method .model-title {display: flex; align-items: flex-start; gap: .35em; margin: 0 0 16px; line-height: 1}
#method .model-title .ninety-inline {flex: 0 0 auto; vertical-align: 0}
#method .model-approach {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 26px 28px; border: 1px solid var(--section-edge); border-top: 3px solid var(--section-color); border-radius: 12px; background: var(--surface)}
#method h2 {margin: 0 0 12px; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.02em}
#method p:not(.eyebrow):not(.lead) {margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75}
#method strong {color: var(--ink); font-weight: 600}
#method .model-views-section {margin-top: 34px}
#method .model-views {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px}
#method .model-views article {min-width: 0; padding: 18px 0 22px; border-bottom: 1px solid var(--line)}
#method h3 {margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.4; font-weight: 600}
#method h3 a {color: var(--section-color); text-decoration: none; text-underline-offset: 4px}
#method h3 a:hover {text-decoration: underline}
#method h3 a span {display: inline-block; margin-left: 3px; font-size: .875em}
#method .model-views p {font-size: .9375rem}
#method .model-reading {margin-top: 30px}
#method .model-reading-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px}
#method .model-creator {margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--section-edge)}
#method .model-creator p {max-width: 80ch}
@media (min-width: 801px) {
  header .main-tabs .model-tab.active {background: var(--active-color)}
  #method .model-intro {max-width: none}
  #method .model-creator p {max-width: none}
  header .main-tabs {align-items: stretch}
  header .main-tabs a {white-space: nowrap; line-height: 1.35}
}
@media (min-width: 801px) and (max-width: 1100px) {
  header {gap: 16px}
  header .main-tabs a {padding-left: 10px; padding-right: 10px}
}
@media (max-width: 800px) {
  html[data-theme] header .main-tabs .model-tab.active {--nav-logo-color: var(--active-color)}
  html[data-theme] header .main-tabs {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px}
  html[data-theme] header .main-tabs a {min-height: 52px; padding: 8px 3px; font-size: .8125rem; line-height: 1.3; text-wrap: balance}
  #method .model-intro {margin-bottom: 22px}
  #method .model-title {margin-bottom: 14px}
  #method .model-approach {grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px}
  #method .model-views {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px}
  #method .model-reading-grid {grid-template-columns: minmax(0, 1fr); gap: 16px}
}
@media (max-width: 550px) {
  #method .model-views {grid-template-columns: minmax(0, 1fr)}
  #method .model-views-section {margin-top: 26px}
  #method .model-views article {padding: 17px 0}
  #method h2 {font-size: 1.25rem}
  #method h3 {font-size: 1.0625rem}
}
