/* =========================================================
   Los Ranchos MainStreet — Terracotta + Blue palette
   Terracotta + Route 66 blue dominant; teal + sign yellow accents.
   Derived from the rack card, warmed up per board feedback.
   (variable names kept from prior theme; values remapped)
   ========================================================= */

:root {
  --oxblood:      #1a6d72;   /* teal-blue (primary dark)       */
  --oxblood-deep: #12545a;   /* deeper teal                    */
  --oxblood-soft: #26828a;   /* lifted teal panel              */
  --cream:        #f5ecdb;   /* warm paper                     */
  --cream-deep:   #ecdcc2;   /* terracotta-tinted cream        */
  --orange:       #bb5a34;   /* terracotta (primary warm accent) */
  --orange-soft:  #cf7550;
  --gold:         #e6b73f;   /* sign yellow (accent)           */
  --sage:         #7fa8a0;
  --teal:         #109a80;   /* bright teal accent             */
  --sky:          #3f9aa6;   /* teal-blue mid                  */
  --sky-deep:     #2c7f8a;
  --ink:          #2a2018;   /* warm dark (text on cream)      */
  --cream-70:     rgba(245,236,219,.80);
  --cream-45:     rgba(245,236,219,.52);
  --maxw:         1180px;
  --serif:        "Playfair Display", Georgia, serif;
  --serif2:       "Cormorant Garamond", Georgia, serif;
  --sans:         "Jost", "Helvetica Neue", Arial, sans-serif;
  --script:       "Caveat", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--orange); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--orange);
}
.eyebrow.cream { color: var(--cream-70); }

.script { font-family: var(--script); font-weight: 600; }

