@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --public-ivory: #f5f1e7;
  --public-paper: #fbf8f0;
  --public-jade: #0d5348;
  --public-jade-deep: #073b35;
  --public-gold: #b78b38;
  --public-ink: #153b35;
  --public-muted: #61716b;
  --public-line: rgba(13, 83, 72, .15);
  --public-shadow: 0 24px 70px rgba(31, 67, 58, .12);
}

html { scroll-behavior: smooth; background: var(--public-ivory); }

body.about-body,
body.features-body,
body.world-body,
body.cooperation-body,
body.faq-body {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--public-ivory);
  color: var(--public-ink);
  font-family: Manrope, system-ui, sans-serif;
  line-height: 1.58;
}

body.about-body h1, body.about-body h2, body.about-body h3,
body.features-body h1, body.features-body h2, body.features-body h3,
body.world-body h1, body.world-body h2, body.world-body h3,
body.cooperation-body h1, body.cooperation-body h2, body.cooperation-body h3,
body.faq-body h1, body.faq-body h2, body.faq-body h3 {
  color: var(--public-jade-deep);
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: -.025em;
}

body.about-body p, body.features-body p, body.world-body p,
body.cooperation-body p, body.faq-body p { color: var(--public-muted); }

.site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  border: 0;
  border-bottom: 1px solid var(--public-line);
  background: rgba(250, 247, 239, .94);
  backdrop-filter: blur(16px);
}

.brand-row {
  width: min(1280px, calc(100% - 48px));
  height: 88px;
  grid-template-columns: 210px 1fr auto;
  gap: 28px;
}

.brand { gap: 0; }
.brand-crest { display: none !important; }
.brand-wordmark {
  content: url("../assets/home-v2/aid20-logo.webp");
  width: 178px;
  max-width: 100%;
  max-height: 62px;
  object-fit: contain;
}

.primary-nav {
  gap: clamp(18px, 2.4vw, 38px);
  overflow: visible;
  scrollbar-width: none;
}

.primary-nav a {
  position: relative;
  padding: 14px 0;
  border: 0;
  color: #2f5049;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 5px;
  height: 1px;
  background: var(--public-gold);
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--public-jade-deep); }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.about-body .primary-nav a[href="about.html"]::after,
.features-body .primary-nav a[href="features.html"]::after,
.world-body .primary-nav a[href="world.html"]::after,
.cooperation-body .primary-nav a[href="cooperation.html"]::after,
.faq-body .primary-nav a[href="faq.html"]::after { transform: scaleX(1); }

.language-control {
  justify-self: end;
  gap: 0;
  color: var(--public-jade-deep);
  border: 1px solid rgba(7, 59, 53, .36);
  border-radius: 16px;
  background: rgba(251, 248, 240, .7);
  overflow: hidden;
}

.locale-mark {
  min-width: 44px;
  padding: 0 0 0 12px;
  border: 0;
  font-weight: 700;
}

.language-control select {
  min-width: 132px;
  min-height: 46px;
  padding: 0 30px 0 8px;
  border: 0;
  color: var(--public-jade-deep);
  background: transparent;
}

.about-page,
.features-page,
.world-page,
.cooperation-page,
.faq-page {
  width: min(1280px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 34px 0 96px;
}

.about-intro,
.features-intro,
.world-intro,
.cooperation-intro,
.faq-intro {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 520px;
  margin: 0 0 38px;
  padding: 58px 54% 58px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--public-line);
  border-radius: 26px;
  background-color: var(--public-paper);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--public-shadow);
}

.about-intro::before,
.features-intro::before,
.world-intro::before,
.cooperation-intro::before,
.faq-intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 32px auto 32px 28px;
  width: min(50%, 620px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 22px;
  background: rgba(251, 248, 240, .91);
  box-shadow: 0 16px 50px rgba(24, 67, 57, .12);
  backdrop-filter: blur(10px);
}

.about-intro > *, .features-intro > *, .world-intro > *,
.cooperation-intro > *, .faq-intro > * { position: relative; z-index: 1; }

.about-intro { min-height: 710px; background-image: url("../assets/public-v2/about-hero.webp"); }
.features-intro { background-image: url("../assets/public-v2/features-hero.webp"); }
.world-intro { background-image: url("../assets/public-v2/world-hero.webp"); }
.cooperation-intro { min-height: 700px; background-image: url("../assets/public-v2/cooperation-hero.webp"); }
.faq-intro { background-image: url("../assets/public-v2/faq-hero.webp"); }

.eyebrow {
  margin-bottom: 12px;
  color: var(--public-gold) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
}

.about-intro h1, .features-intro h1, .world-intro h1,
.cooperation-intro h1, .faq-intro h1 {
  max-width: 640px;
  margin-bottom: 18px;
  font-size: clamp(48px, 5vw, 76px);
  line-height: .98;
}

