@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/alegreya-500.ttf") format("truetype");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/alegreya-600.ttf") format("truetype");
}
@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-400.ttf") format("truetype");
}
@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-500.ttf") format("truetype");
}
@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-700.ttf") format("truetype");
}
@font-face {
  font-family: "Nanum Gothic Coding";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/nanum-gothic-coding-400.ttf") format("truetype");
}
@font-face {
  font-family: "Nanum Gothic Coding";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/nanum-gothic-coding-700.ttf") format("truetype");
}

:root {
  --u: calc(100vw / 1920);
  --paper: #D3C29E;
  --sheet: #DCCBA3;
  --sheet-raised: #E4D5B2;
  --select-row: #CFC2C0;
  --ink: #221B11;
  --muted: #5C4F37;
  --rule: #B5A176;
  --rule-frame-color: #9A8F77;
  --rule-control-color: #69655A;
  --ledger-red: #9E2A2B;
  --cutoff: #260777;
  --wallet: #24B085;
  --rule-hairline: max(1px, calc(1 * var(--u))) solid var(--rule);
  --rule-frame: max(1px, calc(2 * var(--u))) solid var(--rule-frame-color);
  --rule-control: max(1px, calc(2 * var(--u))) solid var(--rule-control-color);
  --rule-cutoff: max(1px, calc(3 * var(--u))) solid var(--cutoff);
  --rule-margin: max(1px, calc(2 * var(--u))) solid var(--ledger-red);
  --ease-file: cubic-bezier(.22, .72, .18, 1);
  --motion-fast: 180ms;
  --motion-control: 360ms;
  --motion-page: 520ms;
}

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

html {
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Alegreya Sans", sans-serif;
  font-size: clamp(15px, calc(16 * var(--u)), 16px);
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--paper);
}

button, input, select, textarea { font: inherit; }
:where(button, input, select) { border: 0; border-radius: 0; }
a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.site-shell {
  position: relative;
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgb(34 27 17 / 0.018) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 65%, rgb(255 255 255 / 0.026) 0 1px, transparent 1.5px);
  background-size: calc(13 * var(--u)) calc(17 * var(--u)), calc(19 * var(--u)) calc(23 * var(--u));
}

.site-shell::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: calc(44 * var(--u));
  width: max(1px, calc(1 * var(--u)));
  background: var(--ledger-red);
  pointer-events: none;
}

/* DESIGN §4 paper-margin: full height on home, nav band only on the other routes. */
body:not([data-route="home"]) .site-shell::before { bottom: auto; height: calc(102 * var(--u)); }

[data-chrome="nav"] {
  position: relative;
  z-index: 5;
  width: 100%;
  height: calc(102 * var(--u));
  padding: 0 calc(46 * var(--u)) 0 calc(74 * var(--u));
  display: grid;
  grid-template-columns: calc(230 * var(--u)) 1fr auto;
  align-items: center;
  gap: calc(36 * var(--u));
  background: var(--paper);
  font-size: clamp(14px, calc(15 * var(--u)), 15px);
  font-weight: 500;
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  color: var(--ink);
  font-family: "Alegreya", serif;
  font-size: max(18px, calc(26 * var(--u)));
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

[data-chrome="nav"] .brand img {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  object-fit: contain;
}

.routes, .actions {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.routes { gap: calc(30 * var(--u)); }
.actions { gap: calc(24 * var(--u)); }

.routes a, .actions a {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-fast) linear, transform var(--motion-fast) var(--ease-file);
}

.routes a {
  position: relative;
  padding: calc(10 * var(--u)) 0 calc(8 * var(--u));
}

.routes a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(1px, calc(2 * var(--u)));
  background: var(--cutoff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-control) var(--ease-file);
}

.routes a:hover, .actions a:hover { transform: translateX(calc(2 * var(--u))); }
.routes a.is-active { color: var(--cutoff); }
.routes a.is-active::after, .routes a:hover::after { transform: scaleX(1); }
.actions a[aria-disabled="true"] { color: var(--muted); cursor: default; opacity: .72; }
.actions a[aria-disabled="true"]:hover { transform: none; }

.menu-toggle { display: none; }

.page-frame {
  width: 100%;
  min-height: calc(760 * var(--u));
  padding-right: calc(46 * var(--u));
  padding-left: calc(46 * var(--u));
  background: var(--paper);
  transition: opacity var(--motion-control) linear, transform var(--motion-page) var(--ease-file);
}

.page-frame.is-leaving {
  opacity: .01;
  transform: translateX(calc(-14 * var(--u)));
}

.shell-route-slot { min-height: calc(760 * var(--u)); }

[data-chrome="footer"] {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: calc(116 * var(--u));
  padding: calc(16 * var(--u)) calc(46 * var(--u)) calc(15 * var(--u)) calc(74 * var(--u));
  display: grid;
  grid-template-columns: calc(220 * var(--u)) 1fr auto;
  align-items: center;
  gap: calc(30 * var(--u));
  background: var(--paper);
}

[data-chrome="footer"] .brand { font-size: max(17px, calc(22 * var(--u))); }
[data-chrome="footer"] .brand img {
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  object-fit: contain;
}

[data-chrome="footer"] .copy {
  display: grid;
  gap: calc(4 * var(--u));
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.45;
}

[data-chrome="footer"] .boundary { font-weight: 700; }
[data-chrome="footer"] .sources { color: var(--muted); }
[data-chrome="footer"] .actions { font-size: max(12px, calc(14 * var(--u))); }

.footer-ca {
  min-height: calc(38 * var(--u));
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  display: inline-flex;
  align-items: center;
  color: var(--cutoff);
  font-family: "Nanum Gothic Coding", monospace;
}

