/* Massimo Buonaiuto — career site. Layout: sticky four-tab bar over one fluid column; every view re-uses the same statement data. */
:root{
  --bg:#FAFAF8; --surface:#FFFFFF; --ink:#111418; --text:#2A3240; --text-2:#3B4350; --text-3:#4A5361; --muted:#5B6470; --muted-2:#8A93A0;
  --line:#E3E1DC; --line-2:#D6D3CC; --line-3:#C9C5BC; --chip:#EDEBE6; --muted-bg:#F4F3EF;
  --accent:#0B3D6E; --accent-2:#3F67B0; --on-accent:#FFFFFF; --tint:#E8EEFB; --tint-2:#C3D2EE; --tint-soft:#F3F6FB; --ring:#D97706;
  --band:#0F1E33; --band-text:#D5DCE6; --band-fg:#FFFFFF; --band-accent:#8DB3F0;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap:1200px;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0E1116; --surface:#161B22; --ink:#E8ECF2; --text:#CED5DF; --text-2:#B9C1CC; --text-3:#A7B0BC; --muted:#97A1AD; --muted-2:#6E7783;
  --line:#2A313B; --line-2:#343C47; --line-3:#3F4753; --chip:#222831; --muted-bg:#1A1F27;
  --accent:#8DB3F0; --accent-2:#5E86CC; --on-accent:#0E1116; --tint:#1C2A40; --tint-2:#2A3F63; --tint-soft:#141B26; --ring:#F59E0B;
  --band:#0A0D12; --band-text:#C3CBD6; color-scheme:dark } }

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased }
a{ color:var(--accent); text-underline-offset:3px }
img{ max-width:100% }
h1,h2,h3,h4{ text-wrap:balance; margin:0 }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:6px }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px }
.skip:focus{ top:12px }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px)) }
@media (max-width:480px){ .wrap{ padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)) } }
.serif{ font-family:var(--serif) }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 8px }
.muted{ color:var(--muted) }
.lede{ font-size:18px; color:var(--text-3); max-width:64ch; margin:0 }

/* Header + primary navigation */
.site-head{ background:var(--surface) }
.site-head .wrap{ padding-block:14px 8px }
.brand{ display:inline-block; text-decoration:none; color:var(--ink); min-height:44px }
.brand b{ display:block; font-family:var(--serif); font-size:24px; font-weight:600; line-height:1.2 }
.brand span{ display:block; font-size:13px; color:var(--muted) }
.tabs{ position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--line-2) }
.tabs ul{ list-style:none; margin:0 auto; display:flex; flex-wrap:wrap; gap:0 8px; padding-block:0 }
.tabs li{ flex:1 1 150px }
.tabs a{ display:block; min-height:68px; padding:10px 8px 8px; text-decoration:none; color:var(--ink); border-bottom:4px solid transparent; transition:border-color .3s ease }
.tabs a b{ display:block; font-size:18px; line-height:1.25; font-weight:600 }
.tabs a span{ display:block; font-size:13px; line-height:1.3; color:var(--muted) }
.tabs a[aria-current="page"]{ border-bottom-color:var(--accent) }
.tabs a[aria-current="page"] b{ color:var(--accent); font-weight:700 }
.tabs a:hover b{ color:var(--accent) }

main{ display:block; animation:enter .42s ease both }
@keyframes enter{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* Sections */
.section{ padding-block:48px 8px }
.section:last-child{ padding-bottom:72px }
.section h2{ font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.2; margin:0 0 6px }
.section > .wrap > p.sub, .sub{ margin:0 0 18px; color:var(--text-3); max-width:70ch }
.page-head{ padding-block:40px 8px }
.page-head h1{ font-family:var(--serif); font-size:40px; font-weight:600; line-height:1.15; margin:0 0 6px }
.crumbs{ font-size:14px; margin:0 0 10px; color:var(--muted) }
.crumbs a{ color:var(--muted) }

/* Hero */
.hero{ background:var(--surface); border-bottom:1px solid var(--line) }
.hero-grid{ display:flex; flex-wrap:wrap; gap:32px 56px; align-items:flex-start; padding-block:48px 40px }
.hero-main{ flex:999 1 520px; min-width:0 }
.hero h1{ font-family:var(--serif); font-size:clamp(34px, 5vw, 46px); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0 0 16px }
.snapshot{ flex:1 1 300px; margin:0; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--bg); display:grid; gap:12px; font-size:15px }
.snapshot dt{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.snapshot dd{ margin:2px 0 0 }
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:48px }
.stats div{ background:var(--surface); padding:20px 22px }
.stats b{ display:block; font-family:var(--serif); font-size:32px; font-weight:600; line-height:1.1; color:var(--accent) }
.stats span{ display:block; font-size:14px; color:var(--text-3); margin-top:6px }

