/* =========================================================
   Mile Square House design system v2
   Tokens first. Everything below uses var(--…) only.
   ========================================================= */
:root{
  /* Brand: taken from the brownstone illustration */
  --brown:#7A4630;        /* brownstone */
  --brown-dark:#4E2B1C;   /* cornice, headings */
  --brick:#A4432F;        /* red brick: alerts, errors, "coming soon" */
  --brick-tint:#FFF5F2;
  --green:#2F4A3A;        /* front door, street sign, primary action */
  --green-tint:#E2EFDA;
  --brass:#C9963F;        /* door knocker, accents */
  --brass-light:#E3C48A;  /* focus ring */
  --brass-tint:#FFF7E8;   /* notes */
  --tan:#B98A6A;
  --hudson:#8FB3C4;
  /* Neutrals */
  --cream:#F5EDE1;        /* section tint, header */
  --paper:#FFFDF9;        /* page */
  --surface:#FFFFFF;      /* cards */
  --ink:#2A211C;          /* body text */
  --ink-soft:#4A3A30;     /* lead text */
  --muted:#6E5A4D;        /* secondary text, 5.4:1 on cream */
  --line:#E3D6C4;
  --on-dark:#E9DCCB;      /* text on brown footer / green panels */
  --on-dark-link:#F2D9A8;
  --on-color:#FFFFFF;
  /* Seasons */
  --spring:#E88AA0;--summer:#C9963F;--fall:#D9772B;--winter:#6F8FA6;
  /* Type */
  --font-display:Lora,Georgia,serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:.78rem;--fs-sm:.88rem;--fs-base:1rem;--fs-md:1.15rem;--fs-lg:1.3rem;
  --fs-h3:1.25rem;--fs-h2:clamp(1.6rem,3.5vw,2.3rem);--fs-h1:clamp(2.1rem,5vw,3.4rem);
  /* Space */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:56px;
  /* Shape */
  --r-sm:6px;--r-md:12px;--r-lg:18px;--r-pill:999px;
  --shadow-1:0 6px 16px rgba(78,43,28,.10);
  --shadow-2:0 10px 24px rgba(78,43,28,.14);
  /* Motion */
  --t-fast:.15s ease;--t-med:.25s ease;
  --header-h:68px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px}
h1,h2,h3{font-family:var(--font-display);color:var(--brown-dark);line-height:1.15;margin:0 0 .5em}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--brass-light);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:var(--s7) 0}
section.tint{background:var(--cream)}
.sr{position:absolute;left:-9999px}
.hp{display:none}
.lead{font-size:var(--fs-md);color:var(--ink-soft)}
.fine{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s4)}
.mt{margin-top:var(--s5)}

/* ---------- Icons ---------- */
.ico{width:1.25em;height:1.25em;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--brown);flex:none}
.ico .acs{stroke:var(--brass)}
.ico .acf{fill:var(--brass)}
.ico .sg{fill:var(--green);stroke:none}
.btn .ico{color:currentColor;width:1.1em;height:1.1em}
.btn .ico .acs,.btn .ico .acf{stroke:currentColor}
.btn .ico .acf{fill:none}

/* ---------- Street-sign label (Hoboken green plaque) ---------- */
.sign{display:inline-block;background:var(--green);color:var(--on-color);font:700 var(--fs-xs)/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 2px var(--green),inset 0 0 0 3px rgba(255,255,255,.75);margin-bottom:var(--s3)}

/* ---------- Cornice divider (Italianate brackets) ---------- */
.cornice{height:16px;background:var(--brown-dark);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Crect width='48' height='5'/%3E%3Crect y='5' width='48' height='2' opacity='.5'/%3E%3Cpath d='M20 7h8v4l-2 5h-4l-2-5z'/%3E%3C/svg%3E") repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Crect width='48' height='5'/%3E%3Crect y='5' width='48' height='2' opacity='.5'/%3E%3Cpath d='M20 7h8v4l-2 5h-4l-2-5z'/%3E%3C/svg%3E") repeat-x}

