/* Equalls — pre-launch holding page.
   Standalone: it shares the palette and Sentinel with the site but none of
   the scroll machinery, so it can ship and change on its own. */

@font-face {
  font-family: 'Publish Gothic Condensed';
  src: url('fonts/PublishGothicCondensed-Extrabold-Trial.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('fonts/Sentinel-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('fonts/Sentinel-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0909af;
  --ivory: #fffceb;
  --pad: clamp(20px, 3.2vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--blue);
  color: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

.holding {
  position: relative;
  min-height: 100svh;
  padding: var(--pad);
  display: grid;
  place-items: center;
}

/* --- corners --- */
.wordmark {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  color: var(--ivory);
}
.wordmark svg {
  display: block;
  width: clamp(86px, 5.6vw, 150px);
  height: auto;
  aspect-ratio: 95.04 / 30.16;
}

/* --- the shout ---
   NOTE: Publish Gothic Condensed Extrabold here is a TRIAL cut. This page is
   the one that goes on the real domain, so it needs a licensed web cut. */
.shout {
  margin: 0;
  max-width: none; /* the breaks are authored, so nothing should re-wrap */
  font-family: 'Publish Gothic Condensed', Impact, 'Arial Narrow Bold', sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 7vw, 176px);
  line-height: 0.82;
  letter-spacing: -0.005em;
  text-align: center;
  text-transform: uppercase;
}

/* --- the two footings --- */
.foot {
  position: absolute;
  bottom: var(--pad);
  margin: 0;
  font-family: 'Sentinel', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(14px, 1.15vw, 20px);
}
.foot-left { left: var(--pad); }
.foot-right { right: var(--pad); }
.foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
  transition: opacity 0.2s ease;
}
.foot a:hover { opacity: 0.7; }

/* on a phone everything sits on the centre line, the footings stacking in
   the comp's reading order rather than splitting to the corners */
@media (max-width: 560px) {
  .holding { padding-bottom: calc(var(--pad) * 3.4); }
  .wordmark,
  .foot {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
  }
  /* the lockup centres on the word, not the word plus mark: the letters run
     0-88.44 of the 95.04-unit box, so half the 6.6 units of dead space on
     the right (3.472%) comes back off the centring shift */
  .wordmark { transform: translateX(calc(-50% + 3.472%)); }
  .foot-left { bottom: calc(var(--pad) * 2.2); }
}