/* =========================================================
   Brazos Valley Living · shared styles
   Source of truth for header, footer, contact, buttons, vars
   ========================================================= */

:root{
  --butter:#FAFAF5;
  --paper:#FCFCF8;
  --ink:#34291F;
  --ink-2:#3F3326;
  --rust:#C0613F;
  --rust-d:#9A4A2E;
  --turq:#4F948C;
  --turq-d:#3A726B;
  --ochre:#E0AE5E;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  color:var(--ink);
  font-family:"Figtree",sans-serif;
  font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.slab{font-family:"Zilla Slab",serif;}
.wrap{max-width:1180px;margin:0 auto;padding:0 5vw;}

/* Rise-in animation */
.rise{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}
.d4{animation-delay:.44s}.d5{animation-delay:.57s}

/* Generic placeholder swatch (for mock images) */
.placeholder{
  background:repeating-linear-gradient(45deg,rgba(52,41,31,.06) 0 14px,rgba(52,41,31,.1) 14px 28px);
  display:flex;align-items:center;justify-content:center;
  color:rgba(52,41,31,.5);font-weight:600;font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;
}

/* ========== HEADER ========== */
header.site{
  background:var(--paper);
  border-bottom:1px solid rgba(52,41,31,.14);
  position:sticky;top:0;z-index:50;
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1.4rem;padding-bottom:1.4rem;
}
.brandmark{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit;}
.brandmark:hover .bm-text b{color:var(--rust);}
.brandmark svg,.brandmark img{
  width:68px;height:68px;display:block;object-fit:contain;
}
.brandmark .bm-text b{
  font-family:"Zilla Slab",serif;font-weight:600;font-size:1.08rem;
  letter-spacing:.01em;display:block;line-height:1.1;
  color:var(--ink);
}
.brandmark .bm-text span{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rust);font-weight:600;
}
nav.main{display:flex;align-items:center;gap:1.9rem;}
nav.main a:not(.nav-cta){
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.92rem;
}
nav.main a:not(.nav-cta):hover{color:var(--rust);}
.nav-cta{
  background:var(--rust);color:var(--paper);
  padding:.85rem 1.75rem;font-weight:500;font-size:.95rem;
  letter-spacing:.01em;border:none;border-radius:5px;cursor:pointer;
  font-family:"Figtree",sans-serif;text-decoration:none;display:inline-block;
  line-height:1;
}
.nav-cta:hover{background:var(--rust-d);}
.menu-btn{display:none;background:none;border:none;color:var(--ink);font-size:1.5rem;cursor:pointer;}

/* ========== BUTTONS ========== */
.btn-primary{
  background:var(--ink);color:var(--paper);
  padding:.85rem 1.6rem;font-weight:600;font-size:.85rem;letter-spacing:.03em;
  border:none;border-radius:3px;cursor:pointer;font-family:"Figtree",sans-serif;
  text-decoration:none;display:inline-block;text-align:center;
}
.btn-primary:hover{background:var(--rust);}
.btn-secondary{
  background:var(--turq);border:none;border-radius:3px;color:var(--paper);
  padding:.85rem 1.6rem;font-weight:600;font-size:.85rem;letter-spacing:.03em;
  cursor:pointer;font-family:"Figtree",sans-serif;
  text-decoration:none;display:inline-block;text-align:center;
}
.btn-secondary:hover{background:var(--turq-d);}

/* ========== CONTACT SECTION ========== */
section.contact{
  background:var(--butter);color:var(--ink);
  padding:5rem 0;
  text-align:center;
  border-top:1px solid rgba(52,41,31,.12);
  position:relative;z-index:3;
  box-shadow:0 -18px 40px rgba(28,20,14,0.42);
}
.contact .eyebrow{
  font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rust);margin-bottom:.9rem;
}
.contact h2{
  font-family:"Zilla Slab",serif;font-weight:600;
  font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.06;margin-bottom:.8rem;
}
.contact p{
  font-size:1.04rem;color:var(--ink-2);max-width:44ch;margin:0 auto 1.7rem;
}

/* ========== TESTIMONIALS ========== */
section.testimonials{
  background:var(--butter);color:var(--ink);
  padding:5rem 0;
  border-top:1px solid rgba(52,41,31,.12);
}
.testimonials .eyebrow{
  font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rust);margin-bottom:.9rem;text-align:center;
}
.testimonials h2{
  font-family:"Zilla Slab",serif;font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.08;
  text-align:center;margin-bottom:2.6rem;
}
.tm-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1.4rem;align-items:stretch;
}
.tm-card{
  background:var(--paper);border:1px solid rgba(52,41,31,.12);
  border-radius:6px;padding:1.9rem 1.7rem;
  display:flex;flex-direction:column;gap:1.1rem;
  box-shadow:0 1px 3px rgba(52,41,31,.05);
}
.tm-quote{
  font-family:"Zilla Slab",serif;font-style:italic;
  font-size:1.05rem;line-height:1.5;color:var(--ink-2);margin:0;
}
.tm-quote::before{
  content:"\201C";color:var(--ochre);font-style:normal;
  font-family:Georgia,serif;font-size:2.4rem;line-height:0;
  vertical-align:-0.36em;margin-right:.05em;
}
.tm-attr{
  font-family:"Figtree",sans-serif;font-weight:600;font-size:.9rem;
  color:var(--rust);margin-top:auto;line-height:1.35;
}
.tm-attr span{display:block;color:var(--ink-2);font-weight:500;font-size:.82rem;opacity:.85;}
.tm-note{
  text-align:center;font-size:.82rem;color:var(--ink-2);opacity:.65;
  font-style:italic;margin:2rem auto 0;max-width:52ch;
}
.tm-placeholder .tm-card{border-style:dashed;background:transparent;box-shadow:none;}
.tm-placeholder .tm-quote{opacity:.55;}

