:root {
  --black: #05090b;
  --ink: #0b1215;
  --petrol: #10282e;
  --teal: #1d4247;
  --cyan: #8defff;
  --silver: #bac8ca;
  --mist: #dce5e4;
  --plum: #3a1624;
  --rose: #d2a6b4;
  --line: rgba(186, 200, 202, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--mist); font-family: "DM Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 14px; top: -60px; z-index: 200; background: var(--cyan); color: var(--black); padding: 12px 18px; }
.skip-link:focus { top: 14px; }

.site-header { align-items: center; background: rgba(5, 9, 11, .84); border-bottom: 1px solid var(--line); display: flex; height: 78px; justify-content: space-between; left: 0; padding: 0 5vw; position: absolute; right: 0; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { align-items: center; display: flex; font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; font-weight: 600; gap: 12px; letter-spacing: .12em; }
.brand-mark { filter: invert(92%) sepia(15%) saturate(339%) hue-rotate(127deg) brightness(103%); height: 42px; object-fit: contain; width: 32px; }
.brand small { color: var(--silver); font: 600 9px "DM Sans", sans-serif; letter-spacing: .2em; margin-left: 5px; }
nav { align-items: center; display: flex; font-size: 10px; font-weight: 600; gap: 30px; letter-spacing: .12em; text-transform: uppercase; }
nav a { transition: color .18s ease; }
nav a:hover, nav a:focus-visible { color: var(--cyan); }
.mature-nav { color: var(--rose); }
.nav-cta { border: 1px solid rgba(141,239,255,.55); color: var(--cyan); padding: 10px 18px; }

.hero { height: min(940px, 100vh); min-height: 720px; overflow: hidden; position: relative; }
.hero-art, .hero-shade { height: 100%; inset: 0; position: absolute; width: 100%; }
.hero-art { bottom: 0; height: calc(100% - 78px); top: auto; }
.hero-art img { display: block; height: 100%; object-fit: cover; object-position: center 44%; width: 100%; }
.hero-shade { background: linear-gradient(90deg, rgba(5,9,11,.95) 0%, rgba(5,9,11,.68) 43%, transparent 70%), linear-gradient(0deg, rgba(5,9,11,.63), transparent 45%); }
.hero-copy { left: 7vw; max-width: 670px; position: absolute; top: 53%; transform: translateY(-45%); z-index: 2; }
.eyebrow { align-items: center; color: var(--cyan); display: flex; font-size: 9px; font-weight: 600; gap: 11px; letter-spacing: .22em; margin: 0 0 22px; text-transform: uppercase; }
.eyebrow::before { background: currentColor; content: ""; height: 1px; width: 34px; }
h1, h2, h3, blockquote { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; }
.hero h1, .lore h2, .section-heading h2, .after-dark h2, .follow h2, .age-gate-panel h2 { letter-spacing: -.055em; line-height: .9; margin: 0; }
.hero h1 { font-size: clamp(68px, 7.6vw, 120px); }
.hero h1 em { color: var(--cyan); font-weight: 400; }
.hero h1 .hero-myth { display: inline-block; font-size: .68em; line-height: 1; max-width: 700px; }
.hero-lede { color: rgba(220,229,228,.74); font: 20px/1.55 "Cormorant Garamond", Georgia, serif; margin: 30px 0 36px; max-width: 555px; }
.hero-actions, .social-links { align-items: center; display: flex; flex-wrap: wrap; gap: 26px; }
.button { align-items: center; display: inline-flex; font-size: 11px; font-weight: 600; gap: 28px; justify-content: center; letter-spacing: .08em; padding: 17px 22px; text-transform: uppercase; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--cyan); color: var(--black); }
.button-primary:hover { background: #c2f7ff; }
.text-link { border-bottom: 1px solid rgba(220,229,228,.6); font-size: 11px; letter-spacing: .08em; padding-bottom: 5px; text-transform: uppercase; }
.hero-coordinate { bottom: 25px; color: rgba(220,229,228,.42); font-size: 8px; letter-spacing: .24em; margin: 0; position: absolute; right: 4vw; z-index: 2; }

.section { padding: 125px 7vw; }
.lore { background: radial-gradient(circle at 80% 20%, rgba(29,66,71,.2), transparent 30%), var(--ink); display: grid; gap: 8vw; grid-template-columns: 130px 1fr; }
.section-label { border-top: 1px solid var(--line); padding-top: 13px; }
.section-label span { color: var(--cyan); font: 28px "Cormorant Garamond", serif; }
.section-label p { color: var(--silver); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.lore-copy { max-width: 1000px; }
.lore h2, .section-heading h2, .after-dark h2, .follow h2 { font-size: clamp(50px, 6vw, 86px); }
.lore-columns { display: grid; gap: 65px; grid-template-columns: .8fr 1.2fr; margin-top: 48px; max-width: 900px; }
.lore-columns p { color: rgba(220,229,228,.7); font: 19px/1.6 "Cormorant Garamond", Georgia, serif; margin: 0; }
.lore-columns .lead { color: var(--cyan); font-size: 22px; font-style: italic; }
.lore-columns strong { color: var(--mist); font-weight: 600; }

.realm-lore { background: radial-gradient(circle at 12% 20%, rgba(141,239,255,.07), transparent 28%), #070c0f; border-top: 1px solid var(--line); }
.realm-lore-heading { align-items: end; display: grid; gap: 70px; grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr); }
.realm-lore-heading h2 { font-size: clamp(48px,5.5vw,80px); letter-spacing: -.05em; line-height: .94; margin: 0; }
.realm-lore-heading > p { color: rgba(220,229,228,.65); font: 19px/1.6 "Cormorant Garamond", Georgia, serif; margin: 0; }
.lore-chapter-grid { border-block: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); margin-top: 75px; }
.lore-chapter { padding: 38px 34px 46px; }
.lore-chapter + .lore-chapter { border-left: 1px solid var(--line); }
.chapter-number { color: rgba(141,239,255,.45); font: 32px "Cormorant Garamond", Georgia, serif; margin: 0 0 52px; }
.lore-chapter h3 { color: var(--cyan); font-size: 34px; line-height: 1.02; margin: 0 0 26px; }
.lore-chapter p:not(.chapter-number) { color: rgba(220,229,228,.62); font: 17px/1.62 "Cormorant Garamond", Georgia, serif; }
.realm-lore-closing { align-items: center; display: grid; gap: 32px; grid-template-columns: 68px minmax(0,780px); margin: 70px auto 0; max-width: 930px; }
.realm-lore-closing img { filter: invert(92%) sepia(15%) saturate(339%) hue-rotate(127deg) brightness(103%); height: 78px; object-fit: contain; width: 62px; }
.realm-lore-closing p { color: var(--mist); font: italic 23px/1.45 "Cormorant Garamond", Georgia, serif; margin: 0; }

.oath { align-items: center; background: radial-gradient(circle at center, var(--petrol), var(--black) 68%); border-block: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; min-height: 430px; padding: 80px 20px; text-align: center; }
.oath > span { color: var(--cyan); margin-bottom: 25px; }
.oath blockquote { font-size: clamp(42px, 5vw, 72px); line-height: 1.03; margin: 0; }
.oath em { color: var(--cyan); }
.oath p { color: rgba(186,200,202,.5); font-size: 8px; letter-spacing: .2em; margin-top: 28px; }

.letters { background: #081013; }
.section-heading { align-items: end; display: flex; gap: 60px; justify-content: space-between; }
.section-heading > div { max-width: 760px; }
.section-heading > p { color: rgba(220,229,228,.58); font: 18px/1.55 "Cormorant Garamond", serif; max-width: 350px; }
.letter-grid { border-block: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; }
.letter-card { display: flex; flex-direction: column; min-height: 430px; padding: 32px; position: relative; }
.letter-card + .letter-card { border-left: 1px solid var(--line); }
.letter-card.featured { background: linear-gradient(145deg, rgba(29,66,71,.55), rgba(17,43,48,.12)); }
.featured-tag { background: var(--cyan); color: var(--black); font-size: 8px; font-weight: 700; letter-spacing: .15em; padding: 6px 9px; position: absolute; right: 24px; text-transform: uppercase; top: 24px; }
.card-index { color: rgba(141,239,255,.42); font: 34px "Cormorant Garamond", serif; margin: 0 0 62px; }
.cadence { color: var(--cyan); font-size: 9px; font-weight: 600; letter-spacing: .2em; margin: 0 0 12px; text-transform: uppercase; }
.letter-card h3 { font-size: 37px; line-height: 1; margin: 0; }
.letter-card > p:not(.card-index,.cadence) { color: rgba(220,229,228,.6); font: 17px/1.55 "Cormorant Garamond", serif; }
.letter-card > a { align-items: center; border-top: 1px solid var(--line); display: flex; font-size: 9px; font-weight: 600; justify-content: space-between; letter-spacing: .12em; margin-top: auto; padding-top: 18px; text-transform: uppercase; }
.letter-card > a:hover { color: var(--cyan); }

.free-access-grid { border-block: 1px solid var(--line); margin-top: 70px; }
.free-membership-card { align-items: center; background: linear-gradient(120deg, rgba(29,66,71,.54), rgba(17,43,48,.1)); display: grid; gap: 45px; grid-template-columns: 130px minmax(0,1fr) auto; min-height: 310px; padding: 42px; }
.free-membership-card .card-index { margin: 0 0 40px; }
.free-tag { background: var(--cyan); color: var(--black); display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .14em; padding: 7px 10px; text-transform: uppercase; }
.free-membership-copy h3 { font-size: clamp(40px,4.5vw,64px); line-height: .95; margin: 8px 0 18px; }
.free-membership-copy > p:last-child { color: rgba(220,229,228,.65); font: 18px/1.55 "Cormorant Garamond", Georgia, serif; margin: 0; max-width: 650px; }

.interior-header { position: fixed; }
.inner-hero { background: radial-gradient(circle at 58% 45%, rgba(29,66,71,.34), transparent 34%), var(--black); display: grid; grid-template-columns: minmax(0,3fr) minmax(360px,2fr); min-height: 720px; overflow: hidden; padding-top: 78px; position: relative; }
.inner-hero-copy { align-self: center; grid-column: 1; grid-row: 1; max-width: 760px; padding: 70px 7vw 80px 8vw; position: relative; z-index: 2; }
.inner-hero-copy h1 { font-size: clamp(66px,7.3vw,112px); letter-spacing: -.055em; line-height: .88; margin: 0; }
.inner-hero-copy h1 em { color: var(--cyan); }
.inner-hero-copy > p:last-child { color: rgba(220,229,228,.7); font: 20px/1.55 "Cormorant Garamond", Georgia, serif; max-width: 540px; }
.inner-hero-art { align-self: stretch; border-left: 1px solid var(--line); grid-column: 2; grid-row: 1; margin: 0; min-height: 642px; overflow: hidden; position: relative; }
.inner-hero-art::after { background: linear-gradient(90deg, rgba(5,9,11,.42), transparent 18%), linear-gradient(0deg, rgba(5,9,11,.48), transparent 28%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.inner-hero-art img { height: 100%; object-fit: cover; object-position: center 47%; width: 100%; }
.story-section { background: var(--ink); padding: 120px 9vw; }
.story-section + .story-section { border-top: 1px solid var(--line); }
.story-kicker { color: var(--cyan); font-size: 9px; font-weight: 600; letter-spacing: .2em; margin: 0 0 26px; text-transform: uppercase; }
.story-section h2 { font-size: clamp(52px,6.5vw,92px); letter-spacing: -.05em; line-height: .9; margin: 0; }
.story-columns { display: grid; gap: 8vw; grid-template-columns: minmax(240px,.75fr) minmax(320px,1.25fr); margin-top: 60px; max-width: 1050px; }
.story-columns p { color: rgba(220,229,228,.64); font: 19px/1.65 "Cormorant Garamond", Georgia, serif; }
.story-columns .story-lead { color: var(--cyan); font-size: 23px; font-style: italic; margin-top: 0; }
.story-columns strong { color: var(--mist); }
.story-band { align-items: center; background: radial-gradient(circle at center, var(--petrol), var(--black) 70%); border-block: 1px solid var(--line); display: flex; flex-direction: column; min-height: 430px; justify-content: center; padding: 80px 20px; text-align: center; }
.story-band blockquote { font-size: clamp(42px,5.5vw,76px); line-height: 1; margin: 0; }
.story-band em { color: var(--cyan); }
.story-band p { color: rgba(186,200,202,.48); font-size: 8px; letter-spacing: .2em; margin-top: 28px; }
.conspiracy-section { background: radial-gradient(circle at 85% 15%, rgba(58,22,36,.4), transparent 34%), #090d10; }
.open-realm-cta { align-items: center; background: var(--petrol); display: flex; flex-direction: column; padding: 115px 20px; text-align: center; }
.open-realm-cta > img { filter: invert(92%) sepia(15%) saturate(339%) hue-rotate(127deg) brightness(103%); height: 100px; margin-bottom: 30px; object-fit: contain; width: 86px; }
.open-realm-cta h2 { font-size: clamp(52px,6vw,82px); letter-spacing: -.05em; line-height: .95; margin: 0; }
.open-realm-cta > p:not(.eyebrow) { color: rgba(220,229,228,.65); font: 20px "Cormorant Garamond", Georgia, serif; }

.after-dark { background: linear-gradient(135deg, rgba(58,22,36,.65), transparent 40%), var(--black); border-block: 1px solid rgba(210,166,180,.18); display: grid; gap: 6vw; grid-template-columns: 130px 1fr; }
.age-seal { align-items: center; border: 1px solid rgba(210,166,180,.45); border-radius: 50%; color: var(--rose); display: flex; flex-direction: column; height: 110px; justify-content: center; width: 110px; }
.age-seal strong { font: 34px "Cormorant Garamond", serif; }
.age-seal span { font-size: 7px; letter-spacing: .13em; }
.after-dark-intro { max-width: 860px; }
.after-dark-intro .eyebrow { color: var(--rose); }
.after-dark-intro > p:last-child { color: rgba(220,229,228,.6); font: 19px/1.55 "Cormorant Garamond", serif; max-width: 590px; }
.mature-grid { display: grid; gap: 18px; grid-column: 2; grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
.mature-card { align-items: center; background: rgba(58,22,36,.18); border: 1px solid rgba(210,166,180,.22); color: var(--mist); cursor: pointer; display: grid; gap: 18px; grid-template-columns: auto 1fr auto; padding: 24px; text-align: left; transition: background .16s ease, border-color .16s ease; }
.mature-card:hover, .mature-card:focus-visible { background: rgba(58,22,36,.38); border-color: rgba(210,166,180,.5); }
.lock, .mature-card b { color: var(--rose); }
.mature-card span:nth-child(2) { display: flex; flex-direction: column; }
.mature-card small { color: var(--rose); font-size: 7px; letter-spacing: .15em; }
.mature-card strong { font: 28px "Cormorant Garamond", serif; margin: 5px 0; }
.mature-card em { color: rgba(220,229,228,.52); font: normal 15px/1.4 "Cormorant Garamond", serif; }
.age-note { color: rgba(220,229,228,.42); font-size: 8px; grid-column: 2; letter-spacing: .06em; max-width: 680px; }

.follow { align-items: center; background: radial-gradient(circle at 50% 0%, rgba(141,239,255,.1), transparent 38%), var(--petrol); display: flex; flex-direction: column; padding: 120px 20px; text-align: center; }
.follow-logo { filter: invert(92%) sepia(15%) saturate(339%) hue-rotate(127deg) brightness(103%); height: 105px; margin-bottom: 30px; object-fit: contain; width: 92px; }
.follow > p:not(.eyebrow) { color: rgba(220,229,228,.63); font: 20px "Cormorant Garamond", serif; }
.social-links { justify-content: center; margin-top: 24px; }
.button-light { background: var(--mist); color: var(--black); }
.button-outline { border: 1px solid rgba(141,239,255,.5); color: var(--cyan); }

footer { align-items: center; background: #030607; color: rgba(186,200,202,.5); display: grid; font-size: 8px; grid-template-columns: 1fr 1fr 1fr; letter-spacing: .1em; padding: 28px 5vw; text-transform: uppercase; }
footer > p:nth-child(2) { text-align: center; }
footer > p:last-child { text-align: right; }

.age-gate[hidden] { display: none; }
.age-gate { align-items: center; background: rgba(3,5,6,.92); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 100; }
.age-gate-panel { background: linear-gradient(145deg, rgba(58,22,36,.35), transparent 45%), var(--ink); border: 1px solid rgba(210,166,180,.35); box-shadow: 0 30px 90px rgba(0,0,0,.6); max-width: 610px; padding: 55px; }
.age-gate-panel .eyebrow { color: var(--rose); }
.age-gate-panel h2 { font-size: clamp(46px,6vw,68px); }
.age-gate-panel > p:not(.eyebrow) { color: rgba(220,229,228,.65); font: 18px/1.55 "Cormorant Garamond", serif; }
.gate-actions { display: flex; gap: 12px; margin-top: 30px; }
.gate-actions button, .gate-actions a { border: 1px solid var(--line); cursor: pointer; font-size: 9px; font-weight: 600; letter-spacing: .1em; padding: 14px 18px; text-transform: uppercase; }
.gate-actions button { background: transparent; color: var(--mist); }
.gate-actions a { background: var(--rose); color: var(--black); }

@media (max-width: 1050px) { .mature-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  nav a:not(.nav-cta) { display: none; }
  .hero { height: 850px; }
  .hero-art img { object-position: 70% 42%; }
  .hero-shade { background: linear-gradient(0deg, rgba(5,9,11,.96), rgba(5,9,11,.55) 58%, transparent); }
  .hero-copy { bottom: 58px; left: 6vw; max-width: 88%; top: auto; transform: none; }
  .hero h1 { font-size: clamp(60px,16vw,92px); }
  .hero-coordinate { display: none; }
  .lore, .after-dark { gap: 36px; grid-template-columns: 1fr; }
  .realm-lore-heading, .lore-chapter-grid { grid-template-columns: 1fr; }
  .free-membership-card { align-items: start; grid-template-columns: 110px 1fr; }
  .free-membership-card > .button { grid-column: 2; justify-self: start; }
  .inner-hero { grid-template-columns: 1fr; min-height: 0; }
  .inner-hero-copy { grid-column: 1; grid-row: 1; max-width: none; padding: 80px 7vw 56px; }
  .inner-hero-art { border-left: 0; border-top: 1px solid var(--line); grid-column: 1; grid-row: 2; height: 520px; min-height: 0; }
  .inner-hero-art img { object-position: center 42%; }
  .story-columns { gap: 30px; grid-template-columns: 1fr; }
  .lore-chapter + .lore-chapter { border-left: 0; border-top: 1px solid var(--line); }
  .lore-columns, .letter-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .letter-card + .letter-card { border-left: 0; border-top: 1px solid var(--line); }
  .mature-grid, .age-note { grid-column: 1; }
  footer { gap: 20px; grid-template-columns: 1fr; text-align: center; }
  footer > p:nth-child(2), footer > p:last-child { text-align: center; }
  footer .brand { justify-content: center; }
}
@media (max-width: 540px) {
  .site-header { padding-inline: 20px; }
  .brand { font-size: 17px; }
  .brand small { display: none; }
  .hero-actions, .gate-actions { align-items: stretch; flex-direction: column; }
  .section { padding: 90px 7vw; }
  .age-gate-panel { padding: 36px 26px; }
  .realm-lore-closing { grid-template-columns: 1fr; text-align: center; }
  .realm-lore-closing img { margin: 0 auto; }
  .free-membership-card { grid-template-columns: 1fr; padding: 34px 26px; }
  .free-membership-card > .button { grid-column: 1; }
  .inner-hero-copy h1 { font-size: clamp(58px,16vw,82px); }
  .inner-hero-art { height: 430px; }
  .story-section { padding: 90px 7vw; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

/* Keep the Lore introduction on the left and its image on the right */
@media (min-width: 901px) {
  .inner-hero {
    display: grid;
    grid-template-columns: 60% 40%;
  }

  .inner-hero-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .inner-hero-art {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    width: 100%;
  }

  .inner-hero-art img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
/* Force the Lore image onto the right side */
@media (min-width: 901px) {
  .inner-hero {
    display: block;
    min-height: 720px;
    padding-right: 40%;
    padding-top: 78px;
    position: relative;
  }

  .inner-hero-copy {
    max-width: none;
    position: relative;
    width: 100%;
  }

  .inner-hero-art {
    bottom: 0;
    left: auto;
    margin: 0;
    position: absolute;
    right: 0;
    top: 78px;
    width: 40%;
  }

  .inner-hero-art img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}