/* v11.2: one phone-first layout for every screen size. */
:root {
  --site-design-width: 520px;
  --mobile-page-width: 520px;
  --mobile-gutter: 10px;
  --deep-blue: #011e69;
  --deep-black: #000;
}

html {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background: #000 !important;
  font-size: 18px !important;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: min(100%, var(--mobile-page-width)) !important;
  min-width: 0 !important;
  max-width: var(--mobile-page-width) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  background: #000 !important;
  background-image: none !important;
}

body::before,
body::after {
  content: none !important;
  background: none !important;
}

*, *::before, *::after { box-sizing: border-box; }

body > header,
body > nav,
body > main,
body > footer,
.hero-header,
.main-menu,
.simple-footer,
.wallet-footer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-header {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  background: #000 !important;
}

.hero-header > a { display: block !important; width: 100% !important; }

.hero-header-image {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
}

/* The home navigation is intentionally large on both phones and computers. */
.accordion-main,
.accordion-stack,
.accordion-item,
.accordion-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.accordion-main {
  min-height: 0 !important;
  padding: 12px var(--mobile-gutter) 18px !important;
}

.accordion-stack { margin: 0 auto !important; padding: 0 !important; }
.accordion-item { margin: 0 0 10px !important; }

.accordion-trigger,
.accordion-external {
  width: 100% !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 15px 18px !important;
  gap: 14px !important;
  font-size: 1.5rem !important;
  line-height: 1.08 !important;
  letter-spacing: .025em !important;
}

