/* hamfolio.com, ported from makiety/generator/css.py ("hamfolio.com" block); the rest comes from hamfolio.css. */
.hf-head{border-bottom:1px solid var(--rule);background:var(--bg)}
.hf-head .wrap{display:flex;align-items:center;gap:24px;padding-block:16px;flex-wrap:wrap}
.hfwm{font:italic 900 28px/1 var(--f-display);font-stretch:118%;color:var(--ink);text-decoration:none;letter-spacing:-.015em}
.hfwm span{color:var(--qsl)}
.hf-nav{display:flex;gap:18px;flex:1;flex-wrap:wrap;font:600 15px var(--f-display);font-stretch:88%}
.hf-nav a{color:var(--ink);text-decoration:none}
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:44px;align-items:start;padding-top:26px}
@media (max-width:880px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(40px,6.2vw,74px);font-stretch:78%;line-height:.95}
.shot{border:2px solid var(--ink);background:var(--bg);transform:rotate(-1.2deg);margin-top:8px}
.shot .bar{display:flex;gap:8px;align-items:center;font:11px var(--f-mono);padding:6px 10px;border-bottom:1px solid var(--rule);background:var(--paper);color:var(--ink2)}
.shot .in{padding:14px}
.mini .call{margin:6px 0 8px}
.mini .qsl-l{padding:14px 16px}
.mini .panel{padding:14px}
.mini .neon{font-size:18px;padding:7px 8px 5px 12px}
.mini .vfd{font-size:24px}
.steps{counter-reset:s;list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.steps li::before{counter-increment:s;content:counter(s);font:italic 900 40px/1 var(--f-display);font-stretch:118%;color:var(--qsl)}
.steps h3{margin-bottom:4px}
.who{border-top:2px solid var(--ink)}
.who div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media (max-width:640px){.who div{grid-template-columns:minmax(0,1fr);gap:4px}}

.call-check label{display:block;font:13px var(--f-mono);margin-bottom:6px}
.call-check input{display:block;width:100%;max-width:440px;border:1px solid var(--ink);border-radius:0;padding:10px;background:var(--paper);color:var(--ink);font:16px var(--f-body);margin-bottom:12px}
.hero .lead{margin-top:18px}

.landing-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.landing-gallery figure{margin:0}
.landing-gallery img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.landing-gallery figcaption{margin-top:6px;font:14px var(--f-mono)}
@media(max-width:640px){.landing-gallery{grid-template-columns:1fr}}