/* Davis Architectural Woodworking — low-fi wireframe kit
   Grayscale only. Structure over style.
   Ported verbatim from the Claude Design prototype; swap for branded
   styles once Earl finalizes branding. */

:root{
  --ink:#111; --line:#9d9d9d; --hair:#ccc; --fill:#ededed;
  --bar:#d6d6d6; --head:#bcbcbc; --mute:#7d7d7d; --faint:#a4a4a4;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#eceae6; color:var(--ink);
  font-family:var(--mono);
}
a{color:inherit;text-decoration:none}
a:hover{color:#5980a6}
img{max-width:100%}

.wf{max-width:var(--max);margin:0 auto;background:#fff;border-left:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12);min-height:100vh}

/* region: a labelled structural band */
.rg{position:relative;border:1px dashed var(--hair);border-top:none;padding:34px 26px 26px}
.rg:first-child{border-top:1px dashed var(--hair)}
.rg.flush{padding-left:0;padding-right:0}
.rg.tint{background:#fafafa}
.rgl{position:absolute;top:0;left:0;background:#3a3a3a;color:#fff;font:600 8px/1 var(--mono);letter-spacing:.14em;padding:5px 7px;z-index:2}

/* image placeholder */
.im{
  background-color:var(--fill);
  background-image:
    linear-gradient(to top right,transparent calc(50% - .5px),#d2d2d2 50%,transparent calc(50% + .5px)),
    linear-gradient(to bottom right,transparent calc(50% - .5px),#d2d2d2 50%,transparent calc(50% + .5px));
  border:1px solid var(--line);
  display:grid;place-items:center;position:relative;
}
.im:hover{background-color:#e4e4e4}
.imt{background:#fff;border:1px solid #cfcfcf;padding:4px 7px;font:600 9px/1.4 var(--mono);letter-spacing:.12em;color:#6b6b6b;text-align:center;max-width:80%}

/* text placeholders */
.tl{font:600 9px/1.2 var(--mono);letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.bar{background:var(--bar);height:9px}
.hb{background:var(--head);height:20px}
.cap{font:9px/1.5 var(--mono);color:var(--faint);letter-spacing:.04em}
.stack{display:flex;flex-direction:column;gap:9px}
.stack-lg{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}

.btn{border:1px solid #8d8d8d;background:#f4f4f4;font:600 9px/1 var(--mono);letter-spacing:.1em;color:#555;padding:12px 16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn:hover{background:#ebebeb;color:#333}
.lnk{font:600 9px/1 var(--mono);letter-spacing:.1em;color:#6b6b6b;border-bottom:1px solid #bbb;padding-bottom:3px;display:inline-block}
.lnk:hover{border-color:#5980a6}

/* grids */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.g-split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.span2{grid-column:span 2}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:30px 26px 22px;gap:20px}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav a[aria-current="page"]{color:#333;border-bottom:1px solid #999;padding-bottom:2px}
.burger{display:none;flex-direction:column;gap:4px;border:0;background:none;padding:6px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#8a8a8a}
.mobnav{display:none}

/* footer */
.ftr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:26px}

/* form fields (contact) */
.wf input,.wf textarea,.wf select{height:38px;border:1px solid #bbb;background:#fbfbfb;font-family:var(--mono);padding:0 10px;color:var(--ink)}
.wf textarea{height:130px;padding:10px}
.field-error{color:#b23b3b;font:9px/1.4 var(--mono);letter-spacing:.04em}
.form-success{border:1px solid var(--line);background:#f4f4f4;padding:16px;font:600 10px/1.5 var(--mono);letter-spacing:.06em;color:#444}

@media (max-width:860px){
  .g3,.g4,.g2,.g-split,.ftr{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .rg{padding:32px 16px 24px}
  .nav{display:none}
  .burger{display:flex}
  .mobnav{display:flex;flex-direction:column;gap:14px;width:100%;padding:18px 4px 4px;border-top:1px dashed var(--hair);margin-top:16px}
  .hdr{flex-wrap:wrap;padding:26px 16px 16px}
  .credit-pairs{gap:26px}
}

[x-cloak]{display:none!important}