/* Charleston Move Guide. Design system: "The Collection Day Card".
   White card stock, civic blue structure, flat town colors, square corners, no shadows. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2')}

:root{
  --blue:#14407a; --blue-deep:#0d2f5c; --zone-blue:#1c5aa8; --green:#23763e; --amber:#e0a526; --brick:#8a3b2e;
  --ink:#22262b; --ink-soft:#4a525c; --paper:#ffffff; --rule:#c9d3e0; --tint:#eef3f9;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --gutter:clamp(1rem,4vw,4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body);caret-color:var(--blue)}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
a{color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{color:var(--blue-deep);text-decoration-thickness:3px}
img,svg{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:10}

/* Masthead */
.mast{background:var(--blue);color:#fff}
.mast-in{display:flex;align-items:center;gap:.5rem 1.5rem;padding:1.1rem var(--gutter);flex-wrap:wrap}
.wordmark{font:800 clamp(1.6rem,3vw,2.5rem)/.9 var(--cond);text-transform:uppercase;color:#fff;text-decoration:none}
.wordmark:hover{color:#fff}
.mast nav{margin-left:auto}
.mast ul{display:flex;flex-wrap:wrap;gap:.25rem 1.6rem;list-style:none;margin:0;padding:0}
.mast nav a{font:800 1.2rem/1 var(--cond);text-transform:uppercase;color:#fff;text-decoration:none;padding:.55rem 0;display:inline-block;border-bottom:3px solid transparent}
.mast nav a:hover,.mast nav a[aria-current]{border-bottom-color:var(--amber)}
@media (max-width:40rem){.mast nav{margin-left:0;width:100%}.mast ul{gap:0 1.1rem}.mast nav a{font-size:1.05rem}}

/* Zone band: one flat color per town. It is the key for the color on the pages. */
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.zones a{font:800 1.15rem/1 var(--cond);text-transform:uppercase;text-decoration:none;color:#fff;padding:1.05rem .75rem;text-align:center}
.zones a:hover,.zones a[aria-current]{box-shadow:inset 0 -5px 0 rgba(255,255,255,.85)}
.z-blue{background:var(--zone-blue)}
.z-green{background:var(--green)}
.z-amber{background:var(--amber)}
.z-brick{background:var(--brick)}
.z-ink{background:var(--ink)}
.zones a.z-amber{color:var(--ink)}
.zones a.z-amber:hover,.zones a.z-amber[aria-current]{box-shadow:inset 0 -5px 0 var(--ink)}
@media (max-width:40rem){.zones{grid-template-columns:repeat(2,1fr)}.zones a{padding:.8rem .5rem;font-size:1.05rem}.zones a:last-child:nth-child(odd){grid-column:1/-1}}
.zone-blue{--zone:var(--zone-blue)}
.zone-green{--zone:var(--green)}
.zone-amber{--zone:var(--amber)}
.zone-brick{--zone:var(--brick)}

/* Page frame */
.page{flex:1;padding:clamp(1.5rem,4vw,3.25rem) var(--gutter) 4rem}
.lead{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem clamp(2rem,4vw,4rem)}
@media (min-width:62rem){.lead{grid-template-columns:minmax(0,1fr) 24rem;align-items:start}}
.main{min-width:0}
.crumbs{font-size:.875rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.crumbs a{color:inherit}
h1{font:800 clamp(2.5rem,6.2vw,5.25rem)/.95 var(--cond);text-transform:uppercase;color:var(--blue);margin:0 0 1.25rem;text-wrap:balance}
h1 .eyebrow{display:block;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1;color:var(--ink);margin-bottom:.5rem}
h1 .h1-main{display:block}
.answer{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;font-weight:600;max-width:46rem;margin:0}
.byline{font-size:.95rem;color:var(--ink-soft);margin:1rem 0 0}
.byline a{color:inherit}

/* Schedule cells */
.cells{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0;padding:0}
.cell{flex:1 1 calc(50% - .5rem);border:3px solid var(--blue);padding:.7rem .8rem 0;display:flex;flex-direction:column;min-height:7rem}
@media (min-width:48rem){.cell{flex-basis:calc(100%/var(--per,3) - .5rem)}}
.cell dt{font:600 .875rem/1.2 var(--body);color:var(--ink-soft)}
.cell dd{font:800 clamp(1.3rem,1.9vw,1.6rem)/1.02 var(--cond);text-transform:uppercase;color:var(--blue);overflow-wrap:break-word;margin:.4rem 0 .8rem;font-variant-numeric:tabular-nums}
.cell.long{flex-basis:100%}
@media (min-width:48rem){.cell.long{flex-basis:calc(100%/var(--per,3) - .5rem)}}
.cell.long dd{font:600 1rem/1.35 var(--body);text-transform:none;color:var(--ink)}
.cell .bar{background:var(--zone,var(--ink));margin:auto -.8rem 0;height:.85rem;transform-origin:left;animation:bar .7s cubic-bezier(.16,1,.3,1) both}
.cell:nth-child(2) .bar{animation-delay:.06s}
.cell:nth-child(3) .bar{animation-delay:.12s}
.cell:nth-child(4) .bar{animation-delay:.18s}
.cell:nth-child(5) .bar{animation-delay:.24s}
@keyframes bar{from{transform:scaleX(.12)}}
@media (prefers-reduced-motion:reduce){.cell .bar{animation:none}}

/* Quote card and button */
.cta{border:3px solid var(--ink);padding:1.5rem;margin:2rem 0;max-width:38rem}
.cta-kicker{font:800 1.9rem/1 var(--cond);text-transform:uppercase;margin:0 0 .75rem;color:var(--ink)}
.cta-pitch{margin:0 0 1.1rem}
.btn{display:block;background:var(--green);color:#fff;font:800 1.55rem/1 var(--cond);text-transform:uppercase;text-align:center;text-decoration:none;padding:1rem 1.2rem;transition:background .15s}
.btn:hover{background:#1a5c30;color:#fff}
.btn:active{background:#144a26}
.cta-disclosure{margin:.85rem 0 0;font-size:.875rem;color:var(--ink-soft);line-height:1.45}
.cta-disclosure a{color:inherit}
.quick{margin-top:1.25rem}
.side .cta{margin:0 0 1.5rem;max-width:none}
.side{display:none}
@media (min-width:62rem){.quick{display:none}.side{display:block;position:sticky;top:1.25rem}}

/* In this guide */
.toc{border-top:3px solid var(--blue);padding-top:.9rem;font-size:.95rem}
.toc h2{font:800 1.3rem/1 var(--cond);text-transform:uppercase;color:var(--ink);margin:0 0 .6rem}
.toc ol{margin:0;padding:0;list-style:none}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:.45rem 0;text-decoration:none;color:var(--ink)}
.toc a:hover{color:var(--blue);text-decoration:underline}

/* Reading column */
.prose{margin-top:3rem}
@media (min-width:62rem){.prose{font-size:1.125rem}}
.block{margin:0}
.block > *{max-width:38rem}
.block > table,.block > .list{max-width:60rem}
.block h2,.more h2{font:800 clamp(1.8rem,3vw,2.3rem)/1 var(--cond);text-transform:uppercase;color:var(--blue);margin:2.75rem 0 .8rem;text-wrap:balance;scroll-margin-top:1rem}
.zoned .block h2{border-top:3px solid var(--zone);padding-top:.7rem}
.block h3{font:700 1.15rem/1.3 var(--body);margin:1.75rem 0 .4rem}
.block p,.block ul,.block ol{margin:0 0 1.05rem}
.block ul,.block ol{padding-left:1.25rem}
.block li{margin-bottom:.35rem}
.block li::marker{color:var(--blue);font-weight:700}
.block table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;margin:1.25rem 0 1.5rem;font-size:1rem;font-variant-numeric:tabular-nums;border-top:3px solid var(--blue)}
.block th{font:800 1.05rem/1.1 var(--cond);text-transform:uppercase;color:var(--blue);text-align:left}
.block th,.block td{padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--rule);vertical-align:top;min-width:6.25rem}
.tip{display:inline-block;font:800 .9rem/1 var(--cond);text-transform:uppercase;background:var(--ink);color:#fff;padding:.2rem .45rem;margin-right:.35rem}
.qa h3{margin:1.4rem 0 .3rem}
.qa p{margin:0}
.bottom p{font-weight:600}
.how{border-top:3px solid var(--ink);margin-top:3rem;font-size:.95rem}
.how h2{font-size:1.4rem;color:var(--ink);margin-top:1rem}
.block .sources{padding-left:1.25rem}
.independence{font-size:.875rem;color:var(--ink-soft);max-width:46rem;margin:2.5rem 0 0}

/* Listings */
.list,.block ul.list{list-style:none;margin:0;padding:0;border-top:3px solid var(--blue)}
.list li{border-bottom:1px solid var(--rule);margin:0}
.list a{display:block;padding:.95rem 0;text-decoration:none;color:var(--ink)}
.list a:hover .t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.15em}
.list .t{display:block;font:800 clamp(1.35rem,2.4vw,1.75rem)/1.05 var(--cond);text-transform:uppercase;color:var(--blue)}
.list .d{display:block;font-size:.95rem;color:var(--ink-soft);margin-top:.4rem}
.more{max-width:60rem}
.more h2{color:var(--ink)}

/* Footer */
.foot{background:var(--tint);border-top:3px solid var(--blue);padding:2rem var(--gutter) 2.5rem;font-size:.95rem}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1.5rem 2rem;margin-bottom:1.75rem}
.footer-cols h2{font:800 1.2rem/1 var(--cond);text-transform:uppercase;color:var(--ink);margin:0 0 .5rem}
.footer-cols ul{list-style:none;padding:0;margin:0}
.footer-cols a{display:inline-block;padding:.3rem 0}
.foot p{max-width:46rem;margin:0 0 .75rem}
.footer-legal{font-size:.875rem;color:var(--ink-soft)}