/* Denver ADU Guide — shared styles
   Palette: brick #9C4A34 · slate #26333B · limestone #F2EEE6 · pine #3D5245 · line #C9C2B4 */
:root{
  --brick:#9C4A34; --slate:#26333B; --paper:#F2EEE6; --pine:#3D5245;
  --line:#C9C2B4; --white:#FFFFFF; --ink:#1C2429;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;font-size:17px}
h1,h2,h3{font-family:'Bitter',Georgia,serif;color:var(--slate);line-height:1.2}
h1{font-size:2.3rem;font-weight:800}
h2{font-size:1.45rem;font-weight:700;margin:2.4rem 0 .8rem}
h3{font-size:1.1rem;font-weight:700;margin:1.6rem 0 .5rem}
p{margin:.8rem 0}
a{color:var(--brick);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--brick);outline-offset:2px}

/* Header */
header{background:var(--slate);color:var(--paper);padding:.9rem 0;border-bottom:4px solid var(--brick)}
.nav{max-width:960px;margin:0 auto;padding:0 1.2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.brand{font-family:'Bitter',serif;font-weight:800;font-size:1.15rem;color:var(--white);text-decoration:none;letter-spacing:.02em}
.brand span{color:#E8B486;font-weight:400}
nav ul{list-style:none;display:flex;gap:1.1rem;flex-wrap:wrap}
nav a{color:var(--paper);text-decoration:none;font-size:.92rem}
nav a:hover{color:#E8B486}

/* Layout */
.wrap{max-width:760px;margin:0 auto;padding:2.2rem 1.2rem 4rem}
.wrap-wide{max-width:960px;margin:0 auto;padding:2.2rem 1.2rem 4rem}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);margin-bottom:.6rem}
.lede{font-size:1.15rem;color:#3a4750;margin-top:.8rem}
.updated{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:#6b7078;margin-top:1rem}

/* Answer-first block: the direct answer engines lift */
.answer{background:var(--white);border-left:5px solid var(--brick);padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:0 1px 0 var(--line)}
.answer strong{color:var(--slate)}

/* Spec sheet — plan title-block style */
table.spec{width:100%;border-collapse:collapse;margin:1.2rem 0;background:var(--white);font-size:.95rem}
table.spec caption{font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-align:left;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);padding:.4rem 0}
table.spec th,table.spec td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
table.spec th{background:#EAE4D8;font-family:'Bitter',serif;font-weight:700;font-size:.88rem;color:var(--slate)}
td.num{font-family:'IBM Plex Mono',monospace;font-size:.88rem;white-space:nowrap}

/* Section rule labels */
.sec{border-top:1px solid var(--line);padding-top:1.6rem;margin-top:2.2rem}
.sec .ref{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#8a8577;letter-spacing:.1em}

/* Cards (builder directory) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem;margin:1.4rem 0}
.card{background:var(--white);border:1px solid var(--line);padding:1rem 1.1rem}
.card h3{margin:.1rem 0 .3rem;font-size:1.02rem}
.card .tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border:1px solid var(--line);color:var(--pine);margin-bottom:.5rem}
.card p{font-size:.9rem;margin:.3rem 0;color:#3a4750}

/* Featured seat */
.seat{background:var(--slate);color:var(--paper);padding:1.4rem 1.5rem;margin:2rem 0;border-top:5px solid var(--brick)}
.seat h2{color:var(--white);margin-top:0}
.seat p{color:#cfd6d3;font-size:.95rem}
.seat .tag{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#E8B486}

/* Disclosure strip */
.disclosure{font-size:.82rem;color:#5a6068;background:#EAE4D8;border:1px solid var(--line);padding:.7rem .9rem;margin:1.4rem 0}

/* Checklist */
ol.steps{counter-reset:step;list-style:none;margin:1rem 0}
ol.steps li{counter-increment:step;position:relative;padding:.7rem 0 .7rem 3rem;border-bottom:1px dashed var(--line)}
ol.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.7rem;font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--brick);font-weight:600}
ul.plain{margin:.6rem 0 .6rem 1.2rem}
ul.plain li{margin:.35rem 0}

/* Hero site-plan diagram */
.hero{background:var(--white);border:1px solid var(--line);padding:1.6rem;margin:1.8rem 0}
.hero svg{width:100%;height:auto;display:block}

/* Footer */
footer{background:var(--slate);color:#aab4b0;margin-top:3rem;padding:2rem 0;font-size:.85rem}
footer .nav{align-items:flex-start}
footer a{color:#cfd6d3}
footer .cols{max-width:960px;margin:0 auto;padding:0 1.2rem;display:flex;gap:2.5rem;flex-wrap:wrap}
footer p{max-width:420px}

@media(max-width:600px){h1{font-size:1.7rem}.wrap,.wrap-wide{padding-top:1.4rem}}