:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #161310;
  --muted: #746f67;
  --rule: #ddd6cc;
  --link: #321c9c;
  --visited: #75408a;
  --soft: #f4efe6;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.45;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:visited {
  color: var(--visited);
}

button {
  border: 0;
  padding: 0;
  color: var(--link);
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.site-head {
  position: relative;
  width: min(690px, calc(100% - 28px));
  margin-inline: auto;
  padding: 14px 0 0;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.site-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(560px, 82%);
  border-top: 1px solid var(--rule);
  transform: translateX(-50%);
}

.masthead-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
}

.masthead-link:focus-visible {
  outline: 1px dotted var(--ink);
  outline-offset: 4px;
}

.masthead-image {
  display: block;
  width: min(94px, 30vw);
  height: auto;
  margin: 14px auto 10px;
}

.title {
  display: block;
  max-width: 1000px;
  min-height: 1em;
  margin: 8px auto 16px;
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(38px, 6.7vw, 70px);
  font-weight: normal;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.title:visited {
  color: var(--ink);
}

.dateline {
  border-top: 1px solid var(--rule);
  padding: 7px 0 5px;
  color: var(--ink);
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.2;
}

.hat-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 2px 0 8px;
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1;
}

.hat-control input {
  width: min(210px, 46vw);
  accent-color: var(--ink);
}

.hat-letter {
  --hat-bottom: 0.72em;
  --hat-height: 0.62em;
  --hat-inner-height: 0.52em;
  --hat-inner-width: 0.42em;
  --hat-size: 0.72em;
  --hat-width: 0.52em;
  --hat-x: 0em;

  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
}

.hat-letter::before,
.hat-letter::after {
  position: absolute;
  left: calc(50% + var(--hat-x));
  bottom: var(--hat-bottom);
  width: var(--hat-width);
  height: var(--hat-height);
  content: "";
  pointer-events: none;
  transform: translateX(-50%) rotate(-7deg);
  transform-origin: bottom center;
}

.hat-letter::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1.5 22 30.5H2Z' fill='none' stroke='%238d887f' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08));
}

.hat-letter::after {
  display: none;
}

.hat-word {
  white-space: nowrap;
}

.photo-caption .hat-word {
  white-space: normal;
}

.title .hat-letter {
  --hat-bottom: 0.9em;
  --hat-height: 0.62em;
  --hat-width: 0.48em;
  line-height: 0.96;
}

.photo-caption .hat-letter {
  --hat-bottom: 0.72em;
  --hat-size: 0.68em;
  --hat-height: 0.5em;
  --hat-inner-height: 0.49em;
  --hat-inner-width: 0.38em;
  --hat-width: 0.48em;
}

.reader .hat-letter,
.about .hat-letter {
  --hat-bottom: 0.78em;
  --hat-size: 0.52em;
  --hat-height: 0.38em;
  --hat-inner-height: 0.34em;
  --hat-inner-width: 0.26em;
  --hat-width: 0.34em;
}

.piece-head .hat-letter {
  --hat-bottom: 0.88em;
  --hat-size: 0.58em;
  --hat-height: 0.44em;
  --hat-inner-height: 0.43em;
  --hat-inner-width: 0.34em;
  --hat-width: 0.44em;
}

.hat-letter[data-letter="a"],
.hat-letter[data-letter="c"],
.hat-letter[data-letter="e"],
.hat-letter[data-letter="g"],
.hat-letter[data-letter="m"],
.hat-letter[data-letter="n"],
.hat-letter[data-letter="o"],
.hat-letter[data-letter="p"],
.hat-letter[data-letter="q"],
.hat-letter[data-letter="r"],
.hat-letter[data-letter="s"],
.hat-letter[data-letter="u"],
.hat-letter[data-letter="v"],
.hat-letter[data-letter="w"],
.hat-letter[data-letter="x"],
.hat-letter[data-letter="y"],
.hat-letter[data-letter="z"] {
  --hat-bottom: 0.68em;
}

