/* Townvite website: the real town from the app as a pixel background, paper cards with hard pixel borders.
   Shared by every page. The picture is shown at a whole number of CSS pixels per art pixel (--s, set by site.js). */
:root {
  --ink: #27301A; --soft: #5E6A49; --olive: #576F35; --paper: #FFFEF8; --edge: #27301A; --pale: #E4EBD2;
  --shadow: rgba(23, 28, 16, .38); --badge-text: #FFFEF8; --grid: rgba(255, 255, 255, .07);
  --tint: rgba(247, 245, 232, 0); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #EDF0E0; --soft: #A3AD8F; --olive: #A9C27A; --paper: #212817; --edge: #A9C27A; --pale: #2B3420;
    --shadow: rgba(0, 0, 0, .5); --badge-text: #171C10; --grid: rgba(0, 0, 0, .12); --tint: rgba(10, 14, 6, .18); color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background: #6B9B4A; color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
@media (prefers-color-scheme: dark) { body { background: #2E4A2B; } }

.town { position: fixed; inset: 0; z-index: 0; background: url(/town-light.png) center / cover no-repeat; image-rendering: pixelated; }
@media (prefers-color-scheme: dark) { .town { background-image: url(/town-dark.png); } }
.town.snap { background-size: calc(134 * var(--s)) calc(184 * var(--s)); background-position: var(--x) var(--y); }
.grid { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--s, 8px) var(--s, 8px); background-position: center; }
.tint { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--tint); }

/* Pages of text sit on a quieter town. */
body.doc { --tint: rgba(247, 245, 232, .38); }
@media (prefers-color-scheme: dark) { body.doc { --tint: rgba(10, 14, 6, .5); } }

.shell { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--olive); text-underline-offset: 3px; }

/* Top bar (text pages) */
header.bar { background: var(--paper); border-bottom: 4px solid var(--edge); }
header.bar .row { max-width: 900px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--olive); text-decoration: none; font: 700 24px/1 "New York", Georgia, "Times New Roman", serif; }
.brand .mark { height: 34px; width: auto; }
header.bar nav a { color: var(--soft); text-decoration: none; margin-left: 18px; font-size: 15px; }
header.bar nav a:hover, header.bar nav a[aria-current] { color: var(--olive); text-decoration: underline; text-underline-offset: 5px; }

/* A page of text */
main.page { flex: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: 28px 16px 36px; }
.card { background: var(--paper); border: 4px solid var(--edge); box-shadow: 8px 8px 0 var(--shadow); }
.card.doc { padding: 30px 32px 34px; }
.card.doc h1, .card.doc h2, .card.doc h3 { font-family: "New York", Georgia, "Times New Roman", serif; line-height: 1.2; text-wrap: balance; color: var(--ink); }
.card.doc h1 { font-size: 38px; margin: 0 0 8px; }
.card.doc h2 { font-size: 24px; margin: 40px 0 10px; padding-top: 6px; }
.card.doc h3 { font-size: 18px; margin: 26px 0 6px; }
.card.doc p { margin: 0 0 16px; }
.card.doc ul { padding-left: 22px; margin: 0 0 16px; } .card.doc li { margin-bottom: 6px; }
.card.doc .updated { color: var(--soft); font-size: 15px; margin-bottom: 26px; }
.card.doc .note { background: var(--pale); border: 3px solid var(--edge); padding: 12px 16px; }
@media (max-width: 560px) { .card.doc { padding: 20px 18px 24px; border-width: 3px; box-shadow: 6px 6px 0 var(--shadow); } .card.doc h1 { font-size: 30px; } .card.doc h2 { font-size: 21px; margin-top: 32px; } }

/* Footer */
footer.bar { background: var(--paper); border-top: 4px solid var(--edge); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
footer.bar .row { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; color: var(--soft); }
footer.bar a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 480px) { footer.bar { padding-top: 8px; font-size: 13px; } footer.bar .row { justify-content: center; text-align: center; gap: 2px 14px; } }