/* Midwest Hearth Studio — parchment fields, umber material frames, kiln-red decisions, and editorial asymmetry. */
:root { --paper:#f1eadc; --paper-deep:#e3d6c0; --ink:#282724; --umber:#382d26; --slate:#516069; --red:#a84132; --red-dark:#833127; --line:rgba(56,45,38,.19); --soft-line:rgba(241,234,220,.22); --serif:"Fraunces", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.skip-link { position:fixed; z-index:100; top:1rem; left:1rem; padding:.65rem 1rem; background:var(--red); color:white; transform:translateY(-180%); transition:transform .18s var(--ease); }
.skip-link:focus { transform:translateY(0); }
.site-header { min-height:5.8rem; display:flex; align-items:center; gap:2rem; padding:1rem clamp(1.25rem,4vw,4.75rem); background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
.brand img { width:42px; height:42px; object-fit:contain; }
.brand-text { display:grid; line-height:.92; letter-spacing:-.025em; }
.brand-text strong { font-family:var(--serif); font-weight:600; font-size:1.32rem; }
.brand-text span { font-size:.66rem; text-transform:uppercase; font-weight:700; letter-spacing:.12em; margin-top:.35rem; }
.main-nav { display:flex; gap:clamp(1rem,2.5vw,2.25rem); margin-left:auto; }
.main-nav a { color:var(--umber); text-decoration:none; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.075em; transition:color .18s var(--ease); }
.main-nav a:hover { color:var(--red); }
.header-call { color:var(--paper); background:var(--umber); text-decoration:none; padding:.78rem 1.05rem; font-weight:700; font-size:.84rem; transition:background .18s var(--ease), transform .18s var(--ease); }
.header-call span { display:none; }
.header-call:hover { background:var(--red); transform:translateY(-2px); }
.hero { position:relative; min-height:min(720px,calc(100vh - 5.8rem)); display:flex; overflow:hidden; background:var(--umber); color:white; }
.hero-image, .hero-wash { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:center; }
.hero-wash { background:linear-gradient(90deg,rgba(37,28,23,.94) 0%,rgba(37,28,23,.86) 38%,rgba(37,28,23,.25) 77%,rgba(37,28,23,.1)); }
.hero-inner { position:relative; z-index:1; width:min(100% - 2.5rem, 800px); margin:0 clamp(1.25rem,10vw,10.5rem); align-self:center; padding:5rem 0; }
.eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.145em; text-transform:uppercase; margin:0 0:1.2rem; color:var(--red); }
.eyebrow.light { color:#e3cbbd; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:600; letter-spacing:-.055em; line-height:.97; }
h1 { max-width:770px; margin:0; font-size:clamp(3.25rem,7vw,6.65rem); }
h1 em { color:#e7c8a4; font-weight:500; }
.hero-copy { max-width:570px; margin:1.55rem 0 0; font-size:clamp(1rem,1.4vw,1.17rem); color:#f0e6d7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:.8rem; min-height:3.3rem; padding:.78rem 1.05rem; text-decoration:none; border:1px solid transparent; font:700 .8rem var(--sans); text-transform:uppercase; letter-spacing:.075em; cursor:pointer; transition:transform .16s var(--ease), background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
.button:hover { transform:translateY(-3px); }.button:active { transform:scale(.97); }
.button-red { background:var(--red); color:white; }.button-red:hover { background:var(--red-dark); }
.button-ghost { color:white; border-color:rgba(255,255,255,.58); }.button-ghost:hover { border-color:white; background:rgba(255,255,255,.1); }
.trust-badges { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin-top:3.8rem; color:#f2e5d1; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }.trust-badges i { width:4px; height:4px; border-radius:100%; background:#d6a882; }
.hero-corner { position:absolute; right:clamp(1.5rem,5vw,5rem); bottom:2.5rem; display:grid; grid-template-columns:16px 16px; grid-template-rows:16px 16px; gap:3px; z-index:1; }.hero-corner span { border:1px solid rgba(255,255,255,.75); }.hero-corner span:first-child { grid-column:1; grid-row:1; }.hero-corner span:nth-child(2) { grid-column:2; grid-row:1; }.hero-corner span:nth-child(3) { grid-column:1; grid-row:2; background:var(--red); border-color:var(--red); }
.intro-strip { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.7rem clamp(1.25rem,8vw,8rem); background:var(--red); color:white; }.intro-strip p { margin:0; font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.7rem); letter-spacing:-.03em; line-height:1.1; }.intro-strip a { font-size:.77rem; white-space:nowrap; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.section-grid { display:grid; grid-template-columns:minmax(130px,17%) minmax(0,1fr); gap:clamp(2rem,7vw,8rem); padding:clamp(5rem,10vw,10.5rem) clamp(1.25rem,8vw,8rem); }.section-label { padding-top:.3rem; }.section-label .eyebrow { color:var(--slate); }.vertical-rule { display:block; width:1px; min-height:18rem; margin:1.35rem 0 0 .4rem; background:var(--line); }.section-content { max-width:1040px; }.section-content h2, .about h2, .contact h2, .reviews h2 { max-width:720px; margin-bottom:1.55rem; font-size:clamp(2.45rem,4.7vw,4.8rem); }.section-lede { max-width:650px; font-size:1.12rem; color:#514b45; }
.service-list { margin-top:3.5rem; border-top:1px solid var(--line); }.service-item { display:grid; grid-template-columns:3.6rem minmax(0,1fr) 2rem; gap:1rem; padding:1.65rem 0; border-bottom:1px solid var(--line); transition:padding .2s var(--ease), color .2s var(--ease); }.service-item:hover { padding-left:.7rem; color:var(--red); }.service-number { color:var(--red); font-family:var(--serif); font-size:1.05rem; }.service-item h3 { margin:0 0:.45rem; font-family:var(--serif); font-size:1.55rem; letter-spacing:-.035em; line-height:1; }.service-item p { margin:0; max-width:570px; color:#5b554e; font-size:.94rem; }.service-mark { align-self:start; font-size:1.6rem; color:var(--red); }
.about { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:clamp(2.5rem,8vw,10rem); padding:clamp(5rem,10vw,10.5rem) clamp(1.25rem,8vw,8rem); background:#ded2bd; }.framed-image { position:relative; padding:1rem 1rem 3rem; background:var(--umber); box-shadow:1.5rem 1.5rem 0 rgba(168,65,50,.17); }.framed-image img { width:100%; aspect-ratio:4/4.65; object-fit:cover; }.frame-label { position:absolute; bottom:1rem; left:1rem; color:#e8d8c3; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }.about-copy { max-width:600px; }.about-copy > p:not(.eyebrow) { color:#4e4942; font-size:1.03rem; }.process-notes { display:grid; gap:1rem; margin:2.2rem 0 0; }.process-notes div { display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.8rem; align-items:start; padding-top:.8rem; border-top:1px solid rgba(56,45,38,.25); }.process-notes dt { color:var(--red); font-family:var(--serif); }.process-notes dd { margin:0; font-size:.9rem; }
.gallery { background:#f7f2e9; }.gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; }.gallery-heading h2 { margin-bottom:0; }.gallery-note { max-width:270px; margin:0; color:#645e55; font-size:.8rem; }.gallery-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:auto auto; gap:1.2rem; margin-top:3.6rem; }.gallery-card { margin:0; background:var(--umber); overflow:hidden; }.gallery-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }.gallery-card:hover img { transform:scale(1.035); }.gallery-card-tall { grid-row:span 2; min-height:560px; }.gallery-card-wide { min-height:285px; }.gallery-card-detail { min-height:250px; }.gallery-card figcaption { display:flex; justify-content:space-between; gap:1rem; padding:.82rem 1rem; color:#f5eadb; font-size:.68rem; text-transform:uppercase; letter-spacing:.075em; }.gallery-card figcaption b { color:#d9bba1; font-size:.62rem; text-align:right; }.material-swatch { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; height:calc(100% - 3rem); padding:1rem; background:#d1b79a; }.material-swatch span { background:#aa3e30; }.material-swatch span:nth-child(2),.material-swatch span:nth-child(5) { background:#ecdfc8; }.material-swatch span:nth-child(3) { background:#53616a; }.material-swatch span:nth-child(4) { background:#3a2e27; }.material-swatch span:nth-child(6) { background:#d56e4f; }
.reviews { display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,6rem); padding:clamp(5rem,9vw,9rem) clamp(1.25rem,8vw,8rem); background:var(--umber); color:#f8efe0; }.reviews h2 { color:white; }.reviews-intro > p:not(.eyebrow) { max-width:390px; color:#d8cabe; }.review-reservations { display:grid; gap:1px; background:var(--soft-line); align-content:start; }.review-reservations article { min-height:135px; display:grid; grid-template-columns:2.4rem minmax(0,1fr); column-gap:1rem; align-content:center; padding:1.35rem; background:var(--umber); }.reservation-mark { grid-row:span 2; color:#d16e5c; font-family:var(--serif); font-size:2rem; line-height:.5; }.review-reservations p { margin:0; font-family:var(--serif); font-size:1.22rem; line-height:1.1; }.review-reservations small { margin-top:.55rem; color:#cbb9a8; font-size:.69rem; text-transform:uppercase; letter-spacing:.08em; }
.contact { padding:clamp(5rem,10vw,10rem) clamp(1.25rem,8vw,8rem); background:var(--paper); }.contact-top { display:flex; justify-content:space-between; gap:4rem; margin-bottom:4rem; }.contact-top > div { max-width:740px; }.contact-top > div > p:not(.eyebrow) { max-width:500px; color:#5b554e; font-size:1.05rem; }.contact address { min-width:225px; padding:.4rem 0 0 1.3rem; border-left:2px solid var(--red); font-style:normal; font-size:.92rem; }.contact address p { margin-bottom:1.2rem; }.contact address a { text-decoration-color:var(--red); }.contact-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:1.2rem; }.form-panel { padding:clamp(1.4rem,3vw,3.2rem); background:#e6dac8; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.field { margin-bottom:1.25rem; }.field label { display:block; margin-bottom:.45rem; color:var(--umber); font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }.field label span { color:var(--red); }.field label .optional { color:#6e6760; font-weight:500; text-transform:none; letter-spacing:0; }.field input,.field textarea { width:100%; border:1px solid rgba(56,45,38,.35); border-radius:0; padding:.8rem .75rem; color:var(--ink); background:rgba(255,255,255,.43); font:400 1rem var(--sans); transition:border-color .18s var(--ease), background .18s var(--ease); }.field textarea { resize:vertical; min-height:130px; }.field input:focus,.field textarea:focus { background:#fffaf1; border-color:var(--red); }.field small { display:block; margin-top:.35rem; color:#726a61; font-size:.72rem; }.form-submit { width:100%; margin-top:.15rem; border:0; }.form-required { margin:.9rem 0 0; color:#6f665d; font-size:.73rem; }.form-required span { color:var(--red); font-weight:700; }.form-success { min-height:300px; align-items:center; gap:1rem; padding:2rem; background:#e6dac8; }.form-success[hidden] { display:none !important; }.form-success span { display:grid; place-items:center; flex:0 0 2.8rem; width:2.8rem; height:2.8rem; background:var(--red); color:white; border-radius:100%; font-weight:700; }.form-success strong { font-family:var(--serif); font-size:1.6rem; letter-spacing:-.035em; }.form-success p { margin:.35rem 0 0; color:#5b554e; }.map-panel { position:relative; min-height:560px; background:var(--slate); }.map-panel iframe { display:block; width:100%; height:100%; min-height:560px; border:0; filter:saturate(.76) contrast(.93); }.map-link { position:absolute; right:1rem; bottom:1rem; padding:.75rem .9rem; color:white; background:var(--umber); font-size:.7rem; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:.075em; transition:background .18s var(--ease), transform .18s var(--ease); }.map-link:hover { background:var(--red); transform:translateY(-2px); }
.site-footer { display:grid; grid-template-columns:1.35fr 1fr .65fr; gap:3rem; padding:4rem clamp(1.25rem,8vw,8rem) 1.35rem; background:#25211f; color:#e9dfd1; }.site-footer .brand { color:white; }.site-footer .brand img { width:38px; height:38px; }.footer-brand > p { max-width:280px; margin:1.3rem 0 0; color:#bcae9f; font-size:.85rem; }.footer-label { color:#c86a58; font-size:.67rem; font-weight:700; letter-spacing:.115em; text-transform:uppercase; }.site-footer address { font-style:normal; color:#d4c8ba; font-size:.85rem; }.site-footer a { display:block; margin-bottom:.45rem; color:#e9dfd1; font-size:.85rem; }.site-footer address a { display:inline; }.footer-links { display:grid; align-content:start; justify-items:start; }.footer-links a { text-decoration:none; }.footer-links a:hover { color:#d76c58; }.footer-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1.2rem; color:#988d82; border-top:1px solid rgba(255,255,255,.12); font-size:.67rem; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:800px) { .site-header { min-height:4.8rem; gap:1rem; }.main-nav { display:none; }.header-call { margin-left:auto; font-size:.73rem; }.header-call span { display:inline; margin-right:.35rem; }.hero { min-height:620px; }.hero-wash { background:linear-gradient(90deg,rgba(37,28,23,.9) 0%,rgba(37,28,23,.78) 70%,rgba(37,28,23,.35)); }.section-grid { grid-template-columns:1fr; gap:0; }.section-label { display:flex; align-items:center; gap:1rem; }.section-label .eyebrow { margin:0; }.vertical-rule { width:100%; min-height:1px; margin:0; }.about { grid-template-columns:1fr; }.about-image-wrap { max-width:560px; }.gallery-heading { display:block; }.gallery-note { margin-top:1rem; }.gallery-grid { grid-template-columns:1fr; }.gallery-card-tall { min-height:450px; }.gallery-card-wide { min-height:310px; }.gallery-card-detail { min-height:220px; }.reviews,.contact-grid { grid-template-columns:1fr; }.contact-top { display:block; }.contact-top address { margin-top:2.3rem; }.map-panel,.map-panel iframe { min-height:370px; }.site-footer { grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1 / -1; } }
@media (max-width:540px) { .site-header { padding: .7rem 1rem; }.brand img { width:34px; height:34px; }.brand-text strong { font-size:1.1rem; }.brand-text span { font-size:.56rem; }.header-call { padding:.62rem .7rem; font-size:.64rem; }.header-call span { display:none; }.hero-inner { width:calc(100% - 2rem); margin:0 1rem; }.hero-actions { display:grid; }.button { width:100%; }.trust-badges { margin-top:2.5rem; gap:.45rem; line-height:1.6; }.intro-strip { display:block; }.intro-strip a { display:inline-block; margin-top:1rem; }.section-grid,.contact,.about { padding-left:1rem; padding-right:1rem; }.service-item { grid-template-columns:2.4rem minmax(0,1fr) 1.5rem; }.gallery-card-tall { min-height:380px; }.gallery-card figcaption { display:block; }.gallery-card figcaption b { display:block; margin-top:.4rem; text-align:left; }.field-row { grid-template-columns:1fr; gap:0; }.site-footer { grid-template-columns:1fr; padding-left:1rem; padding-right:1rem; }.footer-bottom { display:grid; }.hero-corner { right:1rem; bottom:1rem; } }
@media (prefers-reduced-motion:no-preference) { .hero-inner,.section-content,.about-copy,.gallery-card,.reviews-intro,.review-reservations,.contact-top,.contact-grid { animation:enter .7s var(--ease) both; }.section-content { animation-delay:.08s; }.about-copy,.review-reservations,.contact-grid { animation-delay:.12s; } @keyframes enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* The legacy validation script toggles inline display; this establishes the initial hidden state. */
.form-success { display:none; }

/* Style decisions: repeat the stepped joint as an understated annotation; treat lower-page panels as physical sample boards. */
.eyebrow::before { content:""; display:inline-block; width:.5rem; height:.5rem; margin:0 .52rem .05rem 0; background:currentColor; box-shadow:.68rem 0 0 -1px var(--paper), 0 .68rem 0 -1px currentColor; vertical-align:middle; }
.eyebrow.light::before { box-shadow:.68rem 0 0 -1px var(--umber), 0 .68rem 0 -1px currentColor; }
.gallery-card, .form-panel, .map-panel { box-shadow:inset 0 0 0 1px rgba(56,45,38,.12); }
.gallery-card { position:relative; }
.gallery-card::after { content:""; position:absolute; top:.85rem; right:.85rem; width:.7rem; height:.7rem; border-top:1px solid rgba(255,255,255,.8); border-right:1px solid rgba(255,255,255,.8); pointer-events:none; }
.review-reservations article { position:relative; overflow:hidden; }
.review-reservations article::after { content:""; position:absolute; right:1.25rem; top:1.25rem; width:.55rem; height:.55rem; border:1px solid #c86a58; box-shadow:.72rem 0 0 -1px var(--umber),0 .72rem 0 -1px #c86a58; }
.form-panel { position:relative; background-image:linear-gradient(90deg,rgba(168,65,50,.09) 1px,transparent 1px),linear-gradient(rgba(168,65,50,.055) 1px,transparent 1px); background-size:2.35rem 2.35rem; }
.form-panel::before { content:""; position:absolute; right:1.25rem; top:1.25rem; width:1rem; height:1rem; border-top:2px solid var(--red); border-right:2px solid var(--red); pointer-events:none; }
.map-panel { overflow:hidden; border:1rem solid var(--umber); background-color:var(--slate); background-image:linear-gradient(135deg,rgba(241,234,220,.1) 25%,transparent 25%),linear-gradient(315deg,rgba(241,234,220,.06) 25%,transparent 25%); background-size:2rem 2rem; }
.map-panel iframe { position:relative; z-index:1; }
.map-material-label { position:absolute; z-index:2; top:0; left:0; padding:.48rem .7rem; color:#e6dac8; background:var(--umber); font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; pointer-events:none; }
.map-corner-mark { position:absolute; z-index:2; left:.8rem; bottom:.85rem; display:grid; grid-template-columns:9px 9px; grid-template-rows:9px 9px; gap:2px; pointer-events:none; }.map-corner-mark i { border:1px solid #e6dac8; }.map-corner-mark i:nth-child(3) { background:var(--red); border-color:var(--red); }
.map-link { z-index:3; }