.hat-letter[data-letter="I"],
.hat-letter[data-letter="i"],
.hat-letter[data-letter="j"],
.hat-letter[data-letter="l"],
.hat-letter[data-letter="1"] {
  --hat-size: 0.62em;
  --hat-height: 0.5em;
  --hat-inner-height: 0.4em;
  --hat-inner-width: 0.24em;
  --hat-width: 0.32em;
}

.hat-letter[data-letter="f"],
.hat-letter[data-letter="r"],
.hat-letter[data-letter="t"] {
  --hat-size: 0.66em;
  --hat-inner-width: 0.3em;
  --hat-width: 0.4em;
}

.hat-letter[data-letter="d"],
.hat-letter[data-letter="f"],
.hat-letter[data-letter="h"],
.hat-letter[data-letter="k"],
.hat-letter[data-letter="l"],
.hat-letter[data-letter="b"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-letter="i"],
.hat-letter[data-letter="j"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-letter="t"] {
  --hat-bottom: 0.8em;
}

.hat-letter[data-letter="M"],
.hat-letter[data-letter="W"],
.hat-letter[data-letter="m"],
.hat-letter[data-letter="w"] {
  --hat-size: 0.78em;
  --hat-inner-width: 0.5em;
  --hat-width: 0.64em;
}

.hat-letter[data-letter="A"],
.hat-letter[data-letter="V"],
.hat-letter[data-letter="Y"],
.hat-letter[data-letter="v"],
.hat-letter[data-letter="y"] {
  --hat-x: -0.03em;
}

.hat-letter[data-letter="J"],
.hat-letter[data-letter="j"],
.hat-letter[data-letter="Q"],
.hat-letter[data-letter="q"] {
  --hat-x: 0.04em;
}

.reader .hat-letter[data-letter="b"],
.reader .hat-letter[data-letter="d"],
.reader .hat-letter[data-letter="f"],
.reader .hat-letter[data-letter="h"],
.reader .hat-letter[data-letter="i"],
.reader .hat-letter[data-letter="j"],
.reader .hat-letter[data-letter="k"],
.reader .hat-letter[data-letter="l"],
.reader .hat-letter[data-letter="t"],
.about .hat-letter[data-letter="b"],
.about .hat-letter[data-letter="d"],
.about .hat-letter[data-letter="f"],
.about .hat-letter[data-letter="h"],
.about .hat-letter[data-letter="i"],
.about .hat-letter[data-letter="j"],
.about .hat-letter[data-letter="k"],
.about .hat-letter[data-letter="l"],
.about .hat-letter[data-letter="t"] {
  --hat-bottom: 0.78em;
}

.photo-caption .hat-letter[data-letter="b"],
.photo-caption .hat-letter[data-letter="d"],
.photo-caption .hat-letter[data-letter="f"],
.photo-caption .hat-letter[data-letter="h"],
.photo-caption .hat-letter[data-letter="i"],
.photo-caption .hat-letter[data-letter="j"],
.photo-caption .hat-letter[data-letter="k"],
.photo-caption .hat-letter[data-letter="l"],
.photo-caption .hat-letter[data-letter="t"] {
  --hat-bottom: 0.76em;
}

.hat-letter[data-case="upper"] {
  --hat-bottom: 0.76em;
  --hat-height: 0.5em;
  --hat-width: 0.4em;
}

.hat-letter[data-case="upper"][data-letter="I"],
.hat-letter[data-case="upper"][data-letter="J"] {
  --hat-bottom: 0.82em;
  --hat-height: 0.46em;
  --hat-width: 0.3em;
}

.hat-letter[data-case="upper"][data-letter="M"],
.hat-letter[data-case="upper"][data-letter="W"] {
  --hat-width: 0.58em;
}

.hat-letter[data-font="courier"][data-case="lower"] {
  --hat-bottom: 0.68em;
  --hat-height: 0.5em;
  --hat-width: 0.4em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="j"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.8em;
}

.hat-letter[data-font="arial"][data-case="lower"],
.hat-letter[data-font="helvetica"][data-case="lower"] {
  --hat-bottom: 0.64em;
  --hat-height: 0.48em;
  --hat-width: 0.38em;
}

.hat-letter[data-font="arial"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="l"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.86em;
}

.hat-letter[data-font="arial"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="j"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="j"] {
  --hat-bottom: 0.86em;
}

