/* The atlas materials continue through the directory and editorial pages. */
.content-page {
  background: linear-gradient(#030b13a6, #030b13d9), url('/assets/atlas.png') center top / cover fixed;
}

.home-page main {
  background: radial-gradient(ellipse at 50% 80%, #12324855, transparent 75%);
}

.introduction {
  position: relative;
  isolation: isolate;
  max-width: 1320px;
  margin: 30px auto 55px;
  padding: 75px 95px;
  border: 1px solid #c2954a66;
  background: linear-gradient(90deg, #03101af5, #04101ac7, #03101af5), url('/assets/atlas.png') center 55% / cover;
  box-shadow: 0 15px 60px #0006, inset 0 0 70px #0008;
}

.introduction:before,
.information-page:before,
.detail-hero:before {
  content: '';
  position: absolute;
  inset: -12px;
  background: url('/assets/frame.png') center / 100% 100%;
  opacity: .75;
  pointer-events: none;
  z-index: 3;
}

.introduction h2 { color: #f5db9e; text-shadow: 0 3px 10px #000; }
.introduction p { max-width: 760px; margin-left: auto; margin-right: auto; }
.introduction .eyebrow { letter-spacing: 3px; }
.introduction .eyebrow:before,
.introduction .eyebrow:after { content: ' ── ◇ ── '; color: #b18b4b; }

.directory-section { max-width: 1320px; padding: 0 28px 65px; }
.section-heading { padding: 0 5px 27px; border-bottom: 2px ridge #b18a4266; margin-bottom: 5px; position: relative; }
.section-heading:after { content: '◈'; position: absolute; bottom: -14px; left: calc(50% - 10px); color: #dbb773; background: #07111a; padding: 0 7px; font-size: 19px; line-height: 22px; }
.section-heading h2 { color: #f2dba8; }
.game-directory { padding: 12px 24px 35px; }
.directory-section .game-directory { padding: 12px 0 0; }
.directory-row { position: relative; border: 1px solid #b58b4555; border-left: 3px ridge var(--world-color); border-radius: 8px 2px; margin: 18px 0; padding: 23px 27px; background: radial-gradient(ellipse at left, color-mix(in srgb, var(--world-color), transparent 92%), transparent 60%), linear-gradient(110deg, #07131cf2, #030a11f5); box-shadow: 0 5px 25px #0006, inset 0 0 0 4px #121a1b; }
.directory-row:before, .directory-row:after { content: '◇'; position: absolute; color: #c69d56; line-height: 15px; font-size: 16px; pointer-events: none; }
.directory-row:before { top: -6px; right: 13px; }
.directory-row:after { bottom: -6px; left: 13px; }
.directory-number { color: #d6b777; font-size: 18px; text-shadow: 0 2px 5px #000; }
.directory-art { border: 1px solid #d1a65c; border-radius: 7px 2px; padding: 3px; background: #17160d; box-shadow: 0 0 0 2px #000, 0 5px 15px #000a; }
.directory-art img { border-radius: 4px 1px; }
.directory-row h3 a { color: #f3deb3; }
.directory-row .eyebrow { color: var(--world-color); }
.directory-actions .outline-button { border: 1px solid #c59d58; border-radius: 4px 1px; background: linear-gradient(#2b281b88, #131710); box-shadow: inset 0 0 0 3px #0006; }
.directory-actions .outline-button:hover { background: #80602a44; }

.page-introduction {
  position: relative;
  margin-top: 38px;
  margin-bottom: 30px;
  min-height: 290px;
  padding: 65px 50px;
  border: 1px solid #c1944b99;
  border-radius: 10px 3px;
  background: linear-gradient(90deg, #030c14f5 10%, #030c14d9 60%, #030c1444), url('/assets/atlas.png') center 45% / cover;
  box-shadow: inset 0 0 0 5px #0008, 0 10px 35px #0008;
}

.page-introduction:before { content: '◇'; position: absolute; top: -15px; left: 30px; font: 35px Georgia, serif; color: #c59b54; line-height: 28px; text-shadow: 0 2px 6px #000; }
.page-introduction h1 { color: #f6dfab; max-width: 720px; font-size: 47px; }
.page-introduction p { max-width: 630px; }
.page-introduction:after { content: '✥'; position: absolute; right: 45px; top: 20px; color: #d8b77444; font: 200px/1 Georgia, serif; text-shadow: 0 2px #000; pointer-events: none; }

.information-page {
  position: relative;
  max-width: 940px;
  margin: 55px auto 70px;
  padding: 65px 65px 70px;
  border: 1px solid #b38a4355;
  border-radius: 10px 3px;
  background: linear-gradient(#06121bed, #040b12f7);
  box-shadow: 0 25px 80px #000a, inset 0 0 70px #0005;
}

.information-page h1 { color: #f4dca6; text-shadow: 0 3px 6px #000; font-size: 43px; border-bottom: 1px solid #b08a4655; padding-bottom: 30px; }
.information-page h2 { position: relative; color: #edcd8f; padding-left: 24px; font-size: 24px; }
.information-page h2:before { content: '◇'; position: absolute; left: 0; top: 5px; font-size: 15px; color: #b18a45; }
.information-page>p:not(.eyebrow) { color: #c4d4e0; font-size: 15px; }
.information-page .gold-button { margin: 10px 0; }
.information-page .eyebrow { margin-bottom: 22px; }

.breadcrumbs { background: #05101bc9; padding: 14px 20px; margin: 25px 0 25px; border: 1px solid #ad853c44; border-radius: 3px; }
.breadcrumbs>span:last-child { color: var(--gold-light); }
.detail-hero { isolation: isolate; border: 1px solid #bc954f; border-radius: 9px 2px; box-shadow: 0 10px 40px #0009; }
.detail-hero:before { inset: -4px; opacity: .9; }
.detail-hero>div { padding: 50px; }
.detail-hero h1 { color: #fff0c9; }
.detail-hero .eyebrow { color: var(--world-color); }
.detail-story { position: relative; background: linear-gradient(130deg, #091824ed, #040c14f2); border: 1px solid #af864444; border-radius: 7px 2px; padding: 35px; box-shadow: inset 0 0 40px #0005; }
.detail-story:before { content: '◈'; position: absolute; top: -15px; left: calc(50% - 12px); color: #c89f59; font-size: 24px; line-height: 26px; background: #07141f; padding: 0 6px; }
.detail-story h2 { color: #eed6a6; font-size: 25px; }
.detail-story p { font-size: 15px; color: #c1d2df; }
.detail-columns { gap: 30px; padding-top: 35px; }
.detail-highlights { position: relative; border: 1px solid #bd944d; border-radius: 10px 2px; background: linear-gradient(135deg, #101d25ed, #030b12f5); box-shadow: inset 0 0 0 4px #0008, 0 10px 30px #0007; padding: 30px 24px; }
.detail-highlights:before, .detail-highlights:after { content: '◆'; position: absolute; left: calc(50% - 5px); font-size: 10px; color: #c69c53; }
.detail-highlights:before { top: -9px; }
.detail-highlights:after { bottom: -9px; }
.detail-highlights h2 { color: #f5dba3; }
.detail-highlights .feature-list { gap: 17px; }
.related-worlds { padding: 30px; background: #050f18d9; border: 1px solid #b18b474d; border-top: 2px ridge #b18b47; border-radius: 6px 2px; }
.related-worlds h2 { color: #f2d69f; }
.related-worlds>a { background: linear-gradient(#172531, #07111b); border: 1px solid #b18b4777; border-radius: 5px 1px; color: #e8d2a6; }
.related-worlds>a:hover { box-shadow: 0 0 12px #c2964133; }

.site-footer { position: relative; border-top: 3px ridge #c2944f; background: linear-gradient(#030b12f2, #030a11f0), url('/assets/atlas.png') center 80% / cover; box-shadow: inset 0 15px 45px #0008; padding-top: 55px; }
.site-footer:before { content: '─── ◇ ───'; position: absolute; left: calc(50% - 65px); top: -16px; padding: 0 15px; background: #06101a; color: #e1b971; font: 18px Georgia, serif; }
.site-footer nav a { color: #c6d1d8; }
.site-footer nav a:hover { color: #ffdfa0; }
.site-footer nav { border-left: 1px solid #ab813a44; padding-left: 24px; }
.footer-brand .wordmark>strong { font-size: 40px; }
.footer-brand .wordmark>span { font-size: 23px; }

@media (max-width: 1250px) {
  .introduction { margin-left: 30px; margin-right: 30px; padding: 65px; }
  .page-introduction { margin-left: 24px; margin-right: 24px; }
  .content-page>.site-footer { padding-left: 35px; padding-right: 35px; }
}

@media (max-width: 800px) {
  .introduction { margin: 20px 22px 45px; padding: 50px 35px; }
  .introduction h2 { font-size: 31px; }
  .introduction .eyebrow:before, .introduction .eyebrow:after { content: ' ◇ '; }
  .directory-section { padding: 0 20px 40px; }
  .directory-row { padding: 20px; }
  .page-introduction { min-height: 250px; padding: 45px 30px; }
  .page-introduction h1 { font-size: 35px; }
  .page-introduction:after { font-size: 140px; right: 15px; top: 30px; }
  .information-page { margin: 35px 25px 55px; padding: 45px 35px; }
  .information-page h1 { font-size: 34px; }
  .detail-story { padding: 28px; }
  .detail-highlights { padding: 28px; }
  .detail-hero>div { padding: 35px; }
  .site-footer nav { padding-left: 16px; }
}

@media (max-width: 480px) {
  .introduction { margin: 20px 15px 35px; padding: 45px 25px; }
  .introduction h2 { font-size: 26px; }
  .introduction .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .introduction:before, .information-page:before { inset: -7px; opacity: .65; }
  .directory-section { padding-left: 14px; padding-right: 14px; }
  .section-heading h2 { font-size: 27px; }
  .game-directory { padding-left: 15px; padding-right: 15px; }
  .directory-row { padding: 16px 14px; }
  .directory-actions { padding-left: 0; justify-content: flex-end; }
  .directory-art { padding: 2px; }
  .page-introduction { margin: 30px 16px 20px; padding: 40px 25px; }
  .page-introduction h1 { font-size: 32px; }
  .page-introduction>p:not(.eyebrow) { font-size: 14px; }
  .information-page { margin: 30px 16px 45px; padding: 40px 25px; }
  .information-page h1 { font-size: 29px; }
  .information-page h2 { font-size: 22px; padding-left: 20px; }
  .information-page>p:not(.eyebrow) { font-size: 14px; }
  .detail-story { padding: 26px 21px; }
  .detail-story h2 { font-size: 23px; }
  .detail-story p { font-size: 14px; }
  .detail-hero>div { padding: 30px 25px; }
  .related-worlds { padding: 25px 20px; }
  .related-worlds h2 { font-size: 26px; }
  .related-worlds>a { margin-left: 0; margin-right: 0; width: 100%; justify-content: space-between; }
  .content-page>.site-footer { padding-left: 25px; padding-right: 25px; }
}