.features-lead, .world-lead, .cooperation-subtitle,
.faq-intro > p:last-child {
  color: #274d45 !important;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
}

.features-description { color: var(--public-muted) !important; }

/* About: eight editorial RPG chapters, each with its own real illustration. */
.about-section:not(.about-intro) {
  position: relative;
  isolation: isolate;
  width: min(1120px, 100%);
  max-width: none;
  min-height: 360px;
  margin: 22px auto;
  padding: 44px 53% 44px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--public-line);
  border-radius: 24px;
  background: rgba(251, 248, 240, .92);
  box-shadow: 0 18px 52px rgba(31, 67, 58, .08);
}

.about-section:not(.about-intro)::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 49%;
  background-image: var(--about-art);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-section:not(.about-intro) > * {
  position: relative;
  z-index: 1;
}

.about-section:not(.about-intro):nth-of-type(even) {
  padding-right: 44px;
  padding-left: 53%;
}

.about-section:not(.about-intro):nth-of-type(even)::after {
  right: auto;
  left: 0;
}

.about-section h2 { margin-bottom: 16px; font-size: clamp(31px, 3vw, 46px); line-height: 1.06; }
.about-section p { font-size: 15px; line-height: 1.72; }
.about-section .about-statement {
  margin-top: 18px !important;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid var(--public-gold);
  border-radius: 0 12px 12px 0;
  background: rgba(183, 139, 56, .08) !important;
  color: var(--public-jade-deep) !important;
}

.about-section:nth-of-type(2) { --about-art: url("../assets/public-v2/feature-04-real-gm.webp"); }
.about-section:nth-of-type(3) { --about-art: url("../assets/public-v2/feature-01-inventory.webp"); }
.about-section:nth-of-type(4) { --about-art: url("../assets/public-v2/feature-09-progression.webp"); }
.about-section:nth-of-type(5) { --about-art: url("../assets/public-v2/feature-03-party.webp"); }
.about-section:nth-of-type(6) { --about-art: url("../assets/public-v2/feature-10-world-events.webp"); }
.about-section:nth-of-type(7) { --about-art: url("../assets/public-v2/feature-08-factions.webp"); }
.about-section:nth-of-type(8) { --about-art: url("../assets/public-v2/feature-06-housing.webp"); }
.about-section:nth-of-type(9) { --about-art: url("../assets/public-v2/feature-02-spells.webp"); }

/* Feature and world stories. */
.feature-showcase,
.feature-showcase.media-left {
  width: min(1180px, 100%);
  margin: 24px auto;
  padding: 20px;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 40px;
  border: 1px solid var(--public-line);
  border-radius: 24px;
  background: rgba(251, 248, 240, .88);
  box-shadow: 0 18px 52px rgba(31, 67, 58, .08);
}

.feature-showcase.media-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.feature-showcase-copy { padding: 28px 20px; }
.feature-showcase h2 { margin-bottom: 16px; font-size: clamp(34px, 3.5vw, 52px); line-height: 1; }
.feature-showcase-copy p { color: var(--public-muted); font-size: 15px; line-height: 1.72; }
.feature-showcase-copy .feature-highlight { color: var(--public-jade-deep); font-size: 17px; }

.feature-media-placeholder,
.lore-media-placeholder {
  min-height: 330px;
  align-self: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background-color: #dfe9e2;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(13, 83, 72, .12);
}

.feature-media-placeholder > * { display: none; }

.features-page .feature-showcase:nth-of-type(2) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-01-inventory.webp"); }
.features-page .feature-showcase:nth-of-type(3) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-02-spells.webp"); }
.features-page .feature-showcase:nth-of-type(4) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-03-party.webp"); }
.features-page .feature-showcase:nth-of-type(5) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-04-real-gm.webp"); }
.features-page .feature-showcase:nth-of-type(6) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-05-pvp.webp"); }
.features-page .feature-showcase:nth-of-type(7) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-06-housing.webp"); }
.features-page .feature-showcase:nth-of-type(8) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-07-trading.webp"); }
.features-page .feature-showcase:nth-of-type(9) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-08-factions.webp"); }
.features-page .feature-showcase:nth-of-type(10) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-09-progression.webp"); }
.features-page .feature-showcase:nth-of-type(11) .feature-media-placeholder { background-image: url("../assets/public-v2/feature-10-world-events.webp"); }

