/* Design system for every factory site.
   Grounded in the subject's own vernacular: these sites all answer a question
   with a VERDICT and a NUMBER, so the page is built around an energy-label
   style rating rather than generic cards. Verdict colour is semantic and
   deliberately separate from the brand accent. */
:root{
  --paper:#fbfaf8; --raised:#ffffff; --ink:#15171b; --ink-2:#454b56;
  --muted:#6b7280; --line:#e5e2dd; --line-2:#efedea;
  --accent:hsl(205 38% 34%); --accent-ink:#ffffff;
  --good:#1b6e4a; --good-bg:#e8f3ed;
  --mid:#9a6410;  --mid-bg:#f7efe0;
  --bad:#983a2e;  --bad-bg:#f8ebe8;
  --r:10px;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --paper:#15171b; --raised:#1c1f25; --ink:#eceef1; --ink-2:#b7bcc6;
    --muted:#8d95a3; --line:#2b2f37; --line-2:#232830;
    --accent:hsl(205 48% 68%); --accent-ink:#12151a;
    --good:#5cc48d; --good-bg:#16281f;
    --mid:#d9a349;  --mid-bg:#2a2317;
    --bad:#e08678;  --bad-bg:#2b1c19;
  }
}
:root[data-theme="dark"]{
  --paper:#15171b; --raised:#1c1f25; --ink:#eceef1; --ink-2:#b7bcc6;
  --muted:#8d95a3; --line:#2b2f37; --line-2:#232830;
  --accent:hsl(205 48% 68%); --accent-ink:#12151a;
  --good:#5cc48d; --good-bg:#16281f;
  --mid:#d9a349;  --mid-bg:#2a2317;
  --bad:#e08678;  --bad-bg:#2b1c19;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,.display{
  font-family:Bitter,Georgia,"Times New Roman",serif;
  font-weight:500; letter-spacing:-.012em; text-wrap:balance;
}
header{
  border-bottom:1px solid var(--line); background:var(--raised);
}
header .in{max-width:46rem; margin:0 auto; padding:14px 22px}
header a{color:var(--ink); text-decoration:none; font-size:16px; font-weight:600; letter-spacing:-.01em}
main{max-width:46rem; margin:0 auto; padding:28px 22px 56px}
h1{font-size:clamp(1.7rem,4.2vw,2.3rem); line-height:1.15; margin:0 0 .5em}
h2{font-size:1.3rem; line-height:1.25; margin:2.4em 0 .6em}
h3{font-size:1.06rem; margin:1.8em 0 .4em}
p{margin:0 0 1.05em; color:var(--ink-2)}
main > section > p:first-of-type{color:var(--ink)}
a{color:var(--accent); text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

/* THE ANSWER. Biggest thing on the page, because it is why anyone came. */
.verdict{
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; margin:0 0 26px; display:flex; flex-direction:column; gap:14px;
}
.verdict .figure{
  font-family:Bitter,Georgia,serif; font-weight:500;
  font-size:clamp(2.6rem,9vw,3.9rem); line-height:.95; letter-spacing:-.03em;
}
.verdict .figure small{font-size:.34em; letter-spacing:0; color:var(--muted); font-family:inherit}
.verdict .says{color:var(--ink-2); margin:0; font-size:1.02rem}
.badge{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px;
}
.badge.good{background:var(--good-bg); color:var(--good)}
.badge.mid {background:var(--mid-bg);  color:var(--mid)}
.badge.bad {background:var(--bad-bg);  color:var(--bad)}

/* The inputs behind the answer, at a glance. */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin:0 0 26px;
}
.stats div{background:var(--raised); padding:13px 15px}
.stats b{display:block; font-size:1.22rem; font-weight:600; letter-spacing:-.01em}
.stats span{
  display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-top:3px;
}
section{margin-bottom:.4em}
ul,ol{padding-left:1.15em; color:var(--ink-2)}
li{margin:.32em 0}
table{width:100%; border-collapse:collapse; margin:1.3em 0; font-size:.94rem}
th,td{text-align:left; padding:.58em .65em; border-bottom:1px solid var(--line-2)}
th{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:600; border-bottom-color:var(--line);
}
td:not(:first-child),th:not(:first-child){text-align:right}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
code{background:var(--line-2); padding:.12em .38em; border-radius:4px; font-size:.9em}
footer{
  border-top:1px solid var(--line); margin-top:56px; padding:26px 22px;
  color:var(--muted); font-size:.84rem; text-align:center; background:var(--raised);
}
footer a{color:var(--muted)}
.attribution{margin:.6em 0 0; font-size:.78rem}
.brand{display:inline-flex; align-items:center; gap:9px}
.brand svg{display:block; border-radius:6px}
.brand span{font-family:Bitter,Georgia,serif; font-weight:600; font-size:17px}
#q{
  width:100%; padding:.7em .85em; font-size:1rem; font-family:inherit;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--raised); color:var(--ink); margin-bottom:1.1em;
}
#ix{columns:2; column-gap:2.2em; list-style:none; padding:0; margin:0; font-size:.94rem}
#ix li{margin:.16em 0; break-inside:avoid}
@media (max-width:620px){
  body{font-size:16px}
  main{padding:20px 17px 44px}
  .verdict{padding:18px 18px}
  #ix{columns:1}
  th,td{padding:.45em .4em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}