/* pluginsolarsoutheast.co.uk
   The South East has the strongest generation figures in the United Kingdom, and a
   site that only said so would be a boast with nothing behind it. So the structure
   is a ranking that undercuts itself: the league table first, then the comparison
   that shows a badly aimed panel here beaten by a well aimed one in the Highlands.

   Its second distinguishing fact is administrative. This is the only English region
   with no single network operator, so the question a reader most wants answered has
   two possible answers and neither can be given without a postcode.

   Oxblood on chalk, with a high contrast serif. Unused elsewhere in the network. */

:root{
  --paper:#F5F1EA;
  --card:#FFFFFF;
  --ink:#1C1A19;
  --body-ink:#3A3633;
  --dim:#726A60;
  --rule:#DCD3C5;
  --ox:#6E1423;
  --ox-deep:#4F0D19;
  --ox-tint:#F7E9EB;
  --slate:#49525A;
  --lift:#1F6B4A;
  --lift-tint:#E9F2ED;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --meta:"Red Hat Mono",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.64;-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:400;letter-spacing:-0.005em;line-height:1.08}
p{margin:0 0 1.05rem;max-width:64ch}
a{color:var(--ox);font-weight:600;text-decoration:none}
a:hover{color:var(--ink)}
.meta{font-family:var(--meta);font-size:.78rem}
.tnum{font-variant-numeric:tabular-nums}

header.mast{background:var(--card);border-bottom:1px solid var(--rule)}
.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-size:1.5rem;color:var(--ink)}
.brand b{color:var(--ox);font-weight:400}
.mast nav{display:flex;gap:1.35rem;font-size:.93rem;font-weight:500}
.mast nav a{color:var(--body-ink);font-weight:500}
.mast nav a:hover{color:var(--ox)}
@media(max-width:820px){.mast nav{display:none}}

.hero{padding:3.5rem 0 2.75rem}
.hero-split{display:grid;grid-template-columns:1fr 17rem;gap:3rem;align-items:end}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:2rem;align-items:start}}
.hero-split>*{min-width:0}
h1{font-size:clamp(2.9rem,6vw,4.8rem);max-width:15ch}
h1 em{font-style:italic;color:var(--ox)}
.stand{font-size:1.14rem;color:var(--dim);max-width:52ch;margin:1.4rem 0 0}

/* the rank badge, this site's mark */
.rank{background:var(--ox);color:#fff;padding:1.4rem 1.5rem}
.rank .pos{font-family:var(--display);font-size:4.4rem;line-height:.82;display:block}
.rank .of{font-family:var(--meta);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#E8BFC6;display:block;margin-bottom:.7rem}
.rank .fig{font-family:var(--meta);font-size:1.5rem;color:#fff;margin-top:.9rem;display:block}
.rank .cap{font-size:.86rem;color:#EAC8CE;margin:.35rem 0 0;line-height:1.45}

section{padding:3.4rem 0}
section.alt{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
section.dark{background:var(--ink);color:#CFC8BF}
section.dark h2,section.dark h3{color:#fff}
section.dark .lede{color:#8E8274}
h2{font-size:clamp(2rem,3.4vw,2.9rem);margin-bottom:.75rem}
.lede{font-size:1.07rem;color:var(--dim);max-width:56ch}

/* the league table, the page's spine */
.league{margin-top:1.9rem;background:var(--card);border:1px solid var(--rule)}
.lrow{display:grid;grid-template-columns:2.6rem 1fr 7rem 1fr;gap:1.1rem;align-items:center;padding:.7rem 1.1rem;border-top:1px solid var(--rule)}
.lrow:first-child{border-top:0}
.lrow.head{background:var(--ink);color:#fff;font-family:var(--meta);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border-top:0}
.lrow.head .bar{background:transparent}
.lrow.head .kwh,.lrow.head span{color:#fff}
.lrow .pos{font-family:var(--meta);font-size:.86rem;color:var(--dim)}
.lrow .place{font-weight:600;color:var(--ink);font-size:.96rem}
.lrow .kwh{font-family:var(--meta);font-size:.95rem;text-align:right;color:var(--ink)}
.bar{display:block;height:.55rem;background:var(--rule)}
.bar i{display:block;height:100%;background:var(--slate)}
.lrow.us{background:var(--ox-tint)}
.lrow.us .place{color:var(--ox-deep)}
.lrow.us .bar i{background:var(--ox)}
@media(max-width:760px){
  .lrow{grid-template-columns:2.2rem 1fr 5.5rem;gap:.8rem}
  .lrow .bar{display:none}
  .lrow.head .bar{display:none}
}

/* the undercut */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.9rem}
@media(max-width:700px){.pair{grid-template-columns:1fr}}
.pair>div{background:var(--card);padding:1.5rem 1.6rem}
.pair .tag{font-family:var(--meta);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:.6rem}
.pair b{font-family:var(--display);font-size:3rem;color:var(--ink);display:block;line-height:1}
.pair b span{font-family:var(--body);font-size:.82rem;color:var(--dim);margin-left:.45rem}
.pair p{font-size:.93rem;margin:.7rem 0 0;color:var(--dim)}
.pair .win b{color:var(--lift)}
.pair .lose b{color:var(--ox)}

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(--rule);vertical-align:top}
th{background:var(--paper);font-family:var(--meta);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
td.num{text-align:right;font-family:var(--meta);white-space:nowrap}
@media(max-width:560px){table{display:block;overflow-x:auto}}

/* the two operators */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:1.9rem}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.op{background:var(--card);border:1px solid var(--rule);padding:1.5rem 1.6rem}
.op h3{font-size:1.45rem;margin-bottom:.5rem}
.op .co{font-family:var(--meta);font-size:.8rem;color:var(--ox);margin-bottom:.8rem}
.op p{font-size:.94rem;margin:0;color:var(--dim)}

.callout{border:1px solid var(--rule);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.25rem;color:var(--ink);margin-bottom:.35rem}
.callout p{margin:0;font-size:.95rem}
.callout.stop{background:var(--ox-tint);border-color:#E4C6CB}
.callout.stop b{color:var(--ox-deep)}
.callout.good{background:var(--lift-tint);border-color:#C6DED2}
.callout.good b{color:var(--lift)}

form{background:var(--card);border:1px solid var(--rule);padding:1.7rem}
section.dark form{border-color:#3A3531}
.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:.84rem;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
input,select{width:100%;font:inherit;font-size:1rem;padding:.72rem .82rem;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:0}
input:focus,select:focus{outline:2px solid var(--ox);outline-offset:1px}
.field{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(--ox);color:#fff;font-family:var(--display);font-size:1.3rem;padding:.72rem 1.3rem;border:0;cursor:pointer}
.btn:hover{background:var(--ox-deep)}
.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.dark .note{color:#8E8274}
section.dark form .note{color:#7D7366}

footer{background:var(--ink);color:#9C948A;padding:2.9rem 0 3.4rem;font-size:.9rem}
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:#8B8279;margin:0 0 .7rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
footer a{color:#E4DCD1;font-weight:500}
footer a:hover{color:#fff}
.foot-note{grid-column:1/-1;border-top:1px solid #33302C;margin-top:2rem;padding-top:1.3rem;font-size:.82rem;color:#8B8279}