/* Technology and AI (site v3), this page's own design, 2026-09-25. Hand-authored: the words live in
   index.html beside this file, edited directly. Shared pieces (nav, hero grid, the other-areas tiles,
   the note card, 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. Gold marks what works; cost and friction are drawn in a plain rule. */

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

.tc-h2 { font-family: var(--font-serif); font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.tc-head { max-width: 22ch; margin-bottom: var(--space-6); }
.tc-h3 { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; }
.tc-lede { font-size: 21px; line-height: 1.5; color: var(--body); max-width: 56ch; margin: 0 0 var(--space-12); }
.tc-lede b { color: var(--ink); font-weight: 650; }
.tc-after { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 62ch; margin: var(--space-16) 0 0; }
.tc-after--near { margin-top: var(--space-5); }
.tc-after a, .tc-prose a:not(.to-btn) { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold-text); }
.tc-after a:hover, .tc-prose a:hover { color: var(--gold-text); }
.tc-band--stone .tc-lede, .tc-band--stone .tc-after { color: var(--on-stone-muted); }
.tc-band--stone .tc-lede b { color: var(--on-stone); }

.tc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.tc-split__head { position: sticky; top: calc(var(--site-nav-h) + var(--space-12)); }
.tc-prose { display: flex; flex-direction: column; gap: var(--space-6); }
.tc-prose p { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0; max-width: 60ch; }
.tc-prose b { color: var(--ink); font-weight: 650; }

@keyframes tc-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tc-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tc-reveal { from { clip-path: inset(-24px 100% -24px -24px); } to { clip-path: inset(-24px -24px -24px -24px); } }

/* ---------- Less friction: the ledger. What it saves under a gold rule, what it costs under a plain one ---------- */
.tc-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-block: var(--space-4); }
.tc-ledger h3 { font-family: var(--font-serif); font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-4); }
.tc-ledger__rule { display: block; height: var(--streak); background: var(--gold); border-radius: var(--radius-streak); transform-origin: 0 50%; animation: tc-across .5s linear both; }
.tc-ledger__col--cost .tc-ledger__rule { background: var(--line-strong); animation-delay: .5s; }
.tc-ledger ul { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.tc-ledger li { font-family: var(--font-serif); font-size: 22px; line-height: 1.3; font-weight: 400; color: var(--ink); text-wrap: pretty; }
.tc-ledger__col--cost li { color: var(--body); }

/* ---------- Care and feeding: four routines, each under a short gold streak ---------- */
.tc-care { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.tc-care li { font-family: var(--font-serif); font-size: 26px; line-height: 1.25; font-weight: 400; color: var(--ink); text-wrap: balance; }
.tc-care li::before { content: ""; display: block; width: 48px; height: var(--streak); margin-bottom: var(--space-5); background: var(--gold); border-radius: var(--radius-streak); transform-origin: 0 50%; animation: tc-across .35s linear both; animation-play-state: inherit; }
.tc-care li:nth-child(2)::before { animation-delay: .2s; }
.tc-care li:nth-child(3)::before { animation-delay: .4s; }
.tc-care li:nth-child(4)::before { animation-delay: .6s; }

/* ---------- The glue: four systems in plain rules, joined by one gold line into one live report ----------
   Each system's rule runs to the list's right edge, where a gold bar gathers them; one gold line carries
   on to the report. Rows are a fixed height so the bar spans first row centre to last row centre. The
   rules draw first, then the bar, then the line, then the report rises. */
.tc-flow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(48px, 2fr) minmax(0, 4fr); align-items: center; }
.tc-systems { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.tc-systems li { display: flex; align-items: center; gap: var(--space-5); height: 40px; font-family: var(--font-serif); font-size: 26px; font-weight: 400; color: var(--on-stone); white-space: nowrap; }
.tc-systems li::after { content: ""; flex: 1; height: 2px; background: var(--line-on-stone); border-radius: var(--radius-streak); transform-origin: 0 50%; animation: tc-across .5s linear both; animation-play-state: inherit; }
.tc-systems::after { content: ""; position: absolute; right: 0; top: 20px; bottom: 20px; width: var(--streak); background: var(--gold); border-radius: var(--radius-streak); animation: tc-down .4s .5s linear both; animation-play-state: inherit; }
.tc-flow__link { display: block; height: var(--streak); background: var(--gold); border-radius: 0 var(--radius-streak) var(--radius-streak) 0; transform-origin: 0 50%; animation: tc-across .4s .9s linear both; }
.tc-flow__view { background: var(--ground); color: var(--ink); border-radius: var(--radius-card); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); animation: tc-rise .5s 1.3s ease-out both; }
.tc-flow__view b { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; font-weight: 600; color: var(--ink); }
.tc-flow__view p { font-size: 17px; line-height: 1.5; color: var(--body); margin: 0; }
.tc-flow__live { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 1.4; color: var(--muted); margin-top: var(--space-3); }
.tc-flow__live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---------- As simple as possible: the two failures in plain rules, the right size in gold ---------- */
.tc-sizes { list-style: none; margin: 0 0 var(--space-12); padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.tc-sizes li { position: relative; padding-left: var(--space-12); font-family: var(--font-serif); font-size: 26px; line-height: 1.3; font-weight: 300; color: var(--body); text-wrap: pretty; }
.tc-sizes li b { font-weight: 600; color: var(--ink); }
.tc-sizes li::before { content: ""; position: absolute; left: 0; top: calc(.65em - 1px); width: 32px; height: 2px; background: var(--line-strong); border-radius: var(--radius-streak); transform-origin: 0 50%; animation: tc-across .3s linear both; animation-play-state: inherit; }
.tc-sizes li.tc-sizes__right { color: var(--ink); font-weight: 400; }
.tc-sizes li.tc-sizes__right::before { top: calc(.65em - var(--streak) / 2); height: var(--streak); background: var(--gold); animation-delay: .5s; }
.tc-build { margin-top: var(--space-2); }
.tc-build a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold-text); }

