@font-face {
  font-family: "Cayliath Brush";
  src: url("fonts/cayliathbrush-webfont.woff2") format("woff2"),
       url("fonts/cayliathbrush-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f3efe6;
  --ink: #2b2923;
  --rust: #8c4740;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --script: "Cayliath Brush", serif;
  --rule-left: 4.3vw;
  --content-left: 8.2vw;
  --content-right: 8vw;
  --footer-band: 5.5vh;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  background-image: url("assets/page-texture.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

p,
h1 {
  margin: 0;
}

.rules {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.rule-v,
.rule-h {
  position: absolute;
  background: var(--rust);
}

.rule-v {
  top: 0;
  bottom: 0;
  left: var(--rule-left);
  width: 1px;
}

.rule-h {
  left: 0;
  right: 0;
  bottom: var(--footer-band);
  height: 1px;
}

header {
  position: absolute;
  top: 5.2vh;
  left: var(--content-left);
  z-index: 1;
}

.wordmark {
  color: var(--rust);
  font-family: var(--script);
  font-size: clamp(2.9rem, 6.4vw, 4.4rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0.01em;
}

.js .wordmark {
  opacity: 0;
}

.js.fonts-ready .wordmark {
  opacity: 1;
}

main {
  position: absolute;
  left: var(--content-left);
  right: var(--content-right);
  top: 18vh;
  bottom: calc(var(--footer-band) + 2vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 38rem;
  z-index: 1;
}

h1 {
  font-size: clamp(2.35rem, 6.5vw, 4.75rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
}

.kicker {
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 1.85vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.lede {
  margin-top: 1.35rem;
  font-size: clamp(0.92rem, 1.45vw, 1.08rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.65;
}

.status {
  margin-top: 2.4rem;
  padding: 0.9em 0.1em;
  border-top: 1px solid var(--rust);
  border-bottom: 1px solid var(--rust);
  font-size: clamp(0.7rem, 0.92vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

footer {
  position: absolute;
  left: var(--content-left);
  right: var(--content-right);
  bottom: 0;
  height: var(--footer-band);
  display: flex;
  align-items: center;
  z-index: 1;
}

footer p {
  color: var(--rust);
  font-size: clamp(0.58rem, 0.72vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

::selection {
  background: var(--rust);
  color: var(--bg);
}

@media (max-width: 860px) {
  :root {
    --rule-left: 1.25rem;
    --content-left: 2.15rem;
    --content-right: 1.5rem;
    --footer-band: 3.6rem;
  }

  header {
    top: 1.5rem;
  }

  main {
    top: 7.5rem;
    max-width: none;
  }

  h1 {
    white-space: normal;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 520px) {
  .wordmark {
    font-size: 2.5rem;
  }

  h1 {
    font-size: 1.85rem;
  }
}