/* ============================================================
   SHARED SITE NAVIGATION — nav.css
   Loaded on every page via: <link rel="stylesheet" href="nav.css">
   Pairs with nav-partial.html + nav.js.

   Edit this ONE file to restyle the nav on every page at once.
   Do not duplicate these rules into individual page <style> blocks —
   that's exactly the drift this system exists to prevent.
   ============================================================ */

/* The hidden attribute has to actually hide (2026-09-23).

   nav.js shows and hides the account bar, the Dev menu and their mobile
   counterparts by setting el.hidden, and each ships with hidden in the markup
   so nothing shows before it decides. But hidden works through the browser own
   stylesheet, and author CSS beats the browser stylesheet whatever the
   specificity, so .nav-account{display:flex}, .mob-account{display:flex} and
   .na-dev-menu{display:grid} below were each quietly cancelling it. The result
   was Accounts and Sign out sitting in the nav of every page, shown to visitors
   who were not signed in and had no account to sign out of.

   !important, because a rule meaning "this element is not here" should not be
   arguable by a page own stylesheet either. Safe with nav.js, which never sets
   an inline display on these and only toggles the attribute. */
[hidden]{display:none!important}

:root{
  --nav-h:68px; --banner-h:34px; /* bumped from 26px — the banner now has real vertical padding (see #banner padding below) on top of the 1.36rem text, so its real rendered height grew again. This MUST stay >= the banner's actual content height, or #nav (positioned at top:var(--banner-h)) goes back to sitting behind the banner. */
}

@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes slideInRight{0%{transform:translateX(100%)}100%{transform:translateX(0)}}

/* ── Banner ── */
#banner{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  min-height:var(--banner-h);
  background:linear-gradient(90deg,#b01f15 0%,#DA291C 40%,#e8372a 60%,#b01f15 100%);
  background-size:200% 100%;
  animation:shimmer 4s linear infinite;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:6px 16px;
}
#banner p{
  /* margin:0 is load-bearing here, not decoration — nav-partial.html is
     injected into every page, and not every page zeroes default element
     margins itself (farmstand.html only resets box-sizing, not margin).
     Without this, the browser's default <p> margin (~1em top+bottom,
     computed off THIS rule's own font-size) stacks inside #banner's
     padding, roughly doubling the bar's real height on any page that
     doesn't already zero margins globally — while a page that does
     (determine-your-budget.html) renders the same markup correctly thin.
     Zeroing it here makes the shared banner render identically no matter
     what reset the host page does or doesn't have. */
  margin:0;
  /* The one place capitals stayed (Michael, 2026-09-22). Everything else on the
     site dropped them with Barlow Condensed on 2026-09-14 and 09-22, but a strip
     warning that the site is half-built is signage, not prose, and reads right
     shouting. Semi Condensed rather than the retired Condensed because most
     pages already load it, and this banner is meant to come down soon. When it
     does, this exception goes with it. A few nav pages (404, cma, daybook,
     markup, buying-process, selling-process, your-rights) load only Barlow, so
     every Semi Condensed rule in this file names Barlow as its fallback rather
     than dropping to the system sans-serif. */
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;
  font-size:1.36rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.95);text-align:center;
}
#banner .bd{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5);flex-shrink:0}
/* Mobile: smaller banner text (60% of desktop size) so the promo line wraps
   to fewer lines on a narrow phone. --banner-h itself is now kept accurate
   automatically by nav.js (it measures the banner's real rendered height
   after load and on resize) — the value here is just a reasonable fallback
   for the instant before that JS runs. */
@media(max-width:700px){
  #banner p{font-size:.82rem}
  :root{--banner-h:40px} /* fallback only, for the instant before nav.js measures the real 2-line height (~39px) — nav.js's syncBannerHeight() now measures the banner's <p> directly rather than the container, so this no longer needs to be a worst-case guess */
}

/* ── Nav bar ── */
#nav{
  position:fixed;top:var(--banner-h);left:0;right:0;z-index:5000;
  height:var(--nav-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(218,41,28,.1);
  transition:height .3s,box-shadow .3s;
}
#nav.scrolled{height:56px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.nav-in{
  /* No max-width/centering here on purpose — the logo and nav items anchor
     directly to the real viewport edges via padding, so the logo stays put
     in the corner at any window width instead of drifting inward once the
     page is wider than an old fixed max-width container. */
  margin:0;padding:0 16px;
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nlogo{display:flex;align-items:center;flex-shrink:0}

