/* ==========================================================================
   Building Block Management — styles.css  (down-home design)
   EDIT HERE: all fonts, font sizes, and colors are set in this block.
   Change a value once and it updates everywhere on the site.
   ========================================================================== */
:root{
  /* ---- FONTS ---- (system fonts; no downloads) */
  --font-heading: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; /* headings, logo name */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* body text */

  /* ---- FONT SIZES ---- */
  --size-body: 17.5px;          /* base paragraph text */
  --size-hero-title: 2.1rem;    /* big banner headline (phones) */
  --size-hero-title-large: 3rem;/* big banner headline (desktop) */
  --size-h2: 1.7rem;            /* section headings (phones) */
  --size-h2-large: 2.05rem;     /* section headings (desktop) */
  --size-h3: 1.2rem;            /* card / sub headings */
  --size-lead: 1.12rem;         /* intro text under banner headline */
  --size-logo: 1.15rem;         /* "Building Block Management" in header */
  --size-nav: 0.95rem;          /* menu links */
  --size-stat: 1.5rem;          /* numbers in the "at a glance" strip */
  --size-small: 0.88rem;        /* captions, footnotes */

  /* ---- COLORS ---- */
  --color-paper: #f6f0e3;       /* main background (warm cream) */
  --color-paper-dark: #ece3d0;  /* alternate section background */
  --color-card: #fffaf0;        /* cards and boxes */
  --color-ink: #2a2f33;         /* body text */
  --color-muted: #5e6258;       /* softer text */
  --color-navy: #2c3e50;        /* weathered navy: headings */
  --color-spruce: #2f4a3c;      /* deep spruce green: header, dark band */
  --color-spruce-light: #3c5c4b;/* spruce hover */
  --color-red: #a4473a;         /* barn red: buttons, accents */
  --color-red-dark: #87382d;    /* barn red hover */
  --color-line: #d8ccb4;        /* borders and hand-drawn lines */
  --color-footer: #26332c;      /* footer background */

  /* ---- SHAPE ---- */
  --radius: 14px;               /* roundness of cards and boxes */
  --radius-btn: 999px;          /* roundness of buttons (999px = pill) */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--size-body);line-height:1.65}
img,svg{max-width:100%;display:block}
a{color:var(--color-red)}
a:hover{color:var(--color-red-dark)}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--color-navy);line-height:1.2;margin:0 0 .5em;font-weight:700}
h2{font-size:var(--size-h2)}
h3{font-size:var(--size-h3)}
p{margin:0 0 1em}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{padding:60px 0}
section.alt{background:var(--color-paper-dark)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}
.muted{color:var(--color-muted)}

