/* townzips.com site styles. Base rules copied from the approved drawings (design-brief/drawings/html, preview v4, Chair yes 2026-10-21); build additions follow the marker below. */
:root{--ink:#17231D;--muted:#4E5B54;--rule:#DCE3DE;--ground:#F6F8F6;--card:#FFFFFF;--pine:#1E5641;--pine2:#123A2B;--pinet:#E4EEE8;--coral:#E8684A;--coralt:#B4432A;--logo:#C9502F;--tint:#FCE9E3;--tintb:#F2C3B5;--fieldb:#B9C5BE;--bandp:#D6E6DC;
--s1:14px;--s2:16px;--s3:20px;--s4:28px;--serif:'Literata',Georgia,serif;--sans:'Albert Sans',system-ui,sans-serif}
@media (min-width:1024px){:root{--s2:17px;--s3:26px;--s4:44px}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--s2);line-height:1.5}
html,body{overflow-x:clip}
a{color:var(--pine);text-underline-offset:3px;text-decoration-color:rgba(30,86,65,.4)}a:hover{color:var(--pine2);text-decoration-color:currentColor}
button,input{font:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
@media (min-width:1024px){.wrap{padding:0 40px}}
header.site{background:var(--card);border-bottom:6px solid var(--pine)}
header.site.home{border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.mark{font-family:var(--serif);font-weight:700;font-size:var(--s3);color:var(--ink);text-decoration:none;letter-spacing:-0.01em}
.mark span{color:var(--logo)}
header nav{display:flex;gap:20px;font-size:var(--s1)}
header nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none}
header nav a:hover{color:var(--pine)}
.crumb{font-size:var(--s1);color:var(--muted);margin:20px 0 8px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumb li+li::before{content:'/';margin-right:8px;color:var(--muted)}
.crumb a{color:var(--pine)}
h1{font-family:var(--serif);font-size:var(--s4);line-height:1.12;font-weight:700;margin:0 0 14px;letter-spacing:-0.01em}
h2{font-family:var(--serif);font-size:var(--s3);line-height:1.25;font-weight:600;margin:0 0 14px;letter-spacing:-0.005em}
h3{font-size:var(--s2);font-weight:600;margin:0 0 4px}
p{margin:0 0 12px}
.num,.zip,td.z,.zips{font-variant-numeric:tabular-nums}
.grid{display:block}
@media (min-width:1024px){.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:48px}.grid>*{grid-column:1}.grid>.rail{grid-column:2;grid-row:1/span 30;align-self:start;margin-top:8px}}
.answer{margin-bottom:12px}
.zipchips{display:inline}
button.zip{display:inline-block;border:1px solid var(--tintb);background:var(--tint);border-radius:7px;padding:0 5px;margin:0;cursor:pointer;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
button.zip:hover{border-color:var(--coralt)}button.zip .ic{margin-left:3px;vertical-align:-1px;color:var(--coralt)}
.ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.facts{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px;margin:0 0 20px}
.facts dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px}
.facts dt{font-size:var(--s1);color:var(--muted)}
.facts dd{margin:0;font-weight:500}
.src{font-size:var(--s1);color:var(--muted);margin:12px 0 0}
.benefit{margin:8px 0 12px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--tintb);border-radius:22px;background:var(--card);text-decoration:none;font-weight:600;font-size:var(--s1);color:var(--ink)}
.chips a:hover{background:var(--tint)}
section.blk{margin:0 0 48px;scroll-margin-top:16px}
form.lookup{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.num{flex:0 0 120px}.field.grow{flex:1 1 220px}
label{font-size:var(--s1);font-weight:600;color:var(--ink)}
input[type=text],input[type=search]{min-height:52px;border:1px solid var(--fieldb);border-radius:10px;padding:0 14px;width:100%;background:var(--card)}
input:focus{outline:3px solid var(--pinet);border-color:var(--pine)}
.primary{min-height:52px;padding:0 24px;border:0;border-radius:10px;background:var(--pine);color:#fff;font-weight:600;cursor:pointer}
.primary:hover{background:var(--pine2)}
.secondary{min-height:44px;padding:0 16px;border:1.5px solid var(--pine);border-radius:10px;background:var(--card);color:var(--pine);font-weight:600;cursor:pointer}
.secondary:hover{background:var(--pinet)}
.result{min-height:132px;margin:16px 0 20px}
form .secondary{min-height:52px}
.card{background:var(--tint);border:1px solid var(--tintb);border-radius:12px;padding:20px}
.card .big{font-size:var(--s4);font-weight:600;line-height:1.1;color:var(--coralt)}
.card .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.card .acts a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;padding:0 6px}
.empty{background:var(--card);border:1px dashed var(--fieldb);border-radius:12px;padding:20px;color:var(--muted);font-size:var(--s1)}
.notice{background:var(--pinet);border-top:3px solid var(--pine);border-radius:10px;padding:16px 20px}
.map{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#F2F5F3}
table{border-collapse:collapse;width:100%}
th{font-size:var(--s1);color:var(--muted);text-align:left;font-weight:600;padding:8px;border-bottom:1px solid var(--rule)}
td{padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
td.z{font-weight:600}
tr.more{display:none}
@media (max-width:767px){table.zt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}table.zt tr{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
table.zt tr.more{display:none}table.zt td{border:0;padding:0}table.zt td.z{grid-row:1/span 2}}
.showall{margin-top:12px}
.two{display:block}
@media (min-width:1024px){.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:8px 0;border-bottom:1px solid var(--rule)}
.qa h3{margin-top:16px}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.ncard{display:block;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.ncard:hover{border-color:var(--pine)}
.ncard strong{display:block;font-weight:600;color:var(--ink)}
.ncard span{font-size:var(--s1);color:var(--muted)}
.more-line{margin-top:16px}
.cols{columns:2;column-gap:24px}
@media (min-width:1024px){.cols{columns:4}}
.cols li{break-inside:avoid}
.letters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.letters a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--rule);border-radius:8px;background:var(--card);text-decoration:none;font-weight:600}
.letters a:hover{border-color:var(--pine)}
details.grp{border-bottom:1px solid var(--rule)}
details.grp summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600}
.county{margin:0 0 24px}
.county ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px 24px}
@media (min-width:768px){.county ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.county ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.county li.more{display:none}
.reading{max-width:720px}
footer.site{background:var(--card);border-top:1px solid var(--rule);margin-top:56px;padding:36px 0 48px;font-size:var(--s1);color:var(--muted)}
footer .find{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:24px}
footer .find .field{flex:1 1 260px;max-width:520px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0 0 12px}
footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.lbl{font-weight:600;color:var(--ink);font-size:var(--s2);margin:0 0 8px}
main.home{display:block}
.band{background:var(--pine);color:#fff;padding:36px 0 44px;margin:0 0 48px}
@media (min-width:1024px){.band{padding:64px 0 72px;margin-bottom:64px}}
.band h1{color:#fff;margin-top:0}
.band p{color:var(--bandp);max-width:640px}
.band section.blk{margin:20px 0 0}
.band form.lookup{background:var(--card);border-radius:12px;padding:16px}
@media (min-width:768px){.band form.lookup{padding:20px}}
.band .primary{background:var(--coral);color:var(--ink)}
.band .primary:hover{background:#D9583A}
.band .src{color:var(--bandp)}.band .src a{color:#fff;font-weight:600}
.home .cards{gap:12px}
@media (min-width:1024px){.home .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.home .ncard span{color:var(--coralt);font-weight:600}
.home #states ul{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:12px 20px}
@media (min-width:1024px){.home #states ul{columns:5;padding:20px 28px}}
.home #states li{border:0;padding:5px 0}
.home #states a{color:var(--ink);text-decoration:none}.home #states a:hover{color:var(--pine);text-decoration:underline}

.band .src a{text-decoration-color:currentColor}
@media (max-width:767px){form.lookup .primary{flex:1 1 100%}.home .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.home .ncard{padding:14px}}
/* ---- build additions (zip-d1): fonts, row blocks, open states, suggestions, finder, print ---- */
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/literata-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/albert-sans-latin-wght-normal.woff2) format('woff2')}
.facts dl .row{display:contents}
table.zt.show tr.more{display:table-row}
@media (max-width:767px){table.zt.show tr.more{display:grid}}
.county.show li.more{display:block}
details.grp .zt tr.hide,table.zt tr.hide,.county li.hide{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.field.grow,.field.num{position:relative}
.sugg{position:absolute;left:0;right:0;top:100%;z-index:5;margin:4px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--fieldb);border-radius:10px;max-height:60vh;overflow:auto}
.sugg[hidden]{display:none}
.sugg li{margin:0}
.sugg button,.sugg a{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;color:var(--ink);text-decoration:none;font:inherit;overflow-wrap:anywhere}
.sugg button:hover,.sugg a:hover,.sugg .on{background:var(--pinet)}
/* at this width the submit button wraps onto its own line below the fields (form.lookup .primary above); keep the suggestion
   list in normal flow here too, so an open list pushes the button down instead of floating over it (Architect fix, 2026-10-21) */
@media (max-width:767px){.sugg{position:static;left:auto;right:auto;top:auto;margin:0}
/* the street field's in-flow suggestion list grows that field taller than the house-number field; align the row to the
   top so the house-number label and box stay level with the street field's instead of sliding down with flex-end (Architect fix, 2026-10-22) */
form.lookup{align-items:flex-start}}
.result:empty{border:1px solid var(--rule);border-radius:12px}
button.zip.done{border-color:var(--pine);background:var(--pinet)}
.card .note{font-size:var(--s1);color:var(--muted);margin:8px 0 0}
.card .big{overflow-wrap:anywhere}
.notice p{margin:0}
.map.mini{border:1px solid var(--tintb);background:#F2F5F3}
.recent{margin-top:16px}
.qa h3:first-of-type{margin-top:0}
.more-line{overflow-wrap:anywhere}
/* each post-office group on a hub page is its own table.zt, and the browser's automatic table layout sizes each one's
   columns independently, so the ZIP column drifts from group to group; fix every table.zt to the same column widths
   so they line up down the page. Below 768 the grid-template-columns rule above already fixes the ZIP column to 72px
   on every table.zt tr, so this is scoped to the real <table> rendering at 768 and up (Architect fix, 2026-10-22) */
@media (min-width:768px){table.zt{table-layout:fixed}table.zt th:first-child,table.zt td:first-child{width:100px}}
@media print{header.site,footer.site,.chips,.lookup,.map-pick,nav.crumb{display:none}body{background:#fff}}