/* ========================================================================== about.css — About / credentials (merged from about.php + experience.php) -------------------------------------------------------------------------- Requires: tokens.css, base.css (in that order, before this file). MERGED 2026-07-15. about.php and experience.php both carried Patents, Publications and Recognition. That duplication is why the patent counts disagreed across the site — two copies of a fact always drift. One page, one copy, drift impossible. css/experience.css is now UNUSED and can be deleted once experience.php is redirected. Its timeline rules live here. Shared from base.css — do not redefine: .card / .card--list / .card--wide, .rule, .subhead, .eyebrow, .lbl, .stitle, .pill, .btn, .container, .section-header Contents: 1. Hero 2. Lede 3. Jump nav 4. Section shell 5. Career timeline 6. Ventures / grid cards 7. Expertise 8. Education 9. Patents 10. Recognition 11. Responsive ========================================================================== */ /* ========================================================================== 1. Hero ========================================================================== */ .about-hero { position: relative; padding: 74px var(--space-5) 84px; background: var(--gradient-brand-hero); color: var(--color-text-inverse); text-align: center; overflow: hidden; } .about-hero__portrait { width: 210px; height: 210px; margin: 0 auto; object-fit: cover; border-radius: var(--radius-round); border: 4px solid var(--color-accent); box-shadow: var(--shadow-glow); position: relative; z-index: var(--z-base); } .about-hero h1 { font-size: var(--text-display); font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-tight); color: var(--color-text-inverse); margin: var(--space-6) 0 0; } .about-hero__kicker { margin: var(--space-3) 0 0; font-family: var(--font-display); font-style: italic; font-size: 14px; letter-spacing: var(--tracking-wide); color: var(--color-accent-soft); } /* ========================================================================== 2. Lede ========================================================================== */ .about-lede { max-width: var(--measure); margin: 0 auto; padding: var(--space-12) var(--container-padding-x) var(--space-6); } .about-lede p { margin: 0; font-family: var(--font-display); font-size: var(--text-lede); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-brand); text-align: center; } /* ========================================================================== 2c. Back to top -------------------------------------------------------------------------- The jump nav takes you down; this brings you back. It's the longest page on the site and had no way up. scroll-behavior lives on :root rather than html so it applies to the whole document's scrolling box, and it's scoped by the media query below so it never overrides someone's OS-level motion preference. Doing this in CSS rather than JS means the browser owns the animation and honours that preference for free. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } .to-top { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--gradient-brand); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); box-shadow: var(--shadow-card-hover-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-inverse); text-decoration: none; transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); } /* [hidden] is set by the script until you've scrolled past the hero. Stated explicitly because `display: inline-flex` above would otherwise beat the browser's default [hidden] { display: none } — a class rule and the UA sheet aren't equal, but the property IS declared here, so it wins. This is the same trap as the padding shorthand in speaker.css: if you declare a property, you own it everywhere. */ .to-top[hidden] { display: none; } .to-top:hover, .to-top:focus-visible { transform: var(--lift-sm); box-shadow: var(--shadow-card-hover); border-color: var(--color-accent-soft); color: var(--color-text-inverse); } .to-top:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 3px; } .to-top__arrow { font-size: 15px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .to-top, .to-top:hover { transition: none; transform: none; } } /* On a phone the label costs width the thumb wants. Arrow only, circular, clear of the bottom edge. */ @media (max-width: 600px) { .to-top { right: var(--space-4); bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-round); } .to-top__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ========================================================================== 3. Jump nav The merged page is long — this is what makes that acceptable rather than punishing. Sticky under the site header. ========================================================================== */ .about-jump { position: sticky; top: 76px; /* clears .main-header */ z-index: 90; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } /* The defensive block that used to live here — .about-jump { outline:0; box-shadow:none } plus ::before/::after { content:none } — is GONE. It was aimed at a "thick blue rule on nav" I could see in a screenshot and was guessing the source of, because I'd never been shown css/style.css. Now I have. There is no nav rule in it. The blue line came from style.css's own .about-section rule: border-top 3px solid #00bfff — the cyan top border of the SECTION BELOW the jump bar, not the bar itself. I was zeroing properties on the wrong element and would have gone on doing it. style.css is no longer linked from header.php, so the line is gone at source and the guard has nothing left to guard against. NO INLINE COMMENT MARKERS IN THIS BLOCK. The first version of it annotated that border-top line with a slash-star "style.css" note. CSS comments do not nest, so the inner terminator closed this block early, the parser read the remaining prose as CSS, and it error-recovered by swallowing the next rule — .about-jump ul, the flex layout for the jump bar. The nav broke. That is the second time in one session. The first was speaker.css, and this one was written INSIDE the comment documenting the first. If a code sample in a CSS comment needs annotating, use plain words. */ .about-jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); max-width: var(--container-max); margin: 0 auto; padding: var(--space-2) var(--container-padding-x); list-style: none; } .about-jump a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .about-jump a:hover, .about-jump a:focus-visible { color: var(--color-action); background: rgba(125, 31, 43, 0.06); } /* Anchor targets must clear both sticky bars, or a jump lands with the heading hidden underneath them. */ [id^="sec-"] { scroll-margin-top: 130px; } /* ========================================================================== 4. Section shell -------------------------------------------------------------------------- These three rules are the ONLY definition of .about-section. Keep it that way. Until 2026-07-15, css/style.css also defined .about-section — a leftover from the previous site: .about-section { padding: 30px 20px; background-color: #282c34; <- charcoal border-top: 3px solid #00bfff; <- cyan transition: transform .3s; } .about-section:hover { transform: scale(1.03); } It loaded first, so the background and padding below beat it. But `border- top` and `transition`/`:hover` are properties these rules never declare — and load order can't beat a property you don't mention. So the career and ventures sections carried a cyan top rule and swelled 3% under the cursor, from a stylesheet nobody had read. That cyan border is also the "thick blue rule under the jump nav" I chased in section 3 with an outline/box-shadow/::before guard, blaming