/* Signal — instrument-panel look; a year-scale Gantt; skills as signal bars. */
:root { --t-font-display: "IBM Plex Sans", system-ui, sans-serif; --t-font-body: "IBM Plex Sans", system-ui, sans-serif; --t-font-mono: "IBM Plex Mono", monospace; --t-max: 1120px; --t-radius: 8px; --t-radius-sm: 4px; --t-radius-pill: 4px; }
body { background-image: linear-gradient(color-mix(in srgb, var(--t-line) 60%, transparent) 1px, transparent 1px); background-size: 100% 32px; }

.t-hero--panel .t-hero__inner { border: 1px solid var(--t-line); background: var(--t-surface); border-radius: var(--t-radius); padding: clamp(20px, 3vw, 32px); margin-block-start: clamp(20px, 4vw, 40px); gap: 20px; position: relative; }
.t-hero--panel .t-hero__inner::before { content: "● LIVE" / ""; position: absolute; top: 12px; inset-inline-end: 16px; font-family: var(--t-font-mono); font-size: var(--t-size-0); color: var(--t-accent-text); letter-spacing: .1em; }
.t-hero--panel .t-photo { width: clamp(96px, 13vw, 128px); border-radius: var(--t-radius-sm); box-shadow: none; border: 1px solid var(--t-line); }
.t-hero--panel .t-eyebrow { font-family: var(--t-font-mono); letter-spacing: .08em; }
.t-hero--panel .t-name { font-weight: 600; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.02em; }
.t-hero--panel .t-headline { max-width: 44ch; }
.t-hero--panel .t-meta { font-family: var(--t-font-mono); font-size: var(--t-size-0); }
.t-hero--panel .t-link { border-radius: var(--t-radius-sm); font-family: var(--t-font-mono); font-size: var(--t-size-0); }
.t-hero--panel .t-stats { border-block-start: 1px solid var(--t-line); padding-block-start: 16px; gap: 12px; }
.t-hero--panel .t-stats li { flex: 1; min-width: 120px; background: var(--t-surface2); border-radius: var(--t-radius-sm); padding: 12px 14px; }
.t-hero--panel .t-stats strong { font-family: var(--t-font-mono); font-weight: 500; color: var(--t-accent-text); }
.t-hero--panel .t-stats span { font-family: var(--t-font-mono); text-transform: uppercase; letter-spacing: .08em; }
.btn { --bs-btn-border-radius: 4px; font-family: var(--t-font-mono); font-size: var(--t-size-0); letter-spacing: .06em; text-transform: uppercase; }

.t-section__title { font-family: var(--t-font-mono); font-weight: 500; font-size: var(--t-size-1); text-transform: uppercase; letter-spacing: .14em; color: var(--t-accent-text); display: flex; align-items: center; gap: 12px; }
.t-section__title::after { content: ""; flex: 1; height: 1px; background: var(--t-line); }
.t-section--summary .t-section__title { display: none; }
.t-summary { font-size: clamp(1.15rem, 2vw, 1.4rem); max-width: 60ch; }

/* the Gantt */
.t-gantt { display: grid; gap: 6px; margin-block-end: 28px; padding: 16px; background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); overflow-x: auto; }
.t-gantt__years { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); font-family: var(--t-font-mono); font-size: var(--t-size-0); color: var(--t-muted); border-block-end: 1px solid var(--t-line); padding-block-end: 6px; min-width: 520px; }
.t-gantt__years span { grid-column: span 12; border-inline-start: 1px solid var(--t-line); padding-inline-start: 6px; }
.t-gantt__row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); min-width: 520px; min-height: 32px; }
.t-gantt__bar { grid-column: var(--from) / var(--to); background: var(--t-accent); color: var(--t-on-accent); border-radius: var(--t-radius-sm); padding: 6px 10px; font-size: var(--t-size-0); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.t-gantt__row:nth-child(odd) .t-gantt__bar { background: color-mix(in srgb, var(--t-accent) 75%, var(--t-text)); }

/* skills as signal bars */
.t-bars__track { height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--t-surface2) 0 6px, transparent 6px 8px); }
.t-bars__fill { border-radius: 2px; background: repeating-linear-gradient(90deg, var(--t-accent) 0 6px, transparent 6px 8px); }
.t-bars__label { font-family: var(--t-font-mono); font-size: var(--t-size-0); }
.t-timeline__when, .t-list span, .t-card__sub, .t-tags .badge { font-family: var(--t-font-mono); }
.card { box-shadow: none; }
.t-chip { border-radius: 4px; font-family: var(--t-font-mono); font-size: var(--t-size-0); }
.t-quote { border-inline-start: 3px solid var(--t-accent); border-radius: 0 var(--t-radius) var(--t-radius) 0; }
.t-quote blockquote { font-family: var(--t-font-body); font-size: var(--t-size-2); }
.t-footer { font-family: var(--t-font-mono); }