/*
 * css/site.css: the shell every page wears.
 *
 *   .site-nav      top bar, 72px, wordmark + links + actions
 *   .epoch-strip   the ornamented ribbon under the nav (epoch status)
 *   .site-bar      the floating bar that takes over once the hero scrolls away
 *   .site-menu     the full-screen sheet behind "Menu" on small screens
 *   .site-footer   deep blue plate, four link columns, emblem, legal rule
 */

/* ---------------------------------------------------------------- nav */
.site-nav {
  position: relative;
  z-index: 40;
  background: var(--brand-bg);
}
.site-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-space-lg);
  height: var(--brand-nav-height);
  padding-inline: var(--brand-gutter);
  background: var(--brand-bg);
}
.site-nav__brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.site-nav__orb { width: 30px; height: 30px; flex: none; }
.site-nav__wordmark {
  font-family: var(--brand-font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-text-ink);
  white-space: nowrap;
}
.site-nav__desktop { display: flex; align-items: center; gap: 12px; }
.site-nav__link {
  font-size: 14px;
  line-height: 22px;
  color: var(--brand-text-secondary);
  transition: color var(--brand-transition-fast);
}
.site-nav__link:hover, .site-nav__link[aria-current='page'] { color: var(--brand-accent-readable); }
.site-nav__diamond {
  width: 9px; height: 9px; flex: none;
  border: 1px solid var(--brand-border-strong);
  transform: rotate(45deg);
  opacity: .8;
}
.site-nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.site-nav__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  color: var(--brand-text-secondary);
  transition: color var(--brand-transition-fast), border-color var(--brand-transition-fast);
}
.site-nav__icon:hover { color: var(--brand-accent-readable); border-color: var(--brand-border); }
.site-nav__icon svg { width: 17px; height: 17px; }
.site-nav__divider { width: 1px; height: 26px; background: var(--brand-border); }
.site-nav__burger { display: none; }

@media (max-width: 1099px) {
  .site-nav__desktop { display: none; }
  .site-nav__burger { display: inline-flex; }
  .site-nav__wordmark { font-size: 17px; }
}
@media (max-width: 767px) {
  /* at phone widths the bar keeps the mark, the theme and the way in, and nothing else:
     Buy $PONM and the page links both live in the menu sheet */
  .site-nav__cta { display: none; }
  .site-nav__actions > .site-nav__link,
  .site-nav__divider { display: none; }
  .site-nav__actions { gap: 6px; }
}

/* ---------------------------------------------------------------- epoch strip */
.epoch-strip {
  position: relative;
  z-index: 30;
  background: var(--brand-accent-soft);
  color: var(--brand-text-ink);
  isolation: isolate;
}
.epoch-strip[hidden] { display: none; }
.epoch-strip::before, .epoch-strip::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 6px;
  background-repeat: repeat-x;
  background-size: auto 6px;
  z-index: 2;
}
.epoch-strip::before { top: 0; background-image: url(../img/art/border-top.svg); }
.epoch-strip::after { bottom: 0; background-image: url(../img/art/border-bottom.svg); }
.epoch-strip__art {
  position: absolute; inset: 0;
  background: url(../img/art/strip-art.webp) center/cover no-repeat;
  opacity: .5;
  z-index: -1;
}
.epoch-strip__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--brand-space-md);
  min-height: 72px;
  padding: 14px var(--brand-gutter);
  max-width: var(--brand-shell-max);
  margin-inline: auto;
}
.epoch-strip__mark { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.epoch-strip__seal { width: 40px; height: 40px; }
.epoch-strip__title { font-family: var(--brand-font-display); font-size: 19px; line-height: 1.2; }
.epoch-strip__phase { flex: 1; text-align: center; letter-spacing: .16em; color: var(--brand-text-ink); }
.epoch-strip__meta { display: inline-flex; gap: 10px; align-items: baseline; flex: none; color: var(--brand-accent-readable); }
.epoch-strip__meta-label { opacity: .68; }
.epoch-strip__close {
  flex: none; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-text-muted);
}
.epoch-strip__close:hover { color: var(--brand-text-primary); }