/* ========== FOOTER ========== */
footer.site{
  background:var(--paper);border-top:1px solid rgba(52,41,31,.14);
  padding:3.4rem 0 2.6rem;position:relative;z-index:3;
}
.footer-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.footer-grid .fcol b{
  font-family:"Zilla Slab",serif;font-weight:600;
  font-size:.82rem;letter-spacing:.04em;color:var(--rust);display:block;margin-bottom:.6rem;
}
.footer-grid .fcol p,.footer-grid .fcol a{
  font-size:.86rem;color:var(--ink-2);display:block;text-decoration:none;line-height:1.7;
}
.footer-grid .fcol a:hover{color:var(--rust);}
.footer-legal{
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(52,41,31,.14);
  font-size:.74rem;color:#8A7E6C;line-height:1.7;
}

/* ========== RESPONSIVE ========== */
@media(max-width:768px){
  nav.main{display:none;}
  .menu-btn{display:block;}
}

/* ========== HUB DESTINATION PAGES (Towns / Market / Guides / FAQ) ========== */
.hub-hero{
  position:relative;min-height:340px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:3.5rem 0 3rem;background:var(--turq);
}
.hub-hero-img{position:absolute;inset:0;z-index:0;view-transition-name:vt-hero-img;}
.hub-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
/* Gradient baked into the named element so it is captured in the view-transition
   snapshot and morphs WITH the image (no bright flash mid-transition). */
.hub-hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,14,8,.28) 0%,rgba(20,14,8,.80) 100%);
}
.hub-hero .wrap{position:relative;z-index:2;}
.hub-eyebrow{
  font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:.9rem;
}
.hub-hero h1{
  font-family:"Zilla Slab",serif;font-weight:600;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;letter-spacing:-.02em;
  color:var(--paper);view-transition-name:vt-hero-title;
}
.hub-sub{
  font-size:1.06rem;line-height:1.6;color:rgba(252,252,248,.85);
  max-width:54ch;margin-top:.9rem;text-shadow:0 1px 8px rgba(20,14,8,.3);
}
main.hub-main{padding:0 0 5rem;}
.hub-back{
  display:inline-flex;align-items:center;gap:.7rem;
  font-weight:500;font-size:.86rem;color:var(--ink-2);text-decoration:none;
  margin:2.6rem 0 2.4rem;
  animation:hub-fade-up .5s cubic-bezier(.23,1,.32,1) .3s both;
}
.hub-back:hover{color:var(--ink);}
.hub-back .hub-back-arrow{
  width:30px;height:30px;border:1px solid rgba(52,41,31,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .15s;
}
.hub-back:hover .hub-back-arrow{transform:translateX(-3px);border-color:var(--ink);}
.hub-cta{
  margin-top:1.4rem;background:var(--ink);border-radius:5px;padding:2.2rem 2.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  animation:hub-fade-up .5s cubic-bezier(.23,1,.32,1) .9s both;
}
.hub-cta h2{
  font-family:"Zilla Slab",serif;font-weight:600;font-size:1.5rem;
  color:var(--paper);margin-bottom:.4rem;
}
.hub-cta p{font-size:.96rem;color:rgba(252,252,248,.78);max-width:48ch;line-height:1.6;}
.hub-cta .btn-primary{flex-shrink:0;text-decoration:none;display:inline-block;}
@keyframes hub-fade-up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:760px){
  .hub-cta{flex-direction:column;align-items:flex-start;}
}

/* ========== VIEW TRANSITIONS (card morph, shared) ========== */
@view-transition{navigation:auto;}
::view-transition-group(vt-hero-img){animation-duration:.56s;animation-timing-function:cubic-bezier(.23,1,.32,1);}
::view-transition-group(vt-hero-title){animation-duration:.48s;animation-timing-function:cubic-bezier(.23,1,.32,1);}
::view-transition-old(vt-hero-img){animation:.16s ease both vt-fade-out;}
::view-transition-new(vt-hero-img){animation:.32s ease .2s both vt-fade-in;}
::view-transition-old(vt-hero-title){animation:.12s ease both vt-fade-out;}
::view-transition-new(vt-hero-title){animation:.28s ease .22s both vt-fade-in;}
::view-transition-old(root){animation:.28s ease both vt-fade-out;}
::view-transition-new(root){animation:.28s ease .06s both vt-fade-in;}
@keyframes vt-fade-out{to{opacity:0;}}
@keyframes vt-fade-in{from{opacity:0;}}

/* ===================================================================
   HUB SECONDARY PAGES · register systems (Towns / Market / Guides / FAQ)
   Built from the locked Design Lead spec (agency/design-pass/).
   One shared chassis + four content-fitted registers. The BVL parent
   card->hero morph is preserved (one vt-hero-img + one vt-hero-title per
   page). Palette via vars only. The generic .hub-grid/.hub-item is retired.
   =================================================================== */

/* --- Shared: breadcrumb (Tier 3, schema-bearing in HTML) --- */
.hub-crumb{
  font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:2.4rem 0 0;
}
.hub-crumb a{color:var(--ink-2);text-decoration:none;}
.hub-crumb a:hover{color:var(--rust);}
.hub-crumb .sep{color:rgba(52,41,31,.4);margin:0 .5rem;}
.hub-crumb .here{color:var(--ink);}

