/* Site-level pieces the design system does not have yet (site v3, 2026-09-24): the nav's
   end cluster and phone menu, How I work, Who I work with, About, the contact band, the
   footer, and the pause that holds the art until it scrolls into view. Each block moves
   into the design system after cutover (the port plan's "After cutover" list) and leaves
   this file; site.css stays a verbatim copy of the design system's bundle.css.
   Every color is a token, so dark mode follows without a rule here. */

body { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.site-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 30; background: var(--stone); color: var(--on-stone); padding: 10px 16px; border-radius: var(--radius-button); font-weight: 650; text-decoration: none; }
.site-skip:focus { top: var(--space-4); outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- The art plays once, when it scrolls into view, then holds ----------
   The head adds .js-reveal only when IntersectionObserver exists, and site.js adds .is-in
   to each .site-reveal as it enters the viewport. Until then every animation sits paused at
   its first frame. Reduced motion (site.css) removes the animations, so the art shows finished. */
.js-reveal .site-reveal:not(.is-in),
.js-reveal .site-reveal:not(.is-in) * { animation-play-state: paused; }

/* ---------- Dark-mode repairs to the vendored design system ----------
   The insight panel's button is an on-stone chip with ink text; in dark both are near
   white. Back-port to the design system, then delete. */
:root[data-theme="dark"] .to-feature__btn, :root[data-theme="dark"] .to-feature__btn .to-arr { color: var(--stone-2); }

/* ---------- No eyebrows (Michael, 9/24): hierarchy is font weight ----------
   site.css still draws .to-eyebrow as a small gold uppercase overline. Pre-headings are gone
   from the markup; the labels left (menu and slide areas, the three ways in) read as plain
   muted text over a bold title, as the practice heroes' area line does. A section that needs
   a name gets .site-label. Back-port both. */
.to-eyebrow, .to-mm__item .to-eyebrow, .to-tile--plain .to-eyebrow, .to-gold .to-eyebrow, .to-slide__txt .to-eyebrow {
  font-size: 15px; line-height: 1.4; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted);
}
.to-on-stone .to-eyebrow { color: var(--on-stone-muted); }
.to-tile__area { font-size: 15px; line-height: 1.4; font-weight: 400; letter-spacing: 0; text-transform: none; }
.site-label { font-family: var(--font-sans); font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: 0; color: inherit; margin: 0; }

/* ---------- The nav floats (Michael, 9/24) ----------
   Sticky at every width, so no page needs a scroll back to the top to change sections. A
   hairline appears once content runs under it (site.js). Anchors land clear of the bar, and
   the phone menu scrolls inside the viewport. */
:root { --site-nav-h: 88px; }
html { scroll-padding-top: var(--site-nav-h); }
.to-nav { position: sticky; top: 0; z-index: 25; transition: box-shadow .2s ease; }
.to-nav.site-nav--stuck { box-shadow: 0 1px 0 var(--line); }

/* ---------- Nav: the end cluster (switcher, CTA, phone menu button) ---------- */
.site-logo { display: block; height: 44px; width: auto; }
.site-nav__end { display: flex; align-items: center; gap: var(--space-3); }
.site-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius-button); background: transparent; color: var(--ink); cursor: pointer; }
.site-menu-btn:hover { border-color: var(--ink); }
.site-menu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.site-menu-btn__close { display: none; }
.site-menu-btn[aria-expanded="true"] .site-menu-btn__open { display: none; }
.site-menu-btn[aria-expanded="true"] .site-menu-btn__close { display: block; }

.site-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--ground-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius-card) var(--radius-card); padding-block: var(--space-6) var(--space-8); max-height: calc(100dvh - var(--site-nav-h)); overflow-y: auto; overscroll-behavior: contain; }
.site-menu[hidden] { display: none; }
.site-menu .to-wrap { display: block; min-height: 0; } /* site.css flexes every .to-wrap inside .to-nav */
.site-menu__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.site-menu__list a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.site-menu__list b { font-family: var(--font-serif); font-size: 20px; line-height: 1.25; font-weight: 600; }
.site-menu__plain { margin-top: var(--space-4); }
.site-menu__plain a { font-size: 17px; font-weight: 650; padding-block: var(--space-4); }
.site-menu a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }

@media (max-width: 899px) {
  .site-menu-btn { display: inline-flex; }
  .site-nav__end .to-theme { display: none; }
  :root { --site-nav-h: 72px; }
  .to-nav .to-wrap { min-height: 72px; }
  .site-logo { height: 36px; }
}
@media (max-width: 599px) { .site-nav__end .to-btn { display: none; } }
@media (min-width: 1180px) { .site-menu { display: none !important; } }

