@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #101827;
  --paper: #f7f6f3;
  --underline: rgba(16, 24, 39, 0.35);
  --focus: #e32620;
  --u: 1vh;
}

@supports (height: 1svh) {
  :root {
    --u: 1svh;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.125rem, 0.9rem + 0.4vw, 1.5rem);
  line-height: 1.5;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
p {
  margin: 0;
  font: inherit;
}

a,
.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--underline);
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.sc {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

.nowrap {
  white-space: nowrap;
}

/* The sheet holds an oversized mark and the text set over it. Every position
   comes from the same variables, so the mark, the text, and the knockout
   copy of the text always line up. */

.sheet {
  /* mark size and position, relative to the sheet */
  --mh: calc(128 * var(--u));
  --mw: calc(var(--mh) * 0.752);
  --mx: 41vw;
  --my: calc(-14 * var(--u));
  /* text column: its right edge lands a fifth of the way into the mark */
  --tw: 27em;
  --tx: max(4vw, calc(var(--mx) + 0.2 * var(--mw) - var(--tw)));
  --top: calc(31 * var(--u));

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.sheet,
.knockout {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--top) 1.5rem 0 var(--tx);
}

.layer {
  position: relative;
  max-width: var(--tw);
}

.lead {
  text-wrap: pretty;
}

.lead h1 {
  display: inline;
}

.foot {
  align-self: end;
  padding: 3rem 0 2.25rem;
  font-size: 0.75em;
}

.mark {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: var(--mw);
  height: var(--mh);
  max-width: none;
}

.knockout {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--paper);
  pointer-events: none;
  user-select: none;
  -webkit-mask: url("assets/night-heron-mark.svg") var(--mx) var(--my) / var(--mw) var(--mh) no-repeat;
  mask: url("assets/night-heron-mark.svg") var(--mx) var(--my) / var(--mw) var(--mh) no-repeat;
}

.knockout .link {
  text-decoration-color: currentColor;
}

/* Narrow screens: a small mark on top, aligned with the text, and the text on
   plain paper below it (no knockout). */

@media (max-width: 52rem) {
  .sheet {
    --mh: 9em;
    --mx: 1.5rem;
    --my: 3.25em;
    --tw: 32em;
    --tx: 1.5rem;
    --top: calc(3.25em + 9em + 2.25em);
  }

  .knockout {
    display: none;
  }
}

@media print {
  .knockout,
  .mark {
    display: none;
  }

  .sheet {
    min-height: 0;
    padding: 0;
  }
}