/* pluginsolareastmids.co.uk
   The directory half of the East Midlands pair. pluginsolareastmidlands.co.uk is the
   full regional guide, set as an A to Z in sepia. This is the opposite job: a public
   register of local trades and retailers, plus deals.

   It opens with nothing listed, because we have verified nobody yet and this network
   does not invent entries. So the site publishes the standard first and the register
   second, and the register says zero until it does not. An empty directory that tells
   you it is empty is more use than a full one nobody checked.

   Stark white, black rules, one electric blue. A register should look like a register
   and not like a brochure. */

:root{
  --paper:#FFFFFF;
  --card:#F7F8FA;
  --ink:#000000;
  --body-ink:#2A2D33;
  --dim:#666B75;
  --rule:#000000;
  --hair:#D6DAE1;
  --blue:#0961F3;
  --blue-deep:#0847B8;
  --blue-tint:#E9F0FE;
  --hold:#8A5A00;
  --hold-tint:#FCF4E4;
  --display:"Darker Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Onest","Helvetica Neue",Arial,sans-serif;
  --meta:"Inconsolata",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.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:72rem;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.01em;line-height:.98}
p{margin:0 0 1rem;max-width:64ch}
a{color:var(--blue);font-weight:600;text-decoration:none}
a:hover{color:var(--ink)}
.meta{font-family:var(--meta);font-size:.86rem}

header.mast{background:var(--paper);border-bottom:2px solid var(--rule)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--ink);letter-spacing:-0.02em}
.brand b{color:var(--blue)}
.mast nav{display:flex;gap:1.3rem;font-size:.92rem;font-weight:600}
.mast nav a{color:var(--body-ink)}
.mast nav a:hover{color:var(--blue)}
@media(max-width:900px){.mast nav{display:none}}

.hero{padding:3.2rem 0 2.2rem}
h1{font-size:clamp(2.9rem,6.6vw,5.4rem);max-width:17ch}
h1 em{font-style:normal;color:var(--blue)}
.stand{font-size:1.12rem;color:var(--dim);max-width:56ch;margin:1.2rem 0 0}

/* the register, this site's device */
.reg{border:2px solid var(--rule);margin-top:2rem}
.reg-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:.85rem 1.3rem;background:var(--ink);color:#fff;font-family:var(--meta);font-size:.88rem;letter-spacing:.02em}
.reg-head b{color:#7FA9FF;font-weight:400}
.reg-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 7rem;gap:1rem;padding:.6rem 1.3rem;border-bottom:1px solid var(--hair);font-family:var(--meta);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
@media(max-width:820px){.reg-cols{display:none}}
.reg-empty{padding:3rem 1.3rem;text-align:center}
.reg-empty .zero{font-family:var(--display);font-weight:700;font-size:6rem;line-height:.85;color:var(--ink)}
.reg-empty .cap{font-family:var(--meta);font-size:.9rem;color:var(--dim);margin:.6rem auto 1.2rem;max-width:none}
.reg-empty p{max-width:46ch;margin:0 auto}
.reg-foot{border-top:1px solid var(--hair);padding:.8rem 1.3rem;font-family:var(--meta);font-size:.8rem;color:var(--dim)}

/* the standard */
/* the area strip: what this register is a register OF */
.area{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2rem}
@media(max-width:840px){.area{grid-template-columns:repeat(2,1fr)}}
@media(max-width:470px){.area{grid-template-columns:1fr}}
.area>div{background:var(--card);padding:1.05rem 1.15rem;min-width:0}
.area .k{font-family:var(--meta);font-size:.67rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sepia);display:block;margin-bottom:.4rem}
.area .v{font-size:.93rem;color:var(--body-ink);line-height:1.45}
.area .v b{font-family:var(--display);font-weight:700;font-size:1.9rem;display:block;line-height:.95;margin-bottom:.2rem;color:var(--sepia-deep)}
.area .v b span{font-family:var(--body);font-weight:400;font-size:.72rem;color:var(--dim);margin-left:.3rem}

.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;margin-top:1.9rem;border:2px solid var(--rule)}
.check{padding:1.3rem 1.4rem;border-right:1px solid var(--hair)}
.check:last-child{border-right:0}
@media(max-width:820px){.check{border-right:0;border-bottom:1px solid var(--hair)}.check:last-child{border-bottom:0}}
.check b{display:block;font-family:var(--meta);font-size:.8rem;color:var(--blue);margin-bottom:.5rem}
.check h3{font-size:1.35rem;margin-bottom:.4rem}
.check p{font-size:.92rem;color:var(--dim);margin:0}

section{padding:3.2rem 0}
section.alt{background:var(--card);border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
section.ink{background:var(--ink);color:#C3C7CE}
section.ink h2,section.ink h3{color:#fff}
section.ink .lede{color:#8E939C}
section.ink p{color:#C3C7CE}
section.ink a{color:#7FA9FF}
h2{font-size:clamp(2.1rem,4vw,3.1rem);margin-bottom:.6rem}
.lede{font-size:1.05rem;color:var(--dim);max-width:57ch}

table{width:100%;border-collapse:collapse;margin:1.8rem 0 0;font-size:.95rem}
th,td{text-align:left;padding:.7rem .9rem;border:1px solid var(--hair);vertical-align:top}
th{background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:1.1rem}
td.num{text-align:right;font-family:var(--meta);white-space:nowrap;color:var(--ink)}
section.ink table{background:#111317}
section.ink th,section.ink td{border-color:#2C3138}
section.ink th{background:#1B1E24}
section.ink td.num{color:#fff}
@media(max-width:560px){table{display:block;overflow-x:auto}}

.callout{border:2px solid var(--rule);background:var(--paper);padding:1.25rem 1.4rem;margin-top:1.8rem;max-width:64ch}
.callout b{display:block;font-family:var(--display);font-size:1.4rem;color:var(--ink);margin-bottom:.3rem}
.callout p{margin:0;font-size:.95rem}
.callout.hold{background:var(--hold-tint);border-color:var(--hold)}
.callout.hold b{color:var(--hold)}
.callout.blue{background:var(--blue-tint);border-color:var(--blue)}
.callout.blue b{color:var(--blue-deep)}
section.ink .callout{background:#111317;border-color:#2C3138}
section.ink .callout b{color:#fff}

form{background:var(--card);border:2px solid var(--rule);padding:1.7rem}
section.ink form{background:#111317;border-color:#2C3138}
.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)}
section.ink label{color:#fff}
input,select{width:100%;font:inherit;font-size:1rem;padding:.72rem .82rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0}
section.ink input,section.ink select{background:#000;border-color:#3A4048;color:#F2F4F8}
input:focus,select:focus{outline:2px solid var(--blue);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(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:1.5rem;padding:.6rem 1.3rem;border:0;cursor:pointer}
.btn:hover{background:var(--blue-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}
section.ink .note{color:#8E939C}

footer{background:var(--ink);color:#868C96;padding:2.8rem 0 3.3rem;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:.82rem;text-transform:uppercase;letter-spacing:.05em;color:#707781;margin:0 0 .7rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
footer a{color:#D7DBE1;font-weight:600}
footer a:hover{color:#fff}
.foot-note{grid-column:1/-1;border-top:1px solid #24282E;margin-top:2rem;padding-top:1.3rem;font-size:.82rem;color:#707781}