/* Visionary band */
.band{ background:var(--band); color:var(--band-text); margin-top:48px }
.band .wrap{ padding-block:56px 60px }
.band .eyebrow{ color:var(--band-accent); letter-spacing:.1em }
.band h2{ font-family:var(--serif); font-size:38px; font-weight:600; line-height:1.15; color:var(--band-fg); max-width:22ch; margin:0 0 12px }
.band h3{ font-family:var(--serif); font-size:28px; font-weight:600; color:var(--band-fg) }
.band .lede{ color:var(--band-text); margin-bottom:36px }
.vision{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:14px }
.vision li{ border:1px solid rgba(213,220,230,.22); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:8px }
.vision .year{ font-family:var(--serif); font-size:30px; font-weight:600; line-height:1; color:var(--band-accent) }
.vision .t{ font-size:17px; font-weight:700; line-height:1.3; color:var(--band-fg) }
.vision p{ margin:0; font-size:14px; line-height:1.55; flex-grow:1 }
.vision a, .band-link{ color:var(--band-accent); font-weight:600; font-size:14px; min-height:40px; display:inline-flex; align-items:center }
.talks-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin:48px 0 16px }
.btn-band{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:10px; background:var(--band-accent); color:#0F1E33; font-size:15px; font-weight:700; text-decoration:none }
.talks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:10px }
.talks a{ display:flex; flex-direction:column; gap:4px; height:100%; padding:16px 18px; border-radius:12px; background:rgba(213,220,230,.07); text-decoration:none; color:var(--band-text) }
.talks a:hover{ background:rgba(213,220,230,.13) }
.talks .when{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--band-accent) }
.talks .t{ font-size:16px; font-weight:600; line-height:1.35; color:var(--band-fg) }
.talks .k{ font-size:13px }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px }
.card{ display:flex; flex-direction:column; gap:6px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); text-decoration:none; transition:border-color .2s ease, transform .2s ease }
a.card:hover{ border-color:var(--accent); transform:translateY(-2px) }
.card .k{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent) }
.card .n{ font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.2 }
.card .fig{ font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.1; color:var(--accent) }
.card p{ margin:0; font-size:14px; color:var(--text-2); line-height:1.5 }
.card .meta{ font-size:13px; color:var(--muted) }
.entry{ min-height:180px; padding:26px; border-radius:16px; border-color:var(--line-2) }
.entry .n{ font-size:28px }
.entry .go{ margin-top:auto; font-size:15px; font-weight:600; color:var(--accent) }

/* Career at a glance */
.glance{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:12px 16px }
.glance ol{ list-style:none; margin:0; padding:0 }
.glance li{ animation:slide .5s ease both; animation-delay:var(--d) }
.glance li.child{ padding-left:18px }
.glance a{ display:block; min-height:48px; padding:6px 0; border-bottom:1px solid var(--chip); text-decoration:none; color:var(--ink) }
.glance .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; line-height:1.3 }
.glance .row b{ font-weight:600 }
.glance li.child .row b{ font-weight:500; font-size:13px }
.glance .row span{ color:var(--muted); font-size:13px; white-space:nowrap }
.glance .track{ display:block; position:relative; height:10px; margin-top:6px; border-radius:5px; background:var(--chip) }
.glance .bar{ position:absolute; top:0; bottom:0; left:var(--l); width:max(8px, var(--w)); border-radius:5px; background:var(--accent); transform-origin:left; animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d) }
.glance li.child .bar{ background:var(--accent-2) }
.glance .ticks{ position:relative; height:20px; margin-top:8px; font-size:12px; color:var(--muted) }
.glance .ticks span{ position:absolute; transform:translateX(-50%); left:var(--l) }
@keyframes grow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes slide{ from{ opacity:0; transform:translateX(-12px) } to{ opacity:1; transform:none } }

/* Pills */
.pills{ display:flex; flex-wrap:wrap; gap:6px }
.pill{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; line-height:1.3 }
.pill small{ font-size:12px; color:var(--muted); font-weight:600 }
.pill:hover, .pill[aria-current="page"]{ border-color:var(--accent); background:var(--tint) }
.pill.sm{ min-height:30px; padding:3px 10px; font-size:13px }
.pill.ind{ border:0; background:var(--chip) }
.groups{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px 28px }
.groups h3{ font-size:14px; font-weight:700; margin:0 0 8px }
.label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:4px }

