/* Hallmark · shape: Index-First · genre: editorial · theme: Formwork (by request) · job: hire · draw: manual
 * hero: Poster with live calculator plate · nav: edge-aligned · footer: mast · imagery: none (slots for owner photos) · signature: live cost calculator cast as a plate · formwork: cast + drawing
 * axes: mid/display-condensed/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · weakest: E, no real photos yet so hero carries type and the calculator plate, 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); }
.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; }
.hero { padding: var(--space-xl) 0 var(--space-lg); }
.hero h1 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; line-height: 1; font-size: clamp(40px, 6vw, 72px); margin: 0 0 var(--space-sm); overflow-wrap: break-word; min-width: 0; }
.hero p.lede { font-size: 20px; line-height: 1.5; max-width: 620px; margin: 0 0 var(--space-lg); color: var(--color-ink-2); }
.calc { background: var(--color-plate); border: 3px solid var(--color-ink); box-shadow: var(--shadow-card); padding: var(--space-lg); max-width: 860px; }
.calc h2 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-xs); font-size: 24px; }
.calc p { margin: 0 0 var(--space-md); font-size: 16px; }
.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); }
.searchrow { margin: var(--space-lg) 0 0; max-width: 860px; display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.chip { border: 2px solid var(--color-ink); background: var(--color-paper); padding: var(--space-xs) var(--space-sm); text-decoration: none; color: var(--color-ink); font-size: 14px; font-weight: 500; }
.chip:hover { background: var(--color-plate); }
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-xs); }
section.block > p { max-width: 700px; line-height: 1.5; color: var(--color-ink-2); }
.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); }
.price { font-family: var(--font-outlier); font-weight: 500; font-size: 20px; display: block; margin-bottom: var(--space-xs); }
.badge { font-size: 12px; font-weight: 500; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.footer { background: var(--color-ink); color: var(--color-plate-ink); padding: var(--space-xl) 0; margin-top: var(--space-lg); }
.footer .wordmark { color: var(--color-plate-ink); }
.footer a { color: var(--color-plate-ink); }
.footerlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.footerlinks a { display: block; font-size: 14px; margin: var(--space-xs) 0; text-decoration: none; }
.footerlinks a:hover { text-decoration: underline; }
.note { font-size: 12px; opacity: 0.85; margin-top: var(--space-md); line-height: 1.5; }
@media (max-width: 800px) { .calcgrid, .grid, .strip, .footerlinks { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }