/* /guide/ and /tr/guide/ — the CITY GUIDE, landscape edition, re-set for the web.
   Generated by build/site_guide.py. Edit the builder, never this file.
   ONE SHEET SERVES BOTH EDITIONS: the plates are the same plates in either language.
   No case transform of any kind, no webfont, no CDN, no request that leaves the page.
   The banned property is named in build/site_guide.py and not here: a comment naming it would
   defeat the check that asserts it absent. */

/* site.css holds the palette, the serif stack and the furniture. This sheet is the one the page
   links, so it pulls the other in — see ruling (G2). Both files are served from this site. */
@import url("../site.css");

/* The plates are 700 units wide and were laid out for a landscape page. The prose keeps the
   reading measure; only the figure pages widen, and only as far as the plate needs. */
body.guide:not(.guide-plates) main { max-width: 40em; }
body.guide-plates main { max-width: 58em; }

.sub {
  margin: -0.3rem 0 1.6rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.desc { color: var(--ink-faint); font-size: 0.95rem; }

/* The guide's own law, in the guide's own words. One rule, no ornament. */
.law {
  margin: 2.4rem 0;
  padding: 1.1rem 0 1.1rem 1.15rem;
  border-left: 2px solid var(--accent);
}
.law strong { display: block; letter-spacing: 0.03em; }
.law span { color: var(--ink-soft); }

.standing { color: var(--ink-soft); }
.standing + .standing { margin-top: -0.55rem; }

/* A plate page widens for the plates and NOT for its prose: a paragraph set to the width of a
   700-unit drawing is a paragraph nobody can follow back to the start of the next line. */
body.guide-plates main > p,
body.guide-plates main > h2,
body.guide-plates main > h3,
body.guide-plates main > ul { max-width: 36em; }

/* ---------- a plate ---------- */
figure.plate { margin: 2.6rem 0 3.2rem; }

/* The maps are drawn near-square, 470 by 560, where the figures are landscape 700 by 430. */
figure.plate.map { max-width: 30em; }

/* Below its own width the plate scrolls INSIDE this frame. The body never scrolls sideways, and
   the labels are never scaled below the size they were drawn to be read at. A scrollable region
   must be reachable from the keyboard, hence tabindex on the frame.

   CORRECTED 2026-08-30, and the sentence above had been false since the guide was built. The two
   floors below were 600px and 300px against plates DRAWN at 700 and 470 — both floors BELOW the
   plate's own width, so nothing ever scrolled and the plate simply shrank: figures to 85.7%, maps
   to 63.8%, whose smallest labels landed at 3.3 CSS pixels. Worse, because 300 < 470 the frame had
   only ~10px of overflow, so the escape hatch this comment describes could not engage at the one
   width where it was needed. Each floor is now the plate's own viewBox width — 700 for the 180
   figures, 470 for the 4 maps, both censused from the built SVGs rather than read off the source —
   so below that width the plate scrolls, as the comment always claimed, and a label is never set
   smaller than it was drawn to be read at. The comment is the specification; the CSS now meets it. */
.plate-frame {
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: #fcfcfa;              /* the figure's own ground, as drawn: a reproduced plate */
}
.plate-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plate-svg { display: block; width: 100%; height: auto; min-width: 700px; }
figure.plate.map .plate-svg { min-width: 470px; }

figure.plate figcaption {
  margin-top: 0.6rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
}
figure.plate figcaption .n { color: var(--ink-soft); }

/* ---------- the guide's prose ---------- */
.aside { color: var(--ink-soft); font-style: italic; }
.aside em { font-style: normal; }
.lead { font-weight: 700; }

/* ---------- contents ---------- */
.toc { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.toc li { margin: 0 0 0.42rem; display: flex; flex-wrap: wrap; gap: 0 0.7rem; align-items: baseline; }
.toc .where { color: var(--ink-faint); font-size: 0.82rem; }
.part { margin-top: 2.4rem; }
.part-note { margin: 0 0 0.9rem; color: var(--ink-faint); font-size: 0.88rem; }

/* ---------- the pager ---------- */
.pager {
  margin-top: 3.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: 0.92rem;
}
.pager .next { margin-left: auto; }
.pager a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 0.12rem; }
.pager a:hover { border-bottom-color: var(--accent); }

.colo p { margin: 0 0 0.35rem; }
.colo .gap { height: 0.9rem; }