/* ISAICHILLOUT — PORTRAIT PC HERO SCALE v6.5.0
   Scope: deep-page heroes on vertical desktop/browser windows only.
   Mobile/coarse-pointer devices and every landscape layout remain untouched.
*/

@media (orientation: portrait) and (min-width: 721px) and (hover: hover) and (pointer: fine),
       (orientation: portrait) and (min-width: 721px) and (any-hover: hover) and (any-pointer: fine) {
  :root {
    --ich-portrait-hero-x: 82%;
  }

  html body.deep-page header.deep-hero {
    min-height: 100svh !important;
    display: grid !important;
    align-items: end !important;
    padding-top: clamp(104px, 7svh, 138px) !important;
    padding-right: clamp(38px, 4.8vw, 70px) !important;
    padding-bottom: clamp(150px, 11.5svh, 220px) !important;
    padding-left: clamp(38px, 4.8vw, 70px) !important;
    --section-bg-position: var(--ich-portrait-hero-x) center !important;
    background-position: var(--ich-portrait-hero-x) center !important;
  }

  html body.deep-page header.deep-hero::before {
    background-position: center, var(--ich-portrait-hero-x) center !important;
  }

  html body.deep-page header.deep-hero > .container {
    width: min(100%, 1060px) !important;
    max-width: 1060px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: end !important;
  }

  html body.deep-page header.deep-hero .status {
    margin-bottom: 1.05rem !important;
    gap: .72rem !important;
    font-size: clamp(.9rem, 1.42vw, 1.06rem) !important;
    line-height: 1.3 !important;
    letter-spacing: .17em !important;
  }

  html body.deep-page header.deep-hero .status > span {
    width: 11px !important;
    height: 11px !important;
  }

  html body.deep-page header.deep-hero .hero-overline {
    margin-bottom: .72rem !important;
    font-size: clamp(.88rem, 1.36vw, 1.02rem) !important;
    line-height: 1.3 !important;
    letter-spacing: .2em !important;
  }

  html body.deep-page header.deep-hero h1 {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(8.2rem, 20.5vw, 11.8rem) !important;
    line-height: .76 !important;
    letter-spacing: -.078em !important;
    text-shadow: 0 18px 58px rgba(0, 0, 0, .7) !important;
  }

  /* Long production wording gets almost the same authority without clipping. */
  html body.deep-page header.deep-hero.production-hero h1 {
    font-size: clamp(7.35rem, 18.6vw, 10.7rem) !important;
  }

  html body.deep-page header.deep-hero.projects-hero h1 {
    font-size: clamp(7.7rem, 19.4vw, 11rem) !important;
  }

  html body.deep-page header.deep-hero .hero-lede {
    max-width: 850px !important;
    margin-top: 1.7rem !important;
    color: rgba(244, 239, 248, .82) !important;
    font-size: clamp(1.2rem, 2.15vw, 1.52rem) !important;
    line-height: 1.55 !important;
  }

  html body.deep-page header.deep-hero .hero-genres {
    max-width: 940px !important;
    gap: .72rem !important;
    margin-top: 1.55rem !important;
  }

  html body.deep-page header.deep-hero .hero-genres span {
    padding: .78rem 1.02rem !important;
    font-size: clamp(.82rem, 1.28vw, .96rem) !important;
  }

  html body.deep-page header.deep-hero .actions {
    gap: .9rem !important;
    margin-top: 1.65rem !important;
  }

  html body.deep-page header.deep-hero > .container > .button,
  html body.deep-page header.deep-hero .actions .button {
    width: auto !important;
    min-height: 64px !important;
    padding: 1rem 1.55rem !important;
    border-radius: 16px !important;
    font-size: clamp(.86rem, 1.3vw, .98rem) !important;
    letter-spacing: .075em !important;
  }

  /* Real image layers used by legacy/deeper hero variants. */
  html body.deep-page .night-hope-city-layer img,
  html body.deep-page .hero-background img,
  html body.deep-page .hero-bg img,
  html body.deep-page img.hero-bg {
    object-position: var(--ich-portrait-hero-x) center !important;
  }
}