/* ---------- Header + nav ---------- */
header.site{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--header-h);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--brown-dark)}
.brand img{width:40px;height:40px}
nav a{text-decoration:none;color:var(--brown-dark);margin-left:18px;font-weight:500;font-size:.95rem}
nav a:hover,nav a.on{color:var(--brown);text-decoration:underline;text-underline-offset:5px}
nav a.navcta{background:var(--green);color:var(--on-color);padding:7px 14px;border-radius:var(--r-pill)}
nav a.navcta:hover,nav a.navcta.on{background:var(--brown-dark);color:var(--on-color);text-decoration:none}
.ls{display:none}

/* ---------- Buttons: one system ----------
   .btn (primary)  .btn-secondary (outline)  .btn-quiet (share/utility)  .btn-brass (on green)  + .btn-sm */
.btn{display:inline-flex;align-items:center;gap:var(--s2);background:var(--green);color:var(--on-color);text-decoration:none;padding:13px 24px;border-radius:var(--r-pill);font:600 var(--fs-base)/1.2 var(--font-body);margin:var(--s1);border:2px solid var(--green);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.btn:hover{background:var(--brown-dark);border-color:var(--brown-dark)}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:transparent;color:var(--green)}
.btn-secondary:hover{background:var(--green);color:var(--on-color);border-color:var(--green)}
.btn-quiet{background:var(--surface);color:var(--brown-dark);border:1.5px solid var(--line)}
.btn-quiet:hover{background:var(--surface);border-color:var(--brown);color:var(--brown-dark)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:var(--brown-dark)}
.btn-brass:hover{background:var(--brass-light);border-color:var(--brass-light);color:var(--brown-dark)}
.btn-sm{padding:7px 13px;font-size:var(--fs-sm);margin:0}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Hero ---------- */
.hero{background:var(--cream)}
.hero .text{padding-block:var(--s7) var(--s5);text-align:center}
.hero .lead{font-size:1.2rem;max-width:660px;margin:0 auto var(--s5)}
.hero img{width:100%;display:block;height:auto;max-height:460px;object-fit:cover;object-position:bottom}
.narrowhero{padding-top:var(--s2);padding-bottom:var(--s2)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.card>.ico:first-child{width:40px;height:40px;stroke-width:1.5;margin-bottom:var(--s2)}
.card[id]{scroll-margin-top:90px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.phead h3 a{color:var(--brown-dark);text-decoration:none}.phead h3 a:hover{text-decoration:underline}

/* Season checklist cards */
.season{border-top:6px solid var(--brown);scroll-margin-top:90px}
.season.spring{border-top-color:var(--spring)}.season.summer{border-top-color:var(--summer)}.season.fall{border-top-color:var(--fall)}.season.winter{border-top-color:var(--winter)}
.season .phead h2{margin-bottom:.4em}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding:9px 0 9px 30px;border-bottom:1px dashed var(--line);position:relative}
ul.check li:before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border:2px solid var(--brown);border-radius:4px}
ul.check li b{color:var(--brown-dark)}
.who{font-size:var(--fs-sm);color:var(--muted)}
.who a{color:var(--green);font-weight:600}
.toc a{margin-right:14px;white-space:nowrap}

/* Note / callouts */
.note{background:var(--brass-tint);border-left:4px solid var(--brass);padding:14px 18px;border-radius:var(--r-sm);margin:18px 0}
table{width:100%;border-collapse:collapse;margin:var(--s3) 0}
th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
th{background:var(--cream);font-weight:600}

/* ---------- Pros: tiles ---------- */
.search{display:block;max-width:560px}
.search input{width:100%;padding:14px 18px;border-radius:var(--r-pill);border:1.5px solid var(--tan);font-size:var(--fs-base);background:var(--surface)}
.search input:focus{outline:3px solid var(--brass-light);border-color:var(--brown)}
.howlisted{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s3)}
.prosec{padding-top:var(--s6)}
.tiles{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;color:var(--ink);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--tan)}
.tlink{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.tlink .ico{width:36px;height:36px;stroke-width:1.5}
.tlink:hover .tname{text-decoration:underline;text-underline-offset:4px}
.tname{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--brown-dark)}
.tcount{font-size:var(--fs-xs);color:var(--muted)}
.tcount.none{color:var(--muted);font-style:italic}
.tvet{font-size:var(--fs-xs);color:var(--muted);margin:var(--s2) 0 0;padding-top:var(--s2);border-top:1px dashed var(--line)}
.secthead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.minitiles{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:6px}
.minitile{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;text-decoration:none;color:var(--brown-dark);font-weight:600;transition:box-shadow var(--t-fast)}
.minitile .ico{width:28px;height:28px;stroke-width:1.6}
.minitile:hover{border-color:var(--tan);box-shadow:var(--shadow-1)}

/* ---------- Pros: category view + pro card ---------- */
.catview{margin-bottom:40px;scroll-margin-top:86px}
.catview[hidden],#catgrid[hidden],#proshero[hidden],#nores[hidden]{display:none!important}
.crumbs{font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px}.crumbs a{font-weight:600}
.cathead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}.cathead h2{margin:0;display:flex;align-items:center;gap:10px}
.cathead h2 .ico{width:1.1em;height:1.1em}
.cathead h2:focus{outline:none}
.back{display:inline-block;margin-bottom:14px;font-weight:600;text-decoration:none}
.progrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.empty{color:var(--muted)}
article.pro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;border-top:5px solid var(--brown);display:flex;flex-direction:column;gap:var(--s1)}
article.pro h3{margin:0 0 6px;font-size:var(--fs-md)}
article.pro p{margin:6px 0;font-size:.95rem}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);background:var(--green-tint);color:var(--green);margin:0 6px var(--s1) 0}
.badge.lic{background:var(--cream);color:var(--brown);box-shadow:inset 0 0 0 1px var(--line)}
.vouch{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.9rem;font-weight:600;color:var(--green)}
.vouch .ico{color:var(--brick)}
.tag{display:inline-block;font-size:.72rem;font-weight:500;padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-soft)}
.pbtns{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s2) 0}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.own{font-size:var(--fs-xs);color:var(--muted)}
.catfoot{display:flex;gap:var(--s5);flex-wrap:wrap;justify-content:space-between;background:var(--cream);border-radius:var(--r-md);padding:var(--s4) 20px;margin:22px 0 10px;font-size:.95rem}
.probanner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);border-left:6px solid var(--brass);border-radius:var(--r-md);padding:22px 26px;margin-top:28px}
.probanner h3{margin:0 0 var(--s1)}.probanner p{margin:0}
.solo{max-width:640px}

/* ---------- Forms ---------- */
.joinform{display:grid;gap:14px}
.joinform label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.joinform input,.joinform select,.joinform textarea{padding:var(--s3) 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-weight:400;background:var(--surface)}
.joinform input:focus,.joinform select:focus,.joinform textarea:focus{outline:3px solid var(--brass-light);border-color:var(--brown)}
.joinform :user-invalid{border-color:var(--brick);background:var(--brick-tint)}
.joinform label:has(:user-invalid)>span:after{content:" Please fill this in";color:var(--brick);font-weight:500;font-size:var(--fs-xs)}
.joinform .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.joinform .chk input{margin-top:4px}
.tagset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.tagset legend{font-weight:600;font-size:.92rem;margin-bottom:var(--s2);width:100%}
.tagbox{display:inline-flex!important;align-items:center;cursor:pointer}
.tagbox input{position:absolute;opacity:0;width:1px;height:1px}
.tagbox span{padding:9px 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);font-weight:500;background:var(--surface);font-size:.9rem;transition:background var(--t-fast)}
.tagbox input:checked+span{background:var(--green);color:var(--on-color);border-color:var(--green)}
.tagbox input:focus-visible+span{outline:3px solid var(--brass-light)}
#getlisted{scroll-margin-top:80px}

/* ---------- Signup panel ---------- */
.signup{background:var(--green);color:var(--on-color);border-radius:var(--r-lg);padding:36px;text-align:center}
.signup h2{color:var(--on-color)}
.signup .sign{background:var(--brown-dark);box-shadow:inset 0 0 0 2px var(--brown-dark),inset 0 0 0 3px var(--brass)}
.signup form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.signup input{padding:13px var(--s4);border-radius:var(--r-pill);border:0;min-width:260px;font-size:var(--fs-base)}
.signup .fine{color:var(--on-dark)}

/* ---------- Footer ---------- */
footer{background:var(--brown-dark);color:var(--on-dark);padding:36px 0;font-size:.92rem}
footer a{color:var(--on-dark-link)}
footer .cols{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footbrand{display:flex;gap:14px;align-items:flex-start}
.footmark{width:56px;height:56px;flex:none;color:var(--on-dark-link)}
.footmark .hud{stroke:var(--hudson)}
.footsmall{opacity:.8;font-size:var(--fs-xs)}

/* ---------- Toast ---------- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140px);background:var(--brown-dark);color:var(--on-color);padding:var(--s3) 18px;border-radius:var(--r-pill);font-size:.9rem;transition:transform var(--t-med);z-index:50;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Mobile ---------- */
@media(max-width:700px){
  header.site{position:static}
  header.site .wrap{min-height:58px}
  .brand{font-size:var(--fs-md)}.brand img{width:34px;height:34px}
  nav{width:100%;padding-bottom:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s2) 14px}
  nav a{margin:0;font-size:.9rem}
  nav a.navcta{padding:4px 10px}
  .lf{display:none}.ls{display:inline}
  .hero .text{padding-top:36px}
  .minitiles{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .minitile{padding:10px 12px;gap:8px;font-size:.92rem}
  .minitile .ico{width:22px;height:22px}
  section{padding:40px 0}
  .prosec{padding-top:18px}
  .tiles{grid-template-columns:1fr 1fr}.tile{padding:14px}
  .tlink .ico{width:30px;height:30px}
  .progrid{grid-template-columns:1fr}
  .catview{scroll-margin-top:10px}
  .card.season{scroll-margin-top:12px}
  .btn-sm{font-size:var(--fs-xs)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.narrow{max-width:760px}
.stack{display:grid;gap:var(--s5)}
#toast:not(.show){visibility:hidden}

/* --- copy revision: directory-first homepage --- */
.hero h1{max-width:820px;margin-inline:auto}
.heroacts{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);justify-content:center;align-items:center}
.btn-lg{padding:16px 30px;font-size:var(--fs-md)}
.textlink{font-weight:600}
.secthead .sub{margin:0;color:var(--muted)}
.secthead h2{margin-bottom:var(--s1)}
.minitiles{margin-top:var(--s5)}
.minitile .mtext{display:flex;flex-direction:column;line-height:1.3}
.minitile .mname{font-weight:600}
.minitile .tcount{font-weight:400}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.prose p,.prose li{max-width:65ch}
.prose h2{margin-top:var(--s6)}
.steps{padding-left:1.2em;display:grid;gap:var(--s3)}
.signup .emailfield{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font-size:var(--fs-sm);font-weight:600}
.signup form{align-items:flex-end}
footer .footnote{max-width:300px}
footer .cols{display:grid;grid-template-columns:1.4fr .9fr 1.1fr;gap:var(--s5) var(--s6);align-items:start}
footer .cols>div:last-child{grid-column:1/-1;border-top:1px solid rgba(233,220,203,.2);padding-top:var(--s4)}
footer .footnote{max-width:none}
@media(max-width:700px){footer .cols{grid-template-columns:1fr}}
.note.launch{margin:var(--s4) 0 var(--s5);max-width:720px}