/* The Williamson County 2040 Report — site layer.
   Colour and type come from brand.css, which is lifted from the printed book.
   Nothing here re-defines a brand token; it only arranges them. */

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{
  margin:0; background:var(--wc-paper); color:var(--wc-ink);
  font-family:var(--wc-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--wc-blue)}
hr{border:0}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:#fff; padding:10px 14px; border:2px solid var(--wc-blue)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ─── nav ─── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(252,252,250,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--wc-rule);
}
.navrow{display:flex; align-items:center; justify-content:space-between; gap:24px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.brandmark{width:30px; height:30px; display:block}
.brandtext{
  font-weight:600; font-size:.96rem; letter-spacing:.03em;
  color:var(--wc-ink); white-space:nowrap;
}
.brandtext b{color:var(--wc-blue-dark); font-weight:700}
.navlinks{display:flex; align-items:center; gap:24px}
.navlinks a{
  text-decoration:none; color:var(--wc-ink-2); font-size:.875rem; font-weight:500;
  padding:6px 0; border-bottom:1.5px solid transparent;
}
.navlinks a:hover{color:var(--wc-blue-dark); border-bottom-color:var(--wc-blue)}
.navlinks a.navcta{
  background:var(--wc-blue); color:#fff; border:0; border-radius:6px;
  padding:8px 16px; font-weight:600;
}
.navlinks a.navcta:hover{background:var(--wc-blue-dark); color:#fff}

/* ─── buttons ─── */
.btn{
  display:inline-block; font-family:var(--wc-sans); font-size:.9rem; font-weight:600;
  text-decoration:none; padding:12px 22px; border-radius:6px; border:1.5px solid transparent;
  transition:background .12s, color .12s, border-color .12s;
}
.btn-primary{background:var(--wc-blue); color:#fff}
.btn-primary:hover{background:var(--wc-blue-dark)}
.btn-ghost{background:transparent; color:var(--wc-blue-dark); border-color:var(--wc-dim)}
.btn-ghost:hover{border-color:var(--wc-blue); background:var(--wc-wash)}

/* ─── hero ─── */
.hero{background:var(--wc-pale); padding:64px 0 68px; border-bottom:1px solid var(--wc-dim)}
.herorow{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
h1.wc-display{margin:12px 0 0; font-weight:400; line-height:.98}
/* Two lines, as on the printed cover: the county in a lighter serif, the year
   heavy beneath it. .county is sized so it never breaks across lines. */
h1 .county{
  display:block; white-space:nowrap;
  font-size:clamp(1.72rem, 5.4vw, 3.7rem);
  color:var(--wc-blue); letter-spacing:-.012em;
}
h1 .year{
  display:block; font-weight:700; color:var(--wc-blue-dark);
  font-size:clamp(3.2rem, 8.2vw, 6rem); letter-spacing:-.038em; margin-top:.04em;
}
.herodeck{font-size:clamp(1.15rem,2.2vw,1.5rem); margin:22px 0 0}
.redrule{width:132px; height:4px; background:var(--wc-red); margin:26px 0 24px}
.herolede{max-width:46ch; margin:0}
.herobtns{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0}
.herometa{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wc-muted); font-weight:600; margin:26px 0 0;
}
.herofig{margin:0}
.herofig img{
  border:1px solid var(--wc-dim);
  box-shadow:0 2px 4px rgba(22,40,63,.06), 0 24px 56px rgba(22,40,63,.16);
}

/* ─── bands ─── */
.band{padding:76px 0; border-bottom:1px solid var(--wc-rule)}
.band-wash{background:var(--wc-wash); border-bottom-color:var(--wc-dim)}
.h2{font-size:clamp(1.85rem,3.6vw,2.7rem); margin:16px 0 0}
.lede{max-width:62ch; margin:18px 0 0; color:var(--wc-ink-2)}
.wc-section{display:inline-block}

.cols2{display:grid; grid-template-columns:1.6fr 1fr; gap:52px; margin-top:36px; align-items:start}
.cols2-even{grid-template-columns:1fr 1fr; gap:56px}
.colmain .wc-body{max-width:60ch}
.colmain .wc-body+.wc-body{margin-top:1.05em}

/* ─── stat row ─── */
.statgrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:52px; border-top:2px solid var(--wc-blue);
}
/* No dividers between the four figures — the rule above the row is enough. */
.stat{padding:22px 24px 4px 0}
.stat p{
  font-size:.86rem; line-height:1.4; color:var(--wc-ink-2); margin:10px 0 0; max-width:26ch;
}

/* ─── supply cards ─── */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--wc-dim);
       margin-top:40px; border:1px solid var(--wc-dim)}