.hat-letter[data-font="arial"][data-case="lower"][data-letter="t"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.76em;
}

.hat-letter[data-font="georgia"][data-case="lower"],
.hat-letter[data-font="times"][data-case="lower"] {
  --hat-bottom: 0.62em;
  --hat-height: 0.46em;
  --hat-width: 0.36em;
}

.hat-letter[data-font="georgia"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="l"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="georgia"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="j"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="j"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="georgia"][data-case="lower"][data-letter="t"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.72em;
}

.hat-letter[data-font="georgia"][data-case="upper"],
.hat-letter[data-font="times"][data-case="upper"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-case="lower"] {
  --hat-bottom: 0.68em;
  --hat-height: 0.5em;
  --hat-width: 0.4em;
}

.hat-letter[data-case="lower"][data-letter="b"],
.hat-letter[data-case="lower"][data-letter="d"],
.hat-letter[data-case="lower"][data-letter="f"],
.hat-letter[data-case="lower"][data-letter="h"],
.hat-letter[data-case="lower"][data-letter="k"],
.hat-letter[data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-case="lower"][data-letter="i"],
.hat-letter[data-case="lower"][data-letter="j"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.8em;
}

.hat-letter[data-case="upper"] {
  --hat-bottom: 0.76em;
  --hat-height: 0.5em;
  --hat-width: 0.4em;
}

.hat-letter[data-font="georgia"][data-case="upper"],
.hat-letter[data-font="times"][data-case="upper"] {
  --hat-bottom: 0.78em;
}

.hat-letter[data-font="arial"][data-case="lower"],
.hat-letter[data-font="helvetica"][data-case="lower"] {
  --hat-bottom: 0.66em;
  --hat-height: 0.48em;
  --hat-width: 0.38em;
}

.hat-letter[data-font="georgia"][data-case="lower"],
.hat-letter[data-font="times"][data-case="lower"] {
  --hat-bottom: 0.62em;
  --hat-height: 0.46em;
  --hat-width: 0.36em;
}

.hat-letter[data-font="arial"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="l"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="l"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="l"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.84em;
}

.hat-letter[data-font="arial"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="l"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.88em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-font="georgia"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="l"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.84em;
}

.hat-letter[data-font="arial"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="arial"][data-case="lower"][data-letter="j"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="j"] {
  --hat-bottom: 0.88em;
}

.hat-letter[data-font="georgia"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="j"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="j"] {
  --hat-bottom: 0.84em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="courier"][data-case="lower"][data-letter="j"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-font="arial"][data-case="lower"][data-letter="t"],
.hat-letter[data-font="helvetica"][data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.78em;
}

.hat-letter[data-font="georgia"][data-case="lower"][data-letter="t"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.74em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.8em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="b"] {
  --hat-bottom: 0.86em;
  --hat-x: -0.08em;
}

.hat-letter[data-font="times"][data-case="lower"][data-letter="d"] {
  --hat-bottom: 0.82em;
  --hat-x: 0.08em;
}

.hat-letter[data-case="lower"][data-letter="d"] {
  --hat-x: 0.1em;
}

.hat-letter[data-case="lower"][data-letter="h"] {
  --hat-x: -0.1em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="b"] {
  --hat-x: -0.14em;
}

.hat-letter[data-font="times"][data-case="lower"][data-letter="d"] {
  --hat-x: 0.14em;
}

.hat-letter[data-case="upper"] {
  --hat-bottom: 0.9em;
  --hat-height: 0.58em;
  --hat-width: 0.48em;
}

.hat-letter[data-font="courier"][data-case="upper"] {
  --hat-bottom: 0.86em;
  --hat-height: 0.58em;
  --hat-width: 0.46em;
}

.hat-letter[data-font="georgia"][data-case="upper"],
.hat-letter[data-font="times"][data-case="upper"] {
  --hat-bottom: 0.88em;
  --hat-height: 0.56em;
  --hat-width: 0.46em;
}

.hat-letter[data-case="upper"][data-letter="I"],
.hat-letter[data-case="upper"][data-letter="J"] {
  --hat-bottom: 0.92em;
  --hat-height: 0.52em;
  --hat-width: 0.32em;
}

