/* Shared public reading and navigation layer. Only pages that explicitly opt
   into .lw-experience use it; the game, editors and admin tools keep their UI. */
body.lw-experience :where(main, .reader, .opmodal) {
  --bone-2: rgba(232, 221, 215, 0.86);
  --bone-3: rgba(232, 221, 215, 0.72);
}

body.lw-experience :where(main p:not(.price):not(.opseat-price):not(.signal-rule):not(.eyebrow)) {
  font-size: max(1rem, 1em);
  line-height: 1.65;
  font-weight: 400;
}

body.lw-experience :where(.signal-rule, .eyebrow, .ribbon, .kick, .kicker, .breadcrumb, .breadcrumbs, .declass) {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

body.lw-experience :where(main, .reader, .opmodal) :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold, #E8C875);
  outline-offset: 4px;
}

body.lw-experience :where(main, .reader, .opmodal) :where(p, li, blockquote) {
  overflow-wrap: break-word;
}

body.lw-experience :where(.topnav, .hero .top) {
  gap: 20px;
}

body.lw-experience :is(.nav-mid, .hero-nav) {
  align-items: center;
  gap: 16px;
}

body.lw-experience :is(.nav-mid, .hero-nav) > a,
body.lw-experience :is(.topnav, .hero .top) > :is(.signin, .ghost-link) {
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #E8DDD7;
}

body.lw-experience :is(.nav-mid, .hero-nav) > :is(a.current, a.nav-sub) {
  color: var(--gold, #E8C875);
}

body.lw-experience :is(.nav-mid, .hero-nav) > a.nav-sub:is(.current, :hover, :focus-visible) {
  background: var(--gold, #E8C875);
  color: var(--void, #0A0710);
  border-color: var(--gold, #E8C875);
}

body.lw-experience :is(.topnav, .hero .top) :is(a, button):focus-visible {
  outline: 2px solid var(--gold, #E8C875);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  body.lw-experience :is(.nav-mid, .hero-nav).lw-nav-ready {
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    padding-top: 0;
  }

  body.lw-experience :is(.nav-mid, .hero-nav).lw-nav-ready > a,
  body.lw-experience .lw-nav-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    margin: 0;
    font: 500 14px/1.35 var(--sans, Inter, system-ui, sans-serif);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  body.lw-experience .lw-nav-toggle {
    color: #E8DDD7;
  }

  body.lw-experience .lw-nav-panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 18px;
    font: 500 15px/1.45 var(--sans, Inter, system-ui, sans-serif);
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
  }

  body.lw-experience .hero .top {
    background: rgba(10, 7, 16, 0.88);
    border: 1px solid rgba(232, 221, 215, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
  }
}

@media (max-width: 720px) {
  body.lw-experience .topnav,
  body.lw-experience .hero .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 8px 16px 6px;
  }

  body.lw-experience .hero .top {
    left: 12px;
    right: 12px;
    top: 12px;
    padding: 6px 10px;
  }

  body.lw-experience :is(.topnav, .hero .top) > .wordmark {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
  }

  body.lw-experience :is(.topnav, .hero .top) .wordmark .mark {
    font-size: 16px;
    letter-spacing: 0.22em;
    padding-right: 0;
  }

  body.lw-experience :is(.topnav, .hero .top) .wordmark :is(.rule, .est) {
    display: none;
  }

  body.lw-experience :is(.topnav, .hero .top) > :is(.signin, .ghost-link) {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0 8px 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  body.lw-experience :is(.nav-mid, .hero-nav).lw-nav-ready {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: space-between;
    gap: 4px;
  }

  body.lw-experience :is(.nav-mid, .hero-nav).lw-nav-ready > a,
  body.lw-experience .lw-nav-toggle {
    padding-inline: 10px;
  }
}