/* --- Shared: dated publication stamp (live-vs-coming spine) --- */
.hub-dateline{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  border-top:1px solid rgba(52,41,31,.22);
  border-bottom:1px solid rgba(52,41,31,.22);
  padding:1.1rem 0;margin-bottom:2.6rem;
}
.hub-dateline .dl-stamp{
  border:1.5px dashed var(--rust);
  font-family:"Zilla Slab",serif;font-weight:700;
  color:var(--rust);letter-spacing:.2em;font-size:.78rem;text-transform:uppercase;
  padding:.5rem 1rem;flex-shrink:0;
}
.hub-dateline .dl-body{flex:1;min-width:260px;font-size:.95rem;color:var(--ink-2);line-height:1.55;}
.hub-dateline .dl-body em{font-style:italic;color:var(--ink);font-weight:500;}
.hub-dateline .dl-count{font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);flex-shrink:0;}

/* --- Shared: coming-tag (one pattern, color flips per ground) --- */
.coming-tag{font-family:"Zilla Slab",serif;font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .55rem;display:inline-block;white-space:nowrap;}
.coming-tag.on-light{border:1px dashed rgba(192,97,63,.5);color:var(--rust);}
.coming-tag.on-ink{border:1px dashed rgba(224,174,94,.5);color:var(--ochre);}

/* --- Shared: not-advice note (promoted from Guides/FAQ page scope) --- */
.hub-note{font-size:.78rem;color:rgba(52,41,31,.55);font-style:italic;margin-top:1.6rem;max-width:64ch;}

/* --- Shared: focus-visible (rust on light grounds, ochre on dark) --- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rust);outline-offset:3px;border-radius:3px;
}
.hub-hero a:focus-visible,.hub-cta a:focus-visible,.hub-cta button:focus-visible,
a.guide-plate:focus-visible{outline-color:var(--ochre);}

/* --- Shared: entrance reveal (one-shot, begins at the morph's tail) --- */
.hub-reveal{animation:hub-fade-up .55s cubic-bezier(.23,1,.32,1) both;}
.hub-reveal.r1{animation-delay:.45s;}
.hub-reveal.r2{animation-delay:.57s;}
.hub-reveal.r3{animation-delay:.69s;}
.hub-reveal.r4{animation-delay:.81s;}

/* --- Shared: reduced motion (remove movement, never information) --- */
@media (prefers-reduced-motion: reduce){
  .hub-reveal,.hub-fade-up,.rise,.bvl-card,[class*="-reveal"]{animation:none!important;opacity:1!important;transform:none!important;}
  .office-pin::after,.town-pin.is-pinging::after{animation:none!important;display:none!important;}
  .town-pin.is-pinging{transform:none!important;}
  .faq-register details[open] .faq-toggle{transition:none!important;}
  .led-link span,.gp-link span,.faq-readfull span,.gaz-tail .arr,.led-row-arrow .arr{transition:none!important;}
}