@media (max-width: 899px) {
  .epoch-strip__phase { display: none; }
  .epoch-strip__title { font-size: 16px; }
  .epoch-strip__bar { min-height: 60px; gap: var(--brand-space-sm); }
  .epoch-strip__seal { width: 30px; height: 30px; }
  .epoch-strip__meta { font-size: 9px; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------- floating bar */
.site-bar {
  position: fixed;
  top: 12px; left: 0; right: 0;
  z-index: 60;
  padding-inline: var(--brand-gutter);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity var(--brand-transition-base), transform var(--brand-transition-base);
}
.site-bar[data-visible='true'] { opacity: 1; transform: none; pointer-events: auto; }
.site-bar__frame {
  display: flex;
  align-items: center;
  gap: var(--brand-space-md);
  max-width: var(--brand-shell-max);
  margin-inline: auto;
  padding: 4px;
  background: var(--brand-bg-elevated);
  border: 1px solid var(--brand-border-primary);
}
.site-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--brand-space-md);
  width: 100%;
  min-height: 56px;
  padding: 0 8px 0 12px;
  background: var(--brand-bg-muted);
  border: 1px solid var(--brand-border-subtle);
}
.site-bar__menu { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 34px; min-height: 34px; font-size: 14px; color: var(--brand-text-secondary); }
.site-bar__menu:hover { color: var(--brand-text-primary); }
.site-bar__live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.site-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); }
.site-bar__chip {
  font-family: var(--brand-font-label);
  font-size: 8px; line-height: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-accent-readable);
  border: 1px solid var(--brand-accent-soft);
  background: var(--brand-bg);
  padding: 1px 4px;
}
.site-bar__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.site-bar__stat--mid { margin-inline: auto; }
.site-bar__end { display: inline-flex; align-items: center; gap: var(--brand-space-md); margin-left: auto; flex: none; }
.site-bar__value { font-family: var(--brand-font-label); font-size: 13px; color: var(--brand-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1099px) {
  .site-bar__stat--mid { display: none; }
  .site-bar__inner { min-height: 48px; }
}
@media (max-width: 599px) {
  .site-bar__live > span { display: none; }
  .site-bar__menu span { display: none; }
}

/* ---------------------------------------------------------------- menu sheet */
.site-menu {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  background: var(--brand-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-menu[data-open='true'] { display: block; }
.site-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--brand-nav-height);
  padding-inline: var(--brand-gutter);
  border-bottom: 1px solid var(--brand-border-subtle);
}
.site-menu__body { padding: var(--brand-space-xl) var(--brand-gutter) var(--brand-space-3xl); display: grid; gap: var(--brand-space-xl); }
.site-menu__group { display: grid; gap: var(--brand-space-sm); }
.site-menu__link {
  font-family: var(--brand-font-display);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--brand-text-ink);
  padding-block: 6px;
}
.site-menu__link:hover { color: var(--brand-accent-readable); }
.site-menu__sub { font-size: 1rem; color: var(--brand-text-secondary); padding-block: 8px; }
.site-menu__button { text-align: left; cursor: pointer; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  position: relative;
  margin: var(--brand-space-2xl) var(--brand-gutter) var(--brand-gutter);
  background: var(--brand-footer-bg);
  color: var(--brand-footer-text);
  border: 1px solid var(--brand-footer-border);
  overflow: hidden;
  isolation: isolate;
}
.site-footer__texture {
  position: absolute; inset: 0;
  background: url(../img/art/footer-texture.webp) center/cover no-repeat;
  opacity: .28;
  mix-blend-mode: soft-light;
  z-index: -1;
}
.site-footer__frame {
  border: 1px solid rgba(255, 255, 255, .14);
  margin: 12px;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.25rem, .5rem + 3vw, 3.5rem);
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--brand-space-2xl);
}
.site-footer__brand { display: grid; gap: var(--brand-space-md); align-content: start; }
.site-footer__wordmark { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__wordmark span {
  font-family: var(--brand-font-display);
  font-size: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.site-footer__blurb { color: var(--brand-footer-text-muted); font-size: 15px; line-height: 1.6; max-width: 17rem; }
.site-footer__social { display: flex; gap: 10px; margin-top: var(--brand-space-sm); }
.site-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background var(--brand-transition-fast);
}
.site-footer__social a:hover { background: rgba(255, 255, 255, .12); }
.site-footer__social img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.site-footer__col { display: grid; gap: 14px; align-content: start; }
.site-footer__col h2 {
  font-family: var(--brand-font-label);
  font-size: 11px; line-height: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  font-weight: 400;
}
.site-footer__col a { font-size: 15px; color: var(--brand-footer-text); }
.site-footer__token { display: flex; flex-wrap: wrap; gap: var(--brand-space-md); margin-top: var(--brand-space-md); }
.site-footer__token a, .site-footer__token button { font-size: 15px; color: var(--brand-footer-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__token a:hover, .site-footer__token button:hover { color: #fff; }
.site-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__emblem {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--brand-space-xl);
  margin-top: clamp(2rem, 1rem + 4vw, 4rem);
}
.site-footer__emblem::before, .site-footer__emblem::after {
  content: ''; height: 1px; background: rgba(255, 255, 255, .22);
}
.site-footer__crest { position: relative; display: block; width: 150px; }
.site-footer__crest-frame { display: block; width: 100%; height: auto; opacity: .8; filter: brightness(0) invert(1); }
/* the orb sits in the frame's empty square: centre measured at 49.9% / 52.7% of the frame */
.site-footer__crest-orb { position: absolute; left: 49.9%; top: 52.7%; width: 31%; height: auto; transform: translate(-50%, -50%); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--brand-space-md);
  justify-content: space-between;
  margin-top: var(--brand-space-lg);
  color: rgba(255, 255, 255, .72);
}
.site-footer__legal .label { color: inherit; }

@media (max-width: 1099px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--brand-space-xl); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .site-footer { margin-inline: 12px; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__crest { width: 110px; }
  .site-footer__legal { flex-direction: column; gap: var(--brand-space-xs); }
}

/* ---------------------------------------------------------------- wallet chip (shared) */
.wallet {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--brand-border);
  background: var(--brand-bg-muted);
  font-family: var(--brand-font-label);
  font-size: 11px; letter-spacing: .04em;
  color: var(--brand-text-secondary);
  white-space: nowrap;
}
.wallet__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-text-muted); flex: none; }
.wallet[data-state='connected'] .wallet__dot { background: var(--brand-feedback-positive); }
.wallet[data-state='wrong-chain'] .wallet__dot { background: var(--brand-danger); }
.wallet:hover { border-color: var(--brand-border-strong); color: var(--brand-text-primary); }