.hat-letter[data-case="upper"][data-letter="M"],
.hat-letter[data-case="upper"][data-letter="W"] {
  --hat-width: 0.64em;
}

/* Final visual tuning: keep Courier lowercase as the reference, then nudge by glyph anatomy. */
.hat-letter[data-case="upper"][data-letter="B"],
.hat-letter[data-case="upper"][data-letter="D"],
.hat-letter[data-case="upper"][data-letter="E"],
.hat-letter[data-case="upper"][data-letter="F"],
.hat-letter[data-case="upper"][data-letter="H"],
.hat-letter[data-case="upper"][data-letter="K"],
.hat-letter[data-case="upper"][data-letter="L"],
.hat-letter[data-case="upper"][data-letter="P"],
.hat-letter[data-case="upper"][data-letter="R"] {
  --hat-x: -0.06em;
}

.hat-letter[data-font="georgia"][data-case="upper"][data-letter="B"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="D"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="E"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="F"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="H"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="K"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="L"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="P"],
.hat-letter[data-font="georgia"][data-case="upper"][data-letter="R"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="B"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="D"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="E"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="F"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="H"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="K"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="L"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="P"],
.hat-letter[data-font="times"][data-case="upper"][data-letter="R"] {
  --hat-x: -0.04em;
}

.hat-letter[data-case="upper"][data-letter="N"],
.hat-letter[data-case="upper"][data-letter="T"],
.hat-letter[data-case="upper"][data-letter="U"] {
  --hat-x: -0.02em;
}

.hat-letter[data-case="upper"][data-letter="J"] {
  --hat-x: 0.06em;
}

.hat-letter[data-case="lower"][data-letter="b"] {
  --hat-x: -0.1em;
}

.hat-letter[data-case="lower"][data-letter="d"] {
  --hat-x: 0.14em;
}

.hat-letter[data-case="lower"][data-letter="h"],
.hat-letter[data-case="lower"][data-letter="k"] {
  --hat-x: -0.1em;
}

.hat-letter[data-case="lower"][data-letter="l"] {
  --hat-x: -0.04em;
}

.hat-letter[data-case="lower"][data-letter="f"] {
  --hat-x: 0.02em;
}

.hat-letter[data-case="lower"][data-letter="t"] {
  --hat-x: -0.03em;
}

.hat-letter[data-font="courier"][data-case="lower"][data-letter="b"] {
  --hat-x: -0.16em;
}

.hat-letter[data-font="times"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="d"] {
  --hat-x: 0.18em;
}

.hat-letter[data-font="times"][data-case="lower"][data-letter="b"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="d"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="f"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="h"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="i"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="j"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="k"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="l"] {
  --hat-bottom: 0.87em;
}

.hat-letter[data-font="times"][data-case="lower"][data-letter="t"] {
  --hat-bottom: 0.77em;
}

.hat-letter[data-font="georgia"][data-case="lower"],
.hat-letter[data-font="times"][data-case="lower"] {
  --hat-height: 0.44em;
  --hat-width: 0.34em;
}

.hat-letter[data-font="georgia"][data-case="lower"][data-letter="m"],
.hat-letter[data-font="georgia"][data-case="lower"][data-letter="w"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="m"],
.hat-letter[data-font="times"][data-case="lower"][data-letter="w"] {
  --hat-width: 0.56em;
}

/* Number pass: digits need their own perch instead of borrowing letter rules. */
.hat-letter[data-case="number"] {
  --hat-bottom: 0.74em;
  --hat-height: 0.5em;
  --hat-width: 0.4em;
  --hat-x: 0em;
}

.hat-letter[data-case="number"][data-letter="0"],
.hat-letter[data-case="number"][data-letter="6"],
.hat-letter[data-case="number"][data-letter="8"],
.hat-letter[data-case="number"][data-letter="9"] {
  --hat-bottom: 0.72em;
}

.hat-letter[data-case="number"][data-letter="1"] {
  --hat-bottom: 0.66em;
  --hat-height: 0.48em;
  --hat-width: 0.3em;
  --hat-x: 0.02em;
}