/* --- Shared: Leaflet map chrome (Towns; mirrors the Contact map) --- */
.leaflet-container{background:var(--butter)!important;font-family:"Figtree",sans-serif!important;}
.leaflet-tile-pane{filter:sepia(.22) saturate(.78) hue-rotate(-8deg) brightness(1.02);}
.office-pin{width:20px;height:20px;border-radius:50%;background:var(--rust);border:3px solid var(--paper);box-shadow:0 2px 8px rgba(52,41,31,.32),0 0 0 1px rgba(154,74,46,.35);}
.office-pin::after{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(192,97,63,.18);animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(.4);opacity:.7;}100%{transform:scale(1.4);opacity:0;}}
.town-pin{width:13px;height:13px;border-radius:50%;background:var(--turq);border:2.5px solid var(--paper);box-shadow:0 2px 6px rgba(52,41,31,.28);transition:transform .2s ease;}
.town-pin.is-pinging{transform:scale(1.25);}
.town-pin.is-pinging::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(79,148,140,.22);animation:ping 1.2s ease-out;}
.leaflet-popup-content-wrapper{background:var(--paper)!important;color:var(--ink)!important;border:1px solid rgba(52,41,31,.18)!important;border-radius:4px!important;box-shadow:0 10px 28px rgba(28,20,14,.18)!important;}
.leaflet-popup-tip{background:var(--paper)!important;border:1px solid rgba(52,41,31,.18)!important;}
.leaflet-popup-content{margin:14px 18px!important;font-family:"Figtree",sans-serif!important;font-size:.9rem!important;line-height:1.55!important;min-width:200px;}
.pop-title{font-family:"Zilla Slab",serif;font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:.15rem;}
.pop-addr{color:var(--ink-2);font-size:.86rem;margin-bottom:.65rem;}
.pop-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--rust);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(192,97,63,.4);padding-bottom:1px;}
.pop-link:hover{color:var(--rust-d);border-bottom-color:var(--rust-d);}
.pop-coming{color:var(--ink-2);font-size:.78rem;font-style:italic;}
.leaflet-popup-close-button{color:#8A7E6C!important;padding:6px 8px 0 0!important;}
.leaflet-popup-close-button:hover{color:var(--ink)!important;}
.leaflet-control-zoom a{background:var(--paper)!important;color:var(--ink)!important;border:1px solid rgba(52,41,31,.18)!important;font-family:"Zilla Slab",serif!important;font-weight:500!important;}
.leaflet-control-zoom a:hover{background:var(--butter)!important;color:var(--rust)!important;}
.leaflet-control-attribution{background:rgba(252,252,248,.82)!important;font-size:10px!important;color:#8A7E6C!important;}
.leaflet-control-attribution a{color:var(--rust)!important;}

/* --- TOWNS: place index (map spine + county gazetteer) --- */
.towns-split{display:grid;grid-template-columns:1.35fr 1fr;gap:2.4rem;align-items:start;}
/* Sticky map: stays in view while the gazetteer column scrolls past it (header is sticky at top:0) */
.towns-map-frame{position:sticky;top:100px;width:100%;height:clamp(440px,60vh,600px);border:1px solid rgba(52,41,31,.18);background:var(--butter);overflow:hidden;}
.towns-map-frame #townsMap{width:100%;height:100%;}
.gaz-group{margin-bottom:1.8rem;}
.gaz-group:last-child{margin-bottom:0;}
.gaz-group-head{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre);padding-bottom:.6rem;border-bottom:1px solid rgba(52,41,31,.22);margin-bottom:.2rem;}
.gaz-row{display:flex;align-items:baseline;gap:.9rem;padding:.75rem 0;border-bottom:1px solid rgba(52,41,31,.12);text-decoration:none;color:inherit;transition:background .2s ease;}
.gaz-row:last-child{border-bottom:none;}
.gaz-row .gaz-name{font-family:"Zilla Slab",serif;font-weight:600;font-size:1.05rem;color:var(--ink);flex-shrink:0;min-width:8.5rem;}
.gaz-row.is-coming .gaz-name{color:var(--ink-2);}
.gaz-row .gaz-brief{font-size:.83rem;color:var(--ink-2);line-height:1.45;flex:1;}
.gaz-row .gaz-tail{flex-shrink:0;margin-left:auto;align-self:center;}
.gaz-row .gaz-tail .arr{color:var(--rust);font-weight:600;display:inline-block;transition:transform .25s ease;}
a.gaz-row:hover{background:rgba(224,174,94,.07);}
a.gaz-row:hover .gaz-tail .arr{transform:translateX(4px);}
.gaz-row.is-hot{background:rgba(224,174,94,.10);}
.gaz-read{font-family:"Zilla Slab",serif;font-weight:600;font-size:.72rem;letter-spacing:.04em;color:var(--rust);white-space:nowrap;}
a.gaz-row.is-live:hover .gaz-read{text-decoration:underline;text-underline-offset:2px;}

/* --- MARKET: dated dispatch ledger (reverse-chron, enlarged lead) --- */
.led-col{max-width:760px;}
.led-lead{border-top:2px solid var(--ink);padding-top:1.6rem;margin-bottom:.4rem;}
.led-kicker{font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre);margin-bottom:.5rem;}
.led-date{font-family:"Zilla Slab",serif;font-weight:700;font-size:clamp(2rem,4.5vw,3rem);line-height:1;color:var(--ink);margin-bottom:.8rem;}
.led-headline{font-size:1.02rem;color:var(--ink-2);line-height:1.55;max-width:60ch;margin-bottom:1.1rem;}
.led-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--rust);font-weight:600;font-size:.85rem;letter-spacing:.03em;text-decoration:none;border-bottom:1px solid rgba(192,97,63,.4);padding-bottom:1px;}
.led-link span{transition:transform .25s ease;display:inline-block;}
.led-link:hover{color:var(--rust-d);}
.led-link:hover span{transform:translateX(4px);}
.led-row{display:flex;align-items:baseline;gap:1.2rem;padding:1.15rem 0;border-top:1px solid rgba(52,41,31,.22);}
.led-row .led-row-date{font-family:"Zilla Slab",serif;font-weight:700;font-size:1.35rem;color:var(--ink);min-width:9rem;flex-shrink:0;}
.led-row.is-coming .led-row-date{color:var(--ink-2);}
.led-row .led-row-deck{font-size:.92rem;color:var(--ink-2);flex:1;line-height:1.5;}
.led-row .led-row-arrow{margin-left:auto;flex-shrink:0;align-self:center;}
a.led-row{text-decoration:none;color:inherit;}
a.led-row .led-row-arrow .arr{color:var(--rust);font-weight:600;display:inline-block;transition:transform .25s ease;}
a.led-row:hover .led-row-arrow .arr{transform:translateX(4px);}
@media(max-width:600px){
  .led-row{flex-direction:column;gap:.3rem;}
  .led-row .led-row-date{min-width:0;}
  .led-row .led-row-arrow{margin-left:0;}
}

/* --- GUIDES: field-manual shelf (ink plates) --- */
.guide-shelf{max-width:920px;}
.shelf-section-head{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);margin:2rem 0 .9rem;}
.guide-shelf .shelf-section-head:first-child{margin-top:0;}
.guide-plate{display:flex;background:var(--ink);border-radius:4px;overflow:hidden;text-decoration:none;color:var(--paper);margin-bottom:.9rem;box-shadow:0 10px 28px rgba(18,14,8,.14),0 2px 6px rgba(18,14,8,.10);transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease;}
a.guide-plate:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(18,14,8,.26);}
.guide-plate.is-coming{opacity:.82;}
.guide-plate .gp-index{width:88px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:"Zilla Slab",serif;font-style:italic;font-weight:500;font-size:1.4rem;color:var(--ochre);border-right:1px solid rgba(252,252,248,.14);}
.guide-plate .gp-body{flex:1;padding:1.5rem 1.8rem;display:flex;flex-direction:column;gap:.4rem;}
.gp-kicker{font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);}
.gp-title{font-family:"Zilla Slab",serif;font-weight:600;font-size:1.5rem;line-height:1.05;color:var(--paper);}
.gp-brief{font-size:.9rem;color:rgba(252,252,248,.78);line-height:1.5;}
.gp-tail{margin-top:.3rem;align-self:flex-start;}
.gp-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--paper);font-weight:600;font-size:.82rem;letter-spacing:.03em;border-bottom:1px solid rgba(252,252,248,.4);padding-bottom:1px;}
.gp-link span{transition:transform .25s ease;display:inline-block;}
a.guide-plate:hover .gp-link span{transform:translateX(4px);}
.guide-plate.gp-lead .gp-title{font-size:1.85rem;}
.guide-plate.gp-lead .gp-body{padding:1.9rem 2rem;}
@media(max-width:760px){
  .guide-plate{flex-direction:column;}
  .guide-plate .gp-index{width:100%;padding:.7rem 1.8rem;border-right:none;border-bottom:1px solid rgba(252,252,248,.14);justify-content:flex-start;}
}

