/* pluginsolarwestmidlands.co.uk
   The dataset makes this region the yardstick. Of thirteen UK points, Birmingham is
   the median, and the mean of all thirteen lands within one kilowatt hour of it. So
   the site is an index: this region is 100, and everything else in the country is
   expressed as a distance from it.

   The device is a diverging bar, a baseline down the middle with values reaching left
   for below and right for above. Nothing else in the network charts anything that
   way, and it only works because there is a defensible zero point to chart against.

   Dark graphite with one cyan. Two tones, no third hue, which suits a page that is
   entirely about measurement. */

:root{
  --paper:#101418;
  --card:#171D24;
  --card-2:#1E252E;
  --line:#2B343E;
  --ink:#EAF0F5;
  --body-ink:#B6C2CE;
  --dim:#818F9B;
  --cyan:#00B6DB;
  --cyan-deep:#0090AE;
  --cyan-dim:#12414E;
  --steel:#768899;
  --display:"Big Shoulders Display","Helvetica Neue",Arial,sans-serif;
  --body:"Lexend","Helvetica Neue",Arial,sans-serif;
  --meta:"Cousine",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body-ink);font-family:var(--body);font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.9rem}
@media(max-width:640px){.wrap{padding:0 1.15rem}}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;letter-spacing:0;line-height:1;text-transform:uppercase}
p{margin:0 0 1.05rem;max-width:64ch}
a{color:var(--cyan);font-weight:600;text-decoration:none}
a:hover{color:var(--ink)}
.meta{font-family:var(--meta);font-size:.78rem}

header.mast{background:var(--card);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.2rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--ink);text-transform:uppercase}
.brand b{color:var(--cyan);font-weight:700}
.mast nav{display:flex;gap:1.3rem;font-size:.92rem;font-weight:500}
.mast nav a{color:var(--body-ink)}
.mast nav a:hover{color:var(--cyan)}
@media(max-width:880px){.mast nav{display:none}}

.hero{padding:3.6rem 0 2.4rem}
h1{font-size:clamp(2.9rem,6.4vw,5.2rem);max-width:16ch;overflow-wrap:break-word}
@media(max-width:400px){h1{font-size:2.35rem}}
h1 em{font-style:normal;color:var(--cyan)}
.stand{font-size:1.12rem;color:var(--dim);max-width:56ch;margin:1.4rem 0 0}

/* the index chart, this site's device */
.chart{margin-top:2.2rem;border:1px solid var(--line);background:var(--card)}
.chart-head{display:grid;grid-template-columns:11rem 1fr 5rem;gap:1rem;padding:.75rem 1.2rem;background:var(--card-2);font-family:var(--meta);font-size:.71rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.chart-head span:last-child{text-align:right}
.crow{display:grid;grid-template-columns:11rem 1fr 5rem;gap:1rem;align-items:center;padding:.6rem 1.2rem;border-top:1px solid var(--line)}
.crow .name{font-size:.93rem;color:var(--ink)}
.crow .name small{display:block;color:var(--dim);font-size:.78rem}
.crow .val{font-family:var(--meta);font-size:.95rem;text-align:right;color:var(--ink)}
.track{position:relative;height:1.4rem}
.track .zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--steel)}
.track i{position:absolute;top:.3rem;height:.8rem;display:block}
.track i.up{background:var(--cyan);left:50%}
.track i.down{background:var(--steel);right:50%}
/* The baseline row sits on a lighter panel than the page, so the muted colour has to
   lift with it. One --dim cannot serve two grounds. */
