/* pluginsolarwestmids.co.uk
   The local half of the West Midlands pair. pluginsolarwestmidlands.co.uk is the full
   regional guide, a dark index chart. This is a noticeboard: three columns that people
   post to, for trades offering work, householders looking for somebody, and prices
   anybody has actually seen.

   It differs from the East Midlands directory on purpose. That one is a register, and
   an entry only appears once we have verified the trade against five checks. This is a
   board, where a post goes up once it meets the posting rule for its column, and the
   difference between the two is stated on both sites.

   Nothing posts automatically. Everything is read and put up by hand.

   Warm cream, ink and one purple, set like something pinned up rather than published. */

:root{
  --paper:#FAF7F0;
  --card:#FFFFFF;
  --ink:#17161A;
  --body-ink:#39373F;
  --dim:#6F6B78;
  --rule:#DDD6C8;
  --purple:#5B21B6;
  --purple-deep:#421783;
  --purple-tint:#F1EBFB;
  --pin:#B3461F;
  --pin-tint:#FBEEE8;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --meta:"Ubuntu 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:71rem;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.022em;line-height:1.06}
p{margin:0 0 1rem;max-width:63ch}
a{color:var(--purple);font-weight:700;text-decoration:none}
a:hover{color:var(--pin)}
.meta{font-family:var(--meta);font-size:.92rem}

header.mast{background:var(--ink);color:#CBC6D2}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.1rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff;letter-spacing:-0.03em}
.brand b{color:#B79BF5}
.mast nav{display:flex;gap:1.3rem;font-size:.93rem;font-weight:600}
.mast nav a{color:#B0AAB9}
.mast nav a:hover{color:#fff}
@media(max-width:900px){.mast nav{display:none}}

.hero{padding:3.3rem 0 2rem}
h1{font-size:clamp(2.4rem,5.2vw,4rem);max-width:17ch}
h1 em{font-style:normal;color:var(--purple)}
.stand{font-size:1.11rem;color:var(--dim);max-width:56ch;margin:1.25rem 0 0}

/* the board, this site's device */
/* the anchor: every card on the board is a claim about this one place */
.anchor{margin-top:2rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:800px){.anchor{grid-template-columns:1fr}}
.anchor>div{background:var(--card);padding:1.1rem 1.2rem;min-width:0}
.anchor h3{font-family:var(--display);font-size:1.05rem;margin:0 0 .4rem;color:var(--ink)}
.anchor p{margin:0;font-size:.92rem;color:var(--body-ink);line-height:1.5}
.anchor .fig{font-family:var(--meta);font-size:1.5rem;color:var(--purple);display:block;line-height:1.1;margin-bottom:.25rem}

.board{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
@media(max-width:900px){.board{grid-template-columns:1fr}}
.col{background:var(--card);border:1px solid var(--rule);display:grid;grid-template-rows:auto 1fr auto}
.col-head{background:var(--ink);color:#fff;padding:.85rem 1.2rem}
.col-head h2{font-size:1.32rem;color:#fff}
.col-head span{font-family:var(--meta);font-size:.86rem;color:#9F99AA;display:block;margin-top:.2rem}
.col-body{padding:1.5rem 1.3rem;text-align:center}
.col-body .none{font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--ink);line-height:1}
.col-body .none span{display:block;font-family:var(--meta);font-size:.84rem;font-weight:400;color:var(--dim);margin-top:.35rem}
.col-body p{font-size:.93rem;color:var(--dim);margin:1rem auto 0;max-width:30ch}
.col-rule{border-top:1px solid var(--rule);padding:.95rem 1.2rem;background:var(--purple-tint)}
.col-rule b{display:block;font-family:var(--meta);font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;color:var(--purple-deep);margin-bottom:.3rem}
.col-rule p{font-size:.9rem;margin:0;color:var(--body-ink);max-width:none}

section{padding:3.3rem 0}
section.alt{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
section.pin{background:var(--purple);color:#DDD1F6}
section.pin h2,section.pin h3{color:#fff}
section.pin .lede{color:#C2B1EC}
section.pin p{color:#DDD1F6}
section.pin a{color:#fff}
h2{font-size:clamp(1.9rem,3.3vw,2.6rem);margin-bottom:.65rem}
.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;background:var(--card)}
th,td{text-align:left;padding:.72rem .9rem;border:1px solid var(--rule);vertical-align:top}
th{background:var(--purple-tint);font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--purple-deep)}
td.num{text-align:right;font-family:var(--meta);white-space:nowrap;color:var(--ink);font-size:1rem}
tr.blank td{color:var(--dim);font-style:italic}
section.pin table{background:#4A1A96}
section.pin th,section.pin td{border-color:#6B34C7}
section.pin th{background:#3A1276;color:#fff}
@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.8rem;max-width:63ch}
.callout b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--ink);margin-bottom:.3rem}
.callout p{margin:0;font-size:.95rem}
.callout.warn{background:var(--pin-tint);border-color:#EBD3C6}
.callout.warn b{color:var(--pin)}
.callout.up{background:var(--purple-tint);border-color:#D9CAF6}
.callout.up b{color:var(--purple-deep)}
section.pin .callout{background:#4A1A96;border-color:#6B34C7}
section.pin .callout b{color:#fff}

form{background:var(--card);border:1px solid var(--rule);padding:1.7rem}
section.pin form{background:#4A1A96;border-color:#6B34C7}
.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:.85rem;font-weight:700;margin-bottom:.35rem;color:var(--ink)}
section.pin label{color:#fff}
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}
section.pin input,section.pin select{background:#3A1276;border-color:#7B49D3;color:#F3EEFC}
input:focus,select:focus{outline:2px solid var(--purple);outline-offset:1px}
section.pin input:focus,section.pin select:focus{outline-color:#fff}
.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(--purple);color:#fff;font-family:var(--display);font-weight:700;font-size:1.12rem;padding:.8rem 1.3rem;border:0;cursor:pointer}
.btn:hover{background:var(--purple-deep)}
section.pin .btn{background:#fff;color:var(--purple-deep)}
section.pin .btn:hover{background:#E0D3FA}
.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.pin .note{color:#C2B1EC}

footer{background:var(--ink);color:#8A849A;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:.86rem;text-transform:uppercase;letter-spacing:.04em;color:#847E94;margin:0 0 .7rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
footer a{color:#DCD6E6;font-weight:700}
footer a:hover{color:#fff}
.foot-note{grid-column:1/-1;border-top:1px solid #2A2831;margin-top:2rem;padding-top:1.3rem;font-size:.82rem;color:#847E94}