/* ===== Heather McNeill brand tokens ===== */
:root{
  --hm-ink:#1d211e;      /* text, footer */
  --hm-ridge:#2f3b32;    /* seller band */
  --hm-lime:#f3efe6;     /* limestone panels */
  --hm-paper:#fbf9f4;    /* page */
  --hm-red:#be1d2d;      /* Droessler red: primary action + footnote mark only */
  --hm-rule:#d8d4cb;     /* hairlines */
  --hm-muted:#5f635d;    /* secondary text, 5.9:1 on paper */
  --hm-display:'Libre Caslon Display',Georgia,serif;
  --hm-serif:'Libre Caslon Text',Georgia,serif;
  --hm-sans:'Public Sans',system-ui,sans-serif;
  --hm-max:1240px;
  --hm-gutter:24px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--hm-paper)}
.hm{width:100%;min-width:0;container-type:inline-size;container-name:hm;font-family:var(--hm-sans);color:var(--hm-ink);background:var(--hm-paper);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
.hm a{color:var(--hm-ink);text-decoration-thickness:1px;text-underline-offset:3px}
.hm a:hover{color:var(--hm-red)}
.hm img{display:block;max-width:100%}
.hm-wrap{max-width:var(--hm-max);margin:0 auto;padding-left:var(--hm-gutter);padding-right:var(--hm-gutter)}
.hm-h1,.hm-h2{font-family:var(--hm-display);font-weight:400;margin:0}
.hm-h1{font-size:clamp(40px,5.2cqi,72px);line-height:1.04;max-width:15ch}
.hm-h2{font-size:clamp(32px,3.4cqi,44px);line-height:1.08}
.hm-fn{font-family:var(--hm-serif);color:var(--hm-red);font-size:.45em;vertical-align:1.1em;margin-left:2px;font-weight:400}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--hm-red);color:#fff !important;font:600 17px/1 var(--hm-sans);text-decoration:none;border:0;cursor:pointer}
.hm-btn:hover{background:#a01825}
.hm-sr{position:absolute;left:-9999px}

/* ===== Header ===== */
.hm-header{border-bottom:1px solid var(--hm-rule)}
.hm-header .hm-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.hm-logo{text-decoration:none;display:flex;flex-direction:column;gap:2px}
.hm-logo-name{font-family:var(--hm-display);font-size:32px;line-height:1}
.hm-logo-brk{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.hm-nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-size:16px}
.hm-nav a{text-decoration:none}
.hm-nav .hm-call{font-weight:600;border-bottom:2px solid var(--hm-red);padding-bottom:2px}

/* ===== Hero + search ===== */
.hm-hero{position:relative;overflow:hidden;min-height:640px}
.hm-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 65%}
.hm-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(251,249,244,.94) 0%,rgba(251,249,244,.86) 38%,rgba(251,249,244,0) 62%);z-index:1}
.hm-hero .hm-wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:72px}
.hm-hero-lede{margin:20px 0 28px;max-width:46ch;font-size:19px;color:#2a2e2a}
.hm-search{display:flex;flex-wrap:wrap;gap:8px;max-width:640px;background:var(--hm-paper);padding:8px;border:1px solid var(--hm-ink)}
.hm-search input{flex:1 1 260px;min-width:0;border:0;background:transparent;font:18px var(--hm-sans);padding:12px;color:var(--hm-ink)}
.hm-towns-quick{margin:14px 0 0;font-size:15px;color:#2a2e2a;max-width:640px}

/* ===== Listings grid ===== */
.hm-new{padding-top:88px;padding-bottom:40px}
.hm-new-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--hm-ink);padding-bottom:14px}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px 24px;margin-top:28px}
.hm-card{text-decoration:none;display:flex;flex-direction:column;gap:10px}
.hm-card-img{aspect-ratio:4/3;background:#e7e2d7;object-fit:cover;width:100%}
.hm-price{font-family:var(--hm-serif);font-size:26px;line-height:1.1}
.hm-meta{font-size:14px;color:var(--hm-muted)}

/* ===== Split sections ===== */
.hm-split{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.hm-split > img{flex:1 1 480px;min-width:0;width:100%;aspect-ratio:4/3;object-fit:cover}
.hm-split > div{flex:1 1 420px;min-width:0}
.hm-split p{max-width:52ch}
.hm-rows{display:flex;flex-direction:column;margin-top:24px}
.hm-row{display:flex;gap:20px;padding:16px 0;border-top:1px solid var(--hm-rule)}
.hm-row:last-child{border-bottom:1px solid var(--hm-rule)}
.hm-row-n{font-family:var(--hm-serif);color:var(--hm-red);min-width:20px}

/* ===== Seller band ===== */
.hm-sell{background:var(--hm-ridge);color:var(--hm-lime)}
.hm-sell p{color:#e4e0d6;max-width:46ch}
.hm-form{display:flex;flex-direction:column;gap:12px;max-width:460px;margin-top:28px}
.hm-form label{font-size:15px}
.hm-form input,.hm-form textarea{font:18px var(--hm-sans);padding:12px 14px;border:1px solid var(--hm-ink);background:var(--hm-paper);color:var(--hm-ink)}
.hm-sell .hm-form input{border-color:var(--hm-lime)}
.hm-form .hm-btn{align-self:flex-start;margin-top:8px}

/* ===== Towns ===== */
.hm-towns{padding-top:88px;padding-bottom:88px}
.hm-towns-intro{margin:8px 0 32px;max-width:58ch}
.hm-towns-body{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.hm-town-list{flex:1 1 520px;min-width:0;display:flex;flex-direction:column}
.hm-town{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--hm-rule);text-decoration:none}
.hm-town:first-child{border-top-color:var(--hm-ink)}
.hm-town:last-child{border-bottom:1px solid var(--hm-rule)}
.hm-town-name{font-family:var(--hm-serif);font-size:24px}
.hm-town-meta{font-size:15px;color:var(--hm-muted);text-align:right}
.hm-towns-img{flex:1 1 400px;min-width:0;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% center}

/* ===== About ===== */
.hm-about{border-top:1px solid var(--hm-rule)}
.hm-about .hm-split > img{flex:0 1 380px;aspect-ratio:4/5;object-position:center 20%}
.hm-about-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}

/* ===== Footer ===== */
.hm-footer{background:var(--hm-ink);color:#e4e0d6}
.hm-footer .hm-wrap{padding-top:56px;padding-bottom:40px;display:flex;flex-direction:column;gap:28px}
.hm-footer a{color:#e4e0d6}
.hm-foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.hm-foot-brk{display:flex;flex-direction:column;gap:6px;font-size:16px}
.hm-foot-brk strong{font-size:22px;font-weight:600;color:#fff}
.hm-foot-links{display:flex;flex-wrap:wrap;gap:24px;font-size:16px}
.hm-notes{border-top:1px solid #3b403b;padding-top:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.5;color:#c9c5bb;max-width:110ch}
.hm-notes b{color:#e0606b;font-weight:400}

@container hm (max-width:640px){
  .hm-wrap,.hm-hero .hm-wrap{font-size:17px}
  .hm-hero{min-height:0;display:flex;flex-direction:column-reverse}
  .hm-hero::before{display:none}
  .hm-hero-img{position:relative;height:240px}
  .hm-hero .hm-wrap{padding-top:32px;padding-bottom:28px}
  .hm-nav{gap:18px}
  .hm-new,.hm-towns{padding-top:56px;padding-bottom:56px}
  .hm-split{padding-top:48px;padding-bottom:48px;gap:28px}
  .hm-town-meta{font-size:14px}
}

/* ===== Listing page ===== */
.hm-crumb{padding-top:24px;font-size:15px;color:var(--hm-muted)}
.hm-gallery{margin-top:20px;aspect-ratio:21/9;background:#e7e2d7;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--hm-muted)}
.hm-listing{display:flex;flex-wrap:wrap;gap:56px;padding-top:32px}
.hm-listing-main{flex:999 1 560px;min-width:0}
.hm-listing-side{flex:1 1 340px;min-width:0}
.hm-status{font-size:15px;color:var(--hm-muted)}
.hm-lprice{font-family:var(--hm-display);font-weight:400;font-size:clamp(40px,4cqi,56px);line-height:1.05;margin:6px 0 4px}
.hm-addr{font-size:22px}
.hm-facts{display:flex;flex-wrap:wrap;margin:24px 0;border-top:1px solid var(--hm-ink);border-bottom:1px solid var(--hm-rule)}
.hm-fact{flex:1 1 120px;padding:14px 0}
.hm-fact b{display:block;font-family:var(--hm-serif);font-weight:400;font-size:28px}
.hm-fact span{font-size:14px;color:var(--hm-muted)}
.hm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.hm-btn-line{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--hm-ink);text-decoration:none}
.hm-h3{font-family:var(--hm-display);font-weight:400;font-size:32px;margin:0 0 12px}
.hm-note{padding-left:20px;border-left:1px solid var(--hm-red);max-width:65ch}
.hm-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:32px;font-size:16px;margin-bottom:32px}
.hm-details div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--hm-rule)}
.hm-details span:first-child{color:var(--hm-muted)}
.hm-courtesy{padding:20px 0;border-top:1px solid var(--hm-ink);border-bottom:1px solid var(--hm-ink);margin-bottom:40px;font-size:18px}
.hm-courtesy small{display:block;font-size:15px;margin-top:8px}
.hm-ask{background:var(--hm-lime);padding:28px;display:flex;flex-direction:column;gap:12px}
.hm-ask img{width:88px;height:88px;object-fit:cover;object-position:center 18%}
.hm-ask .hm-form{margin-top:0;max-width:none}
.hm-more{padding-top:24px;padding-bottom:72px}

/* ===== v4 QA fixes (2026-10-06) ===== */
/* width/height attributes were forcing image heights (900-1140px); let aspect-ratio decide */
.hm-split > img,.hm-towns-img,.hm-card-img{height:auto}
.hm-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hm-btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--hm-ink);background:var(--hm-paper);color:var(--hm-ink) !important;font:600 17px/1 var(--hm-sans);text-decoration:none}
.hm-btn-ghost:hover{border-color:var(--hm-red);color:var(--hm-red) !important}
.hm-sell .hm-actions-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hm-sell .hm-btn-ghost{background:transparent;color:var(--hm-lime) !important;border-color:var(--hm-lime)}
.hm-town{cursor:default}
.hm-towns-quick{margin:20px 0 0}
@container hm (max-width:640px){
  .hm-header .hm-wrap{padding-top:14px;padding-bottom:14px;gap:10px}
  .hm-logo-name{font-size:28px}
  .hm-nav{gap:16px;font-size:15px;width:100%}
  .hm-nav .hm-nav-opt{display:none}
  .hm-nav .hm-call{margin-left:auto}
  .hm-split > img{aspect-ratio:3/2}
  .hm-towns-img{aspect-ratio:3/2}
  .hm-about .hm-split > img{aspect-ratio:4/5;max-width:320px}
  .hm-hero-actions .hm-btn,.hm-hero-actions .hm-btn-ghost{flex:1 1 100%}
}