@property --y-over {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --c-inset {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@font-face {
  font-family: TeXGyreHeros;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/texgyreheros-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #ffffff;
  --secondary: #f3f1ee;
  --field: #002147;
  --sans: TeXGyreHeros, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --frame: 1.25rem;
  --inset: 2.5rem;
  --gap: 1.42rem;
}

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

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--inset);
  color: var(--ink);
  background-color: var(--field);
  font-family: var(--sans);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: var(--frame);
  border: 1px solid rgba(243, 241, 238, 0.35);
  pointer-events: none;
}

::selection {
  background: #f3f1ee;
  color: #002147;
}

.sheet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  min-height: calc(100vh - (var(--inset) * 2));
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 4.35rem);
  --y-over: 0.121em;
  --c-inset: 0.043em;
}

.lockup {
  transform: translateY(-11.8vh);
}

h1 .mark {
  position: relative;
  display: inline-block;
}

h1 .mark::after {
  content: "";
  position: absolute;
  left: var(--c-inset);
  right: 0;
  top: calc(100% + var(--y-over) + var(--gap));
  border-top: 1px solid var(--ink);
}

h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: inherit;
  letter-spacing: -0.01em;
  line-height: 1.05;
  hyphens: none;
}

p {
  margin: calc(var(--y-over) + (var(--gap) * 2) + 1px - 0.41rem) 0 0 var(--c-inset);
  padding-left: 0.06em;
  color: var(--secondary);
  font-size: 1.05rem;
}

@media (max-width: 720px) {
  :root {
    --frame: 0.7rem;
    --inset: 1.4rem;
  }

  .sheet {
    font-size: clamp(1.85rem, 8.4vw, 2.6rem);
  }
}

@media print {
  body {
    padding: 0;
    background: white;
    color: #002147;
  }

  p {
    color: #122f53;
  }

  h1 .mark::after {
    border-top-color: #002147;
  }

  body::before {
    display: none;
  }

  .sheet {
    min-height: auto;
    width: auto;
  }

  .lockup {
    transform: none;
  }
}