/* Illinois belongs to Jacky's Work entrance; the portal keeps its own galaxy. */
.work-hero { min-height: 0; background: #070d12; border-bottom: 1px solid #b8cee326; }
.work-hero .hero-stage {
  position: relative; top: auto; height: auto; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
  align-items: center; column-gap: clamp(16px, 3.5vw, 70px); row-gap: 24px;
  padding: calc(var(--topbar, 72px) + 32px) clamp(24px, 5vw, 88px) 24px;
}
.work-hero .hero-copy { grid-column: 1; grid-row: 1; padding: 0; transform: none; opacity: 1; align-self: center; }
.work-hero h1 { font-size: clamp(42px, 5.35vw, 84px); line-height: 1.09; }
.work-hero h1 span { white-space: normal; }
.work-hero .hero-intro { max-width: 470px; margin-top: 26px; font-size: 15px; line-height: 1.8; }
.work-hero .hero-meta, .work-hero .scroll-cue { display: none; }
.work-hero .hero-chapters { grid-row: 2; transform: none; opacity: 1; }
.work-hero-art {
  position: relative; isolation: isolate; grid-column: 2; grid-row: 1; width: 100%;
  height: clamp(440px, 72svh, 720px); max-height: 780px; margin: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 44%, #1b354516, transparent 65%);
}
.work-hero-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; opacity: 0; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.work-hero[data-hero-state="ready"] .work-hero-canvas { opacity: 1; }
.work-hero-fallback {
  position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 45px); max-width: none;
  fill: #86b9d503; stroke: #abd8f0; stroke-width: .007; stroke-dasharray: .001 .014;
  stroke-linecap: round; opacity: .8; filter: drop-shadow(0 0 5px #83c4f050); pointer-events: none;
}
.work-hero[data-hero-state="ready"] .work-hero-fallback { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .work-hero:not([data-hero-state]) .work-hero-fallback { opacity: 0; animation: work-outline-safety 0s 7s forwards; }
}
@keyframes work-outline-safety { to { opacity: .8; } }
.work-hero-caption { position: absolute; bottom: 15px; left: 0; width: 100%; text-align: center; pointer-events: none; opacity: calc(1 - var(--hero-dissolve, 0)); }
.work-hero-caption > span { display: block; color: #e4eff5; font: 500 clamp(19px, 1.9vw, 26px)/1.3 var(--sans); letter-spacing: -.035em; }
.work-hero-caption small { display: block; margin-top: 7px; color: #a0b2bf; font: 10px/1.6 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.work-hero-motion { position: absolute; top: 2px; right: 0; z-index: 2; min-height: 40px; padding: 8px 13px; border: 1px solid #bdd8ec32; border-radius: 30px; background: #0b151edf; color: #afc5d4; font: 11px/1.5 var(--sans); cursor: pointer; }
.work-hero-motion[hidden] { display: none; }
.work-hero-motion:hover { color: #f2f8fc; border-color: #bdd8ec85; }
.work-hero-motion:focus-visible { outline: 2px solid #b3d8ef; outline-offset: 4px; }
.work-hero-identity { display: flex; gap: 14px; align-items: center; margin: 25px 0 0; width: fit-content; }
.work-hero-identity img { display: block; width: 64px; height: 64px; object-fit: cover; object-position: center 25%; border: 1px solid #bdd8ec48; border-radius: 5px; }
.work-hero-identity > span { color: #dce7ef; font-size: 12px; line-height: 1.65; }
.work-hero-identity small { display: block; color: #a0b2bf; font-size: 11px; }
/* A short native-scroll scene gives the particles time to separate on screen.
   No pinning on phones, short windows, reduced motion, or a renderer fallback. */
@media (min-width: 761px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  .work-hero[data-hero-state="ready"] { min-height: 165svh; }
  .work-hero[data-hero-state="ready"] .hero-stage { position: sticky; top: 0; height: 100svh; }
  .work-hero-art { max-height: min(720px, calc(100svh - 190px)); }
}
@media (max-width: 960px) and (min-width: 761px) {
  .work-hero .hero-stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding-inline: 28px; }
  .work-hero h1 { font-size: clamp(39px, 5.15vw, 51px); }
  .work-hero-art { height: 520px; }
  .work-hero .hero-chapters a { padding-inline: 8px; font-size: 10px; }
}
@media (min-width: 761px) and (max-height: 780px) {
  .work-hero .hero-stage { padding-top: calc(var(--topbar, 72px) + 20px); row-gap: 16px; }
  .work-hero h1 { font-size: clamp(40px, 4.6vw, 64px); }
  .work-hero .hero-intro { margin-top: 18px; font-size: 14px; }
  .work-hero-identity { margin-top: 16px; }
}
@media (max-width: 760px) {
  .work-hero .hero-stage { min-height: 0; padding: calc(var(--topbar, 72px) + 36px) 24px 28px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
  .work-hero .hero-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .work-hero .eyebrow { margin-bottom: 20px; }
  .work-hero h1 { font-size: clamp(40px, 9.9vw, 70px); line-height: 1.1; }
  .work-hero .hero-intro { margin-top: 23px; font-size: 14px; line-height: 1.8; }
  .work-hero-art { grid-column: 1; grid-row: 2; height: clamp(340px, 103vw, 520px); max-height: none; }
  .work-hero-caption { bottom: 5px; }
  .work-hero .hero-chapters { display: none; }
  .work-hero-identity { margin-top: 21px; }
  .work-hero-identity img { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-hero-canvas, .work-hero-motion { display: none; }
  .work-hero .work-hero-fallback { opacity: .8; }
}