@import url('/_assets/fonts/fonts.css');
:root{--ink:#20304a;--blue:#243f72;--muted:#52627c;--tan:#e3c7a2;--tan-line:#ad8e6b;--soft:#eaf1fb;--paper:#ffffff;--line:#b9c6d8;--cream:#fff;--green:#243f72;--sage:#eaf1fb;--accent:#243f72;font-family:'Karla',Arial,sans-serif;font-size:17px;color:var(--ink);background:white;scrollbar-color:#6b82a5 #eaf1fb}*{box-sizing:border-box}html{scroll-padding-top:28px}body{margin:0}::selection{color:var(--blue);background:var(--tan)}a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}button,input,select,textarea{font:inherit;caret-color:var(--blue)}a,button,summary,input,select,textarea{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #243f72;outline-offset:5px}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:'Epilogue',Arial,sans-serif;font-weight:600;line-height:1.16;letter-spacing:-.03em;text-wrap:balance;color:var(--blue)}h1{font-size:clamp(40px,4.2vw,62px)}h2{font-size:30px}h3{font-size:25px}p{line-height:1.8}img{max-width:100%;height:auto;display:block}header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 5%;border-bottom:1px solid var(--line)}header .wordmark{font-family:'Epilogue',Arial,sans-serif;font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.03em;color:var(--blue);text-decoration:none}header .wordmark span{font-family:'Karla',Arial,sans-serif;display:block;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:8px}nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}header nav a:hover{box-shadow:inset 0 -2px var(--blue)}.record-opening{display:grid;grid-template-columns:minmax(210px,.65fr) minmax(0,1.8fr);gap:7%;padding:38px 5% 34px;align-items:start}.record-index{display:block;background:var(--tan);padding:24px 28px}.record-index h2{font-size:23px;line-height:1.3;margin-bottom:20px}.record-index a{display:block;padding:14px 0;min-height:44px;border-top:1px solid var(--tan-line);font-weight:600;font-size:17px;line-height:1.5}.record-index a:hover{text-decoration:underline}.opening-copy{padding-top:4px}.opening-copy h1{max-width:24ch}.opening-copy .intro{font-size:19px;line-height:1.75;margin:26px 0 18px;max-width:67ch}.review-note{font-size:14px;color:var(--muted);line-height:1.7;max-width:78ch}.record-photo{padding:0 5%;max-width:1600px;margin:auto}.record-photo img{width:100%;height:275px;object-fit:cover;object-position:center 47%}.record-photo figcaption{font-size:12px;color:var(--muted);line-height:1.7;margin-top:10px}.essential-answer{max-width:1260px;margin:auto;padding:40px 5%;display:grid;grid-template-columns:1fr 1.6fr;gap:16px 7%;scroll-margin-top:28px}.essential-answer h2{font-size:28px;grid-row:1/4}.essential-answer p{font-size:17px;line-height:1.8;color:var(--muted);max-width:72ch}.essential-answer .useful-links{grid-column:2;margin:0}.facts{display:flex;flex-wrap:wrap;gap:24px;padding:24px 5%;border-block:1px solid var(--line)}.facts>div{flex:1;min-width:180px}.facts span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.facts strong{font-size:15px;font-weight:600;line-height:1.5}.article-discovery{padding:36px 5%;background:var(--soft)}.article-discovery>h2{font-size:28px;margin-bottom:24px}.article-card{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.8fr);gap:7%;align-items:center;max-width:1200px}.article-card img{width:100%;height:auto;aspect-ratio:1.7;object-fit:cover}.article-card h2,.article-card h3{font-size:28px;line-height:1.25;margin:12px 0 16px;max-width:36ch}.article-card p{font-size:17px;line-height:1.75;color:var(--muted);margin-bottom:18px;max-width:75ch}.article-meta,.article-caption{font-size:13px;color:var(--muted);line-height:1.7}.article-card>div>a{font-weight:600;font-size:16px;display:inline-block;min-height:44px;padding:10px 0}.roofing-tools{padding:44px 5%;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:7%;background:var(--blue);color:white;scroll-margin-top:28px}.tool-context{align-self:start;position:sticky;top:28px}.tool-context h2{font-size:34px;color:white;margin-bottom:24px}.tool-context p{font-size:17px;line-height:1.8;color:#d2dff2;margin-bottom:24px}.tool-help{font-size:16px;min-height:44px;display:inline-block;padding:10px 0;color:#fff}.tool-help:focus-visible{outline-color:var(--tan)}.roofing-calculator{padding:28px;background:white;color:var(--ink);min-width:0}.roofing-calculator label{display:block;font-size:15px;font-weight:600;line-height:1.5;margin:16px 0 8px}.roofing-calculator input,.roofing-calculator select{width:100%;min-width:0;max-width:100%;padding:12px;background:white;color:var(--ink);border:1px solid var(--muted);border-radius:0;min-height:48px;font-size:17px;font-variant-numeric:tabular-nums}.roofing-calculator input::placeholder{color:var(--muted);opacity:1}.roofing-input-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.roofing-small{font-size:14px;line-height:1.75;color:var(--muted);margin:16px 0}.roofing-result{display:block;white-space:pre-line;line-height:1.8;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin-top:22px}.roofing-result:not(:empty){padding:22px;background:var(--soft)}.roofing-tools>noscript{grid-column:1/-1;font-size:15px}.roofing-calculator .button{margin:12px 12px 0 0;max-width:100%}.roofing-calculator #new-roof-example{background:var(--soft);color:var(--blue)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:0;background:var(--blue);color:white;cursor:pointer;font-weight:600;font-size:16px;line-height:1.5;text-decoration:none}.button:disabled{opacity:.65;cursor:wait}.guide-layout{max-width:1260px;margin:auto;padding:52px 5%;display:grid;grid-template-columns:250px minmax(0,1fr);gap:8%}.guide-layout aside{align-self:start;position:sticky;top:28px;max-height:calc(100vh - 56px);overflow:auto;padding-right:10px;scrollbar-width:thin}.guide-layout aside h2{font-size:27px;margin-bottom:20px}.guide-contents summary{padding:13px 0;cursor:pointer;font-size:15px;font-weight:600;min-height:44px;border-block:1px solid var(--line)}.guide-layout ol{padding:10px 0 0 20px;margin:0;font-size:14px;line-height:1.6}.guide-layout li{padding:5px 0}.guide-layout aside a{display:block;padding:5px 0;text-decoration:none}.guide-layout aside a:hover{text-decoration:underline}.guide-layout small{font-size:13px;color:var(--muted);display:block;line-height:1.7;margin-top:24px}.guide-section{padding-bottom:30px;margin-bottom:36px;border-bottom:1px solid var(--line);scroll-margin-top:28px}.guide-section h2{font-size:28px;max-width:34ch;margin-bottom:20px}.guide-section p{font-size:17px;line-height:1.85;color:var(--muted);max-width:72ch;margin:16px 0}.useful-links{padding:0;list-style:none;margin:24px 0 0}.useful-links:empty{display:none}.useful-links li{padding:0}.useful-links a{display:block;font-size:15px;line-height:1.6;padding:12px 0;border-top:1px solid var(--line);color:var(--blue);overflow-wrap:anywhere}.answer-faq{padding:16px 0;margin-bottom:20px}.answer-faq summary{cursor:pointer;min-height:44px;line-height:1.6}.answer-faq summary h2{display:inline;font-size:23px}.answer-faq p{margin-top:18px}.related-sites{padding:30px 5%;max-width:1260px;margin:auto;border-top:1px solid var(--line)}.related-sites h2{font-size:26px;margin-bottom:20px}.related-sites ul{display:flex;flex-wrap:wrap;gap:12px 24px;padding:0;list-style:none;margin:0}.related-sites a{font-size:15px;line-height:1.8}.editorial-note{background:var(--soft);padding:40px max(5%,calc((100vw - 1140px)/2))}.editorial-note h2{font-size:29px;margin-bottom:20px}.editorial-note p{font-size:16px;line-height:1.8;max-width:80ch}.editorial-note details{font-size:15px;line-height:1.8;margin-top:20px}.editorial-note summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:600}.editorial-note li{margin:10px 0}.editorial-note a{overflow-wrap:anywhere}.contact{background:var(--tan);color:var(--ink);padding:44px 5%;display:grid;grid-template-columns:1fr 1.2fr;gap:10%}.contact h2{font-size:40px}.contact>div p{font-size:17px;margin-top:24px;max-width:36ch}.contact label{display:block;font-size:15px;line-height:1.5;margin-bottom:8px}.contact input,.contact select,.contact textarea{width:100%;min-width:0;max-width:100%;padding:12px;background:white;color:var(--ink);border:1px solid var(--muted);border-radius:0;min-height:48px;font-size:17px}.contact select,.form-row{margin-bottom:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact textarea{resize:vertical;min-height:140px}.contact .consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.7;margin:20px 0}.contact .consent input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin:2px 0;accent-color:var(--blue)}#form-status{font-size:15px;line-height:1.7;margin-top:18px}.honeypot{position:absolute;left:-10000px}.privacy{max-width:1260px;margin:auto;padding:34px 5%}.privacy h2{font-size:24px;margin-bottom:16px}.privacy p{font-size:14px;line-height:1.8;color:var(--muted);max-width:95ch;margin:10px 0}footer{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding:24px 5%;font-size:13px;line-height:1.8;color:var(--muted)}footer .wordmark{font-family:'Epilogue',Arial,sans-serif;font-size:17px;font-weight:600;color:var(--blue);text-decoration:none;overflow-wrap:anywhere;min-width:0}footer>span{max-width:35ch}.skip{position:absolute;left:-9999px;top:8px;padding:14px;background:white;color:var(--blue);z-index:10}.skip:focus{left:8px}.eyebrow,.section-number{display:none}.article-head{padding:36px 5% 30px;max-width:1320px;margin:auto}.article-head h1{font-size:clamp(38px,4vw,56px);max-width:24ch}.article-head .intro{font-size:19px;line-height:1.75;margin:24px 0;max-width:65ch}.article-breadcrumb{font-size:14px;margin-bottom:24px;line-height:1.7}.article-list{padding:0 5% 48px;max-width:1320px;margin:auto}.article-figure img{width:100%;height:auto;aspect-ratio:1.4;object-fit:cover}.article-caption{margin-top:12px}.article-body{max-width:72ch;font-size:17px;margin:0 auto;padding:0 0 46px}.article-body p,.article-body li{line-height:1.85;color:var(--muted)}.article-body p{margin:18px 0}.article-body h2{font-size:28px;margin:36px 0 20px}.article-body ul{padding-left:24px}.article-body li{margin:10px 0}.article-related{border-top:1px solid var(--line);padding-top:24px;margin-top:30px!important;font-size:15px}.article-body a{overflow-wrap:anywhere}main>article{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:34px 6%;padding:0 5%;max-width:1440px;margin:auto}main>article .article-head{padding:36px 0 0;margin:0}main>article .article-figure{padding-top:45px;min-width:0;margin:0}main>article .article-body{grid-column:1/-1}.record-opening>*,.roofing-tools>*,.guide-layout>*,.essential-answer>*,.contact>*,.article-card>*,main>article>*{min-width:0}
@media(min-width:1600px){header,.record-opening,.facts,.article-discovery,.roofing-tools,.contact{padding-inline:max(5%,calc((100vw - 1440px)/2))}}
@media(max-width:1050px){.record-opening{gap:5%;grid-template-columns:220px minmax(0,1fr)}.record-index{padding:22px}.opening-copy h1{font-size:48px}.guide-layout{grid-template-columns:210px minmax(0,1fr);gap:5%}.roofing-tools{gap:5%;grid-template-columns:.65fr 1.5fr}.tool-context h2{font-size:28px}.roofing-calculator{padding:22px}.article-card h2,.article-card h3{font-size:25px}.contact{gap:6%}}
@media(max-width:760px){header{display:block;padding:22px 6%}header .wordmark{font-size:28px;display:inline-block}header nav{margin-top:18px;font-size:14px;gap:4px 20px}.record-opening{display:flex;flex-direction:column-reverse;padding:28px 6%;gap:26px}.opening-copy h1{font-size:clamp(37px,9vw,48px);max-width:22ch}.opening-copy .intro{font-size:18px;margin:22px 0 16px}.review-note{font-size:14px}.record-index{width:100%;padding:22px}.record-index h2{font-size:22px;margin-bottom:16px}.record-index a{font-size:16px;padding:12px 0}.record-photo{padding:0 6%}.record-photo img{height:auto;aspect-ratio:1.6;object-position:center}.essential-answer{display:block;padding:30px 6%}.essential-answer h2{font-size:26px;margin-bottom:20px}.essential-answer p{margin:16px 0}.facts{padding:24px 6%;gap:20px}.facts>div{min-width:125px}.article-discovery{padding:30px 6%}.article-discovery>h2{font-size:26px}.article-card{display:block}.article-card img{max-width:100%;aspect-ratio:1.8;margin-bottom:20px}.article-card h2,.article-card h3{font-size:26px}.roofing-tools{display:block;padding:32px 6%}.tool-context{position:static;margin-bottom:24px}.tool-context h2{font-size:29px}.tool-context p{font-size:17px;margin-bottom:12px}.roofing-calculator{padding:20px}.roofing-input-pair{gap:14px}.roofing-calculator label{font-size:14px}.roofing-calculator .button{width:100%;margin-right:0}.roofing-result:not(:empty){padding:18px}.guide-layout{display:block;padding:34px 6%}.guide-layout aside{position:static;max-height:none;padding:0;margin-bottom:32px}.guide-layout ol{font-size:15px}.guide-section h2{font-size:26px}.guide-section p{font-size:17px;line-height:1.8}.answer-faq summary h2{font-size:22px}.related-sites{padding:28px 6%}.editorial-note{padding:30px 6%}.editorial-note h2{font-size:27px}.contact{display:block;padding:32px 6%}.contact h2{font-size:34px}.contact>div p{margin:20px 0 26px}.form-row{grid-template-columns:1fr;gap:18px}.contact .button{width:100%}.privacy{padding:30px 6%}footer{display:block;padding:24px 6%}footer>a,footer>span{display:block;margin:10px 0}.article-head{padding:28px 6%}.article-head h1{font-size:37px}.article-head .intro{font-size:18px}.article-list{padding:0 6% 32px}main>article{display:block;padding:0 6%}main>article .article-head{padding:28px 0}main>article .article-figure{padding:0;margin-bottom:28px}.article-figure img{aspect-ratio:1.7}.article-body{padding-bottom:32px}.article-body h2{font-size:26px}.article-body p,.article-body li{font-size:17px;line-height:1.8}}
@media(max-width:420px){.roofing-input-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}header nav a{transition:box-shadow .16s ease-out}}
@media print{header nav,.contact,.skip{display:none}.record-opening,.roofing-tools,.guide-layout,main>article{display:block}.record-index,.tool-context,.guide-layout aside{position:static;max-height:none}.roofing-tools{color:var(--ink);background:white}.tool-context h2,.tool-context p,.tool-help{color:var(--ink)}}