.hat-letter[data-case="number"][data-letter="2"],
.hat-letter[data-case="number"][data-letter="3"],
.hat-letter[data-case="number"][data-letter="5"] {
  --hat-x: -0.02em;
}

.hat-letter[data-case="number"][data-letter="4"] {
  --hat-bottom: 0.68em;
  --hat-x: 0.04em;
}

.hat-letter[data-case="number"][data-letter="6"] {
  --hat-bottom: 0.68em;
  --hat-x: -0.08em;
}

.hat-letter[data-case="number"][data-letter="7"] {
  --hat-bottom: 0.68em;
  --hat-x: -0.01em;
}

.hat-letter[data-font="courier"][data-case="number"] {
  --hat-bottom: 0.68em;
  --hat-height: 0.48em;
  --hat-width: 0.38em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="1"] {
  --hat-x: -0.02em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.64em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="6"] {
  --hat-x: -0.1em;
}

.hat-letter[data-font="georgia"][data-case="number"],
.hat-letter[data-font="times"][data-case="number"] {
  --hat-bottom: 0.72em;
  --hat-height: 0.48em;
  --hat-width: 0.38em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="1"],
.hat-letter[data-font="times"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.64em;
  --hat-x: 0.04em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="4"],
.hat-letter[data-font="times"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.66em;
  --hat-x: 0.06em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.66em;
  --hat-x: -0.1em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="7"],
.hat-letter[data-font="times"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.66em;
  --hat-x: 0.02em;
}

/* Final number tuning by digit and font. */
.hat-letter[data-case="number"] {
  --hat-bottom: 0.7em;
  --hat-height: 0.48em;
  --hat-width: 0.38em;
}

.hat-letter[data-case="number"][data-letter="0"],
.hat-letter[data-case="number"][data-letter="8"],
.hat-letter[data-case="number"][data-letter="9"] {
  --hat-bottom: 0.69em;
  --hat-x: 0.02em;
}

.hat-letter[data-case="number"][data-letter="8"] {
  --hat-bottom: 0.72em;
}

.hat-letter[data-case="number"][data-letter="1"] {
  --hat-bottom: 0.64em;
  --hat-width: 0.3em;
  --hat-x: -0.01em;
}

.hat-letter[data-case="number"][data-letter="2"],
.hat-letter[data-case="number"][data-letter="3"] {
  --hat-bottom: 0.68em;
  --hat-x: -0.04em;
}

.hat-letter[data-case="number"][data-letter="4"] {
  --hat-bottom: 0.64em;
  --hat-x: 0.05em;
}

.hat-letter[data-case="number"][data-letter="5"] {
  --hat-bottom: 0.66em;
  --hat-x: 0.01em;
}

.hat-letter[data-case="number"][data-letter="6"] {
  --hat-bottom: 0.66em;
  --hat-x: -0.12em;
}

.hat-letter[data-case="number"][data-letter="7"] {
  --hat-bottom: 0.72em;
  --hat-x: -0.04em;
}

.hat-letter[data-font="courier"][data-case="number"] {
  --hat-bottom: 0.68em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.66em;
  --hat-x: -0.04em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.62em;
  --hat-x: 0.04em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.64em;
  --hat-x: -0.14em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.7em;
}

.hat-letter[data-font="georgia"][data-case="number"],
.hat-letter[data-font="times"][data-case="number"] {
  --hat-bottom: 0.68em;
  --hat-height: 0.46em;
  --hat-width: 0.36em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="1"],
.hat-letter[data-font="times"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.62em;
  --hat-x: 0.03em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="2"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="3"],
.hat-letter[data-font="times"][data-case="number"][data-letter="2"],
.hat-letter[data-font="times"][data-case="number"][data-letter="3"] {
  --hat-bottom: 0.66em;
  --hat-x: -0.03em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="4"],
.hat-letter[data-font="times"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.62em;
  --hat-x: 0.08em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="5"],
.hat-letter[data-font="times"][data-case="number"][data-letter="5"] {
  --hat-bottom: 0.64em;
  --hat-x: 0.03em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.64em;
  --hat-x: -0.14em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="7"],
.hat-letter[data-font="times"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.7em;
  --hat-x: 0.02em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="8"],