.motion-file {
  opacity: .01;
  transform: translateX(calc(18 * var(--u))) rotate(.08deg);
  transition: opacity var(--motion-control) linear, transform var(--motion-page) var(--ease-file);
}

.motion-file.is-filed { opacity: 1; transform: translateX(0) rotate(0); }
.motion-cut { transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-page) var(--ease-file); }
.motion-cut.is-filed { transform: scaleX(1); }
.live-tick { animation: clerk-tick var(--motion-control) var(--ease-file) both; }
.art-loop { display: block; width: 100%; height: 100%; object-fit: contain; }

@keyframes clerk-tick {
  0% { opacity: .35; transform: translateX(calc(-6 * var(--u))) scaleX(.96); }
  65% { opacity: 1; transform: translateX(calc(2 * var(--u))) scaleX(1.015); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* Central border vocabulary: route fragments use these classes and declare no borders. */
.rule-shell-rule { border-bottom: var(--rule-hairline); }
.rule-footer-rule { border-top: var(--rule-hairline); }
.rule-ca-button { border: var(--rule-cutoff); }
.rule-footer-ca { border: var(--rule-hairline); border-color: var(--cutoff); }
.rule-paper-margin { border-left: var(--rule-margin); }
.rule-matrix-head-rule { border-bottom: var(--rule-hairline); }
.rule-matrix-row { border-bottom: var(--rule-hairline); }
.rule-matrix-col { border-left: var(--rule-frame); border-color: var(--rule); }
.rule-matrix-note { border: var(--rule-control); }
.rule-cutoff-bar { border-bottom: var(--rule-cutoff); }
.rule-strip-divider { border-bottom: var(--rule-hairline); border-color: var(--rule-control-color); }
.rule-filter-chip, .rule-seg-button { border: var(--rule-control); }
.rule-button-primary { border: var(--rule-cutoff); background: var(--cutoff); color: var(--sheet); }
.rule-button-secondary { border: var(--rule-control); }
.rule-button-cutoff { border: var(--rule-control); border-color: var(--cutoff); }
.rule-field-frame { border: var(--rule-control); padding: calc(12 * var(--u)) calc(16 * var(--u)); }
.rule-slip-frame { border: var(--rule-frame); }
.rule-version-column { border: var(--rule-frame); }
.rule-ledger-panel { border: var(--rule-frame); }
.rule-ledger-panel-shared-bottom { border: var(--rule-frame); border-bottom: 0; }
.rule-layer-card { border: var(--rule-frame); }
.rule-record-row { border-bottom: var(--rule-hairline); }
.rule-record-row-frame { border-bottom: var(--rule-hairline); border-color: var(--rule-frame-color); }
.rule-record-top { border-top: var(--rule-hairline); }
.rule-table-grid { border: var(--rule-frame); }
.rule-ruler-frame { border: var(--rule-frame); }
.rule-spread-frame { border: var(--rule-frame); }
.rule-spine-cut { border-left: var(--rule-cutoff); }
.rule-spread-rule { border-bottom: var(--rule-hairline); border-color: var(--rule-frame-color); }
.rule-quote-underline { border-bottom: var(--rule-cutoff); }
.rule-section-tab-underline { border-bottom: max(1px, calc(3 * var(--u))) solid var(--ink); }
.rule-form-row { border-bottom: var(--rule-hairline); }
.rule-payload-box, .rule-code-box { border: var(--rule-control); }
.rule-step-number-box { border: var(--rule-control); }
.rule-section-divider-v { border-left: var(--rule-hairline); }
.bell-watch-panel.rule-ledger-panel { border-bottom: 0; }
.fp-ref-lead > h3, .fp-ref-lead > blockquote, .fp-ref-status, .fp-other-row:last-child { border-bottom: var(--rule-hairline); }

@media (max-width: 1279px) and (min-width: 1024px) {
  [data-chrome="nav"] { gap: calc(20 * var(--u)); grid-template-columns: calc(210 * var(--u)) 1fr auto; }
  .routes { gap: calc(20 * var(--u)); }
  .actions { gap: calc(16 * var(--u)); }
}

@media (max-width: 1023px) {
  :root { --u: 1px; }
  html { font-size: 16px; }
  .site-shell::before { left: 14px; width: 2px; }
  body:not([data-route="home"]) .site-shell::before { height: 76px; }
  [data-chrome="nav"] {
    height: 76px;
    padding: 0 16px 0 28px;
    grid-template-columns: 1fr auto;
    gap: 12px;
    font-size: 15px;
  }
  [data-chrome="nav"] .brand { gap: 10px; font-size: 23px; }
  [data-chrome="nav"] .brand img { width: 38px; height: 38px; }
  .menu-toggle {
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--rule-control);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
  }
  [data-chrome="nav"] > .actions { display: none; }
  .routes {
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    z-index: 8;
    padding: 10px 16px 18px 28px;
    display: grid;
    gap: 0;
    background: var(--paper);
    border-bottom: var(--rule-frame);
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    transition: opacity var(--motion-control) linear, transform var(--motion-control) var(--ease-file);
  }
  .routes.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .site-shell { overflow-x: clip; } /* closed menu sits 18px right -> no sideways scroll */
  .routes a { min-height: 46px; display: flex; align-items: center; }
  .page-frame { min-height: 650px; padding-right: 16px; padding-left: 28px; }
  .shell-route-slot { min-height: 650px; }
  [data-chrome="footer"] {
    min-height: 0;
    padding: 24px 16px 24px 28px;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }
  [data-chrome="footer"] .brand img { width: 38px; height: 38px; }
  [data-chrome="footer"] .actions { flex-wrap: wrap; gap: 16px; }
  .footer-ca { min-height: 38px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-file, .motion-cut, .page-frame, .routes { opacity: 1; transform: none; }
}