/* ---------------------------------------------------------------------------
   Stoop & Kin.

   The visual world is the paperwork of land rather than a photograph of it: a
   cool drafting-film ground, the navy of a county recorder's stamp for every
   piece of structure, and exactly one loud colour -- the orange of surveyor's
   flagging tape -- spent on the figures that matter and the warnings that stop
   a purchase. A stock photograph of somewhere beautiful would be a promise
   this site cannot keep; the land it is about is ordinary, and the honest
   picture of ordinary land is a survey of it.

   Three rules:

   1. Long prose is set in a serif at a real reading measure. People read these
      pages at eleven at night trying to decide something, and most of the
      content is argument rather than interface.
   2. Every figure is monospaced and tabular. The page is wall to wall with
      ranges that get compared down a column, and proportional digits make that
      work harder than it needs to be.
   3. Orange is the budget. It appears on the headline number, the primary
      action and a "stop" warning, and nowhere else. The moment it decorates a
      card border it stops meaning anything.
   --------------------------------------------------------------------------- */

:root {
  /* Drafting film: cool, pale, faintly green. Deliberately not the warm cream
     that every page about land and homesteading reaches for. */
  --paper: #eef0ec;
  --card: #fbfcfa;
  --ink: #141a1c;
  --ink-soft: #4a5457;
  --line: #b6bdb8;
  --line-soft: #d6dbd6;

  /* A county recorder's ink. Carries all the structure: links, rules,
     headings, the current page in the navigation. */
  --accent: #10405c;
  --accent-soft: #e2eaf0;

  /* Surveyor's flagging tape, and the only loud thing on the site. */
  --flag: #c8521d;
  --flag-soft: #faeade;

  --go: #2d6a4a;
  --olive: #5a6628;
  --stop: #8e2a1c;

  --on-flag: #ffffff;
  --on-accent: #ffffff;

  /* The drawn figures: soil in section, and the water under it. */
  --soil-top: #bdb796;
  --soil-sub: #d9d4bf;
  --soil-rock: #c6ccc8;
  --water: #8fbcd4;

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  --wrap: 72rem;
  --measure: 38rem;
  --radius: 0.5rem;
  --gap: 1.5rem;

  color-scheme: light;
}

/* The default for most visitors is "system", which stamps nothing on the root
   element -- so the media query has to carry dark mode on its own, guarded so
   that somebody who explicitly chose light still gets light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #111518;
    --card: #181e21;
    --ink: #e8ece9;
    --ink-soft: #9ea8a6;
    --line: #333c40;
    --line-soft: #252d30;
    --accent: #8cc0de;
    --accent-soft: #15262f;
    --flag: #ea7e42;
    --flag-soft: #2a1911;
    --go: #74c198;
    --olive: #a8b566;
    --stop: #e8836f;
    --on-flag: #1a0d06;
    --on-accent: #0b1418;
    --soil-top: #47442f;
    --soil-sub: #302e23;
    --soil-rock: #262c2f;
    --water: #2d5f7a;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #111518;
  --card: #181e21;
  --ink: #e8ece9;
  --ink-soft: #9ea8a6;
  --line: #333c40;
  --line-soft: #252d30;
  --accent: #8cc0de;
  --accent-soft: #15262f;
  --flag: #ea7e42;
  --flag-soft: #2a1911;
  --go: #74c198;
  --olive: #a8b566;
  --stop: #e8836f;
  --on-flag: #1a0d06;
  --on-accent: #0b1418;
  --soil-top: #47442f;
  --soil-sub: #302e23;
  --soil-rock: #262c2f;
  --water: #2d5f7a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Explicit, because the page composites over a ground somebody else paints. */
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, .eyebrow, .nav, .btn, button, .footlabel, th {
  font-family: var(--display);
}

h1, h2, h3, h4 {
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.6em;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 3px solid var(--flag);
  outline-offset: 2px;
  border-radius: 2px;
}

strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.9em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--flag); color: var(--on-flag);
  padding: 0.75rem 1rem; font-family: var(--display); font-weight: 500;
}
.skip:focus { left: 0; }

/* ---- Frame -------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  /* A 16px gutter at phone width, and no sideways page scroll anywhere. */
  padding: 0 1rem;
}

.measure { max-width: var(--measure); }

/* Both classes on one box is a cascade collision: .measure is declared after
   .wrap, so it wins the max-width, and `margin: 0 auto` then centres the
   narrow column in the viewport rather than leaving it at the wrap's left
   edge. That put every page heading a couple of hundred pixels right of the
   content beneath it. This restores the left edge arithmetically, and floors
   at the gutter once the viewport is narrower than the wrap. */
