:root{
    --sand-25:#FDFBF5; --sand-50:#FBF7EF; --sand-100:#F6EFE1; --sand-200:#EDE2CC;
    --ink:#16343C; --ink-soft:#48605F; --ink-mute:#5B6E6B;
    --teal:#0F8585; --teal-deep:#0B6165; --teal-tint:#E3F2EF;
    --sun:#FFB703; --sun-deep:#E89A00; --sun-tint:#FFF3D6;
    --coral:#E76F51; --coral-tint:#FCEAE3;
    --leaf:#3E9B6E; --leaf-tint:#E4F2E9;
    --amber:#F5A623;
    --shadow-lg: 0 24px 60px -18px rgba(22,52,60,.30), 0 4px 18px rgba(22,52,60,.08);
    --shadow-sm: 0 2px 10px rgba(22,52,60,.10);
    --font-serif: 'Fraunces',"Fraunces Fallback: Noto Serif","Fraunces Fallback: Times New Roman",serif;
    --font-sans: 'Plus Jakarta Sans',"Plus Jakarta Sans Fallback: Roboto","Plus Jakarta Sans Fallback: Arial",system-ui,sans-serif;
  }
  
  @font-face{font-family:"Fraunces Fallback: Noto Serif";
    src:local("Noto Serif"),local("NotoSerif"),local("NotoSerif-Regular"),local("Noto Serif Regular");
    size-adjust:97.5052%;ascent-override:100.3023%;descent-override:26.1525%;line-gap-override:0%}
  @font-face{font-family:"Fraunces Fallback: Times New Roman";
    src:local("Times New Roman"),local("TimesNewRomanPSMT");
    size-adjust:115.4462%;ascent-override:84.7148%;descent-override:22.0882%;line-gap-override:0%}
  @font-face{font-family:"Plus Jakarta Sans Fallback: Roboto";
    src:local("Roboto"),local("Roboto-Regular"),local("Roboto Regular");
    size-adjust:105.2101%;ascent-override:98.6597%;descent-override:21.1006%;line-gap-override:0%}
  @font-face{font-family:"Plus Jakarta Sans Fallback: Arial";
    src:local("Arial"),local("ArialMT");
    size-adjust:104.9796%;ascent-override:98.8763%;descent-override:21.147%;line-gap-override:0%}
  @font-face{font-family:"Fraunces Fallback: Noto Serif";font-weight:600 700;
    src:local("Noto Serif Bold"),local("NotoSerif-Bold");
    size-adjust:94.6289%;ascent-override:103.3511%;descent-override:26.9474%;line-gap-override:0%}
  @font-face{font-family:"Fraunces Fallback: Times New Roman";font-weight:600 700;
    src:local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT");
    size-adjust:111.9928%;ascent-override:87.3271%;descent-override:22.7693%;line-gap-override:0%}
  @font-face{font-family:"Plus Jakarta Sans Fallback: Roboto";font-weight:600 800;
    src:local("Roboto Bold"),local("Roboto-Bold");
    size-adjust:107.0445%;ascent-override:96.969%;descent-override:20.739%;line-gap-override:0%}
  @font-face{font-family:"Plus Jakarta Sans Fallback: Arial";font-weight:600 800;
    src:local("Arial Bold"),local("Arial-BoldMT");
    size-adjust:100.8374%;ascent-override:102.938%;descent-override:22.0156%;line-gap-override:0%}

  *{margin:0;padding:0;box-sizing:border-box}
  /* A display: rule on a component beats the UA sheet's [hidden]{display:none},
     which silently leaves "hidden" panels open (this bit the story-page claim
     form). Keep the attribute authoritative everywhere. */
  [hidden]{display:none!important}
  /* Keyboard users were tabbing the whole nav on every page before reaching any
     content. Visible only once focused, as the convention expects. */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;border-radius:0 0 12px 0;
    background:var(--ink);color:#fff;font-size:14px;font-weight:750;text-decoration:none}
  .skip-link:focus{left:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-sans);color:var(--ink);background:var(--sand-50);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--sun-tint)}
  .wrap{max-width:1160px;margin:0 auto;padding:0 32px}

  /* ---------- Summit Labs bar (top of every page — the studio behind the site) ---------- */
  .sl-bar{display:block;background:linear-gradient(90deg,#192a4a,#0e1626);text-decoration:none;
    border-bottom:1px solid rgba(201,169,80,.32)}
  /* Top and bottom only: the bar's inner row is also a .wrap, and the side
     padding is the .wrap's, as the header's is. The shorthand "padding:7px 0"
     zeroed it, so from 861px to 1160px the logo and the CTA sat flush with
     the viewport's edges. Below 861px the mobile .wrap rule, later in this
     sheet, sets all four sides, as it did before. */
  .sl-bar-in{display:flex;align-items:center;gap:16px;min-height:44px;padding-top:7px;padding-bottom:7px}
  .sl-bar-logo{height:20px;width:auto;flex-shrink:0}
  .sl-bar-txt{font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.72);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .sl-bar-txt b{color:#fff;font-weight:700}
  .sl-bar-txt em{color:#c9a950;font-style:normal;font-weight:600}
  .sl-bar-txt-mob{display:none;font-size:12px;line-height:1.3;color:rgba(255,255,255,.8);white-space:nowrap}
  .sl-bar-txt-mob b{color:#fff;font-weight:700}
  /* A fixed line-height: on its own row (phones) the CTA's line box set the
     bar's height, and line-height:normal is 15-18px depending on which face
     paints it, which moved the whole page 2-3px at the font swap. */
  .sl-bar-cta{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;font-weight:800;line-height:16px;color:#c9a950;white-space:nowrap;transition:color .15s}
  .sl-bar:hover .sl-bar-cta{color:#fff}
  /* Mobile: swap the full pitch for a short one — never hide Summit Labs entirely.
     The row may wrap. The logo (116.6px), "Built by Summit Labs" and the CTA
     need ~383px in the web font, plus the 40px of .wrap padding, and a phone
     is 320-430px wide: one non-wrapping row ran 45-84px past the right edge,
     gave every page a horizontal scroll and put the CTA off-screen. */
  @media (max-width:760px){.sl-bar-txt{display:none}.sl-bar-txt-mob{display:inline}
    .sl-bar-in{min-height:40px;flex-wrap:wrap;row-gap:6px}}
  /* Below 440px the CTA always takes a line of its own, right-aligned. A fixed
     breakpoint, not natural wrapping: the three faces that can paint the bar
     (the web font, Arial, Roboto) differ by up to 23px across the text and the
     CTA, so natural wrapping would flip the bar between one row and two at the
     font swap near 423px and move everything under it. From 441px the widest
     face still has 18px to spare on one row. The two rows get the 7px of
     vertical padding the bar has on desktop; the mobile .wrap rule, which
     comes later in this sheet, had zeroed it, and one row never showed that
     because min-height centred it. */
  @media (max-width:440px){.sl-bar-cta{flex-basis:100%;justify-content:flex-end}
    .sl-bar .sl-bar-in{padding-top:7px;padding-bottom:7px}}
  /* The bridge line: the same bar on project and city pages (bridgeLineHtml),
     saying one sentence in place of the pitch. Like the bar, nothing in it is
     hidden or shortened at any width, and it changes rows only at fixed
     widths, never where the text happens to break, so the font swap cannot
     move the page. Widest of the three faces, measured in Chrome: the logo
     116.6px, the sentence 200px, the CTA 191px, 16px between each. One row
     needs 537px plus the 40px of .wrap padding, so the CTA takes its own line
     from 600px down (24px to spare at 601). The logo and the sentence need
     333px, so from 390px down the sentence takes two lines, broken after "by"
     (18px to spare at 391; 34px at 320). The bar is then 57px tall, or 69px
     with the two-line sentence, in every face. */
  .sl-bar-line{font-size:12.5px;line-height:16px;color:rgba(255,255,255,.8);white-space:nowrap}
  .sl-bar-line b{color:#fff;font-weight:700}
  @media (max-width:600px){.sl-bridge .sl-bar-cta{flex-basis:100%;justify-content:flex-end}
    .sl-bridge .sl-bar-in{padding-top:7px;padding-bottom:7px}}
  @media (max-width:390px){.sl-bar-line>span{display:block}}

  /* ---------- header ---------- */
  .site-head{position:sticky;top:0;z-index:50;background:rgba(251,247,239,.88);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(22,52,60,.08)}
  .head-in{display:flex;align-items:center;height:68px;gap:28px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand-mark{width:38px;height:38px;border-radius:12px;flex-shrink:0;overflow:hidden;
    background:linear-gradient(145deg,#129893 0%,#0B6165 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 10px rgba(11,97,101,.30), inset 0 1px 0 rgba(255,255,255,.25)}
  /* The tower fills the tile; the tile's corners clip the roof (see BRAND_MARK_SVG). */
  .brand-mark svg{display:block;width:100%;height:100%}
  .brand-name{font-family:var(--font-serif);font-weight:650;font-size:23px;letter-spacing:-.02em;line-height:1}
  .brand-name .accent{color:var(--teal)}
  .site-nav{margin-left:auto;display:flex;align-items:center;gap:28px}
  .site-nav a{font-size:14px;font-weight:700;color:var(--ink-soft);letter-spacing:.005em;white-space:nowrap}
  .site-nav a:hover{color:var(--teal-deep)}
  .site-nav a.active{color:var(--ink);position:relative}
  .site-nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:2px;background:var(--sun)}
  .nav-ask{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;border-radius:11px;
    background:var(--teal-tint);color:var(--teal-deep) !important;font-size:13.5px;font-weight:800;
    letter-spacing:.005em;transition:background .15s ease,color .15s ease,transform .15s ease}
  .nav-ask svg{opacity:.85}
  .nav-ask:hover{background:var(--teal-deep);color:#fff !important;transform:translateY(-1px)}
  .nav-gold{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 19px;border-radius:13px;
    background:linear-gradient(180deg,#FFC42E,#FFB000);color:var(--ink) !important;
    font-size:13.5px;font-weight:800;letter-spacing:.01em;
    box-shadow:0 8px 18px -6px rgba(232,154,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
    transition:transform .15s ease, box-shadow .15s ease}
  .nav-gold:hover{transform:translateY(-1px);box-shadow:0 12px 22px -6px rgba(232,154,0,.6), inset 0 1px 0 rgba(255,255,255,.4)}

  /* ---------- nav items + dropdown menus ---------- */
  .site-nav .nav-item{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);letter-spacing:.005em;
    white-space:nowrap;padding:0;line-height:1;position:relative;transition:color .15s}
  .site-nav .nav-item:hover{color:var(--teal-deep)}
  .site-nav .nav-item .caret{opacity:.7;transition:transform .18s ease}
  .site-nav .nav-item.active{color:var(--ink)}
  .site-nav .nav-item.active::after{content:'';position:absolute;left:0;right:14px;bottom:-24px;height:3px;
    border-radius:2px;background:var(--sun)}
  .nav-drop{position:relative;display:inline-flex;align-items:center}
  .nav-drop:hover .nav-item .caret,.nav-drop.open .nav-item .caret{transform:rotate(180deg)}
  .nav-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);margin-top:14px;min-width:216px;
    background:#fff;border:1px solid rgba(22,52,60,.08);border-radius:16px;padding:8px;
    box-shadow:0 18px 44px -14px rgba(22,52,60,.30), 0 4px 14px rgba(22,52,60,.07);
    opacity:0;visibility:hidden;transition:opacity .16s ease, transform .16s ease;z-index:60}
  .nav-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px} /* hover bridge */
  .nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu,.nav-drop.open .nav-menu{
    opacity:1;visibility:visible;transform:translate(-50%,0)}
  .nav-menu a{display:block;padding:9px 13px;border-radius:10px;font-size:13.5px;font-weight:650;
    color:var(--ink-soft);white-space:nowrap;transition:background .12s, color .12s}
  /* These two sat inside the rule above, unclosed, from 2026-07: the Map
     menu's section heads lost their style, and their rule used a --line
     the sheet never defined (review, 19 Oct 2026). */
  .nav-menu-head{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-mute);padding:9px 14px 4px;margin-top:4px;border-top:1px solid rgba(22,52,60,.08)}
  .nav-menu-head:first-of-type{border-top:0;margin-top:0}
  .nav-menu a:hover{background:var(--sand-50);color:var(--teal-deep)}
  .nav-menu .nav-menu-lead{display:flex;align-items:center;gap:7px;color:var(--teal-deep);font-weight:750;
    margin-bottom:6px;padding-bottom:11px;border-bottom:1px solid rgba(22,52,60,.08);border-radius:10px 10px 0 0}

  /* ---------- hamburger + mobile menu ---------- */
  .nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:none;background:none;cursor:pointer;
    align-items:center;justify-content:center}
  .nt-bars{position:relative;width:22px;height:16px;display:block}
  .nt-bars span{position:absolute;left:0;width:22px;height:2.4px;border-radius:2px;background:var(--ink);
    transition:transform .22s ease, opacity .18s ease;top:50%}
  .nt-bars span:nth-child(1){transform:translateY(-7px)}
  .nt-bars span:nth-child(3){transform:translateY(7px)}
  .nav-toggle[aria-expanded="true"] .nt-bars span:nth-child(1){transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nt-bars span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nt-bars span:nth-child(3){transform:rotate(-45deg)}
  .mobile-nav{position:fixed;left:0;right:0;top:60px;bottom:0;background:var(--sand-50);z-index:45;
    overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease, transform .2s ease;border-top:1px solid rgba(22,52,60,.08)}
  .mobile-nav.open{opacity:1;visibility:visible;transform:none}
  .mnav-in{display:flex;flex-direction:column;gap:6px;padding:22px 20px 40px}
  .mnav-group{display:flex;flex-direction:column;padding-bottom:12px;margin-bottom:6px;
    border-bottom:1px solid rgba(22,52,60,.08)}
  .mnav-head{font-family:var(--font-serif);font-weight:600;font-size:21px;color:var(--ink);padding:11px 0}
  .mnav-sub{font-size:15px;font-weight:650;color:var(--ink-soft);padding:9px 0 9px 16px}
  .mnav-sub:active,.mnav-head:active{color:var(--teal-deep)}
  .mnav-gold{align-self:flex-start;margin-top:14px;height:48px;font-size:15px}
  body.mnav-open{overflow:hidden}
  /* "Ask anything": the plain-English search, first in the phone menu and as
     its own button beside it, so no page is a dead end for finding things. */
  .nav-new{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:6px;margin-left:2px;
    background:var(--sun);color:var(--ink);font-family:var(--font-sans);font-size:10.5px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase}
  /* The pill says "Ask anything" and carries the New tag where the row has
     room for them: the tag goes under 1181px and "anything" under 1061px.
     From 1060px down the pill is as wide as the plain "Ask" pill the
     861-1040px spacing below was measured with (#50), and from 1041px the
     full spacing had 73px to spare for the words that come back. */
  @media (max-width:1180px){.nav-ask .nav-new{display:none}}
  @media (max-width:1060px){.nav-ask-more{display:none}}
  .m-ask{display:none;position:relative;align-items:center;gap:6px;height:44px;padding:0 13px;margin-left:auto;
    border-radius:12px;background:var(--teal-tint);color:var(--teal-deep);font-size:14px;font-weight:800}
  .m-ask:active{background:var(--teal-deep);color:#fff}
  .m-ask .new-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
    background:var(--sun);border:2px solid var(--sand-25)}
  /* Under 420px the brand, "Ask" and the menu no longer fit one row with their
     44px targets: the button keeps its search icon, at 44px square. */
  @media (max-width:420px){.m-ask{width:44px;height:44px;padding:0;justify-content:center}.m-ask span{display:none}
    .m-ask svg{width:19px;height:19px}}
  /* With the Ask button in the row (#51) the brand, Ask and the menu need
     338px between the side paddings: at 360px the menu button ran into the
     right padding, and at 320px 38px past the edge, so every page scrolled
     sideways (measured 19 Oct 2026). Narrower spacing and a smaller wordmark
     make the row 307px under 401px, and 285px with 16px sides under 351px;
     nothing is hidden. The selectors carry .site-head to beat the home
     page's own header rules. */
  @media (max-width:400px){.site-head .head-in{gap:10px}.site-head .m-ask + .nav-toggle{margin-left:0}
    .site-head .brand{gap:10px}.site-head .brand-mark{width:34px;height:34px}.site-head .brand-name{font-size:21px}}
  @media (max-width:350px){.site-head .head-in{padding-left:16px;padding-right:16px}.site-head .brand-name{font-size:18px}}
  .mnav-ask{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;margin-bottom:10px;border-radius:14px;
    background:var(--teal-tint);color:var(--teal-deep)}
  .mnav-ask svg{width:20px;height:20px;flex-shrink:0;margin-top:3px}
  /* The child span only: the New tag is a span inside it, and took this
     rule's size and colour over its own (3.9:1 on its amber). */
  .mnav-ask>span{display:flex;flex-direction:column;gap:3px;font-size:13.5px;font-weight:650;color:var(--ink-soft);line-height:1.4}
  .mnav-ask b{display:flex;align-items:center;gap:6px;font-family:var(--font-serif);font-weight:600;font-size:21px;color:var(--ink)}

  /* ---------- page hero ---------- */
  .page-hero{padding:52px 0 8px;
    background:
      radial-gradient(900px 420px at 82% -10%, rgba(255,183,3,.13), rgba(255,183,3,0) 62%),
      radial-gradient(800px 400px at 12% -14%, rgba(15,133,133,.10), rgba(15,133,133,0) 60%)}
  .page-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;
    letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:14px}
  .page-eyebrow .edot{width:6px;height:6px;border-radius:50%;background:var(--sun)}
  .page-hero h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(36px,4.2vw,54px);
    line-height:1.06;letter-spacing:-.02em;max-width:820px;text-wrap:balance}
  .page-lede{max-width:720px;margin-top:16px;font-size:17.5px;line-height:1.62;color:var(--ink-soft)}
  .page-lede b{color:var(--ink);font-weight:700}
  .asof{display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:34px;padding:0 14px;border-radius:999px;
    background:#fff;border:1px solid rgba(22,52,60,.10);box-shadow:var(--shadow-sm);
    font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .asof .adot{width:8px;height:8px;border-radius:50%;background:#2BAE66;box-shadow:0 0 0 3px rgba(43,174,102,.22)}

  /* ---------- digest band ---------- */
  .digest{padding:80px 0 84px}
  .digest-card{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(140deg,#0E7276 0%,#0B6165 55%,#0A5257 100%);
    color:#fff;padding:52px 60px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:48px}
  .digest-card::after{content:'';position:absolute;right:-70px;top:-90px;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,209,102,.28), rgba(255,209,102,0))}
  .digest-copy{flex:1;min-width:0}
  .digest-copy .d-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#FFD166;margin-bottom:12px}
  .digest-copy h2{font-family:var(--font-serif);font-weight:600;font-size:32px;letter-spacing:-.015em;line-height:1.12}
  .digest-copy p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:12px;max-width:480px}
  .digest-form{display:flex;flex-direction:column;gap:10px;flex-shrink:0;width:360px;position:relative;z-index:1}
  .digest-form .row{display:flex;gap:10px}
  .digest-form input{flex:1;height:52px;padding:0 18px;border:none;border-radius:14px;outline:none;min-width:0;
    font-family:inherit;font-size:14.5px;font-weight:500;color:var(--ink);background:rgba(253,251,245,.97)}
  .digest-form input::placeholder{color:var(--ink-mute)}
  .digest-form button{height:52px;padding:0 22px;border:none;border-radius:14px;cursor:pointer;
    background:#fff;color:var(--teal-deep);font-family:inherit;font-size:14.5px;font-weight:800;
    box-shadow:0 6px 16px -4px rgba(6,45,48,.45)}
  .digest-form button:hover{background:var(--sun-tint)}
  .digest-form small{font-size:12px;font-weight:600;color:rgba(255,255,255,.62)}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .digest-err{background:#E76F51 !important;color:#fff !important}

  /* ---------- footer ---------- */
  .site-foot{border-top:1px solid rgba(22,52,60,.09);background:var(--sand-100);padding:44px 0 38px}
  .foot-top{display:flex;gap:48px;align-items:flex-start}
  .foot-brand{max-width:340px}
  /* Every footer link is a 44px tap target (plan 3.3). The column links
     measured 17px tall at 360px, the phone and email 16px and the brand 38px;
     the 44px box holds the space the 9px margin used to. The links in the
     bottom line are inline-flex, so each keeps its place in the sentence. */
  .foot-brand .brand{min-height:44px;margin-bottom:12px}
  .foot-brand p{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
  .foot-cols{margin-left:auto;display:flex;gap:64px}
  .foot-col h4{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px}
  .foot-col a{display:flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:650;color:var(--ink-soft)}
  .foot-col a:hover{color:var(--teal-deep)}
  /* The box a page may give its own .src (on /ask/ an answer's source is a
     bordered card with 13px of side padding) is reset here: the footer's
     source names took it, and at 861px the widened column ran /ask/ 7px
     past the right edge. */
  .foot-col .src,.foot-col .src:hover{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:9px;
    padding:0;border:0;border-radius:0;background:none}
  /* Summit Labs — the studio behind Lakelandmarks (their gold/navy brand) */
  .foot-summit{display:flex;align-items:center;gap:22px;margin-top:34px;padding:20px 24px;border-radius:16px;
    background:#fff;border:1px solid rgba(25,42,74,.16);box-shadow:0 2px 12px rgba(25,42,74,.06);
    transition:border-color .15s, box-shadow .15s, transform .15s}
  .foot-summit:hover{border-color:#c9a950;box-shadow:0 10px 26px -10px rgba(25,42,74,.28);transform:translateY(-1px)}
  .fs-logo{height:38px;width:auto;flex-shrink:0}
  .fs-copy{font-size:13px;line-height:1.55;color:var(--ink-soft)}
  .fs-copy b{display:block;font-family:'Roboto Mono','Plus Jakarta Sans',monospace;font-size:11.5px;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;color:#c9a950;margin-bottom:5px}
  .fs-copy strong{color:#192a4a;font-weight:750}
  .fs-cta{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
    font-size:13.5px;font-weight:800;color:#fff;background:#192a4a;padding:11px 18px;border-radius:11px}
  .foot-summit:hover .fs-cta{background:#c9a950;color:#192a4a}
  .foot-bottom{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:20px;
    border-top:1px solid rgba(22,52,60,.08);font-size:12.5px;font-weight:600;color:var(--ink-mute)}
  .foot-bottom .built{margin-left:auto}
  .foot-bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);font-weight:700}
  .foot-bottom a:hover{color:var(--teal-deep)}
  @media (max-width:620px){.foot-summit{flex-direction:column;align-items:flex-start;gap:14px}.fs-cta{margin-left:0}}

  /* ---------- narrow desktop, 861-1040px ---------- */
  /* The desktop header shows from 861px, and at its full spacing it needs
     896px of content (904px on the home page, whose nav gaps are 30px) plus
     64px of side padding: at 861px the nav ran 67px past the right edge and
     every page scrolled sideways. In this band the spacing tightens and
     nothing is hidden: 24px of side padding, 16px between the brand and the
     nav, 12px between nav items, slimmer Ask and Weekly buttons and a 21px
     wordmark bring the row to about 791px, 22px to spare at 861px. The
     selectors carry .site-head so a page that re-declares .head-in, .wrap or
     the nav after this sheet (the home page) cannot undo them. From 1041px
     the full spacing has 73px to spare. The bar takes the same side padding
     so its logo lines up with the brand. */
  @media (min-width:861px) and (max-width:1040px){
    .site-head .head-in{gap:16px;padding-left:24px;padding-right:24px}
    .site-head .site-nav{gap:12px}
    .site-head .nav-ask{padding:0 12px}
    .site-head a.nav-gold{padding:0 15px}
    .site-head .brand-name{font-size:21px}
    .sl-bar .sl-bar-in{padding:7px 24px}
  }
  /* The full pitch is 661px wide, and one row with the logo, the CTA and the
     side padding needs 989px. Below that the pitch was cut off with an
     ellipsis from 761px (where the short pitch stops) up, so in that band it
     takes two lines instead, in a box narrow enough that every face breaks
     it onto exactly two: the bar is the same height in every face, so the
     font swap cannot move the page. */
  @media (min-width:761px) and (max-width:1040px){
    .sl-bar-txt{white-space:normal;max-width:420px;text-wrap:balance}
  }

  /* ---------- mobile chrome ---------- */
  @media (max-width: 860px){
    .wrap{padding:0 20px}
    .head-in{height:60px;gap:14px}
    .site-nav{display:none}
    .nav-toggle{display:inline-flex}
    .m-ask{display:inline-flex}
    .m-ask + .nav-toggle{margin-left:2px}
    /* Neither button gives way to the brand: at 375px the menu button was
       squeezed to 22px wide (17 Oct 2026), under a 44px tap target. */
    .m-ask,.nav-toggle{flex-shrink:0}
    .nav-gold{height:38px;padding:0 14px;font-size:12.5px}
    .page-hero{padding-top:40px}
    .page-lede{font-size:15.5px}
    .digest{padding:60px 0 64px}
    .digest-card{flex-direction:column;padding:38px 26px;gap:26px;align-items:stretch}
    .digest-copy h2{font-size:26px}
    .digest-form{width:100%}
    .digest-form .row{flex-direction:column}
    .foot-top{flex-direction:column;gap:32px}
    .foot-cols{margin-left:0;flex-wrap:wrap;gap:32px 48px}
    .foot-bottom{flex-wrap:wrap;row-gap:6px}
    .foot-bottom .built{margin-left:0;width:100%}
    /* 16px stops iOS zooming the field. flex:0 0 auto keeps its 52px: in the
       column the row becomes here, flex:1 made the basis 0 and the row's
       content its size, and the email field collapsed to 21px on every page
       (measured at 360px). The honeypot beside it sits out of flow and never
       showed it. */
    .digest-form input{font-size:16px;flex:0 0 auto}
  }
  /* Visible keyboard focus (WCAG 2.4.7). */
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--teal-deep);outline-offset:2px;border-radius:5px}
  /* Respect the OS "reduce motion" setting. */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
  }

/* Lakelandmarks · Explore — Florida Modern production stylesheet.
   Generated into site-next/explore/ by src/explore/build-explore.ts. */

:root{
  --sand-25:#FDFBF5;
  --sand-50:#FBF7EF;
  --sand-100:#F6EFE1;
  --sand-200:#EDE2CC;
  --ink:#16343C;
  --ink-soft:#48605F;
  --ink-mute:#5B6E6B;
  --teal:#0F8585;
  --teal-deep:#0B6165;
  --teal-tint:#E3F2EF;
  --sun:#FFB703;
  --sun-deep:#E89A00;
  --sun-tint:#FFF3D6;
  --coral:#E76F51;
  --coral-tint:#FCEAE3;
  --leaf:#3E9B6E;
  --leaf-tint:#E4F2E9;
  --amber:#F5A623;
  --shadow-lg: 0 24px 60px -18px rgba(22,52,60,.33), 0 4px 18px rgba(22,52,60,.10);
  --shadow-sm: 0 2px 10px rgba(22,52,60,.10);
  --radius-panel:22px;
  --header-h:66px;
  --slbar-h:45px;
}
*{margin:0;padding:0;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--teal-deep,#0B6165);color:#fff;padding:9px 14px;border-radius:0 0 8px 8px;font-weight:700;font-size:13px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--sand-100);overflow:hidden}
button{font-family:inherit}
#app{position:relative;width:100%;height:calc(100dvh - var(--slbar-h,44px));overflow:hidden}

/* ---------- MAP ---------- */
#map{position:absolute;inset:0;background:var(--sand-100)}
#map .maplibregl-canvas{filter:saturate(.92) sepia(.14) brightness(1.03) contrast(.98)}
.map-veil{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    linear-gradient(180deg, rgba(251,247,239,.82) 0%, rgba(251,247,239,0) 17%),
    radial-gradient(1200px 500px at 50% 108%, rgba(255,183,3,.10), rgba(255,183,3,0) 60%);}

/* map skeleton */
.map-skeleton{position:absolute;inset:0;z-index:6;background:var(--sand-100);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  transition:opacity .6s ease;}
.map-skeleton.gone{opacity:0;pointer-events:none}
.skel-blobs{position:absolute;inset:0;overflow:hidden;opacity:.55}
.skel-blobs span{position:absolute;border-radius:50%;background:var(--teal-tint);animation:blob 2.6s ease-in-out infinite}
.skel-blobs span:nth-child(1){width:340px;height:200px;left:12%;top:24%;border-radius:48% 52% 60% 40%/55% 45% 55% 45%}
.skel-blobs span:nth-child(2){width:220px;height:150px;right:16%;top:56%;animation-delay:.6s;border-radius:60% 40% 45% 55%/50% 55% 45% 50%}
.skel-blobs span:nth-child(3){width:150px;height:110px;left:46%;top:12%;animation-delay:1.2s;border-radius:52% 48% 55% 45%/48% 55% 45% 52%}
@keyframes blob{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.06);opacity:1}}
.skel-pin{width:44px;height:44px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(145deg,#129893,#0B6165);box-shadow:0 10px 24px -8px rgba(11,97,101,.5);
  display:flex;align-items:center;justify-content:center;animation:bounce 1.2s ease-in-out infinite}
.skel-pin::after{content:'';width:14px;height:14px;border-radius:50%;background:var(--sun)}
@keyframes bounce{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(-8px)}}
.skel-note{font-size:13px;font-weight:700;color:var(--ink-soft);letter-spacing:.02em;z-index:2}

/* tile-failure fallback */
.map-fallback{position:absolute;inset:0;z-index:7;background:var(--sand-100);
  display:flex;align-items:center;justify-content:center}
.map-fallback[hidden]{display:none}
.fallback-card{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:26px 30px;max-width:360px;text-align:center}
.fallback-card h3{font-family:'Fraunces',serif;font-size:20px;font-weight:640;margin-bottom:8px}
.fallback-card p{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-bottom:16px}
.fallback-card button{height:42px;padding:0 22px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#FFC42E,#FFB000);color:var(--ink);font-size:13.5px;font-weight:800;
  box-shadow:0 6px 16px -4px rgba(232,154,0,.55)}

/* ---------- HEADER ---------- */
header{position:absolute;top:0;left:0;right:0;height:var(--header-h);z-index:40;
  display:flex;align-items:center;gap:24px;padding:0 24px;
  background:rgba(253,251,245,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(22,52,60,.08);}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;color:inherit}
.brand-mark{width:38px;height:38px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(145deg,#129893 0%,#0B6165 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(11,97,101,.30), inset 0 1px 0 rgba(255,255,255,.25);}
/* The tower fills the tile; the tile's corners clip the roof (site-chrome.ts BRAND_MARK_SVG). */
.brand-mark svg{display:block;width:100%;height:100%}
.brand-name{font-family:'Fraunces',serif;font-weight:650;font-size:23px;letter-spacing:-.02em;line-height:1}
.brand-name .accent{color:var(--teal)}
.brand-tag{font-family:'Fraunces',serif;font-style:italic;font-size:13.5px;color:var(--ink-soft);margin-top:3px;letter-spacing:.005em}
.stats{display:flex;align-items:center;margin-left:4px}
.stat{display:flex;align-items:baseline;gap:6px;padding:0 18px;border-left:1px solid rgba(22,52,60,.10)}
.stat:first-child{border-left:none}
.stat b{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--teal-deep)}
.stat span{font-size:12px;font-weight:600;color:var(--ink-mute);letter-spacing:.01em;white-space:nowrap}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{position:relative;display:flex;align-items:center;gap:9px;width:252px;height:40px;padding:0 16px;
  background:#fff;border:1px solid rgba(22,52,60,.12);border-radius:999px;box-shadow:var(--shadow-sm)}
.search input{border:none;outline:none;background:transparent;font:inherit;font-size:13px;font-weight:500;
  color:var(--ink);width:100%}
.search input::placeholder{color:var(--ink-mute)}
.search-results{position:absolute;top:48px;left:0;right:-40px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);
  padding:6px;display:none;max-height:320px;overflow:auto;z-index:60}
.search-results.open{display:block}
.sr-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;cursor:pointer}
.sr-item:hover,.sr-item:focus-visible{background:var(--sand-50)}
.sr-item:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.sr-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.sr-t{font-size:13px;font-weight:700;line-height:1.25}
.sr-s{font-size:11px;font-weight:600;color:var(--ink-mute);margin-top:1px}
.sr-none{padding:12px;font-size:12.5px;font-weight:600;color:var(--ink-mute);text-align:center}
.sr-ask{display:block;margin:0 4px 4px;padding:11px 12px;border-radius:11px;text-align:center;
  background:var(--teal-tint);color:var(--teal-deep);font-size:13px;font-weight:800}
.sr-ask:hover{background:#d4ece7}
.fresh{display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;
  background:var(--teal-tint);border:1px solid rgba(15,133,133,.18);white-space:nowrap}
.fresh-dot{width:8px;height:8px;border-radius:50%;background:#2BAE66;box-shadow:0 0 0 3px rgba(43,174,102,.22)}
.fresh b{font-size:12.5px;font-weight:700;color:var(--teal-deep)}
.fresh i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink-soft)}

/* ---------- CHIP TOOLBAR ---------- */
.toolbar{position:absolute;top:80px;left:24px;right:24px;z-index:35;display:flex;align-items:center;gap:8px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.toolbar::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;flex-shrink:0;border:1px solid rgba(22,52,60,.10);
  background:#fff;box-shadow:var(--shadow-sm);
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .12s ease}
.chip:hover{transform:translateY(-1px)}
.chip svg{flex-shrink:0}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.active svg *{stroke:#FFD166}
.toolbar .spacer{flex:1;min-width:12px}
.hood-label{font-size:11px;font-weight:700;letter-spacing:.09em;color:rgba(22,52,60,.55);text-transform:uppercase;
  padding:4px 10px 4px 2px;text-shadow:0 1px 0 rgba(251,247,239,.8);white-space:nowrap;flex-shrink:0}
.chip.hood{background:rgba(253,251,245,.88);backdrop-filter:blur(6px);font-weight:600;color:var(--teal-deep);height:36px;padding:0 14px}
.chip.hood:active{background:var(--teal-tint)}

/* ---------- FLOATING PANELS ---------- */
.panel{position:absolute;top:138px;bottom:24px;z-index:30;background:#fff;border-radius:var(--radius-panel);
  box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:opacity .28s ease,transform .28s ease}
.panel-left{left:24px;width:424px;transform-origin:left center}
.panel-left.closed{opacity:0;transform:translateX(-18px) scale(.985);pointer-events:none}
.panel-right{right:24px;width:376px}
.sheet-grip{display:none}

/* ---------- STORY PANEL ---------- */
.story-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.story-scroll::-webkit-scrollbar{width:10px}
.story-scroll::-webkit-scrollbar-thumb{background:var(--sand-200);border-radius:99px;border:3px solid #fff}
.cover{position:relative;height:172px;flex-shrink:0;background:var(--sand-100)}
.cover svg{display:block;width:100%;height:100%}
.cover-pills{position:absolute;top:14px;left:14px;right:52px;display:flex;gap:8px}
.cpill{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(253,251,245,.92);backdrop-filter:blur(8px);font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cpill .dot{width:8px;height:8px;border-radius:50%}
.cpill.right{margin-left:auto;font-weight:600;color:var(--ink-soft)}
.cpill.cat{margin-left:auto;gap:5px;padding-left:9px;color:var(--ink);font-weight:750}
.cpill.cat .cic{display:inline-flex;align-items:center}
.cover .cicon{width:14px;height:14px;display:block;position:static;inset:auto}
.close-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(253,251,245,.92);display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;color:var(--ink-soft);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.close-x:hover{color:var(--ink)}

.story{padding:18px 22px 0;display:flex;flex-direction:column;min-height:0;flex:1}
.eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sun-deep);margin-bottom:7px}
.story h1{font-family:'Fraunces',serif;font-weight:620;font-size:24.5px;line-height:1.13;letter-spacing:-.015em;margin-bottom:7px}
.story-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-mute);margin-bottom:12px;flex-wrap:wrap}
.story-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-mute);opacity:.6}
.story p.lede{font-size:13.5px;line-height:1.56;color:var(--ink-soft);margin-bottom:14px}
.story p.lede b{color:var(--ink);font-weight:700}

.tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.tl-head h3{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.timeline{position:relative;padding-left:20px;margin-bottom:13px}
.timeline::before{content:'';position:absolute;left:5px;top:7px;bottom:9px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--teal) 0%, var(--sand-200) 100%)}
.tl-item{position:relative;padding-bottom:11px}
.tl-item:last-child{padding-bottom:0}
.tl-item .tdot{position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--teal);border:2.5px solid #fff;box-shadow:0 0 0 1.5px var(--teal)}
.tl-item.next .tdot{background:#fff;box-shadow:0 0 0 1.5px var(--sun-deep)}
.tl-item .tdate{font-size:11px;font-weight:800;color:var(--teal-deep);letter-spacing:.03em;text-transform:uppercase}
.tl-item.next .tdate{color:var(--sun-deep)}
.tl-item .tev{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;margin-top:1px}
.tl-item .tev i{font-style:normal;font-weight:500;color:var(--ink-mute)}
.tl-item .tev a{color:var(--teal-deep);text-decoration:none;border-bottom:1px dotted rgba(11,97,101,.4)}

.receipts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.receipt{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;text-decoration:none;color:inherit;
  background:var(--sand-50);border:1px solid rgba(22,52,60,.09);cursor:pointer;transition:border-color .15s ease}
.receipt:hover{border-color:rgba(15,133,133,.45)}
.receipt .r-ic{width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid rgba(22,52,60,.10);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.receipt .r-t{font-size:11px;font-weight:700;line-height:1.3}
.receipt .r-s{font-size:10px;font-weight:600;color:var(--ink-mute);margin-top:1px;word-break:break-all}
.receipt .r-arrow{margin-left:auto;flex-shrink:0;opacity:.55}
.pipeline-note{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-mute);margin:0 0 14px}

.story-actions{margin-top:auto;position:sticky;bottom:0;background:#fff;display:flex;flex-direction:column;gap:10px;padding:14px 22px 18px;border-top:1px solid rgba(22,52,60,.08)}
.sa-row{display:flex;gap:10px}
.btn-follow{flex:1;height:44px;border:none;border-radius:13px;cursor:pointer;
  background:linear-gradient(180deg,#FFC42E,#FFB000);color:var(--ink);
  font-size:14px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 6px 16px -4px rgba(232,154,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease, box-shadow .2s ease}
.btn-follow:hover{transform:translateY(-1px)}
.btn-follow.following{background:var(--teal-tint);color:var(--teal-deep);box-shadow:inset 0 0 0 1.5px rgba(15,133,133,.35)}
.btn-ghost{width:44px;height:44px;border-radius:13px;background:#fff;border:1px solid rgba(22,52,60,.14);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.btn-ghost:hover{border-color:rgba(22,52,60,.3)}
.copied-tip{position:absolute;bottom:52px;right:0;background:var(--ink);color:#fff;font-size:11px;font-weight:700;
  padding:6px 11px;border-radius:9px;white-space:nowrap;opacity:0;transform:translateY(4px);transition:all .2s ease;pointer-events:none}
.copied-tip.show{opacity:1;transform:translateY(0)}
/* follow: icon swap (bookmark ↔ check) + inline email capture */
.btn-follow .bf-ic{display:inline-flex;align-items:center}
.btn-follow .bf-ic-check{display:none}
.btn-follow.following .bf-ic-follow{display:none}
.btn-follow.following .bf-ic-check{display:inline-flex}
.btn-follow:disabled,.btn-follow-go:disabled{opacity:.6;cursor:default;transform:none}
.follow-form{display:flex;gap:8px;animation:followIn .18s ease}
.follow-form input{flex:1;min-width:0;height:44px;border-radius:13px;border:1.5px solid rgba(22,52,60,.16);
  background:var(--sand-50);padding:0 14px;font-size:14px;font-weight:600;color:var(--ink);font-family:inherit}
.follow-form input::placeholder{color:var(--ink-mute);font-weight:600}
.follow-form input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,133,133,.15)}
.btn-follow-go{flex-shrink:0;height:44px;padding:0 18px;border:none;border-radius:13px;cursor:pointer;
  background:var(--teal);color:#fff;font-size:14px;font-weight:800;letter-spacing:.01em;font-family:inherit;
  transition:background .15s ease}
.btn-follow-go:hover{background:var(--teal-deep)}
.follow-note{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--ink-soft);padding:0 2px}
.follow-note.err{color:var(--coral)}
@keyframes followIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- FEED ---------- */
.feed-head{padding:16px 20px 11px;border-bottom:1px solid rgba(22,52,60,.08);flex-shrink:0}
.feed-title-row{display:flex;align-items:center;gap:9px}
.feed-title-row h2{font-family:'Fraunces',serif;font-weight:640;font-size:20px;letter-spacing:-.01em}
.live{display:flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;margin-left:auto;
  background:var(--coral-tint);border:1px solid rgba(231,111,81,.25)}
.live .ld{width:6px;height:6px;border-radius:50%;background:var(--coral);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(231,111,81,.35)}50%{box-shadow:0 0 0 4px rgba(231,111,81,0)}}
.live b{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#C4512F}
.feed-sub{font-size:12px;font-weight:500;color:var(--ink-mute);margin-top:4px;line-height:1.4}
.feed-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:5px 10px}
.feed-list::-webkit-scrollbar{width:10px}
.feed-list::-webkit-scrollbar-thumb{background:var(--sand-200);border-radius:99px;border:3px solid #fff}
.feed-item{display:flex;gap:11px;padding:9.5px 10px;border-radius:14px;position:relative;cursor:pointer;width:100%;
  border:none;background:transparent;text-align:left;transition:background .15s ease}
.feed-item:hover{background:var(--sand-50)}
.feed-item.viewing{background:var(--teal-tint);box-shadow:inset 0 0 0 1.5px rgba(15,133,133,.28)}
.fi-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fi-body{min-width:0;flex:1}
.fi-t{font-size:13px;font-weight:700;line-height:1.3;color:var(--ink)}
.fi-m{font-size:11.5px;font-weight:600;color:var(--ink-mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.fi-time{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--ink-mute);padding-top:2px;text-transform:uppercase}
.fi-time.today{color:var(--coral)}
.fi-receipt{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;color:var(--teal-deep);
  opacity:0;transition:opacity .15s ease;background:#fff;border:1px solid rgba(22,52,60,.12)}
.feed-item:hover .fi-receipt{opacity:1}
/* touch devices have no hover — reveal the source receipt by default */
@media (hover:none){.fi-receipt{opacity:1}}
.viewing-tag{font-size:9px;font-weight:800;letter-spacing:.09em;color:var(--teal-deep);text-transform:uppercase}
.feed-divider{display:flex;align-items:center;gap:10px;padding:12px 10px 6px;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.feed-divider::before,.feed-divider::after{content:'';flex:1;height:1px;background:rgba(22,52,60,.10)}
.feed-foot{padding:12px 20px 16px;border-top:1px solid rgba(22,52,60,.08);flex-shrink:0}
.feed-foot button{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:12px;width:100%;
  background:var(--sand-50);border:1px solid rgba(22,52,60,.10);cursor:pointer;
  font-size:13px;font-weight:700;color:var(--teal-deep);transition:border-color .15s ease}
.feed-foot button:hover{border-color:rgba(15,133,133,.4)}

/* ---------- MAP FURNITURE ---------- */
.legend{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:25;
  display:flex;align-items:center;gap:16px;height:42px;padding:0 20px;border-radius:999px;
  background:rgba(253,251,245,.92);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);border:1px solid rgba(22,52,60,.09);white-space:nowrap}
.lg-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.lg-dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 -1px 2px rgba(0,0,0,.15)}
.lg-count{font-size:11.5px;font-weight:600;color:var(--ink-mute);padding-left:16px;border-left:1px solid rgba(22,52,60,.12)}
.zoomer{position:absolute;right:416px;bottom:26px;z-index:25;width:40px;border-radius:14px;overflow:hidden;
  background:rgba(253,251,245,.95);box-shadow:var(--shadow-sm);border:1px solid rgba(22,52,60,.09)}
.zoomer button{display:flex;align-items:center;justify-content:center;width:100%;height:38px;border:none;background:transparent;
  font-size:19px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.zoomer button:hover{background:var(--sand-50)}
.zoomer .zdiv{height:1px;background:rgba(22,52,60,.10);margin:0 8px}
.attrib{position:absolute;left:50%;transform:translateX(-50%);bottom:7px;z-index:25;
  font-size:9.5px;font-weight:500;color:rgba(22,52,60,.48);letter-spacing:.01em;white-space:nowrap}
.attrib a{color:inherit;text-decoration:none}

/* ---------- MAP PINS ---------- */
.pin-wrap{cursor:pointer}
.pin-wrap svg{display:block;filter:drop-shadow(0 5px 8px rgba(22,52,60,.35));transition:transform .18s ease;transform-origin:50% 100%}
.pin-wrap:hover svg{transform:scale(1.12)}
.pin-sel .halo{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:34px;height:12px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(22,52,60,.28), rgba(22,52,60,0))}
.pin-label{position:absolute;left:calc(100% + 10px);top:2px;white-space:nowrap;
  background:#16343C;color:#fff;border-radius:11px;padding:7px 12px 8px;
  box-shadow:0 8px 22px -6px rgba(22,52,60,.5)}
.pin-label::before{content:'';position:absolute;left:-5px;top:14px;width:10px;height:10px;background:#16343C;border-radius:2px;transform:rotate(45deg)}
.pin-label .pl-t{font-size:12.5px;font-weight:750;letter-spacing:.005em}
.pin-label .pl-s{font-size:10.5px;font-weight:600;color:#FFD166;margin-top:1px}
.pin-label.flip{left:auto;right:calc(100% + 10px)}
.pin-label.flip::before{left:auto;right:-5px}
.pin-mini{position:absolute;left:calc(100% + 8px);top:1px;white-space:nowrap;
  background:rgba(255,255,255,.96);border-radius:999px;padding:6px 11px;
  font-size:11px;font-weight:750;color:var(--ink);
  box-shadow:0 4px 12px rgba(22,52,60,.20);border:1px solid rgba(22,52,60,.07);
  opacity:0;transform:translateX(-4px);transition:all .18s ease;pointer-events:none}
.pin-wrap:hover .pin-mini,.pin-mini.stick{opacity:1;transform:translateX(0)}

/* ---------- RESPONSIVE: narrow desktop ---------- */
@media (max-width:1280px){
  .brand-tag{display:none}
  .stat span{font-size:11px}
  .search{width:200px}
}
@media (max-width:1120px){
  .stats{display:none}
  .panel-right{width:340px}
  .zoomer{right:380px}
}
@media (max-width:960px){
  .fresh i{display:none}
}

/* ---------- MOBILE: full-bleed map + bottom sheets ---------- */
@media (max-width:720px){
  :root{--header-h:58px}
  header{gap:10px;padding:0 14px}
  .brand-name{font-size:19px}
  .brand-mark{width:32px;height:32px;border-radius:10px}
  .search{display:none}
  .fresh{margin-left:auto;height:34px;padding:0 11px}
  .fresh b{font-size:11px}
  .toolbar{top:70px;left:10px;right:0;padding-right:12px}
  .chip{height:38px;padding:0 13px;font-size:12px}
  /* 16px inputs stop iOS Safari from zooming on focus */
  .search input,.follow-form input{font-size:16px}
  .close-x{width:40px;height:40px}
  .legend{bottom:auto;top:118px;height:36px;gap:10px;padding:0 14px;max-width:calc(100% - 20px)}
  .lg-item{font-size:10.5px}
  .lg-count{display:none}
  .zoomer,.attrib{display:none}

  /* both panels become sheets */
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;border-radius:20px 20px 0 0;
    box-shadow:0 -18px 50px -20px rgba(22,52,60,.45);
    height:88dvh;transform:translateY(calc(100% - var(--sheet-peek,142px)));
    transition:transform .32s cubic-bezier(.32,.72,.28,1)}
  .panel.dragging{transition:none}
  .panel.snap-half{transform:translateY(45%)}
  .panel.snap-full{transform:translateY(0)}
  .panel-left{z-index:33}
  .panel-left.closed{opacity:0;transform:translateY(100%);pointer-events:none}
  .sheet-grip{display:flex;align-items:center;justify-content:center;height:22px;flex-shrink:0;cursor:grab;touch-action:none}
  .sheet-grip::before{content:'';width:44px;height:5px;border-radius:99px;background:var(--sand-200)}
  .cover{height:148px}
  .story h1{font-size:21px}
  .story-actions{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .story{padding:14px 16px 0}
  .feed-head{padding:4px 16px 10px}
  .feed-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
  /* Three tiles wrap on a phone: at 360px "299 projects tracked · 17 new entries this week · 5 hearings ahead" is 365px on one line. */
  .m-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px}
  .m-stats .stat{padding:0;border:none;display:flex;align-items:baseline;gap:5px}
  .m-stats .stat b{font-size:14px}
  .m-stats .stat span{font-size:10.5px}
}
@media (max-width:480px){
  .fresh b{display:none}
  .fresh i{display:inline}
}
@media (min-width:721px){
  .m-stats{display:none}
}

#storyBody{display:contents}
.nav-toggle{display:inline-flex;flex-shrink:0}
.mobile-nav{top:64px}