:root{
  --night:#090d18;
  --night2:#11182a;
  --ink:#171821;
  --paper:#f6efd9;
  --paper2:#e8dcc0;

  --violet:#7560d8;
  --teal:#4fc9c4;
  --rose:#d85e90;
  --gold:#e7b95f;
  --blue:#76a8e9;
  --green:#8ecf9c;

  --text:#f8f5ff;
  --muted:#b7b0c3;
  --line:rgba(255,255,255,.11);
  --max:1180px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  max-width:100%;
}

body{
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  color:var(--text);

  background:
    radial-gradient(circle at 10% 0%,rgba(117,96,216,.12),transparent 26%),
    radial-gradient(circle at 90% 12%,rgba(79,201,196,.08),transparent 24%),
    linear-gradient(180deg,#080c16 0%,#0c1220 45%,#080c16 100%);

  line-height:1.6;
  overflow-x:hidden;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(var(--max),calc(100% - 34px));
  margin:auto;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

h1,
h2,
h3,
p,
a,
span,
div{
  overflow-wrap:break-word;
}

/* =========================================================
   HEADER
   ========================================================= */

header{
  position:sticky;
  top:0;
  z-index:40;

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  background:rgba(9,14,28,.78);
  border-bottom:1px solid var(--line);

  font-family:"Trebuchet MS",Inter,system-ui,sans-serif;
}

.nav{
  min-height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}

.brand{
  display:flex;
  align-items:center;

  gap:12px;

  font-weight:900;
}

.brand-symbol{
  width:44px;
  height:44px;

  flex:0 0 44px;

  border-radius:50%;

  display:grid;
  place-items:center;

  color:var(--night);

  background:
    linear-gradient(
      145deg,
      var(--gold),
      #ffe2a6
    );

  box-shadow:
    0 0 0 5px
    rgba(240,197,106,.08);
}

.brand small{
  display:block;

  font-size:.62rem;

  color:var(--teal);

  letter-spacing:.16em;
  text-transform:uppercase;
}

nav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

nav a{
  padding:9px 12px;

  border-radius:999px;

  color:#ded8ec;

  font-size:.9rem;
}

nav a:hover,
nav a:focus-visible{
  background:rgba(255,255,255,.06);
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;

  min-height:calc(100vh - 76px);

  display:grid;
  grid-template-columns:1.05fr .95fr;

  overflow:hidden;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}

.hero-copy{
  padding:
    86px
    54px
    80px
    max(
      28px,
      calc((100vw - var(--max))/2)
    );

  display:flex;
  flex-direction:column;
  justify-content:center;

  position:relative;
  z-index:2;
}

.hero-copy::before{
  content:"";

  position:absolute;

  left:0;
  top:12%;

  width:5px;
  height:76%;

  background:
    linear-gradient(
      var(--violet),
      var(--teal),
      var(--gold)
    );

  opacity:.7;
}

.kicker{
  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  color:var(--teal);

  text-transform:uppercase;
  letter-spacing:.22em;

  font-size:.68rem;
  font-weight:900;
}

.hero h1{
  margin-top:18px;

  font-family:
    "Palatino Linotype",
    "Book Antiqua",
    Palatino,
    Georgia,
    serif;

  font-size:
    clamp(
      4.3rem,
      8.4vw,
      8.3rem
    );

  line-height:.79;

  font-weight:700;

  letter-spacing:-.055em;
}

.hero h1 em{
  display:block;

  color:var(--gold);

  font-style:italic;
  font-weight:400;
}

.hero-lead{
  margin-top:28px;

  max-width:680px;

  color:#c9c1d0;

  font-size:1.15rem;
}

.hero-claim{
  margin-top:24px;

  max-width:560px;

  color:#f5e5bd;

  font-style:italic;
  font-size:1.08rem;
}

.hero-actions{
  margin-top:32px;

  display:flex;

  gap:12px;

  flex-wrap:wrap;
}

.hero-actions-start{
  justify-content:flex-start;
}

.btn{
  min-height:49px;

  padding:0 20px;

  border-radius:999px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-weight:900;

  border:
    1px solid
    rgba(255,255,255,.12);
}

.btn.primary{
  background:var(--paper);
  color:var(--ink);
}

.btn.secondary{
  background:rgba(255,255,255,.04);
}

.btn-membership{
  border-color:#222;
}

.btn:hover,
.btn:focus-visible{
  filter:brightness(1.05);
}

.hero-portal{
  position:relative;

  display:grid;
  place-items:center;

  min-height:calc(100vh - 76px);

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(79,201,196,.12),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #12182b,
      #0a0e1a
    );

  overflow:hidden;
}

.hero-portal::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(
      circle at 20% 20%,
      rgba(255,255,255,.35) 0 1px,
      transparent 1.2px
    ),
    radial-gradient(
      circle at 75% 15%,
      rgba(255,255,255,.2) 0 1px,
      transparent 1.2px
    ),
    radial-gradient(
      circle at 60% 70%,
      rgba(255,255,255,.2) 0 1px,
      transparent 1.2px
    );

  background-size:
    130px 130px,
    170px 170px,
    210px 210px;

  opacity:.38;
}

