/* Rental Yield Guide - one stylesheet, no webfonts, no external requests.
   System fonts keep the site fast and avoid a third-party request that would
   otherwise need disclosing. Dark mode follows the reader's setting. */

:root {
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #5a6069;
  --rule: #e3e6ea;
  --accent: #0b5cd5;
  --accent-soft: #eef4fe;
  --warn-bg: #fff8e6;
  --warn-rule: #e8c86a;
  --max: 46rem;
  /* Figures. One hue for the data marks plus a neutral reference band, from
     the validated default palette (categorical slot 1). Validated for both
     modes on 2026-11-07. */
  --viz-1: #2a78d6;
  --viz-band: #eceef1;
  --viz-box: #fbfcfd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e7e9ec;
    --muted: #9aa1ab;
    --rule: #2a2e35;
    --accent: #7fb0ff;
    --accent-soft: #1b2230;
    --warn-bg: #272013;
    --warn-rule: #6b5a2a;
    --viz-1: #3987e5;
    --viz-band: #23272e;
    --viz-box: #1a1d22;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; background: var(--accent); color: #fff;
  padding: .5rem .75rem; border-radius: 4px; z-index: 10;
}

/* ---- header / footer ---- */

header.site {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
header.site .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: baseline; padding-top: 1rem; padding-bottom: 1rem;
}
.brand {
  font-size: 1.125rem; text-decoration: none; color: var(--fg);
  letter-spacing: -.01em; margin-right: auto;
}
.brand strong { color: var(--accent); }

header.site nav, footer.site nav {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  font-size: .9375rem;
}
header.site nav a, footer.site nav a {
  color: var(--muted); text-decoration: none;
}
header.site nav a:hover, footer.site nav a:hover { color: var(--accent); }
header.site nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }

footer.site {
  margin-top: 4rem; border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem; color: var(--muted); font-size: .9375rem;
}
footer.site p { margin: 0 0 .75rem; }
footer.site .disclaim { font-size: .875rem; }
footer.site nav { margin-top: 1rem; }

/* ---- breadcrumb ---- */
/* The visible trail that the BreadcrumbList in each page's JSON-LD describes.
   Google asks for the markup to match something a reader can see. */

.crumbs { margin: -1rem 0 1.25rem; font-size: .875rem; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "\203a"; margin: 0 .4rem; color: var(--rule); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

/* ---- article ---- */

article h1 {
  font-size: 2.125rem; line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
.standfirst {
  font-size: 1.1875rem; color: var(--muted); line-height: 1.55;
  margin: 0 0 2rem;
}

article h2 {
  font-size: 1.4375rem; line-height: 1.3; letter-spacing: -.01em;
  margin: 2.75rem 0 .75rem; padding-top: .25rem;
}
article h3 {
  font-size: 1.125rem; margin: 2rem 0 .5rem;
}
article h4 {
  font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--muted);
}

p, ul, ol { margin: 0 0 1.125rem; }
li { margin-bottom: .375rem; }
ul, ol { padding-left: 1.5rem; }

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

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

blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.125rem;
  border-left: 3px solid var(--rule); color: var(--muted);
}
blockquote p { margin: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: var(--accent-soft); padding: .1em .35em;
  border-radius: 3px;
}

/* ---- table of contents ---- */

.toc {
  background: var(--accent-soft); border-radius: 8px;
  padding: 1rem 1.25rem .25rem; margin: 0 0 2rem;
}
.toc h2 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 .5rem;
}
.toc ol { margin: 0 0 1rem; padding-left: 1.25rem; font-size: .9375rem; }
.toc li { margin-bottom: .25rem; }

/* ---- callouts ---- */

.callout {
  margin: 1.75rem 0; padding: 1rem 1.25rem; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--rule);
  font-size: .9375rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout.warning { background: var(--warn-bg); border-color: var(--warn-rule); }
.callout h3, .callout h4 { margin-top: 0; }

/* ---- tables ---- */