.card{background:var(--wc-paper); padding:26px 26px 28px}
.card h3{
  font-family:var(--wc-sans); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--wc-blue); margin:0 0 12px;
  border-top:2px solid var(--wc-blue); padding-top:14px;
}
.card p{font-family:var(--wc-serif); font-size:1rem; line-height:1.5; color:var(--wc-ink); margin:0}
.pull{margin-top:44px}
.pull p{max-width:44ch; font-size:1.75rem}

/* ─── readers ─── */
.readers{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:42px;
         align-items:stretch}
/* Each reader is a column; the Start-with panel is pushed to the bottom so all
   three panels sit on the same line however long the paragraph above runs. */
.reader{display:flex; flex-direction:column}
.reader h3{
  font-family:var(--wc-serif); font-size:1.22rem; font-weight:600; line-height:1.25;
  color:var(--wc-blue-dark); margin:0 0 14px; padding-top:14px;
  border-top:2.5px solid var(--wc-red);
}
.rnum{
  display:block; font-family:var(--wc-sans); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--wc-red); font-weight:700; margin-bottom:7px;
}
.reader .wc-body{font-size:1rem}
.reader .wc-panel{margin-top:auto; padding-top:14px}
.reader .wc-body{margin-bottom:18px}
.sheetline{margin:38px 0 0}

/* ─── gallery ─── */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px}
.gallery figure{margin:0}
.gallery img{border:1px solid var(--wc-dim); box-shadow:0 1px 2px rgba(22,40,63,.05), 0 12px 30px rgba(22,40,63,.09)}
.gallery figcaption{
  font-size:.8rem; color:var(--wc-ink-2); margin-top:12px; line-height:1.4;
}
.gallery figcaption b{color:var(--wc-blue-dark); font-weight:700}

