:root {
  --paper: #F9F6F0; --ink: #1B2A49; --seal: #C85A32; --sand: #E2D8C9;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Source Sans 3', sans-serif; font-size: 16px; line-height: 1.6; }
.wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-4) var(--space-3); }
header.site { border-bottom: 1px solid var(--ink); padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); }
.brand { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand em { color: var(--seal); font-style: italic; }
h1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.6rem; line-height: 1.15; margin: 0 0 var(--space-3); }
h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.5rem; border-bottom: 1px solid var(--sand); padding-bottom: var(--space-1); }
h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.15rem; margin: var(--space-3) 0 var(--space-1); }
a { color: var(--seal); }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover, nav a.active { color: var(--seal); }
.rule { border: 0; border-top: 1px solid var(--ink); margin: var(--space-4) 0; }
.btn { display: inline-block; background: var(--seal); color: #fff; border: 0; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif; font-size: 1rem; font-weight: 600;
  padding: 12px 28px; min-height: 44px; border-radius: 2px; text-decoration: none; }
.btn:hover { background: #a94a28; }
.btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-quiet:hover { background: var(--sand); }
table.ledger { width: 100%; border-collapse: collapse; }
table.ledger th { text-align: left; font-weight: 600; font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: #6d6455; padding: var(--space-1); border-bottom: 2px solid var(--ink); }
table.ledger td { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--sand); vertical-align: top; }
.status { font-size: .85rem; padding: 3px 10px; border-radius: 2px; white-space: nowrap; }
.status.done { background: #e6efe6; color: #2c5e2e; }
.status.reading, .status.cleaning, .status.queued { background: var(--sand); color: var(--ink); }
.status.error { background: #f6e0da; color: #8c2f14; }
.status.verified { background: var(--ink); color: var(--paper); }
.muted { color: #6d6455; font-size: .9rem; }
.dropzone { border: 1px dashed var(--ink); padding: var(--space-5) var(--space-3); text-align: center;
  border-radius: 2px; background: #fffdf9; }
.dropzone.drag { background: var(--sand); }
.kv th { text-align: left; color: #6d6455; font-weight: 400; padding: 4px 14px 4px 0; white-space: nowrap; vertical-align: top; }
.kv td { padding: 4px 0; }
.flag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-bottom: 1px solid var(--sand); }
.flag input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--seal); cursor: pointer; }
.flag b { background: #fbeedb; padding: 0 4px; cursor: zoom-in; }
.flag.confirmed b { background: #e6efe6; }
.extract { display: none; width: 100%; height: 110px; border: 1px solid var(--sand); margin: 6px 0 2px;
  background-repeat: no-repeat; border-radius: 2px; }
.extract.open { display: block; }
.cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.pageimg { width: 100%; border: 1px solid var(--sand); }
.spin { width: 16px; height: 16px; border: 2px solid var(--sand); border-top-color: var(--seal);
  border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
footer { margin-top: var(--space-5); border-top: 1px solid var(--sand); padding-top: var(--space-2);
  font-size: .85rem; color: #6d6455; }

/* landing */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5); align-items: center; margin: var(--space-5) 0; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: 3.4rem; }
.hero .kicker { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--seal); font-weight: 600; }
.hero-card { border: 1px solid var(--ink); background: #fffdf9; padding: var(--space-3); border-radius: 2px;
  box-shadow: 6px 6px 0 var(--sand); }
.hero-card .doc-line { border-bottom: 1px solid var(--sand); padding: 8px 0; display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }
.hero-card .doc-line b { background: #fbeedb; padding: 0 4px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { border-top: 2px solid var(--ink); padding-top: var(--space-2); }
.step .n { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--seal); font-style: italic; }
.pull { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-style: italic; text-align: center;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: var(--space-3) 0; margin: var(--space-5) 0; }
.audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .audience { grid-template-columns: 1fr; } }

/* trace */
#stage { border: 1px solid var(--sand); background: #fffdf9; border-radius: 2px; width: 100%; height: 560px; cursor: grab; }
#stage:active { cursor: grabbing; }
.node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.node text { font-family: 'Source Sans 3', sans-serif; font-size: 14px; fill: var(--ink); font-weight: 600; }
.node.dim { opacity: .25; }
.edgepath { fill: none; stroke: var(--ink); stroke-width: 1.5; marker-end: url(#arrow); }
.edgepath.lease { stroke: var(--seal); stroke-dasharray: 6 5; }
.edgepath.sel { stroke-width: 3; }
.edgepath.dim { opacity: .15; }
.edgelabel { font-family: 'Source Sans 3', sans-serif; font-size: 12px; fill: #6d6455; }
.yearmark { font-family: 'Playfair Display', serif; font-size: 13px; fill: #b3a68f; }
#detail { border-left: 3px solid var(--seal); background: #fffdf9; padding: var(--space-2) var(--space-3); min-height: 90px; }
.legend { display: flex; gap: var(--space-3); font-size: .85rem; color: #6d6455; margin: var(--space-1) 0 var(--space-3); }
.legend span::before { content: ""; display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--ink); margin-right: 6px; vertical-align: middle; }
.legend span.lease::before { border-top: 2px dashed var(--seal); }