.accordion-trigger,
.accordion-external {
  font-family: Montserrat, Inter, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.accordion-symbol {
  flex-basis: 44px !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 1.55rem !important;
}

.accordion-panel { padding-top: 10px !important; }
.accordion-panel-content { width: 100% !important; }

.accordion-loading,
.accordion-error,
.accordion-welcome,
.accordion-embed-shell,
.how-to-join-section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.accordion-welcome {
  padding: 34px 18px !important;
  background: #011e69 !important;
  background-image: none !important;
}

.accordion-welcome img { width: 132px !important; height: 132px !important; }
.accordion-welcome h1 { font-size: 2.15rem !important; }
.accordion-welcome p { width: 100% !important; font-size: 1.15rem !important; }

.accordion-close {
  width: min(280px, 100%) !important;
  min-height: 58px !important;
  font-size: 1rem !important;
}

.accordion-embed-shell { background: #000 !important; }
.accordion-embed { min-height: 0 !important; background: #000 !important; }

/* Embedded pages end at their actual final panel instead of the iframe viewport. */
html.embedded-document,
html.embedded-document body {
  height: auto !important;
  min-height: 0 !important;
}
html.embedded-document body { overflow-y: hidden !important; }

/* No seamless image tiles remain on the website. */
.founder-strip,
.anthem-section,
.artwork-section,
.leaderboard-hero-inner,
.leaderboard-top-panel,
.leaderboard-section-heading,
.leaderboard-board-shell,
.v47-graphic-board .board-head,
.artwork-logo-card,
.artwork-card {
  background-color: #011e69 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
}

.news-hero,
.news-card,
.news-empty,
.wallet-panel,
.wallet-intro,
.wallet-info {
  background-color: #000 !important;
  background-image: none !important;
}

/* Founders remain centered on phones. */
.founder-strip {
  width: 100% !important;
  padding: 30px 6px 36px !important;
}

.founder-portraits {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 22px 0 !important;
  align-items: start !important;
}

.founder-link,
.founder-link:nth-child(n) {
  grid-column: span 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 3px !important;
}

.founder-link:nth-child(5) { grid-column: 2 / span 2 !important; }
.founder-link:nth-child(6) { grid-column: 4 / span 2 !important; }
.founder-link:nth-child(7) { grid-column: 6 / span 2 !important; }

.founder-link img,
.founder-link:nth-child(n) img {
  width: 72px !important;
  height: 72px !important;
}

.founder-link .founder-name { font-size: .82rem !important; }
.founder-link .founder-handle {
  width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  font-size: .62rem !important;
  line-height: 1.15 !important;
}

/* Keep the four founders in two centered rows on phones as well. */
.founder-portraits.founder-portraits-four {
  width: min(260px, 100%) !important;
  max-width: 260px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 22px !important;
}

.founder-portraits-four .founder-link,
.founder-portraits-four .founder-link:nth-child(n) {
  grid-column: auto !important;
  width: 100% !important;
}

.mission-section,
.anthem-section,
.artwork-section,
.contact-teaser,
.how-to-join-section {
  width: 100% !important;
  margin: 0 !important;
}

.how-to-join-section {
  padding: 34px 18px 38px !important;
  border: 2px solid #b88a32 !important;
  background: #000 !important;
  background-image: none !important;
}

.how-to-join-section h1 {
  max-width: 100% !important;
  margin-bottom: 18px !important;
  font-size: 2.15rem !important;
}

.how-to-join-copy {
  width: 100% !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
}

.join-community-links { margin-top: 26px !important; gap: 16px !important; }
.join-logo-link img { width: 140px !important; height: 140px !important; }
.join-here-link {
  width: min(280px, 100%) !important;
  min-height: 60px !important;
  font-size: 1.05rem !important;
}

.mission-section { padding: 0 !important; }
.mission-frame {
  width: 100% !important;
  padding: 34px 18px !important;
  border-radius: 6px !important;
  background-image: none !important;
}
.mission-title-wrap h2 { font-size: 2.5rem !important; }
.mission-copy { font-size: 1rem !important; }

.anthem-section { padding: 34px 12px 38px !important; }
.anthem-heading h2 { font-size: 2.1rem !important; }
.anthem-heading p { font-size: 1rem !important; }

.artwork-section { padding: 12px 10px 32px !important; }
.artwork-heading {
  width: 100% !important;
  margin: 0 auto 16px !important;
  padding: 28px 14px !important;
  border: 2px solid #b88a32 !important;
  background: #000 !important;
  background-image: none !important;
}
.artwork-heading h1 { font-size: 2.5rem !important; }
.artwork-logo-row { grid-template-columns: 1fr !important; gap: 12px !important; }
.artwork-logo-card {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.artwork-logo-card img { min-height: 0 !important; max-height: none !important; }
.artwork-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.artwork-card,
.artwork-card:hover {
  padding: 0 !important;
  border: 0 !important;
}

/* Match the Home panel's gold frame on the main Four panel. */
.accordion-panel .founder-strip {
  border: 2px solid #b88a32 !important;
}

.contact-teaser {
  padding: 34px 14px !important;
  flex-direction: column !important;
  text-align: center !important;
}
.contact-actions { width: 100% !important; flex-basis: auto !important; }
.contact-actions .gold-button {
  width: 100% !important;
  min-height: 60px !important;
  background: #000 !important;
  background-image: none !important;
  font-size: 1rem !important;
}
.email-graphic-wrap {
  width: 100% !important;
  justify-content: center !important;
  overflow: visible !important;
}
.email-graphic {
  flex: 0 0 auto !important;
  width: min(110%, 520px) !important;
  max-width: none !important;
  height: auto !important;
}

/* Consistent black and gold treatment for every opened section's lead panel. */
.accordion-welcome,
.mission-frame,
.accordion-panel .founder-strip,
.anthem-section,
.artwork-section,
.contact-teaser {
  border: 2px solid #b88a32 !important;
  background-color: #000 !important;
  background-image: none !important;
}

/* Keep the leaderboard wrappers simple so the content, not nested frames, leads. */
.leaderboard-hero-inner,
.leaderboard-top-panel {
  background-color: #000 !important;
  background-image: none !important;
}

html.embedded-document .leaderboard-hero-inner {
  border: 0 !important;
}

html.embedded-document .leaderboard-hero {
  border-bottom: 0 !important;
}

html.embedded-document .leaderboard-hero-inner::before {
  inset: 0 !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  border-radius: 5px !important;
}

html.embedded-document .leaderboard-content > .leaderboard-top-panel {
  border: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.embedded-document .leaderboard-content > .leaderboard-top-panel + .leaderboard-standings-panel {
  margin-top: 6px !important;
}

html.embedded-document .leaderboard-top-panel .leaderboard-section-heading {
  box-sizing: border-box !important;
  padding: 26px 14px !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  border-radius: 5px !important;
}

.leaderboard-top-panel .leaderboard-section-heading,
.artwork-logo-card,
.artwork-card {
  background-color: #000 !important;
  background-image: none !important;
}

/* Border the images themselves without restoring the removed artwork-card frames. */
.artwork-logo-card img,
.artwork-card img {
  box-sizing: border-box !important;
  border: 1px solid #fff !important;
}

/* Leaderboard: matching panel widths, larger usernames, and no inner footer gap. */
.leaderboard-main {
  --lb-width: 100%;
  width: 100% !important;
  padding: 8px !important;
  background: #000 !important;
}
.leaderboard-hero,
.leaderboard-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.leaderboard-hero { min-height: 0 !important; }
.leaderboard-hero-inner,
.leaderboard-content > .leaderboard-panel,
.leaderboard-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 26px 14px !important;
}
.leaderboard-hero-inner { min-height: 0 !important; }
.leaderboard-hero h1 { font-size: 2.25rem !important; }
.leaderboard-hero p { font-size: 1rem !important; }
.leaderboard-content { padding-top: 10px !important; }
.leaderboard-panel + .leaderboard-panel { margin-top: 10px !important; }
.leaderboard-section-heading { margin-bottom: 18px !important; }
.leaderboard-section-heading h2 { font-size: 2rem !important; }
.leaderboard-top3 {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}
.v47-top3-card,
.v47-top3-card.rank-1,
.v47-top3-card.rank-2,
.v47-top3-card.rank-3 {
  min-height: 0 !important;
  padding: 20px 14px !important;
  transform: none !important;
}
.v47-top3-card h3 {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: 25.6px !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}
.v47-top3-points strong { font-size: 2.5rem !important; }
.leaderboard-board-header {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.v47-graphic-board .board-head,
.v47-graphic-board .board-row {
  grid-template-columns: 62px minmax(0, 1fr) 68px !important;
  column-gap: 8px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.v47-graphic-board .board-head {
  min-height: 82px !important;
  grid-template-areas:
    "username username username"
    "rank . points" !important;
  row-gap: 6px !important;
  font-size: .68rem !important;
  letter-spacing: .035em !important;
}
.v47-graphic-board .board-head span:nth-child(1) { grid-area: rank; }
.v47-graphic-board .board-head span:nth-child(2) { grid-area: username; text-align: left; }
.v47-graphic-board .board-head span:nth-child(3) { grid-area: points; text-align: right !important; }
.v47-graphic-board .board-row {
  min-height: 126px !important;
  grid-template-areas:
    "name name name"
    "rank . points" !important;
  row-gap: 8px !important;
}
.v47-graphic-board .board-row > div:nth-child(1) { grid-area: rank; }
.v47-graphic-board .board-name { grid-area: name; }
.v47-graphic-board .board-points { grid-area: points; }
.v47-graphic-board .rank-badge {
  min-width: 54px !important;
  padding: 9px 6px !important;
}
.v47-graphic-board .board-name strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: 25.6px !important;
  line-height: 1.04 !important;
  letter-spacing: -.06em !important;
  white-space: nowrap !important;
}
.v47-graphic-board .board-name span { font-size: .66rem !important; }
.v47-graphic-board .board-points { font-size: 1.8rem !important; }
.leaderboard-footer { display: none !important; }

html.embedded-document .leaderboard-main,
html.embedded-document .wallet-main {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html.embedded-document .leaderboard-content,
html.embedded-document .wallet-panel:last-child { margin-bottom: 0 !important; }
html.embedded-document .leaderboard-standings-panel,
html.embedded-document .wallet-panel:last-child { padding-bottom: 0 !important; }

/* Match the existing black side inset above and below the embedded leaderboard. */
html.embedded-document .leaderboard-main {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Give Wallet Registration the same black inset at its top and final edge. */
html.embedded-document .wallet-main {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Wallet and news pages use the same single-column phone canvas. */
.wallet-main,
.news-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px !important;
}
.wallet-panel,
.news-hero,
.news-feed {
  width: 100% !important;
  max-width: 100% !important;
}
.wallet-panel { padding: 28px 14px !important; }
.wallet-intro h1 { font-size: 2.35rem !important; }
.info-grid { grid-template-columns: 1fr !important; }
.wallet-footer { display: none !important; }
.news-hero { padding: 34px 14px !important; }
.news-hero h1 { font-size: 2.4rem !important; }
.news-card,
.news-empty { padding: 26px 14px !important; }
.news-feed { gap: 12px !important; padding-top: 12px !important; }

/* The home footer is the plain, borderless end of the menu. */
.home-footer {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Older confirmation/error pages also stay within the phone canvas. */
.mission-hero,
.hero-content,
.mission-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.hero-content { padding-left: 14px !important; padding-right: 14px !important; }

/* Keep every opened-panel title inside the phone canvas. */
.accordion-welcome h1,
.mission-title-wrap h2,
.founder-strip h1,
.anthem-heading h2,
.artwork-heading h1,
.contact-teaser h2,
.leaderboard-hero h1,
.leaderboard-section-heading h2,
.leaderboard-board-header h2,
.wallet-intro h1,
.wallet-info h2,
.fine-print h2,
.news-hero h1,
.news-card h2,
.news-empty h2 {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(1.45rem, 7.4vw, 2.1rem) !important;
  line-height: 1.12 !important;
  letter-spacing: .01em !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto;
}

/* The full standings are a plain list on the burgundy panel. */
.leaderboard-standings-panel .leaderboard-board,
.leaderboard-standings-panel .v47-graphic-board,
.leaderboard-standings-panel .board-rows {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.v47-graphic-board .board-head { display: none !important; }
.v47-graphic-board .board-row,
.v47-graphic-board .board-row:nth-child(even),
.v47-graphic-board .board-row.top-1,
.v47-graphic-board .board-row.top-2,
.v47-graphic-board .board-row.top-3,
.v47-graphic-board .board-row:hover,
.v47-graphic-board .board-row:not(.top-1):not(.top-2):not(.top-3),
.v47-graphic-board .board-row:nth-child(even):not(.top-1):not(.top-2):not(.top-3),
.v47-graphic-board .board-row:not(.top-1):not(.top-2):not(.top-3):hover {
  border: 0 !important;
  border-bottom: 2px solid #000 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-rows .board-row:last-child {
  border-bottom: 0 !important;
}
.v47-graphic-board .rank-badge,
.v47-graphic-board .board-row.top-1 .rank-badge,
.v47-graphic-board .board-row.top-2 .rank-badge,
.v47-graphic-board .board-row.top-3 .rank-badge,
.v47-graphic-board .board-row:not(.top-1):not(.top-2):not(.top-3) .rank-badge,
.v47-graphic-board .board-row:not(.top-1):not(.top-2):not(.top-3) .rank-badge:hover {
  border: 0 !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.v47-graphic-board .board-name strong {
  font-weight: 400 !important;
  -webkit-text-stroke: 1px #000 !important;
  paint-order: stroke fill !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}
.v47-graphic-board .board-name span { display: none !important; }

/* Compact labels and uniform rank/total colors for the full standings. */
.v47-graphic-board .board-labels {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 68px !important;
  align-items: center !important;
  column-gap: 8px !important;
  padding: 0 8px 10px !important;
}
.v47-graphic-board .board-labels span {
  width: max-content !important;
  min-width: 54px !important;
  padding: 8px 7px !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: #000 !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
.v47-graphic-board .board-labels span:first-child { grid-column: 1 !important; }
.v47-graphic-board .board-labels span:last-child {
  grid-column: 3 !important;
  justify-self: end !important;
}
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-rows .board-row:first-child {
  border-top: 2px solid #000 !important;
}
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .rank-badge,
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-row.top-1 .rank-badge,
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-row.top-2 .rank-badge,
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-row.top-3 .rank-badge {
  color: #fff !important;
  -webkit-text-stroke: 1px #000 !important;
  paint-order: stroke fill !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-points,
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-row.top-1 .board-points,
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-row.top-2 .board-points,
html.embedded-document .leaderboard-standings-panel .v47-graphic-board .board-row.top-3 .board-points {
  color: #ffd56a !important;
  -webkit-text-stroke: 1px #000 !important;
  paint-order: stroke fill !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}