:root{color-scheme:dark;--red:#ff243e;--paper:#ecebe7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080809;color:var(--paper);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--red);outline-offset:6px}header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #ffffff24;position:relative;z-index:5;background:#080809} .brand{font-weight:900;letter-spacing:-1px;font-size:23px}.brand em{color:var(--red);font-style:normal}nav{display:flex;gap:30px;font-size:14px;font-weight:700}nav a:hover{color:var(--red)}.hero{min-height:760px;height:calc(100svh - 92px);max-height:1100px;position:relative;overflow:hidden;display:flex;align-items:center;padding:5vw}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080809 0%,#080809ee 27%,transparent 70%),linear-gradient(0deg,#080809,transparent 25%);z-index:1}.portrait{position:absolute;right:-2%;height:100%;width:69%;object-fit:contain;object-position:center bottom;filter:contrast(1.08)}.hero-content{position:relative;z-index:2;max-width:780px}.eyebrow{font-size:14px;letter-spacing:3px;font-weight:700;text-transform:uppercase;color:var(--red);margin:0 0 25px}.hero h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(90px,13.5vw,210px);letter-spacing:-.045em;line-height:.82;margin:0 0 28px}.hero h1 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--paper)}.hero .name{font-size:clamp(25px,3vw,44px);font-weight:900;letter-spacing:.11em;margin:0 0 24px}.intro{max-width:400px;font-size:18px;color:#b4b4b8;line-height:1.65}.actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;padding:18px 26px;font-size:14px;text-transform:uppercase;font-weight:800;letter-spacing:1px;background:var(--red);color:white;border:1px solid var(--red);transition:transform .2s,background .2s}.button:hover{background:#d61930;transform:translateY(-3px)}.button.alt{background:#08080980;border-color:#ffffff50}.hero-note{position:absolute;z-index:2;bottom:30px;right:5vw;letter-spacing:2px;font-size:12px;color:#aaa}.ticker{padding:23px 0;background:var(--red);color:#080809;overflow:hidden;display:flex;gap:50px;white-space:nowrap;font-size:22px;font-weight:900;letter-spacing:2px}.ticker span{animation:drift 24s linear infinite}@keyframes drift{to{transform:translateX(-280px)}}.section{padding:110px 7vw;border-bottom:1px solid #ffffff20}.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.section h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(45px,6vw,88px);font-weight:900;line-height:1;letter-spacing:-.02em;margin:0 0 30px}.section p{font-size:18px;line-height:1.8;color:#b4b4b8;max-width:620px}.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.tags span{border:1px solid #ffffff30;padding:12px 16px;font-weight:700;font-size:14px}.number{font-size:85px;font-family:Impact,sans-serif;color:var(--red)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px}.stats p{font-size:14px;line-height:1.5;margin:8px 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff25;border:1px solid #ffffff25;margin-top:40px}.card{padding:36px;background:#101012}.card small{color:var(--red);font-size:14px}.card h3{font-size:26px;margin:40px 0 12px}.card p{font-size:16px}.card a{display:inline-block;border-bottom:1px solid var(--red);padding-bottom:8px;font-size:14px;font-weight:700}.merch-teaser{background:var(--paper);color:#080809}.merch-teaser p{color:#48484c}.merch-word{font-family:Impact,sans-serif;font-size:clamp(65px,12vw,175px);letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:2px #080809;margin-bottom:30px}.footer{display:flex;justify-content:space-between;gap:20px;padding:35px 5vw;font-size:14px;color:#aaa}.merch-hero{min-height:650px}.notice{font-size:14px!important;color:#aaa!important}.reveal{animation:rise .8s both}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(max-width:750px){header{height:76px;padding:0 6vw}.brand{font-size:18px}nav{gap:18px;font-size:14px}nav .about-link{display:none}.hero{height:auto;min-height:820px;align-items:flex-end;padding:0 6vw 65px}.portrait{width:110%;height:65%;right:-20%;top:0;object-position:top}.hero:before{background:linear-gradient(0deg,#080809 10%,#080809f5 35%,transparent 78%)}.hero h1{font-size:100px}.hero .name{font-size:26px}.intro{font-size:16px}.hero-note{display:none}.section{padding:65px 6vw}.split,.cards{grid-template-columns:1fr}.split{gap:30px}.card h3{margin-top:25px}.footer{flex-direction:column}.merch-hero{min-height:850px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Outkast brand outline */
.hero h1 span{-webkit-text-stroke-color:var(--red)}
.merch-word{-webkit-text-stroke-color:var(--red)}

/* SEO/mobile improvements: preserve the original Outkast palette and display style. */
.skip-link{position:absolute;top:8px;left:8px;z-index:20;padding:14px 18px;background:var(--paper);color:#080809;transform:translateY(-150%)}
.skip-link:focus{transform:none}
nav a{min-height:44px;display:inline-flex;align-items:center}
.hero-content{width:100%;min-width:0}
.hero h1 .name{display:block;color:var(--paper);-webkit-text-stroke:0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(25px,3vw,44px);line-height:1.2;letter-spacing:.07em;margin:28px 0 0}
.hero .eyebrow{max-width:600px;line-height:1.5}
.section h2{overflow-wrap:break-word;font-size:clamp(38px,5.5vw,80px)}
.split>*{min-width:0}
.career-list{max-width:1050px}
.career-item{padding:26px 0;border-bottom:1px solid #ffffff20}
.career-item:first-child{padding-top:0}
.career-item h3{font-size:clamp(22px,2.8vw,32px);line-height:1.3;margin:0 0 14px}
.career-item p{max-width:850px;margin:0}
.text-link{color:var(--paper);text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}
.merch-teaser .text-link{color:#080809}
.footer a{min-height:44px;display:inline-flex;align-items:center}
section[id]{scroll-margin-top:20px}
@media(max-width:750px){
  header{height:auto;min-height:100px;flex-direction:column;justify-content:center;align-items:flex-start;padding:15px 6vw 8px;gap:4px}
  .brand{font-size:20px;white-space:nowrap;min-height:28px;display:flex;align-items:center}
  nav{width:100%;gap:clamp(12px,4vw,24px);flex-wrap:wrap}
  .hero{min-height:760px;padding-top:310px;height:auto}
  .hero-content{max-width:100%}
  .hero h1{font-size:clamp(58px,16vw,100px);letter-spacing:-.055em;margin-bottom:22px}
  .hero h1 .name{font-size:clamp(21px,5.8vw,30px);letter-spacing:.045em;margin-top:22px}
  .hero .eyebrow{font-size:12px;letter-spacing:2px;max-width:100%}
  .merch-hero{min-height:790px}
  .merch-hero h1{font-size:clamp(50px,14.2vw,88px)}
  .actions{gap:12px}
  .button{max-width:100%;min-height:48px;padding:16px 18px;font-size:13px;letter-spacing:.7px}
  .section h2{font-size:clamp(34px,7.8vw,58px);line-height:1.08}
  .merch-word{font-size:clamp(48px,12vw,90px)}
  .section p{font-size:17px;line-height:1.75}
}
@media(max-width:360px){.actions .button{width:100%}.hero h1{font-size:16vw}.merch-hero h1{font-size:14vw}.stats{gap:16px}}

/* The responsive picture must share the hero's positioning context. */
.hero>picture{position:absolute;inset:0;pointer-events:none}