/* ---------- Header ---------- */
.site-header{background:var(--color-spruce);color:var(--color-paper)}
.header-inner{max-width:1080px;margin:0 auto;padding:14px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--color-paper);text-decoration:none}
.brand svg{width:36px;height:36px;flex:none}
.brand-name{font-family:var(--font-heading);font-size:var(--size-logo);font-weight:700;line-height:1.15}
.brand-name small{display:block;font-family:var(--font-body);font-weight:400;font-size:.78rem;opacity:.8}
.brand:hover{color:#fff}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.nav a{color:var(--color-paper);text-decoration:none;font-size:var(--size-nav);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:#e2b49a}
.nav a.nav-cta{background:var(--color-red);padding:6px 16px;border-radius:var(--radius-btn);border:0}
.nav a.nav-cta:hover{background:var(--color-red-dark);color:#fff}

/* ---------- Shingle divider (CSS only) ---------- */
.shingles{height:22px;background-color:var(--color-paper-dark);
  background-image:
    repeating-linear-gradient(90deg,var(--color-line) 0 2px,transparent 2px 34px),
    repeating-linear-gradient(90deg,var(--color-line) 0 2px,transparent 2px 34px),
    linear-gradient(var(--color-line),var(--color-line));
  background-size:100% 11px,100% 11px,100% 2px;
  background-position:0 0,17px 11px,0 10px;
  background-repeat:no-repeat;
  border-top:2px solid var(--color-line);border-bottom:2px solid var(--color-line)}

/* ---------- Hero / banner ---------- */
.hero{background:var(--color-paper);padding:0}
/* BANNER PHOTO: to use a real photo, put it in images/ and change the
   background below to:  background: url("images/banner.jpg") center/cover no-repeat;  */
.hero-media{position:relative;height:190px;border-radius:0 0 var(--radius) var(--radius);
  background:url("images/hills.svg") center bottom/cover no-repeat, linear-gradient(#e7e5dc,#dfe3dc)}
.hero-photo-note{position:absolute;top:12px;right:14px;font-size:.75rem;color:var(--color-muted);background:rgba(255,250,240,.8);padding:2px 10px;border-radius:999px}
.hero-content{max-width:1080px;margin:0 auto;padding:34px 22px 50px}
.hero h1{font-size:var(--size-hero-title);max-width:20ch}
.lead{font-size:var(--size-lead);max-width:58ch;color:var(--color-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:12px 24px;border-radius:var(--radius-btn);border:2px solid var(--color-red)}
.btn-primary{background:var(--color-red);color:#fff}
.btn-primary:hover{background:var(--color-red-dark);border-color:var(--color-red-dark);color:#fff}
.btn-ghost{color:var(--color-red);background:transparent}
.btn-ghost:hover{background:var(--color-card)}

/* ---------- At a glance ---------- */
.glance{padding:0 0 50px}
.glance ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.glance li{background:var(--color-card);border:1.5px dashed var(--color-line);border-radius:var(--radius);padding:16px 18px}
.glance strong{display:block;font-family:var(--font-heading);font-size:calc(var(--size-stat) * .85);color:var(--color-spruce);line-height:1.2}
.glance span{font-size:var(--size-small);color:var(--color-muted)}

/* ---------- Layout helpers ---------- */
.split{display:grid;gap:30px}
.grid{display:grid;gap:20px}
.section-head{max-width:640px;margin-bottom:30px}

/* ---------- Cards and boxes ---------- */
.card{background:var(--color-card);border:1.5px solid var(--color-line);border-radius:var(--radius);padding:24px}
.card.featured{border-color:var(--color-spruce);box-shadow:5px 5px 0 var(--color-line)}
.card ul{padding-left:1.1em;margin:0 0 1em}
.card li{margin-bottom:.3em}
.card .icon{width:46px;height:46px;border-radius:50%;background:var(--color-paper-dark);display:grid;place-items:center;margin-bottom:12px}
.card .icon svg{width:24px;height:24px}
.more{font-weight:600;text-decoration:none}
.box{background:var(--color-card);border:1.5px dashed var(--color-line);border-radius:var(--radius);padding:22px 24px}
.box h3{margin-bottom:.4em}
.notice{background:var(--color-card);border-left:5px solid var(--color-spruce);border-radius:var(--radius);padding:20px 22px;font-size:.95rem}

/* hand-drawn style check marks */
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:32px;margin-bottom:.55em}
.checks li::before{content:"";position:absolute;left:2px;top:.35em;width:16px;height:9px;border-left:2.5px solid var(--color-red);border-bottom:2.5px solid var(--color-red);transform:rotate(-45deg);border-radius:0 0 0 2px}

/* plain list of everyday tasks */
.chores{display:grid;gap:4px 34px}
.chores div{padding:14px 0;border-bottom:1.5px dashed var(--color-line)}
.chores h3{margin:0 0 .2em;font-size:1.08rem}
.chores p{margin:0;color:var(--color-muted)}

/* ---------- Dark band ---------- */
.dark{background:var(--color-spruce);color:#eef0e8}
.dark h2,.dark h3{color:#fff}
.dark p{color:#dfe4da}
.dark .grid > div{border-top:2px solid rgba(255,255,255,.25);padding-top:14px}

/* ---------- Towns ---------- */
.towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.towns li{background:var(--color-card);border:1.5px solid var(--color-line);border-radius:999px;padding:7px 16px}
.towns li.primary{background:var(--color-spruce);border-color:var(--color-spruce);color:#fff}

/* ---------- Steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:step}
.steps li{counter-increment:step;background:var(--color-card);border:1.5px solid var(--color-line);border-radius:var(--radius);padding:22px 22px 18px}
.steps li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--color-red);color:#fff;font-family:var(--font-heading);font-weight:700;margin-bottom:10px}
.steps p{margin:0}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:14px}
.contact-item{background:var(--color-card);border:1.5px solid var(--color-line);border-radius:var(--radius);padding:18px 20px}
.contact-item span{display:block;font-size:var(--size-small);color:var(--color-muted)}
.contact-item a{font-size:1.1rem;font-weight:600;text-decoration:none;word-break:break-word}
.contact-item p{margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-footer);color:#d6dccf;padding:44px 0 26px;font-size:.95rem}
.site-footer a{color:#f1e6d2;text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:#fff}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.6em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.4em}
.footer-grid{display:grid;gap:28px}
.footer-brand .brand{margin-bottom:10px}
.legal{margin:30px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);font-size:var(--size-small);opacity:.75}

/* ---------- Bigger screens ---------- */
@media (min-width:760px){
  section{padding:76px 0}
  h2{font-size:var(--size-h2-large)}
  .hero-media{height:300px;max-width:1240px;margin:0 auto}
  .hero h1{font-size:var(--size-hero-title-large)}
  .glance ul{grid-template-columns:repeat(4,1fr)}
  .glance strong{font-size:var(--size-stat)}
  .split{grid-template-columns:1.3fr 1fr;align-items:start;gap:50px}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .grid.two{grid-template-columns:repeat(2,1fr)}
  .grid.four{grid-template-columns:repeat(2,1fr);gap:28px 40px}
  .chores{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1.3fr}
}
@media (min-width:1000px){
  .grid.four{grid-template-columns:repeat(4,1fr)}
}