.portal-arch{
  width:min(430px,75%);

  aspect-ratio:.72;

  border-radius:
    48% 48% 8% 8%
    /
    38% 38% 5% 5%;

  border:18px solid #d9c58f;

  box-shadow:
    0 0 0 4px #8f7650,
    0 0 0 22px rgba(231,185,95,.06),
    0 28px 60px rgba(0,0,0,.45);

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #5f5bc4 0%,
      #7e72d3 32%,
      #4aa3bb 67%,
      #0f263c 100%
    );
}

.portal-arch::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 30% 20%,
      #fff 0 1px,
      transparent 1.3px
    ),
    radial-gradient(
      circle at 70% 28%,
      #fff 0 1px,
      transparent 1.2px
    ),
    radial-gradient(
      circle at 55% 12%,
      #fff 0 1px,
      transparent 1.2px
    );

  background-size:120px 120px;

  opacity:.6;
}

.portal-arch::after{
  content:"";

  position:absolute;

  left:-10%;
  right:-10%;
  bottom:-1px;

  height:46%;

  background:#101827;

  clip-path:
    polygon(
      0 100%,
      0 75%,
      8% 67%,
      15% 72%,
      22% 48%,
      31% 63%,
      39% 34%,
      49% 59%,
      58% 40%,
      66% 61%,
      77% 36%,
      87% 70%,
      100% 57%,
      100% 100%
    );
}

.castle{
  position:absolute;

  left:50%;
  bottom:22%;

  transform:translateX(-50%);

  width:150px;
  height:160px;

  z-index:2;

  background:#1c2438;

  clip-path:
    polygon(
      8% 100%,
      8% 50%,
      21% 50%,
      21% 35%,
      31% 35%,
      31% 15%,
      41% 15%,
      41% 0,
      49% 0,
      49% 27%,
      60% 27%,
      60% 44%,
      69% 44%,
      69% 27%,
      78% 27%,
      78% 51%,
      91% 51%,
      91% 100%
    );

  box-shadow:
    0 0 35px
    rgba(255,255,255,.08);
}

.portal-label{
  position:absolute;

  bottom:38px;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.64rem;

  color:#bcb6cd;
}

/* =========================================================
   GENRES
   ========================================================= */

.genre-strip{
  background:var(--paper);

  color:var(--ink);

  border-bottom:
    1px solid
    #bbaa86;
}

.genre-strip .container{
  min-height:70px;

  display:grid;

  grid-template-columns:
    repeat(6,1fr);
}

.genre-chip{
  display:flex;

  align-items:center;
  justify-content:center;

  gap:9px;

  border-right:
    1px solid
    #cfc2a4;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:.72rem;
  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.08em;
}

.genre-chip:first-child{
  border-left:
    1px solid
    #cfc2a4;
}

.genre-chip span{
  font-family:
    Georgia,
    serif;

  font-size:1rem;
}

/* =========================================================
   CODEX
   ========================================================= */

.codex{
  padding:100px 0;
}

.codex-grid{
  display:grid;

  grid-template-columns:
    360px 1fr;

  gap:70px;

  align-items:start;
}

.codex-aside{
  position:sticky;
  top:110px;
}

.section-no{
  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  color:var(--teal);

  font-size:.68rem;
  font-weight:1000;

  letter-spacing:.18em;

  text-transform:uppercase;
}

.section-no-membership{
  color:#6951c5;
}

.codex-aside h2{
  margin-top:12px;

  font-size:
    clamp(
      2.8rem,
      5vw,
      4.9rem
    );

  line-height:.88;

  font-weight:700;
}

