@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"),
       url("assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Syne";
  src: url("assets/fonts/Syne-Variable.woff2") format("woff2"),
       url("assets/fonts/Syne-Variable.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #0c0c0b;
  --ink: #f2eee6;
  --ink-soft: rgba(242, 238, 230, 0.62);
  --rule: rgba(242, 238, 230, 0.18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}

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

html {
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Syne", "Avenir Next", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  padding: 0.6rem 0.85rem;
  background: #1a1a18;
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding:
    calc(clamp(1.25rem, 3.5vw, 2.75rem) + var(--safe-top))
    calc(clamp(1.25rem, 4vw, 3.5rem) + var(--safe-right))
    calc(clamp(1.25rem, 3.5vw, 2.75rem) + var(--safe-bottom))
    calc(clamp(1.25rem, 4vw, 3.5rem) + var(--safe-left));
}

.mast {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-content: start;
  max-width: 46rem;
}

.mark-label {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-weight: 500;
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: 0.34em;
}

.wordmark {
  margin: 0;
  font-family: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.plate {
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.plate picture,
.plate-img {
  display: block;
  width: 100%;
  height: 100%;
}

.plate-img {
  object-fit: cover;
  object-position: 62% 48%;
  border: 0;
  background: #161614
    url("assets/terrain-lq.jpg") center / cover no-repeat;
  filter: none;
  opacity: 0;
  animation: plate-in 1.1s ease-out 0.08s forwards;
}

@keyframes plate-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Desktop / wide: asymmetric title-left, plate dominating right-bottom */
@media (min-width: 900px) {
  .page {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.7fr);
    grid-template-rows: 1fr;
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding:
      calc(clamp(2rem, 4vw, 3.5rem) + var(--safe-top))
      calc(clamp(2rem, 4vw, 3.75rem) + var(--safe-right))
      calc(clamp(2rem, 4vw, 3.5rem) + var(--safe-bottom))
      calc(clamp(2rem, 4vw, 3.75rem) + var(--safe-left));
  }

  .mast {
    align-content: end;
    padding-bottom: 0.35rem;
    max-width: none;
  }

  .wordmark {
    font-size: clamp(4.5rem, 7.2vw, 7.75rem);
    max-width: 7.2ch;
  }

  .plate {
    align-items: stretch;
  }

  .plate-img {
    min-height: calc(100dvh - 4rem - var(--safe-top) - var(--safe-bottom));
  }
}

@media (max-width: 899px) {
  .plate {
    min-height: min(58vh, 520px);
  }

  .plate-img {
    min-height: min(58vh, 520px);
  }
}

@media (max-height: 700px) and (min-width: 900px) {
  .wordmark {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
  }
}

@media (prefers-contrast: more) {
  .mark-label {
    color: #f2eee6;
  }

  .plate-img {
    outline: 1px solid var(--rule);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plate-img {
    animation: none;
    opacity: 1;
  }
}

@supports not (min-height: 100dvh) {
  body,
  .page {
    min-height: 100vh;
  }

  @media (min-width: 900px) {
    .plate-img {
      min-height: calc(100vh - 4rem);
    }
  }
}