:root {
  --paper: #fefefe;
  --ink: #0f172a;
  --ink-soft: #223164;
  --mint: #22d3aa;
  --mint-wash: #d8fbf3;
  --rule-soft: #aab6cd;
  --paper-muted: #f4f6f8;
  --display: "Playfair Display", Georgia, serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
  --u: calc(100vw / 1920);
  --step-ease: steps(4, end);
  --press-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-fast: 110ms;
  --motion-base: 220ms;
  --motion-long: 440ms;
}

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

html {
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(12px, calc(16 * var(--u)), calc(21.333 * 1px));
}

button, input, select, textarea { font: inherit; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }

.page-frame {
  width: calc(100% - calc(120 * var(--u)));
  min-height: calc(100vh - calc(274 * var(--u)));
  margin-left: calc(56 * var(--u));
  margin-right: calc(64 * var(--u));
  padding: 0;
  background: var(--paper);
  transform: translateY(0);
}

main.is-leaving { transform: translateY(calc(-4 * var(--u))); }
main.is-route-entering { animation: paper-feed var(--motion-base) var(--step-ease) both; }

header[data-chrome="nav"] {
  position: relative;
  z-index: 20;
  height: calc(110 * var(--u));
  padding: 0 calc(44 * var(--u));
  display: grid;
  grid-template-columns: calc(250 * var(--u)) 1fr auto;
  align-items: center;
  gap: calc(22 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--ink);
  background: var(--paper);
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: calc(78 * var(--u));
  height: calc(48 * var(--u));
  object-fit: cover;
  object-position: left center;
}

.wordmark {
  font: 600 clamp(18px, calc(29 * var(--u)), calc(38.667 * 1px))/1 var(--mono);
  letter-spacing: .12em;
}

.routes {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(30 * var(--u));
  white-space: nowrap;
}

.routes a {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font: 400 clamp(12px, calc(16 * var(--u)), calc(21.333 * 1px))/1 var(--serif);
}

.routes a::after,
.mobile-routes a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-2 * var(--u));
  height: calc(4 * var(--u));
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--press-ease);
}

.routes a.is-active::after,
.mobile-routes a.is-active::after { transform: scaleX(1); }

.utilities {
  display: flex;
  align-items: center;
  gap: calc(25 * var(--u));
  white-space: nowrap;
  font: 500 clamp(12px, calc(15 * var(--u)), 20px)/1 var(--mono);
}

.utilities a { color: var(--ink); }

.menu-toggle, .mobile-drawer { display: none; }

footer[data-chrome="footer"] {
  height: calc(164 * var(--u));
  padding: calc(24 * var(--u)) calc(44 * var(--u)) calc(20 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--ink);
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(28 * var(--u));
  font: 400 clamp(12px, calc(15 * var(--u)), 20px)/1.45 var(--serif);
}

footer .left { display: grid; gap: calc(3 * var(--u)); }
footer .boundary { font-weight: 600; }
footer .right {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  white-space: nowrap;
  font: 500 clamp(12px, calc(14 * var(--u)), calc(18.667 * 1px))/1 var(--mono);
}
footer .right a { color: var(--ink); }
footer .source { font-size: clamp(12px, calc(14 * var(--u)), calc(18.667 * 1px)); }

[data-print-reveal] { transform-origin: left top; }
[data-print-reveal].is-printed { animation: typeset-line var(--motion-base) var(--step-ease) both; }
[data-row-reveal] { transform: scaleY(0); transform-origin: top; }
[data-row-reveal].is-printed { animation: ledger-row var(--motion-base) var(--step-ease) forwards; }
[data-rule-grow] { transform: scaleX(0); transform-origin: left; }
[data-rule-grow].is-printed { animation: rule-draw var(--motion-long) var(--press-ease) forwards; }
[data-filed-stamp] { transform-origin: center; }
[data-filed-stamp].is-stamped { animation: filed-thud var(--motion-base) var(--press-ease) both; }

@keyframes paper-feed { from { transform: translateY(calc(8 * var(--u))); } to { transform: translateY(0); } }
@keyframes typeset-line { from { transform: translateX(calc(-8 * var(--u))); } to { transform: translateX(0); } }
@keyframes ledger-row { from { transform: scaleY(.02); } to { transform: scaleY(1); } }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes filed-thud {
  0% { transform: translateY(calc(-14 * var(--u))) rotate(-1.5deg) scale(1.045); }
  70% { transform: translateY(calc(1 * var(--u))) rotate(.2deg) scale(.99); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 1023px) {
  :root { --u: calc(100vw / 390); }

  body { font-size: 16px; }

  header[data-chrome="nav"] {
    height: 72px;
    padding: 0 16px;
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  .brand { gap: 10px; }
  .brand img { width: 52px; height: 32px; }
  .wordmark { font-size: 20px; }
  .routes, header > .utilities { display: none; }

  .menu-toggle {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 10px 10px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 600 13px/1 var(--mono);
    text-transform: uppercase;
  }

  .menu-toggle i,
  .menu-toggle i::before {
    width: 22px;
    height: 2px;
    display: block;
    background: currentColor;
    content: "";
    transition: transform var(--motion-fast) var(--step-ease);
  }

  .menu-toggle i::before { transform: translateY(6px); }
  .menu-toggle[aria-expanded="true"] i { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::before { transform: rotate(-90deg); }

  .mobile-drawer {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 8px 16px 18px;
    border-bottom: 2px solid var(--ink);
    background: var(--paper);
  }

  .mobile-drawer:not([hidden]) { display: block; animation: paper-feed var(--motion-fast) var(--step-ease) both; }
  .mobile-routes { display: grid; }
  .mobile-routes a {
    position: relative;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule-soft);
    text-decoration: none;
    font: 600 17px/1.1 var(--serif);
  }
  .mobile-routes a::after { bottom: -1px; width: 88px; }
  .mobile-utilities { display: flex; align-items: center; gap: 24px; padding-top: 18px; font: 500 12px/1 var(--mono); }

  .page-frame {
    width: calc(100% - 32px);
    min-height: calc(100vh - 72px - 254px);
    margin: 0 16px;
  }

  footer[data-chrome="footer"] {
    height: auto;
    min-height: 254px;
    padding: 22px 16px 24px;
    grid-template-columns: 1fr;
    gap: 22px;
    font-size: 13px;
  }
  footer .left { gap: 8px; }
  footer .source { font-size: 12px; }
  footer .right { align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 12px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  [data-row-reveal], [data-rule-grow] { transform: none; }
}