/* Aaron Bao — one ink, and the ink is not quite still. */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
}
/* Metric-matched fallback. */
@font-face {
  font-family: "EB Garamond Fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 94.77%;
  ascent-override: 106.26%;
  descent-override: 31.44%;
}

:root {
  --ink: #111;
  --pencil: #8a8578;
  --l: 26.35px; /* one line of the rhythm: 17 × 1.55 */
}

html { background: #fff; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "EB Garamond", "EB Garamond Fallback", serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

main {
  max-width: 600px;
  margin: 0 auto;
  padding: 140px 24px 128px;
}

p, ul, ol, h1, h2, blockquote, pre { margin: 0 0 var(--l); }
p { text-wrap: pretty; }
h1, h2 { font-size: inherit; font-weight: inherit; line-height: inherit; }
ul { list-style: none; padding: 0; }
.lead, .links { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, .32);
  transition: text-decoration-color .18s;
}
a:hover, a:focus-visible { text-decoration-color: var(--ink); }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* The mark: the name in Linear B, a-a2-ro · pa-u. */
.mark { display: block; width: 106px; height: 28px; margin: 0 0 18px; text-decoration: none; }
.mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mark path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* The living word: once, its letters step into a ridge and back. */
.w { white-space: nowrap; position: relative; }
.w.alive { z-index: 1; }
.l { display: inline-block; }
.sr, .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.alive .l { animation: ink 2100ms steps(1, end); }
#ink-word .l:nth-child(1) { --x: -.5px;  --y: -5px;  --r: -35deg; }
#ink-word .l:nth-child(2) { --x: -3.5px; --y: -16px; --r: -45deg; }
#ink-word .l:nth-child(3) { --x: -4px;   --y: -27px; --r: -45deg; }
#ink-word .l:nth-child(4) { --x: -5px;   --y: -38px; --r: -40deg; }
#ink-word .l:nth-child(5) { --x: -4.5px; --y: -48px; --r: 0deg; }
#ink-word .l:nth-child(6) { --x: -1.5px; --y: -39px; --r: 40deg; }
#ink-word .l:nth-child(7) { --x: 1px;    --y: -30px; --r: 45deg; }
#ink-word .l:nth-child(8) { --x: 2.5px;  --y: -25px; --r: 20deg; }
#ink-word .l:nth-child(9) { --x: 4.5px;  --y: -13px; --r: 45deg; }
@keyframes ink {
  0%     { transform: none; }
  8.57%  { transform: translate(0, calc(var(--y) * .45)); }
  17.14% { transform: translate(calc(var(--x) * .7), calc(var(--y) * .85)) rotate(calc(var(--r) * .6)); }
  25.71% { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  82.86% { transform: translate(calc(var(--x) * .7), calc(var(--y) * .85)) rotate(calc(var(--r) * .6)); }
  91.43% { transform: translate(0, calc(var(--y) * .45)); }
  100%   { transform: none; }
}

/* The signature in a private script, and the worksheet under it. */
.sig { position: relative; margin-top: var(--l); height: calc(2 * var(--l)); }
.sig svg { display: block; width: 258px; height: 26px; overflow: visible; }
.cand {
  position: absolute; top: 29px;
  font-style: italic; font-size: 11px; line-height: 1; color: var(--pencil);
  white-space: nowrap; -webkit-user-select: none; user-select: none;
}
.cand.c1 { left: 2px; }
.cand.c2 { left: 71px; }
.k { display: inline-block; position: relative; }
.k1 { animation: appear .01s step-start 9s both; }
.k2 { animation: appear .01s step-start 16s both; }
.k3 { animation: appear .01s step-start 25s both; margin-left: 4px; }
.k1::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 52%; height: 1px;
  background: rgba(138, 133, 120, .8); transform: rotate(-4deg);
  animation: appear .01s step-start 25s both;
}
@keyframes appear { from { visibility: hidden; } to { visibility: visible; } }

/* The hidden route: the signs with their syllables. */
.syl { display: flex; margin: 6px 0 0 -7px; font-size: 11px; line-height: 1; color: var(--pencil); }
.syl span { width: 34px; text-align: center; }

/* The desk: the letter is only the top sheet. Scroll sideways and the side
   quests are written beneath. ink.js moves the sheet; at rest nothing is. */
#sq { position: fixed; inset: 0; overflow: hidden; background: #16140f; color: #f3f0e8; visibility: hidden; }
#sheet { position: relative; background: #fff; min-height: 100vh; }
.sq-live #sq { visibility: visible; }
.sq-live #sheet {
  transform: translate3d(calc(-1 * var(--sqx, 0px)), 0, 0) rotate(calc(var(--sqp, 0) * -.35deg));
  box-shadow: 14px 0 40px rgba(0, 0, 0, calc(var(--sqp, 0) * .42));
  will-change: transform;
}
#sq .in {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(440px, 88vw);
  box-sizing: border-box; padding: 72px 34px 88px; overflow-y: auto; overscroll-behavior: contain;
  font-size: 14.5px;
  transform: translate3d(calc(28px - var(--sqp, 0) * 28px), 0, 0);
  opacity: calc(.2 + var(--sqp, 0) * .8);
}
#sq p, #sq ul { margin: 0; }
#sq li { margin: 0 0 3px; }
#sq .t { font-size: 17px; margin: 0 0 4px; }
#sq .ep { color: #a69f8d; font-size: 12.5px; margin: 8px 0 0; }
#sq .ql { font-size: 16px; margin: 30px 0 4px; }
#sq .cl { color: #a69f8d; font-size: 11px; margin: 13px 0 3px; }
#sq .nt { color: #a69f8d; }
#sq a { text-decoration-color: rgba(243, 240, 232, .3); }
#sq a:hover { text-decoration-color: #f3f0e8; }
#sq a:focus-visible { outline-color: #f3f0e8; text-decoration-color: #f3f0e8; }
.sq-on { overscroll-behavior-x: none; overflow-x: hidden; touch-action: pan-y pinch-zoom; }

/* Essays. */
.post h1 { font-size: 24px; line-height: 1.3; margin-bottom: calc(var(--l) / 2); }
.post .subtitle { font-style: italic; margin-bottom: calc(var(--l) / 2); }
.post .date { color: var(--pencil); margin-bottom: calc(var(--l) * 2); }
.post p, .post ul, .post ol, .post blockquote, .post pre { margin-bottom: calc(var(--l) * 1.5); }
.post ul { list-style: disc; padding-left: 1.4em; }
.post h2 { font-size: 20px; line-height: 1.3; margin: calc(var(--l) * 2) 0 var(--l); }
.post blockquote { padding-left: 1em; border-left: 1px solid rgba(0, 0, 0, .18); }
.post code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.post pre { overflow-x: auto; }
.post .footnotes { margin-top: calc(var(--l) * 2); font-size: 15px; }
.post .footnotes ol { list-style: decimal; padding-left: 1.4em; }
.post .footnotes p { margin-bottom: calc(var(--l) / 2); }

@media (max-height: 760px) {
  main { padding-top: 12vh; }
}
@media (max-width: 640px) {
  main { padding: 12vh 24px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .alive .l { animation: none; }
  .k, .k1::after { animation: none; visibility: visible; }
  a { transition: none; }
}