.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--oxblood-deep);
  color: var(--cream);
}
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
}
.nav .brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream);
}
.nav .brand .logo {
  font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .5px; line-height: 1;
}
.nav .brand .logo b { color: var(--orange); font-weight: 800; font-style: italic; }
.nav .brand .tag {
  display:block; font-family: var(--sans); font-size: 9.5px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--cream-45); margin-top: 4px;
}
.nav .links { display: flex; align-items: center; gap: 6px; }
.nav .links a {
  text-decoration: none; color: var(--cream-70);
  text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; font-weight: 400;
  padding: 8px 14px; transition: color .15s;
}
.nav .links a:hover, .nav .links a.active { color: var(--cream); }
.nav .links a.pill {
  border: 1px solid var(--orange); color: var(--orange); border-radius: 40px; padding: 8px 20px;
}
.nav .links a.pill:hover { background: var(--orange); color: #fff; }
.menu-toggle {
  display:none; background: none; border: 1px solid var(--cream-45); color: var(--cream);
  font-size: 18px; padding: 5px 12px; border-radius: 4px; cursor: pointer;
}

/* =========================================================
   Oxblood sections
   ========================================================= */
.ox { background: var(--oxblood); color: var(--cream); position: relative; }
.ox-deep { background: var(--oxblood-deep); color: var(--cream); }
.cream-sec { background: var(--cream); color: var(--ink); }
.cream-deep-sec { background: var(--cream-deep); color: var(--ink); }

section { padding: 96px 0; position: relative; }

/* ---------- Photo placeholders (B&W western) ---------- */
.photo {
  position: relative; overflow: hidden; background: #2b2622;
  filter: grayscale(100%) contrast(1.05);
}
.photo svg { width: 100%; height: 100%; display: block; }
.photo .cap {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-family: var(--sans);
}
.polaroid {
  background: #fff; padding: 10px 10px 34px; box-shadow: 0 14px 30px rgba(0,0,0,.35);
  transform: rotate(3deg);
}
.polaroid .photo { height: 200px; }
.polaroid .label { font-family: var(--script); font-size: 20px; color: #333; text-align: center; margin-top: 6px; }
.tape {
  position: absolute; width: 90px; height: 26px; background: rgba(243,235,220,.5);
  top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg);
}

/* =========================================================
   Full-screen image hero
   ========================================================= */
.hero-full {
  position: relative;
  min-height: calc(100vh - 62px);
  display: flex; align-items: flex-end; justify-content: center;
  text-align: center; overflow: hidden; background: #140c0a;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 62%;
  transform: scale(1.03);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(20,12,10,.32), rgba(20,12,10,.6) 72%),
    linear-gradient(to bottom, rgba(20,12,10,.72) 0%, rgba(20,12,10,.18) 26%, rgba(20,12,10,.34) 62%, rgba(73,26,19,.9) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 880px; margin: 0 auto; padding: 50px 28px 30px;
}
.hero-content .circle-cta { margin-bottom: 0; }
.hero-content .kicker { color: var(--cream); text-shadow: 0 2px 22px rgba(0,0,0,.65); }
.hero-content .sub { color: #f4ecdd; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.hero-content .eyebrow.cream { color: var(--cream); text-shadow: 0 1px 10px rgba(0,0,0,.7); }

/* Original bold-serif hero text (restored) */
.hero-content .hero-badge {
  display: inline-block; font-family: var(--sans);
  border: 2px solid var(--gold); color: var(--gold);
  text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 500;
  padding: 8px 22px; border-radius: 40px; margin-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.hero-title {
  font-family: var(--serif); font-style: normal; font-weight: 800;
  font-size: clamp(38px, 6.4vw, 66px); line-height: 1.05; color: var(--cream);
  margin: 0 auto 22px; max-width: 900px;
  text-shadow: 0 3px 26px rgba(0,0,0,.72);
}
.hero-title em { font-style: normal; color: var(--orange-soft); }
.hero-lead {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.6; color: #f4ecdd;
  max-width: 620px; margin: 0 auto 32px;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.hero-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 3;
  background: repeating-linear-gradient(90deg,
    var(--orange) 0 18px, var(--gold) 18px 36px, var(--oxblood) 36px 54px,
    var(--sky) 54px 72px, var(--cream) 72px 90px);
}

/* ===== Terracotta + blue palette overrides ===== */
.sky-sec { background: var(--sky); color: #fff; }
.sky-sec .stat .n { color: var(--gold); }
.sky-sec .stat .l { color: rgba(255,255,255,.9); }
.sky-sec .eyebrow.cream { color: #fff; }
.terra-sec { background: var(--orange); color: #fff; }
.terra-sec .stat .n { color: var(--gold); }
.terra-sec .stat .l { color: rgba(255,255,255,.92); }
.terra-sec .eyebrow.cream { color: #fff; }
.nav .brand .logo b, footer.site .logo b { color: var(--gold); font-style: italic; }
.nav .links a.pill { border-color: var(--gold); color: var(--gold); }
.nav .links a.pill:hover { background: var(--gold); color: var(--oxblood-deep); }
.circle-cta a { background: var(--orange); color: #fff; font-weight: 500; }
.circle-cta svg ellipse { stroke: var(--gold); }
.hero-content .hero-badge { border-color: var(--gold); color: var(--gold); }

/* Homepage: landing "Four Points" now cream (dark text); "made for more" now teal (cream text) */
#landing-block .ask { color: var(--ink); }
#landing-block .ask em { color: var(--orange); }
#landing-block .feature h3 { color: var(--ink); }
#landing-block .feature p { color: #4a3d34; }
#landing-block .feature .rule { background: var(--cream-deep); }
#mission-block .eyebrow { color: var(--gold); }
#mission-block .big-head { color: var(--cream); }
#mission-block .big-head em { color: var(--gold); }
#mission-block .lead-sub { color: var(--cream-70); }
#mission-block .annot { color: var(--gold); }
#mission-block .checklist li { border-color: rgba(245,236,219,.18); }
#mission-block .checklist li p { color: var(--cream-70); }
#mission-block .checklist li p strong { color: var(--cream); }
#mission-block .checklist li .ic { border-color: var(--gold); color: var(--gold); }

/* ===== Cream nav bar ===== */
.nav { background: var(--cream); border-bottom: 1px solid var(--cream-deep); }
.nav .brand, .nav .brand .logo { color: var(--ink); }
.nav .brand .logo b { color: var(--orange); }
.nav .brand .tag { color: #8a7f6f; }
.nav .links { background: var(--cream); }
.nav .links a { color: var(--ink); }
.nav .links a:hover, .nav .links a.active { color: var(--orange); }
.nav .links a.pill { border-color: var(--orange); color: var(--orange); }
.nav .links a.pill:hover { background: var(--orange); color: #fff; }
.menu-toggle { background: transparent; color: var(--ink); border: 1px solid var(--cream-deep); min-width: 44px; min-height: 44px; }
@media (max-width: 640px) { footer.site li { margin-bottom: 15px; } footer.site li a { display: inline-block; padding: 3px 0; } }

/* =========================================================
   SHARED COMPONENTS (v2 harness) — used by all new pages.
   Do not duplicate these in page files.
   ========================================================= */

/* =========================================================
   Dropdown navigation
   ========================================================= */
.nav .links { align-items: center; }
.nav .links > a, .nav .links .has-drop > a { padding: 10px 13px; font-size: 12px; letter-spacing: 2px; }
.nav .links a.pill { padding: 9px 20px; }

.has-drop { position: relative; }
.has-drop > a { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.has-drop > a::after {
  content: ""; width: 5px; height: 5px; flex: 0 0 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px,-2px); opacity: .55; transition: transform .18s, opacity .18s;
}
.has-drop:hover > a::after, .has-drop:focus-within > a::after, .has-drop.open > a::after {
  opacity: 1; transform: rotate(225deg) translate(-2px,-1px);
}

.drop-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 250px; background: var(--cream); border: 1px solid var(--cream-deep);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(31,52,46,.20); padding: 9px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 80;
}
/* hover bridge so the panel doesn't close in the gap */
.has-drop::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.has-drop:hover .drop-panel, .has-drop:focus-within .drop-panel, .has-drop.open .drop-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.drop-panel a {
  display: block; padding: 11px 14px; border-radius: 8px; white-space: nowrap;
  text-transform: none; letter-spacing: .2px; font-size: 15px; font-weight: 400;
  color: var(--ink); font-family: var(--sans);
}
.drop-panel a:hover, .drop-panel a:focus { background: #fff; color: var(--orange); }
.drop-panel a .dd { display: block; font-size: 12px; color: #6b5f52; margin-top: 2px; letter-spacing: 0; }
.drop-panel a:hover .dd { color: #5a4c40; }
.drop-panel .sep { height: 1px; background: var(--cream-deep); margin: 6px 10px; }

@media (max-width: 1080px) and (min-width: 861px) {
  .nav .brand .tag { display: none; }
  .nav .links > a, .nav .links .has-drop > a { padding: 10px 9px; font-size: 11px; letter-spacing: 1.4px; }
}

/* ---- Mobile: dropdowns become accordions inside the drawer ---- */
@media (max-width: 860px) {
  .nav .links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--cream); border-bottom: 4px solid var(--orange);
    padding: 10px; gap: 2px; max-height: 78vh; overflow-y: auto;
    box-shadow: 0 18px 40px rgba(31,52,46,.22);
  }
  .nav .links.open { display: flex; }
  .menu-toggle { display: block; }
  .nav .wrap { position: relative; }
  .nav .links > a, .nav .links .has-drop > a { width: 100%; padding: 14px 12px; font-size: 13px; }
  .has-drop { width: 100%; }
  .has-drop > a { justify-content: space-between; }
  .drop-panel {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: none; box-shadow: none; border: 0; background: transparent;
    padding: 0 0 6px 12px; min-width: 0; border-left: 2px solid var(--cream-deep);
    margin: 0 0 6px 12px;
  }
  .has-drop.open .drop-panel { display: block; transform: none; }
  .drop-panel a { padding: 12px 12px; font-size: 15px; }
  .nav .links a.pill { text-align: center; margin-top: 8px; }
}

/* ---- Readable image scrim (text over photos) ---- */
.scrim { position: relative; }
.scrim > img, .scrim > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrim::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18,84,90,.55), rgba(18,84,90,.78)); }
.scrim > .scrim-body { position: relative; z-index: 2; }

/* ---- Page intro band ---- */
.page-hero { background: var(--oxblood); color: var(--cream); padding: 76px 0; text-align: center; }
.page-hero h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(34px,5.4vw,54px); margin: 10px 0 0; color: var(--cream); }
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero p { max-width: 620px; margin: 18px auto 0; color: var(--cream-70); }

/* ---- Search + filter bar ---- */
.filterbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
.filterbar input[type=search] {
  flex: 1 1 260px; padding: 13px 16px; border: 1px solid var(--cream-deep);
  border-radius: 40px; font-family: var(--sans); font-size: 16px; background: #fff; color: var(--ink); }
.filterbar input[type=search]:focus { outline: none; border-color: var(--orange); }
.chip {
  border: 1px solid var(--cream-deep); background: #fff; color: var(--ink);
  padding: 10px 18px; border-radius: 40px; font-family: var(--sans); font-size: 13px;
  cursor: pointer; min-height: 44px; }
.chip:hover { border-color: var(--orange); }
.chip.active { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ---- Directory list ---- */
.dir-group { margin-bottom: 40px; }
.dir-group h3 {
  font-family: var(--serif); font-size: 22px; color: var(--oxblood); margin: 0 0 14px;
  border-bottom: 2px solid var(--gold); padding-bottom: 8px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.dir-item { background: #fff; border: 1px solid var(--cream-deep); border-radius: 10px; padding: 16px 18px; }
.dir-item .nm { font-weight: 500; font-size: 16px; color: var(--ink); }
.dir-item .meta { font-size: 13.5px; color: #6b5f52; margin-top: 3px; }
.dir-item a { text-decoration: none; }
.dir-count { font-size: 13px; color: #6b5f52; margin-bottom: 18px; }

/* ---- Sponsor logo grid (logos stay FULL COLOUR) ---- */
.sponsor-tier { margin-bottom: 44px; }
.sponsor-tier h3 { font-family: var(--serif); font-size: 24px; color: var(--orange); margin: 0 0 4px; }
.sponsor-tier .amt { font-size: 13px; color: #6b5f52; margin-bottom: 16px; }
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 18px; }
.sponsor-card {
  background: #fff; border: 1px solid var(--cream-deep); border-radius: 12px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 150px; text-decoration: none; }
.sponsor-card img { max-height: 84px; max-width: 100%; object-fit: contain; filter: none; }
.sponsor-card .nm { font-family: var(--serif); font-size: 17px; color: var(--ink); margin-top: 10px; }
.sponsor-card .lvl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--orange); margin-top: 4px; }
.sponsor-card.past { opacity: .72; }

/* ---- Sponsorship tier cards ---- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
.tier {
  background: #fff; border: 1px solid var(--cream-deep); border-radius: 12px;
  padding: 26px 24px; display: flex; flex-direction: column; }
.tier.featured { border: 2px solid var(--orange); }
.tier .badge {
  display: inline-block; background: var(--orange); color: #fff; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; align-self: flex-start; }
.tier h3 { font-family: var(--serif); font-size: 23px; color: var(--oxblood); margin: 0 0 2px; }
.tier .price { font-family: var(--serif); font-size: 30px; font-weight: 800; color: var(--orange); margin-bottom: 12px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 20px; }
.tier li { font-size: 14px; color: #4a3d34; padding: 6px 0 6px 20px; position: relative; line-height: 1.5; }
.tier li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }
.tier .btn { margin-top: auto; text-align: center; }

/* ---- Public forms on cream ---- */
.form-card { background: #fff; border: 1px solid var(--cream-deep); border-radius: 14px; padding: 34px; max-width: 760px; margin: 0 auto; }
.form-card h3 { font-family: var(--serif); color: var(--oxblood); font-size: 24px; margin: 0 0 6px; }
.form-card .hint { font-size: 14px; color: #6b5f52; margin: 0 0 22px; }
.form-card label { display: block; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; color: #6b5f52; margin-bottom: 6px; font-weight: 500; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--cream-deep); border-radius: 8px;
  font-family: var(--sans); font-size: 16px; background: var(--cream); color: var(--ink); }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--orange); }
.form-card .field { margin-bottom: 18px; }
.form-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-card .row3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.form-note { font-size: 12.5px; color: #7a6f5f; text-align: center; margin-top: 14px; line-height: 1.5; }
.form-ok { background: #e5f3ec; color: #1f6e4f; border-radius: 10px; padding: 24px; text-align: center; }
.form-err { background: #fbe6e6; color: #8a2b2b; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; }

/* ---- Info cards (education / projects / contact) ---- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; }
.info-card { background: #fff; border: 1px solid var(--cream-deep); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.info-card .ph { height: 170px; background: var(--oxblood); }
.info-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.info-card .bd { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }
.info-card .kicker { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--orange); font-weight: 500; }
.info-card h3 { font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 6px 0 8px; }
.info-card p { font-size: 14.5px; color: #4a3d34; margin: 0 0 12px; }
.info-card .go { margin-top: auto; font-size: 14px; font-weight: 500; }
.status-pill { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  padding: 3px 11px; border-radius: 20px; background: var(--cream-deep); color: #7a5a34; }
.status-pill.active { background: #dcefe8; color: #1f6e4f; }

/* ---- Contact list ---- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
.contact-card { background: #fff; border: 1px solid var(--cream-deep); border-radius: 12px; padding: 24px; text-align: center; }
.contact-card .av { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 12px; overflow: hidden;
  background: var(--oxblood); color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 800; font-size: 24px; }
.contact-card .av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.contact-card h4 { font-family: var(--serif); font-size: 19px; margin: 0 0 3px; color: var(--ink); }
.contact-card .role { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--orange); }
.contact-card .biz { font-family: var(--serif2); font-style: italic; font-size: 14.5px; color: #6b5f52; margin-top: 4px; }
.contact-card .lnk { font-size: 14px; margin-top: 10px; word-break: break-word; }

/* ---- CTA button row for event pages ---- */
.cta-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; max-width: 800px; margin: 0 auto; }
.cta-3 .btn { text-align: center; }

/* ---- Map ---- */
.map-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--cream-deep); line-height: 0; }
.map-wrap iframe { width: 100%; height: 380px; border: 0; }

/* =========================================================
   CONTRAST CORRECTIONS
   Terracotta on teal measures 1.33:1 (effectively invisible).
   Accents are remapped per background so every combination
   meets WCAG AA. Do not reintroduce terracotta text on teal.
   ========================================================= */
:root {
  --gold-light: #fbe6a0;  /* small accent text on teal      */
  --terra-text: #8f4223;  /* small terracotta text on cream */
}

/* --- Accents on TEAL / DEEP TEAL backgrounds --- */
.ox .eyebrow, .ox-deep .eyebrow, .page-hero .eyebrow,
.ox .kicker, .ox-deep .kicker,
.ox .ed-card .kicker, .ox-deep .ed-card .kicker,
.ox .event-row .meta, .ox-deep .event-row .meta,
.ox .member .role, .ox-deep .member .role,
.ox .info-card .kicker, .ox-deep .info-card .kicker,
.ox .feature .num, .ox-deep .feature .num,
.ox .num, .ox-deep .num {
  color: var(--gold-light);
}
/* Large display accents can carry the deeper gold */
.ox .giant-sm em, .ox-deep .giant-sm em,
.ox .giant em, .ox-deep .giant em,
.ox .big-head em, .ox-deep .big-head em,
.ox .ask em, .ox-deep .ask em,
.page-hero h1 em, .ox .kicker em, .ox-deep .kicker em {
  color: var(--gold);
}
/* Body copy on teal stays cream, never muted terracotta */
.ox .head-c p, .ox-deep .head-c p { color: var(--cream-70); }
.ox a:not(.btn):not(.pill), .ox-deep a:not(.btn):not(.pill) {
  color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px;
}

/* --- LIGHT CARDS NESTED IN DARK SECTIONS ---
   These cards are always white, even when their parent section is teal.
   The rules above are written for teal backgrounds, so they must NOT
   cascade into these cards or the text turns pale-on-white (invisible).
   Applies to: sponsorship tiers, form cards, info/contact/sponsor cards,
   and directory items. --- */
.ox .tier, .ox-deep .tier,
.ox .form-card, .ox-deep .form-card,
.ox .info-card, .ox-deep .info-card,
.ox .contact-card, .ox-deep .contact-card,
.ox .sponsor-card, .ox-deep .sponsor-card,
.ox .dir-item, .ox-deep .dir-item { color: var(--ink); }

.ox .tier li, .ox-deep .tier li,
.ox .info-card p, .ox-deep .info-card p { color: #4a3d34; }

.ox .tier h3, .ox-deep .tier h3,
.ox .info-card h3, .ox-deep .info-card h3,
.ox .contact-card h4, .ox-deep .contact-card h4,
.ox .form-card h3, .ox-deep .form-card h3 { color: var(--oxblood); }

.ox .tier .price, .ox-deep .tier .price { color: var(--terra-text); }

.ox .tier .eyebrow, .ox-deep .tier .eyebrow,
.ox .form-card .eyebrow, .ox-deep .form-card .eyebrow,
.ox .info-card .kicker, .ox-deep .info-card .kicker,
.ox .contact-card .role, .ox-deep .contact-card .role,
.ox .sponsor-card .lvl, .ox-deep .sponsor-card .lvl,
.ox .form-card label, .ox-deep .form-card label { color: var(--terra-text); }

.ox .form-card .hint, .ox-deep .form-card .hint,
.ox .form-card .form-note, .ox-deep .form-card .form-note,
.ox .contact-card .biz, .ox-deep .contact-card .biz,
.ox .dir-item .meta, .ox-deep .dir-item .meta { color: #6b5f52; }

.ox .tier a:not(.btn), .ox-deep .tier a:not(.btn),
.ox .form-card a:not(.btn), .ox-deep .form-card a:not(.btn),
.ox .info-card a:not(.btn), .ox-deep .info-card a:not(.btn),
.ox .contact-card a:not(.btn), .ox-deep .contact-card a:not(.btn),
.ox .dir-item a, .ox-deep .dir-item a { color: var(--terra-text); }

/* Cards keep their own light borders inside dark sections */
.ox .tier, .ox-deep .tier, .ox .form-card, .ox-deep .form-card { border-color: var(--cream-deep); }

/* --- Accents on the TERRACOTTA band (gold fails there) --- */
.terra-sec .stat .n { color: #fff; }
.terra-sec .stat .l { color: rgba(255,255,255,.94); }
.terra-sec .eyebrow, .terra-sec .eyebrow.cream { color: #fff; }
.terra-sec a:not(.btn) { color: #fff; text-decoration: underline; }

/* --- Small terracotta text on CREAM needs to be darker --- */
.cream-sec .eyebrow, .cream-deep-sec .eyebrow,
.cream-sec .info-card .kicker, .cream-deep-sec .info-card .kicker,
.cream-sec .member .role, .cream-deep-sec .member .role,
.cream-sec .event-row .meta, .cream-deep-sec .event-row .meta,
.contact-card .role, .dir-item .meta strong,
.form-card label, .sponsor-card .lvl, .info-card .kicker {
  color: var(--terra-text);
}
/* Muted body copy: ensure it is dark enough on cream */
.cream-sec .lead-sub, .cream-deep-sec .lead-sub { color: #5a4c40; }

/* --- Photo captions must stay legible --- */
.photo .cap { background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 4px; color: #fff; }

/* --- Mobile: hide the decorative "on the road" polaroid ---
   It is absolutely positioned and crowded the "See Our Road to
   MainStreet" button on small screens. Purely decorative, so it is
   hidden below 860px rather than reflowed. --- */
@media (max-width: 860px) {
  #landing-block .polaroid { display: none; }
  .btn, .circle-cta { position: relative; z-index: 3; }
}

/* ---- Village logo (subtle) ---- */
.village-logo { display: inline-flex; align-items: center; gap: 10px; opacity: .85; }
.village-logo img { height: 46px; width: auto; }
.village-logo span { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cream-45); }

@media (max-width: 640px) {
  .form-card { padding: 22px 18px; }
  .form-card .row2, .form-card .row3 { grid-template-columns: 1fr; gap: 0; }
  .form-card .row2 > *, .form-card .row3 > * { margin-bottom: 18px; }
  .page-hero { padding: 56px 0; }
  .map-wrap iframe { height: 280px; }
  .dir-grid { grid-template-columns: 1fr; }
}
.photo-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--oxblood); color: var(--gold);
  font-family: var(--serif); font-weight: 800; font-size: 44px; letter-spacing: 1px;
  filter: none;
}
/* Event flyer / photo (kept in colour so flyers read correctly) */
.event-flyer { float: right; width: 210px; margin: 4px 0 14px 24px; }
.event-flyer img { width: 100%; display: block; border: 1px solid var(--cream-deep); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.ox .event-flyer img, .ox-deep .event-flyer img { border-color: rgba(245,236,219,.22); }
@media (max-width: 640px) { .event-flyer { float: none; width: 100%; margin: 0 0 16px; } }

/* =========================================================
   Hero (legacy tile hero — kept for inner pages)
   ========================================================= */
.hero { padding: 70px 0 90px; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 0; position: relative;
  text-align: center; max-width: 880px; margin: 0 auto;
}
.hero .kicker {
  font-family: var(--serif); font-style: italic; font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.15; color: var(--cream); margin: 0 auto 8px; max-width: 760px;
}
.hero .kicker em { color: var(--orange); font-weight: 800; }
.hero .sub {
  text-transform: uppercase; letter-spacing: 3px; font-size: 13px; color: var(--cream-70);
  max-width: 540px; margin: 18px auto 30px; line-height: 2;
}
.hero-photos {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px;
  margin-bottom: 46px; align-items: end;
}
.hero-photos .p1 { grid-column: 2 / 6;  height: 230px; }
.hero-photos .p2 { grid-column: 6 / 9;  height: 300px; margin-top: -30px; }
.hero-photos .p3 { grid-column: 9 / 12; height: 200px; }

/* Hand-drawn circle CTA */
.circle-cta { position: relative; display: inline-block; padding: 6px 10px; }
.circle-cta a {
  position: relative; z-index: 2;
  display: inline-block; text-decoration: none;
  background: var(--orange); color: #fff;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  padding: 14px 30px; border-radius: 40px;
}
.circle-cta svg {
  position: absolute; top: -14px; left: -18px; width: calc(100% + 36px); height: calc(100% + 28px);
  z-index: 1; overflow: visible;
}
.circle-cta svg ellipse { fill: none; stroke: var(--gold); stroke-width: 2.4; }

/* =========================================================
   Giant centerpiece word + numbered features
   ========================================================= */
.centerpiece { text-align: center; }
.giant {
  font-family: var(--serif); font-weight: 800; color: var(--orange);
  font-size: clamp(64px, 15vw, 168px); line-height: .9; letter-spacing: 1px; margin: 0;
}
.giant em { font-style: italic; font-weight: 400; }
.ask {
  font-family: var(--serif); font-weight: 400; color: var(--cream);
  font-size: clamp(24px, 3.6vw, 38px); line-height: 1.35; max-width: 720px;
  margin: 26px auto 0;
}
.ask em { font-style: italic; color: var(--orange); }

.features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  margin-top: 70px; text-align: left;
}
.feature .num {
  font-family: var(--serif); font-style: italic; color: var(--orange);
  font-size: 30px; font-weight: 600; line-height: 1;
}
.feature .rule { height: 1px; background: var(--cream-45); margin: 14px 0 16px; }
.feature h3 {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 2px;
  font-size: 14px; font-weight: 500; color: var(--cream); margin: 0 0 12px; line-height: 1.5;
}
.feature p { font-size: 14px; color: var(--cream-70); margin: 0; line-height: 1.75; }

/* =========================================================
   Cream editorial section
   ========================================================= */
.editorial { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.editorial.flip { grid-template-columns: 1.1fr 1fr; }
.editorial .big-head {
  font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05; color: var(--ink); margin: 14px 0 0;
}
.editorial .big-head em { font-style: italic; font-weight: 400; color: var(--orange); }
.editorial .lead-sub {
  text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: #6c5c50;
  line-height: 2; margin: 24px 0; max-width: 460px;
}
.editorial .annot { font-family: var(--script); font-size: 30px; color: var(--orange); transform: rotate(-3deg); display:inline-block; margin: 6px 0; }

.checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.checklist li { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--cream-deep); }
.checklist li .ic {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--orange); color: var(--orange);
  display:flex; align-items:center; justify-content:center; font-size: 15px; margin-top: 2px;
}
.checklist li p { margin: 0; font-size: 15.5px; color: #4a3d34; }
.checklist li p strong { color: var(--ink); font-weight: 500; }

/* Image stack for editorial */
.img-stack { position: relative; min-height: 420px; }
.img-stack .photo.main { height: 360px; }
.img-stack .polaroid { position: absolute; right: -10px; bottom: -20px; width: 200px; transform: rotate(5deg); }

/* =========================================================
   Section heading (generic)
   ========================================================= */
.head-c { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.head-c .giant-sm {
  font-family: var(--serif); font-weight: 800; font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05; margin: 14px 0 0;
}
.ox .head-c .giant-sm { color: var(--cream); }
.cream-sec .head-c .giant-sm, .cream-deep-sec .head-c .giant-sm { color: var(--ink); }
.head-c .giant-sm em { font-style: italic; color: var(--orange); font-weight: 400; }
.head-c p { font-size: 16px; margin: 18px 0 0; }
.ox .head-c p { color: var(--cream-70); }

/* =========================================================
   Cards (events / board / committees)
   ========================================================= */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.ed-card {
  background: var(--cream); border: 1px solid var(--cream-deep);
  padding: 0; overflow: hidden;
}
.ox .ed-card { background: var(--oxblood-soft); border-color: rgba(243,235,220,.14); }
.ed-card .photo { height: 180px; }
.ed-card .body { padding: 26px 26px 30px; }
.ed-card .num { font-family: var(--serif); font-style: italic; color: var(--orange); font-size: 26px; }
.ed-card h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 6px 0 10px; line-height: 1.2; }
.ox .ed-card h3 { color: var(--cream); }
.ed-card p { font-size: 14.5px; margin: 0; }
.ox .ed-card p { color: var(--cream-70); }
.ed-card .kicker { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--orange); font-weight: 500; }

/* Event row */
.event-row { display: grid; grid-template-columns: 130px 1fr; gap: 30px; align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--cream-deep); }
.ox .event-row { border-color: rgba(243,235,220,.16); }
.event-row .when {
  font-family: var(--serif); text-align: left;
}
.event-row .when .d { font-size: 46px; font-weight: 800; line-height: .9; color: var(--orange); }
.event-row .when .m { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-family: var(--sans); }
.ox .event-row .when .m { color: var(--cream-70); }
.event-row h3 { font-family: var(--serif); font-weight: 600; font-size: 26px; margin: 0 0 6px; }
.ox .event-row h3 { color: var(--cream); }
.event-row .meta { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--orange); margin-bottom: 12px; }
.event-row p { margin: 0; font-size: 15px; }
.ox .event-row p { color: var(--cream-70); }

/* Board members */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.member { text-align: center; }
.member .photo { height: 230px; margin-bottom: 16px; }
.member h4 { font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 0; }
.ox .member h4 { color: var(--cream); }
.member .role { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--orange); margin: 6px 0 2px; }
.member .biz { font-size: 14px; color: #6c5c50; font-style: italic; font-family: var(--serif2); }
.ox .member .biz { color: var(--cream-70); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  padding: 16px 34px; border-radius: 40px; transition: transform .12s, background .15s, color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #c9471a; }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-ghost-cream { background: transparent; color: var(--cream); border: 1px solid var(--cream-45); }
.btn-ghost-cream:hover { background: var(--cream); color: var(--ink); }
.btn-ghost-ink { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost-ink:hover { background: var(--ink); color: var(--cream); }
.btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   Stats strip
   ========================================================= */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.stat .n { font-family: var(--serif); font-weight: 800; font-size: 52px; color: var(--orange); line-height: 1; }
.stat .l { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--cream-70); margin-top: 10px; }

/* =========================================================
   Form
   ========================================================= */
.formwrap { max-width: 760px; margin: 0 auto; }
.field { margin-bottom: 22px; }
.field.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.checks { display: grid; gap: 12px; margin-top: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgba(0,0,0,.14); }
.check input { width: auto; margin-top: 5px; }

/* --- Forms placed directly on a DARK teal section (.formwrap) --- */
.formwrap .field label { display:block; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--cream-70); margin-bottom: 8px; }
.formwrap .field input, .formwrap .field textarea, .formwrap .field select {
  width: 100%; padding: 14px 16px; border: 1px solid rgba(243,235,220,.35);
  background: rgba(255,255,255,.10); color: var(--cream); font-family: var(--sans); font-size: 16px;
}
.formwrap .field input::placeholder, .formwrap .field textarea::placeholder { color: rgba(243,235,220,.62); }
.formwrap .field input:focus, .formwrap .field textarea:focus, .formwrap .field select:focus {
  outline: none; border-color: var(--gold); background: rgba(255,255,255,.16);
}
.formwrap .check { border-color: rgba(243,235,220,.28); }
.formwrap .check span { font-size: 14px; color: var(--cream); }
.formwrap .check span small { display: block; color: var(--cream-70); }

/* --- Forms inside a light card (.form-card) — must stay dark on white ---
   These were previously overridden by the dark rules above, which made
   labels and typed text near-white on a white card (invisible). --- */
.form-card .field label,
.form-card label {
  display: block; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px;
  color: var(--terra-text); margin-bottom: 6px; font-weight: 500;
}
.form-card .field input, .form-card .field textarea, .form-card .field select,
.form-card input, .form-card textarea, .form-card select {
  width: 100%; padding: 13px 15px; border: 1px solid #cbbb9d; border-radius: 8px;
  background: #fff; color: var(--ink); font-family: var(--sans); font-size: 16px;
}
.form-card input::placeholder, .form-card textarea::placeholder { color: #6f6355; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(187,90,52,.15);
}
.form-card .check { border-color: #ded0b4; background: var(--cream); }
.form-card .check span { color: var(--ink); font-size: 14px; }
.form-card .check span small { display: block; color: #6b5f52; }
.form-card .hint, .form-card .form-note { color: #6b5f52; }
.form-card fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.form-card legend { font-family: var(--serif); font-size: 18px; color: var(--oxblood); padding: 0 0 8px; }

/* =========================================================
   Footer
   ========================================================= */
footer.site { background: var(--oxblood-deep); color: var(--cream-70); padding: 70px 0 30px; }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; }
footer.site .logo { font-family: var(--serif); font-size: 26px; color: var(--cream); }
footer.site .logo b { color: var(--orange); font-style: italic; }
footer.site p { max-width: 360px; font-size: 14px; }
footer.site h5 { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--cream); margin: 0 0 16px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 11px; }
footer.site a { color: var(--cream-70); text-decoration: none; font-size: 14px; }
footer.site a:hover { color: var(--orange); }
footer.site .bottom { border-top: 1px solid rgba(243,235,220,.14); margin-top: 46px; padding-top: 22px;
  text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--cream-45); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .features { grid-template-columns: 1fr 1fr; gap: 30px; }
  .editorial, .editorial.flip { grid-template-columns: 1fr; gap: 36px; }
  .grid3, .board { grid-template-columns: 1fr 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }
  /* Mobile drawer styling now lives in the dropdown-nav block above.
     The old dark-drawer rules were removed: they overrode the cream
     drawer and left dark text on a dark background. */
  .features, .grid3, .grid2, .board, .field.row2, .stats { grid-template-columns: 1fr; }
  .hero-photos { gap: 10px; }
  .hero-photos .p1 { grid-column: 1 / 5; height: 150px; }
  .hero-photos .p2 { grid-column: 5 / 9; height: 190px; margin-top: 0; }
  .hero-photos .p3 { grid-column: 9 / 13; height: 150px; }
  .event-row { grid-template-columns: 90px 1fr; gap: 18px; }
  .img-stack .polaroid { position: relative; right: auto; bottom: auto; margin: 20px auto 0; }
  body { font-size: 16px; }
}