/* Kinetic — scroll-driven variable type (CSS scroll-timeline; static when reduced motion or unsupported). */
:root { --t-font-display: "Inter", system-ui, sans-serif; --t-font-body: "Inter", system-ui, sans-serif; --t-max: 1120px; --t-radius: 12px; --t-radius-sm: 8px; }

/* hero: huge heavy name that lightens and tightens as the page scrolls */
.t-hero--kinetic { position: sticky; top: 0; z-index: 2; background: var(--t-bg); }
.t-hero--kinetic .t-hero__inner { grid-template-columns: 1fr; gap: 10px; padding-block: clamp(48px, 10vw, 120px) clamp(16px, 3vw, 32px); }
.t-hero--kinetic .t-hero__media { display: none; }
.t-hero--kinetic .t-eyebrow { font-weight: 500; letter-spacing: .2em; }
.t-hero--kinetic .t-name { font-size: clamp(3rem, 12vw, 9.5rem); line-height: .9; letter-spacing: -0.06em; font-weight: 900; font-variation-settings: "wght" 900, "opsz" 32; }
.t-hero--kinetic .t-headline { font-size: clamp(1.2rem, 2.6vw, 2rem); font-weight: 300; max-width: 30ch; letter-spacing: -0.01em; }
.t-hero--kinetic .t-tagline { font-weight: 400; }
.t-hero--kinetic .t-stats { gap: 24px 48px; }
.t-hero--kinetic .t-stats strong { font-weight: 200; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.04em; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .t-hero--kinetic .t-name { animation: kinetic-name linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    .t-hero--kinetic .t-hero__inner { animation: kinetic-hero linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    .t-section { animation: kinetic-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes kinetic-name { to { font-variation-settings: "wght" 300, "opsz" 32; letter-spacing: -0.02em; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; } }
@keyframes kinetic-hero { to { padding-block: 14px 10px; gap: 0; } }
@keyframes kinetic-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
/* once the hero has compressed, everything but the name folds away so it reads as a header */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .t-hero--kinetic .t-eyebrow, .t-hero--kinetic .t-headline, .t-hero--kinetic .t-tagline, .t-hero--kinetic .t-meta, .t-hero--kinetic .t-actions, .t-hero--kinetic .t-stats { animation: kinetic-fold linear both; animation-timeline: scroll(root); animation-range: 0 40vh; }
  }
}
@keyframes kinetic-fold { to { opacity: 0; max-height: 0; margin: 0; overflow: hidden; } }
.t-hero--kinetic .t-hero__inner { border-block-end: 1px solid var(--t-line); }

.t-layout { position: relative; z-index: 1; }
.t-main { gap: clamp(48px, 8vw, 96px); }
.t-section__title { font-weight: 200; font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -0.04em; line-height: 1; }
.t-section--summary .t-section__title { display: none; }
.t-summary { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; max-width: 36ch; }
.t-item__title { font-weight: 700; letter-spacing: -0.01em; }
.card { box-shadow: none; }
.t-quote blockquote { font-family: var(--t-font-body); font-weight: 300; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; }
.t-chip { font-weight: 500; }

/* the skills marquee (the Kinetic signature): heavy and outlined words gliding past */
.t-marquee { overflow: hidden; border-block: 2px solid var(--t-text); padding-block: 10px; background: var(--t-bg); }
.t-marquee__track { display: flex; gap: 28px; width: max-content; animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .t-marquee__track { animation: none; flex-wrap: wrap; width: auto; } .t-marquee__track > :nth-child(n+41) { display: none; } }
.t-marquee__word { font-family: var(--t-font-display); font-weight: 900; font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: -0.04em; white-space: nowrap; line-height: 1; }
.t-marquee__word--outline { color: transparent; -webkit-text-stroke: 1.5px var(--t-text); font-weight: 700; }
.t-marquee__dot { color: var(--t-accent-text); font-size: 1rem; align-self: center; }