/* The public pages. Same world as the app: warm near-black, paper cream, one amber accent.
   No build step and no dependencies — these are files a browser reads. */
:root {
  --ink: #0e0d0b;
  --ink-raised: #191713;
  --ink-line: #2a2621;
  --paper: #ece4d2;
  --paper-muted: rgba(236, 228, 210, 0.72);
  --amber: #d8a053;
  --story: ui-serif, Georgia, "Times New Roman", serif;
  --control: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --record: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 80px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--story);
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 680px; margin: 0 auto; }

header { padding: 56px 0 32px; border-bottom: 1px solid var(--ink-line); margin-bottom: 40px; }

.record {
  font-family: var(--record);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 10px;
}

h1 { font-weight: 400; font-size: 38px; line-height: 1.15; margin: 0 0 8px; }
h2 { font-weight: 400; font-size: 25px; margin: 44px 0 10px; }
h3 { font-family: var(--control); font-weight: 600; font-size: 17px; margin: 28px 0 6px; }

p, li { color: var(--paper-muted); }
p { margin: 0 0 16px; }
ul { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 8px; }

strong { color: var(--paper); font-weight: 600; }
a { color: var(--amber); }

.lede { font-size: 20px; color: var(--paper); }

.note {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.note p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
th {
  text-align: left;
  font-family: var(--record);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-muted);
  font-weight: 400;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--ink-line);
}
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ink-line); color: var(--paper-muted); vertical-align: top; }
td:first-child { color: var(--paper); white-space: nowrap; }

footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--record);
  font-size: 12px;
  color: var(--paper-muted);
}

@media (max-width: 520px) {
  h1 { font-size: 30px; }
  table, td:first-child { white-space: normal; }
}