/* ---------- How I work: three ways in ---------- */
.site-state { background: var(--ground); color: var(--ink); padding-block: var(--space-32) var(--space-24); }
.site-state__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: var(--space-16); }
.site-state__head h2 { font-family: var(--font-serif); font-size: 64px; line-height: 1.05; font-weight: 400; letter-spacing: -.02em; color: var(--ink); margin: 0; max-width: 18ch; text-wrap: balance; }
.site-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.site-card { display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.site-card::before { content: ""; display: block; height: var(--streak); background: var(--stone); border-radius: var(--radius-streak); margin-bottom: var(--space-3); }
.site-card:hover { color: var(--ink); }
.site-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.site-card h3 { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; font-weight: 600; margin: 0; }
.site-card p:not(.to-eyebrow) { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; }
.site-card__meta { font-family: var(--font-mono); font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-2); }
.site-state__note { margin: var(--space-12) auto 0; text-align: center; font-size: 17px; color: var(--muted); }

/* ---------- Who I work with ---------- */
.site-who { background: var(--ground); color: var(--ink); padding-bottom: var(--space-24); }
.site-who__in { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-16); border-top: 1px solid var(--line); padding-top: var(--space-16); }
.site-who h2 { font-family: var(--font-serif); font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin: var(--space-3) 0 0; }
.site-who__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.site-who__list li { display: flex; flex-direction: column; gap: var(--space-3); }
.site-who__list span { font-family: var(--font-mono); font-size: 14px; color: var(--gold-text); }
.site-who__list h3 { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; font-weight: 600; margin: 0; }
.site-who__list p { font-size: 15px; line-height: 1.55; color: var(--body); margin: 0; }

/* ---------- About: the split, text on stone and the portrait ---------- */
.site-about { display: grid; grid-template-columns: minmax(0, 1fr) 560px; background: var(--stone); color: var(--on-stone); }
.site-about__txt { padding: var(--space-24) var(--space-16) var(--space-24) max(var(--gutter), calc((100vw - var(--max-page)) / 2)); display: flex; flex-direction: column; gap: var(--space-6); }
.site-about__txt blockquote { font-family: var(--font-serif); font-size: 44px; line-height: 1.12; font-weight: 500; letter-spacing: -.015em; color: var(--on-stone); margin: 0; max-width: 20ch; }
.site-about__txt p:not(.to-eyebrow) { font-size: 17px; line-height: 1.6; color: var(--on-stone-muted); margin: 0; max-width: 60ch; }
.site-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.site-figs div { display: flex; flex-direction: column; gap: var(--space-2); border-top: 2px solid var(--gold); padding-top: var(--space-4); }
.site-figs b { font-family: var(--font-mono); font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--on-stone); }
.site-figs span { font-size: 14px; line-height: 1.45; color: var(--on-stone-muted); }
.site-about__img { position: relative; overflow: hidden; min-height: 420px; }
.site-about__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.site-about__cap { position: absolute; left: var(--space-6); bottom: var(--space-6); font-family: var(--font-mono); font-size: 13px; background: var(--stone); color: var(--on-stone); padding: 6px 10px; border-radius: var(--radius-button); }

/* ---------- Contact band: Start here ---------- */
.site-contact { background: var(--stone); color: var(--on-stone); padding-block: var(--space-24); }
.site-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); align-items: start; }
.site-contact__intro { display: flex; flex-direction: column; gap: var(--space-6); }
.site-contact h2 { font-family: var(--font-serif); font-size: 64px; line-height: 1.02; font-weight: 600; letter-spacing: -.02em; color: var(--on-stone); margin: 0; }
.site-contact__lede { font-size: 21px; line-height: 1.5; color: var(--on-stone-muted); margin: 0; }
.site-contact__details { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-family: var(--font-mono); font-size: 15px; }
.site-contact__details a { color: var(--on-stone); text-decoration: none; }
.site-contact__details a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-form { display: flex; flex-direction: column; gap: var(--space-4); }
.site-field { display: flex; flex-direction: column; gap: 6px; }
.site-field label { font-size: 14px; font-weight: 650; color: var(--on-stone); }
.site-field input, .site-field textarea { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; padding: 12px 14px; border: 0; border-radius: var(--radius-control); background: var(--ground); color: var(--ink); }
.site-field textarea { resize: vertical; }
.site-form .to-btn { align-self: flex-start; }
.site-form__fine { font-size: 14px; color: var(--on-stone-muted); margin: 0; }
.site-form__status { font-size: 15px; line-height: 1.5; color: var(--on-stone); margin: 0; }
.site-form__status:empty { display: none; }
.site-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.to-on-stone a:focus-visible, .to-on-stone input:focus-visible, .to-on-stone textarea:focus-visible, .to-on-stone button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Footer: on paper ---------- */
.site-foot { background: var(--ground-alt); padding-block: var(--space-12); }
.site-foot .to-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6) var(--space-8); }
.site-foot__logo { display: block; height: 40px; width: auto; }
.site-foot__legal { margin: 0; font-size: 13px; color: var(--muted); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: 13px; }
.site-foot__links a { color: var(--muted); text-decoration: none; }
.site-foot__links a:hover { color: var(--ink); }
.site-foot__links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-foot__mail { font-family: var(--font-mono); }