/* --- FAQ: category jump-nav + sectioned register (deep FAQ) --- */
.faq-jump{max-width:800px;margin:1.4rem 0 2.4rem;border:1px solid rgba(52,41,31,.18);background:var(--paper);padding:1.3rem 1.5rem;}
.faq-jump-head{font-family:"Zilla Slab",serif;font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);margin:0 0 .9rem;}
.faq-jump ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.8rem;}
.faq-jump li{margin:0;}
.faq-jump a{color:var(--ink-2);text-decoration:none;font-size:.96rem;line-height:1.4;display:flex;justify-content:space-between;gap:.6rem;padding:.15rem 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;}
.faq-jump a:hover{color:var(--rust);border-bottom-color:rgba(192,97,63,.4);}
.faq-jump a .fj-count{color:var(--rust);font-variant-numeric:tabular-nums;font-size:.85rem;flex-shrink:0;}
.faq-cat{scroll-margin-top:100px;}
.faq-cat-head{font-family:"Zilla Slab",serif;font-weight:700;font-size:clamp(1.5rem,3vw,1.85rem);color:var(--ink);margin:3rem 0 0;padding-top:1.6rem;border-top:2px solid var(--ink);}
.faq-cat:first-of-type .faq-cat-head{margin-top:.4rem;}
.faq-cat-intro{color:var(--ink-2);line-height:1.7;margin:.7rem 0 .2rem;font-size:1rem;max-width:64ch;}
@media (max-width:640px){ .faq-jump ul{grid-template-columns:1fr;} }

/* --- FAQ: answered register (numbered accordion) --- */
.faq-register{max-width:800px;border-top:1px solid rgba(52,41,31,.22);}
.faq-register details{border-bottom:1px solid rgba(52,41,31,.22);}
.faq-register summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;padding:1.3rem 0;}
.faq-register summary::-webkit-details-marker{display:none;}
.faq-num{font-family:"Zilla Slab",serif;font-style:italic;font-weight:500;color:var(--rust);font-size:.95rem;min-width:1.8rem;flex-shrink:0;line-height:1.5;}
.faq-q{flex:1;font-family:"Zilla Slab",serif;font-weight:600;font-size:1.12rem;color:var(--ink);line-height:1.3;}
.faq-toggle{flex-shrink:0;font-size:1.35rem;color:var(--rust);line-height:1;transition:transform .25s ease;}
.faq-register details[open] .faq-toggle{transform:rotate(45deg);}
.faq-answer{padding:0 0 1.5rem 3.4rem;font-size:.98rem;color:var(--ink-2);line-height:1.6;max-width:64ch;}
.faq-answer p{margin-bottom:.8rem;}
.faq-answer p:last-child{margin-bottom:0;}
.faq-readfull{display:inline-flex;align-items:center;gap:.4rem;color:var(--rust);font-weight:600;font-size:.82rem;letter-spacing:.03em;text-decoration:none;border-bottom:1px solid rgba(192,97,63,.4);padding-bottom:1px;}
.faq-readfull span{transition:transform .25s ease;display:inline-block;}
.faq-readfull:hover span{transform:translateX(4px);}
.faq-schools-wrap{overflow-x:auto;margin-bottom:.8rem;}
.faq-schools-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:520px;}
.faq-schools-table th{text-align:left;font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);padding:.5rem .7rem;border-bottom:1px solid rgba(52,41,31,.22);white-space:nowrap;}
.faq-schools-table td{padding:.55rem .7rem;border-bottom:1px solid rgba(52,41,31,.12);color:var(--ink-2);vertical-align:top;}
.faq-schools-table .sd-name{font-family:"Zilla Slab",serif;font-weight:600;color:var(--ink);white-space:nowrap;}

/* --- Hub register responsive --- */
@media(max-width:860px){
  .towns-split{grid-template-columns:1fr;gap:2rem;}
  .towns-map-frame{position:relative;top:auto;height:clamp(360px,55vh,460px);}
}

/* ===================================================================
   MOBILE-NATIVE LAYER (Mobile Pod spec, agency/design-pass/10)
   Single-DOM CSS restructure + two forks (nav sheet, bottom bar).
   Keyed off <=768px + (hover:none) and (pointer:coarse). The 860px
   layout-collapse breakpoints stay where they are.
   =================================================================== */

/* ---- Global tap behavior ---- */
*{-webkit-tap-highlight-color:transparent;}
a,button,summary,.bvl-card,.gaz-row,.led-row,.guide-plate,.menu-btn{touch-action:manipulation;}