/* a skip link that only shows on focus */
.skip {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px;
  background: var(--brand-accent); color: var(--brand-text-on-accent);
  /* clipped rather than pushed off-canvas, which would widen the scroll area */
  clip-path: inset(50%);
  opacity: 0;
}
.skip:focus { clip-path: none; opacity: 1; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- wallet control and chooser */
.wallet { cursor: pointer; }
.wallet[data-state='pending'] .wallet__dot { background: var(--brand-accent); animation: pulse 1.1s ease-in-out infinite; }
.wallet[data-state='connected'] { border-color: var(--brand-border-strong); color: var(--brand-text-primary); }
.wallet--block { width: 100%; justify-content: center; height: 44px; font-size: 12px; }
.site-nav__wallet { max-width: 210px; }
.site-nav__wallet span { overflow: hidden; text-overflow: ellipsis; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@media (max-width: 1099px) {
  .site-nav__buy, .site-nav__divider { display: none; }
}
@media (max-width: 767px) {
  .site-nav__wallet { display: none; }   /* phones: the wallet control lives in the menu sheet */
}

body.has-dialog { overflow: hidden; }
.wallet-dialog { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--brand-gutter); }
.wallet-dialog[hidden] { display: none; }
.wallet-dialog__backdrop { position: absolute; inset: 0; background: rgba(12, 3, 4, .72); }
.wallet-dialog__panel { position: relative; width: min(420px, 100%); max-height: calc(100vh - 2 * var(--brand-gutter)); overflow-y: auto; }
.wallet-dialog__inner { display: grid; gap: var(--brand-space-md); padding: var(--brand-space-lg); }
.wallet-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--brand-space-md); }
.wallet-dialog__title { font-family: var(--brand-font-display); font-size: 1.5rem; font-weight: 400; color: var(--brand-text-ink); }
.wallet-dialog__note { color: var(--brand-text-body); font-size: .9375rem; line-height: 1.6; }
.wallet-dialog__options { display: grid; gap: var(--brand-space-xs); }
.wallet-option {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 14px;
  border: 1px solid var(--brand-border);
  background: var(--brand-bg-elevated);
  color: var(--brand-text-primary);
  font-size: 1rem; text-align: left;
  transition: border-color var(--brand-transition-fast), background var(--brand-transition-fast);
}
.wallet-option:hover { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.wallet-option img, .wallet-option__blank { width: 28px; height: 28px; flex: none; }
.wallet-option__blank { border: 1px solid var(--brand-border); }
.wallet-option__tag {
  margin-left: auto;
  font-family: var(--brand-font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-accent-readable);
}
.wallet-network { display: grid; gap: 1px; background: var(--brand-border-subtle); border: 1px solid var(--brand-border-subtle); margin: 0; }
.wallet-network > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--brand-space-sm); background: var(--brand-bg-muted); padding: 8px 12px; }
.wallet-network dt { font-family: var(--brand-font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text-muted); align-self: center; }
.wallet-network dd { margin: 0; font-family: var(--brand-font-label); font-size: 12px; color: var(--brand-text-primary); overflow-wrap: anywhere; user-select: all; }