.world-page .feature-showcase:nth-of-type(2) .feature-media-placeholder { background-image: url("../assets/public-v2/world-01-center.webp"); }
.world-page .feature-showcase:nth-of-type(3) .feature-media-placeholder { background-image: url("../assets/public-v2/world-02-beyond.webp"); }
.world-page .feature-showcase:nth-of-type(4) .feature-media-placeholder { background-image: url("../assets/public-v2/world-03-explorers.webp"); }
.world-page .feature-showcase:nth-of-type(5) .feature-media-placeholder { background-image: url("../assets/public-v2/world-04-guild.webp"); }
.world-page .feature-showcase:nth-of-type(6) .feature-media-placeholder { background-image: url("../assets/public-v2/world-05-branches.webp"); }
.world-page .feature-showcase:nth-of-type(7) .feature-media-placeholder { background-image: url("../assets/public-v2/world-06-pioneers.webp"); }
.world-page .feature-showcase:nth-of-type(8) .feature-media-placeholder { background-image: url("../assets/public-v2/world-07-memory.webp"); }
.world-page .feature-showcase:nth-of-type(9) .feature-media-placeholder { background-image: url("../assets/public-v2/world-08-independent.webp"); }
.world-page .feature-showcase:nth-of-type(10) .feature-media-placeholder { background-image: url("../assets/public-v2/world-09-endless.webp"); }