.nav-links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative;}
/* Second, independent hover-bridge — separate from .nav-dropdown::before's own
   12px bridge above the dropdown box. This one is anchored to the LI itself
   (top:100%, li's real un-modified bottom edge) and reaches generously
   downward and outward, covering rounding/timing slop right at the seam
   between the link and the dropdown's own bridge that could otherwise let
   a fast or slightly-off-course pointer momentarily leave the hover tree
   and cause the dropdown to close ("roll up") before the pointer reaches it.
   Deliberately NOT implemented as padding on the LI — that would also shift
   the dropdown's own top:calc(100% + 12px) position, since both measure off
   the same padding-box percentage, undoing the fix as a side effect. */
.nav-links>li::after{
  content:'';
  position:absolute;
  top:100%; left:-24px; right:-24px;
  height:26px;
}
.nav-links>li>a,.nav-links>li>button.nav-btn{
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;
  font-size:1.25rem;letter-spacing:.01em;color:var(--black,#111);
  position:relative;padding-bottom:3px;transition:color .2s;
  background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;
  text-decoration:none;
}
.nav-links>li>a::after,.nav-links>li>button.nav-btn::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--red,#DA291C);transition:width .25s}
.nav-links>li>a:hover,.nav-links>li>button.nav-btn:hover{color:var(--red,#DA291C)}
.nav-links>li>a:hover::after,.nav-links>li>button.nav-btn:hover::after{width:100%}
.nav-links>li>a.active{color:var(--red,#DA291C)}
.nav-links>li>a.active::after{width:100%}
.nav-chevron{display:inline-block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;flex-shrink:0}

/* Dropdown */
.nav-dropdown{
  display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  background:var(--white,#fff);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);border:1px solid var(--gray-mid,#e0e0e0);
  min-width:190px;overflow:hidden;z-index:5001;
}
/* Invisible bridge over the 12px gap between the trigger and the dropdown.
   :hover on the parent <li> stays true while the pointer is over ANY descendant,
   including this pseudo-element — without it, moving the mouse straight down from
   the button crosses a dead zone that isn't part of the li's hit area, so the
   dropdown closes before the pointer reaches it. */
.nav-dropdown::before{
  content:'';position:absolute;top:-12px;left:0;right:0;height:12px;background:transparent;
}
.nav-dropdown a{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;
  font-family:'Barlow',sans-serif;font-weight:600;font-size:1rem;
  color:var(--black,#111);white-space:nowrap;
  transition:background .15s,color .15s;
  background:none;border:none;cursor:pointer;width:100%;text-align:left;
  text-decoration:none;
}
.nav-dropdown a:hover{background:var(--gray-light,#f5f5f5);color:var(--red,#DA291C)}
/* A heading inside a menu, so the area reports read as a second group rather
   than four more places (Michael, 2026-09-23). */
.nav-dd-lbl,.mob-dd-lbl{display:block;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.01em;color:var(--gray-muted,#888)}
.nav-dd-lbl{padding:12px 18px 5px;margin-top:5px;border-top:1px solid var(--gray-mid,#e0e0e0)}
.mob-dd-lbl{padding:12px 0 3px 16px;margin-top:4px;border-top:1px solid var(--gray-mid,#e0e0e0)}
.nav-dropdown a.active{color:var(--red,#DA291C);background:var(--gray-light,#f5f5f5)}
.nav-links>li:hover .nav-dropdown,.nav-links>li:focus-within .nav-dropdown{display:block}
.nav-links>li:hover .nav-chevron,.nav-links>li:focus-within .nav-chevron{transform:rotate(-135deg) translateY(2px)}

/* Connect pill */
.connect-wrap{position:relative}
.btn-connect{
  background:var(--red,#DA291C);color:var(--white,#fff);border:2px solid var(--red,#DA291C);
  border-radius:100px;padding:9px 20px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.01em;
  cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .2s,box-shadow .2s;
}
.btn-connect:hover{background:var(--red-dark,#b01f15);box-shadow:0 4px 16px rgba(218,41,28,.3)}
.connect-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  background:var(--white,#fff);border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.14);border:1px solid var(--gray-mid,#e0e0e0);
  min-width:172px;max-width:250px;overflow:hidden;z-index:5001;
}
.connect-dropdown.open{display:block}
/* Call and Text are first in the menu, but the order alone does not say they
   are preferred, so the menu says it (Michael, 2026-09-22). */
.cd-note{margin:0;padding:10px 16px 9px;font-family:'Barlow',sans-serif;font-size:.82rem;line-height:1.4;
  color:var(--gray-text,#555);border-bottom:1px solid var(--gray-mid,#e0e0e0)}
.mob-cta-note{margin:0 0 12px;font-family:'Barlow',sans-serif;font-size:.96rem;line-height:1.4;
  color:var(--gray-text,#555);text-align:center}
.connect-dropdown a,.connect-dropdown .cd-btn{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 20px;border:none;background:none;
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.92rem;
  color:var(--black,#111);white-space:nowrap;text-align:left;cursor:pointer;
  transition:background .15s,color .15s;
  text-decoration:none;
}
.connect-dropdown a:hover,.connect-dropdown .cd-btn:hover{background:var(--gray-light,#f5f5f5);color:var(--red,#DA291C)}
.connect-dropdown .cd-icon{width:17px;height:17px;flex-shrink:0;color:var(--red,#DA291C)}
.connect-dropdown .cd-divider{height:1px;background:var(--gray-mid,#e0e0e0)}

/* ── Hamburger ── */
#ham-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
#ham-btn span{display:block;width:24px;height:2px;background:var(--black,#111);border-radius:2px;transition:all .3s}

/* ── Mobile menu ── */
#mob-menu{
  display:none;position:fixed;inset:0 0 0 auto;width:300px;z-index:6000;
  background:var(--white,#fff);flex-direction:column;
  /* Top padding is tied to --banner-h (the real, JS-measured banner height)
     plus just enough room to clear #mob-close below it, instead of a flat
     guess — keeps this tight and correct even if the banner's height
     changes (wraps to 2 lines on a narrow phone, promo text edited, etc).
     Fixed 2026-09-02: previously a flat 80px, which (a) was more empty
     space at the top than needed and (b) had nothing to do with the
     banner's real height, which is how #mob-close ended up sitting UNDER
     the banner instead of clear of it — see #mob-close below. */
  padding:calc(var(--banner-h) + 34px) 28px 32px;
  box-shadow:-8px 0 40px rgba(0,0,0,.15);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* The menu is fixed to the full viewport height (inset:0 0 0 auto), but its
     content (Local Areas / Buyers / Sellers / Resources link groups +
     CTAs + socials) is taller than a phone screen. Without a scroll rule here,
     anything past the viewport's bottom edge was simply cut off and
     unreachable — body scroll is deliberately locked while the menu is open
     (see openMob() in nav.js), so there was no way to reach it. This makes
     the panel itself the scroll container. */
}
#mob-menu.open{display:flex;animation:slideInRight .32s ease forwards}
/* #mob-close used to sit at a flat top:16px, which is INSIDE the space the
   fixed, higher-z-index #banner (z-index:9999) occupies at the very top of
   the viewport — the banner painted over it, so the × was invisible/dead
   until you tapped blind. Anchoring to --banner-h puts it just below the
   banner regardless of the banner's actual height. Fixed 2026-09-02. */
#mob-close{position:absolute;top:calc(var(--banner-h) + 8px);right:16px;font-size:1.6rem;background:none;border:none;cursor:pointer;color:var(--black,#111);transition:color .2s}
#mob-close:hover{color:var(--red,#DA291C)}
.mob-links{list-style:none;margin-bottom:16px;padding:0}
.mob-links li{border-bottom:none}
.mob-links>li>a{padding:12px 2px}
.mob-acc{margin:4px 0}
/* Case-treatment history (2026-09-02): started as ALL-CAPS
   (text-transform:uppercase), briefly tried font-variant:small-caps as a
   trial Michael asked to see, but that read as basically invisible in
   practice (webfont small-caps glyphs are often just synthesized/subtle) —
   he asked to drop it in favor of standard Title Case instead, matching how
   the DESKTOP dropdown links already render (.nav-dropdown a below has no
   text-transform at all, so it just shows the mixed-case text as written in
   nav-partial.html — "Ashland", "Determine Your Budget", etc.). Settled on
   no text-transform / no font-variant here either, for the same effect. */
.mob-links a{display:block;padding:10px 0;font-family:'Barlow',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.01em;color:var(--black,#111);transition:color .2s;text-decoration:none}
.mob-links a:hover{color:var(--red,#DA291C)}
/* The drawer's four sections (Michael, 2026-09-22: "should it open as a list of
   submenus that can then be opened vs having the full list visible"). Seventeen
   links plus the calls to action made for a long scroll; four names give the
   shape of the site at a glance. nav.js opens whichever one holds the current
   page. The marker is drawn rather than the browser's triangle, so it matches
   the chevrons in the desktop bar. */
.mob-acc>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:13px 2px;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;font-size:1.15rem;
  letter-spacing:.01em;color:var(--black,#111)}
.mob-acc>details>summary::-webkit-details-marker{display:none}
.mob-acc>details>summary::after{content:"";width:.46em;height:.46em;margin-right:3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.mob-acc>details[open]>summary::after{transform:rotate(-135deg) translateY(1px)}
.mob-acc>details>ul{list-style:none;margin:0;padding:2px 0 12px}
.mob-acc>details>ul>li{border-bottom:none}
.mob-acc>details>ul>li>a{padding:8px 0 8px 16px;font-size:1.05rem;font-weight:600;color:var(--gray-text,#555)}
.mob-acc>details>ul>li>a.active{color:var(--red,#DA291C)}
.mob-ctas{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
/* Four tiles rather than four stacked pills (Michael, 2026-09-22: the drawer
   "can be more like desktop with icons"). Call keeps the filled treatment - it
   is still the thing most people should do, and an icon row should not flatten
   that - while the other three read as the alternatives they are. */
.mob-connect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mob-cx{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 11px;
  border:2px solid var(--gray-mid,#e0e0e0);border-radius:14px;background:none;cursor:pointer;
  color:var(--black,#111);text-decoration:none;text-align:center;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.84rem;line-height:1.18;
  transition:border-color .2s,background .2s,color .2s}
.mob-cx svg{width:22px;height:22px;flex-shrink:0;color:var(--red,#DA291C)}
.mob-cx:hover{border-color:var(--red,#DA291C)}
.mob-cx-first{background:var(--red,#DA291C);border-color:var(--red,#DA291C);color:var(--white,#fff)}
.mob-cx-first svg{color:var(--white,#fff)}
/* Saving the contact is not one of the three ways to talk, so it takes its
   own full-width row under them and reads as a line rather than a tile. */
.mob-cx-wide{grid-column:1/-1;flex-direction:row;justify-content:center;gap:10px;padding:11px 12px}
.mob-socials{display:flex;gap:12px;justify-content:center;margin-top:auto}
#backdrop{display:none;position:fixed;inset:0;z-index:5999;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
#backdrop.open{display:block}

/* ── Responsive: switch to hamburger ── */
@media(max-width:768px){
  .nav-links,.nav-ctas{display:none}
  #ham-btn{display:flex}
}

/* ── Message modal (Connect ▸ Message, and the mobile "Message 804-Michael"
   button) — replaces the old raw mailto: link, which Cloudflare's email
   obfuscation feature rewrote into a /cdn-cgi/l/email-protection# URL that
   only resolves if Cloudflare's injected decode script runs before the
   click lands; when it doesn't, visitors hit Cloudflare's "Email
   Protection" info page instead of reaching a lead form. Sends via the
   same EmailJS account already used by the Home Value forms — see
   MESSAGE_TEMPLATE_ID + setup notes in nav.js. Lives here (not a per-page
   <style> block) because the Connect dropdown — and this modal — is
   injected on every page via nav-partial.html. */
.msg-modal-overlay{display:none;position:fixed;inset:0;background:rgba(17,17,17,.6);z-index:9000;
  align-items:flex-start;justify-content:center;padding:calc(var(--banner-h) + var(--nav-h) + 20px) 20px 20px;overflow-y:auto;}
.msg-modal-overlay.open{display:flex}
.msg-modal{background:var(--white,#fff);border-radius:16px;max-width:440px;width:100%;padding:26px;max-height:90vh;overflow-y:auto;position:relative}
.msg-modal h3{font-family:'Barlow',sans-serif;font-weight:800;font-size:1.5rem;color:var(--black,#111);margin:0 0 4px}
.msg-modal p.msg-hint{font-size:.9rem;color:var(--gray-muted,#888);margin:0 0 16px}
.msg-modal .close-x{position:absolute;top:14px;right:18px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--gray-muted,#888)}
.msg-modal .close-x:hover{color:var(--red,#DA291C)}
.msg-field{margin-bottom:12px}
.msg-field label{display:block;font-size:.86rem;font-weight:700;color:var(--black,#111);margin-bottom:4px}
.msg-field input,.msg-field textarea{
  width:100%;border:1.5px solid var(--gray-mid,#e0e0e0);border-radius:8px;padding:9px 11px;font-size:.93rem;
  font-family:'Barlow',sans-serif;background:#fff;color:var(--black,#111);box-sizing:border-box;
}
.msg-field textarea{resize:vertical;min-height:90px}
.msg-modal-actions{display:flex;gap:10px;margin-top:16px}
.msg-modal-actions .btn{flex:1;justify-content:center;font-size:1.05rem}
.msg-cancel-btn{
  flex:1;background:#fff;color:var(--black,#111);border:2px solid var(--gray-mid,#e0e0e0);
  border-radius:100px;padding:12px 20px;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;
  font-size:1.05rem;letter-spacing:.01em;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.msg-cancel-btn:hover{border-color:var(--red,#DA291C);color:var(--red,#DA291C)}
.msg-modal-status{font-size:.86rem;margin-top:10px;text-align:center;min-height:1.2em}
.msg-modal-status.error{color:#c0392b}
.msg-modal-status.success{color:#2f7d3a}

/* ── Skip link (added 2026-09-11) ──
   First element in nav-partial.html. Parked above the viewport until it
   gets keyboard focus, then drops in at the top-left, above the banner
   (z-index higher than #banner's 9999). nav.js handles the click: it moves
   focus to the page's first visible <h1>. */
.skip-link{position:fixed;top:8px;left:8px;z-index:10001;transform:translateY(-150%);background:#111;color:#fff;padding:10px 18px;border-radius:8px;font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.skip-link:focus{transform:none}

/* ── Keyboard focus outline (added 2026-09-11) ──
   :focus-visible only fires for keyboard-style focus, never for a mouse
   click or a tap, so mouse and touch users see no change. Form fields are
   left to each page, which already shows their focus as a red border.
   tabindex="-1" is excluded because that is the skip link's landing spot
   (the page title), which shouldn't get a box drawn around it. */
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:3px solid var(--red,#DA291C);outline-offset:2px}

/* ── Toolbar placeholder + fade-in (added 2026-09-11) ──
   #site-nav is the empty div nav.js swaps for nav-partial.html once that
   arrives. It used to be empty, so every page drew with a blank strip at
   the top and the toolbar popped in a moment later. Now the placeholder
   paints the red banner strip and the white bar at their real sizes from
   the first frame (this file loads in <head>, before anything draws), and
   when the real toolbar replaces it only the CONTENTS fade in. The bars
   themselves never blink. */
#site-nav{position:fixed;top:0;left:0;right:0;z-index:5000;height:calc(var(--banner-h) + var(--nav-h));
  background:linear-gradient(90deg,#b01f15 0%,#DA291C 40%,#e8372a 60%,#b01f15 100%) top/100% var(--banner-h) no-repeat,rgba(255,255,255,.88);
  border-bottom:1px solid rgba(218,41,28,.1)}
@keyframes navFadeIn{from{opacity:0}to{opacity:1}}
#banner>*,#nav .nav-in{animation:navFadeIn .35s ease-out both}

/* ── Compact footer (added 2026-09-11; reordered the same day at Michael's
   request, modeled on the Draw Your Search footer he preferred) ──
   One centered column, top to bottom:
     1. 804Michael logo
     2. Equal Housing + REALTOR/MLS marks, spaced apart
     3. Policy links
     4. Page version, plain: vYY.MM.DD_HH-MM-XXXX, no label, not bold
     5. Copyright block (plus the policy pages' Equal Housing sentence)
   (An earlier version put the marks beside a text block; on the home page
   that read badly, so it was dropped.)
   Lives here rather than in each page's <style> because every page with this
   footer loads nav.css; markup opts in with .ft-compact on .ft-in. The
   !important rules beat inline styles the marks, links and version carry.
   .ft-in.ft-compact outranks the home page's own row layout for .ft-in. */
/* Footer base. daybook, school-report and places never declared these, so with
   no background their footer stayed white, which left the white 804michael
   wordmark invisible and the copyright line unreadable (Michael, 2026-09-23).
   A page's own rules still win: nav.css loads before its <style>.

   Scoped to footers that wrap .ft-in, which is the 36 pages carrying the real
   footer. Written as a bare footer{} at first, it also reached farmstand and
   seasonal-map, whose footer is one line of gray text with #555 links and no
   background of its own, and painted it black. A footer that is not this
   footer should not be styled by this rule. */
footer:has(> .ft-in){background:var(--black,#111);padding:40px 24px 32px}
.ft-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.ft-copy{font-size:.78rem;color:rgba(255,255,255,.35);line-height:1.9}
footer:has(> .ft-compact){padding-top:26px;padding-bottom:22px}
.ft-in.ft-compact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.ft-compact .ft-marks{gap:48px!important}
.ft-compact .ft-pol{justify-content:center!important}
.ft-compact #site-version-display{margin:0!important;font-weight:400!important}
/* Copyright block matches the Draw Your Search page exactly (Michael's pick):
   its own .ft-copy values, and no width cap, so the text runs the full
   footer width and wraps into a couple of long lines instead of a narrow
   column. The line breaks that used to split it are " · " separators now. */
.ft-compact .ft-copy,.ft-compact .ft-eho{margin:0;font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.35);text-align:center;max-width:none}

/* ── Links only a signed-in account should see (added 2026-09-23) ──
   The About page and Freeze Your Finances were offering "← Dev Hub" to every
   visitor. Hidden by default, shown only once the middleware has stamped an
   account on <body>, which it does on a public page for anyone carrying a
   valid gate cookie. Decided on the server, so nothing flashes.

   The Market Report does the same job with its own <html class="anon"> and a
   JS owner check; those rules are its own and are not touched here. */
.signed-in-only{display:none}
body[data-gate-user] .signed-in-only{display:revert}
/* The Explore list draws a divider under every item but the last. When the
   last item is a hidden one, the item above it becomes the visible last and
   would otherwise end the card on a stray line. Only while signed out: when
   the Dev Hub item is showing, the item above it should keep its divider. */
body:not([data-gate-user]) .explore-links li:has(+ li.signed-in-only:last-child) a{border-bottom:none}

/* ── Reduced motion (added 2026-09-11) ──
   Applies only to visitors whose device is set to "reduce motion", an
   accessibility setting used by people for whom on-screen movement causes
   dizziness or migraines. Everyone else sees no difference.
   Decorative motion stops: scroll fade-ins, hero fade-up and zoom, the
   banner shimmer, pulsing icons, map-search's hint fingers, smooth
   scrolling, the toolbar fade. Loading spinners keep turning, because they
   tell you something is still working.
   animation:none leaves each element in its normal resting state. Every
   fade-up on the site is written with fill-mode "both", so its end state
   IS the element's normal state, and nothing is left invisible. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important}
  /* map-search declares this hint animation !important at higher specificity */
  html .map-hint .hint-line-1 span[aria-hidden]{animation:none!important}
  .reveal,.reveal.js-ready{opacity:1!important;transform:none!important;transition:none!important}
  #nav{transition:none}
  .val-btn-spinner,.btn-spinner,.search-spinner,.lp-btn-spinner{animation:spin .7s linear infinite!important}
  .tp-spinner{animation:tpSpin .8s linear infinite!important}
  .anim-ellipsis::after{animation:ellipsis 1.2s steps(1,end) infinite!important}
}

/* Signed-in account controls (2026-09-14). nav.js reveals these only on gated
   pages, where functions/_middleware.js stamps data-gate-user on <body>.
   Hidden by default and never shown on the public site. */
@media(min-width:769px){ .nav-ctas{display:flex;align-items:center} }
.nav-account{display:flex;align-items:center;gap:10px;margin-right:16px}
.na-who{font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--black,#111);white-space:nowrap}
.na-who::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#1a7a3c;margin-right:7px;vertical-align:middle}
.mob-account{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;padding-top:14px;border-top:1px solid var(--gray-mid,#e0e0e0)}
/* Accounts and Sign out were two full-width buttons carrying as much weight as
   Call and Text above them, which is not what they are (Michael, 2026-09-22).
   A pair of icons on one line, still 44px so they stay a comfortable tap, and
   still named for anyone not going by the picture. */
.mob-acct-row{display:flex;gap:10px;justify-content:center;margin-top:2px}
.mob-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:2px solid var(--gray-mid,#e0e0e0);border-radius:50%;background:none;padding:0;
  color:var(--gray-text,#555);cursor:pointer;transition:border-color .2s,color .2s}
.mob-icon-btn svg{width:20px;height:20px}
.mob-icon-btn:hover{border-color:var(--red,#DA291C);color:var(--red,#DA291C)}
.mob-who{font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;font-size:1rem;color:var(--black,#111);text-align:center;margin:0 0 2px}
/* -- Dev menu (2026-09-15): the gated pages, for a signed-in account on a gated
   page. nav.js fills #na-dev-menu and #mob-dev-list from the list the middleware
   adds to the page (#gate-pages); both stay hidden everywhere else. -- */
.nav-account{position:relative}
.na-dev-btn{display:inline-flex;align-items:center;gap:5px}
.na-dev-btn svg{transition:transform .2s}
.na-dev-btn[aria-expanded="true"]{color:var(--red,#DA291C)}
.na-dev-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.na-dev-menu{position:absolute;top:calc(100% + 14px);right:0;z-index:5001;display:block;padding:16px 16px 10px;background:var(--white,#fff);border:1px solid var(--gray-mid,#e0e0e0);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.14)}
.na-dev-menu[hidden]{display:none}
.dm-h{margin:0 0 4px;padding:0 10px;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.01em;color:var(--gray-muted,#888)}
.na-dev-menu a{display:block;padding:7px 10px;border-radius:8px;font-family:'Barlow',sans-serif;font-weight:600;font-size:.9rem;line-height:1.3;color:var(--black,#111);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.na-dev-menu a:hover{background:var(--gray-light,#f5f5f5);color:var(--red,#DA291C)}
.na-dev-menu a[aria-current="page"]{color:var(--red,#DA291C);background:rgba(218,41,28,.07)}
.dm-owner{font-size:.75em;opacity:.65}
/* The account menu (2026-09-26): the name is the button (.na-who.na-dev-btn), the
   pages sit in a grid, and a footer row carries Markup on/off, Accounts and Sign
   out, which used to stand in the bar. The door icon beside the name signs out in
   one click. */
.na-dev-pages{display:grid;grid-template-columns:repeat(3,auto);gap:4px 16px}
.na-dev-pages:empty{display:none}
@media(max-width:1100px){.na-dev-pages{grid-template-columns:repeat(2,auto)}}
button.na-who{background:none;border:0;padding:4px 2px;cursor:pointer}
button.na-who:hover{color:var(--red,#DA291C)}
.na-acct-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-mid,#e0e0e0)}
.na-dev-pages:empty + .na-acct-foot{margin-top:0;padding-top:0;border-top:0}
.na-acct-foot a,.na-acct-foot button{padding:7px 10px;border-radius:8px;border:0;background:none;cursor:pointer;font-family:'Barlow',sans-serif;font-weight:600;font-size:.9rem;line-height:1.3;color:var(--black,#111);text-decoration:none;white-space:nowrap}
.na-acct-foot a:hover,.na-acct-foot button:hover{background:var(--gray-light,#f5f5f5);color:var(--red,#DA291C)}
.na-acct-foot #na-signout{margin-left:auto;color:var(--red,#DA291C)}
.na-markup[aria-pressed="false"] b{color:var(--gray-muted,#888)}
.na-exit{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--gray-mid,#e0e0e0);background:none;color:var(--gray-text,#555);cursor:pointer;padding:0;transition:border-color .2s,color .2s}
.na-exit:hover{border-color:var(--red,#DA291C);color:var(--red,#DA291C)}
.mob-icon-btn.na-markup[aria-pressed="false"]{opacity:.45}
.mob-dev{border:1px solid var(--gray-mid,#e0e0e0);border-radius:12px;padding:0 14px}
.mob-dev[hidden]{display:none}
.mob-dev summary{cursor:pointer;padding:11px 0;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.01em;color:var(--black,#111)}
.mob-dev .dm-group{padding-bottom:10px}
.mob-dev .dm-h{padding:0}
.mob-dev a{display:block;padding:6px 0;font-family:'Barlow',sans-serif;font-weight:600;font-size:.95rem;color:var(--black,#111);text-decoration:none}
.mob-dev a[aria-current="page"]{color:var(--red,#DA291C)}