/* Self-hosted, latin subset, generated by build/prepare_fonts.py. Do not hand-edit. */
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/big-shoulders-display-latin.e27b46a1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/caveat-latin.18bea307.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/karla-italic-latin.f853343d.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/karla-latin.90cbec5f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Wandi Christmas Trees.
   Part 1 is design/HomePage.dc.html's own stylesheet, verbatim, so the approved
   artboard renders exactly as drawn. Part 2 adds what the artboard never covered:
   the inner pages, the notice banner, and the responsive behaviour.
   Single theme on purpose: this is a printed-postcard look, not a themed app. */

:root {
  color-scheme: only light;
  --cream: #F5E9CF; --cream-light: #FBF6E9; --ink: #1F2A24;
  --pine: #1E5A45; --pine-dark: #164536; --red: #C63A2F; --red-dark: #9E2D24;
  --gold: #E1A32B; --kraft: #E8D2A6; --sky: #9CC5E6;
  --disp: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --body: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --pad: clamp(20px, 4.4vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

/* ================================================================ 1. the artboard, verbatim */
body { margin: 0; background: #F5E9CF; color: #1F2A24; font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
    a { color: #C63A2F; } a:hover { color: #9E2D24; }
    h1, h2, h3, .disp { font-family: 'Big Shoulders Display', 'Impact', 'Arial Narrow', sans-serif; font-weight: 900; margin: 0; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; }
    .hand { font-family: 'Caveat', 'Bradley Hand', cursive; }
    p { margin: 0; }
    .label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
    .nav a { color: #F5E9CF; text-decoration: none; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
    .nav a:hover { color: #E1A32B; }
    .datestamp { padding: 30px 26px 32px; text-align: center; border: 9px dotted #FBF6E9; }
    .tag { width: 212px; background: #E8D2A6; color: #1F2A24; padding: 36px 18px 24px; text-align: center; clip-path: polygon(50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%); display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 16px 34px rgba(0,0,0,0.28); position: relative; }
    .hole { width: 16px; height: 16px; border-radius: 50%; background: #1E5A45; border: 3px solid #FBF6E9; position: absolute; top: 20px; left: 50%; margin-left: -11px; }
    .cashtag { width: 214px; height: 214px; border-radius: 50%; background: #C63A2F; color: #F5E9CF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 16px 34px rgba(0,0,0,0.3); position: relative; border: 5px dashed #F5E9CF; }
    .foot a { color: #E1A32B; text-decoration: none; }

/* ================================================================ 2. additions */

body { overflow-x: hidden; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--ink); padding: 12px 20px; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }
.wordmark-link { text-decoration: none; }
.nav a[aria-current="page"] { color: #E1A32B; }


/* notice banner */
.banner { margin: 0; background: #E1A32B; color: #1F2A24; font-family: var(--disp);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(14px, 1.5vw, 18px); line-height: 1.3; text-align: center;
  padding: 12px var(--pad); }
.banner--soldout { background: #C63A2F; color: #F5E9CF; }

/* ---------------------------------------------------------------- responsive
   The artboard is a fixed 1440px drawing with inline styles, so the breakpoints
   below have to out-specify those. This is the only place !important appears. */
/* "Your day in the valley" was drawn at a fixed 96px; scale it like the other section headings */
#day h2 { font-size: clamp(34px, 6.67vw, 96px) !important; }
@media (max-width: 1100px) {
  #map { grid-template-columns: minmax(0, 1fr) !important; }
  #map > div:last-child { order: -1; }
}
@media (max-width: 980px) {
  header[style] { flex-wrap: wrap !important; height: auto !important;
                  padding-top: 12px !important; padding-bottom: 12px !important; row-gap: 8px; }
  header[style] .nav { order: 3; flex-basis: 100%; gap: 14px 18px !important; flex-wrap: wrap; }
  #dates > div:first-child, #prices > div:first-child, #day > div:first-child,
  #prices > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  /* the footer's name gets the full row; the three small columns sit under it */
  footer[style] > div:first-child { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  footer[style] > div:first-child > div:first-child { grid-column: 1 / -1; }
  /* the tags stack one under another, and each hangs from its own string running the full
     width of the screen, sagging where the tag pulls it, as the desktop tags hang from one
     long string. Same colour; the drops vary like the desktop's */
  #prices { overflow-x: clip; }
  #prices > div:nth-of-type(2) { flex-direction: column !important; flex-wrap: nowrap !important;
                                 align-items: center !important; justify-content: flex-start !important;
                                 gap: 18px; margin-top: 10px !important; }
  #prices > div:nth-of-type(2) > div > svg { display: none; }
  #prices > svg:first-of-type { display: none !important; }
  #prices > div:nth-of-type(2) > div { --drop: 34px; position: relative; padding-top: calc(var(--drop) + 14px); }
  #prices > div:nth-of-type(2) > div:nth-child(2) { --drop: 46px; }
  #prices > div:nth-of-type(2) > div:nth-child(3) { --drop: 28px; }
  #prices > div:nth-of-type(2) > div:nth-child(4) { --drop: 42px; }
  #prices > div:nth-of-type(2) > div:nth-child(5) { --drop: 24px; }
  #prices > div:nth-of-type(2) > div::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 18px; transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 18' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q 200 26 400 2' stroke='%23C9A97A' stroke-width='3' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }
  #prices > div:nth-of-type(2) > div::after {
    content: ""; position: absolute; top: 14px; left: 50%; width: 2.5px; margin-left: -1.25px;
    height: var(--drop); background: #C9A97A;
  }
  #day > div:last-child, #questions > div:last-child { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 860px) {
  section[style] > div[style*="grid-template-columns: minmax(0, 1fr) 440px"],
  section[style] > div[style*="440px"] { grid-template-columns: minmax(0, 1fr) !important; }
  #dates > div:last-child { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  #day > div:last-child, #questions > div:last-child { grid-template-columns: minmax(0,1fr) !important; }
  footer[style] > div:first-child { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
  div[style*="rotate(-2deg)"], div[style*="rotate(2deg)"] { transform: none !important; }
}

/* ---------------------------------------------------------------- prose pages
   The content band under the green page head on every inner page. Same left edge as
   the header, text held to a readable measure, and the home page's own colours, rules,
   boxes and button, so the inner pages read as the same site. */
.band { padding: clamp(40px, 5vw, 72px) var(--pad) clamp(56px, 6.5vw, 96px); }
.band--cream { background: var(--cream); }
.prose { --measure: 680px; }
.prose > * { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose > p:first-child { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.45; margin-top: 0; }
.prose h2 { font-size: clamp(28px, 3vw, 40px); color: var(--pine); margin: clamp(40px, 4.4vw, 56px) 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 19px; margin: 26px 0 6px; line-height: 1.35; }
.prose p { margin: 12px 0; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--red); }
.prose strong { font-weight: 700; }
.prose hr { border: none; border-top: 1.5px solid rgba(30,90,69,.3); margin: 36px 0; }

/* tables: label-style header, the home page's pine rules, no fill */
.table-scroll { overflow-x: auto; margin: 16px 0 8px; }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1.5px solid rgba(30,90,69,.3); }
.prose th { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red);
  padding-top: 0; border-bottom: 2px solid var(--pine); }
.prose td:first-child { font-weight: 700; color: var(--pine); }
.prose td a { color: var(--pine); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose td a:hover { color: var(--red); }
.prose--areas th:not(:first-child), .prose--areas td:not(:first-child) { text-align: right; padding-right: 0; padding-left: 16px; }

/* areas: the four drive-time bands, boxed as on the home page map */
.bandbox { border: 2px solid var(--gold); padding: 14px 18px 16px; margin: 12px 0; }
.bandbox--2 { border-color: var(--red); }
.bandbox--3 { border-color: var(--pine); }
.bandbox--4 { border-color: var(--sky); }
.prose .bandbox h3 { font-family: var(--disp); font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
  font-size: 25px; line-height: .95; color: var(--pine); margin: 0; }
.prose .bandbox p { margin: 6px 0 0; font-size: 15px; line-height: 1.7; color: #3A4A40; }

/* questions: the home page's grid, two columns, a rule under each answer */
.prose > .qa-grid { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 64px; margin-top: 20px; }
.qa { padding: 22px 0; border-bottom: 1.5px solid rgba(30,90,69,.3); }
.prose .qa h2 { font-size: 26px; line-height: 1; color: var(--pine); margin: 0; }
.prose .qa p { margin: 8px 0 0; color: #3A4A40; }

/* tree care: numbered cards, the number in the home page's gold circle */
.prose > .tips { max-width: none; list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.prose .tip { background: var(--cream-light); padding: 26px 30px 30px; margin: 0; }
.tip-n { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: var(--pine); font-family: var(--disp); font-weight: 900; font-size: 28px; line-height: 1; }
.prose .tip h2 { font-size: clamp(26px, 2.4vw, 32px); margin: 18px 0 8px; }
.prose .tip p { margin: 0; color: #3A4A40; }

@media (max-width: 860px) {
  .prose > .qa-grid, .prose > .tips { grid-template-columns: minmax(0, 1fr); }
  .prose > .qa-grid { gap: 0; }
}
@media (max-width: 560px) {
  .prose .tip { padding: 22px 22px 24px; }
}

.page-head { background: var(--pine); color: var(--cream); padding: clamp(40px, 5vw, 72px) var(--pad) clamp(34px, 4vw, 56px); }
.page-head h1 { font-size: clamp(34px, 5.4vw, 68px); color: var(--cream); }
.page-head .crumbs { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; color: var(--gold); }
.page-head .crumbs a { color: var(--gold); text-decoration: none; }
.page-head .crumbs a:hover { text-decoration: underline; }

.factbar { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 44px); margin-top: 26px; }
.factbar div { min-width: 140px; }
.factbar .label { color: var(--gold); margin-bottom: 4px; }
.factbar .v { font-family: var(--disp); font-weight: 900; font-size: clamp(22px, 2.4vw, 32px); color: var(--cream); line-height: 1.05; }

/* the button, exactly as the home page's Open in Google Maps */
.prose > .cta-row { max-width: none; display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(36px, 4vw, 52px); }
.cta {
  background: var(--red); color: var(--cream); display: inline-block; text-decoration: none;
  padding: 15px 26px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--pine);
}
.cta:hover { background: var(--red-dark); color: var(--cream); }
.cta--alt { background: var(--pine); box-shadow: 4px 4px 0 var(--gold); }
.cta--alt:hover { background: var(--pine-dark); }

.townlist { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 20px 0 8px; padding: 0; list-style: none; }
.townlist a {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  background: var(--cream-light); border-left: 5px solid var(--pine);
  padding: 12px 16px; text-decoration: none; color: var(--ink);
}
.townlist a:hover { background: #fff; border-left-color: var(--red); }
.townlist .t { font-weight: 700; }
.prose > .townlist { padding-left: 0; }
.prose .townlist li { margin: 0; }
.townlist .d { font-size: 14px; color: var(--pine); white-space: nowrap; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--pine); color: var(--cream); padding: clamp(40px, 5vw, 64px) var(--pad) 32px; }
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot-grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-width: var(--maxw); margin: 0 auto; }
.foot-grid h2 { font-size: 26px; color: var(--cream); }
.foot-grid .label { color: var(--gold); margin-bottom: 8px; }
.foot-grid p { font-size: 15.5px; }
.colophon { max-width: var(--maxw); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid rgba(245,233,207,.28); font-size: 13px; color: rgba(245,233,207,.8); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- notice banner */
.banner {
  margin: 0; background: var(--gold); color: var(--ink);
  font-family: var(--disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.3;
  text-align: center; padding: 12px var(--pad);
}
.banner--soldout { background: var(--red); color: var(--cream); }

/* the postcard word sits tight under the arc at desktop; on a narrow screen the
   negative margin closes up too far and collides with the banner beneath it */
@media (max-width: 860px) {
  .postcard-word { margin-top: 0 !important; }
}
@media (max-width: 560px) {
  .postcard-word { letter-spacing: -0.01em; }
  .hero-banner, h1.disp { line-height: 1.12; }
}
@media (max-width: 860px) {
  .postcard-word { margin-bottom: 0.06em; }
}

/* ---- added 5 Oct 2026: WebP wrappers and the linked town names in the map bands */
picture { display: contents; }
.bandlist a { color: #1E5A45; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.bandlist a:hover { color: #C63A2F; }

/* ---- hero direction 1, the big photo postcard (site.json "hero": "photo-postcard").
   Desktop: the photo fills the panel, the postcard sits on it bottom-left, the badge top-right.
   Tablet: the same, smaller badge. Phone: photo on top, postcard below it,
   overlapping the photo's bottom edge, marks in a row under the note. */
.hero1 { position: relative; background: var(--pine); color: var(--ink); min-height: clamp(520px, 57vw, 824px); overflow: hidden; }
.hero1-photo { position: absolute; inset: 0; }
.hero1-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.hero1-card { position: absolute; left: var(--pad); bottom: 56px; width: min(640px, calc(100% - 2 * var(--pad)));
  background: var(--cream-light); padding: 30px 32px 28px; box-shadow: 0 24px 50px rgba(31,42,36,.35); transform: rotate(-1.5deg); }
.hero1-card > .label { color: var(--red); letter-spacing: .3em; }
.hero1-word { font-size: clamp(54px, 7.2vw, 104px); color: var(--pine); margin-top: 6px; letter-spacing: -0.01em; }
.hero1-banner { display: inline-block; background: var(--red); color: var(--cream); padding: 12px 30px; margin-top: 14px;
  transform: rotate(-1.5deg); box-shadow: 4px 4px 0 var(--pine); }
.hero1-banner h1 { font-size: clamp(17px, 1.8vw, 26px); letter-spacing: .08em; }
.hero1-note { font-size: clamp(22px, 1.95vw, 28px); color: var(--pine); margin-top: 22px; line-height: 1.25; padding-right: 200px; }
.hero1-marks { position: absolute; right: 26px; bottom: 26px; display: flex; align-items: center; }
.hero1-postmark { margin-right: -14px; opacity: .8; }
.hero1-badge { position: absolute; right: 72px; top: 48px; width: 204px; height: 204px; border-radius: 50%; background: var(--red);
  color: var(--cream); border: 8px dotted var(--cream-light); box-shadow: 0 0 0 3px var(--red), 0 16px 34px rgba(31,42,36,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(7deg); text-align: center; }
.hero1-badge .label { font-size: 11px; color: #F3D3A8; }
.hero1-badge .big { font-size: 50px; margin-top: 2px; }
.hero1-badge .date { font-size: 38px; color: #F3D3A8; }
.hero1-badge .small { margin-top: 5px; font-size: 10px; letter-spacing: .16em; }
.hero1-badge .small + .small { margin-top: 1px; }
@media (max-width: 1100px) {
  .hero1 { min-height: clamp(560px, 72vw, 824px); }
  .hero1-card { bottom: 40px; }
  .hero1-badge { width: 150px; height: 150px; right: 32px; top: 28px; border-width: 6px; }
  .hero1-badge .big { font-size: 40px; } .hero1-badge .date { font-size: 30px; }
  .hero1-badge .small { display: none; }
}
@media (max-width: 760px) {
  .hero1 { min-height: 0; display: flex; flex-direction: column; background: var(--sky); }
  .hero1-photo { position: relative; inset: auto; height: clamp(280px, 64vw, 440px); }
  .hero1-card { position: relative; left: auto; bottom: auto; width: auto; margin: -44px var(--pad) 36px; transform: rotate(-1deg); padding: 22px 20px 22px; }
  .hero1-note { padding-right: 0; font-size: 22px; margin-top: 16px; }
  .hero1-marks { position: static; justify-content: flex-end; margin-top: 14px; }
  .hero1-badge { width: 124px; height: 124px; right: 16px; top: 16px; border-width: 5px; z-index: 1; }
  .hero1-badge .label { display: none; } .hero1-badge .big { font-size: 34px; } .hero1-badge .date { font-size: 26px; }
}