/* ─── selected lines (dark band) ─── */
.band-ink{background:var(--wc-ink); border-bottom-color:var(--wc-ink)}
.sec-onink{color:#8FB4DE; border-top-color:#8FB4DE}
.h2-onink{color:#F3F7FC}
.lines{list-style:none; padding:0; margin:40px 0 0;
       display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px}
.lines li{padding:22px 0; border-top:1px solid rgba(255,255,255,.16)}
.lines span{
  display:block; font-family:var(--wc-serif); font-size:1.22rem; line-height:1.35;
  font-weight:600; color:#F3F7FC; letter-spacing:-.01em;
}
.lines em{
  display:block; font-style:normal; font-family:var(--wc-sans); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:#8FB4DE; font-weight:700; margin-top:11px;
}

/* ─── contents ─── */
.toc{margin-top:38px}
.tocpart{
  font-family:var(--wc-sans); font-weight:700; font-size:.74rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--wc-blue); border-top:2px solid var(--wc-blue);
  padding-top:12px; margin:34px 0 4px;
}
.tocpart:first-child{margin-top:0}
.tocrow{
  display:grid; grid-template-columns:44px 1fr 76px; gap:18px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--wc-rule);
  text-decoration:none; color:inherit; position:relative;
  transition:background-color .14s ease;
}
a.tocrow::before{
  content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px;
  background:var(--wc-blue); opacity:0; transition:opacity .14s ease;
}
a.tocrow:hover{background:rgba(27,68,120,.045)}
a.tocrow:hover::before{opacity:1}
a.tocrow:hover .toctitle{color:var(--wc-blue)}
a.tocrow:focus-visible{outline:2px solid var(--wc-blue); outline-offset:2px}
.tocnum{
  font-family:var(--wc-sans); font-size:.8rem; font-weight:700; color:var(--wc-muted);
  font-variant-numeric:tabular-nums;
}
.toctitle{font-family:var(--wc-serif); font-size:1.12rem; font-weight:600; color:var(--wc-blue-dark); line-height:1.25}
.tocopen{
  display:block; font-family:var(--wc-serif); font-style:italic; font-weight:400;
  font-size:.95rem; line-height:1.45; color:var(--wc-ink-2); margin-top:6px; max-width:88ch;
}
.tocpages{
  text-align:right; font-family:var(--wc-sans); font-size:.8rem; color:var(--wc-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ─── edition ─── */
.ticks{list-style:none; padding:0; margin:22px 0 0}
.ticks li{position:relative; padding-left:26px; margin-bottom:13px; font-size:1rem; line-height:1.5}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:11px; height:11px;
  background:var(--wc-blue); border-radius:2px;
}
.sources{margin-top:52px; padding-top:4px; border-top:1px solid var(--wc-dim)}
.sources .wc-body{font-size:.95rem; color:var(--wc-ink-2); max-width:none; margin-top:14px}

/* ─── author ─── */
.contactline{margin-top:22px; font-family:var(--wc-sans); font-size:.92rem}
.backfig{margin:0}
.backfig img{border:1px solid var(--wc-dim); box-shadow:0 1px 2px rgba(22,40,63,.05), 0 16px 40px rgba(22,40,63,.12)}

/* ─── order ─── */
.buyrow{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:38px}
.buyrow-solo{grid-template-columns:minmax(0,440px)}
.buyrow-3{grid-template-columns:repeat(3,1fr); gap:20px}
.buy{background:var(--wc-paper); border:1px solid var(--wc-dim); border-top:3px solid var(--wc-blue); padding:28px 28px 30px}
.buykind{
  font-family:var(--wc-sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wc-red); font-weight:700; margin:0 0 8px;
}
.buy h3{font-family:var(--wc-serif); font-size:1.5rem; font-weight:600; color:var(--wc-blue-dark); margin:0 0 10px}
.buy .wc-body{font-size:1rem; margin:0}
.buybtns{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0}

.notify{
  margin-top:34px; background:var(--wc-paper);
  border:1px solid var(--wc-dim); border-top:3px solid var(--wc-red); padding:28px;
}
.notify h3{font-family:var(--wc-serif); font-size:1.35rem; font-weight:600; color:var(--wc-blue-dark); margin:0 0 8px}
.notify .wc-body{font-size:1rem; margin:0}
.notifyform{display:flex; gap:10px; margin:20px 0 0; flex-wrap:wrap}
.notifyform input[type=email]{
  flex:1; min-width:230px; font:inherit; font-size:.95rem; padding:12px 14px;
  border:1px solid var(--wc-dim); border-radius:6px; background:#fff; color:var(--wc-ink);
}
.notifyform input[type=email]:focus{outline:none; border-color:var(--wc-blue); box-shadow:0 0 0 3px rgba(31,99,176,.14)}
.notifyform button{cursor:pointer; font-family:var(--wc-sans)}
.hp{position:absolute; left:-9999px}
.fineprint{font-size:.8rem; color:var(--wc-muted); margin:14px 0 0}
.bulk{margin-top:28px; font-size:.98rem; color:var(--wc-ink-2)}

/* ─── closer ─── */
.closer{background:var(--wc-paper); padding:82px 0 88px; text-align:center; border-bottom:1px solid var(--wc-rule)}
.closer .wc-eyebrow{display:block; margin-bottom:20px}
.closeline{
  font-family:var(--wc-serif); font-weight:600; font-size:clamp(1.9rem,4.6vw,3.1rem);
  line-height:1.14; letter-spacing:-.022em; color:var(--wc-blue-dark); margin:0;
}

/* ─── footer ─── */
.foot{background:var(--wc-ink); color:#C6D6E8; padding:52px 0 30px}
.footrow{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap}
.foottitle{font-family:var(--wc-serif); font-size:1.15rem; font-weight:600; color:#fff; margin:0 0 6px}
.footsub{font-size:.88rem; line-height:1.6; color:#9FBAD6; margin:0 0 10px; max-width:44ch}
.foot a{color:#BBD3EC}
.footnav{display:flex; flex-direction:column; gap:9px}
.footnav a{font-size:.88rem; text-decoration:none}
.footnav a:hover{text-decoration:underline}
.footlaw{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14)}
.footlaw p{font-size:.76rem; color:#7E9BB8; margin:0; line-height:1.6}

/* ─── responsive ─── */
@media (max-width:1180px){
  .buyrow-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .herorow{grid-template-columns:1fr; gap:40px}
  .herofig{max-width:340px}
  .cols2, .cols2-even{grid-template-columns:1fr; gap:34px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .readers{grid-template-columns:1fr; gap:38px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .statgrid{grid-template-columns:repeat(2,1fr); row-gap:8px}
  .stat{padding-right:16px}
  .lines{grid-template-columns:1fr}
  .buyrow,.buyrow-3{grid-template-columns:1fr}
  .backfig{max-width:320px}
}
@media (max-width:720px){
  .navlinks a:not(.navcta){display:none}
  .band{padding:56px 0}
  .hero{padding:44px 0 50px}
  .grid3{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr; gap:32px}
  .statgrid{grid-template-columns:1fr}
  .tocrow{grid-template-columns:34px 1fr; gap:12px}
  .tocpages{grid-column:2; text-align:left; margin-top:6px}
  .wrap{padding:0 20px}
}

@media print{
  .nav,.herobtns,.navcta,.notify,.buybtns,.skip{display:none !important}
  body{background:#fff}
  .band{border:0; padding:24px 0}
}

.isbn{font-size:.82em;letter-spacing:.04em;color:var(--muted,#7A8899);}