/* Immutable growth-20260917 patch. Injected only into recognized baseline templates.
   Type/tap/focus values adapted from inspected September 14 staged redesign.css.
   No homepage/scene styles and no global reset. */
body[data-legacy-growth] a:focus-visible,
body[data-legacy-growth] button:focus-visible,
body[data-legacy-growth] summary:focus-visible {
  outline: 2px solid var(--gold, #c8a96e); outline-offset: 5px;
}
body[data-legacy-growth] .light a:focus-visible,
body[data-legacy-growth] .light button:focus-visible,
body[data-legacy-growth] .light summary:focus-visible { outline-color: #755322; }
body[data-legacy-growth="september"] .wordmark { font-size: 12px; letter-spacing: .12em; line-height: 1.5; }
body[data-legacy-growth="september"] .wordmark b { letter-spacing: .06em; }
body[data-legacy-growth="september"] .nav-cta,
body[data-legacy-growth="september"] footer a { display: inline-flex; align-items: center; min-height: 44px; }
body[data-legacy-growth="september"] .nav-cta { padding: 10px 0; }
body[data-legacy-growth="september"] .site-header nav { gap: 24px; font-size: 15px; }
body[data-legacy-growth="september"] .site-header nav a { min-height: 44px; }
body[data-legacy-growth="september"] .button { min-height: 48px; font-size: 16px; }
body[data-legacy-growth="september"] .button:hover { transform: none; }
body[data-legacy-growth="september"] .text-link { font-size: 16px; }
body[data-legacy-growth="september"] .eyebrow,
body[data-legacy-growth="september"] .num { font-size: 12px; letter-spacing: .08em; }
/* app.js does not animate .intro. Do not claim or override an unverified intro issue.
   styles.css DOES hide .reveal until JS; keep its content static and visible. */
body[data-legacy-growth] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
/* Exact legacy article DOM: fixed .nav, .nav-inner height 72px, 1px border,
   adjacent main has inline padding:2rem 1rem. Preserve that reading gap. */
body[data-legacy-growth="article-nav"] { --legacy-nav-height: 73px; }
body[data-legacy-growth="article-nav"] > main { padding-top: calc(var(--legacy-nav-height) + 2rem) !important; }
body[data-legacy-growth="article-nav"] main [id] { scroll-margin-top: calc(var(--legacy-nav-height) + 1rem); }
body[data-legacy-growth="article-nav"] .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Preserve intrinsic dimensions without forcing arbitrary crop ratios. Verified
   mike.webp markup is 780 x 1042; its existing max-height/object-fit stays intact. */
body[data-legacy-growth="september"] .portrait img[width="780"][height="1042"] { aspect-ratio: 780 / 1042; }
body[data-legacy-growth="article-nav"] img:not(.nav-logo) { max-width: 100%; height: auto; }
@media (max-width: 760px) {
  body[data-legacy-growth="september"] .site-header nav { font-size: 14px; gap: 0 20px !important; }
  body[data-legacy-growth="september"] .brand-logo { width: 44px; height: 44px; }
  body[data-legacy-growth="september"] .wordmark { font-size: 11px; letter-spacing: .1em; }
  body[data-legacy-growth="september"] .nav-cta { font-size: 14px; }
  body[data-legacy-growth="september"] .nav-cta span { margin-left: 10px; }
  body[data-legacy-growth="september"] .intro h1 { font-size: clamp(36px, 8.7vw, 51px); overflow-wrap: break-word; }
}
@media (max-width: 768px) {
  /* Matches styles.css nav-collapse breakpoint exactly.
     These simple article navs have no toggle or nav JS. Keep all five links
     available in a second row rather than inheriting display:none. */
  body[data-legacy-growth="article-nav"]:has(> nav[data-legacy-simple-nav]) { --legacy-nav-height: 113px; }
  body[data-legacy-growth="article-nav"] > nav[data-legacy-simple-nav] { padding-inline: 16px; }
  body[data-legacy-growth="article-nav"] > nav[data-legacy-simple-nav] .nav-inner { height: 112px; flex-wrap: wrap; align-content: center; gap: 8px; }
  body[data-legacy-growth="article-nav"] > nav[data-legacy-simple-nav] .nav-links { display: flex; position: static; width: 100%; gap: 16px; justify-content: space-between; margin: 0; padding: 0; }
  body[data-legacy-growth="article-nav"] > nav[data-legacy-simple-nav] .nav-links a { font-size: 13px; }
  body[data-legacy-growth="article-nav"] main h1 { font-size: clamp(30px, 8vw, 44px); overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-legacy-growth] .button, body[data-legacy-growth] .nav-cta, body[data-legacy-growth] .text-link { transition: none; }
}
@media (max-width: 760px) {
  /* Existing meet-mike DOM: .founder.about > .portrait precedes the H1.
     September 14's founder treatment uses a 180px mobile portrait. Reuse
     only that bound, not its unrelated homepage layout. */
  body[data-legacy-growth="september"] .founder.about > .portrait { max-width: 180px; }
}