/* ---------- Breakpoints: the design system's (1023, 899, 719) ---------- */
@media (max-width: 1023px) {
  .site-about { grid-template-columns: 1fr; }
  .site-about__txt { padding: var(--space-16) var(--gutter); }
  .site-who__in { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 899px) {
  .site-state { padding-block: var(--space-16); }
  .site-state__head h2 { font-size: 44px; }
  .site-cards { grid-template-columns: 1fr; gap: var(--space-12); }
  .site-who__list { grid-template-columns: 1fr; }
  .site-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-contact { padding-block: var(--space-16); }
  .site-contact__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .site-contact h2 { font-size: 44px; }
}
@media (max-width: 719px) {
  .site-state__head h2 { font-size: 36px; }
  .site-who { padding-bottom: var(--space-16); }
  .site-who__in { padding-top: var(--space-12); }
  .site-who h2 { font-size: 32px; }
  .site-about__txt { padding: var(--space-16) var(--space-4); }
  .site-about__txt blockquote { font-size: 30px; }
  .site-figs b { font-size: 26px; }
  .site-about__img { min-height: 320px; }
  .site-contact h2 { font-size: 36px; }
  .site-contact__lede { font-size: 18px; }
  .site-foot .to-wrap { flex-direction: column; align-items: flex-start; }
}

/* ---------- Homeward Circle (Michael, 9/25): co-branding for the FFTA sponsorship ----------
   A nav item with Homeward's mark on every page, and a band under the How I can help tiles on
   the homepage. The mark is the #hc-mark symbol in each page's sprite; its disc and line take
   these two tokens, so dark mode shows Homeward's reversed variant (cream disc, pine lines). */
:root { --hc-disc: #1f3a32; --hc-line: #f6f2e9; }
:root[data-theme="dark"] { --hc-disc: #f6f2e9; --hc-line: #1f3a32; }
.site-hc-mark { width: 20px; height: 20px; flex: none; }
.to-nav__links > li > a.site-nav__hc { gap: 8px; }
.site-menu__plain a.site-nav__hc { flex-direction: row; align-items: center; gap: 10px; }
.site-hc { background: var(--ground); color: var(--ink); padding-block: var(--space-16); }
.site-hc__in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-8); }
.site-hc__mark { display: block; width: 112px; height: 112px; }
.site-hc__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.site-hc h2 { font-family: var(--font-serif); font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.site-hc p { font-size: 19px; line-height: 1.55; color: var(--body); margin: 0; max-width: 52ch; }
@media (max-width: 719px) {
  .site-hc { padding-block: var(--space-12); }
  .site-hc__in { grid-template-columns: 1fr; gap: var(--space-6); }
  .site-hc__mark { width: 80px; height: 80px; }
  .site-hc h2 { font-size: 32px; }
}

/* ---------- FFTA (Michael, 9/28): FFTA's own logo on the sponsor tile ----------
   The organization goes by FFTA alone now; public copy never spells out the old full name.
   The tiles sit on stone in both themes, so the reversed logo (light letters) serves both.
   Originals: brand/partners/ffta/. */
.site-ffta { padding: var(--space-6) var(--space-6) 0; }
.site-ffta img { display: block; width: 132px; height: auto; }

/* Four nav items and the CTA need about 1,155px, so the phone menu takes over below 1,180px
   (was 900) and nothing in the bar wraps; site.js closes the menu at the same width. */
.to-nav__links > li > a, .to-nav .to-btn { white-space: nowrap; }
@media (max-width: 1279px) { .to-nav .to-wrap { gap: var(--space-8); } }
@media (max-width: 1179px) {
  .to-nav__links { display: none; }
  .to-nav .to-wrap { justify-content: space-between; }
  .site-menu-btn { display: inline-flex; }
}