:root {
  --paper:    #FBF7EF;
  --ink:      #1F1B16;
  --ink-soft: #554C41;
  --crux:     #B04E00;
  --mark-dot: #F26B1D;
  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Avenir", "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;
  --big: 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #16130E;
    --ink:      #EFE7D9;
    --ink-soft: #B6AC9B;
    --crux:     #F79646;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

main {
  --gutter: clamp(16px, 4vw, 48px);
  --fit: calc((100vw - 16px) / 1.8324);
  --lw-big: min(1100px, 66.667vw, max(var(--fit), 83.77vw - 220px));
  --lw-fit: min(1000px, var(--fit));
  --lw: calc(var(--big) * var(--lw-big) + (1 - var(--big)) * var(--lw-fit));
  --m: calc(var(--lw) * 15 / 107.33);
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px var(--gutter) max(48px, 9vh);
  text-align: center;
  overflow-x: clip;
}

.wordmark { margin: 0; color: var(--ink); line-height: 0; font-size: inherit; font-weight: inherit; }
.lockup { display: block; width: var(--lw); height: var(--m); max-width: none; overflow: visible; }

.pe {
  position: relative; display: block; width: fit-content; margin: 0 auto;
  padding: 0 calc(var(--m) * 12 / 32) calc(var(--m) * 30 / 32);
}
.pe-stamp {
  position: absolute; top: calc(100% - var(--m) * 30 / 32 + var(--m) * 50 / 180);
  right: calc(var(--m) * 12 / 32 - var(--m) * 46 / 180);
  font: 600 max(9.5px, var(--m) * 46 / 180)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--crux); border: max(1px, .109em) solid var(--crux); border-radius: .304em; padding: .413em .652em .37em .761em;
  rotate: -4deg; pointer-events: none; user-select: none; -webkit-user-select: none;
}

.line {
  margin: clamp(20px, 4vh, 44px) 0 0; max-width: clamp(20em, var(--lw), 30em);
  font-family: var(--serif); font-size: clamp(17px, 0.9vw + 12px, 26px); line-height: 1.45;
  color: var(--ink-soft); text-wrap: balance;
}

html.home-mark-due .wordmark .pe .lockup > use { visibility: hidden; animation: home-mark-safe 0s 6s forwards; }
html.home-mark-due .wordmark .pe .lockup > path,
html.home-mark-due .wordmark .pe .pe-stamp { opacity: 0; animation: home-mark-safe 0s 6s forwards; }
@keyframes home-mark-safe { to { visibility: visible; opacity: 1; } }