/* Page composition only. Small and plain on purpose: one column, system
   fonts, no framework and no JavaScript.

   Component-shaped rules (badges, breadcrumbs, data tables, notes,
   attribution) moved out to components.css, where they are styled from
   tokens.css's vocabulary under the class names Tasks 3-11 use verbatim —
   see .superpowers/sdd/2026-08-29-front-end/task-2-brief.md. What is left
   here is the page shell (the one-column body box, base link/heading
   colour) and the handful of plain list layouts (place/best/home link
   lists) that are specific to how one template lays out its own content
   rather than a reusable component. Those selectors, and this file's own
   --ink/--muted/--rule/--link variables, are unchanged from before this
   task so the five templates still render exactly as they did.

   Task 3 wires all three stylesheets together in base.html and adds a
   full-bleed .site-header/.site-footer outside this narrow column (the
   Footer frame, node 2:1797, draws the footer edge-to-edge). What was
   `body`'s own margin/max-width/padding moved onto a new `.page` wrapper
   around the breadcrumb nav and `<main>` so the one-column reading width
   below still measures exactly what it did before, between a header and
   footer that now span the full page. The old bare `footer { ... }` rule
   is gone: base.html's `<footer>` always carries `.site-footer` now, and
   that bare-tag rule's light-on-light colours were invisible against the
   dark fill components.css gives it. */

:root {
  --ink: #1a1a1a;
  --muted: #5a5a5a;
  --rule: #d8d8d8;
  --link: #14507d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* design.md 2.1: prose is set in the body face. The stack falls through
     to the system font until a Typekit kit is wired up -- see tokens.css. */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  /* Crawled description and facility text is not written for this layout:
     it includes bare URLs and, in some source languages, long unbroken
     tokens. This is the cheap, conservative backstop -- an unbreakable
     word wraps inside its container instead of forcing the page wide,
     wherever it appears, without hunting down every element that might
     hold one. */
  overflow-wrap: break-word;
}

/* 44rem was a pre-design leftover: the header and footer already cap at
   --page-max (components.css's .site-header-inner / .footer-inner), so a
   narrower .page put the content column at roughly half their width, with
   nothing lining up between them. --page-max is what the design's own
   1360px content column is drawn at; --measure (65ch) is what keeps
   long-form text from stretching to fill it -- see .prose and the
   description paragraph in venue.html, which apply it directly rather than
   relying on .page to do double duty as both a layout width and a reading
   width. */
/* design.md 2.7: "Inner horizontal padding inside every container: 16px",
   and the max width is whichever of the four content widths the template
   claims -- .site-header-inner, .footer-inner and .hero-split all read the
   same --container, which base.html re-points per page via the body class.
   Before this they disagreed (1rem here against 1.5rem on the header), which
   put every page's content 8px inside the wordmark above it. */
.page {
  margin: 0 auto;
  padding: var(--sp-24) var(--container-pad) var(--sp-48);
  max-width: var(--container);
}

a { color: var(--link); }

/* design.md 2.1: "Filson Pro Bold for anything structural" -- every heading
   is set in the display face, every size in it is display bold. Sizes here
   are the pre-design.md defaults; each template moves onto the 2.2 role
   tokens as it is reworked (the home hero already has). */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.5rem; }
h2 a { text-decoration: none; }

.lead { font-size: 1.05rem; color: var(--muted); margin-top: 0; }
.count, .where { font-size: 0.875rem; color: var(--muted); }

nav[aria-label="Breadcrumb"] { font-size: 0.875rem; }

ul.links, ul.venues, ul.badges, ul.sublocations { list-style: none; margin: 0; padding: 0; }
ul.links li, ul.venues li, ul.badges li, ul.sublocations li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule);
}

ul.best-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
ul.best-links li { border: 0; padding: 0; }

ol.best { padding-left: 1.4rem; }
ol.best li { margin-bottom: 1rem; }
ol.best h2 { margin: 0; font-size: 1.1rem; }
ol.best p { margin: 0.15rem 0 0; color: var(--muted); }

dl.facts { margin: 0; }
dl.facts dt { font-weight: 600; margin-top: 0.6rem; }
dl.facts dd { margin: 0; }
address { font-style: normal; }