/* Branch-only material study. Keep quiz typography and complete square objects. */
/* Guidelines pp.11–12: exact brand grounds and contrasting inks. Texture belongs
   to the photographed objects, not the banner or persona-dialog background. */
.result-hero::before{content:none;background-image:none}
.result-hero h1,.result-hero .overline,.result-hero blockquote,.result-hero blockquote cite{color:var(--ink)}
.hero-art:has(.material-art){mix-blend-mode:normal}
.persona-modal{background:#fff;color:var(--onyx);width:min(1280px,calc(100% - 40px));height:min(840px,calc(100dvh - 48px))}
.persona-modal .persona-close{position:absolute;right:16px;top:16px;z-index:4;background:#fff;color:var(--onyx);border:1px solid var(--line-strong)}
.persona-modal .persona-modal-content{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);padding:0;background:#fff;gap:0;align-items:stretch;overflow:hidden}
.persona-modal-visual{display:flex;flex-direction:column;min-height:0;padding:24px 24px 0}
.persona-modal .persona-modal-hero{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;min-height:0;padding:24px;background:var(--ground);color:var(--ink);border-radius:var(--radius);overflow-y:auto}
.persona-modal .persona-modal-hero .hero-art{margin:0;width:100%}
.persona-modal .persona-modal-hero .material-art{width:min(100%,320px,34vh)}
.persona-modal .persona-carousel{background:#fff;color:var(--onyx);padding:16px 0;border:0}
.persona-modal .persona-carousel nav{gap:12px}
.persona-modal .persona-carousel .meta{margin-right:12px}
.persona-modal .persona-carousel .icon-button{border:1px solid var(--line-strong)}
.persona-modal .persona-modal-body{margin:0;padding:76px 32px 32px;background:#fff;color:var(--onyx);--ink:var(--onyx);overflow-y:auto;min-height:0;border-left:1px solid var(--line);overscroll-behavior:contain}
.persona-modal-intro{margin:16px 0 0;flex:none}
.persona-modal-intro .overline{color:var(--ink)}
.persona-modal .persona-modal-intro h2{color:var(--ink);font:400 clamp(2.5rem,4vw,3.5rem)/1.05 Instrument,serif;margin:12px 0 20px}
.persona-modal:has([data-symbol="storyteller"]) .persona-modal-intro h2{color:var(--crimson)}
.persona-modal .persona-modal-intro blockquote{font:italic 1.5rem/1.3 Instrument,serif;margin:0;color:var(--ink)}
.persona-modal .persona-modal-intro blockquote cite{font-size:.75em;font-style:normal;margin-top:.45em;color:var(--ink)}
.persona-modal .facts{grid-template-columns:1fr;gap:20px;padding-top:0}
.persona-modal .persona-modal-body .facts dt,.persona-modal .persona-modal-body .result-section-title{color:var(--crimson)}
.result-hero:has([data-symbol="storyteller"]) h1,
.persona-modal-hero:has([data-symbol="storyteller"]) h2{color:var(--crimson)}
.ill.material-art{aspect-ratio:1;object-fit:contain;overflow:hidden;border-radius:0;mix-blend-mode:normal}
.result-hero .hero-art .material-art{width:min(100%,420px)}
.persona-modal-hero .material-art{width:min(100%,280px)}
.persona-modal-hero .hero-art:has(.material-art){margin-bottom:16px}
.persona-card-art:has(.material-art){max-width:180px;border-radius:0;background:transparent}
.persona-card-art .material-art{width:100%;height:auto}
.persona-card:has(.material-art){gap:12px}
.persona-card-art:has(.graphic-art){max-width:180px;aspect-ratio:1;border-radius:var(--radius);background:var(--graphic-ground)}
.persona-card-art .graphic-art{width:100%;height:auto}
.persona-card:has(.graphic-art){gap:12px}
@media(max-width:760px){
  .result-hero .hero-art .material-art{width:min(100%,320px)}
  .persona-modal-hero .material-art{width:min(100%,240px)}
  .persona-card:has(.material-art){gap:8px}
}
@media(max-width:900px){
  .persona-modal{width:calc(100% - 20px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)}
  .persona-modal .persona-modal-content{display:block;overflow-y:auto}
  .persona-modal-visual{padding:12px 12px 0}
  .persona-modal .persona-modal-hero{padding:48px 20px 28px;overflow:visible}
  .persona-modal .persona-modal-hero .material-art{width:min(100%,260px)}
  .persona-modal .persona-modal-body{padding:20px 24px 32px;overflow:visible;border:0}
  .persona-modal .persona-close{right:20px;top:20px}
  .persona-modal-intro h2{font-size:2.8rem}
  .persona-modal-intro blockquote{font-size:1.35rem}
}