/* Project Hometown SC — shared styles for content pages.
   Design system extracted from the town sites (Labrada + Droid Sans, teal
   headings, square coral CTAs, deep-brown nav). See DESIGN-SYSTEM.md. */

:root{
  --brown:#2A110A; --warm:#463530; --teal:#3C6670; --coral:#E25C34; --rust:#AE310B;
  --gold:#F1BD43; --blue:#0D92BF; --sage:#D6E7A2; --cream:#FBF7F0; --line:#E8DFD2;
  --body:#463530; --serif:'Labrada',Georgia,serif; --sans:'Droid Sans',Arial,sans-serif; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--teal);margin:0;line-height:1.18}
h1{font-size:clamp(34px,5vw,54px);color:#fff}
h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
h3{font-size:21px;margin-bottom:8px}
h4{font-size:17px;margin-bottom:6px}
p{margin:0 0 1.1em}
a{color:inherit}
em{font-style:italic;color:var(--coral)}
strong{font-weight:700}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.btn{display:inline-block;padding:15px 28px;border:0;border-radius:0;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:opacity .15s,transform .15s}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn-primary{background:var(--coral);color:#fff}
.btn-ghost{background:#fff;color:var(--rust);box-shadow:inset 0 0 0 1.5px currentColor}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--coral);margin-bottom:14px}

/* nav */
header.nav{position:sticky;top:0;z-index:60;background:var(--brown);color:#fff}
.nav-in{display:flex;align-items:center;gap:24px;height:74px}
.lockup{display:inline-block;text-decoration:none;line-height:1;color:#fff;white-space:nowrap}
.lockup .kicker{font-family:var(--sans);font-weight:700;font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-bottom:4px}
.lockup .mark{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:-.015em}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:14px}
.nav-links a{text-decoration:none;opacity:.9;white-space:nowrap}
.nav-links a:hover{opacity:1;color:var(--gold)}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}
@media(max-width:1000px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;background:var(--brown);flex-direction:column;padding:18px 24px;gap:16px}
  .burger{display:block}
}
@media(max-width:600px){.lockup .mark{font-size:20px}.lockup .kicker{font-size:7.5px;letter-spacing:.16em}}

/* page header */
.page-head{background:var(--brown);color:#fff;padding:70px 0 74px;position:relative;overflow:hidden}
.page-head .bg{position:absolute;inset:0;background-size:cover;background-position:center 55%}
.page-head .scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(42,17,10,.95) 0%,rgba(42,17,10,.88) 38%,rgba(42,17,10,.6) 100%)}
.page-head .inner{position:relative}
.page-head p.lead{color:rgba(255,255,255,.9);max-width:660px;margin-top:16px;font-size:19px}

/* breadcrumbs */
.crumbs{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:14px}
.crumbs a{text-decoration:none;color:inherit}
.crumbs a:hover{color:var(--gold)}

section{padding:70px 0}
.alt{background:var(--cream)}

/* answer-first callout — the direct fact, up top, for AI extraction */
.answer{background:var(--cream);border-left:4px solid var(--coral);padding:22px 26px;margin:0 0 30px;font-size:18px}
.answer p:last-child{margin-bottom:0}
.alt .answer{background:#fff}

/* fact table */
.facts{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15.5px}
.facts th,.facts td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.facts th{font-family:var(--serif);color:var(--teal);font-weight:700;width:38%}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-weight:700;font-size:19px;color:var(--teal);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding-top:12px;color:#5d4e47}
.faq .a p:last-child{margin-bottom:0}

/* cards */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);padding:26px 24px}
.alt .card{background:#fff}

/* story cards */
.story{background:#fff;border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;height:100%}
.story .town-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:10px}
.story h3{font-size:19px;line-height:1.35;margin-bottom:10px}
.story .who{font-size:13.5px;color:#8a7a72;margin-bottom:12px}
.story blockquote{margin:0 0 12px;font-size:15.5px;color:#5d4e47;font-style:italic;border-left:3px solid var(--sage);padding-left:14px}
.story .more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:700;color:var(--rust);text-decoration:none}
.story .more:hover{color:var(--coral);text-decoration:underline}

/* "Official community site" callout — sits HIGH on every town page.
   Strategy: this site is the discovery/research layer; the community sites are
   the official destination to apply. Always route the visitor onward. */
.official{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  background:var(--brown);color:#fff;padding:24px 26px;margin:0 0 30px}
.official .txt{flex:1;min-width:260px}
.official .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:6px}
.official p{margin:0;color:rgba(255,255,255,.85);font-size:15.5px}
.official strong{color:#fff}
.official .btn{white-space:nowrap}

/* inline "apply on the community site" nudge used mid-page */
.nudge{background:var(--cream);border-left:4px solid var(--gold);padding:18px 22px;margin:26px 0;font-size:16px}
.alt .nudge{background:#fff}
.nudge p{margin:0}
.nudge a{color:var(--rust);font-weight:700}

/* town CTA band — always link William's community site prominently */
.town-cta{background:var(--brown);color:#fff;padding:54px 0}
.town-cta h2{color:#fff}
.town-cta p{color:rgba(255,255,255,.82);max-width:640px}

.band{background:var(--coral);color:#fff;text-align:center;padding:64px 0}
.band h2{color:#fff}

ul.clean{margin:0 0 1.1em;padding-left:20px}
ul.clean li{margin-bottom:9px}

.src{font-size:12.5px;color:#8a7a72;margin-top:-8px}
.src a{color:var(--rust)}

/* footer */
footer{background:var(--brown);color:rgba(255,255,255,.86);padding:56px 0 34px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{color:#fff;font-size:15px;margin-bottom:12px}
.foot-grid a{display:block;text-decoration:none;opacity:.82;margin-bottom:8px}
.foot-grid a:hover{opacity:1;color:var(--gold)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:34px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;opacity:.72}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:18px;font-size:12px;line-height:1.6;opacity:.6;max-width:960px}
.legal p{margin:0 0 8px}
.legal strong{font-weight:700;opacity:.95}