/* ---- Touch press substitutes for dead hover (capability-gated) ---- */
@media (hover:none) and (pointer:coarse){
  .bvl-card:active{transform:scale(.97);transition:transform .1s ease;}
  .led-row:active,a.guide-plate:active{transform:scale(.985);transition:transform .1s ease;}
  a.gaz-row:active{background:rgba(224,174,94,.10);}
  /* Morph snappier on touch (names untouched -> invariant-safe) */
  ::view-transition-group(vt-hero-img){animation-duration:.42s;}
  ::view-transition-group(vt-hero-title){animation-duration:.36s;}
  ::view-transition-group(root){animation-duration:.24s;}
}

/* ---- <=768px mobile mode: targets, fields, hero crop ---- */
@media (max-width:768px){
  .form-row input,.form-row select,.form-row textarea{font-size:16px;}   /* kills iOS zoom */
  footer.site .fcol a{display:inline-block;padding:.25rem 0;}
  .gaz-row{min-height:48px;}
  .faq-register summary{min-height:48px;}
  .hub-hero-img img{object-position:center 42%;}

  /* BVL: asymmetric grid -> 1-col compositional stack, Towns leads taller */
  .bvl-grid{grid-template-columns:1fr;grid-template-rows:none;gap:12px;}
  .bvl-card-towns,.bvl-card-market,.bvl-card-faq,.bvl-card-guides{grid-column:1;grid-row:auto;}
  .bvl-card-towns{min-height:264px;}
  .bvl-card-market,.bvl-card-faq{min-height:200px;}
}
@media (max-width:560px){
  /* BVL Guides card: stack photo under body to match the full-bleed siblings */
  .bvl-card-guides{flex-direction:column;}
  .bvl-card-guides .guides-photo{width:100%;height:150px;}
  .bvl-card-guides .guides-photo::before{background:linear-gradient(to bottom,var(--ink) 0%,rgba(52,41,31,0) 32%);}
  .faq-answer{padding-left:2.3rem;}
}

/* ---- About: freeze the field-log marquee on mobile (battery + narrow width) ---- */
@media (max-width:768px){ .log-track-inner{animation:none;} }

