:root{
  --bg:#fbfaf7; --surface:#fff; --surface-2:#f5f3ee; --line:#e5e2da; --line-strong:#cfcabd;
  --ink:#141a16; --ink-2:#4a544c; --ink-3:#79837b;
  --accent:#1d5c41; --accent-2:#2c8259; --accent-soft:#e8f2ec;
  --amber:#a75f18; --amber-soft:#fdf2e5;
  --sky-1:#cfe0e6; --sky-2:#eef1e9;
  --r1:#2d6a4c; --r2:#4b8f63; --r3:#7fb08a;
  --shadow-sm:0 1px 2px rgba(20,26,22,.06);
  --shadow:0 2px 4px rgba(20,26,22,.05), 0 12px 32px -16px rgba(20,26,22,.25);
  --radius:16px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d1210; --surface:#141b17; --surface-2:#1a231e; --line:#242f28; --line-strong:#334037;
    --ink:#eef2ee; --ink-2:#b0bab2; --ink-3:#87928a;
    --accent:#79cfa3; --accent-2:#5cb888; --accent-soft:#16241d;
    --amber:#e0a165; --amber-soft:#241a10;
    --sky-1:#1b2a30; --sky-2:#16201a;
    --r1:#79cfa3; --r2:#4f9e77; --r3:#356b53;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 4px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:730px}
img,svg{max-width:100%}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(12px);background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom:1px solid var(--line)}
.site-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.022em;color:var(--ink);text-decoration:none;font-size:16px}
nav.site a{color:var(--ink-2);text-decoration:none;font-size:14.5px;margin-left:20px;padding-bottom:2px;border-bottom:2px solid transparent}
nav.site a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:860px){nav.site{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#0d1512;isolation:isolate}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:0}
/* Scrim: dark enough on the left for text contrast, clearing to the right so the
   photo still reads. Two layers — horizontal for the copy, vertical to seat the
   hero against the page below. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,16,13,.92) 0%,rgba(8,16,13,.82) 38%,rgba(8,16,13,.45) 66%,rgba(8,16,13,.28) 100%),
             linear-gradient(180deg,rgba(8,16,13,.5) 0%,rgba(8,16,13,0) 30%,rgba(8,16,13,.55) 100%)}
.hero-inner{position:relative;z-index:2;padding:104px 0 108px;max-width:720px}
/* Default h1 uses normal ink. The white override is scoped to the hero, where it
   sits on a dark photo scrim — applying it globally made the h1 invisible on any
   page without a hero (404, disclosure). */
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.024em;font-size:clamp(2.15rem,5.6vw,3.6rem);line-height:1.06;margin:0 0 20px;color:var(--ink);text-wrap:balance}
.hero h1{color:#fff}
/* Written for the hero, where they sit on a dark photo scrim. Left global they
   render white-on-cream and disappear on any page without a hero - the same
   fault the h1 had. Readable defaults here; white scoped to .hero. */
.standfirst{font-size:1.19rem;color:#5c5750;margin:0 0 28px;max-width:58ch}
.hero .standfirst{color:rgba(255,255,255,.84)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:100px;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.12);font-size:.82rem;font-weight:500;color:#5c5750}
.hero .pill{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.pill.src{background:rgba(166,106,44,.10);border-color:rgba(166,106,44,.34);color:#7a4a1c}
.hero .pill.src{background:rgba(224,161,101,.18);border-color:rgba(224,161,101,.42);color:#f0c191}
.dot{width:6px;height:6px;border-radius:50%;background:var(--r3);flex:none}

/* ---------- section banner images ---------- */
.banner{position:relative;border-radius:var(--radius);overflow:hidden;margin:26px 0 0;box-shadow:var(--shadow);aspect-ratio:16/6;background:var(--surface-2)}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 16px;color:#fff;font-size:.88rem;
  background:linear-gradient(180deg,rgba(8,16,13,0),rgba(8,16,13,.78))}
@media(max-width:640px){.banner{aspect-ratio:4/3}}
.inline-fig{margin:0 0 22px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:3/2;background:var(--surface-2)}
.inline-fig img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- generic ---------- */
section{padding:56px 0}
.sec-label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
h2{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.55rem,3.2vw,2.1rem);line-height:1.18;margin:0 0 14px}
h3{font-size:1.08rem;letter-spacing:-.012em;margin:28px 0 8px}
p{margin:0 0 16px;color:var(--ink-2)}
p.lead{color:var(--ink);font-size:1.07rem}
a{color:var(--accent)}
ul{color:var(--ink-2);padding-left:20px}
li{margin-bottom:9px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between}
.panel-head h2{margin:0;font-size:1.08rem;font-family:var(--sans);font-weight:650;letter-spacing:-.015em}
.hint{font-size:.81rem;color:var(--ink-3)}
.panel-foot{padding:13px 24px;font-size:.79rem;color:var(--ink-3);background:var(--surface-2);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}

/* ---------- chart ---------- */
.chart-wrap{padding:26px 20px 10px;overflow-x:auto}
.chart-wrap svg{min-width:660px}
.lbl{font:500 12.5px var(--sans);fill:var(--ink)}
.axis{font:500 11px var(--mono);fill:var(--ink-3)}
.grid{stroke:var(--line);stroke-width:1}
.rng{stroke:var(--r3);stroke-width:7;stroke-linecap:round;opacity:.55}
.med{fill:var(--r1);stroke:var(--surface);stroke-width:2.5}
.cap{font:600 11px var(--mono);fill:var(--ink-2)}
.legend{display:flex;flex-wrap:wrap;gap:18px;padding:0 24px 20px;font-size:.82rem;color:var(--ink-3)}
.legend i{display:inline-block;width:22px;height:7px;border-radius:4px;background:var(--r3);opacity:.55;vertical-align:middle;margin-right:7px}
.legend i.d{width:11px;height:11px;border-radius:50%;background:var(--r1);opacity:1}

/* ---------- table ---------- */
.scroller{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:960px;font-size:.92rem}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{min-width:236px;padding-left:24px}
th:last-child,td:last-child{padding-right:24px}
thead th{position:sticky;top:60px;background:var(--surface);z-index:2;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700;white-space:nowrap;cursor:pointer;user-select:none;border-bottom:1px solid var(--line-strong)}
thead th:hover{color:var(--accent)}
thead th::after{content:"↕";opacity:.3;margin-left:5px}
thead th[aria-sort="ascending"]::after{content:"↑";opacity:1;color:var(--accent)}
thead th[aria-sort="descending"]::after{content:"↓";opacity:1;color:var(--accent)}
tbody tr:hover{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:none}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.role{font-weight:650;line-height:1.35}
.role a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.role a:hover{color:var(--accent)}
.soc{display:block;font-size:.75rem;color:var(--ink-3);font-weight:400;margin-top:2px}
.growth{font-weight:650}
.growth.up{color:var(--accent)}
.growth.down{color:#a8451c}
@media (prefers-color-scheme:dark){.growth.down{color:#e58a63}}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:100px;font-size:.79rem;font-weight:600;white-space:nowrap}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.tag.yes{background:var(--accent-soft);color:var(--accent)}
.tag.mid{background:var(--amber-soft);color:var(--amber)}
.tag.no{background:var(--surface-2);color:var(--ink-3)}
.season{font-size:.86rem;color:var(--ink-2);white-space:nowrap}

/* ---------- notice ---------- */
.notice{border-left:3px solid var(--amber);background:var(--amber-soft);padding:17px 22px;border-radius:0 12px 12px 0;margin:26px 0;font-size:.94rem;color:var(--ink-2)}
.notice strong{color:var(--ink)}

/* ---------- housing comparison ---------- */
.bars{padding:24px}
.bar-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:18px;align-items:center;margin-bottom:16px}
.bar-name{font-size:.9rem;font-weight:600}
.bar-name small{display:block;font-weight:400;color:var(--ink-3);font-size:.78rem}
.bar-track{position:relative;height:34px;display:flex;align-items:center;gap:0}
.bar{height:34px;border-radius:7px 0 0 7px;display:flex;align-items:center;padding:0 12px;font-size:.83rem;font-weight:650;color:#fff;white-space:nowrap}
.bar.full{border-radius:7px;background:linear-gradient(90deg,var(--r1),var(--r2))}
.bar.room{background:linear-gradient(90deg,#7a6a52,#a08b68)}
.bar-food{height:34px;border-radius:0 7px 7px 0;flex:1;min-width:90px;display:flex;align-items:center;padding:0 12px;font-size:.79rem;color:var(--ink-3);border:1px dashed var(--line-strong);border-left:none;background:repeating-linear-gradient(45deg,transparent,transparent 6px,color-mix(in srgb,var(--ink) 5%,transparent) 6px,color-mix(in srgb,var(--ink) 5%,transparent) 12px)}
@media(max-width:620px){.bar-row{grid-template-columns:1fr;gap:6px}}

/* ---------- calendar ---------- */
.cal{padding:22px 24px 8px;overflow-x:auto}
.cal-inner{min-width:720px}
.cal-months{display:grid;grid-template-columns:190px repeat(12,1fr);gap:0 2px;margin-bottom:8px}
.cal-months span{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);text-align:center;font-weight:700}
.cal-months span:first-child{text-align:left}
.cal-row{display:grid;grid-template-columns:190px repeat(12,1fr);gap:0 2px;align-items:center;margin-bottom:7px}
.cal-label{font-size:.84rem;font-weight:600;padding-right:12px;line-height:1.25}
.cal-label small{display:block;font-weight:400;color:var(--ink-3);font-size:.75rem}
.cal-cell{height:26px;border-radius:4px;background:var(--surface-2)}
.cal-cell.apply{background:linear-gradient(180deg,var(--amber),color-mix(in srgb,var(--amber) 78%,#000));position:relative}
.cal-cell.work{background:linear-gradient(180deg,var(--r2),var(--r1))}
.cal-key{display:flex;gap:20px;padding:12px 24px 20px;font-size:.82rem;color:var(--ink-3);flex-wrap:wrap}
.cal-key i{display:inline-block;width:16px;height:11px;border-radius:3px;vertical-align:middle;margin-right:7px}
.cal-key i.a{background:var(--amber)}
.cal-key i.w{background:var(--r2)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:26px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 7px;font-size:1rem}
.card p{margin:0;font-size:.91rem}
.card .fig{font-family:var(--mono);font-size:1.65rem;color:var(--accent);letter-spacing:-.03em;display:block;margin-bottom:2px;font-weight:600}

details{border-bottom:1px solid var(--line);padding:17px 0}
details summary{cursor:pointer;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--ink-3);font-weight:400;font-size:1.3em;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:12px 0 0}

.method{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.method dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 22px;font-size:.91rem}
.method dt{color:var(--ink-3);font-weight:700;white-space:nowrap}
.method dd{margin:0;color:var(--ink-2)}
@media(max-width:600px){.method dl{grid-template-columns:1fr;gap:3px 0}.method dd{margin-bottom:12px}}

footer.site{border-top:1px solid var(--line);background:var(--surface);margin-top:44px;padding:38px 0;font-size:.87rem;color:var(--ink-3)}
footer.site a{color:var(--ink-2)}
.disclosure{background:var(--surface-2);border-radius:12px;padding:15px 19px;margin-bottom:24px;font-size:.85rem}

/* Sister-site credit in the footer. Deliberately quiet: it is attribution, not
   a recommendation. This site's value is that its advice is disinterested, so a
   link to a property we also own is stated plainly and styled like the rest of
   the footer rather than dressed up as a call to action. */
footer.site .sister {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: .875rem;
}