/* Hallmark · shape: Long Document · genre: editorial · theme: Formwork (by request) · job: hire · draw: manual
 * hero: Title block with insights plate · nav: edge-aligned · footer: mast · imagery: none (slots for owner photos) · signature: cost insights plate and project header strip · formwork: cast + drawing
 * axes: mid/display-condensed/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0
 * waive: 58 word count on article templates, long-form cost and DIY guides need 1200+ words for SEO, one idea per section still holds */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · weakest: E, no real photos yet so type, tables and the insights plate carry the page, photo slots left for owner material */
@import url("./tokens.css");
@import url("./base.css");

html, body { overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); margin: 0; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-lg); }
.narrow { max-width: 860px; }
.topbar { border-bottom: 3px solid var(--color-ink); background: var(--color-paper); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-md) 0; flex-wrap: wrap; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.wordmark span { color: var(--color-accent-deep); }
.navlinks { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.navlinks a { color: var(--color-ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.navlinks a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
button:disabled, input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
.crumb { font-size: 14px; padding: var(--space-md) 0 0; }
.crumb a { color: var(--color-ink); }
h1 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; line-height: 1; font-size: clamp(36px, 5vw, 60px); margin: var(--space-md) 0 var(--space-sm); overflow-wrap: break-word; min-width: 0; }
.byline { font-size: 14px; color: var(--color-ink-2); margin: 0 0 var(--space-lg); }
.plate { background: var(--color-plate); border: 3px solid var(--color-ink); box-shadow: var(--shadow-card); padding: var(--space-lg); margin: 0 0 var(--space-lg); }
.plate h2 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-sm); font-size: 24px; }
.plate ul { margin: 0; padding-left: var(--space-lg); line-height: 1.6; }
.plate .big { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); display: block; line-height: 1; margin-bottom: var(--space-sm); }
article p { line-height: 1.65; font-size: 17px; color: var(--color-ink-2); max-width: 760px; }
article h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 32px; margin: var(--space-xl) 0 var(--space-sm); border-top: 3px solid var(--color-ink); padding-top: var(--space-md); }
article h3 { font-size: 20px; margin: var(--space-lg) 0 var(--space-xs); }
article ul, article ol { line-height: 1.65; font-size: 17px; color: var(--color-ink-2); max-width: 760px; }
table { border-collapse: collapse; width: 100%; max-width: 860px; margin: var(--space-md) 0 var(--space-lg); background: var(--color-plate); }
th, td { border: 1px solid var(--color-rule); padding: var(--space-sm); text-align: left; font-size: 16px; }
th { border-bottom: 3px solid var(--color-ink); font-weight: 500; }
.calcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
label { display: block; font-size: 14px; font-weight: 500; margin-bottom: var(--space-xs); }
select, input[type="number"] { width: 100%; box-sizing: border-box; padding: var(--space-sm); border: 2px solid var(--color-ink); background: var(--color-paper); font-size: 16px; border-radius: 0; }
.btn { background: var(--color-accent); color: var(--color-accent-ink); border: 2px solid var(--color-ink); box-shadow: 0 3px 0 var(--color-accent-deep); font-family: var(--font-display); text-transform: uppercase; font-weight: 700; padding: var(--space-sm) var(--space-lg); cursor: pointer; font-size: 16px; margin-top: var(--space-md); }
.btn:active { transform: translateY(3px); box-shadow: none; }
.result { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.result strong { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); display: block; line-height: 1; }
.result small { font-size: 12px; color: var(--color-muted); }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: 0 0 var(--space-lg); }
.strip .cell { border: 2px solid var(--color-ink); background: var(--color-plate); padding: var(--space-md); }
.strip .cell b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 20px; margin-top: var(--space-xs); }
.strip .cell span { font-size: 13px; font-weight: 500; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-md); margin: var(--space-lg) 0; max-width: 860px; }
.step .num { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.step h3 { margin: 0 0 var(--space-xs); }
.step p { margin: 0; }
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 860px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.card { border: 2px solid var(--color-ink); background: var(--color-plate); padding: var(--space-md); }
.card h3 { margin: 0 0 var(--space-xs); font-size: 20px; }
.card h3 a { color: var(--color-ink); }
.card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-ink-2); }
section.block { padding: var(--space-xl) 0; border-top: 3px solid var(--color-ink); }
section.block h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 32px; margin: 0 0 var(--space-sm); }
.footer { background: var(--color-ink); color: var(--color-plate-ink); padding: var(--space-xl) 0; margin-top: var(--space-xl); }
.footer .wordmark { color: var(--color-plate-ink); }
.footer a { color: var(--color-plate-ink); }
.note { font-size: 12px; opacity: 0.85; margin-top: var(--space-md); line-height: 1.5; }
@media (max-width: 800px) { .calcgrid, .grid, .strip, .twocol { grid-template-columns: minmax(0, 1fr); } .step { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }