/* Strategy and governance (site v3), this page's own design, 2026-09-24. Hand-authored: the words
   live in index.html beside this file, edited directly. Shared pieces (nav, hero grid, the other-areas
   tiles, contact band, footer) come from site.css, site-local.css, art.css and practice.css.
   Tokens only, never hex, so dark mode follows. No eyebrows: hierarchy is font weight. Every gold
   streak is round-ended. */

/* ---------- Bands ---------- */
.sg-band { padding-block: var(--space-24); }
.sg-band--ground { background: var(--ground); color: var(--ink); }
.sg-band--alt { background: var(--ground-alt); color: var(--ink); }
.sg-band--stone { background: var(--stone); color: var(--on-stone); }

.sg-h2 { font-family: var(--font-serif); font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.sg-head { max-width: 22ch; margin-bottom: var(--space-12); }
.sg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.sg-split__head { position: sticky; top: calc(var(--site-nav-h) + var(--space-12)); }
.sg-prose { display: flex; flex-direction: column; gap: var(--space-6); }
.sg-prose > p { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0; max-width: 60ch; }
.sg-prose b, .sg-prose strong, .sg-points b { color: var(--ink); font-weight: 650; }

/* ---------- Hero: the area name and the promise are one title at two weights ---------- */
.sg-area { display: block; font-size: .5em; line-height: 1.1; font-weight: 250; letter-spacing: -.01em; color: var(--on-stone-muted); margin-bottom: var(--space-3); }

/* ---------- What aligned looks like: five areas, one gold line through all of them ----------
   Each column is a subgrid over four rows (area, rule, statements, link), so the areas, the
   line and the links align across columns. The columns touch (no column gap; padding instead),
   so the five rules read as one line, round-ended only at its two ends. It draws once, left to
   right, when it scrolls into view. */
.sg-align { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; }
.sg-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; padding-inline: var(--space-4); }
.sg-col:first-child { padding-left: 0; }
.sg-col:last-child { padding-right: 0; }
.sg-col h3 { align-self: end; font-family: var(--font-serif); font-size: 24px; line-height: 1.15; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-5); text-wrap: balance; }
.sg-col__rule { display: block; height: var(--streak); margin-inline: calc(-1 * var(--space-4)); background: var(--gold); transform-origin: 0 50%; animation: sg-draw .5s linear both; }
.sg-col:first-child .sg-col__rule { margin-left: 0; border-radius: var(--radius-streak) 0 0 var(--radius-streak); }
.sg-col:last-child .sg-col__rule { margin-right: 0; border-radius: 0 var(--radius-streak) var(--radius-streak) 0; }
.sg-col:nth-child(2) .sg-col__rule { animation-delay: .5s; }
.sg-col:nth-child(3) .sg-col__rule { animation-delay: 1s; }
.sg-col:nth-child(4) .sg-col__rule { animation-delay: 1.5s; }
.sg-col:nth-child(5) .sg-col__rule { animation-delay: 2s; }
@keyframes sg-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sg-col__body { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); }
.sg-col__body p { font-family: var(--font-serif); font-size: 19px; line-height: 1.42; font-weight: 400; color: var(--ink); margin: 0; }
.sg-col > a { justify-self: start; margin-top: var(--space-6); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold-text); padding-bottom: 2px; }
.sg-col > a:hover { color: var(--gold-text); }

/* ---------- Three moments ---------- */
.sg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.sg-card::before { content: ""; display: block; width: 48px; height: var(--streak); background: var(--ink); border-radius: var(--radius-streak); margin-bottom: var(--space-5); }
.sg-card h3 { font-family: var(--font-serif); font-size: 28px; line-height: 1.15; font-weight: 600; margin: 0 0 var(--space-3); color: var(--ink); }
.sg-card p { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0; }
.sg-under { font-size: 21px; line-height: 1.55; color: var(--ink); max-width: 60ch; margin: var(--space-16) 0 0; }
.sg-quote { position: relative; margin: var(--space-16) 0 0; padding-left: var(--space-8); }
.sg-quote::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: var(--streak); background: var(--gold); border-radius: var(--radius-streak); }
.sg-quote p { font-family: var(--font-serif); font-size: 40px; line-height: 1.2; font-weight: 300; font-style: italic; letter-spacing: -.01em; color: var(--ink); margin: 0; max-width: 32ch; text-wrap: pretty; }
.sg-quote em { font-style: normal; font-weight: 650; }

/* ---------- Boards stay strategic: the board and management, side by side ---------- */
.sg-lede { font-size: 21px; line-height: 1.5; margin: var(--space-4) 0 var(--space-12); }
.sg-band--stone .sg-lede, .sg-band--stone .sg-after { color: var(--on-stone-muted); }
.sg-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.sg-role { position: relative; padding-top: var(--space-6); }
.sg-role::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--streak); background: var(--line-on-stone); border-radius: var(--radius-streak); }
.sg-role--board::before { background: var(--gold); }
.sg-role h3 { font-family: var(--font-serif); font-size: 32px; line-height: 1.15; font-weight: 600; margin: 0 0 var(--space-4); color: var(--on-stone); }
.sg-role ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sg-role li { font-size: 21px; line-height: 1.45; color: var(--on-stone); }
.sg-after { font-size: 19px; line-height: 1.6; max-width: 62ch; margin: var(--space-12) 0 0; }

/* ---------- The plan each side owns: bars on stone ---------- */
.sg-plan { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sg-plan li { box-sizing: border-box; position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; background: var(--stone-deep); border-radius: var(--radius-card); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-8); }
.sg-plan li::before { content: ""; position: absolute; left: var(--space-3); top: var(--space-4); bottom: var(--space-4); width: 4px; background: var(--gold); border-radius: var(--radius-streak); }
.sg-plan b { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--gold); }
.sg-plan span { font-size: 17px; line-height: 1.45; color: var(--on-stone); }
.sg-plan--shared { margin-top: var(--space-6); }  /* spans both columns: board and management share one scorecard */

/* ---------- Board development sessions: three examples ---------- */
.sg-lede--ground { color: var(--body); max-width: 60ch; margin-top: calc(-1 * var(--space-8)); }
.sg-sessions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.sg-session { display: flex; flex-direction: column; gap: var(--space-4); background: var(--ground-alt); border-radius: var(--radius-card); padding: var(--space-8); }
.sg-session h3 { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-2); }
.sg-session h3::before { content: ""; display: block; width: 48px; height: var(--streak); background: var(--gold); border-radius: var(--radius-streak); margin-bottom: var(--space-5); }
.sg-session p { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0; }
.sg-session p.sg-session__ask { font-family: var(--font-serif); font-size: 22px; line-height: 1.35; font-style: italic; color: var(--ink); }

/* ---------- A board that works as one ---------- */
.sg-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-16); }
.sg-points p { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0; max-width: 52ch; }

/* ---------- The first question: one statement at two weights ---------- */
.sg-question p { font-family: var(--font-serif); font-size: 64px; line-height: 1.08; letter-spacing: -.02em; margin: 0; max-width: 22ch; text-wrap: balance; }
.sg-question .sg-question__lead { font-weight: 250; color: var(--on-stone-muted); }
.sg-question .sg-question__q { font-weight: 600; color: var(--on-stone); margin-top: var(--space-2); }

/* ---------- Breakpoints: the design system's (1023, 899, 719) ---------- */
@media (max-width: 1023px) {
  .sg-align { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--space-12); max-width: 68ch; }
  .sg-col { display: block; grid-row: auto; padding: 0; }
  .sg-col h3 { margin-bottom: var(--space-4); }
  .sg-col__rule, .sg-col:first-child .sg-col__rule, .sg-col:last-child .sg-col__rule { width: 48px; margin: 0; border-radius: var(--radius-streak); }
  .sg-col__body { padding-top: var(--space-5); }
  .sg-col > a { display: inline-block; }
  .sg-sessions { grid-template-columns: 1fr; max-width: 68ch; }
  .sg-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .sg-split__head { position: static; }
  .sg-cards { grid-template-columns: 1fr; gap: var(--space-8); max-width: 68ch; }
}
@media (max-width: 899px) {
  .sg-band { padding-block: var(--space-16); }
  .sg-h2 { font-size: 44px; }
  .sg-quote p { font-size: 32px; }
  .sg-points { grid-template-columns: 1fr; gap: var(--space-8); }
  .sg-question p { font-size: 48px; }
}
@media (max-width: 719px) {
  .sg-h2 { font-size: 34px; }
  .sg-quote { padding-left: var(--space-6); }
  .sg-quote p { font-size: 26px; }
  .sg-roles { grid-template-columns: 1fr; gap: var(--space-8); }
  .sg-role li { font-size: 19px; }
  .sg-plan li { grid-template-columns: 1fr; gap: var(--space-1); }
  .sg-session { padding: var(--space-6); }
  .sg-question p { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) { .sg-col__rule { animation: none !important; } }