/* ---- FAQ school table: clip to wrapper + scroll affordance on mobile ---- */
.faq-schools-wrap{max-width:100%;}
@media (max-width:768px){
  .faq-schools-wrap{-webkit-mask-image:linear-gradient(to right,#000 92%,transparent);mask-image:linear-gradient(to right,#000 92%,transparent);}
}

/* ---- FORK #1: NAV SHEET (bottom-anchored) ---- */
.nav-scrim{position:fixed;inset:0;background:rgba(28,20,14,.5);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;z-index:80;}
html.nav-open .nav-scrim{opacity:1;visibility:visible;}
.nav-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:81;
  background:var(--paper);border-top-left-radius:14px;border-top-right-radius:14px;
  box-shadow:0 -12px 40px rgba(28,20,14,.28);
  padding:.5rem 1.4rem max(1.4rem,env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .26s cubic-bezier(.23,1,.32,1);
  flex-direction:column;
}
html.nav-open .nav-sheet{transform:translateY(0);}
.nav-sheet-grab{width:38px;height:4px;border-radius:2px;background:rgba(52,41,31,.22);margin:.4rem auto 1rem;}
.nav-sheet a.ns-row{
  display:block;padding:1rem .2rem;font-family:"Zilla Slab",serif;font-weight:600;font-size:1.15rem;
  color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(52,41,31,.10);min-height:48px;
}
.nav-sheet a.ns-row:active{color:var(--rust);}
.nav-sheet a.nav-sheet-cta{
  margin-top:.9rem;background:var(--rust);color:var(--paper);text-align:center;padding:1rem;
  border-radius:6px;font-family:"Figtree",sans-serif;font-weight:600;font-size:1rem;text-decoration:none;
}
.nav-sheet a.nav-sheet-cta:active{background:var(--rust-d);}
.nav-sheet-meta{margin-top:1.1rem;font-size:.85rem;color:var(--ink-2);line-height:1.6;text-align:center;}
.nav-sheet-meta a{color:var(--rust);text-decoration:none;font-weight:600;}
.nav-sheet,.nav-scrim{display:none;}
@media (max-width:768px){ .nav-sheet{display:flex;} .nav-scrim{display:block;} }

/* ---- FORK #2: HEADER PHONE BUTTON + CALL/TEXT POPUP (mobile) ---- */
.call-btn{
  display:none;margin-left:auto;margin-right:.55rem;padding:5px;
  background:none;border:0;color:var(--ink);cursor:pointer;line-height:0;
  border-radius:8px;transition:color .15s ease,background .15s ease;
}
.call-btn svg{width:25px;height:25px;display:block;}
.call-btn:hover{color:var(--rust);}
.call-btn:active{background:var(--butter);}
@media (max-width:768px){ .call-btn{display:inline-flex;align-items:center;} }

.call-pop{
  position:fixed;z-index:60;min-width:238px;padding:.4rem;
  background:var(--paper);border:1px solid rgba(52,41,31,.16);border-radius:12px;
  box-shadow:0 18px 44px -12px rgba(28,20,14,.42),0 4px 12px rgba(28,20,14,.16);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
  pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.call-pop.is-open{opacity:1;transform:none;pointer-events:auto;}
.call-pop a{
  display:flex;align-items:center;gap:.85rem;padding:.85rem .9rem;border-radius:8px;
  text-decoration:none;color:var(--ink);font-family:"Figtree",system-ui,sans-serif;
}
.call-pop a:hover,.call-pop a:focus{background:var(--butter);outline:none;}
.call-pop a:active{background:var(--cream);}
.call-pop a svg{width:21px;height:21px;color:var(--rust);flex-shrink:0;}
.call-pop a span{font-size:.95rem;color:var(--ink-2);}
.call-pop a b{display:block;font-weight:600;color:var(--ink);font-family:"Zilla Slab",serif;font-size:1.02rem;}

/* ---- Reduced-motion additions for the mobile layer ---- */
@media (prefers-reduced-motion: reduce){
  .nav-sheet,.call-pop{transition:none!important;}
  .bvl-card:active,.led-row:active,a.guide-plate:active{transform:none!important;}
  .log-track-inner{animation:none!important;}
}

/* ===================================================================
   PAGE-INLINE OVERFLOW FIXES (mobile only)
   The Home (index.html) and About page hero/portrait layouts are
   defined in each page's inline style block, which loads AFTER this
   sheet. These three rules correct fixed-height / oversized / bled
   layouts that overflow phones. They use !important because the page
   inline rules win on source order at equal specificity; that is the
   only way to override them from the shared sheet without touching HTML.
   Desktop is untouched (rules are inside narrow media queries).
   =================================================================== */

/* 3. Home ranch-card bleed (index.html: .ranch-card has margin-right:-4rem,
      which pushes it past the viewport edge on phones). */
@media (max-width:760px){
  .ranch-card{margin-right:0!important;}
}

/* ===================================================================
   MOBILE FIX PASS 2 (measured 2026-05-31 at 390px)
   Three confirmed bugs, all from page inline <style> blocks that load
   after this sheet, so !important inside narrow media queries is used
   to win without editing each page's HTML. Desktop untouched.
   =================================================================== */

/* BUG 1 — HOME hero will not scroll.
   index.html inline: section.about{position:sticky;top:7rem} drives a
   desktop "ranch slides over the pinned about" reveal. On phones that
   reads as a frozen hero. Make it a normal block on mobile. */
@media (max-width:768px){
  /* Section stays static; the PORTRAIT becomes the sticky element (see mobile
     portrait block below) so the intro paragraph scrolls up over her. Trim the
     generous desktop top padding that left too much space above her on phones. */
  section.about{position:static!important;top:auto!important;padding:2.75rem 0 0!important;}
}

/* BUG 2 — ABOUT page scrolls sideways.
   Madyson_Batson_About.html inline: .hero-grid is a 2-col grid
   (1.05fr/0.95fr, 4.5rem gap) with no mobile collapse, so it measures
   ~435px on a 390px screen and the portrait spills right. Collapse to
   one column and center the portrait. */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr!important;gap:1.5rem!important;}
  /* visible (not hidden) so the portrait can sink behind the field-log banner;
     body{overflow-x:clip} still blocks any sideways scroll. */
  section.about-hero{overflow:visible;}
  .hero-copy{margin-bottom:1rem!important;}
}

/* BUG 3 — BVL "Guides" card photo does not fit.
   Brazos_Valley inline: .guides-photo img{transform:scale(1.35)} stays
   applied at phone widths, so the image renders ~202px tall inside a
   150px box (zoomed, clipped). Reset the scale on mobile so object-fit
   cover shows the whole crop, and give the stacked photo a bit more
   height so it reads as a real banner. */
@media (max-width:768px){
  .bvl-card-guides .guides-photo img{transform:none!important;}
}
@media (max-width:560px){
  .bvl-card-guides{flex-direction:column!important;}
  .bvl-card-guides .guides-photo{width:100%!important;height:170px!important;}
  .bvl-card-guides .guides-photo img{transform:none!important;}
}

/* Backstop: clip stray sideways scroll, but ONLY on mobile. A global
   overflow-x:hidden on body breaks position:sticky descendants (the home
   hero reveal and the Towns map); on mobile both are already neutralized
   (about static, map relative), so scoping it here is safe. */
/* Backstop against stray sideways scroll on mobile. Uses overflow-x:CLIP (not
   hidden): clip keeps overflow-y computed as visible and does NOT establish a
   scroll container, so it does NOT break position:sticky (the header and the new
   mobile hero portrait both keep working — verified). hidden would risk breaking
   them by turning body into a scroller. */
@media (max-width:768px){ html,body{overflow-x:clip;} }

/* ===================================================================
   MOBILE FIX PASS 3 (authoritative; supersedes the portrait + BVL-grid
   rules above). Appended last so it wins on source order; !important
   beats the page inline <style> blocks. Measured/tuned at 390px.
   =================================================================== */

/* --- BVL grid: kill fixed 220px rows (page inline) that made the
       min-height:264px Towns card overflow into Market. Auto rows grow
       to each card; min-heights keep the image cards from collapsing. --- */
@media (max-width:860px){
  .bvl-grid{grid-template-rows:none!important;grid-auto-rows:auto!important;}
}
@media (max-width:768px){
  .bvl-card-towns{min-height:248px!important;}
  .bvl-card-market,.bvl-card-faq{min-height:208px!important;}
  .bvl-card-guides{min-height:300px!important;}
  .bvl-card-guides .guides-photo img{transform:none!important;}
}
@media (max-width:560px){
  .bvl-card-guides{flex-direction:column!important;}
  .bvl-card-guides .guides-photo{width:100%!important;height:150px!important;}
  .bvl-card-guides .guides-photo img{transform:none!important;object-position:center 38%!important;}
  .bvl-card-guides .guides-photo::before{background:linear-gradient(to bottom,var(--ink) 0%,rgba(52,41,31,0) 30%)!important;}
}

/* ===================================================================
   TOWN / AREA PROFILE pages (T-C template, e.g. /towns/caldwell/)
   =================================================================== */
.town-prose{max-width:760px;margin:0 auto;}
.town-section{padding:2.2rem 0;border-top:1px solid rgba(52,41,31,.14);}
.town-section:first-of-type{border-top:none;}
.town-section h2{
  font-family:"Zilla Slab",serif;font-weight:700;font-size:clamp(1.4rem,3vw,1.8rem);
  color:var(--ink);margin:0 0 .5rem;letter-spacing:-.01em;
}
.town-section .ts-kicker{
  display:block;font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);margin-bottom:.7rem;
}
.town-section p{font-size:1.04rem;line-height:1.75;color:var(--ink-2);margin:0 0 1rem;}
.town-section p:last-child{margin-bottom:0;}
.town-section a{color:var(--rust);text-decoration:underline;text-underline-offset:2px;}
.town-quick{
  background:var(--paper);border:1px solid rgba(52,41,31,.16);
  padding:1.6rem 1.8rem;margin:0 auto 1rem;max-width:760px;
}
.town-quick p{font-size:1.12rem;line-height:1.6;color:var(--ink);margin:0;}
.town-sources{max-width:760px;margin:0 auto;}
.town-sources summary{
  cursor:pointer;font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--ink-2);
  padding:.6rem 0;list-style:none;
}
.town-sources summary::-webkit-details-marker{display:none;}
.town-sources summary::before{content:"+ ";color:var(--rust);}
.town-sources[open] summary::before{content:"– ";}
.town-sources ul{margin:.4rem 0 0;padding-left:1.2rem;}
.town-sources li{font-size:.8rem;color:rgba(52,41,31,.62);line-height:1.5;margin-bottom:.4rem;}

