:root {
  --cream: #f3ede0;
  --linen: #e6ddc7;
  --ecru: #ede6d4;
  --navy: #0b1d3a;
  --brass: #c9a84c;
  --pink: #ff2d9b;
  --green: #22d63b;
  --sheet-size: calc(71vw + 71vh + 420px);
  --square: 142px;
  --hairline: 1.5px;
  --display: Didot, "Bodoni 72", Georgia, serif;
  color-scheme: light;
}

@media (resolution < 1.5dppx) {
  :root { --hairline: 2px; }
}

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

html {
  background: var(--cream);
  color: var(--navy);
}

body {
  margin: 0;
  font: 1.075rem/1.65 Charter, "Iowan Old Style", Georgia, serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, blockquote, figure, dl, dd { margin: 0; }

.argyle {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sheet-size);
  height: var(--sheet-size);
  translate: -50% -50%;
  rotate: 45deg;
  will-change: transform;
}

.diamonds {
  background: conic-gradient(var(--linen) 25%, var(--cream) 0 50%, var(--ecru) 0 75%, var(--cream) 0) 0 0 / calc(var(--square) * 2) calc(var(--square) * 2);
  animation: drift 110s linear infinite;
}

.lines, .moire {
  background-image: linear-gradient(90deg, var(--pink) 0 var(--hairline), transparent 0), linear-gradient(0deg, var(--green) 0 var(--hairline), transparent 0);
  background-position: calc(var(--square) / 2) 0, 0 calc(var(--square) / 2);
  background-size: var(--square) var(--square);
}

.moire {
  --square: 136px;
  opacity: .5;
  animation: shift 70s linear infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgb(11 29 58 / .08) 100%);
}

@keyframes drift { to { transform: translate3d(-284px, 0, 0); } }
@keyframes shift { to { transform: translate3d(-272px, 0, 0); } }

main { position: relative; z-index: 1; }

.hero {
  min-height: 58vh;
  display: grid;
  place-items: center;
  padding: 8vh 4vw 5vh;
  text-align: center;
}

.ycr {
  color: inherit;
  cursor: pointer;
  display: grid;
  font: 700 clamp(5rem, min(41vw, 28vh), 16rem) / .95 var(--display);
  letter-spacing: -.01em;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

.ycr > span { grid-area: 1 / 1; transition: opacity .25s ease; }
.ycr .italic { color: var(--pink); font-style: italic; font-weight: 400; opacity: 0; }
.ycr.green .italic { color: var(--green); }
.ycr:hover .roman { opacity: 0; }
.ycr:hover .italic { opacity: 1; }
.ycr:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

.ruled, .end {
  display: flex;
  align-items: center;
  gap: 1.1em;
  font: 400 clamp(12px, 1.25vw, 18px) / 1 Copperplate, serif;
  letter-spacing: .42em;
  text-indent: .42em;
}

.ruled { width: min(84vw, 34rem); margin: 1.6rem auto 0; }
.ruled::before, .ruled::after, .end::before, .end::after { content: ""; flex: 1; height: 1px; background: var(--brass); }
.ruled span { white-space: nowrap; }
.est { margin-top: 1rem; font: 300 11px/1 Copperplate, serif; letter-spacing: .35em; text-indent: .35em; opacity: .55; }

article {
  width: min(800px, calc(100% - 32px));
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 30px 80px rgb(11 29 58 / .18);
}

article > header { padding: clamp(32px, 5vw, 56px); background: var(--navy); color: var(--cream); }
article h1 { font: 700 clamp(2rem, 4.5vw, 3.25rem) / 1.05 var(--display); letter-spacing: -.01em; }
.sub { margin-top: .9rem; font-size: 1.2rem; font-style: italic; line-height: 1.4; opacity: .8; }
.body { padding: clamp(28px, 5vw, 56px); }
.body p + p { margin-top: 1.2em; }

.cap {
  float: left;
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  margin: .14em .75rem 0 0;
  place-items: center;
  border: 3px double var(--green);
  color: var(--pink);
  font: 700 2.7rem/1 var(--display);
}

a { color: inherit; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }

h2 { margin: 2.2em 0 .8em; font: 700 1.7rem/1.2 var(--display); }
h2::after { content: ""; display: block; width: 2.4rem; height: 2px; margin-top: .55rem; background: linear-gradient(90deg, var(--pink) 50%, var(--green) 0); }
h3 { margin: 1.7em 0 .55em; font: 700 1.1rem/1.3 var(--display); }

.tan {
  margin: 1.8em 0;
  padding: 1.2em 1.4em;
  border-left: 3px solid var(--brass);
  background: var(--cream);
  font-size: 1.15rem;
  font-style: italic;
}

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.2rem; margin: 1.4em 0; }
.facts dt { font: 400 .72em/1.5 Copperplate, serif; letter-spacing: .12em; text-transform: uppercase; }
.facts dd { min-width: 0; overflow-wrap: anywhere; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { padding: .08em .3em; border-radius: 3px; background: var(--cream); font-size: .88em; }
pre { overflow: auto; margin: 1.2em 0; padding: 1rem 1.1rem; border-left: 3px solid var(--green); background: var(--navy); color: var(--cream); font-size: .82rem; line-height: 1.55; }
pre code { padding: 0; background: transparent; font-size: inherit; }

ol, ul { padding-left: 1.35em; }
li + li { margin-top: .5em; }

.note { margin: 1.8em 0; padding: 1em 1.2em; border-top: 2px solid var(--pink); border-bottom: 1px solid var(--brass); background: var(--cream); font-size: .95em; }
.note b { margin-right: .7em; color: var(--green); font: 400 .75em/1 Copperplate, serif; letter-spacing: .22em; }

.end { margin-top: 2.8em; font-size: 11px; }

footer { padding: 6vh 16px 8vh; text-align: center; }
.tag { font: 700 1.75rem/1 "Snell Roundhand", "Apple Chancery", cursive; }
.fine { margin-top: 1rem; font: 300 10px/1 Copperplate, serif; letter-spacing: .35em; text-indent: .35em; opacity: .55; }

@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; gap: .15rem; }
  .facts dd + dt { margin-top: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .ycr > span { transition: none; }
}