/* South Coast House Prices: coastal atlas. Light = chart by day, dark = chart by night. */
:root{
  --bg:#FFFFFF;--panel:#F5F9FB;--ink:#0F2337;--soft:#4B5E70;--faint:#7A8A99;--line:#D5DFE7;--rule:#0F2337;
  --accent:#0B6E83;--hi:#0B6E83;--buoy:#D9622B;
  --land:#F4EFE2;--sea:#BFDDEB;--depth:#8DBFD6;--tidal:#E2E3D2;--marsh:#CFDCC0;--beach:#EDE2C2;--flood:#2E7DB0;
  --road:#1B2E44;--minor:#9AA3A8;--stream:#7FB3D0;--halo:#FFFFFF;
  --font:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A1622;--panel:#0F1E2D;--ink:#E6EEF5;--soft:#A8B9C8;--faint:#7389A0;--line:#22374B;--rule:#A8B9C8;
  --accent:#F2B544;--hi:#F2B544;--buoy:#F07F4A;
  --land:#172533;--sea:#124A75;--depth:#2F79A8;--tidal:#22363F;--marsh:#22392D;--beach:#2A2C26;--flood:#4FA3D9;
  --road:#C9D6E2;--minor:#4C5D6E;--stream:#2F6F95;--halo:#0A1622;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A1622;--panel:#0F1E2D;--ink:#E6EEF5;--soft:#A8B9C8;--faint:#7389A0;--line:#22374B;--rule:#A8B9C8;
  --accent:#F2B544;--hi:#F2B544;--buoy:#F07F4A;
  --land:#172533;--sea:#124A75;--depth:#2F79A8;--tidal:#22363F;--marsh:#22392D;--beach:#2A2C26;--flood:#4FA3D9;
  --road:#C9D6E2;--minor:#4C5D6E;--stream:#2F6F95;--halo:#0A1622;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 var(--font)}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
main>*{max-width:760px}main>.cols{max-width:none}main>.strip{max-width:none}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance;line-height:1.15}

/* Masthead */
.top{border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:-.01em;font-size:18px}
.brand svg{width:30px;height:30px;flex:none}
.brand span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;font-size:16px}
.nav a{color:var(--ink);text-decoration:none;padding:8px 2px}
.nav a:hover{text-decoration:underline}
.mode{font:inherit;font-size:14px;color:var(--soft);background:none;border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer;min-height:36px}

main{padding-block:22px 56px}
.strip{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;border-block:1px solid var(--rule);padding:5px 0;
  font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--accent)}
.crumbs{font-size:15px;color:var(--soft);margin:10px 0 0}.crumbs a{color:var(--soft)}
h1{font-size:clamp(44px,9vw,74px);font-weight:800;letter-spacing:-.03em;line-height:1;margin:18px 0 8px}
.home h1{font-size:clamp(34px,6.5vw,52px)}
.updated{color:var(--soft);font-size:15px;margin:0 0 18px}
.lead{font-size:21px;line-height:1.5;margin:0 0 22px}
.lead b{color:var(--hi)}

