/* pluginsolarsouthwest.co.uk
   Built as four nested scopes. The rules that govern one of these devices are made at
   four different distances from the reader: the United Kingdom, England, the licence
   area, and the address itself. Each ring is narrower than the last and each is
   answered by someone different. The innermost ring is the only one we cannot fill
   in, which is exactly why the form sits inside it.

   This region also has the only land border in England where the planning regime
   changes, so the England ring carries a warning about the Severn.

   Plum on bone, with a serif reading face. No other site in the network sets its
   body text in a serif, and nothing here shares a typeface or a hue with the rest. */

:root{
  --paper:#F2EFF1;
  --card:#FFFFFF;
  --ink:#1E141F;
  --body-ink:#3C303D;
  --dim:#6F6272;
  --rule:#DCD3DD;
  --plum:#5B2148;
  --plum-deep:#3F1533;
  --plum-tint:#F6EAF2;
  --moss:#4A6B3A;
  --moss-tint:#EDF2E9;
  --caution:#8A4A12;
  --caution-tint:#FAF1E6;
  --display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --meta:"Overpass 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.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:66rem;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.018em;line-height:1.1}
p{margin:0 0 1.05rem;max-width:62ch}
a{color:var(--plum);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(--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-weight:700;font-size:1.22rem;color:var(--ink);letter-spacing:-0.02em}
.brand b{color:var(--plum)}
.mast nav{display:flex;gap:1.3rem;font-family:var(--display);font-size:.93rem;font-weight:600}
.mast nav a{color:var(--body-ink)}
.mast nav a:hover{color:var(--plum)}
@media(max-width:860px){.mast nav{display:none}}

.hero{padding:3.4rem 0 1.6rem}
h1{font-size:clamp(2.4rem,4.8vw,3.7rem);max-width:17ch}
h1 em{font-style:normal;color:var(--plum)}
.stand{font-size:1.12rem;color:var(--dim);max-width:56ch;margin:1.3rem 0 0}

/* the four rings, this site's spine */
.rings{padding-bottom:3.4rem}
.ring{background:var(--card);border:1px solid var(--rule);padding:1.6rem 1.7rem;margin:0 auto}
.ring+.ring{margin-top:-1px}
.ring-1{width:100%}
.ring-2{width:calc(100% - 3rem)}
.ring-3{width:calc(100% - 6rem)}
.ring-4{width:calc(100% - 9rem);background:var(--ink);color:#CFC2D0;border-color:var(--ink)}
@media(max-width:820px){
  .ring-2,.ring-3,.ring-4{width:100%}
}
.ring .scope{font-family:var(--meta);font-size:.71rem;letter-spacing:.07em;text-transform:uppercase;color:var(--plum);margin-bottom:.5rem}
.ring-4 .scope{color:#C79BB8}
.ring h2{font-size:1.6rem;margin-bottom:.5rem}
.ring-4 h2{color:#fff}
.ring p{font-size:.96rem;color:var(--dim);margin-bottom:.8rem}
.ring-4 p{color:#B3A5B4}
.ring p:last-child{margin-bottom:0}
.ring .who{font-family:var(--meta);font-size:.76rem;color:var(--body-ink);background:var(--paper);display:inline-block;padding:.4rem .6rem;margin-top:.9rem}
.ring-4 .who{background:#2E2130;color:#D9CBDA}
.facts{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.94rem}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;color:var(--body-ink)}
.ring-4 .facts li{color:#C4B6C5}
.facts li b{font-family:var(--meta);font-size:.8rem;color:var(--plum);white-space:nowrap;padding-top:.15rem}
.ring-4 .facts li b{color:#C79BB8}
@media(max-width:520px){.facts li{grid-template-columns:1fr;gap:.1rem}}

section{padding:3.4rem 0}
section.alt{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
h2{font-size:clamp(1.9rem,3.2vw,2.5rem);margin-bottom:.7rem}
.lede{font-size:1.06rem;color:var(--dim);max-width:56ch}

table{width:100%;border-collapse:collapse;margin:1.8rem 0 0;font-size:.95rem;background:var(--card)}
th,td{text-align:left;padding:.75rem .9rem;border:1px solid var(--rule);vertical-align:top}
th{background:var(--plum);color:#fff;font-family:var(--display);font-weight:700;font-size:.86rem}
td.num{text-align:right;font-family:var(--meta);white-space:nowrap}
tr.diff td{background:var(--caution-tint)}
@media(max-width:560px){table{display:block;overflow-x:auto}}

.callout{border:1px solid var(--rule);background:var(--card);padding:1.25rem 1.4rem;margin-top:1.9rem;max-width:62ch}
.callout b{display:block;font-family:var(--display);font-size:1.12rem;color:var(--ink);margin-bottom:.35rem}
.callout p{margin:0;font-size:.95rem}
.callout.watch{background:var(--caution-tint);border-color:#EBD9BE}
.callout.watch b{color:var(--caution)}
.callout.firm{background:var(--moss-tint);border-color:#CFDEC6}
.callout.firm b{color:var(--moss)}

form{background:var(--card);border:1px solid var(--rule);padding:1.7rem}
.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-family:var(--display);font-size:.85rem;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
input,select{width:100%;font:inherit;font-family:var(--body);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(--plum);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(--plum);color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem;padding:.8rem 1.3rem;border:0;cursor:pointer}
.btn:hover{background:var(--plum-deep)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.note{font-size:.87rem;color:var(--dim);margin:.9rem 0 0}
.ring-4 .note{color:#9C8E9D}
.ring-4 form{background:#2A1D2C;border-color:#3D2E3F}
.ring-4 label{color:#EFE6EF}
.ring-4 input,.ring-4 select{background:#1E141F;border-color:#4A394C;color:#F2EFF1}

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