.codex-aside p{
  margin-top:20px;

  color:var(--muted);
}

.codex-pages{
  border-left:
    1px solid
    rgba(255,255,255,.12);

  padding-left:42px;
}

.entry{
  display:grid;

  grid-template-columns:
    70px 1fr;

  gap:22px;

  padding:0 0 42px;

  margin-bottom:42px;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);
}

.entry:last-child{
  margin-bottom:0;
}

.entry-num{
  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:.74rem;
  font-weight:1000;

  color:var(--gold);

  letter-spacing:.15em;
}

.entry h3{
  font-size:2rem;

  line-height:1;

  font-weight:700;
}

.entry p{
  margin-top:12px;

  color:#bdb5c7;

  max-width:700px;
}

.entry-quote{
  margin-top:14px;

  color:#e8d7ad;

  font-style:italic;
}

/* =========================================================
   WORLDS
   ========================================================= */

.worlds{
  padding:100px 0;

  background:#0e1427;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}

.worlds-head{
  display:flex;

  justify-content:space-between;

  gap:34px;

  align-items:end;

  margin-bottom:38px;
}

.worlds-head h2{
  font-size:
    clamp(
      3rem,
      5vw,
      5rem
    );

  line-height:.88;
}

.worlds-head p{
  max-width:520px;

  color:var(--muted);
}

.world-rack{
  display:grid;

  grid-template-columns:
    repeat(6,1fr);

  gap:10px;

  min-height:560px;
}

.world{
  border-radius:26px;

  padding:24px 18px;

  position:relative;

  overflow:hidden;

  display:flex;

  flex-direction:column;
  justify-content:flex-end;

  color:#111827;

  transition:
    transform .25s ease;
}

.world:hover{
  transform:translateY(-8px);
}

.world::before{
  content:attr(data-symbol);

  position:absolute;

  top:32px;
  left:50%;

  transform:translateX(-50%);

  font-size:4rem;

  opacity:.18;

  font-family:
    Georgia,
    serif;
}

.world h3{
  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  writing-mode:vertical-rl;

  transform:rotate(180deg);

  font-size:1.2rem;

  text-transform:uppercase;

  letter-spacing:.08em;

  min-height:170px;
}

.world small{
  margin-top:16px;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:.65rem;
  font-weight:900;
}

.w1{
  background:var(--violet);
  color:white;
}

.w2{
  background:var(--teal);
}

.w3{
  background:var(--rose);
}

.w4{
  background:var(--gold);
}

.w5{
  background:var(--green);
}

.w6{
  background:var(--blue);
}

/* =========================================================
   QUEST
   ========================================================= */

.quest{
  padding:100px 0;
}

.quest-map{
  margin-top:36px;

  background:var(--paper);

  color:var(--ink);

  border:
    1px solid
    #b8a77f;

  border-radius:32px;

  padding:44px;

  position:relative;

  overflow:hidden;
}

.quest-map::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(20,20,20,.045) 0 1px,
      transparent 1.2px
    );

  background-size:34px 34px;

  opacity:.4;
}

.quest-title{
  position:relative;

  z-index:2;

  display:flex;

  justify-content:space-between;

  gap:30px;

  align-items:flex-end;
}

.quest-title h2{
  font-size:
    clamp(
      3rem,
      5vw,
      5rem
    );

  line-height:.88;
}

.quest-title p{
  max-width:480px;

  color:#5e5665;
}

.route{
  position:relative;

  z-index:2;

  margin-top:50px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:24px;
}

.route::before{
  content:"";

  position:absolute;

  top:32px;

  left:8%;
  right:8%;

  border-top:
    2px dashed
    #9b8b68;

  z-index:-1;
}

.stop{
  text-align:center;
}

.stop-icon{
  width:64px;
  height:64px;

  margin:auto;

  border-radius:50%;

  display:grid;
  place-items:center;

  border:
    3px solid
    var(--ink);

  background:var(--paper);

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-weight:1000;
}

.stop:nth-child(1) .stop-icon{
  background:var(--violet);
  color:white;
}

.stop:nth-child(2) .stop-icon{
  background:var(--rose);
}

.stop:nth-child(3) .stop-icon{
  background:var(--gold);
}

.stop:nth-child(4) .stop-icon{
  background:var(--teal);
}

.stop h3{
  margin-top:18px;

  font-size:1.25rem;
}