.crow.base{background:var(--cyan-dim)}
.sub{color:var(--dim);font-size:.82rem}
.crow.base small,.crow.base span,.callout.key small,.callout.key span,
tr.base td .sub,tr.base td small{color:#9DA8B2}
section.light tr.base td .sub{color:#3A4A52}
.crow.base .name{color:#fff;font-weight:600}
.crow.base .val{color:var(--cyan)}
.crow.base .track i{background:var(--cyan)}
@media(max-width:760px){
  .chart-head,.crow{grid-template-columns:1fr 4.5rem}
  .chart-head span:nth-child(2),.crow .track{display:none}
}

.scale{display:flex;justify-content:space-between;font-family:var(--meta);font-size:.71rem;color:var(--dim);padding:.5rem 1.2rem;border-top:1px solid var(--line)}

section{padding:3.5rem 0}
section.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.light{background:#F3F5F7;color:#33404C}
section.light h2,section.light h3{color:#101418}
section.light .lede{color:#5C6B79}
section.light p{color:#33404C}
section.light a{color:#0090AE}
h2{font-size:clamp(2.1rem,3.6vw,3rem);margin-bottom:.75rem}
.lede{font-size:1.06rem;color:var(--dim);max-width:57ch}

table{width:100%;border-collapse:collapse;margin:1.8rem 0 0;font-size:.95rem;background:var(--card)}
th,td{text-align:left;padding:.72rem .9rem;border:1px solid var(--line);vertical-align:top}
th{background:var(--card-2);font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
td.num{text-align:right;font-family:var(--meta);white-space:nowrap;color:var(--ink)}
tr.base td{background:var(--cyan-dim);color:var(--ink)}
section.light table{background:#fff}
section.light th,section.light td{border-color:#D3DAE1}
section.light th{background:#E4E9EE;color:#101418}
section.light td.num{color:#101418}
section.light tr.base td{background:#DEF1F6}
@media(max-width:560px){table{display:block;overflow-x:auto}}

.callout{border:1px solid var(--line);background:var(--card);padding:1.25rem 1.4rem;margin-top:1.9rem;max-width:64ch}
.callout b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--ink);margin-bottom:.3rem;text-transform:uppercase}
.callout p{margin:0;font-size:.95rem}
.callout.key{background:var(--cyan-dim);border-color:#1B5A6C}
.callout.key b{color:var(--cyan)}
section.light .callout{background:#fff;border-color:#D3DAE1}
section.light .callout b{color:#101418}
section.light .callout.key{background:#DEF1F6;border-color:#AFD9E3}
section.light .callout.key b{color:#0B6A80}

form{background:var(--card);border:1px solid var(--line);padding:1.7rem}
section.light form{background:#fff;border-color:#D3DAE1}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
@media(max-width:880px){.fg{grid-template-columns:1fr;gap:1.8rem}}
label{display:block;font-size:.83rem;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
section.light label{color:#101418}
input,select{width:100%;font:inherit;font-size:1rem;padding:.72rem .82rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:0}
section.light input,section.light select{background:#F3F5F7;border-color:#D3DAE1;color:#101418}
input:focus,select:focus{outline:2px solid var(--cyan);outline-offset:1px}
.field-row{margin-bottom:1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.row2{grid-template-columns:1fr}}
.btn{display:block;width:100%;background:var(--cyan);color:#06222A;font-family:var(--display);font-weight:700;font-size:1.35rem;text-transform:uppercase;padding:.7rem 1.3rem;border:0;cursor:pointer}
.btn:hover{background:var(--cyan-deep);color:#fff}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.note{font-size:.86rem;color:var(--dim);margin:.9rem 0 0}
section.light .note{color:#5C6B79}

footer{background:var(--card);color:var(--dim);padding:2.9rem 0 3.4rem;font-size:.9rem;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.6rem}
@media(max-width:820px){footer .wrap{grid-template-columns:1fr;gap:1.7rem}}
footer h4{font-family:var(--meta);font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin:0 0 .7rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
footer a{color:var(--body-ink);font-weight:500}
footer a:hover{color:var(--cyan)}
.foot-note{grid-column:1/-1;border-top:1px solid var(--line);margin-top:2rem;padding-top:1.3rem;font-size:.82rem;color:var(--steel)}