@font-face {
  font-family: "Platypi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/platypi-500.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --paper: #dfdfd8;
  --ink: #11151c;
  --frame: clamp(0.75rem, 1.65vw, 1.75rem);
  font-family: Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }

.cover {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(26rem, 1fr);
  padding: 0 var(--frame) var(--frame);
}

.masthead {
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 3vh, 2.5rem) 1rem clamp(1.5rem, 3vh, 2.5rem);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(17.5rem, 66vw);
}

.brand-signet { width: 4.5rem; height: auto; }
.brand-wordmark { width: 100%; height: auto; }

.landscape {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 26rem;
  background: #4c6762;
}

.landscape-image,
.landscape-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landscape-image {
  z-index: -2;
  object-fit: cover;
  object-position: center 48%;
}

.landscape-shade {
  z-index: -1;
  background: linear-gradient(180deg, transparent 30%, rgba(17, 21, 28, 0.12) 55%, rgba(17, 21, 28, 0.64) 100%);
}

h1 {
  margin: 0;
  padding: 5rem 1rem clamp(2rem, 5.5vh, 4rem);
  color: var(--paper);
  font-family: "Platypi", Georgia, serif;
  font-size: clamp(3.6rem, 11.4vw, 11.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.05em;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 600px) {
  .cover { grid-template-rows: auto minmax(29rem, 1fr); }
  .masthead { padding: 1.6rem 1rem; }
  .brand { width: 14.5rem; gap: 0.7rem; }
  .brand-signet { width: 4rem; }
  .landscape { min-height: 29rem; }
  .landscape-image { object-position: 80% center; }
  h1 { font-size: clamp(3.6rem, 15vw, 5.6rem); max-width: 7em; padding: 5rem 1rem 2.5rem; line-height: 1.06; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand { animation: appear 900ms ease-out both; }
  h1 { animation: appear 1.2s 180ms ease-out both; }
  @keyframes appear { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }
}