.wrap.measure {
  /* The gutter is .wrap's own padding, so this only has to reproduce the
     centring margin -- adding a gutter here too counted it twice and left
     the heading 16px right of the content under it. */
  margin-left: max(0px, calc((100% - var(--wrap)) / 2));
  margin-right: auto;
}

.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); flex-wrap: wrap;
}

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--card);
  padding: 0.85rem 0;
}

.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.brand svg { color: var(--flag); flex: none; }
.amp { color: var(--flag); }

.nav {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.9rem; font-weight: 500;
}
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--accent); text-decoration: underline; }
.nav a[aria-current='page'] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--flag);
}

/* ---- Bands -------------------------------------------------------------- */

.band { padding: 3.5rem 0; border-top: 1px solid var(--line-soft); }
.band:first-child { border-top: 0; }
.tint { background: var(--card); }

.pagehead { padding: 3rem 1rem 0; }
main > .pagehead + * { border-top: 0; }

.eyebrow {
  font-family: var(--display); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--flag); margin-bottom: 0.7em;
}

.lede { font-size: 1.2rem; color: var(--ink-soft); }
.small { font-size: 0.9rem; color: var(--ink-soft); }

/* ---- Buttons ------------------------------------------------------------ */

.btn, button {
  display: inline-block;
  font-family: var(--display); font-weight: 500; font-size: 1rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--flag);
  border-radius: var(--radius);
  background: var(--flag); color: var(--on-flag);
  text-decoration: none; cursor: pointer;
}
.btn:hover, button:hover { filter: brightness(1.08); text-decoration: none; }

.btn.quiet {
  background: transparent; color: var(--accent); border-color: var(--line);
}
.btn.quiet:hover { border-color: var(--accent); filter: none; }

/* ---- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero > .wrap { position: relative; }
.hero h1 { max-width: 30ch; }
.hero .lede { max-width: 34rem; }

/* The contour drawing. Low enough in contrast to sit under text at either
   theme, and inert: aria-hidden on the element, pointer-events off here. */
.contours {
  position: absolute; inset: 0;
  color: var(--accent); opacity: 0.11;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .contours { opacity: 0.16; }
}
.contours svg { width: 100%; height: 100%; display: block; }

.herobtns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 1rem; }
.hero-note { max-width: 30rem; }

/* ---- The cost grid on the home page ------------------------------------- */

.costgrid {
  display: grid;
  /* Explicit rather than auto-fit. There are six cost cards and auto-fit chose
     five columns, which left the second row as two cards and three empty cells
     with the grid's background showing through the gaps -- a grey hole. Two
     and three both divide six exactly. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2.5rem 0;
}
@media (min-width: 52rem) { .costgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 26rem) { .costgrid { grid-template-columns: 1fr; } }

.costcard { background: var(--card); padding: 1.1rem 1.25rem; }
/* The total is the point of the block, so it gets its own full-width row
   rather than sitting in the grid as a seventh peer. */
.costcard.total { background: var(--flag-soft); grid-column: 1 / -1; }
.costlabel {
  font-family: var(--display); font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin-bottom: 0.45em;
}
.costfig {
  font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums;
  margin: 0; color: var(--ink);
}
.costcard.total .costfig { color: var(--flag); font-weight: 500; }

/* ---- The three phases --------------------------------------------------- */

.phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--gap);
  margin-top: 2.5rem;
}
.phase {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.tint .phase { background: var(--paper); }
/* The numbering is information here: these are phases in an order, and doing
   the third before the second is how people lose money. */
.phasenum {
  font-family: var(--mono); font-size: 0.85rem; color: var(--flag);
  margin-bottom: 0.9em;
}
.phase h3 { margin-bottom: 0.4em; }
.phase h3 a { color: var(--ink); text-decoration: none; }
.phase h3 a:hover { color: var(--accent); text-decoration: underline; }
.phasetag { font-size: 1rem; color: var(--ink); }
/* The "N tactics" link is the recurring element across these cards, so it sits
   on the same line in each one rather than wherever the prose happened to
   stop. Same for the playbook index below. */
.phase > p:last-child, .tacticlist > li > p:last-child { margin-top: auto; padding-top: 0.9rem; }

/* ---- FAQ ---------------------------------------------------------------- */

.faq { margin-top: 1.5rem; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  font-family: var(--display); font-weight: 500; font-size: 1.05rem;
  cursor: pointer; color: var(--ink);
}
.faq summary:hover { color: var(--accent); }
.faq details p { margin: 0.9em 0 0; color: var(--ink-soft); }

/* ---- Signup ------------------------------------------------------------- */

.accentband {
  background: var(--accent);
  color: var(--on-accent);
  border-top: 0;
}
.accentband h2 { color: var(--on-accent); }
.accentband p { color: var(--on-accent); opacity: 0.92; }
.accentband a { color: var(--on-accent); }

.signup {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 1.5rem 0 1rem;
}
.signup input {
  flex: 1 1 15rem;
  font: 400 1rem var(--body);
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--card); color: var(--ink);
}
.signup button { flex: none; }
.accentband :focus-visible { outline-color: var(--card); }