.hat-letter[data-font="times"][data-case="number"][data-letter="8"] {
  --hat-bottom: 0.72em;
  --hat-x: 0.01em;
}

/* Corrected large-scale number perch: keep the hat above the glyph, not through it. */
.hat-letter[data-case="number"] {
  --hat-bottom: 0.9em;
  --hat-height: 0.5em;
  --hat-width: 0.4em;
  --hat-x: 0em;
}

.hat-letter[data-case="number"][data-letter="0"],
.hat-letter[data-case="number"][data-letter="8"],
.hat-letter[data-case="number"][data-letter="9"] {
  --hat-bottom: 0.88em;
  --hat-x: 0.02em;
}

.hat-letter[data-case="number"][data-letter="1"] {
  --hat-bottom: 0.84em;
  --hat-width: 0.3em;
  --hat-x: -0.02em;
}

.hat-letter[data-case="number"][data-letter="2"],
.hat-letter[data-case="number"][data-letter="3"] {
  --hat-bottom: 0.89em;
  --hat-x: -0.03em;
}

.hat-letter[data-case="number"][data-letter="4"] {
  --hat-bottom: 0.84em;
  --hat-x: 0.04em;
}

.hat-letter[data-case="number"][data-letter="5"] {
  --hat-bottom: 0.86em;
  --hat-x: 0.01em;
}

.hat-letter[data-case="number"][data-letter="6"] {
  --hat-bottom: 0.86em;
  --hat-x: -0.12em;
}

.hat-letter[data-case="number"][data-letter="7"] {
  --hat-bottom: 0.88em;
  --hat-x: -0.07em;
}

.hat-letter[data-font="courier"][data-case="number"] {
  --hat-bottom: 0.86em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.82em;
  --hat-x: -0.04em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.84em;
  --hat-x: -0.14em;
}

.hat-letter[data-font="georgia"][data-case="number"],
.hat-letter[data-font="times"][data-case="number"] {
  --hat-bottom: 0.87em;
  --hat-height: 0.48em;
  --hat-width: 0.38em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="1"],
.hat-letter[data-font="times"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.82em;
  --hat-x: 0.02em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="4"],
.hat-letter[data-font="times"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.82em;
  --hat-x: 0.07em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.84em;
  --hat-x: -0.14em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="7"],
.hat-letter[data-font="times"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.86em;
  --hat-x: 0.01em;
}

.hat-letter[data-font="georgia"][data-case="number"],
.hat-letter[data-font="times"][data-case="number"] {
  --hat-bottom: 0.94em;
  --hat-height: 0.48em;
  --hat-width: 0.38em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="1"],
.hat-letter[data-font="times"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.86em;
  --hat-x: 0.02em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="4"],
.hat-letter[data-font="times"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.86em;
  --hat-x: 0.07em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="5"],
.hat-letter[data-font="times"][data-case="number"][data-letter="5"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-x: -0.14em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="7"],
.hat-letter[data-font="times"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.92em;
  --hat-x: 0.01em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="8"],
.hat-letter[data-font="times"][data-case="number"][data-letter="8"] {
  --hat-bottom: 0.94em;
  --hat-x: 0.01em;
}

.hat-letter[data-case="number"] {
  --hat-bottom: 0.96em;
  --hat-height: 0.44em;
  --hat-width: 0.34em;
}

.hat-letter[data-case="number"][data-letter="1"] {
  --hat-bottom: 0.88em;
  --hat-width: 0.26em;
}

.hat-letter[data-case="number"][data-letter="4"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-case="number"][data-letter="5"],
.hat-letter[data-case="number"][data-letter="6"] {
  --hat-bottom: 0.92em;
}

.hat-letter[data-case="number"][data-letter="7"] {
  --hat-bottom: 0.96em;
}

.hat-letter[data-font="courier"][data-case="number"] {
  --hat-bottom: 0.8em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.76em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.76em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="5"],
.hat-letter[data-font="courier"][data-case="number"][data-letter="6"],
.hat-letter[data-font="courier"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.78em;
}

.hat-letter[data-font="georgia"][data-case="number"],
.hat-letter[data-font="times"][data-case="number"] {
  --hat-bottom: 0.8em;
  --hat-height: 0.42em;
  --hat-width: 0.32em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="2"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="3"],
