/* ==================================================
   RESPONSIVE RULES — tablet and mobile
   ================================================== */
@media (max-width: 1180px) {
  .primary-nav { gap: .85rem; }
  .primary-nav a { font-size: .59rem; }
  .hero { padding-left: 4rem; padding-right: 4rem; }
  .content-section { padding-left: 4rem; padding-right: 4rem; }
}

@media (max-width: 980px) {
  :root { --header-height: 72px; }
  .menu-toggle { display: block; position: relative; z-index: 10002; }
  .menu-toggle[aria-expanded="true"] {
    position: fixed;
    top: max(.75rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    color: var(--aged);
    background: #070809;
  }
  .menu-toggle[aria-expanded="true"]::after { background: #070809; }
  .primary-nav { position: fixed; z-index: 10001; inset: 0; width: 100%; height: 100vh; height: 100dvh; min-height: 100svh; display: grid; align-content: start; justify-items: center; gap: 0; padding: max(5.5rem, calc(env(safe-area-inset-top) + 4.5rem)) 1.5rem max(2rem, env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; color: var(--aged); background: rgba(8,9,10,.98); opacity: 0; visibility: hidden; transform: translateY(-15px); transition: opacity .3s, visibility .3s, transform .3s; }
  .primary-nav.open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav a { width: min(420px, 100%); padding: .8rem; border-bottom: 1px solid var(--line); font-size: .78rem; text-align: center; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { grid-template-columns: 1fr 1fr; padding: calc(var(--header-height) + 3rem) 3rem 4rem; }
  .hero__chapter { display: none; }
  .home-trailer { grid-template-columns: 1fr; }
  .home-trailer__heading { max-width: 700px; }
  .section-hero blockquote { position: static; margin-top: 1.5rem; text-align: left; }
  .story-layout, .character-stage, .trailer-feature { grid-template-columns: 1fr; }
  .character-stage__image { border-right: 0; border-bottom: 1px solid var(--line); }
  .world-entry { grid-column: span 6; }
  .world-entry:nth-child(5) { grid-column: 4 / span 6; }
  .episode-card { grid-template-columns: 80px minmax(180px, 280px) 1fr; }
  .news-card { grid-template-columns: 130px 1fr; }
  .news-image { grid-column: 2; }
}

@media (max-width: 768px) {
  .site-header { padding-inline: 1.2rem; }
  .header-mark__text { font-size: .72rem; }
  .hero { grid-template-columns: 1fr; gap: 2rem; min-height: auto; padding: calc(var(--header-height) + 3rem) 1.3rem 4rem; }
  .hero__copy { padding: 0; }
  .hero__logo { min-height: 150px; }
  .hero__visual { min-height: 58vh; grid-row: 1; margin-top: 1rem; }
  .hero__copy { grid-row: 2; }
  .hero__scroll, .hero__lines { display: none; }
  .home-news-strip { grid-template-columns: 120px 1fr; }
  .home-news-strip a { grid-column: 1 / -1; border-top: 1px solid #d0cbc0; }
  .archive { padding-left: 0; }
  .archive-rail { display: none; }
  .content-section { padding: 3.5rem 1.2rem; }
  .story-layout { gap: 2rem; }
  .placeholder--story, .character-stage__image { min-height: 430px; }
  .story-intro { gap: 1rem; }
  .story-meta, .credits-layout { grid-template-columns: 1fr; }
  .character-selectors { grid-template-columns: 1fr 1fr; }
  .world-entry, .world-entry:nth-child(4), .world-entry:nth-child(5) { grid-column: span 12; }
  .episode-card { grid-template-columns: 55px 1fr; }
  .episode-thumb { grid-column: 2; }
  .episode-info { grid-column: 2; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item, .gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-column: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .credits-layout { gap: 5rem; }
  .staff-photos { justify-content: center; min-height: 280px; padding-inline: 0; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-legal { grid-column: 1; flex-direction: column; }
}

@media (max-width: 500px) {
  body { font-size: 16px; }
  .header-mark__crest { width: 38px; height: 38px; }
  .hero__visual { min-height: 430px; }
  .hero blockquote { font-size: 1.5rem; }
  .home-trailer { padding: 5rem 1.2rem; }
  .placeholder--media { min-height: 250px; }
  .play-button { width: 64px; height: 64px; }
  .home-news-strip { grid-template-columns: 105px 1fr; }
  .home-news-strip > * { padding: 1.2rem 1rem; }
  .section-hero h1 { font-size: clamp(2.7rem, 15vw, 4.2rem); }
  .section-hero blockquote { font-size: 1.18rem; }
  .story-lead { font-size: 1.3rem; }
  .placeholder--story, .character-stage__image { min-height: 360px; }
  .story-intro { grid-template-columns: 28px 1fr; }
  .story-meta > div { padding: 1.3rem; }
  .character-stage__info { padding: 2rem 1.2rem; }
  .character-stage h2 { font-size: 2.45rem; }
  .character-facts div { grid-template-columns: 70px 1fr; }
  .character-selectors { grid-template-columns: 1fr; }
  .character-selector { min-height: 150px; }
  .episode-card { grid-template-columns: 1fr; }
  .episode-number, .episode-thumb, .episode-info { grid-column: 1; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item, .gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-column: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .lightbox { grid-template-columns: 44px minmax(0,1fr) 44px; gap: .35rem; padding: .7rem; }
  .lightbox__image { min-height: 60vh; }
  .lightbox__previous, .lightbox__next { width: 42px; height: 48px; }
  .news-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.3rem; }
  .news-image { grid-column: 1; }
  .teaser-list div { grid-template-columns: 40px 1fr; }
  .teaser-list em { grid-column: 2; }
  .credit-list--cast div { grid-template-columns: .8fr 1.2fr; }
  .staff-photos { min-height: 240px; }
  .staff-photos .placeholder { width: 48vw; min-height: 210px; padding: .7rem; font-size: .55rem; }
  .footer-socials { grid-template-columns: 1fr; }
}

/* ==================================================
   SECOND DESIGN PASS — RESPONSIVE OVERRIDES
   ================================================== */
@media (max-width: 1180px) {
  .primary-nav a { font-size: .66rem; }
  .hero { padding: 0; }
}

@media (max-width: 980px) {
  .primary-nav {
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background:
      linear-gradient(90deg, rgba(130,31,41,.1), transparent 35%, transparent 65%, rgba(21,56,62,.13)),
      radial-gradient(circle at center, #111719 0%, #050607 70%);
  }
  .primary-nav::before,
  .primary-nav::after { position: absolute; left: 10%; width: 80%; height: 1px; transform: scaleX(0); animation: menuRule .65s var(--ease) .12s forwards; }
  .primary-nav::before { top: 14%; background: linear-gradient(90deg, transparent, var(--blood), transparent); }
  .primary-nav::after { top: auto; bottom: 14%; background: linear-gradient(90deg, transparent, var(--petroleum), transparent); }
  .primary-nav a { opacity: 0; transform: translateY(10px); border-color: rgba(190,178,157,.18); font-family: var(--literary); font-size: .9rem; }
  .primary-nav.open a { animation: mobileMenuItem .5s var(--ease) forwards; }
  .primary-nav.open a:nth-of-type(1) { animation-delay: .08s; }
  .primary-nav.open a:nth-of-type(2) { animation-delay: .12s; }
  .primary-nav.open a:nth-of-type(3) { animation-delay: .16s; }
  .primary-nav.open a:nth-of-type(4) { animation-delay: .20s; }
  .primary-nav.open a:nth-of-type(5) { animation-delay: .24s; }
  .primary-nav.open a:nth-of-type(6) { animation-delay: .28s; }
  .primary-nav.open a:nth-of-type(7) { animation-delay: .32s; }
  .primary-nav.open a:nth-of-type(8) { animation-delay: .36s; }
  .primary-nav.open a:nth-of-type(9) { animation-delay: .40s; }
  @keyframes mobileMenuItem { to { opacity: 1; transform: none; } }
  @keyframes menuRule { to { transform: scaleX(1); } }

  .hero { display: block; min-height: 100svh; padding: 0; }
  .hero__copy { left: 6vw; top: 52%; width: min(48vw, 500px); padding: 0; }
  .hero__visual { min-height: 100%; padding: 9rem 5vw 6rem 48vw; }
  .hero__logo { min-height: 0; max-height: 45vh; }
  .character-stage { grid-template-columns: 1.12fr .88fr; }
  .character-stage__image { border-right: 1px solid rgba(130,31,41,.36); border-bottom: 0; }
}

@media (max-width: 768px) {
  .site-header { padding-inline: 1rem; }
  .header-mark__crest { width: 42px; height: 46px; }
  .hero { display: block; min-height: 100svh; padding: 0; }
  .hero::after { height: 40%; }
  .hero__visual {
    position: absolute;
    inset: 0;
    min-height: 100%;
    align-items: start;
    justify-items: center;
    padding: 8.6rem 1.3rem 29rem;
    background: radial-gradient(circle at 50% 28%, rgba(21,56,62,.3), transparent 42%), repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 17px);
  }
  .hero__visual span { margin-top: 8vh; }
  .hero__copy {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    top: auto;
    bottom: 3.3rem;
    width: auto;
    padding: 0;
    transform: none;
  }
  .hero__copy::before { left: -.45rem; top: -1.2rem; width: 42px; height: 42px; }
  .hero__logo { width: min(76vw, 400px); min-height: 0; max-height: 34vh; margin: -2.8rem 0 -1.8rem; object-position: left center; }
  .hero blockquote { max-width: 86%; margin: .5rem 0 1rem; font-size: clamp(1.3rem, 5.4vw, 1.75rem); line-height: 1.16; }
  .hero .eyebrow { margin-bottom: 0; font-size: .68rem; }
  .hero .ornament-link { padding-block: .65rem; }
  .hero__chapter, .hero__scroll, .hero__lines { display: none; }

  .story-lead { padding: 1.35rem; }
  .character-stage { grid-template-columns: 1fr; }
  .character-stage__image { border-right: 0; border-bottom: 1px solid rgba(130,31,41,.36); }
  .gallery-item:nth-child(3n+2) { transform: none; }
  .gallery-item:nth-child(3n+2):hover { transform: translateY(-4px) scale(1.008); }
  .trailer-feature { padding: 1px; }
  .site-footer::before { max-width: 88vw; overflow: hidden; }
}

@media (max-width: 500px) {
  body { font-size: 1.05rem; }
  .header-mark__text { display: none; }
  .hero__visual { padding-top: 7rem; padding-bottom: 27rem; }
  .hero__visual span { margin-top: 5vh; font-size: .72rem; }
  .hero__copy { bottom: 2.35rem; }
  .hero__logo { width: min(82vw, 360px); max-height: 31vh; }
  .hero blockquote { max-width: 95%; }
  .section-hero h1 { font-size: clamp(2.45rem, 12vw, 3.8rem); letter-spacing: -.06em; }
  .content-section::before { margin-bottom: 1.3rem; }
  .story-lead p:first-child::first-letter { font-size: 4rem; }
  .character-stage::before { inset: 9px; }
  .character-stage::after { left: 18px; top: 17px; font-size: .58rem; }
  .world-entry { padding: 1rem; }
  .news-card { padding-left: 1.5rem; }
  .staff-photos .placeholder { border-width: 4px; border-bottom-width: 20px; }
  .site-footer { padding-top: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .primary-nav a { opacity: 1; transform: none; }
  .primary-nav::before, .primary-nav::after { transform: scaleX(1); }
}

/* ==================================================
   LIGHT HOME POLISH — centered logo and mobile contrast
   ================================================== */
@media (max-width: 980px) {
  .site-header--home .primary-nav a { color: var(--aged); text-shadow: none; }
  .site-header--home .primary-nav::before { background: linear-gradient(90deg, transparent, var(--blood), transparent); }
  .site-header--home .primary-nav::after { background: linear-gradient(90deg, transparent, var(--petroleum), transparent); }
  .site-header--home .menu-toggle[aria-expanded="true"] { color: var(--aged); background: #070809; }
  .site-header--home .menu-toggle[aria-expanded="true"]::after { background: #070809; }
  .hero__copy {
    left: 50%;
    top: 54%;
    width: min(42vw, 390px);
    transform: translate(-50%, -50%);
  }
  .hero__visual { padding: 8rem 6vw 7rem 55vw; }
  .hero__logo { width: min(100%, 330px); max-height: 35vh; margin-inline: auto; }
}

@media (max-width: 768px) {
  .hero { min-height: 100svh; }
  .hero::after { height: 25%; background: linear-gradient(transparent, #f4f0e7); }
  .hero__visual {
    padding: 7rem 1.2rem 25rem;
    color: rgba(48,38,39,.7);
    background:
      radial-gradient(circle at 50% 28%, rgba(175,194,186,.3), transparent 41%),
      repeating-linear-gradient(135deg, rgba(92,64,58,.018) 0 1px, transparent 1px 17px);
  }
  .hero__visual span { margin-top: 6vh; }
  .hero__copy {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 2.4rem;
    width: min(calc(100% - 2.5rem), 360px);
    transform: translateX(-50%);
    text-align: center;
  }
  .hero__copy::before { left: 50%; top: -1.1rem; width: 160px; height: 1px; transform: translateX(-50%); }
  .hero__copy::after { top: calc(-1.1rem - 8px); }
  .hero__logo {
    width: min(70vw, 285px);
    max-height: 29vh;
    margin: -1.35rem auto -.8rem;
    object-position: center;
  }
  .hero blockquote { max-width: 100%; margin: .35rem auto .8rem; }
  .hero .ornament-link { margin-inline: auto; }
  .home-news-strip a { color: #20191a; }
}

@media (max-width: 500px) {
  .hero__visual { padding: 6.5rem 1rem 23rem; }
  .hero__visual span { margin-top: 4vh; }
  .hero__copy { bottom: 1.65rem; width: min(calc(100% - 2rem), 330px); }
  .hero__logo { width: min(66vw, 255px); max-height: 25vh; }
  .hero blockquote { font-size: clamp(1.2rem, 5vw, 1.55rem); line-height: 1.15; }
  .hero .eyebrow { font-size: .66rem; }
  .hero .ornament-link { font-size: .68rem; }
  .home-news-strip__title { color: #fff8ec; }
  .home-news-strip time { color: #801c26; }
}

/* Final Home composition checks: 430px, 390px and 375px */
@media (max-width: 768px) {
  .intro-logo {
    width: auto;
    height: auto;
    max-width: min(66vw, 300px);
    max-height: 48vh;
    object-fit: contain;
  }
  .hero { min-height: 100svh; }
  .hero__visual {
    inset: 0;
    align-items: start;
    justify-items: center;
    min-height: 100%;
    padding: 6.8rem 1rem 21rem;
  }
  .hero__visual span {
    max-width: 280px;
    margin-top: clamp(2.2rem, 8vh, 5rem);
    padding: .8rem 1rem;
  }
  .hero__copy {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 1.5rem;
    width: min(calc(100% - 2rem), 320px);
    transform: translateX(-50%);
    text-align: center;
  }
  .hero__logo {
    width: min(58vw, 230px);
    height: auto;
    min-height: 0;
    max-width: 230px;
    max-height: 25vh;
    margin: -.9rem auto -.35rem;
    background: transparent !important;
    object-fit: contain;
  }
  .hero blockquote {
    max-width: 310px;
    margin: .4rem auto .7rem;
    font-size: clamp(1.18rem, 4.8vw, 1.45rem);
    line-height: 1.16;
  }
  .hero .ornament-link { margin-inline: auto; padding-block: .58rem; }
  .home-transition { height: 70px; }
  .footer-brand img {
    width: min(170px, 42vw);
    max-width: 170px;
    max-height: 150px;
    margin: -.6rem 0 -.25rem;
  }
}

@media (max-width: 430px) {
  .hero__visual { padding-bottom: 20rem; }
  .hero__copy { bottom: 1.15rem; width: min(calc(100% - 1.5rem), 310px); }
  .hero__logo { width: min(55vw, 220px); max-width: 220px; }
  .hero .eyebrow { margin-bottom: .05rem; }
}

@media (max-width: 390px) {
  .hero__visual { padding-top: 6.3rem; padding-bottom: 19rem; }
  .hero__visual span { margin-top: 2.2rem; }
  .hero__copy { bottom: .85rem; }
  .hero__logo { width: min(54vw, 205px); max-width: 205px; }
  .hero blockquote { font-size: 1.17rem; }
}

@media (max-width: 375px) {
  .intro-logo { width: auto; max-width: min(64vw, 280px); }
  .hero__visual { padding-bottom: 18.5rem; }
  .hero__copy { width: calc(100% - 1.25rem); }
  .hero__logo { width: min(52vw, 195px); max-width: 195px; }
  .hero .ornament-link { font-size: .64rem; }
  .footer-brand img { width: 155px; max-width: 155px; }
}

/* ==================================================
   FINAL MOBILE HOME COMPOSITION — 768 / 430 / 390 / 375
   The artwork remains the largest visual area; branding occupies one compact
   anchored group below it rather than becoming separate stacked sections.
   ================================================== */
@media (max-width: 768px) {
  .hero {
    display: block;
    min-height: 100svh;
  }
  .hero__visual {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    min-height: 100%;
    padding: calc(var(--header-height) + 1.25rem) .9rem 14.75rem;
  }
  .hero__visual span {
    width: min(92vw, 620px);
    min-height: calc(100svh - var(--header-height) - 16.5rem);
    margin: 0;
    padding: 1.25rem;
  }
  .hero__visual span::before,
  .hero__visual span::after { width: 38px; height: 38px; }
  .hero__copy {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 1.15rem;
    width: min(calc(100% - 2rem), 310px);
    transform: translateX(-50%);
    text-align: center;
  }
  .hero__copy::before { top: -1rem; }
  .hero__copy::after { top: calc(-1rem - 8px); }
  .hero__logo {
    width: min(50vw, 205px);
    max-width: 205px;
    max-height: 21vh;
    margin: -.55rem auto -.2rem;
    filter: none !important;
  }
  .hero blockquote {
    max-width: 290px;
    margin: .3rem auto .62rem;
    font-size: clamp(1.08rem, 4.4vw, 1.3rem);
    line-height: 1.15;
  }
  .hero .eyebrow {
    margin-bottom: .15rem;
    color: #68151f;
    font-size: .64rem;
  }
  .hero .ornament-link {
    padding: .55rem .85rem;
    color: #1d1516;
    font-size: .66rem;
  }
  .footer-brand img {
    width: min(155px, 42vw);
    max-width: 155px;
    max-height: 138px;
    margin: -.35rem auto -.15rem;
  }
}

@media (max-width: 430px) {
  .hero__visual { padding-bottom: 14.2rem; }
  .hero__visual span {
    width: calc(100vw - 1.4rem);
    min-height: calc(100svh - var(--header-height) - 15.8rem);
  }
  .hero__copy { bottom: .8rem; }
  .hero__logo { width: min(47vw, 190px); max-width: 190px; }
}

@media (max-width: 390px) {
  .hero__visual { padding: calc(var(--header-height) + .85rem) .65rem 13.6rem; }
  .hero__visual span { min-height: calc(100svh - var(--header-height) - 14.8rem); }
  .hero__copy { bottom: .55rem; width: calc(100% - 1.5rem); }
  .hero__logo { width: min(45vw, 176px); max-width: 176px; }
  .hero blockquote { font-size: 1.06rem; }
}

@media (max-width: 375px) {
  .hero__visual { padding-bottom: 13.25rem; }
  .hero__visual span { min-height: calc(100svh - var(--header-height) - 14.35rem); }
  .hero__copy { bottom: .4rem; }
  .hero__logo { width: min(44vw, 168px); max-width: 168px; }
  .footer-brand img { width: 145px; max-width: 145px; }
}

/* Supplied rose ornament scales proportionally and never enters News/footer. */
@media (max-width: 768px) {
  .rose-divider {
    min-height: 118px;
    padding: .85rem 1rem;
  }
  .rose-divider img {
    width: min(300px, 74vw);
    max-height: 128px;
  }
  .rose-divider + .site-footer { padding-top: 2.5rem; }
}

@media (max-width: 430px) {
  .rose-divider { min-height: 100px; }
  .rose-divider img { width: min(260px, 70vw); }
}

/* Complete character records and supplied artwork remain readable on mobile. */
@media (max-width: 900px) {
  .character-record { grid-template-columns: 1fr; }
  .character-full-art { max-height: 610px; }
}

@media (max-width: 768px) {
  .character-stage__image {
    min-height: 520px;
    padding: 2.5rem 1rem 0;
  }
  /* Compact selector list: image at left, character copy at right. */
  .character-selectors { grid-template-columns: 1fr; }
  .character-selector {
    display: grid;
    grid-template-columns: clamp(108px, 28vw, 132px) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 0;
    padding: .7rem;
  }
  .character-selector__portrait {
    width: 100%;
    height: 132px;
    margin-bottom: 0;
  }
  .character-selector__copy { min-width: 0; }
  .character-selector small {
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .world-introduction { margin-bottom: 3rem; }
}

@media (max-width: 500px) {
  .character-stage__image { min-height: 430px; }
  .character-full-art { max-height: 450px; }
  .character-selector__portrait { height: 128px; }
  .character-record__section { padding: 1.45rem 1.2rem; }
  .character-record__section::after { left: 1.2rem; }
  .world-introduction { padding: 1.5rem 1.15rem; }
}

@media (max-width: 390px) {
  .character-selector {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: .8rem;
  }
  .character-selector__portrait { height: 122px; }
}

/* ==================================================
   RESPONSIVE HOME COVER
   Keep the supplied portrait artwork complete on every screen. The artwork
   remains the dominant visual while the logo, quote and link stay readable.
   ================================================== */
@media (min-width: 769px) and (max-width: 980px) {
  .hero { background: #07141d; }
  .hero__visual {
    inset: var(--header-height) 0 14.5rem;
    width: 100%;
    padding: 0;
    min-height: 0;
  }
  .hero__visual::before {
    content: none;
    display: none;
  }
  .hero__keyvisual {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .hero__copy {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 1rem;
    width: min(calc(100% - 2rem), 350px);
    transform: translateX(-50%);
    text-align: center;
  }
  .hero__copy .eyebrow { color: #b74b55; }
  .hero blockquote,
  .hero .ornament-link { color: #e8e0d0; }
}

@media (max-width: 768px) {
  .hero {
    min-height: max(100svh, 700px);
    background: #07141d;
  }
  .hero__visual {
    position: absolute;
    inset: var(--header-height) 0 13.8rem;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: #101d25;
  }
  .hero__visual::before {
    content: none;
    display: none;
  }
  .hero__keyvisual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .hero__copy {
    left: 50%;
    right: auto;
    top: auto;
    bottom: .8rem;
    width: min(calc(100% - 2rem), 330px);
    transform: translateX(-50%);
    text-align: center;
  }
  .hero__copy .eyebrow { color: #b74b55; }
  .hero blockquote,
  .hero .ornament-link { color: #e8e0d0; }
  .hero__logo {
    width: min(50vw, 205px);
    max-width: 205px;
    max-height: 20vh;
    margin: -.45rem auto -.2rem;
  }
  .hero blockquote {
    max-width: 310px;
    margin: .3rem auto .65rem;
  }
}

@media (max-width: 980px) {
  .site-header--home {
    color: #d5c9b4;
    background: linear-gradient(180deg, rgba(5,10,14,.96), rgba(7,20,29,.72) 70%, transparent);
  }
  .site-header--home .header-mark__crest::after,
  .site-header--home .menu-toggle::after { background: #07141d; }
  .site-header--home .header-mark__text small { color: #d36a73; }
}

@media (max-width: 430px) {
  .hero { min-height: max(100svh, 680px); }
  .hero__visual { bottom: 13.25rem; }
  .hero__copy { bottom: .55rem; }
  .hero__logo { width: min(46vw, 185px); max-width: 185px; }
}

@media (max-width: 390px) {
  .hero__visual { bottom: 12.9rem; }
  .hero__copy { width: calc(100% - 1.4rem); bottom: .4rem; }
  .hero__logo { width: min(44vw, 172px); max-width: 172px; }
  .hero blockquote { font-size: 1.05rem; }
}

@media (max-width: 375px) {
  .hero { min-height: max(100svh, 650px); }
  .hero__visual { bottom: 12.6rem; }
  .hero__logo { width: min(43vw, 162px); max-width: 162px; }
}

/* ==================================================
   FINAL MOBILE HOME
   Keep the complete key visual, but remove the oversized light blocks and
   keep the identity/navigation compact beneath the artwork.
   ================================================== */
@media (max-width: 768px) {
  .home-page .site-header--home {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 72px;
    min-height: 72px;
    padding: .65rem 1rem;
    color: #d5c9b4;
    border-bottom: 1px solid rgba(130,31,41,.35);
    background: linear-gradient(180deg, rgba(4,9,13,.98), rgba(7,20,29,.94));
  }

  .home-page .site-header--home .header-mark__crest {
    width: 44px;
    height: 44px;
  }

  .home-page .site-header--home .menu-toggle {
    width: 48px;
    height: 48px;
    color: #d5c9b4;
    background: rgba(7,20,29,.86);
  }

  .home-page .hero {
    position: relative;
    min-height: max(100svh, 850px);
    padding: 0;
    overflow: hidden;
    color: #d5c9b4;
    background: #07141d;
  }

  .home-page .hero__visual {
    position: absolute;
    inset: 72px 0 225px;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #07141d;
  }

  .home-page .hero__visual::after { content: none; display: none; }

  .home-page .hero__visual::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 64px;
    border: 0;
    background: linear-gradient(to bottom, transparent, #07141d);
    pointer-events: none;
  }

  .home-page .hero__keyvisual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .home-page .hero__copy {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 225px;
    padding: .55rem 1rem 1rem;
    color: #d5c9b4;
    background: #07141d;
    transform: none;
    text-align: center;
  }

  .home-page .hero__copy .eyebrow {
    margin: 0 0 .2rem;
    color: #b74b55;
    font-size: .55rem;
  }

  .home-page .hero__logo {
    width: min(43vw, 170px);
    min-height: 0;
    max-width: 170px;
    max-height: 125px;
    margin: -.25rem auto -.1rem;
    object-fit: contain;
    filter: none;
  }

  .home-page .hero blockquote {
    max-width: 330px;
    margin: .2rem auto .45rem;
    color: #e8e0d0;
    font-size: clamp(1rem, 4.4vw, 1.18rem);
    line-height: 1.12;
  }

  .home-page .hero .ornament-link {
    width: min(290px, 82vw);
    margin: 0 auto;
    padding: .55rem .8rem;
    color: #e8e0d0;
    font-size: .62rem;
  }
}

@media (max-width: 430px) {
  .home-page .hero { min-height: max(100svh, 820px); }
  .home-page .hero__visual { inset: 72px 0 218px; }
  .home-page .hero__copy { min-height: 218px; }
  .home-page .hero__logo { width: min(41vw, 158px); max-width: 158px; }
}

/* Desktop selectors use the same uncropped square portraits as mobile. */
@media (min-width: 901px) {
  .character-selector__portrait {
    height: auto;
    aspect-ratio: 1 / 1;
    padding: .45rem;
  }

  .character-selector__portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
  }
}