/*
 * tfs components. Load tokens.css first.
 * Colors, type, spacing and radii come from tokens; the few literal sizes are
 * a component's own anatomy. Responsive changes happen in tokens.css, so this
 * file has no breakpoints. One block per component, documented in
 * components/<Name>/README.md.
 */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  line-height: var(--ui-leading);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.display-xl,
.display-lg,
.display-md {
  text-wrap: balance;
}

/* Pillar context: set on any element; components inside read --accent*. */
.pillar-skills {
  --accent: var(--pillar-skills);
  --accent-tint: var(--pillar-skills-tint);
  --accent-tint-soft: var(--pillar-skills-tint-soft);
  --accent-glow: var(--glow-skills);
}

.pillar-ai {
  --accent: var(--pillar-ai);
  --accent-tint: var(--pillar-ai-tint);
  --accent-tint-soft: var(--pillar-ai-tint-soft);
  --accent-glow: var(--glow-ai);
}

.pillar-energy {
  --accent: var(--pillar-energy);
  --accent-tint: var(--pillar-energy-tint);
  --accent-tint-soft: var(--pillar-energy-tint-soft);
  --accent-glow: var(--glow-energy);
}

/* ---------- Section ---------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
  background: var(--surface);
}

.section--page {
  background: var(--surface-page);
}

.section--rounded {
  border-radius: 0 0 var(--radius-30) var(--radius-30);
}

/* ---------- Button ---------- */

.button {
  display: inline-block;
  padding: var(--button-padding);
  border-radius: var(--radius-8);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  font-family: var(--font-ui);
  font-size: var(--button-size);
  line-height: var(--button-leading);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  filter: drop-shadow(var(--shadow-button));
  transition: color 0.5s ease-out;
}

.button:hover {
  color: var(--surface);
}

.button--lg {
  padding: var(--button-lg-padding);
  font-size: var(--button-lg-size);
  line-height: var(--button-lg-leading);
}

/* ---------- NavLink ---------- */

.nav-link {
  display: block;
  padding: 5px var(--space-8) 7px;
  border-radius: var(--radius-6);
  font-family: var(--font-display);
  font-size: var(--nav-size);
  line-height: var(--nav-leading);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease-out;
}

.nav-link:hover {
  background: var(--hover-wash);
}

/* ---------- Highlight ---------- */

/*
 * A marker stroke behind a run of text, cloned onto every line fragment so a
 * wrapped highlight gets one stroke per line. Each stroke is 4px shorter than
 * its line box, and __text paints above every stroke, so descenders are never
 * covered by the next line's marker.
 */
.highlight {
  padding-inline: var(--highlight-overhang);
  margin-inline: calc(-1 * var(--highlight-overhang));
  background: linear-gradient(var(--highlight), var(--highlight)) center / 100% calc(1lh - 4px) no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.highlight__text {
  position: relative;
  z-index: 1;
}

/* ---------- HeroTitle ---------- */

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  /* Room for the highlight, which overhangs the text on the left */
  padding-left: var(--highlight-overhang);
}

.hero-title__line {
  display: block;
}

.hero-title__lede {
  max-width: var(--measure-lede);
}

/* ---------- SectionHeader ---------- */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.section-header--center {
  align-items: center;
  text-align: center;
}

/* ---------- NumberedItem ---------- */

.numbered-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.numbered-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

/* The digit is 20px bold, large text, so ink on every pillar hue passes 3:1. */
.numbered-item__disc {
  flex: 0 0 var(--disc-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--disc-size);
  border-radius: var(--radius-circle);
  background: var(--accent, var(--surface-muted));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}

/* ---------- Card ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--space-20);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  border-radius: var(--radius-16);
  background: var(--accent-tint, var(--surface-muted));
}

.card--soft {
  background: var(--accent-tint-soft, var(--surface-muted));
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--ink);
}

/* The pillar dot carries the hue; the title stays in ink. */
.card__title::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--accent, var(--ink-muted));
}

.card__media {
  border-radius: var(--radius-16);
  background: var(--surface);
  box-shadow: var(--accent-glow, none);
  overflow: hidden;
}

/* ---------- Chip ---------- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.chip-list--center {
  justify-content: center;
}

.chip {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-page);
}

.section--page .chip {
  background: var(--surface-muted);
}

/* ---------- CtaGroup ---------- */

.cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.cta-group--center {
  align-items: center;
  text-align: center;
}

.cta-group__note {
  max-width: var(--measure-note);
}

/* ---------- BrandLockup ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--wordmark-size);
  line-height: var(--wordmark-leading);
  font-weight: 700;
  text-decoration: none;
}

.brand__mark {
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
}

.brand--compact {
  --mark-size: 36px;
}

.brand--inverse {
  color: var(--ink-inverse);
}

/* ---------- SiteHeader ---------- */

.site-header {
  background: var(--surface);
}

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-16) var(--space-24);
  padding-block: var(--space-32) var(--space-16);
}

.site-header__links {
  flex: 1 1 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

/* ---------- SiteFooter ---------- */

.site-footer {
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-40) var(--space-48);
  padding-block: var(--space-64);
}

.site-footer__identity,
.site-footer__group,
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__identity {
  gap: var(--space-20);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40) var(--space-64);
}

.site-footer__heading {
  font-weight: 500;
}

.site-footer__link {
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--ink-inverse-hover);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .nav-link {
    transition: none;
  }
}