.hat-letter[data-font="times"][data-case="number"][data-letter="2"],
.hat-letter[data-font="times"][data-case="number"][data-letter="3"] {
  --hat-bottom: 0.82em;
  --hat-x: 0.08em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="1"],
.hat-letter[data-font="times"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.74em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="4"],
.hat-letter[data-font="times"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.76em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="5"],
.hat-letter[data-font="times"][data-case="number"][data-letter="5"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.78em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="7"],
.hat-letter[data-font="times"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.8em;
}

.hat-letter[data-font="helvetica"][data-case="number"] {
  --hat-bottom: 0.92em;
}

.hat-letter[data-font="helvetica"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.86em;
}

.hat-letter[data-font="helvetica"][data-case="number"][data-letter="4"],
.hat-letter[data-font="helvetica"][data-case="number"][data-letter="5"],
.hat-letter[data-font="helvetica"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.88em;
}

.hat-letter[data-font="helvetica"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.92em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="8"] {
  --hat-bottom: 0.84em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="1"],
.hat-letter[data-font="times"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="4"],
.hat-letter[data-font="times"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.9em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="5"],
.hat-letter[data-font="times"][data-case="number"][data-letter="5"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.94em;
}

/* Definitive number placement: tune against the large lab, font by font. */
.hat-letter[data-font="arial"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="arial"][data-case="number"][data-letter="5"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="arial"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.84em;
  --hat-x: -0.1em;
}

.hat-letter[data-font="arial"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.86em;
  --hat-x: -0.06em;
}

.hat-letter[data-font="helvetica"][data-case="number"] {
  --hat-bottom: 0.86em;
}

.hat-letter[data-font="helvetica"][data-case="number"][data-letter="1"] {
  --hat-bottom: 0.8em;
}

.hat-letter[data-font="helvetica"][data-case="number"][data-letter="4"],
.hat-letter[data-font="helvetica"][data-case="number"][data-letter="5"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="helvetica"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.84em;
  --hat-x: -0.1em;
}

.hat-letter[data-font="helvetica"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.86em;
  --hat-x: -0.06em;
}

.hat-letter[data-font="courier"][data-case="number"] {
  --hat-bottom: 0.76em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="1"],
.hat-letter[data-font="courier"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.7em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="5"],
.hat-letter[data-font="courier"][data-case="number"][data-letter="6"],
.hat-letter[data-font="courier"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.74em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="6"] {
  --hat-x: -0.12em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="8"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="georgia"][data-case="number"],
.hat-letter[data-font="times"][data-case="number"] {
  --hat-bottom: 0.78em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="1"],
.hat-letter[data-font="times"][data-case="number"][data-letter="1"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="4"],
.hat-letter[data-font="times"][data-case="number"][data-letter="4"] {
  --hat-bottom: 0.7em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="2"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="3"],
.hat-letter[data-font="times"][data-case="number"][data-letter="2"],
.hat-letter[data-font="times"][data-case="number"][data-letter="3"] {
  --hat-bottom: 0.78em;
  --hat-x: 0.06em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="5"],
.hat-letter[data-font="times"][data-case="number"][data-letter="5"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-bottom: 0.74em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-x: -0.12em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="7"],
.hat-letter[data-font="times"][data-case="number"][data-letter="7"] {
  --hat-bottom: 0.78em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="0"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="8"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="9"],
.hat-letter[data-font="times"][data-case="number"][data-letter="0"],
.hat-letter[data-font="times"][data-case="number"][data-letter="8"],
.hat-letter[data-font="times"][data-case="number"][data-letter="9"] {
  --hat-bottom: 0.72em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="2"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="3"],
.hat-letter[data-font="times"][data-case="number"][data-letter="2"],
.hat-letter[data-font="times"][data-case="number"][data-letter="3"] {
  --hat-bottom: 0.74em;
}

.hat-letter[data-font="georgia"][data-case="number"][data-letter="8"],
.hat-letter[data-font="times"][data-case="number"][data-letter="8"] {
  --hat-bottom: 0.82em;
}