.stop p{
  margin-top:7px;

  color:#665e6b;

  font-size:.9rem;
}

/* =========================================================
   MEMBERSHIP
   ========================================================= */

.membership{
  padding:100px 0;

  background:#0f1528;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}

.ticket{
  display:grid;

  grid-template-columns:
    1fr 300px;

  border-radius:30px;

  overflow:hidden;

  border:
    1px solid
    #c0ae83;

  background:var(--paper);

  color:var(--ink);
}

.ticket-main{
  padding:44px;

  position:relative;
}

.ticket-main::before{
  content:attr(data-pass-label);

  position:absolute;

  top:22px;
  right:26px;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:.62rem;
  font-weight:1000;

  letter-spacing:.18em;

  color:#85775a;
}

.ticket-main h2{
  font-size:
    clamp(
      3rem,
      5vw,
      4.8rem
    );

  line-height:.88;
}

.ticket-main p{
  margin-top:18px;

  color:#575060;

  max-width:650px;
}

.ticket-side{
  background:
    linear-gradient(
      145deg,
      var(--violet),
      #5542b5
    );

  color:white;

  border-left:
    2px dashed
    rgba(255,255,255,.45);

  display:grid;
  place-items:center;

  text-align:center;

  padding:30px;
}

.ticket-side strong{
  display:block;

  font-size:4rem;

  line-height:1;
}

.ticket-side span{
  display:block;

  margin-top:10px;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  text-transform:uppercase;

  font-size:.72rem;
  font-weight:900;

  letter-spacing:.12em;
}

/* =========================================================
   COMMUNITY
   ========================================================= */

.community{
  padding:
    100px 0 115px;
}

.board{
  background:#6d5135;

  border:
    14px solid
    #3b2b1c;

  border-radius:18px;

  padding:28px;

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.28);

  position:relative;
}

.board-grid{
  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:24px;
}

.note{
  background:#fff8df;

  color:#1a1820;

  padding:28px;

  min-height:260px;

  box-shadow:
    0 8px 18px
    rgba(0,0,0,.18);

  position:relative;
}

.note:first-child{
  transform:rotate(-1deg);
}

.note:nth-child(2){
  transform:rotate(1.2deg);

  background:#e6f8f4;
}

.pin{
  width:16px;
  height:16px;

  border-radius:50%;

  background:var(--rose);

  position:absolute;

  top:14px;
  left:50%;

  transform:translateX(-50%);

  box-shadow:
    0 2px 4px
    rgba(0,0,0,.3);
}

.pin-teal{
  background:var(--teal);
}

.note h3{
  margin-top:12px;

  font-size:1.7rem;
}

.note p{
  margin-top:12px;

  color:#4c4652;
}

.note a,
.note-link-disabled{
  display:inline-block;

  margin-top:22px;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-weight:1000;

  color:#5c48bd;
}

.note-link-disabled{
  opacity:.6;
}

.board-contact{
  margin-top:24px;

  background:#f3cb68;

  color:#1a1820;

  padding:22px;

  transform:rotate(-.3deg);

  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:24px;

  flex-wrap:wrap;
}

.board-contact h3{
  font-size:1.5rem;
}

.contact-links{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}

.contact-links a{
  padding:9px 12px;

  border:
    2px solid
    #1a1820;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:.75rem;
  font-weight:1000;

  text-transform:uppercase;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  padding:
    30px 0 40px;

  border-top:
    1px solid
    var(--line);

  color:#777184;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:.82rem;
}

.footer-inner{
  display:flex;

  justify-content:space-between;

  gap:18px;

  flex-wrap:wrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .hero{
    grid-template-columns:
      1fr 1fr;
  }

  .hero-copy{
    padding-left:32px;
    padding-right:32px;
  }

  .hero h1{
    font-size:
      clamp(
        3.8rem,
        8vw,
        6.5rem
      );
  }

  .portal-arch{
    width:min(390px,78%);
  }

  .codex-grid{
    grid-template-columns:
      300px 1fr;

    gap:46px;
  }

  .world-rack{
    gap:8px;
  }

  .world{
    padding:20px 14px;
  }

  .ticket{
    grid-template-columns:
      1fr 270px;
  }
}

