/* Static hero pages. Same tokens as teambuilder.css; no fonts or scripts, so it paints from HTML + images only. */
:root { --base:#0E0C10; --panel:#1E1920; --raised:#2D232C; --bone:#F4EDE3; --dim:#C4B9BD; --gilt:#C9942E; --rare:#4A90D9; --epic:#B15FE3; --legendary:#F2B33D;
  --display:'Unbounded','Segoe UI',system-ui,sans-serif; --text:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif; }
* { box-sizing: border-box; }
html { background: var(--base); }
body { margin: 0; background: var(--base); color: var(--bone); font: 400 16px/1.5 var(--text); overflow-x: hidden; }
a { color: var(--gilt); }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); }
h2 { font-size: 1.25rem; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: rgba(14,12,16,.95); border-bottom: 1px solid var(--raised); position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--bone); text-decoration: none; font: 800 1rem var(--display); }
.bar ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.bar ul a { color: var(--dim); text-decoration: none; }
.bar ul a[aria-current] { color: var(--bone); border-bottom: 2px solid var(--gilt); }
.intro, main, .foot { width: min(1100px, 100% - 32px); margin-inline: auto; }
.intro { padding: 28px 0 12px; display: grid; gap: 8px; }
.intro p { color: var(--dim); }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.hero { --c: var(--rare); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; background: var(--panel); border: 2px solid var(--c); border-radius: 12px; padding: 16px; scroll-margin-top: 64px; }
.hero.epic { --c: var(--epic); }
.hero.legendary { --c: var(--legendary); }
.arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.art { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; background: var(--raised); object-fit: cover; }
.info { display: grid; gap: 10px; align-content: start; }
.meta { color: var(--dim); display: flex; gap: 10px; align-items: center; margin: 0; }
.pill { background: var(--c); color: #000; font-weight: 800; font-size: .75rem; padding: 2px 10px; border-radius: 99px; }
.skills { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; color: var(--dim); }
.skills strong { color: var(--bone); }
.foot { padding: 20px 0 40px; color: var(--dim); }
@media (min-width: 760px) { .hero { grid-template-columns: minmax(0, 420px) 1fr; } }