.world-final {
  width: min(920px, 100%);
  margin: 42px auto 0;
  padding: 72px 36px;
  border: 1px solid var(--public-line);
  border-radius: 24px;
  background: rgba(251, 248, 240, .9);
  box-shadow: var(--public-shadow);
}
.world-final h2 { font-size: clamp(38px, 5vw, 66px); }
.world-final p { color: var(--public-jade-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(22px, 2.6vw, 34px); }

/* Cooperation and FAQ. */
.cooperation-section,
.cooperation-contact,
.faq-list,
.faq-ask {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}

.cooperation-section {
  padding: 42px;
  border: 1px solid var(--public-line);
  border-radius: 22px;
  background: rgba(251, 248, 240, .9);
  box-shadow: 0 16px 48px rgba(31, 67, 58, .07);
}
.cooperation-section + .cooperation-section { margin-top: 20px; }
.cooperation-section h2, .cooperation-contact h2, .faq-ask h2 { font-size: clamp(34px, 4vw, 50px); }
.cooperation-categories { gap: 14px; }
.cooperation-category {
  padding: 22px;
  border: 1px solid var(--public-line);
  border-radius: 16px;
  background: #f8f5ec;
}
.cooperation-category h3 { color: var(--public-jade-deep); font-size: 25px; }
.cooperation-category p { font-size: 14px; }
.cooperation-statement { border-color: var(--public-gold); background: rgba(183, 139, 56, .08); color: var(--public-jade-deep) !important; }
.cooperation-contact, .faq-ask {
  padding: 38px;
  border: 1px solid var(--public-line);
  border-radius: 22px;
  background: rgba(251, 248, 240, .96);
  box-shadow: var(--public-shadow);
}

.panel { border-color: var(--public-line); background: var(--public-paper); }
label { color: var(--public-muted); }
input, textarea, select {
  color: var(--public-jade-deep) !important;
  border-color: rgba(13, 83, 72, .24) !important;
  background: rgba(255, 255, 255, .5) !important;
}
input, textarea { border-radius: 12px !important; }
.cooperation-form textarea, .faq-form textarea { color: var(--public-jade-deep); background: rgba(255,255,255,.56); border-color: var(--public-line); }
.button-primary, .faq-open-form {
  min-height: 48px;
  border-color: var(--public-jade);
  border-radius: 14px;
  background: var(--public-jade);
  color: #fff;
}
.button-primary:hover, .button-primary:focus-visible, .faq-open-form:hover { background: var(--public-jade-deep); }
.button-secondary { border-color: rgba(13,83,72,.36); color: var(--public-jade-deep); }
.faq-open-form.button-secondary { color: #fff; }

.faq-item {
  overflow: hidden;
  border: 1px solid var(--public-line);
  border-radius: 18px;
  background: rgba(251, 248, 240, .92);
  box-shadow: 0 12px 34px rgba(31, 67, 58, .06);
}
.faq-item + .faq-item { margin-top: 14px; }
.faq-question { min-height: 76px; padding: 20px 24px; color: var(--public-jade-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; }
.faq-question:hover, .faq-question:focus-visible { background: rgba(13, 83, 72, .05); }
.faq-icon { color: var(--public-gold); }
.faq-answer { border-color: var(--public-line); }
.faq-answer p { color: var(--public-muted); }

:focus-visible { outline-color: var(--public-gold); }

@media (max-width: 980px) {
  .brand-row { width: calc(100% - 32px); grid-template-columns: 172px 1fr auto; gap: 16px; }
  .brand-wordmark { width: 158px; }
  .primary-nav { gap: 16px; }
  .primary-nav a { font-size: 10px; }
  .language-control select { min-width: 102px; }
  .about-page, .features-page, .world-page, .cooperation-page, .faq-page { width: min(100% - 32px, 820px); }
  .about-intro, .features-intro, .world-intro, .cooperation-intro, .faq-intro { padding-right: 48%; }
  .feature-showcase, .feature-showcase.media-left { grid-template-columns: 1fr; gap: 10px; }
  .feature-showcase.media-left .feature-showcase-copy { grid-row: 1; }
  .feature-showcase.media-left .feature-media-placeholder { grid-row: 2; }
}

@media (max-width: 760px) {
  .site-header { position: sticky; }
  .brand-row {
    width: 100%;
    height: 112px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 64px 42px;
    gap: 0 10px;
    padding: 5px 16px 0;
  }
  .brand { grid-column: 1; grid-row: 1; min-height: 0; }
  .brand-wordmark { width: 138px; max-width: 50vw; max-height: 52px; }
  .language-control { grid-column: 2; grid-row: 1; border-radius: 13px; }
  .language-control select { min-width: 0; width: 56px; min-height: 42px; padding: 0 6px; font-size: 0; }
  .language-control select option { font-size: 14px; }
  .locale-mark { min-width: 40px; padding-left: 9px; }
  .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    padding: 0 2px 7px;
  }
  .primary-nav a { flex: 0 0 auto; padding: 8px 0; font-size: 10px; white-space: nowrap; }

  .about-page, .features-page, .world-page, .cooperation-page, .faq-page {
    width: min(100% - 20px, 600px);
    padding: 14px 0 58px;
  }

  .about-intro, .features-intro, .world-intro, .cooperation-intro, .faq-intro {
    min-height: 0;
    padding: 280px 20px 26px;
    display: block;
    border-radius: 20px;
    background-color: var(--public-paper);
    background-position: center top;
    background-size: auto 280px;
  }
  .about-intro::before, .features-intro::before, .world-intro::before,
  .cooperation-intro::before, .faq-intro::before { display: none; }

  /* About has a much longer intro than the other public pages.
     Render its art as one isolated top layer instead of a background on the
     content container so it can never tile/stretch behind the copy. */
  .about-intro {
    position: relative;
    min-height: 0 !important;
    background-image: none !important;
  }
  .about-intro::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 auto 0;
    width: 100%;
    height: 260px;
    border-radius: 20px 20px 0 0;
    background: url("../assets/public-v2/about-hero.webp") center / cover no-repeat;
    pointer-events: none;
  }
  .about-intro > * { position: relative; z-index: 1; }
  .about-intro h1, .features-intro h1, .world-intro h1,
  .cooperation-intro h1, .faq-intro h1 { font-size: clamp(42px, 13vw, 60px); }
  .features-lead, .world-lead, .cooperation-subtitle, .faq-intro > p:last-child { font-size: 17px; }

  .about-section:not(.about-intro),
  .about-section:not(.about-intro):nth-of-type(even) {
    min-height: 0;
    padding: 246px 22px 26px;
    border-radius: 20px;
  }
  .about-section:not(.about-intro)::after,
  .about-section:not(.about-intro):nth-of-type(even)::after {
    inset: 0 0 auto;
    width: 100%;
    height: 220px;
    background-position: center;
    background-size: cover;
  }
  .about-section h2 { font-size: clamp(31px, 10vw, 42px); }
  .about-section p { font-size: 14px; }

  .feature-showcase, .feature-showcase.media-left {
    margin: 16px auto;
    padding: 12px;
    gap: 4px;
    border-radius: 20px;
  }
  .feature-showcase-copy { padding: 18px 10px 14px; }
  .feature-showcase h2 { font-size: clamp(32px, 10vw, 44px); }
  .feature-showcase-copy p { font-size: 14px; }
  .feature-media-placeholder, .lore-media-placeholder { min-height: 0; aspect-ratio: 16 / 9; border-radius: 15px; }

  .world-final { padding: 46px 22px; border-radius: 20px; }
  .cooperation-section, .cooperation-contact, .faq-ask { padding: 24px 20px; border-radius: 20px; }
  .cooperation-categories, .cooperation-fields, .faq-fields { grid-template-columns: 1fr; }
  .cooperation-section ul { columns: 1; }
  .cooperation-message-field, .faq-question-field { grid-column: auto; }
  .faq-question { min-height: 66px; padding: 16px; font-size: 21px; }
}

@media (max-width: 390px) {
  .brand-row { padding-inline: 12px; }
  .primary-nav { gap: 20px; }
  .about-page, .features-page, .world-page, .cooperation-page, .faq-page { width: calc(100% - 16px); }
  .about-intro, .features-intro, .world-intro, .cooperation-intro, .faq-intro { padding-top: 240px; background-size: auto 240px; }
  .about-intro::after { height: 220px; }
}

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