@media(max-width:1000px){

  nav{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;
  }

  .hero-copy{
    padding:
      76px 28px;
  }

  .hero-portal{
    min-height:620px;
  }

  .codex-grid{
    grid-template-columns:1fr;

    gap:36px;
  }

  .codex-aside{
    position:static;
  }

  .codex-pages{
    border-left:0;

    padding-left:0;
  }

  .world-rack{
    grid-template-columns:
      repeat(3,1fr);
  }

  .world h3{
    writing-mode:horizontal-tb;

    transform:none;

    min-height:0;
  }

  .world{
    min-height:240px;
  }

  .ticket{
    grid-template-columns:1fr;
  }

  .ticket-side{
    border-left:0;

    border-top:
      2px dashed
      rgba(255,255,255,.45);
  }
}

@media(max-width:900px){

  .nav{
    min-height:72px;
  }

  nav{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;

    min-height:auto;
  }

  .hero-copy{
    padding:
      72px 28px 54px;

    text-align:left;
  }

  .hero-copy::before{
    height:70%;
    top:15%;
  }

  .hero h1{
    font-size:
      clamp(
        3.8rem,
        13vw,
        6.5rem
      );
  }

  .hero-portal{
    min-height:560px;
  }

  .portal-arch{
    width:
      min(
        380px,
        68vw
      );
  }

  .genre-strip .container{
    grid-template-columns:
      repeat(3,1fr);
  }

  .genre-chip{
    min-height:62px;

    border-bottom:
      1px solid
      #cfc2a4;
  }

  .codex-grid{
    grid-template-columns:1fr;

    gap:38px;
  }

  .codex-aside{
    position:static;
  }

  .codex-pages{
    border-left:0;

    padding-left:0;
  }

  .worlds-head{
    flex-direction:column;

    align-items:flex-start;
  }

  .worlds-head p{
    max-width:720px;
  }

  .world-rack{
    grid-template-columns:
      repeat(3,1fr);

    min-height:0;
  }

  .world{
    min-height:280px;
  }

  .world h3{
    writing-mode:horizontal-tb;

    transform:none;

    min-height:0;
  }

  .quest-title{
    flex-direction:column;

    align-items:flex-start;
  }

  .quest-title p{
    max-width:720px;
  }

  .route{
    grid-template-columns:
      repeat(2,1fr);

    gap:
      30px 24px;
  }

  .route::before{
    display:none;
  }

  .ticket{
    grid-template-columns:1fr;
  }

  .ticket-side{
    border-left:0;

    border-top:
      2px dashed
      rgba(255,255,255,.45);

    min-height:220px;
  }

  .board-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){

  .genre-strip .container{
    grid-template-columns:
      repeat(2,1fr);
  }

  .genre-chip{
    min-height:58px;

    border-bottom:
      1px solid
      #cfc2a4;
  }

  .story,
  .codex,
  .worlds,
  .quest,
  .membership,
  .community{
    padding-top:76px;
    padding-bottom:76px;
  }

  .worlds-head,
  .quest-title{
    flex-direction:column;

    align-items:flex-start;
  }

  .world-rack{
    grid-template-columns:
      1fr 1fr;
  }

  .route{
    grid-template-columns:1fr;
  }

  .route::before{
    display:none;
  }

  .stop{
    text-align:left;

    display:grid;

    grid-template-columns:
      70px 1fr;

    column-gap:14px;
  }

  .stop-icon{
    margin:0;

    grid-row:
      span 2;
  }

  .stop h3{
    margin-top:4px;
  }

  .board-grid{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:
      clamp(
        3.7rem,
        17vw,
        5.2rem
      );
  }
}

