/* komunamiami.com — design 1a · Elements, the shared part for /project/ and /desk/ (the homepage keeps its own copy inline). */
:root{
  --paper:#F1ECE2; --ink:#161513; --blue:#1E4DBF; --red:#E0442B; --yellow:#E2A630;
  --g1:#4B4945; --g2:#817D76; --g3:#B6B1A8; --g4:#DED8CD;
  --max:1240px; --gut:clamp(16px,4.5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rule{height:2px;background:var(--ink)}

header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:80px}
.mark{font-weight:700;font-size:15px;letter-spacing:.3em;text-decoration:none;white-space:nowrap}
.mark i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--blue);margin-right:10px;vertical-align:0}
.top-r{display:flex;align-items:center;gap:18px;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:560px){
  header.top .wrap{height:auto;min-height:64px;padding-top:12px;padding-bottom:12px;align-items:flex-start}
  .top-r{flex-wrap:wrap;justify-content:flex-end;gap:6px 14px;font-size:11px;letter-spacing:.14em;text-align:right}
  .top-r a{white-space:nowrap}
}

.kicker{font-weight:600;font-size:clamp(13px,1.5vw,18px);letter-spacing:.34em;text-transform:uppercase}
.display{font-weight:900;font-stretch:118%;line-height:.86;letter-spacing:-.01em;text-transform:uppercase;font-size:clamp(44px,9vw,128px);margin:14px 0 18px}
.subline{font-weight:600;font-size:clamp(12px,1.4vw,16px);letter-spacing:.3em;text-transform:uppercase;margin-bottom:28px}
.lbl,.xr-l{font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);text-decoration:none;font:600 13px 'Archivo',sans-serif;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;border-radius:0}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn:disabled{background:var(--g1);border-color:var(--g1);cursor:progress}
.linkbtn{font:600 12px 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:2px solid var(--ink);padding:2px 0;cursor:pointer;text-decoration:none}
.linkbtn:hover{color:var(--blue);border-color:var(--blue)}

.chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.chip::before{content:"";width:11px;height:11px;flex:none;background:var(--g3)}
.chip.hit::before{background:var(--red)} .chip.clear::before{background:var(--blue)} .chip.m::before{background:var(--yellow)}
.beta{display:inline-block;background:var(--yellow);color:var(--ink);padding:5px 9px;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase}

.lf{display:grid;gap:14px;max-width:640px}
.lf label{display:grid;gap:6px;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.lf input,.lf textarea,.lf select,select.sel{font:500 17px/1.4 'Archivo',sans-serif;letter-spacing:0;text-transform:none;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0;padding:11px 12px}
.lf input:focus,.lf textarea:focus{outline:3px solid var(--blue);outline-offset:0}
.lf .btn{justify-self:start}
.fine{font-size:13px;color:var(--g1)}
.msg{font-weight:600;font-size:15px;min-height:1.4em}
.note-ok{font-size:16px;padding:14px 16px;border-left:6px solid var(--blue);background:#fff}
.note-bad{font-size:16px;padding:14px 16px;border-left:6px solid var(--red);background:#fff}

.card{border:4px solid var(--ink);padding:clamp(18px,2.6vw,32px);margin-top:28px}
.card-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px}
.card h2{font-weight:900;font-stretch:118%;font-size:clamp(24px,3.2vw,40px);line-height:.95;text-transform:uppercase;margin-top:12px}
.sub{color:var(--g1);font-size:15px;margin-top:8px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-top:18px}
.facts div{padding:12px 14px 12px 0;border-bottom:1px solid var(--g3)}
.facts dt{font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.facts dd{margin:5px 0 0;font-weight:700;font-size:16px;line-height:1.35}
.rows{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.rows th,.rows td{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-top:1px solid var(--g3)}
.rows th{font-weight:600;width:30%}
details.fold{border-top:2px solid var(--ink);margin-top:18px}
details.fold summary{cursor:pointer;padding:12px 0;font-weight:800;font-stretch:118%;font-size:18px;text-transform:uppercase}
.steps{display:flex;flex-wrap:wrap;gap:0;margin-top:18px;border:2px solid var(--ink)}
.steps li{list-style:none;flex:1 1 120px;padding:10px 12px;border-right:2px solid var(--ink);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--g1)}
.steps li:last-child{border-right:0}
.steps li.done{background:var(--g4);color:var(--ink)}
.steps li.now{background:var(--ink);color:var(--paper)}
.thread{list-style:none;margin-top:12px;display:grid;gap:10px}
.thread li{padding:12px 14px;background:#fff;border-left:6px solid var(--g3);font-size:15px}
.thread li.client{border-left-color:var(--blue)}
.thread li.desk{border-left-color:var(--red)}
.thread .who{display:block;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g1);margin-bottom:4px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
footer.foot{border-top:2px solid var(--ink);margin-top:64px;padding:20px 0 36px;font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase}

/* Footer with the site's way around (home pages, the Steel Homes page) */
footer.foot .ft{display:grid;gap:14px}
footer.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
footer.foot nav a{text-decoration:none;border-bottom:2px solid transparent;padding:2px 0}
footer.foot nav a:hover{border-color:var(--ink)}
footer.foot p{color:var(--g1);letter-spacing:.2em;line-height:1.7}