:root{
  --navy:#0d1b2a;
  --navy-2:#152a3f;
  --slate:#33475b;
  --grey:#6b7c8d;
  --line:#e3e8ee;
  --paper:#ffffff;
  --wash:#f5f7f9;
  --brass:#b08d3f;
  --brass-lt:#d7b968;
  --brass-wash:#f8f3e6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--wash); color:var(--navy);
  font:17px/1.65 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.01em}
a{color:var(--brass); text-decoration:none}
p{margin:0 0 18px}

/* ---------- internal draft chrome ---------- */
.draftbar{
  position:sticky; top:0; z-index:99; background:#7a1f1f; color:#fff;
  font:600 12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; padding:9px 20px; text-align:center;
}
.pagemark{
  max-width:1100px; margin:0 auto; padding:44px 32px 0;
  font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#9aa8b6;
}
.pagemark span{color:var(--brass); }
.pagewrap{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:0}
.pagewrap.alt{background:var(--wash)}

/* ---------- layout ---------- */
.container{max-width:1100px; margin:0 auto; padding:0 32px}
.narrow{max-width:760px}
section.block{padding:74px 0}
section.block.tight{padding:52px 0}

/* ---------- site nav ---------- */
.sitenav{
  background:var(--navy); color:#fff; padding:16px 0;
}
.sitenav .container{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:10px; font-family:Georgia,serif}
.brand .mark{font-size:23px; letter-spacing:.04em; color:#fff}
.brand .sub{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-lt); font-family:-apple-system,Arial,sans-serif}
.sitenav ul{list-style:none; display:flex; gap:24px; margin:0; padding:0; flex-wrap:wrap}
.sitenav a{
  color:#cfd8e2; font:600 12px/1 -apple-system,Arial,sans-serif;
  letter-spacing:.1em; text-transform:uppercase;
}
.sitenav a:hover{color:var(--brass-lt)}
.navcta{
  background:var(--brass); color:var(--navy) !important; padding:10px 18px; border-radius:2px;
  letter-spacing:.09em !important;
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff; padding:96px 0 88px; position:relative; overflow:hidden;
}
.hero:after{
  content:""; position:absolute; right:-120px; top:-120px; width:460px; height:460px;
  border:1px solid rgba(215,185,104,.18); border-radius:50%;
}
.hero .container{position:relative; z-index:1}
.kicker{
  font:600 11px/1 -apple-system,Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-lt); margin:0 0 22px;
}
.hero h1{font-size:52px; line-height:1.12; margin:0 0 22px; max-width:16ch; color:#fff}
.hero .lede{font-size:20px; line-height:1.6; color:#c8d3de; max-width:52ch; margin:0 0 34px}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-block; padding:15px 30px; border-radius:2px;
  font:600 13px/1 -apple-system,Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase;
}
.btn-primary{background:var(--brass); color:var(--navy)}
.btn-ghost{border:1px solid rgba(255,255,255,.35); color:#fff}
.hero .fineprint{margin:26px 0 0; font-size:14px; color:#8fa2b4}

/* ---------- generic ---------- */
.eyebrow{
  font:600 11px/1 -apple-system,Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin:0 0 16px;
}
h2.big{font-size:38px; line-height:1.2; margin:0 0 20px}
h2.mid{font-size:30px; line-height:1.25; margin:0 0 18px}
h3.sm{font-size:21px; margin:0 0 10px}
.lede-dark{font-size:19px; color:var(--slate); max-width:60ch}
.muted{color:var(--grey)}

.grid{display:grid; gap:26px}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:30px;
}
.card.on-white{background:var(--wash); border-color:#e9edf1}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

.step{position:relative; padding-left:60px}
.step .n{
  position:absolute; left:0; top:2px; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--brass); color:var(--brass); font-family:Georgia,serif; font-size:19px;
  display:flex; align-items:center; justify-content:center;
}

blockquote.pull{
  margin:0; padding:0 0 0 26px; border-left:2px solid var(--brass);
  font-family:Georgia,serif; font-size:23px; line-height:1.5; color:var(--navy);
}
blockquote.pull cite{
  display:block; margin-top:14px; font:600 11px/1 -apple-system,Arial,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey); font-style:normal;
}
.quoteband{background:var(--navy); color:#fff; padding:70px 0}
.quoteband blockquote.pull{border-color:var(--brass-lt); color:#fff; font-size:27px}
.quoteband cite{color:var(--brass-lt)}

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:2px; background:var(--line)}
.stat{background:var(--paper); padding:28px 24px; text-align:center}
.stat .n{font-family:Georgia,serif; font-size:38px; color:var(--brass); line-height:1; display:block; margin-bottom:8px}
.stat .l{font:600 11px/1.4 -apple-system,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--grey)}

.faq{border-top:1px solid var(--line)}
.faq .item{border-bottom:1px solid var(--line); padding:24px 0}
.faq h4{font-size:19px; margin:0 0 8px}
.faq p{margin:0; color:var(--slate)}

.arealist{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 22px; list-style:none; padding:0; margin:0}
.arealist li{padding:9px 0; border-bottom:1px solid var(--line); font-size:15px}
.arealist li a{color:var(--slate)}
.arealist li.todo{color:#b3bdc7; font-style:italic}

.transcript{border-left:2px solid var(--line); padding-left:24px}
.turn{margin-bottom:20px}
.turn .who{
  font:600 11px/1 -apple-system,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin-bottom:6px;
}
.turn .who b{color:var(--grey); font-weight:600; margin-left:8px}
.turn p{margin:0; color:var(--slate); font-size:16px}

.chapters{list-style:none; padding:0; margin:0 0 30px}
.chapters li{
  display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px;
}
.chapters .t{color:var(--brass); font-variant-numeric:tabular-nums; flex:0 0 52px}

.player{
  background:var(--navy); border-radius:3px; padding:34px; color:#fff; display:flex;
  align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:34px;
}
.player .play{
  width:58px; height:58px; border-radius:50%; border:1px solid var(--brass-lt);
  display:flex; align-items:center; justify-content:center; color:var(--brass-lt); font-size:19px; flex:0 0 auto;
}
.player .meta{flex:1 1 220px}
.player .meta .ttl{font-family:Georgia,serif; font-size:21px; margin-bottom:5px}
.player .meta .sub{font-size:13px; color:#8fa2b4}

.contactgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px}
.contactcard{background:var(--paper); border:1px solid var(--line); padding:30px; border-radius:3px}
.contactcard .lbl{font:600 11px/1 -apple-system,Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:12px}
.contactcard .val{font-family:Georgia,serif; font-size:25px; color:var(--navy); margin-bottom:8px}
.contactcard p{font-size:15px; color:var(--slate); margin:0}

form.lead{background:var(--paper); border:1px solid var(--line); padding:34px; border-radius:3px}
form.lead label{display:block; font:600 11px/1 -apple-system,Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--grey); margin:0 0 7px}
form.lead input,form.lead select,form.lead textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:2px;
  font:16px/1.4 inherit; color:var(--navy); background:var(--wash); margin-bottom:20px;
}
form.lead .two{display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
form.lead button{
  background:var(--brass); color:var(--navy); border:0; padding:16px 32px; border-radius:2px;
  font:600 13px/1 -apple-system,Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}

.cta{background:var(--navy); color:#fff; padding:78px 0; text-align:center}
.cta h2{font-size:36px; margin:0 0 16px; color:#fff}
.cta p{color:#c8d3de; max-width:50ch; margin:0 auto 30px; font-size:18px}

.sitefoot{background:#08131e; color:#7b8c9c; padding:52px 0 40px; font-size:14px}
.sitefoot .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:32px; margin-bottom:34px}
.sitefoot h5{color:#fff; font:600 11px/1 -apple-system,Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px}
.sitefoot ul{list-style:none; padding:0; margin:0}
.sitefoot li{margin-bottom:9px}
.sitefoot a{color:#7b8c9c}
.sitefoot .base{border-top:1px solid #16242f; padding-top:24px; font-size:13px; line-height:1.7}

/* ---------- annie's category page ---------- */
.annienav{background:#0b1f38; color:#fff; padding:15px 0}
.annienav .container{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.annienav .logo{font-family:Georgia,serif; font-size:20px}
.annienav .logo em{color:#1F78E8; font-style:normal}
.annienav ul{list-style:none; display:flex; gap:20px; margin:0; padding:0; flex-wrap:wrap}
.annienav a{color:#c3cfdb; font:600 12px/1 -apple-system,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase}
.annienav a.here{color:#fff; border-bottom:2px solid #1F78E8; padding-bottom:4px}
.dirhero{background:#f0f4f8; padding:64px 0; border-bottom:1px solid var(--line)}
.dirhero h1{font-size:40px; margin:0 0 16px}
.listing{
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:0; overflow:hidden;
  display:grid; grid-template-columns:220px 1fr; margin-bottom:18px;
}
.listing .side{background:var(--navy); color:#fff; padding:30px; display:flex; flex-direction:column; justify-content:center}
.listing .side .nm{font-family:Georgia,serif; font-size:24px; margin-bottom:4px}
.listing .side .loc{font:600 11px/1 -apple-system,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-lt)}
.listing .main{padding:30px}
.listing .main h3{margin:0 0 10px; font-size:21px}
.listing .main p{margin:0 0 16px; color:var(--slate); font-size:16px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--wash); border:1px solid var(--line); border-radius:20px; padding:5px 13px; font-size:12px; color:var(--slate)}
.slot{
  border:1px dashed #c3cdd7; border-radius:3px; padding:34px; text-align:center; color:var(--grey);
  background:#fbfcfd; font-size:15px;
}

/* ---------- internal notes ---------- */
.devnote{
  background:#fff7e6; border:1px solid #f0dcbb; border-left:4px solid #a8600a;
  padding:16px 20px; margin:0 0 26px; font:14px/1.6 -apple-system,Arial,sans-serif; color:#6b3f06;
  border-radius:3px;
}
.devnote b{color:#54320a}
.devnote:before{
  content:"Internal note — not part of the page"; display:block;
  font:600 10px/1 -apple-system,Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:#a8600a; margin-bottom:9px;
}

@media (max-width:720px){
  .hero h1{font-size:36px}
  h2.big{font-size:29px}
  .listing{grid-template-columns:1fr}
  form.lead .two{grid-template-columns:1fr}
}
@media print{
  .draftbar{position:static}
  section.block{padding:40px 0; break-inside:avoid}
  body{background:#fff}
  .hero,.quoteband,.cta,.sitefoot,.sitenav,.annienav,.listing .side,.player{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

.pgdiv{max-width:1100px;margin:0 auto;padding:26px 32px 0;text-align:center}
.pgdiv span{display:inline-block;font:600 10px/1 -apple-system,Arial,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#9aa8b6;background:#eef2f6;padding:7px 16px;border-radius:20px}
@media print{.pgdiv{break-before:page}}


/* ---------------------------------------------------------------------------
   Denver hero photograph. Supplied by the client (5280 Living), Aug 2026.
   Path is relative on purpose — ../denver-hero.jpg survives the move to
   5280's own domain, same rule as the B constant in partials/head.php.
   The gradient in front of it is a readability scrim, not decoration: the
   headline is white and sits on the left, so the navy stays opaque there and
   thins out over the skyline on the right.
--------------------------------------------------------------------------- */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(100deg, rgba(16,29,48,.97) 0%, rgba(16,29,48,.93) 34%, rgba(16,29,48,.55) 72%, rgba(16,29,48,.42) 100%),
    url("../denver-hero.jpg") center 42% / cover no-repeat;
}
.hero::after{ z-index:1; }
.hero .container{ position:relative; z-index:2; }

@media (max-width:760px){
  .hero::before{
    background:
      linear-gradient(180deg, rgba(16,29,48,.95) 0%, rgba(16,29,48,.88) 55%, rgba(16,29,48,.72) 100%),
      url("../denver-hero.jpg") center 45% / cover no-repeat;
  }
}