@font-face{
  font-family: "League Mono";
  src: url("/fonts/LeagueMono-VF.woff2") format("woff2-variations");
  font-weight: 200 900; font-stretch: 75% 125%; font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Goudy Bookletter";
  src: url("/fonts/goudy_bookletter_1911.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* baseline */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root { --max: 720px; --pad: 16px; }
body {
  margin: 0;
  min-height: 100svh;              /* mobile-safe viewport */
  display: grid;

  /* 3x3 viewport grid with a fixed center column */
  grid-template:
    "tl  tc  tr" minmax(var(--pad), max-content)
    "ml  cc  mr" 1fr
    "bl  bc  br" minmax(var(--pad), max-content)
    / minmax(var(--pad), 1fr) minmax(0, var(--max)) minmax(var(--pad), 1fr);

  background: #0e0e0e;
  color: #e6e6e6;
}

/* center content */
.center {
  grid-area: cc;
  place-self: center;
  text-align: center;
  width: 100%;
  padding-inline: var(--pad);
}

.mark { width: 72px; height: auto; opacity: .9; margin-bottom: 16px; }

h1 {
  font-family: "Goudy Bookletter";
  font-size: clamp(42px, 5.2vw, 40px);
  font-weight: 400;
}

/* buttons */
.cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: "Goudy Bookletter";
  letter-spacing: .10em;       /* your existing style */
  text-transform: uppercase;
  display: inline-block;
  padding: 10px 14px;
  border: 2px solid #e6e6e6;
  text-decoration: none;
  color: inherit;
  letter-spacing: .10em;
  font-size: 12px;
  transition: border-color 2s ease, color 2s ease;
}

/* bottom nav row */
.bottom {
  font-family: "League Mono";
  letter-spacing: .12em;
  text-transform: uppercase;
  grid-area: bc;
  display: flex;
  justify-self: center;
  align-self: end;
  padding-bottom: var(--pad);
  flex-wrap: wrap;
}
.bottom a {
  color: #cfcfcf; text-decoration: none; letter-spacing: .12em;
  font-size: 12px; text-transform: uppercase;
  transition: border-color 2s ease, color 2s ease;
}
.bottom a:hover { 
  border-color: #fff; color: #fff; 
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { 
  border-color: #fff; color: #fff; 
  transition: border-color 0.15s ease, color 0.15s ease;
}