:root{--ground:#f4f5f3;--surface:#fff;--ink:#1b2530;--muted:#5b6670;--navy:#123a63;--link:#1d5a8c;--rule:#dfe3e6;--red:#c8102e}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 Georgia,"Times New Roman",serif}
img{max-width:100%;height:auto}
a{color:var(--link)}
.mast{background:var(--surface);border-bottom:3px solid var(--navy)}
.mast-in{max-width:1100px;margin:0 auto;padding:14px 22px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.mast-brand{text-decoration:none;color:var(--navy);display:grid;gap:2px}
.mast-brand b{font:700 24px/1.1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.mast-brand b span{color:var(--red)}
.mast-brand small{font:600 12px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--link);letter-spacing:.02em}
.mast-banner{flex:1 1 380px;min-width:0;display:flex;gap:4px;height:84px}
.mast-banner img{flex:1;min-width:0;height:100%;object-fit:cover;border-radius:2px}
.mast-nav{max-width:1100px;margin:0 auto;padding:0 22px 10px;display:flex;flex-wrap:wrap;gap:4px 18px;font:600 14px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif}
.mast-nav a{text-decoration:none}
.mast-nav a:hover,.mast-nav a:focus-visible{text-decoration:underline}
.page{max-width:1100px;margin:0 auto;padding:28px 22px 48px}
.foot{max-width:1100px;margin:0 auto;padding:18px 22px 36px;border-top:1px solid var(--rule);font:13px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--muted)}
.foot a{color:var(--muted)}
h1,h2,h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--navy);text-wrap:balance}
/* inner pages: the Gatsby markup (two themes), given a readable measure */
[class*="whygoholder-module--holder"]{max-width:44rem!important;margin:0 auto!important;padding:24px 22px 40px!important;font-family:inherit!important;float:none!important;width:auto!important}
[class*="content-module--whygo__content"],.article{max-width:none!important;width:auto!important;float:none!important}
.whygo__archive{padding-left:1.1em}
.whygo__archive li{margin:0 0 6px}
.holder{max-width:44rem!important;margin:0 auto!important;padding:24px 22px 40px!important;font-family:inherit!important}
.holder h1{font-size:34px;line-height:1.15;margin:.2em 0 .3em}
.alignright{float:right;margin:4px 0 12px 18px}
.alignleft{float:left;margin:4px 18px 12px 0}
.aligncenter{display:block;margin:12px auto}
article::after{content:"";display:block;clear:both}
@media (max-width:560px){.alignright,.alignleft{float:none;display:block;margin:12px 0}}
@media (max-width:700px){.mast-banner{display:none}.mast-brand b{font-size:21px}body{font-size:16px}}
/* front page */
.lede{font-size:19px;max-width:44rem;margin:0 0 26px}
.hero h1{font-size:44px;line-height:1.08;margin:0 0 12px}
.hero{border-bottom:3px solid var(--navy);margin-bottom:26px}
.label{font:700 12px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:8px;margin:34px 0 18px}
.intro{color:var(--muted);font-size:15px;margin:-8px 0 16px}
.chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 36px}
.chapter h2{font-size:19px;margin:0 0 4px}
.chapter p{font-size:14.5px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.chapter ul,.grid4{list-style:none;margin:0;padding:0}
.chapter li{margin:0 0 8px;line-height:1.3}
.chapter li a,.grid4 a{font-size:15.5px;text-decoration:none}
.chapter li a:hover,.grid4 a:hover{text-decoration:underline}
.meta{display:block;font:12px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px}
@media (max-width:900px){.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.chapters,.grid4{grid-template-columns:1fr}.hero h1{font-size:34px}}
/* topic and list pages */
.list{list-style:none;margin:0;padding:0;max-width:44rem}
.list li{padding:14px 0;border-top:1px solid var(--rule)}
.list li:first-child{border-top:0}
.list h2{font-size:19px;margin:0 0 2px}
.list h2 a{text-decoration:none}
.list p{margin:4px 0 0;font-size:15.5px}
.crumb{font:13px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--muted);margin:0 0 6px}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0;font:600 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif}
.pager a{padding:7px 11px;border:1px solid var(--rule);background:var(--surface);text-decoration:none;border-radius:3px}
.pager a[aria-current]{background:var(--navy);border-color:var(--navy);color:var(--surface)}
a:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* Old posts carry wide data tables and bare URLs as link text; on a phone both
   used to stretch the page sideways and shrink every line of type with it. The
   table scrolls in its own box only where it cannot fit, so wide screens still
   show it whole. */
article{overflow-wrap:break-word}
@media (max-width:820px){article table{display:block;max-width:100%;overflow-x:auto}}

.holder{max-width:44rem!important;width:auto!important;margin:0 auto!important;padding:24px 22px 40px!important;font-family:inherit!important;line-height:inherit!important}
.holder main{max-width:none}
.holder article img{max-width:100%;height:auto}
/* the front page's list of guides: name, then what it covers */
.grid2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px}
.grid2 li{line-height:1.3}
.grid2 a{font:600 17px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;text-decoration:none}
.grid2 a:hover{text-decoration:underline}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}