/* ---------- Nimble: once a year against every month, drawn once ----------
   Each line stretches to its column (preserveAspectRatio none); strokes are non-scaling and the dots are
   round-capped zero-length strokes, so they stay round at any width. Illustrative. */
.tc-cadence { margin: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.tc-cadence__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.tc-cadence__row span { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; font-weight: 300; color: var(--body); }
.tc-cadence__row b { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--ink); }
.tc-cadence svg { display: block; width: 100%; height: 24px; overflow: visible; animation: tc-reveal 1.4s ease-out both; }
.tc-cadence__row--often svg { animation-delay: .3s; }
.tc-cadence__base { fill: none; stroke: var(--line-strong); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tc-cadence__dot { fill: none; stroke: var(--gold); stroke-width: 16px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tc-cadence figcaption { font-size: 17px; line-height: 1.5; color: var(--muted); padding-left: calc(200px + var(--space-6)); }

.tc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); margin-top: var(--space-16); }
.tc-pair p { font-size: 19px; line-height: 1.6; color: var(--body); margin: var(--space-5) 0 0; max-width: 56ch; }

/* ---------- The one big statement ---------- */
.tc-big { font-family: var(--font-serif); font-size: 56px; line-height: 1.1; font-weight: 300; letter-spacing: -.015em; color: var(--on-stone); margin: 0; max-width: 22ch; text-wrap: balance; }
.tc-big b { font-weight: 650; }
.tc-big__why { font-size: 19px; line-height: 1.6; color: var(--on-stone-muted); max-width: 60ch; margin: var(--space-8) 0 0; text-wrap: pretty; }

/* ---------- Breakpoints: the design system's (1023, 899, 719) ---------- */
@media (max-width: 1023px) {
  .tc-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .tc-split__head { position: static; }
  .tc-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-systems li { font-size: 22px; }
  .tc-flow__view { padding: var(--space-6); }
  .tc-flow__view b { font-size: 26px; }
}
@media (max-width: 899px) {
  .tc-band { padding-block: var(--space-16); }
  .tc-h2 { font-size: 44px; }
  .tc-big { font-size: 42px; }
  .tc-pair { grid-template-columns: 1fr; gap: var(--space-12); }
}
@media (max-width: 719px) {
  .tc-h2 { font-size: 34px; }
  .tc-h3 { font-size: 28px; }
  .tc-big { font-size: 32px; }
  .tc-ledger { grid-template-columns: 1fr; gap: var(--space-8); }
  .tc-ledger li { font-size: 20px; }
  .tc-care { grid-template-columns: 1fr; gap: var(--space-6); }
  .tc-care li { font-size: 22px; }
  .tc-care li::before { margin-bottom: var(--space-3); }
  /* The flow stacks: the systems, one gold line down, the report. */
  .tc-flow { grid-template-columns: 1fr; }
  .tc-systems { gap: var(--space-2); }
  .tc-systems li { height: auto; font-size: 22px; }
  .tc-systems li::after, .tc-systems::after { display: none; }
  .tc-flow__link { width: var(--streak); height: 48px; margin: var(--space-5) 0 var(--space-5) 8px; border-radius: var(--radius-streak); transform-origin: 50% 0; animation-name: tc-down; animation-delay: .2s; }
  .tc-flow__view { animation-delay: .6s; }
  .tc-sizes li { font-size: 22px; padding-left: var(--space-8); }
  .tc-sizes li::before { width: 20px; }
  .tc-cadence__row { grid-template-columns: 1fr; gap: var(--space-3); }
  .tc-cadence__row span, .tc-cadence__row b { font-size: 20px; }
  .tc-cadence__dot { stroke-width: 12px; }
  .tc-cadence figcaption { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-ledger__rule, .tc-care li::before, .tc-systems li::after, .tc-systems::after, .tc-flow__link,
  .tc-flow__view, .tc-sizes li::before, .tc-cadence svg { animation: none !important; }
}