/* Atlas of the Overlooked — hand-written, no framework.
   The design goal is a quiet page: the kind of surface you'd
   overlook, which is the joke, and also the point. */

:root {
  --paper: #faf7f1;
  --ink: #2b2620;
  --faint: #8a8175;
  --accent: #a4522c;      /* rust — the colour of things left outside */
  --rule: #e2dcd2;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #201d19;
    --ink: #e8e2d8;
    --faint: #97907f;
    --accent: #d97a48;
    --rule: #3a352e;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 112.5%;              /* 18px at browser default */
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  max-width: var(--measure);
}

/* Masthead */
header.site {
  margin-bottom: 3rem;
}
header.site .site-title {
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
header.site .site-title a {
  color: var(--ink);
  text-decoration: none;
}
header.site .site-sub {
  color: var(--faint);
  font-style: italic;
  margin: 0.35rem 0 0;
}

h1, h2, h3 {
  font-weight: normal;
  line-height: 1.25;
}
h1 { font-size: 1.7rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 2.2rem 0 0.6rem; }

/* Section rules on the room pages (index, map room, about) — earned
   once the front page held four sections. Thread-page member
   headings live inside <section> and stay unruled on purpose. */
main > h2,
article > h2 {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-top: 2.8rem;
}

/* Month shelves in the front-page entry list — added 2 Aug 2026,
   when the list outgrew a single undivided column. Year lives in
   the shelf label; the items beneath drop it. */
h3.month {
  margin: 1.9rem 0 1rem;
  color: var(--faint);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
ul.entries + h3.month { margin-top: 2.4rem; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* Entry pages */
.entry-meta {
  color: var(--faint);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}
article p { margin: 0 0 1.1rem; }

/* Threads — crosswise structure through the entries */
.entry-threads {
  margin-top: 2.2rem;
  color: var(--faint);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Revision notes — an entry admitting it has a first draft beneath it */
.entry-revision {
  margin-top: 2.2rem;
  color: var(--faint);
  font-size: 0.85rem;
  font-style: italic;
}
.entry-revision + .entry-threads { margin-top: 0.4rem; }
/* Coordinates — an entry's tags, printed in the margin of the plate */
.entry-coords {
  margin-top: 2.2rem;
  color: var(--faint);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.entry-threads + .entry-coords,
.entry-revision + .entry-coords { margin-top: 0.4rem; }
blockquote {
  margin: 0 0 0.6rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
}
/* Arriving via a thread link lands on the exact paragraph; mark it */
article p:target {
  border-left: 2px solid var(--accent);
  padding-left: 0.9rem;
  margin-left: calc(-0.9rem - 2px);
}

/* Map room: the gazetteer of places (tags) */
dl.places { margin: 0; }
dl.places dt {
  margin-top: 1.1rem;
  color: var(--faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
dl.places dd { margin: 0.15rem 0 0; }
dl.places .place-note {
  color: var(--faint);
  font-style: italic;
  font-size: 0.9rem;
}
/* Arriving via an entry's coordinates lands on the place; mark it */
dl.places dt:target { color: var(--accent); }

/* Index list of entries */
ul.entries {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.entries li {
  margin: 0 0 1.1rem;
}
ul.entries .date {
  display: block;
  color: var(--faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* An entry that has been reopened since publication (since 15 Aug
   2026). The link goes to its layer in the map room's strata, where
   the old version is described — the entry list should not be the
   one page on the site that hides a change. */
a.revised {
  color: var(--faint);
  text-decoration-style: dotted;
}
a.revised:hover { color: var(--accent); }

/* Strata anchors sit on the date span; mark the arrival like a
   gazetteer place. */
ul.entries .date:target { color: var(--accent); }

/* Plates — drawn maps (since 9 Aug 2026, when Plate I got its
   terrain). The SVG is inline, so every mark takes the page's
   palette from these vars and follows dark mode for free. */
figure.plate-map { margin: 2rem 0; }
figure.plate-map svg { display: block; width: 100%; height: auto; }
figure.plate-map .plate-frame { fill: none; stroke: var(--rule); }
figure.plate-map .place circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.25;
}
figure.plate-map .place text {
  fill: var(--ink);
  font-size: 11px;
  text-anchor: middle;
}
figure.plate-map .frontier circle { stroke: var(--faint); }
figure.plate-map .frontier text { fill: var(--faint); }
figure.plate-map .capital circle {
  stroke: var(--accent);
  stroke-width: 1.5;
}
figure.plate-map .capital .capital-dot { fill: var(--accent); stroke: none; }
figure.plate-map .capital text {
  fill: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
figure.plate-map .region-label {
  fill: var(--faint);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-anchor: middle;
}
figure.plate-map .road {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1;
  stroke-dasharray: 5 3;
}
/* Labels wear a paper halo so a road passing beneath stays read-
   able — the halo, not the road, gives way where they cross. */
figure.plate-map .place text,
figure.plate-map .road-label {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3;
  stroke-linejoin: round;
}
figure.plate-map .road-label {
  fill: var(--faint);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-anchor: middle;
}
/* Settlements link to the gazetteer, road names to their seams. */
figure.plate-map a { text-decoration: none; }
figure.plate-map a:focus { outline: none; }
figure.plate-map a:hover text,
figure.plate-map a:focus text {
  fill: var(--accent);
  text-decoration: underline;
}
figure.plate-map a:hover circle,
figure.plate-map a:focus circle {
  stroke: var(--accent);
  stroke-width: 2;
}
figure.plate-map figcaption {
  color: var(--faint);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.6rem;
}

/* Footer */
footer.site {
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: 0.85rem;
}
footer.site p { margin: 0.3rem 0; }