/* ===================================================================
   MOBILE PORTRAITS — clean full-cutout (replaces all prior crop/fade
   passes). The two portraits are background-removed cutouts;
   on mobile show the whole figure on the cream ground, no mask, no crop,
   no zoom, with breathing room. Desktop layouts are untouched (these
   rules live inside the mobile breakpoint and use !important only to beat
   the page inline <style> sizing).
   =================================================================== */
@media (max-width:860px){
  /* HOME about-block portrait (index.html inline: absolute + scaled).
     Seated photo (1200x2748): hard-crop to the top ~62% so it ends around
     her resting forearms, cutting the legs and lower hand. No fade.
     Container is a fixed 1200x1700 window (aspect 1200/1700); the image
     fills the width and is clipped at the bottom by overflow:hidden. */
  .about-portrait{
    position:sticky!important;top:4.4rem!important;z-index:1!important;
    aspect-ratio:1200/1700!important;
    width:min(300px,74%)!important;margin:0 auto!important;
    overflow:hidden!important;
  }
  .about-portrait img{
    position:absolute!important;top:0!important;left:0!important;
    transform:none!important;
    width:100%!important;height:auto!important;max-width:none!important;
    margin:0!important;display:block;
    filter:none!important; /* kill the desktop drop-shadow; overflow:hidden would clip it into a hard box */
  }
  /* HOME about-block order on mobile: put the eyebrow + headline ABOVE the
     portrait, with the intro paragraph + buttons below it. Flatten .about-copy
     with display:contents so its children become grid items we can order.
     (Desktop two-column layout is unaffected; this is inside the mobile query.) */
  .about-grid{display:flex!important;flex-direction:column!important;align-items:center!important;}
  .about-copy{display:contents!important;}
  .about-copy .eyebrow{order:1;align-self:flex-start;}
  .about-copy h1{order:2;align-self:flex-start;margin-bottom:.4rem!important;}
  .about-portrait{order:3;}
  /* Intro paragraph + buttons: opaque butter block, above the sticky portrait
     (z-index:2), full width, no gaps — so it scrolls UP and OVER her portrait. */
  /* Intro = ONE continuous full-bleed paper panel (paragraph + buttons) that runs
     edge to edge AND all the way down from the portrait to the ranch section, with
     a single section-division shadow at the top. margin:0 calc(50% - 50vw) breaks
     out of the .wrap padding to the viewport edges; 5vw padding re-aligns content.
     section.about padding-bottom is 0, so the panel's bottom meets the ranch. */
  .about-copy .about-intro{order:4;align-self:stretch!important;
    position:relative;z-index:2;background:var(--paper);
    box-shadow:0 -18px 40px rgba(28,20,14,.30);
    /* negative top margin cancels the grid's 3rem gap so the panel connects
       right up against the bottom of her portrait */
    margin:-3rem calc(50% - 50vw) 0!important;padding:2.4rem 5vw 3.2rem!important;}
  .about-copy .about-intro p{max-width:none!important;margin:0 0 1.6rem!important;}
  .about-copy .about-intro .about-actions{margin:0!important;}

  /* HOME ranch hero: hide the "Brazos Valley, TX" tag on mobile only. */
  .ranch-tag{display:none!important;}

  /* ABOUT hero portrait (about/index.html inline: height:760px; max-width:120%).
     Standing photo reads well in full, so no crop, just clean sizing. */
  .hero-portrait{text-align:center;margin-top:.5rem;}
  .hero-portrait img{
    height:auto!important;width:auto!important;max-width:min(320px,76%)!important;
    margin:0 auto -2.6rem!important;display:block;
  }
  /* The field-log banner is opaque (position:relative) and a later sibling, so the
     negative margin lets it ride up over her lower edge — no hard-cut disconnect. */
}