/* ---- Forms -------------------------------------------------------------- */

.field { margin-bottom: 1.25rem; }
.field > label {
  display: block;
  font-family: var(--display); font-weight: 500; font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.field input[type='number'],
.field input[type='text'],
.field select {
  width: 100%;
  font: 400 1rem var(--body);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card); color: var(--ink);
}
.field input[type='number'] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.field.check > label {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-weight: 400; font-family: var(--body);
}
.field.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; }
.help { font-size: 0.85rem; color: var(--ink-soft); margin: 0.45rem 0 0; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 26rem) { .pair { grid-template-columns: 1fr; } }

.whereform {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* ---- The calculator ----------------------------------------------------- */

.calc {
  display: grid;
  gap: 2.5rem;
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 60rem) {
  .calc { grid-template-columns: 20rem 1fr; gap: 3rem; align-items: start; }
  .calcform { position: sticky; top: 1.5rem; }
}

.calcform {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.calcform h2 { font-size: 1.15rem; }
.calcform > button { width: 100%; }

.headline {
  border: 1px solid var(--line);
  border-left: 4px solid var(--flag);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.75rem;
  margin-bottom: 2rem;
}
.bignum {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-variant-numeric: tabular-nums;
  color: var(--flag);
  line-height: 1.1;
  margin: 0 0 0.35em;
}
.multiple { font-family: var(--display); font-weight: 500; font-size: 1.1rem; margin-bottom: 0.7em; }

/* ---- Tables ------------------------------------------------------------- */

.lines, .rates {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 0.97rem;
}
.lines th, .lines td, .rates th, .rates td {
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.lines thead th, .rates thead th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); border-bottom: 1px solid var(--line);
}
.lines td, .rates .fig {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lines th[scope='row'], .rates th[scope='row'] {
  font-family: var(--display); font-weight: 500;
}
/* The reasoning under each line. It is the point of the table -- a total
   nobody can check is a total they over-trust or ignore -- so it is always
   visible rather than behind a tooltip nobody on a phone can reach. */
.why {
  display: block;
  font-family: var(--body); font-weight: 400; font-size: 0.87rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
  max-width: 54ch;
  white-space: normal;
}
.askrow th, .askrow td { color: var(--ink-soft); }
.subtotal th, .subtotal td { border-top: 1px solid var(--line); }
.grand th, .grand td {
  border-top: 2px solid var(--flag); border-bottom: 0;
  font-size: 1.1rem; color: var(--flag);
}
.rates { margin-top: 2rem; }
@media (max-width: 40rem) {
  .rates td:last-child { white-space: normal; }
}

/* A table wider than a phone scrolls in its own box, never the whole page. */
.wrap > table { display: block; overflow-x: auto; }

/* ---- Panels ------------------------------------------------------------- */

.twoup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--gap);
  margin-bottom: 2rem;
}
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
}
.panel h3 { font-size: 1rem; }
.panelfig {
  font-family: var(--mono); font-size: 1.4rem; font-variant-numeric: tabular-nums;
  color: var(--accent); margin-bottom: 0.5em;
}

/* ---- Warnings -----------------------------------------------------------
   Severity is encoded in form as well as colour -- its own label, its own
   left edge weight -- because colour alone is not a signal everybody gets. */

.warnings { margin-bottom: 2rem; }
.warn {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
@media (max-width: 34rem) { .warn { grid-template-columns: 1fr; gap: 0.5rem; } }
.warn h4 { margin-bottom: 0.45em; }
.sev {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 0.15rem 0 0;
}
.warn.stop { border-left-color: var(--stop); background: var(--flag-soft); }
.warn.stop .sev { color: var(--stop); }
.warn.check { border-left-color: var(--accent); }
.warn.check .sev { color: var(--accent); }
.warn.save { border-left-color: var(--olive); }
.warn.save .sev { color: var(--olive); }

/* ---- Share ------------------------------------------------------------- */

.share {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}
.sharebox {
  width: 100%;
  font: 400 0.85rem var(--mono);
  padding: 0.6rem 0.7rem;
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper); color: var(--ink-soft);
}

/* ---- Playbook ----------------------------------------------------------- */

