:root {
  --woad: #5876d5;
  --ink: #000;
  --line: rgba(0, 0, 0, 0.55);
  /* Inset of the frame from the viewport edge; 3.5% of width in the design */
  --inset: 3.5vw;
}

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

html, body { height: 100%; margin: 0; }

body {
  background: var(--woad);
  color: var(--ink);
  font-family: Georgia, serif;
  padding: var(--inset);
  -webkit-font-smoothing: antialiased;
}

.frame {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2 * var(--inset));
  min-height: calc(100dvh - 2 * var(--inset));
  border: 1px solid var(--line);
}

.panel {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
}

.panel--logo { border-bottom: 1px solid var(--line); }

.logo { margin: 0; line-height: 0; }
.logo img {
  /* 36% of viewport width in the design; wider on phones so it still reads */
  width: clamp(200px, 36vw, 560px);
  height: auto;
  display: block;
}

/* Copy lines are SVG outlines of ABC Arizona Flare (desktop licence only, see README).
   Widths are the design's proportions of the frame width; the vh cap keeps short,
   wide viewports from overflowing the lower panel. --s scales everything up on phones. */
.panel--copy { --s: 1; }

.t { display: block; height: auto; }
.t--headline { width: min(calc(37.5% * var(--s)), 50vh); }
.t--strap    { width: min(calc(49% * var(--s)), 65.3vh); margin-top: -0.8vh; }
.t--details  { width: min(calc(54.7% * var(--s)), 73vh); margin-top: 6vh; }
.t--register { width: min(calc(30.5% * var(--s)), 41vh); margin-top: 1.2vh; }

/* Browsers give SVG <a> the default link colour; keep it ink like the design */
.t a { color: inherit; cursor: pointer; }
.t a .ul { fill: currentColor; }
.t a:hover .ul, .t a:focus .ul { fill: var(--ink); height: 40px; }
.t a:focus { outline: none; }
.t a:focus-visible path { fill: var(--peach, #fc7e49); }

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

/* Phones: the two halves no longer need to be equal, let content set height */
@media (max-width: 600px) {
  :root { --inset: 16px; }
  .panel { flex-basis: auto; padding: 3rem 1.25rem; }
  .panel--logo { flex-grow: 0.8; }
  .panel--copy { --s: 1.75; }
  .t--details { margin-top: 2rem; }
}