/* Illustrated atlas: scoped to the realms page; the Engine guide is untouched. */
.realmsPage{padding:0 15px}
.realmsHero{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(90deg,rgba(13,13,18,.96),rgba(13,13,18,.78) 48%,rgba(13,13,18,.12)),
    url('../_art/ocean.webp') center 48%/cover,var(--panel);padding:56px 44px}
.realmsHeroCopy{max-width:640px}
.realmsPage .realmEyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);line-height:1.6;margin:0 0 12px;display:block}
.realmsHero h1{font-size:clamp(42px,5vw,72px);font-weight:650;line-height:1.04}
.realmsHero .realmsLead{font-size:clamp(23px,2.6vw,34px);line-height:1.25;letter-spacing:-.025em;margin:22px 0 16px}
.realmsHeroCopy > p:not(.realmEyebrow):not(.realmsLead){max-width:49ch;color:#e0dfeb}
.realmsPage .btn{margin:12px 8px 0 0;line-height:1.4;text-align:center}
.realmsPage .btn-ghost{background:var(--ink);border-color:#686678}
.realmsPage .btn-ghost:hover{background:var(--panel-2)}
.realmIntro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:42px 0 22px}
.realmIntro p{color:#cfcee0;margin-bottom:0}
.realmContract{border-left:2px solid var(--gold);padding:0 0 0 22px;font-size:14px;line-height:1.6}
.realmContract p{margin:0}
.realmContract a{text-decoration:underline}
.realmJump{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.realmJump a{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 16px;
  border:1px solid #686678;border-radius:6px;background:var(--panel);font-size:14px}
.realmJump a span{color:var(--gold);font-size:11px;font-weight:700}
.realmJump a:hover{border-color:var(--gold);background:var(--panel-2)}
.realmsPage .realmGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:0}
.realmsPage .realmCard{padding:0;min-width:0;display:flex;flex-direction:column;border-radius:12px;
  scroll-margin-top:24px;background:var(--panel)}
.realmVisual{position:relative;isolation:isolate;min-height:310px;display:flex;align-items:flex-end;
  border-radius:11px 11px 0 0;overflow:hidden;background:var(--panel-2)}
.realmVisual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.realmVisual::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,13,18,0) 12%,rgba(13,13,18,.25) 35%,rgba(13,13,18,.92) 70%,#15151f)}
.realmCaption{padding:96px 24px 22px;width:100%}
.realmCaption h2{font-size:34px;font-weight:600;color:#fff;overflow-wrap:anywhere}
.realmsPage .realmCtx{color:#ecebf2;font-size:15px;line-height:1.5;margin:10px 0 0;max-width:45ch}
.realmReading{padding:0 24px 24px;display:flex;flex-direction:column;flex:1}
.realmLenses{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 20px}
.realmsPage .viewRow{margin:0;padding:12px 12px 12px 14px;background:#112722;line-height:1.6}
.realmsPage .viewRow.biz{background:#2b191e}
.realmsPage .viewLabel{color:#70e0be;font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.5}
.realmsPage .biz .viewLabel{color:#ff9296}
.viewRow p{margin:8px 0 0}
.realmsPage .realmQ{margin-top:auto;padding-top:18px;font-style:normal;font-size:17px;line-height:1.5;color:var(--text)}
.realmQ p{margin:0}
.realmReturn{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:18px;
  padding:8px 12px;border:1px solid #686678;border-radius:6px;font-size:13px}
.realmReturn:hover{border-color:var(--gold);background:var(--panel-2)}
.realmNext{margin-top:36px;padding:32px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(120deg,#18322d,var(--panel) 60%,#301c22)}
.realmNext p:not(.realmEyebrow){max-width:65ch;color:#cfcee0}
#realmIndex{scroll-margin-top:24px}
/* Keep focus visible after both keyboard navigation and in-page jumps. */
.realmsPage a:focus,.realmsPage [tabindex="-1"]:focus{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
@media(max-width:1000px){
  .realmLenses{grid-template-columns:1fr;gap:12px}
  .realmCaption h2{font-size:30px}
}
@media(max-width:820px){
  .realmsPage{padding-top:18px}
  .realmsHero{padding:32px 24px;background-image:linear-gradient(90deg,rgba(13,13,18,.92),rgba(13,13,18,.75)),url('../_art/ocean.webp')}
  .realmIntro{grid-template-columns:1fr;gap:20px;margin-top:30px}
  .realmsPage .realmGrid{grid-template-columns:1fr}
  .realmLenses{grid-template-columns:1fr 1fr}
  .realmVisual{min-height:320px}
}
@media(max-width:480px){
  .realmsHero{padding:28px 20px}
  .realmsPage .btn{display:block;margin-right:0;padding:14px}
  .realmJump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .realmJump a{padding:10px;gap:6px;font-size:13px}
  .realmVisual{min-height:270px}
  .realmCaption{padding:88px 18px 20px}
  .realmCaption h2{font-size:29px}
  .realmReading{padding:0 18px 20px}
  .realmLenses{grid-template-columns:1fr}
  .realmNext{padding:24px 20px}
}
@media print{
  .realmsHero{background:var(--panel)}
  .realmJump,.realmReturn{display:none}
  .realmsPage .realmGrid{display:block}
  .realmsPage .realmCard{break-inside:avoid;margin-bottom:24px}
}