/* Key figures: a ruled legend box, not cards */
.key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 26px;border-top:2px solid var(--rule)}
.key div{padding:12px 14px 14px 0;border-bottom:1px solid var(--line)}
.key div:nth-child(odd){border-right:1px solid var(--line)}
.key div:nth-child(even){padding-left:14px}
.key dt{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);font-weight:700}
.key dd{margin:2px 0 0;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.key dd.note{font-size:14px;font-weight:400;color:var(--soft)}

/* The chart: framed like an Admiralty chart, with a graduated neatline */
.chartfig{margin:0 0 30px}
.neat{border:2px solid var(--rule);padding:6px;background:
  repeating-linear-gradient(90deg,var(--rule) 0 14px,transparent 14px 28px) top/100% 4px no-repeat,
  repeating-linear-gradient(90deg,var(--rule) 0 14px,transparent 14px 28px) bottom/100% 4px no-repeat,
  repeating-linear-gradient(0deg,var(--rule) 0 14px,transparent 14px 28px) left/4px 100% no-repeat,
  repeating-linear-gradient(0deg,var(--rule) 0 14px,transparent 14px 28px) right/4px 100% no-repeat}
.chart{display:block;width:100%;height:auto}
.chart .land{fill:var(--land)}.chart .sea,.chart .lake{fill:var(--sea)}
.chart .depth{fill:none;stroke:var(--depth);stroke-width:1.1}.chart .d1{stroke-dasharray:6 5}
.chart .tidal{fill:var(--tidal)}.chart .marsh{fill:var(--marsh)}.chart .beach{fill:var(--beach)}
.chart .fz2{fill:var(--flood);opacity:.12}.chart .fz3{fill:var(--flood);opacity:.22}
.chart .stream{fill:none;stroke:var(--stream);stroke-width:1.6}
.chart .minor{fill:none;stroke:var(--minor);stroke-width:1.3}
.chart .major{fill:none;stroke:var(--road);stroke-width:3.4;stroke-linecap:round}
.chart .rail{fill:none;stroke:var(--road);stroke-width:2;stroke-dasharray:8 6}
.chart .coast{fill:none;stroke:var(--depth);stroke-width:1.6}
.chart .pc circle{fill:var(--buoy);stroke:var(--halo);stroke-width:1.4}
.chart .lab text{font:800 25px var(--font);fill:var(--ink);stroke:var(--halo);stroke-width:6px;paint-order:stroke;letter-spacing:.02em}
.chart .lab .water{font-style:italic;font-weight:700;fill:var(--flood)}
.chart .lab .road{font-size:21px}
.chart .lab .end{text-anchor:end}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--soft);margin:10px 0 0;padding:0;list-style:none}
.legend i{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border:1px solid var(--line)}
.credit{font-size:13px;color:var(--faint);margin:6px 0 0}

/* Sections and Q&A */
h2{font-size:25px;font-weight:800;margin:34px 0 8px;padding-top:12px;border-top:1px solid var(--rule)}
.qa p{margin:0 0 6px}
.src{font-size:14px;color:var(--soft)}
.note{font-size:15px;color:var(--soft)}

/* Tables: ruled, sortable */
.tw{overflow-x:auto;margin:6px 0}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
caption{caption-side:top;text-align:left;font-size:14px;color:var(--soft);padding-bottom:6px}
th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);text-align:left;border-bottom:2px solid var(--rule);
  padding:8px 10px 8px 0;cursor:pointer;user-select:none;text-decoration:underline dotted var(--faint);text-underline-offset:3px}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line)}
th:not(:first-child),td.n{text-align:right}
th[aria-sort=ascending]::after{content:" ↑"}th[aria-sort=descending]::after{content:" ↓"}
[data-tip]{cursor:help}
.tip{position:fixed;z-index:50;max-width:min(320px,calc(100vw - 24px));background:var(--ink);color:var(--bg);font:15px/1.45 var(--font);
  padding:9px 12px;border-radius:6px;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* Prose pages */
.prose h1{font-size:clamp(34px,6vw,48px)}
.prose ul{padding-left:22px}.prose li{margin-bottom:6px}

/* Footer */
.foot{border-top:2px solid var(--rule);padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));font-size:15px;color:var(--soft)}
.foot a{color:var(--soft)}
.foot .small{font-size:13px;color:var(--faint)}
.btn{font:inherit;font-size:16px;padding:10px 16px;border-radius:8px;border:1px solid var(--accent);background:var(--bg);color:var(--accent);cursor:pointer;min-height:44px}
.install{display:none;margin:0 0 22px}
@media (max-width:520px){.key dd{font-size:25px}.lead{font-size:19px}}

/* Desktop: the chart sits beside the text and stays in view while reading. Mobile-first: stacked below 960px. */
@media (min-width:960px){
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:0 48px;align-items:start}
  .cols .side{grid-column:2;grid-row:1;position:sticky;top:20px}
  .cols .body{grid-column:1;grid-row:1;max-width:680px}
  .cols .body>h2:first-child{margin-top:0}
  .key{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols .body h1{margin-top:6px}
}