.phasesec { margin-bottom: 3.5rem; }
.phasesec:last-child { margin-bottom: 0; }
/* Scrolled to from the home page and from the nav, so the heading must not
   land under the top of the viewport. */
.phasesec { scroll-margin-top: 1.5rem; }

.tacticlist {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--gap);
}
.tacticlist > li {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.tacticlist h3 { margin-bottom: 0.5em; }
.tacticlist h3 a { color: var(--ink); text-decoration: none; }
.tacticlist h3 a:hover { color: var(--accent); text-decoration: underline; }

.promise {
  font-family: var(--display); font-weight: 500;
  font-size: 1.2rem; line-height: 1.4;
  border-left: 4px solid var(--flag);
  padding-left: 1.1rem;
  margin-bottom: 1.75em;
}

.moves, .says, .alsoin {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.moves h2, .says h2, .alsoin h2 { font-size: 1.2rem; }
.moves ul { padding-left: 0; list-style: none; }
.moves li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.9em;
}
/* A surveyor's tick rather than a bullet. Decorative, so it is drawn in CSS
   and never reaches the accessibility tree. */
.moves li::before {
  content: '';
  position: absolute; left: 0.25rem; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--flag);
  border-bottom: 2px solid var(--flag);
  transform: rotate(45deg);
}

.says blockquote {
  margin: 0 0 1em;
  padding: 1.25rem 1.4rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 1.1rem;
}
.says blockquote p { font-style: italic; }

.plain { list-style: none; margin: 0 0 1em; padding: 0; }
.plain li { margin-bottom: 0.4em; }

/* ---- Where to look ------------------------------------------------------ */

.sourcelist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--gap);
  margin-top: 2.5rem;
}
.source {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  display: flex; flex-direction: column;
}
.tint .source { background: var(--paper); }
.source h3 { margin-bottom: 0.5em; }
.source .what {
  font-family: var(--display); font-weight: 500; font-size: 0.97rem;
  color: var(--ink);
}
.source .note { border-left: 2px solid var(--line); padding-left: 0.9rem; }
.searchline { margin: auto 0 0; padding-top: 1.1rem; }
.searchlabel {
  display: block;
  font-family: var(--display); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); margin-bottom: 0.4rem;
}
.searchphrase {
  display: block;
  font-family: var(--mono); font-size: 0.87rem;
  background: var(--accent-soft);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  color: var(--accent);
}
a.searchphrase:hover { background: var(--flag-soft); color: var(--flag); }

/* ---- State guides ------------------------------------------------------- */

.topiclist li {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 500;
}
.statetable .why { max-width: 40ch; }
.statefig { color: var(--ink-soft); }
.statefig .panelfig { display: inline; margin: 0 0.2em 0 0; }
.statefact {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.statefact h2 { font-size: 1.2rem; }
/* The one paragraph per topic a reader can act on, so it is the one lifted. */
.act {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.cites { font-size: 0.87rem; color: var(--ink-soft); }
.cites a { color: inherit; }

/* ---- Photographs -------------------------------------------------------- */

.photo { margin: 1.75rem 0; }
.photo img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--line-soft);
}
.photo-low img { object-position: center bottom; }
.photo figcaption {
  margin-top: 0.55rem;
  font-size: 0.87rem; line-height: 1.45;
  color: var(--ink-soft);
}
/* The credit is a legal requirement, not a flourish, so it is always there --
   just set small and in the utility face so it reads as a footnote. */
.photo .credit { font-family: var(--mono); font-size: 0.72rem; }
.photo .credit a { color: inherit; }

.herogrid { display: grid; gap: 2rem; }
.herophoto { margin: 0; }
@media (min-width: 60rem) {
  .herogrid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
  .herophoto img { aspect-ratio: 4 / 5; }
}

/* ---- The asking price against the real cost ----------------------------- */

.costbar { margin: 2rem 0 0.5rem; }
.cb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "label fig" "track track";
  gap: 0.3rem 1rem;
  align-items: baseline;
  margin-bottom: 0.9rem;
}
.cb-label { grid-area: label; font-family: var(--display); font-weight: 500; font-size: 0.95rem; }
.cb-fig {
  grid-area: fig; justify-self: end;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.95rem;
}
.cb-track { grid-area: track; display: block; width: 100%; height: 1.5rem; }
.cb-rail { fill: var(--line-soft); }
.cb-land { fill: var(--accent); background: var(--accent); }
.cb-work { fill: var(--flag); background: var(--flag); }
.cb-maybe {
  fill: var(--flag-soft); stroke: var(--flag); stroke-width: 1.5; stroke-dasharray: 5 4;
  background: var(--flag-soft);
}
.cb-key {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  list-style: none; padding: 0; margin: 0.25rem 0 0;
  font-size: 0.85rem; color: var(--ink-soft);
}
.cb-key li { display: flex; align-items: center; gap: 0.45rem; }
.cb-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 2px; }
span.cb-maybe { border: 1.5px dashed var(--flag); }

