*{box-sizing:border-box}body{margin:0;color:#30363c;font:15px Arial,Helvetica,sans-serif;background:white}a{color:#176baa;text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #bdc9d2;border-radius:3px;background:#fff;color:#235a81;padding:9px 13px}button:hover{background:#edf4f9}header{height:88px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8e0e6}.brand{display:flex;gap:14px;align-items:center;color:#244967}.brand strong{font-size:25px;font-weight:500}.brand small{display:block;margin-top:7px;letter-spacing:2px;font-size:10px;color:#677784}.seal{border:2px solid #557e9e;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font:30px Georgia}nav{display:flex;gap:28px}.searchbar{background:#f0f4f7;border-bottom:1px solid #cfdbe4;padding:12px 30px;display:flex;gap:12px;position:sticky;top:0;z-index:10}form{display:flex;gap:8px;width:100%;max-width:1100px;margin-left:auto}select,input{border:1px solid #bac8d3;padding:11px;border-radius:3px;background:white;color:#344957}form>button{background:#2676ae;color:white;border-color:#2676ae}input{width:100%}.search-wrap{position:relative;flex:1}#suggestions{position:absolute;left:0;right:0;top:calc(100% + 5px);max-height:440px;overflow:auto;background:#fff;border:1px solid #bac8d3;border-radius:4px;box-shadow:0 8px 25px #163e6529;z-index:20}.suggestion{padding:12px 15px;cursor:pointer;border-bottom:1px solid #e8edf1;color:#263d50}.suggestion small{display:block;color:#71808b;margin-bottom:5px}.suggestion.active,.suggestion:hover{background:#edf5fb}.suggestion p{margin:6px 0 0;font-size:12px;color:#606e79;line-height:1.4}.suggest-footer{padding:12px;color:#176baa;background:#f7f9fb;cursor:pointer}.layout{display:grid;grid-template-columns:310px minmax(0,1fr)}aside{border-right:1px solid #d7e0e7;background:#f8fafb;padding:20px 0;position:sticky;top:69px;height:calc(100vh - 69px);overflow:auto}.side-title{font-size:11px;color:#6e7f8c;letter-spacing:1.6px;padding:0 22px 15px}.group-title{padding:14px 20px;font-weight:bold;color:#4c6273;border-top:1px solid #e2e8ed}details>summary{cursor:pointer;list-style:none;padding:11px 18px;font-size:13px;line-height:1.5}details>summary:before{content:'▸';margin-right:8px;color:#5f7c94}details[open]>summary:before{content:'▾'}details[open]>summary{background:#e9f1f7;color:#176baa}aside button{display:block;width:100%;text-align:left;border:0;border-radius:0;background:transparent;padding:9px 16px 9px 35px;font-size:12px;line-height:1.5}aside button.active{background:#dbeaf6;border-left:3px solid #2676ae}.source-note{margin:25px 22px;color:#71818c;font-size:12px;line-height:1.8}main{padding:25px 42px 60px;max-width:1250px;min-width:0}.crumb{color:#7b8892;font-size:12px;margin-bottom:25px}.crumb a{margin-right:7px}h1{font-size:28px;font-weight:500;color:#375871;margin:0 0 12px;line-height:1.3}.edition{color:#72808b;font-size:12px}.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #d8e1e7;padding:18px 0;margin-bottom:24px}.chapter-index{background:#f8fafb;border:1px solid #dce5ec;padding:18px 22px;margin:20px 0 30px}.chapter-index a{display:block;padding:6px 0;font-size:14px}.code-section{padding:20px 0;border-bottom:1px solid #e0e5e9;scroll-margin-top:90px}.code-section h2{font-size:20px;color:#256c9e;font-weight:500;line-height:1.5;margin:0 0 12px}.section-tools{float:right;display:flex;gap:8px}.section-tools button{font-size:11px;padding:5px 8px}.text{white-space:pre-wrap;line-height:1.85;font-size:15px;overflow-wrap:anywhere}.result{padding:22px 0;border-bottom:1px solid #dce4eb}.result h2{font-size:19px;font-weight:500}.result p{line-height:1.7}.result small{color:#74828e}mark{background:#fff0a6;color:inherit}.empty{padding:30px;background:#f7f9fb}.skip{position:absolute;left:-9999px}.skip:focus{left:5px;top:5px;background:white;z-index:99;padding:10px}footer{border-top:1px solid #dce4eb;padding:20px 32px;color:#74828d;font-size:12px}#mobile{display:none}@media(max-width:850px){header{padding:15px;height:auto}header nav{display:none}.brand strong{font-size:20px}.searchbar{padding:10px;flex-wrap:wrap}form{flex-wrap:wrap}select{max-width:160px}.layout{display:block}aside{display:none;position:relative;top:0;height:auto;max-height:50vh}aside.show{display:block}#mobile{display:block}main{padding:24px 20px}h1{font-size:24px}}@media print{header,.searchbar,aside,.tools,.section-tools,.chapter-index,footer{display:none}.layout{display:block}main{padding:0;max-width:none}.code-section{break-inside:auto}.text{font-size:11pt}h2{break-after:avoid}}

.table-text{font:13px/1.7 monospace;white-space:pre;overflow:auto}.section-tools a{font-size:11px;padding:5px 8px}.code-section h2{padding-right:160px}@media(max-width:650px){.section-tools{float:none;margin-bottom:10px}.code-section h2{padding-right:0}}

/* Alternate bylaw sections for easier reading. */
.code-section{background:#ffffff;padding:20px 18px;}
.code-section:nth-of-type(even){background:#f0f7ed;}
@media print{.code-section{background:#ffffff;padding:20px 0;}}

/* Prominent town heading without the circular monogram. */
header{height:auto;min-height:112px;}
.brand strong{font-size:36px;line-height:1.2;font-weight:600;}
.brand small{font-size:24px;line-height:1.3;letter-spacing:1.5px;margin-top:9px;}
@media(max-width:850px){.brand strong{font-size:30px;}.brand small{font-size:19px;letter-spacing:1px;}}
@media(max-width:420px){.brand strong{font-size:27px;}.brand small{font-size:17px;}}

/* Dark Canton green header with readable white lettering. */
header{background:#174b3b;border-bottom-color:#103b2d;}
header .brand,header .brand small,header nav a{color:#ffffff;}
header nav a:hover{color:#e0efdf;}

/* Legal reference reading typography. */
main{max-width:1300px;padding:36px 48px 72px}
main>h1{font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:600;line-height:1.3;color:#173f32;letter-spacing:.01em}
.code-section{padding:28px 32px;border-bottom:1px solid #dce5dd}
.code-section h2{font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.45;font-weight:600;margin-bottom:20px}
.code-section h2 a{color:#214e3c}
.text:not(.table-text){font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.85;white-space:normal;overflow-wrap:break-word;max-width:78ch;color:#222c27}
.text:not(.table-text) p{margin:0 0 1.1em;text-align:justify;text-justify:inter-word;hyphens:auto;orphans:3;widows:3}
.text:not(.table-text) p:last-child{margin-bottom:0}
.chapter-index{background:#f7f9f6;border-color:#dbe4d9;border-left:3px solid #53765b;padding:20px 24px}
.chapter-index a{color:#28563e;line-height:1.6;padding:7px 0}
.edition,.crumb{line-height:1.6}.section-tools{margin-left:18px;margin-bottom:10px}
.table-text{font-size:13px;line-height:1.8}
@media(max-width:850px){main{padding:26px 18px 48px}.code-section{padding:22px 18px}main>h1{font-size:27px}}
@media(max-width:600px){.text:not(.table-text){font-size:16px;line-height:1.75}.text:not(.table-text) p{text-align:left;hyphens:none}.code-section h2{font-size:20px}}
@media print{main{padding:0}.text:not(.table-text){font-size:11pt;line-height:1.6}.code-section{padding:18px 0}.text:not(.table-text) p{text-align:justify}}

/* Keep the town heading and search controls available while reading. */
:root{--bylaw-header-height:112px}
header{position:sticky;top:0;z-index:30}
.searchbar{top:var(--bylaw-header-height);z-index:25}
aside{top:calc(var(--bylaw-header-height) + 69px);height:calc(100vh - var(--bylaw-header-height) - 69px)}
.code-section{scroll-margin-top:calc(var(--bylaw-header-height) + 90px)}
@media(max-width:850px){aside{position:relative;top:0;height:auto;max-height:50vh}}
@media print{header,.searchbar{position:static}}

/* Give mobile search its own full-width line and generous touch target. */
@media(max-width:850px){
 header{position:static}
 .searchbar{position:static;top:auto}
 .code-section{scroll-margin-top:20px}
 .searchbar{gap:10px;padding:12px}
 .searchbar form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0;width:100%}
 .searchbar .search-wrap{grid-column:1 / -1;grid-row:1;min-width:0;width:100%}
 .searchbar #query{display:block;width:100%;min-height:56px;padding:15px 16px;font-size:18px;line-height:1.35}
 .searchbar #scope{grid-column:1;grid-row:2;max-width:none;min-width:0;width:100%;min-height:46px;font-size:16px}
 .searchbar form>button{grid-column:2;grid-row:2;min-height:46px;padding:10px 18px;font-size:16px}
 #suggestions{max-height:40vh}
}