.table-wrap { overflow-x: auto; margin: 1.75rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td {
  text-align: left; padding: .5rem .75rem;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
th { font-weight: 600; white-space: nowrap; }

/* ---- Ark7 / sponsored links ---- */

a.ark7 { font-weight: 600; }

/* ---- page meta ---- */

footer.meta {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .875rem;
}
footer.meta p { margin: 0; }

@media (max-width: 34rem) {
  article h1 { font-size: 1.75rem; }
  .standfirst { font-size: 1.0625rem; }
  article h2 { font-size: 1.25rem; }
}


/* ---- sticky grouped header menu ----
   Andy asked for the header to "feel like a menu", to stay put while
   scrolling, and for some of it to fold away. The groups are <details>, so
   the disclosure works with no JavaScript, on touch and from the keyboard -
   a :hover dropdown does none of those on a phone. */

header.site {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  margin-bottom: 2.5rem;
}
/* The menu bar is allowed to be wider than the 46rem reading column: seven
   group labels do not fit beside the brand at reading width, and a sticky
   header that wraps to two lines costs that height on every screen for the
   whole scroll. The article itself stays at --max. */
header.site .wrap {
  max-width: 62rem;
  align-items: center; padding-top: .6rem; padding-bottom: .6rem;
  gap: .35rem .75rem; flex-wrap: nowrap;
}
/* nowrap is a wide-screen rule only: on a phone it forces the brand and
   the menu button onto one line, which overflows the viewport and gives
   the whole page a horizontal scroll. Found in the first mobile render. */
@media (max-width: 48rem) {
  header.site .wrap { flex-wrap: wrap; }
}
.brand { white-space: nowrap; margin-right: .5rem; }

/* A sticky header hides whatever an anchor scrolls to, so every heading and
   every figure keeps clear of it. Without this, every link in the contents
   list lands with its target underneath the menu. */
article h2, article h3, article h4, figure.viz { scroll-margin-top: 5.5rem; }

.menu-toggle > summary {
  display: none;                      /* wide screens: the bar is the menu */
}
.menu-toggle > nav { display: flex; }

header.site nav[aria-label="Main"] {
  gap: .15rem; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; margin-left: auto;
}

details.menu-group { position: relative; }
details.menu-group > summary {
  list-style: none; cursor: pointer;
  padding: .3rem .45rem; border-radius: 6px;
  color: var(--muted); font-size: .875rem; white-space: nowrap;
}
details.menu-group > summary::-webkit-details-marker { display: none; }
details.menu-group > summary::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: .36em; height: .36em; margin-left: .45em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
details.menu-group[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
details.menu-group > summary:hover { color: var(--accent); background: var(--accent-soft); }
details.menu-group > summary.here { color: var(--fg); font-weight: 600; }
details.menu-group > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
details.menu-group > ul {
  position: absolute; left: auto; right: 0; top: calc(100% + .35rem); z-index: 40;
  margin: 0; padding: .4rem; list-style: none;
  min-width: 15rem; max-width: 20rem;
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
details.menu-group > ul a {
  display: block; padding: .4rem .55rem; border-radius: 6px;
  color: var(--fg); text-decoration: none; font-size: .9375rem;
  line-height: 1.35;
}
details.menu-group > ul a:hover { background: var(--accent-soft); color: var(--accent); }
details.menu-group > ul a[aria-current="page"] { font-weight: 600; }

/* ---- the contents list, foldable ---- */

details.toc {
  background: var(--accent-soft); border-radius: 8px;
  padding: .75rem 1.25rem; margin: 0 0 2rem;
}
details.toc > summary {
  cursor: pointer; list-style: none;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
details.toc > summary::-webkit-details-marker { display: none; }
details.toc > summary::before {
  content: "\2212"; display: inline-block; width: 1em; font-weight: 700;
}
details.toc:not([open]) > summary::before { content: "+"; }
details.toc > ol { margin: .6rem 0 .25rem; padding-left: 1.25rem; font-size: .9375rem; }
details.toc li { margin-bottom: .25rem; }

/* ---- figures ---- */

figure.viz { margin: 2rem 0; }
.viz-svg {
  width: 100%; height: auto; display: block;
  overflow: visible;
}
.viz-bar { fill: var(--viz-1); }
.viz-band { fill: var(--viz-band); }
.viz-bandlabel, .viz-axislabel {
  fill: var(--muted); font-size: 12px;
  font-family: inherit;
}
.viz-cat { fill: var(--fg); font-size: 13px; font-family: inherit; }
.viz-val { fill: var(--fg); font-size: 13px; font-weight: 600; font-family: inherit; }
.viz-axis { stroke: var(--rule); stroke-width: 1; }
/* Scatter. The ring is the page background, not a border: it is what keeps
   two cities that land on the same spot reading as two marks rather than one
   blob, and it costs no extra data-weight ink. */
.viz-dot { fill: var(--viz-1); stroke: var(--bg); stroke-width: 2; }
.viz-dotlabel { fill: var(--fg); font-size: 12.5px; font-weight: 600; font-family: inherit; }
.viz-dot-key { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.viz-leader { stroke: var(--muted); stroke-width: 1; }
.viz-grid { stroke: var(--rule); stroke-width: 1; }
.viz-tick { fill: var(--muted); font-size: 12px; font-family: inherit; }
.viz-box { fill: var(--viz-box); stroke: var(--rule); stroke-width: 1; }
.viz-step { fill: var(--fg); font-size: 13.5px; font-weight: 600; font-family: inherit; }
.viz-stepnum { fill: var(--accent); }
.viz-stepbody { fill: var(--muted); font-size: 12.5px; font-family: inherit; }
.viz-arrow { stroke: var(--rule); stroke-width: 2; fill: none; }

figure.viz figcaption {
  margin-top: .65rem; font-size: .9375rem; line-height: 1.5;
  border-left: 3px solid var(--rule); padding-left: .85rem;
}
.viz-title { display: block; color: var(--fg); }
.viz-caption { display: block; color: var(--muted); margin-top: .2rem; }
.viz-source {
  display: block; color: var(--muted); margin-top: .4rem;
  font-size: .8125rem;
}

/* ---- narrow screens ---- */

@media (max-width: 48rem) {
  /* Below this width the seven group labels would wrap to three lines and a
     sticky header that tall would eat the screen, so the whole menu folds
     behind one button. */
  .menu-toggle > summary {
    display: block; cursor: pointer; list-style: none;
    padding: .35rem .6rem; border: 1px solid var(--rule); border-radius: 6px;
    font-size: .9375rem; color: var(--fg);
  }
  .menu-toggle > summary::-webkit-details-marker { display: none; }
  .menu-toggle:not([open]) > nav { display: none; }
  .menu-toggle[open] > nav {
    display: block; width: 100%;
    margin-top: .6rem; padding-top: .6rem;
    border-top: 1px solid var(--rule);
    max-height: 70vh; overflow-y: auto;
  }
  .menu-toggle { width: 100%; }
  details.menu-group > summary { padding: .5rem .25rem; }
  details.menu-group > ul {
    position: static; min-width: 0; max-width: none;
    border: 0; box-shadow: none; padding: 0 0 .5rem .75rem;
    background: transparent;
  }
  article h2, article h3, article h4, figure.viz { scroll-margin-top: 4.5rem; }
}