/* ---- The parcel in section ---------------------------------------------- */

.planfig { margin: 2.5rem 0; }
.planscroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.siteplan { display: block; width: 100%; min-width: 46rem; height: auto; }
.planfig figcaption { margin-top: 0.6rem; max-width: var(--measure); }

/* The drawing needs room for its labels. On a phone the cards say the same
   thing at a readable size, so each screen gets the one that suits it. */
@media (max-width: 47.99rem) { .planfig { display: none; } }
@media (min-width: 48rem) { .planfig + .costgrid { display: none; } }

.siteplan .g-top { fill: var(--soil-top); }
.siteplan .g-sub { fill: var(--soil-sub); }
.siteplan .g-rock { fill: var(--soil-rock); }
.siteplan .g-surface { stroke: var(--ink); stroke-width: 2; }
.siteplan .g-water { stroke: var(--water); stroke-width: 3; stroke-dasharray: 10 6; }
.siteplan .f-road, .siteplan .f-pad { fill: var(--ink-soft); }
.siteplan .f-culvert { fill: var(--card); stroke: var(--ink-soft); stroke-width: 2; }
.siteplan .f-pole { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.siteplan .f-wire { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 6; }
.siteplan .f-drive { stroke: var(--ink-soft); stroke-width: 6; stroke-dasharray: 2 5; }
.siteplan .f-trunk { stroke: var(--olive); stroke-width: 3; }
.siteplan .f-crown { fill: var(--go); opacity: 0.5; }
.siteplan .f-house, .siteplan .f-tank { fill: var(--card); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.siteplan .f-door, .siteplan .f-wellhead { fill: var(--accent); }
.siteplan .f-casing { stroke: var(--accent); stroke-width: 5; }
.siteplan .f-sewer { fill: none; stroke: var(--ink-soft); stroke-width: 3; }
.siteplan .f-trench { fill: var(--line); opacity: 0.7; }
.siteplan .f-stakepost { stroke: var(--ink); stroke-width: 2; }
.siteplan .f-flag { fill: var(--flag); }
.siteplan .f-leader { stroke: var(--ink-soft); stroke-width: 1; }
.siteplan .fl-name { font-family: var(--display); font-weight: 600; font-size: 15px; fill: var(--ink); }
.siteplan .fl-cost { font-family: var(--mono); font-size: 15px; fill: var(--flag); }
.siteplan .fl-note { font-family: var(--mono); font-size: 12px; fill: var(--ink-soft); }

/* ---- Marks, bars and cards on the state guides -------------------------- */

.topicmark { flex: none; color: var(--accent); }
.statefact h2 { display: flex; align-items: center; gap: 0.6rem; }

.minibar { display: block; width: 100%; max-width: 9rem; height: 6px; margin-top: 0.4rem; }
.minibar .mb-rail { fill: var(--line-soft); }
.minibar .mb-bar { fill: var(--accent); }
.minibar.us .mb-bar { fill: var(--ink-soft); }

.statecards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 2.5rem 0 1rem;
}
@media (min-width: 34rem) { .statecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .statecards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.statecard { display: flex; flex-direction: column; margin: 0; }
/* Heading first in the document, picture first on screen. */
.statecard .photo { order: -1; margin: 0 0 0.75rem; }
.statecard .photo figcaption { margin-top: 0.3rem; }
.sc-name { font-size: 1.15rem; margin: 0; }
.sc-fig { font-family: var(--mono); font-size: 0.92rem; color: var(--ink-soft); margin: 0.15rem 0 0; }

/* ---- Outcome pages ----------------------------------------------------- */

.goodnews, .badnews {
  font-size: 1.15rem;
  border-left: 4px solid var(--go);
  padding: 1.1rem 1.35rem;
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 1.5em;
}
.badnews { border-left-color: var(--stop); }

/* ---- Footer ------------------------------------------------------------- */

.sitefoot {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 3rem 0 2.5rem;
  margin-top: 0;
}
.footgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap);
}
.footbrand {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  margin-bottom: 0.5em;
}
.footlabel {
  font-family: var(--display); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); margin-bottom: 0.7em;
}
.sitefoot .plain a { color: var(--ink-soft); }
.copyright {
  border-top: 1px solid var(--line-soft);
  margin-top: 2.5rem; padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}