/* Specline — the project-type pages and the guides. Layered on site.css: only what those pages
   need beyond the home page. Same tokens, same measure, same rules. */

.crumbs{padding:18px 28px 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule)}
.crumbs a{color:var(--ink-2)}
.crumbs [aria-current]{color:var(--ink)}

/* the page opener: eyebrow, H1, lede, and the specimen beside it on wide screens */
.opener{padding:44px 0 56px}
.opener .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:900px){.opener .wrap{grid-template-columns:1fr}}
.opener h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;line-height:1.08;margin:0 0 16px;text-wrap:balance}
.opener .lede{margin:0 0 22px}
.opener figure{margin:0;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:#fff}
.opener figure img{display:block;width:100%;height:auto}
.opener figcaption{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding:10px 14px;border-top:1px solid var(--rule-soft);background:var(--surface)}

/* running text on a guide: one measure, generous leading */
.prose{max-width:68ch}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 12px}
.prose h3{font-size:18px;margin:28px 0 8px}
.prose p,.prose li{font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.prose p strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose table{border-collapse:collapse;width:100%;margin:18px 0 24px;font-size:15px}
.prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.prose th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.prose td.num,.prose th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.prose .aside{border-left:3px solid var(--petrol);background:var(--petrol-soft);padding:14px 18px;border-radius:0 var(--r-card) var(--r-card) 0;margin:22px 0}
.prose .aside p{margin:0;color:var(--ink)}
.prose .aside p+p{margin-top:8px}
.byline{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 28px}

/* the schedule of build-ups on a type page: reference group, title, what it achieves */
.sched{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.sched table{border-collapse:collapse;width:100%;font-size:14.5px}
.sched th,.sched td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.sched tr:last-child td{border-bottom:0}
.sched th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--well)}
.sched td.g{font-family:var(--mono);color:var(--petrol);white-space:nowrap;width:1%}
.sched td.u{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.sched td.u small{color:var(--ink-3);margin-left:6px}
.sched .subhead td{background:var(--well);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:7px 14px}

/* the categories a type carries, as a compact wrapped list */
.cats{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.cats li{border:1px solid var(--rule);border-radius:999px;padding:6px 12px;font-size:13.5px;background:var(--surface);color:var(--ink-2)}
.cats li.opt{border-style:dashed;color:var(--ink-3)}
.catsnote{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:12px 0 0}

/* the two-column "what building control looks for" + "limits" */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.pair .col{border:1px solid var(--rule);border-radius:var(--r-card);background:var(--surface);padding:22px 24px}
.pair h3{margin:0 0 10px;font-size:17px}
.pair p,.pair li{color:var(--ink-2);font-size:15px;line-height:1.55}
.pair ul{padding-left:20px;margin:8px 0 0}

/* an index of pages: the type index and the guides index */
.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.index a{display:block;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--surface);padding:18px 20px;color:inherit;text-decoration:none}
.index a:hover{border-color:var(--petrol)}
.index b{display:block;font-size:17px;margin-bottom:4px}
.index span{color:var(--ink-2);font-size:14px;line-height:1.45}
.index .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);display:block;margin-bottom:8px}

/* related links at the foot of a page */
.related{border-top:1px solid var(--rule-soft);padding-top:22px;margin-top:40px}
.related p.eyebrow{margin-bottom:10px}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.related li a{font-size:15px}

.cta{background:var(--well)}
.cta h2{margin-bottom:8px}
.cta .btn+.btn{margin-left:8px}