/* Experience list + detail */
.xp{ list-style:none; margin:0; padding:0 }
.xp > li{ display:flex; flex-wrap:wrap; gap:6px 32px; padding:28px 0; border-top:1px solid var(--line) }
.xp-side{ flex:1 1 150px; max-width:190px }
.xp-side b{ display:block; font-size:15px }
.xp-side span{ display:block; font-size:14px; color:var(--muted) }
.xp-main{ flex:999 1 320px; min-width:0 }
.xp-main h2, .xp-main h3{ font-family:var(--serif); font-size:24px; font-weight:600; line-height:1.25 }
.xp-main h2 a, .xp-main h3 a{ color:inherit; text-decoration:none }
.xp-main h2 a:hover, .xp-main h3 a:hover{ color:var(--accent) }
.role{ margin:2px 0 0; font-size:15px; font-weight:500; color:var(--text) }
.status{ margin:2px 0 12px; font-size:14px; color:var(--muted) }
.eng{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--accent-2) }
.umbrella{ background:var(--tint-soft); border-radius:14px; padding:0 20px; margin:24px 0 0; border:0 }
.umbrella > .head{ padding:24px 0 18px; border-bottom:1px solid var(--tint-2) }
.umbrella > .head h2{ font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.2; margin:6px 0 2px }
.umbrella .xp > li:first-child{ border-top:0 }
.minis{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; margin:0 0 14px }
.mini{ border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:10px 12px }
.mini b{ display:block; font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.1; color:var(--accent) }
.mini span{ display:block; font-size:13px; line-height:1.35; color:var(--text); margin-top:4px }
.tagrow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px }
ul.hl, ul.st{ margin:0 0 12px; padding-left:20px; color:var(--text); max-width:76ch }
ul.hl li{ margin:4px 0 }
ul.st > li{ margin:10px 0 }
ul.st .tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px }
.more{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line-3); border-radius:10px; background:var(--surface); font-weight:600; font-size:14px; text-decoration:none }
.grp-h{ margin:22px 0 4px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent) }
.evi{ font-size:14px; font-weight:600; white-space:nowrap }
.prevnext{ display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); margin-top:32px; padding-top:20px }
.prevnext a{ text-decoration:none; font-weight:600; max-width:48% }
.prevnext small{ display:block; color:var(--muted); font-weight:500 }
.prevnext .next{ margin-left:auto; text-align:right }

/* Strip */
.strip-box{ overflow-x:auto; margin:0 0 24px }
.strip{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(9, minmax(84px, 1fr)); gap:4px; min-width:780px }
.strip li{ border-radius:8px; padding:8px 10px; background:var(--chip); color:var(--muted); font-size:12px; line-height:1.3 }
.strip li b{ display:block; font-weight:600 }
.strip li.on{ background:var(--accent); color:var(--on-accent) }

/* Grouped statement lists (skill / industry / AI / matrix) */
.grouped > div{ display:flex; flex-wrap:wrap; gap:4px 32px; padding:22px 0; border-top:1px solid var(--line) }
.grouped .g-side{ flex:1 1 150px; max-width:190px }
.grouped .g-side b{ display:block; font-size:15px }
.grouped .g-side span{ display:block; font-size:13px; color:var(--muted) }
.grouped .g-main{ flex:999 1 320px; min-width:0 }
.grouped h3{ font-size:18px; font-weight:600; line-height:1.3; margin:0 0 6px }
.grouped h3 a{ color:inherit; text-decoration:none }
.grouped ul{ margin:0; padding-left:20px; color:var(--text); max-width:76ch }
.grouped li{ margin:8px 0 }

/* Lens tabs on Topics */
.lenses{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; margin:8px 0 0 }
.lenses a{ display:block; min-height:64px; padding:10px 16px; border-radius:12px; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink); text-decoration:none }
.lenses a b{ display:block; font-size:17px }
.lenses a span{ display:block; font-size:13px; color:var(--muted) }
.lenses a[aria-current="page"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.lenses a[aria-current="page"] span{ color:var(--on-accent); opacity:.8 }
.list-items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:6px }
.list-items a{ display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:48px; padding:6px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-size:15px }
.list-items a small{ color:var(--muted); font-size:13px }
.list-items a:hover, .list-items a[aria-current="page"]{ border-color:var(--accent); background:var(--tint) }

/* Milestones */
.ms{ list-style:none; margin:0; padding:0 }
.ms li{ display:flex; flex-wrap:wrap; gap:6px 32px; padding:24px 0; border-top:1px solid var(--line) }
.ms .rank{ font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--accent) }
.ms .fig{ font-family:var(--serif); font-size:34px; font-weight:600; line-height:1.1; color:var(--accent) }
.ms h3{ font-size:19px; font-weight:600; line-height:1.35; margin:6px 0 4px }
.ms p{ margin:0 0 4px; color:var(--text-2); max-width:70ch }