/* Narrow portrait desktop browser windows: retain impact without horizontal clipping. */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 720px) and (hover: hover) and (pointer: fine),
       (orientation: portrait) and (min-width: 600px) and (max-width: 720px) and (any-hover: hover) and (any-pointer: fine) {
  html body.deep-page header.deep-hero {
    min-height: 100svh !important;
    display: grid !important;
    align-items: end !important;
    padding: 92px 28px 104px !important;
    --section-bg-position: 82% center !important;
    background-position: 82% center !important;
  }

  html body.deep-page header.deep-hero::before {
    background-position: center, 82% center !important;
  }

  html body.deep-page header.deep-hero > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.deep-page header.deep-hero .status,
  html body.deep-page header.deep-hero .hero-overline {
    font-size: .82rem !important;
  }

  html body.deep-page header.deep-hero h1 {
    font-size: clamp(6.7rem, 19.5vw, 8.6rem) !important;
    line-height: .77 !important;
  }

  html body.deep-page header.deep-hero.production-hero h1,
  html body.deep-page header.deep-hero.projects-hero h1 {
    font-size: clamp(6.15rem, 18vw, 7.9rem) !important;
  }

  html body.deep-page header.deep-hero .hero-lede {
    margin-top: 1.3rem !important;
    font-size: 1.08rem !important;
  }

  html body.deep-page header.deep-hero .hero-genres {
    gap: .55rem !important;
    margin-top: 1.18rem !important;
  }

  html body.deep-page header.deep-hero .hero-genres span {
    padding: .62rem .82rem !important;
    font-size: .76rem !important;
  }

  html body.deep-page header.deep-hero > .container > .button,
  html body.deep-page header.deep-hero .actions .button {
    width: auto !important;
    min-height: 58px !important;
    padding: .88rem 1.28rem !important;
    font-size: .82rem !important;
  }
}

/* Short portrait desktop windows: keep dense heroes fully visible. */
@media (orientation: portrait) and (min-width: 721px) and (max-height: 1180px) and (any-hover: hover) and (any-pointer: fine) {
  html body.deep-page header.deep-hero {
    padding-top: 90px !important;
    padding-bottom: 66px !important;
  }

  html body.deep-page header.deep-hero h1 {
    font-size: clamp(6.8rem, 17vw, 9rem) !important;
  }

  html body.deep-page header.deep-hero.production-hero h1,
  html body.deep-page header.deep-hero.projects-hero h1 {
    font-size: clamp(6.15rem, 15.8vw, 8.25rem) !important;
  }

  html body.deep-page header.deep-hero .status {
    margin-bottom: .7rem !important;
    font-size: .8rem !important;
  }

  html body.deep-page header.deep-hero .hero-overline {
    margin-bottom: .45rem !important;
    font-size: .78rem !important;
  }

  html body.deep-page header.deep-hero .hero-lede {
    margin-top: 1rem !important;
    font-size: 1rem !important;
  }

  html body.deep-page header.deep-hero .hero-genres {
    gap: .48rem !important;
    margin-top: .95rem !important;
  }

  html body.deep-page header.deep-hero .hero-genres span {
    padding: .5rem .7rem !important;
    font-size: .7rem !important;
  }

  html body.deep-page header.deep-hero .actions {
    margin-top: 1.05rem !important;
  }

  html body.deep-page header.deep-hero > .container > .button,
  html body.deep-page header.deep-hero .actions .button {
    min-height: 54px !important;
    padding: .78rem 1.15rem !important;
    font-size: .78rem !important;
  }
}

/* Extra-tall portrait monitors: use the available canvas confidently. */
@media (orientation: portrait) and (min-width: 850px) and (min-height: 1350px) and (any-hover: hover) and (any-pointer: fine) {
  html body.deep-page header.deep-hero h1 {
    font-size: clamp(10.2rem, 21.5vw, 12.8rem) !important;
  }

  html body.deep-page header.deep-hero.production-hero h1 {
    font-size: clamp(9.1rem, 19.4vw, 11.5rem) !important;
  }

  html body.deep-page header.deep-hero .hero-lede {
    font-size: clamp(1.3rem, 1.85vw, 1.58rem) !important;
  }
}