.hat-letter[data-font="arial"][data-case="number"][data-letter="6"],
.hat-letter[data-font="helvetica"][data-case="number"][data-letter="6"] {
  --hat-x: -0.04em;
}

.hat-letter[data-font="courier"][data-case="number"][data-letter="6"],
.hat-letter[data-font="georgia"][data-case="number"][data-letter="6"],
.hat-letter[data-font="times"][data-case="number"][data-letter="6"] {
  --hat-x: -0.06em;
}

main {
  width: min(760px, calc(100% - 28px));
  margin-inline: auto;
  min-height: 65vh;
  padding: 26px 0 50px;
}

main.is-piece {
  padding-top: 18px;
}

main:focus {
  outline: none;
}

.site-foot {
  width: min(690px, calc(100% - 28px));
  margin: 0 auto 34px;
  padding-top: 10px;
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 12px;
  text-align: center;
}

.section-title {
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.intro {
  max-width: 560px;
  margin: 14px auto 34px;
  text-align: center;
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 13px;
}

.photo-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 22px 18px;
  width: min(100%, 690px);
  margin: 0 auto;
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.photo-card {
  display: block;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}

.photo-card:visited {
  color: var(--ink);
}

.photo-frame {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.03);
  transition: filter 160ms ease, transform 160ms ease;
}

.photo-card.is-contain .photo-frame img {
  object-fit: contain;
}

.photo-card:hover .photo-frame img,
.photo-card:focus-visible .photo-frame img {
  filter: contrast(1.1);
  transform: scale(1.04);
}

.photo-card:focus-visible {
  outline: 1px dotted var(--ink);
  outline-offset: 4px;
}

.photo-caption {
  display: block;
  margin-top: 6px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  line-height: 1.2;
}

.photo-caption > span {
  display: block;
}

.caption-line {
  display: block;
  min-height: 1.2em;
  white-space: nowrap;
}

.caption-line .hat-word {
  white-space: nowrap;
}

.photo-caption > span + span {
  color: var(--muted);
}

.archive {
  display: grid;
  gap: 14px;
}

.archive-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 16px;
  padding: 0 0 14px;
  border-bottom: 1px dotted var(--rule);
}

.archive-date {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.archive-title {
  font-size: 17px;
}

.archive-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.piece-head {
  margin: 0 0 24px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
}

.piece-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0;
}

.opening-cover {
  width: 104px;
  height: 104px;
  margin: 0 auto 14px;
  overflow: hidden;
  background: #fff;
  animation: opening-cover 1500ms ease forwards;
}

.opening-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.opening-cover.is-contain img {
  object-fit: contain;
}

@keyframes opening-cover {
  0%,
  62% {
    opacity: 1;
    max-height: 104px;
    margin-bottom: 14px;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    transform: translateY(-4px);
  }
}

.reader {
  max-width: 620px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.62;
}

.reader p {
  margin: 0 0 1.05em;
}

.reader .stanza {
  margin-bottom: 1.4em;
}

.scans {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 28px auto 0;
}

.scans.is-open {
  display: grid;
}

.scan-link {
  display: block;
  border: 1px solid var(--rule);
  background: var(--soft);
}

.scan-link img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.9);
}

.about {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.about p {
  margin: 0 0 1em;
}

.contact {
  max-width: 460px;
  margin: 0 auto;
}

.contact-form {
  display: grid;
  gap: 18px;
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 12px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 9px;
  color: var(--ink);
  background: #fff;
  font: 16px/1.45 Georgia, "Times New Roman", serif;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 1px dotted var(--ink);
  outline-offset: 3px;
}

.contact-form button {
  justify-self: center;
  font-family: "Courier New", monospace;
  font-size: 12px;
}

.contact-form button:disabled {
  color: var(--muted);
  cursor: default;
}

.contact-status {
  min-height: 1.2em;
  margin: -6px 0 0;
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 560px) {
  body {
    font-size: 15px;
  }

  .site-head,
  main {
    width: min(100% - 22px, 760px);
  }

  .archive-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .reader {
    font-size: 17px;
    line-height: 1.58;
  }

  .photo-sheet {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 12px;
  }

  .photo-frame {
    width: 92px;
    height: 92px;
  }

}