
:root{
  --bakelite:#2b1d14; --walnut:#4a2f1d; --walnut-2:#6b4428; --cream:#f3e9d2; --paper:#fbf6ea;
  --ink:#2a2018; --muted:#6e5d4c; --amber:#f2a93b; --amber-glow:#ffcf7a; --green:#6d8f4e;
  --red:#a8452d; --line:#d9c7a3; --link:#8a3b12;
}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;line-height:1.6}
a{color:var(--link)} a:hover{color:var(--red)}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}

/* header: a radio cabinet */
header.cab{background:linear-gradient(180deg,var(--walnut-2),var(--walnut) 40%,var(--bakelite));
  border-bottom:6px solid #1a110b;box-shadow:0 3px 10px rgba(0,0,0,.35)}
header.cab .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:16px;padding-bottom:14px}
.logo{width:360px;max-width:100%;height:auto;display:block}
.dial-glass{fill:#241709;stroke:#c79a5b;stroke-width:2}
.dial-scale line{stroke:var(--amber);stroke-width:1.2}
.dial-scale text{fill:var(--amber);font:9px Georgia,serif}
.dial-name{fill:var(--amber-glow);font:bold 20px Georgia,serif;letter-spacing:4px}
.dial-pointer{stroke:#e2461f;stroke-width:2.5}
.tagline{color:var(--cream);font-style:italic;flex:1;min-width:220px}
nav.main{display:flex;gap:6px;flex-wrap:wrap}
nav.main a{color:var(--cream);text-decoration:none;padding:6px 14px;border:1px solid #8b6a45;border-radius:18px;
  background:rgba(0,0,0,.2);font-size:.9rem}
nav.main a:hover,nav.main a.on{background:var(--amber);color:var(--bakelite);border-color:var(--amber)}

/* grille strip */
.grille{height:14px;background:repeating-linear-gradient(90deg,#3b2718 0 6px,#20150d 6px 9px)}

h1,h2,h3{font-weight:normal;line-height:1.25;color:var(--bakelite)}
h1{font-size:2rem;margin:.6em 0 .3em}
h2{font-size:1.4rem;margin:1.6em 0 .5em;border-bottom:2px solid var(--line);padding-bottom:.2em}
.lede{font-size:1.1rem;color:var(--muted)}

.hero{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin:26px 0;
  box-shadow:inset 0 0 0 4px #efe2c4}
.hero p{margin:.4em 0}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(60,40,20,.18)}
.card .thumb{height:160px;background:#f4ecda center/contain no-repeat;border-bottom:1px solid var(--line)}
.card .thumb.none{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b2718,#6b4428);
  color:var(--amber-glow);font-size:2.4rem;letter-spacing:6px}
.card .body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.card h3{margin:.1em 0 .35em;font-size:1.12rem}
.card p{margin:0 0 .8em;color:var(--muted);font-size:.93rem;flex:1}

.badge{display:inline-block;font:12px/1 Verdana,Arial,sans-serif;padding:5px 9px;border-radius:12px;color:#fff;margin-right:6px}
.st-design{background:#6b5a8e}.st-build{background:var(--green)}.st-restore{background:var(--red)}.st-test{background:#c07a14}
.tags{margin-top:2px}
.tag{display:inline-block;font:11px/1 Verdana,Arial,sans-serif;padding:4px 8px;border-radius:10px;
  background:#f1e6cc;color:#6a4b2a;margin:2px 4px 2px 0}

.proj-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
table.specs{border-collapse:collapse;margin:.6em 0 1.2em;min-width:60%}
table.specs th,table.specs td{border-bottom:1px solid var(--line);padding:7px 12px;text-align:left;vertical-align:top}
table.specs th{color:var(--muted);font-weight:normal;width:34%}

.docs{list-style:none;padding:0;margin:.4em 0}
.docs li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  margin-bottom:8px;background:#fff}
.docs .ico{font:bold 11px Verdana,Arial,sans-serif;background:var(--red);color:#fff;padding:5px 6px;border-radius:4px}
.docs .size{margin-left:auto;color:var(--muted);font-size:.85rem;white-space:nowrap}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gallery img{width:100%;height:170px;object-fit:contain;background:#fff;display:block;border-bottom:1px solid var(--line)}
.gallery figcaption{padding:7px 10px;font-size:.88rem;color:var(--muted)}

.crumb{font-size:.9rem;margin-top:18px;color:var(--muted)}
.note{background:#fff7e3;border-left:4px solid var(--amber);padding:10px 14px;border-radius:4px;color:#5d4a33}

footer{margin-top:50px;background:var(--bakelite);color:#cdb893;font-size:.88rem}
footer .wrap{padding:18px}
footer a{color:var(--amber-glow)}

.updated{font:12px Verdana,Arial,sans-serif;color:var(--muted);margin-top:8px}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.filters button{font:13px Verdana,Arial,sans-serif;padding:6px 12px;border-radius:16px;border:1px solid var(--line);
  background:#fff;color:#6a4b2a;cursor:pointer}
.filters button:hover{border-color:var(--walnut-2)}
.filters button.on{background:var(--walnut);color:var(--cream);border-color:var(--walnut)}
.news{list-style:none;padding:0;margin:.4em 0}
.news li{padding:8px 0;border-bottom:1px dotted var(--line)}
.news time{display:inline-block;min-width:110px;color:var(--muted);font:13px Verdana,Arial,sans-serif}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:28px}
.side{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:4px 18px 14px;align-self:start}
.side h2{margin-top:.8em}
table.dl{border-collapse:collapse;width:100%;font-size:.95rem}
table.dl th,table.dl td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.dl th{color:var(--muted);font-weight:normal}
table.dl td.sz{white-space:nowrap;color:var(--muted);text-align:right}
table.dl tr.grp td{background:var(--cream);font-weight:bold;color:var(--bakelite)}
.bignum{font-size:4rem;color:var(--amber);text-shadow:0 0 12px rgba(242,169,59,.5);margin:.2em 0 0;letter-spacing:6px}
@media (max-width:800px){.cols{grid-template-columns:1fr}}
@media print{header.cab,.grille,nav,footer,.filters{display:none}body{background:#fff}.card{break-inside:avoid}}
@media (max-width:600px){table.dl td.sz{display:none}html{font-size:16px}h1{font-size:1.6rem}.card .thumb{height:130px}}