@media(max-width:640px){

  .container{
    width:
      min(
        100% - 24px,
        var(--max)
      );
  }

  header{
    position:sticky;
  }

  .nav{
    min-height:68px;
  }

  .brand{
    gap:10px;
  }

  .brand-symbol{
    width:40px;
    height:40px;

    flex:
      0 0 40px;
  }

  .brand > div:last-child{
    min-width:0;

    font-size:.92rem;

    line-height:1.18;
  }

  .brand small{
    font-size:.56rem;

    letter-spacing:.12em;

    margin-top:3px;
  }

  .hero-copy{
    padding:
      64px 22px 46px;
  }

  .hero-copy::before{
    left:0;

    width:4px;
  }

  .kicker{
    font-size:.61rem;

    letter-spacing:.16em;
  }

  .hero h1{
    font-size:
      clamp(
        3.2rem,
        17vw,
        5.2rem
      );

    line-height:.82;
  }

  .hero-lead{
    font-size:1.02rem;
  }

  .hero-claim{
    font-size:1rem;
  }

  .hero-actions{
    flex-direction:column;

    align-items:stretch;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-portal{
    min-height:500px;
  }

  .portal-arch{
    width:
      min(
        330px,
        75vw
      );

    border-width:14px;
  }

  .castle{
    width:130px;
    height:145px;
  }

  .portal-label{
    bottom:28px;
  }

  .genre-strip .container{
    width:100%;

    grid-template-columns:
      repeat(2,1fr);
  }

  .genre-chip{
    border-left:
      0 !important;

    min-height:58px;

    padding:
      0 8px;

    font-size:.67rem;
  }

  .codex,
  .worlds,
  .quest,
  .membership,
  .community{
    padding-top:72px;
    padding-bottom:72px;
  }

  .story{
    padding-top:72px;
    padding-bottom:72px;
  }

  .codex-aside h2,
  .worlds-head h2,
  .quest-title h2,
  .ticket-main h2,
  .section-title{
    font-size:
      clamp(
        2.5rem,
        12vw,
        4rem
      );
  }

  .entry{
    grid-template-columns:1fr;

    gap:10px;

    padding-bottom:30px;

    margin-bottom:30px;
  }

  .entry h3{
    font-size:1.65rem;
  }

  .world-rack{
    grid-template-columns:
      repeat(2,1fr);
  }

  .world{
    min-height:220px;
  }

  .world::before{
    font-size:3.4rem;

    top:22px;
  }

  .world h3{
    font-size:1rem;

    line-height:1.12;
  }

  .world small{
    font-size:.59rem;
  }

  .quest-map{
    padding:
      28px 20px;

    border-radius:24px;
  }

  .route{
    grid-template-columns:1fr;

    gap:20px;
  }

  .stop{
    display:grid;

    grid-template-columns:
      64px 1fr;

    gap:
      0 14px;

    text-align:left;

    align-items:start;
  }

  .stop-icon{
    margin:0;

    grid-row:
      1 / span 2;
  }

  .stop h3{
    margin-top:3px;
  }

  .stop p{
    margin-top:5px;
  }

  .ticket{
    border-radius:24px;
  }

  .ticket-main{
    padding:
      32px 24px;
  }

  .ticket-main::before{
    position:static;

    display:block;

    margin-bottom:18px;
  }

  .ticket-side{
    min-height:190px;
  }

  .board{
    padding:18px;

    border-width:10px;
  }

  .note{
    padding:
      24px 20px;

    min-height:230px;
  }

  .board-contact{
    flex-direction:column;

    align-items:flex-start;
  }

  .contact-links{
    width:100%;
  }

  .contact-links a{
    flex:
      1 1 auto;

    text-align:center;
  }

  footer{
    padding-top:26px;
    padding-bottom:32px;
  }

  .footer-inner{
    flex-direction:column;

    gap:8px;
  }
}

@media(max-width:480px){

  .world-rack{
    grid-template-columns:1fr;
  }
}

@media(max-width:420px){

  .container{
    width:
      min(
        100% - 18px,
        var(--max)
      );
  }

  .brand > div:last-child{
    font-size:.84rem;
  }

  .brand small{
    font-size:.5rem;
  }

  .hero-copy{
    padding-left:18px;
    padding-right:18px;
  }

  .hero h1{
    font-size:
      clamp(
        2.85rem,
        17.5vw,
        4.5rem
      );
  }

  .hero-portal{
    min-height:440px;
  }

  .portal-arch{
    width:
      min(
        285px,
        78vw
      );

    border-width:12px;
  }

  .castle{
    width:112px;
    height:128px;
  }

  .world-rack{
    grid-template-columns:1fr;
  }

  .world{
    min-height:185px;
  }

  .genre-strip .container{
    grid-template-columns:
      1fr 1fr;
  }

  .genre-chip{
    font-size:.63rem;
  }

  .ticket-side strong{
    font-size:3.4rem;
  }

  .board{
    padding:14px;

    border-width:8px;
  }

  .note{
    padding:
      22px 18px;
  }
}
.site-footer-links {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px 22px;

    align-items: center;
}

.site-footer-links a {
    color: inherit;

    text-decoration: underline;

    text-underline-offset: 4px;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: var(--gold);
}

@media(max-width: 640px) {
    .site-footer-links {
        align-items: flex-start;

        flex-direction: column;
    }
}