/* Retro — Y2K desktop windows, stickers, stripes. */
:root { --t-font-display: "Rubik Mono One", "Arial Black", sans-serif; --t-font-body: "Rubik", system-ui, sans-serif; --t-max: 1040px; --t-radius: 10px; --t-radius-sm: 8px; --t-radius-pill: 999px; --t-shadow: 5px 5px 0 var(--t-text); --t-border: 2px solid var(--t-text); }
body { background-color: var(--t-bg); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--t-accent2) 18%, transparent) 0 14px, transparent 14px 28px); }

/* window chrome helper: a title bar drawn with ::before on sections and the hero box */
.t-window, .t-section, .t-hero--window .t-hero__inner { position: relative; background: var(--t-surface); border: var(--t-border); border-radius: var(--t-radius); box-shadow: var(--t-shadow); padding: 52px clamp(16px, 3vw, 28px) clamp(18px, 3vw, 28px); overflow: hidden; }
.t-section::before, .t-hero--window .t-hero__inner::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34px; background: var(--t-accent); border-block-end: var(--t-border); }
.t-section::after, .t-hero--window .t-hero__inner::after { content: ""; position: absolute; top: 10px; inset-inline-start: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--t-on-accent); box-shadow: 22px 0 0 var(--t-on-accent), 44px 0 0 var(--t-on-accent); opacity: .9; }
.t-section__title { position: absolute; top: 0; inset-inline-start: 86px; height: 34px; line-height: 34px; margin: 0; font-family: var(--t-font-display); font-size: .8rem; letter-spacing: .04em; color: var(--t-on-accent); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 100px); }
.t-main { gap: 24px; }

/* hero window */
.t-hero--window .t-cover { display: none; }
.t-hero--window .t-hero__inner { margin-block-start: clamp(20px, 4vw, 40px); gap: 20px; }
.t-hero--window .t-hero__media { margin: 0; }
.t-hero--window .t-photo { width: clamp(110px, 16vw, 150px); border-radius: var(--t-radius); border: var(--t-border); box-shadow: 4px 4px 0 var(--t-accent2); }
.t-hero--window .t-eyebrow { font-family: var(--t-font-display); font-size: .7rem; letter-spacing: .06em; color: var(--t-accent-text); }
.t-hero--window .t-name { font-family: var(--t-font-display); font-weight: 400; font-size: clamp(1.8rem, 5.5vw, 3.4rem); line-height: 1.05; text-shadow: 3px 3px 0 var(--t-accent2); }
.t-hero--window .t-headline { font-weight: 500; }
.t-hero--window .t-stats li { background: var(--t-surface2); border: var(--t-border); border-radius: var(--t-radius-sm); padding: 10px 14px; box-shadow: 3px 3px 0 var(--t-text); }
.t-hero--window .t-stats strong { font-family: var(--t-font-display); font-weight: 400; font-size: 1.6rem; }

/* buttons, chips as stickers */
.btn { --bs-btn-border-width: 2px; --bs-btn-font-weight: 700; box-shadow: 3px 3px 0 var(--t-text); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--t-text); }
.btn-primary, .btn-outline-primary { --bs-btn-border-color: var(--t-text); --bs-btn-hover-border-color: var(--t-text); --bs-btn-active-border-color: var(--t-text); }
.t-link { border: var(--t-border); box-shadow: 3px 3px 0 var(--t-text); font-weight: 500; }
.t-link:hover { border-color: var(--t-text); }
.t-chip { border: var(--t-border); background: var(--t-accent2); color: var(--t-text); font-weight: 700; box-shadow: 2px 2px 0 var(--t-text); }
.t-chips li:nth-child(2n) { transform: rotate(-3deg); } .t-chips li:nth-child(3n) { transform: rotate(2.5deg); }
.t-tags .badge { border: 2px solid var(--t-text); background: var(--t-surface2); color: var(--t-text); font-weight: 700; }
.card, .t-quote, .t-timeline__body { border: var(--t-border); box-shadow: 4px 4px 0 var(--t-text); background: var(--t-surface2); }
.t-timeline__body { padding: 12px 14px; border-radius: var(--t-radius-sm); }
.t-card__media { border-block-end: var(--t-border); }
.t-bars__track { border: var(--t-border); height: 14px; border-radius: 7px; background: var(--t-surface); }
.t-bars__fill { background: repeating-linear-gradient(90deg, var(--t-accent) 0 8px, var(--t-accent2) 8px 16px); }
.t-section--summary .t-summary { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; }
.form-control { border: var(--t-border); box-shadow: 3px 3px 0 var(--t-text); }
.t-footer { background: var(--t-surface); border: var(--t-border); border-radius: var(--t-radius); padding: 14px 18px; margin-block-end: 24px; box-shadow: var(--t-shadow); }