/* ---------- Fonts (self-hosted, never Google Fonts CDN) ---------- */

@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/epilogue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/epilogue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  --ink: #1C1814;
  --parchment: #F5F0E8;
  --stone: #8C8277;
  --dust: #D8D1C4;
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--parchment);
  font-family: 'Epilogue', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ---------- Layout ---------- */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px clamp(28px, 4vh, 56px);
  text-align: center;
}

/* ---------- Top area (wordmark + statement) ----------
   On desktop this block is given a fixed height of
   "50vh minus half the cards row's height" so that the cards row
   (the true focal point of the page) lands at the exact vertical
   center of the viewport, regardless of how tall the text above it
   is. See the .cards row height math at the media query below. */

.top-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: clamp(28px, 4vh, 56px);
}

/* ---------- Wordmark ---------- */

.wordmark {
  margin-bottom: clamp(20px, 3vh, 32px);
}

.wordmark-img {
  width: min(42vw, 204px);
  height: auto;
  display: block;
}

/* ---------- Statement ---------- */

.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.positioning {
  font-size: clamp(0.96rem, 0.79rem + 0.6vw, 1.21rem);
  font-weight: 300;
  line-height: 1.5;
  width: min(88vw, 800px);
  max-width: 800px;
  color: var(--parchment);
}

.subline {
  font-size: 1rem;
  font-weight: 400;
  color: var(--stone);
  max-width: 40ch;
}

/* ---------- Cards ---------- */

.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  margin-top: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s ease;
}

.card:hover,
.card:focus-visible {
  opacity: 0.7;
}

.card-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
}

.card-logo {
  display: block;
  height: auto;
}

.card-logo--spanda {
  width: 225px;
  /* SPANDA's glyphs run flush to the bottom of its source PNG, while
     PRAVAH's source PNG has ~255px of rule+dot beneath its glyphs
     (out of 884px total). Centering both images alone leaves the two
     word-baselines about 1.2px apart at this size; this nudge closes
     that gap so the "SPANDA." and "PRAVAH" baselines land on the same
     line. Scales with logo size — recompute if these widths change. */
  transform: translateY(-1.2px);
}

.card-logo--pravah {
  width: 195px;
}

.card-desc {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--stone);
}

@media (min-width: 640px) {
  .cards {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 64px;
    margin-top: 0;
  }

  /* True vertical centering of the cards row, desktop only.
     A single card's rendered height here is fixed and known:
     logo frame 34px + card gap 10px + descriptor line ~24px = 68px.
     Giving .top-area exactly "50vh minus half that" makes the cards
     row that follows it in normal flow land with its own vertical
     center at 50vh, however tall the wordmark/positioning text above
     it turns out to be. min-height (not height) is deliberate: if
     that text ever needs more room than this on a short window, the
     box grows to fit it instead of letting it overflow into the cards
     row below — centering degrades gracefully rather than overlapping
     anything. */
  .top-area {
    min-height: calc(50vh - 34px);
  }

  .statement {
    flex: 1;
    justify-content: flex-start;
    gap: 0;
  }

  .subline {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* ---------- Registered details ---------- */

.details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 24px;
}

.office {
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--stone);
}

.legal-ids {
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--stone);
}

.email a {
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--parchment);
  text-underline-offset: 3px;
}

.email a:hover,
.email a:focus-visible {
  text-decoration: underline;
}

.copyright {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--stone);
}