:root {
  --page-header-height: 5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--sc-ink-950); }
body { margin: 0; color: var(--sc-parchment-100); background: #0b0d18; font-family: var(--sc-font-body); }
body.nav-open, body.modal-open { overflow: hidden; }
button, input, select { font: inherit; }
img { max-width: 100%; }

.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 300; padding: .75rem 1rem; color: var(--sc-ink-950); background: var(--sc-ivory-50); transform: translateY(-160%); }
.skip-link:focus { transform: none; }


.sub-main { min-height: 100vh; padding-top: var(--page-header-height); overflow: clip; }
.sub-hero { position: relative; isolation: isolate; min-height: 24rem; display: grid; align-items: end; padding: clamp(7rem, 12vw, 10rem) 0 clamp(3.5rem, 7vw, 6rem); border-bottom: 1px solid rgb(239 217 143 / 18%); background: radial-gradient(circle at 72% 35%, rgb(64 55 105 / 48%), transparent 34%), linear-gradient(145deg, #111326, #080911); }
.sub-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; background: url('/assets/site/summons-code-line-1px.svg') center 42% / min(74rem, 92vw) auto no-repeat; }
.sub-hero::after { content: ""; position: absolute; inset: 1rem; border: 1px solid rgb(239 217 143 / 10%); pointer-events: none; }
.sub-shell { width: min(76rem, calc(100% - 2rem)); margin-inline: auto; }
.sub-kicker { margin: 0 0 .8rem; color: var(--sc-gold-300); font: 700 .7rem/1.4 var(--sc-font-display); letter-spacing: .24em; }
.sub-title { margin: 0; color: var(--sc-ivory-50); font: 600 clamp(2.8rem, 7vw, 6.5rem)/.95 var(--sc-font-display); letter-spacing: .04em; }
.sub-lead { max-width: 47rem; margin: 1.5rem 0 0; color: rgb(241 232 208 / 70%); font-size: clamp(.92rem, 1.5vw, 1.08rem); line-height: 2; }
.sub-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin-top: 1.4rem; color: rgb(239 217 143 / 62%); font: 600 .68rem/1.5 var(--sc-font-display); letter-spacing: .08em; }

.sub-footer { display: grid; justify-items: center; gap: 1.5rem; padding: 4rem 1rem 3rem; border-top: 1px solid rgb(239 217 143 / 14%); text-align: center; background: #080911; }
.sub-footer img { width: 10rem; height: 4rem; object-fit: contain; opacity: .6; }
.sub-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; }
.sub-footer a { color: rgb(241 232 208 / 55%); font: 600 .62rem/1 var(--sc-font-display); letter-spacing: .1em; text-decoration: none; }
.sub-footer a:is(:hover, :focus-visible) { color: var(--sc-gold-300); }
.sub-footer small { color: rgb(241 232 208 / 35%); font-size: .6rem; }

@media (max-width: 52rem) {
  :root { --page-header-height: 4.5rem; }
  .sub-hero { min-height: 21rem; padding-top: 6rem; }
}

@media (max-width: 30rem) {
  .sub-title { font-size: clamp(2.7rem, 16vw, 4.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}