/* Heat maps (AI explorer, matrix) */
.tiles{ display:flex; flex-wrap:wrap; gap:12px }
.fam{ flex:var(--g) 1 300px; min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:12px }
.fam-h{ display:flex; width:100%; justify-content:space-between; align-items:baseline; gap:8px; min-height:40px; padding:0 4px; border:0; background:transparent; font:inherit; cursor:pointer; text-align:left; color:var(--ink) }
.fam-h b{ font-size:16px }
.fam-h span{ font-size:13px; color:var(--muted) }
.tile-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.tile{ flex:var(--g) 1 120px; min-height:var(--h); display:flex; flex-direction:column; justify-content:space-between; gap:6px; padding:8px 10px; border-radius:8px; font:inherit; font-size:13px; font-weight:600; line-height:1.3; text-align:left; cursor:pointer; border:2px solid transparent; transition:background-color .3s ease, border-color .3s ease }
.tile b{ font-family:var(--serif); font-size:22px; line-height:1 }
.s0{ background:var(--muted-bg); color:var(--muted) } .s1{ background:var(--tint); color:var(--ink) } .s2{ background:var(--tint-2); color:var(--ink) }
.s3{ background:var(--accent-2); color:var(--on-accent) } .s4{ background:var(--accent); color:var(--on-accent) }
.sel{ border-color:var(--ring) !important }
.hm-box{ overflow:auto; max-height:680px; border:1px solid var(--line); border-radius:14px; background:var(--surface) }
.hm{ border-collapse:separate; border-spacing:3px; font-size:13px }
.hm th{ background:var(--surface); font-weight:600; text-align:left }
.hm thead th{ position:sticky; top:0; z-index:2; vertical-align:bottom; padding:6px 2px }
.hm thead th.vert span{ writing-mode:vertical-rl; transform:rotate(180deg); display:inline-block; max-height:224px; font-size:12px; line-height:1.2 }
.hm thead th.vert{ height:236px; text-align:center }
.hm thead th.corner{ left:0; z-index:3; min-width:260px; padding:8px 10px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent) }
.hm tbody th{ position:sticky; left:0; z-index:1; min-width:260px; max-width:320px; padding:4px 10px; font-weight:500 }
.hm tbody th small{ display:block; color:var(--muted); font-weight:400; font-size:12px }
.hm td{ padding:0 }
.hm td button{ width:46px; height:40px; border-radius:6px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; border:2px solid transparent }
.seg{ display:flex; flex-wrap:wrap; align-items:center; gap:6px }
.seg button{ min-height:40px; padding:0 14px; border-radius:999px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; background:var(--surface); color:var(--ink); border:1.5px solid var(--line-2) }
.seg button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.controls{ display:flex; flex-wrap:wrap; gap:12px 32px; margin:0 0 18px }
.result-h{ margin:32px 0 4px }
.result-h h3{ font-family:var(--serif); font-size:24px; font-weight:600; line-height:1.3 }

/* Search */
.search{ display:flex; flex-direction:column; gap:4px; max-width:560px; font-size:13px; font-weight:600; color:var(--text-2); margin:0 0 16px }
.search input{ min-height:48px; border:1px solid var(--line-3); border-radius:10px; padding:0 14px; font:inherit; font-size:16px; font-weight:400; background:var(--surface); color:var(--ink) }
mark{ background:var(--tint-2); color:inherit; border-radius:3px; padding:0 2px }

/* Credentials */
.cred-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px }
.cred-nav a{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; background:var(--chip); color:var(--ink); font-size:14px; text-decoration:none }
.cred{ display:flex; flex-wrap:wrap; gap:4px 32px; padding:28px 0; border-top:1px solid var(--line); scroll-margin-top:90px }
.cred h2{ flex:1 1 220px; max-width:260px; font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.3 }
.cred ul{ flex:999 1 320px; min-width:0; margin:0; padding-left:20px; color:var(--text); max-width:76ch }
.cred li{ margin:6px 0 }

/* Footer */
.site-foot{ background:var(--band); color:var(--band-text); margin-top:24px }
.site-foot .wrap{ padding-block:48px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; font-size:15px }
.site-foot b{ display:block; font-family:var(--serif); font-size:22px; font-weight:600; color:var(--band-fg) }
.site-foot a{ color:var(--band-fg) }
.site-foot nav{ display:flex; flex-direction:column; gap:4px }

[hidden]{ display:none !important }
.js-only{ display:none }
.js .js-only{ display:block }
.js .no-js{ display:none }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}
@media print{
  .tabs, .site-foot, .search, .controls, .cred-nav{ display:none } body{ background:#fff; color:#000 } .band{ background:#fff; color:#000 }
}