/* hero.css — Hero section: heading, intro text (with name/age tooltips), stats and portrait. */

.hero{ height: clamp(720px, -66px + 100svh, 990px); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); max-width: 1800px; margin: auto; isolation: isolate; }
.hero-top{ position: absolute; top: 23px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; font-size: 10px; line-height: 1.6; z-index: 4; }
.hero-top > span:first-child{ color: var(--red); font-weight: 700; }
.availability{ display: flex; gap: 9px; align-items: center; font-size: 9px; height: 20px; color: var(--muted); }
.availability i{ width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.hero-title{ position: absolute; top: 81px; left: calc(var(--gutter) - 5px); font-size: clamp(155px, 21.15vw, 380px); letter-spacing: -0.024em; color: rgb(189, 12, 34); line-height: 1; z-index: -1; width: calc(100% - var(--gutter)*2); white-space: nowrap; transform-origin: center center; }
.hero-title::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(0deg,var(--bg),transparent 90%); opacity: 0.85; }
.hero-portrait{ position: absolute; bottom: 1px; left: 28%; width: 49%; height: 91%; z-index: 1; transform-origin: center bottom; pointer-events: none; }
.hero-portrait img{ height: 100%; width: 100%; object-fit: contain; object-position: center bottom; filter: contrast(1.03); mask-image: linear-gradient(black 85%, transparent 100%); }
.hero-intro{ position: absolute; left: var(--gutter); bottom: 115px; width: 28%; z-index: 3; }
.hero-intro .handwriting{ margin-bottom: 8px; transform: rotate(-7deg); transform-origin: left center; }
.hero-intro h1{ font-size: clamp(58px, 6.9vw, 117px); letter-spacing: -0.025em; white-space: nowrap; margin-bottom: 14px; }
.hero-intro h1 span{ color: var(--red); }
.hero-role{ font-size: clamp(15px, 1.6vw, 25px); color: var(--red); font-weight: 800; line-height: 1.23; letter-spacing: -0.025em; margin-bottom: 18px; }
.hero-description{ color: rgb(185, 181, 178); font-size: 12px; line-height: 1.8; max-width: 245px; margin-bottom: 21px; }
.primary-link{ display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--red); padding: 14px 19px; color: rgb(255, 255, 255); font-size: 12px; min-height: 46px; transition: background 0.25s; }
.primary-link:hover{ background: rgb(188, 26, 43); }
.hero-location{ display: flex; gap: 8px; align-items: center; font-size: 8px; color: var(--muted); margin-top: 22px; }
.hero-location svg{ color: var(--red); }
.hero-side{ position: absolute; right: var(--gutter); bottom: 120px; width: 16%; z-index: 3; }
.hero-manifesto{ display: flex; align-items: center; gap: 17px; margin-bottom: 58px; }
.crosshair{ display: flex; width: 45px; height: 45px; align-items: center; justify-content: center; font-size: 34px; color: var(--red); border: 1px solid rgb(135, 33, 43); border-radius: 50%; flex-shrink: 0; }
.hero-manifesto p{ font-size: 11px; line-height: 1.6; }
.hero-stats > div{ display: flex; align-items: center; gap: 17px; border-bottom: 1px solid var(--line); padding: 16px 0px; }
.hero-stats > div > .display{ color: var(--red); font-size: 52px; min-width: 70px; letter-spacing: -0.03em; }
.hero-stats > div > .display span{ font-size: 30px; }
.hero-stats p{ font-size: 8px; color: var(--muted); line-height: 1.5; }
.hero-stats > a{ display: flex; min-height: 44px; align-items: center; gap: 11px; margin-top: 8px; font-size: 9px; }
.hero-stats > a svg{ color: var(--red); }
.hero-stats > a:hover{ color: var(--red); }
.hero-bottom{ position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0px; height: 63px; z-index: 5; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-size: 9px; background: linear-gradient(0deg,var(--bg) 60%,#09090988); }
.play-circle{ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--red); border-radius: 50%; color: var(--ink); transition: background 0.3s; }
.hero-scroll{ display: flex; align-items: center; gap: 18px; color: var(--muted); }
.hero-scroll svg{ color: var(--red); }
.edition{ font-size: 9px; color: var(--muted); }

@media (min-width: 1600px){
.hero-title{ font-size: 360px; }
.hero-intro{ bottom: 150px; }
.hero-description{ font-size: 14px; }
.hero-side{ bottom: 150px; }
.hero-stats p{ font-size: 10px; }
}

@media (max-width: 1100px){
.hero{ height: 730px; }
.hero-title{ top: 90px; }
.hero-portrait{ left: 24%; width: 56%; height: 86%; }
.hero-intro{ width: 30%; bottom: 120px; }
.hero-intro h1{ font-size: 72px; }
.hero-side{ width: 17%; bottom: 125px; }
.hero-manifesto{ gap: 10px; margin-bottom: 45px; }
.crosshair{ width: 34px; height: 34px; font-size: 25px; }
.hero-manifesto p{ font-size: 9px; }
.hero-stats > div{ gap: 8px; }
.hero-stats > div > .display{ min-width: 58px; font-size: 46px; }
.hero-stats p{ font-size: 7px; }
.hero-stats > a{ font-size: 8px; }
.hero-bottom{ font-size: 8px; }
}

@media (max-width: 800px){
.hero{ height: 690px; }
.hero-title{ top: 95px; font-size: 21.1vw; }
.hero-portrait{ height: 78%; width: 65%; left: 19%; }
.hero-intro{ width: 33%; bottom: 110px; }
.hero-intro h1{ font-size: 61px; }
.hero-role{ font-size: 17px; }
.hero-description{ font-size: 10px; max-width: 195px; }
.hero-side{ width: 18%; bottom: 115px; }
.hero-manifesto .crosshair{ display: none; }
.hero-manifesto{ margin-bottom: 55px; }
.hero-stats > div{ flex-direction: column; align-items: start; gap: 5px; padding: 12px 0px; }
.hero-stats > div > .display{ font-size: 40px; }
.hero-stats p{ font-size: 7px; }
.hero-stats > a{ font-size: 7px; }
.hero-stats > a svg{ width: 13px; }
.hero-top{ font-size: 9px; }
.availability, .edition{ font-size: 7px; }
.hero-scroll{ font-size: 7px; gap: 8px; }
}

@media (max-width: 600px){
.hero{ height: 755px; }
.hero-top{ top: 17px; font-size: 8px; }
.availability{ font-size: 6px; gap: 5px; }
.availability i{ width: 4px; height: 4px; }
.hero-title{ top: 74px; left: 17px; font-size: 21.1vw; letter-spacing: -0.025em; line-height: 1.15; }
.hero-title::after{ opacity: 0.5; }
.hero-portrait{ left: 19%; width: 78%; height: 465px; bottom: 244px; }
.hero-portrait img{ object-position: center bottom; mask-image: linear-gradient(black 75%, transparent 100%); }
.hero-intro{ left: 20px; right: 20px; bottom: 85px; width: auto; display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; column-gap: 20px; z-index: 3; }
.hero-intro .handwriting{ grid-column: 1 / -1; font-size: 35px; margin-bottom: 3px; }
.hero-intro h1{ font-size: 66px; grid-column: 1 / -1; line-height: 1.04; margin-bottom: 13px; letter-spacing: -0.02em; }
.hero-role{ font-size: 15px; grid-area: 3 / 1; line-height: 1.2; margin-bottom: 10px; }
.hero-role br{ display: none; }
.hero-description{ grid-area: 4 / 1; max-width: 230px; font-size: 10px; line-height: 1.7; margin-bottom: 0px; }
.primary-link{ grid-area: 4 / 2; align-self: start; font-size: 10px; gap: 11px; padding: 12px; min-height: 44px; justify-content: center; margin-top: 2px; }
.hero-location{ grid-area: 5 / 2; font-size: 6px; gap: 5px; margin-top: 10px; white-space: nowrap; }
.hero-side{ width: 68px; right: 20px; bottom: 322px; }
.hero-manifesto{ display: none; }
.hero-stats > div{ padding: 10px 0px; gap: 5px; }
.hero-stats > div > .display{ font-size: 37px; line-height: 1; }
.hero-stats > div > .display span{ font-size: 22px; }
.hero-stats p{ font-size: 6px; line-height: 1.5; }
.hero-stats > a{ font-size: 0px; justify-content: start; gap: 0px; }
.hero-stats > a svg{ width: 17px; height: 17px; }
.hero-bottom{ height: 55px; left: 20px; right: 20px; }
.hero-scroll{ font-size: 6px; gap: 7px; }
.hero-scroll svg{ width: 10px; }
.edition{ display: none; }
}

@media (max-width: 370px){
.hero{ height: 720px; }
.hero-portrait{ height: 425px; bottom: 254px; left: 15%; width: 83%; }
.hero-intro{ column-gap: 12px; grid-template-columns: 1.15fr 1fr; bottom: 78px; }
.hero-intro h1{ font-size: 58px; }
.hero-intro .handwriting{ font-size: 31px; }
.hero-description{ font-size: 9px; }
.hero-role{ font-size: 14px; }
.primary-link{ font-size: 9px; padding: 11px 8px; gap: 8px; }
.hero-side{ bottom: 309px; width: 56px; }
.hero-top{ font-size: 7px; }
.availability, .hero-location{ font-size: 5px; }
}

.hero-award-stat > a{ display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 9px; color: var(--ink); }
.hero-award-stat > a > svg{ color: var(--red); }
.hero-award-stat > a:hover{ color: var(--red); }

@media (min-width: 801px){
.hero-side{ bottom: 105px; }
.hero-manifesto{ margin-bottom: 22px; }
.hero-stats > div{ padding: 12px 0px; }
}

@media (max-width: 600px){
.hero-award-stat > a{ font-size: 7px; gap: 6px; }
.hero-side{ bottom: 322px; }
.hero-stats > div{ padding: 7px 0px; gap: 3px; }
.hero-manifesto{ display: none; }
}

@media (max-width: 370px){
.hero-side{ bottom: 329px; }
.hero-award-stat > a{ font-size: 6px; gap: 4px; }
}

.hero-stats{ background: linear-gradient(90deg, rgba(9, 9, 9, 0.72), rgba(9, 9, 9, 0.91)); padding-inline: 12px; margin-left: -12px; margin-right: -12px; }
.hero-title{ font-size: min(25.3vw, 455px); }
.hero-description{ font-size: 13px; }
.hero-location, .hero-stats p{ font-size: 9px; }
.hero-stats > a{ font-size: 10px; }
.hero-top{ font-size: 11px; }
.availability{ font-size: 10px; }
.hero-manifesto p{ font-size: 12px; }
.hero-scroll{ font-size: 9px; }
.hero-stats > div > .display{ color: rgb(239, 65, 81); }
.hero-role{ color: rgb(239, 65, 81); }

@media (min-width: 801px){
.hero-portrait{ top: 65px; bottom: 0px; height: auto; left: 23%; width: 57%; }
.hero-portrait img{ position: absolute; top: 0px; height: 120%; object-position: center top; }
.hero-intro{ bottom: 110px; }
.hero-side{ width: 17%; bottom: 110px; }
.hero-manifesto{ margin-bottom: 45px; }
}

@media (max-width: 1100px) and (min-width: 601px){
.hero-description{ font-size: 11px; }
.hero-stats p{ font-size: 8px; }
.hero-stats > a{ font-size: 9px; }
.hero-manifesto p{ font-size: 10px; }
.availability{ font-size: 8px; }
}

@media (max-width: 600px){
.hero-title{ font-size: 25.3vw; }
.hero-top{ font-size: 8px; }
.availability{ font-size: 6px; }
.hero-description{ font-size: 11px; }
.hero-location{ font-size: 7px; }
.hero-stats p{ font-size: 8px; }
.hero-stats > a{ font-size: 0px; }
.hero-stats > div > .display{ font-size: 36px; }
.hero-side{ width: 74px; right: 20px; }
.hero-description{ max-width: 220px; }
.hero-scroll{ font-size: 7px; }
.hero-intro{ bottom: 92px; }
.hero{ height: 780px; }
.hero-portrait{ bottom: 269px; }
}

@media (max-width: 370px){
.hero{ height: 770px; }
.hero-portrait{ bottom: 284px; }
.hero-description{ font-size: 10px; }
.hero-side{ width: 63px; bottom: 329px; }
.hero-stats p{ font-size: 7px; }
}

@media (max-width: 600px){
.hero-title{ font-size: 23.8vw; }
.hero-side{ bottom: 285px; }
}

@media (max-width: 370px){
.hero-side{ bottom: 280px; }
}

.hero-portrait img{transform:scale(1.04);transform-origin:center bottom}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 72% 62% at 55% 62%,rgba(227,43,60,.15),rgba(227,43,60,.05) 48%,rgba(227,43,60,0) 80%),linear-gradient(90deg,rgba(9,9,9,0) 0,rgba(70,14,22,.07) 40%,rgba(9,9,9,.4) 100%)}
.hero-stats{background:none;text-shadow:0 1px 10px rgba(0,0,0,.85)}
[data-age]{white-space:nowrap}
.tip{position:relative;cursor:help;text-decoration:underline dotted rgba(227,43,60,.65);text-underline-offset:.22em;outline-offset:3px}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:5px 9px;background:rgba(9,9,9,.94);border:1px solid var(--line);color:#f2efeb;font-size:11px;line-height:1.3;letter-spacing:.06em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}
.tip:hover::after,.tip:focus-visible::after,.tip.on::after{opacity:1;transform:translate(-50%,0)}

@media(max-width:720px){
.lg{display:block}
.lg i{display:none}
}