@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');
/* LoveStory — Jenny's purchased brush script (desktop TTFs, used for headings/hero) */
@font-face{ font-family:"Lovestory"; src:url("fonts/lovestory/lovestory-solid.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lovestory Alt"; src:url("fonts/lovestory/lovestory-alt-solid.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lovestory Serif"; src:url("fonts/lovestory/lovestory-serif.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
/* ============================================================
   Seldovia.com — WATERCOLOR / COASTAL direction (community side)
   Warm driftwood-paper ground, Kachemak-bay teal + spruce + sage,
   Fraunces (soft serif) headings, Caveat (handwriting) accents,
   Nunito Sans body. Soft watercolor washes bleed across the page.
   Real-estate page keeps its bold-pink, clean-white identity.
   ============================================================ */
/* ============================================================
   TWO-MODE BRAND SYSTEM
   Community (default): naturals + Kachemak Bay blue + spruce/teal,
   pink kept only as a light accent. Real-estate page overrides the
   accent + band tokens to the bold pink treatment (see below).
   ============================================================ */
:root{
  --champagne:#F1E7D6; --white:#FFFFFF; --seal:#5a3a26; --sage:#8a9a6f; --barbie:#DF1284; --ink:#221a12;
  --bay:#1d6b78; --sky:#6fa8c7; --spruce:#3f6b52; --pink-soft:#fbe1f0;
  --page:#F7F3EA; --sheet:#FFFDF7; --surface-2:#EFEADB; --peach:#E7E7D6;
  --text:#413728; --text-soft:#6c6152; --muted:#9a8f7c; --heading:#2c2418;
  --line:#e6ddca; --line-2:#d6cbb2; --accent:#1d6b78; --accent-ink:#155660; --accent-soft:#dcebec;
  --open:#5f7a4e; --open-bg:#e9efdf; --star:#d59a3f; --band:#2c4a3a;
  --radius:20px; --radius-s:13px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(70,55,35,.05), 0 12px 30px -16px rgba(60,50,32,.22);
  --shadow-lg:0 2px 10px rgba(70,55,35,.08), 0 30px 60px -28px rgba(48,42,28,.32);
  --maxw:1560px;
  --gutter:clamp(18px,4vw,48px); /* one shared side gutter so header, hero & content align (Jenny #22) */
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  /* Lovestory-style calligraphy. PROD: if Lovestory is licensed, drop the files in
     fonts/ and add an @font-face — then just change this first family name. */
  --script:"Lovestory", "Segoe Script", "Bradley Hand", cursive;
  --sans:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"]{
  --page:#F7F3EA; --sheet:#FFFDF7; --surface-2:#EFEADB; --peach:#E7E7D6;
  --text:#413728; --text-soft:#6c6152; --muted:#9a8f7c; --heading:#2c2418;
  --line:#e6ddca; --line-2:#d6cbb2; --accent:#1d6b78; --accent-ink:#155660; --accent-soft:#dcebec;
  --open:#5f7a4e; --open-bg:#e9efdf; --star:#d59a3f; --band:#2c4a3a;
  --shadow:0 1px 2px rgba(70,55,35,.05),0 12px 30px -16px rgba(60,50,32,.22);
  --shadow-lg:0 2px 10px rgba(70,55,35,.08),0 30px 60px -28px rgba(48,42,28,.32);
}
/* Real-estate page: keeps the bold pink mode + clean white ground (no washes). */
body[data-page="realestate"]{
  --accent:#DF1284; --accent-ink:#c00d70; --accent-soft:#fbe1f0; --band:#c00d70;
  --page:#FFFFFF; --sheet:#FFFFFF;
}
:root[data-theme="dark"]{
  --page:#140c0f; --sheet:#1e1418; --surface-2:#261a1f; --peach:#2a1a1f;
  --text:#f0e2da; --text-soft:#c3a99f; --muted:#9c847a; --heading:#fbeee8;
  --line:#33232a; --line-2:#4a343d; --accent:#ff5bb0; --accent-ink:#ff86c6; --accent-soft:#3a1830;
  --open:#a9b487; --open-bg:#2c2a1f; --star:#f0b429; --band:#2c150a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -16px rgba(0,0,0,.7);
  --shadow-lg:0 2px 10px rgba(0,0,0,.5),0 30px 64px -26px rgba(0,0,0,.85);
}

*{box-sizing:border-box;}
[hidden]{display:none!important;} /* the hidden attribute must always win, even over display:flex/grid (fixes photo-search filtering) */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{margin:0; background:var(--page); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
/* Phones: slightly larger reading size site-wide (Alex). Root 107.5% ≈ 17.2px, so body paragraphs
   (1.05rem) land around 18px and everything scales together instead of section-by-section. */
@media (max-width:640px){ html{font-size:107.5%;} body{font-size:1rem;} }
/* Watercolor page washes removed site-wide — clean solid ground (Jenny #7/#24). */
body:not([data-page="realestate"]){ background:var(--page); }
/* Paper grain / watercolor texture removed site-wide (Jenny) — clean flat background */
body:not([data-page="realestate"])::before{display:none;}
@media (prefers-reduced-motion: reduce){ body:not([data-page="realestate"]){ background-attachment:scroll; } }
/* Blog page (Jenny): drop the watercolor washes, and pull the content in so there's
   less empty space on the sides. */
body[data-page="gazette"]{background:var(--page);}
body[data-page="gazette"]::before{display:none;}
body[data-page="gazette"] .grid3::before{display:none;}
body[data-page="gazette"] .section.wrap{padding-inline:clamp(12px,2.5vw,28px);}
/* Phone book page: no watercolor washes (Jenny) */
body[data-page="phonebook"]{background:var(--page);}
body[data-page="phonebook"]::before{display:none;}
body[data-page="phonebook"] .dir-list::before{display:none;}
h1,h2,h3,h4{margin:0; color:var(--heading); font-family:var(--serif); font-weight:600; line-height:1.14; letter-spacing:-.005em; text-wrap:balance;}
p{margin:0;}
a{color:var(--accent-ink); text-underline-offset:2px;}
img,svg{max-width:100%; display:block;}
/* Stop any sideways drift/jump, especially on mobile (Jenny #21). clip (not hidden) keeps the sticky header working. */
html,body{overflow-x:clip; max-width:100%;}
button{font-family:inherit;}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px;}
::selection{background:var(--accent); color:#fff;}

.wc-defs{position:absolute; width:0; height:0; overflow:hidden;}
.img-fallback{background:linear-gradient(150deg, color-mix(in srgb,var(--bay) 22%, var(--surface-2)), color-mix(in srgb,var(--sage) 26%, var(--surface-2)));}
/* gallery lightbox */
.gallery-photo,#masonry figure{cursor:zoom-in;}
.lightbox{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:clamp(12px,3vw,44px); background:rgba(22,16,10,.92); backdrop-filter:blur(4px);}
.lightbox.open{display:flex;}
.lb-fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; max-width:100%;}
.lb-img{max-width:92vw; max-height:80vh; width:auto; height:auto; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.6); object-fit:contain;}
.lb-cap{color:#fff; font-family:var(--serif); font-size:clamp(1rem,2.4vw,1.35rem); text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.5);}
.lb-close{position:absolute; top:16px; right:20px; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:1.2rem; cursor:pointer; z-index:2;}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:2rem; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2;}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.32);}
.lb-prev{left:16px;} .lb-next{right:16px;}
@media (max-width:560px){ .lb-nav{width:44px; height:44px; font-size:1.6rem;} .lb-prev{left:8px;} .lb-next{right:8px;} }
/* ---- Watercolor splashes: soft, irregular washes that bleed around card groups ---- */
body:not([data-page="realestate"]) .cat-grid,
body:not([data-page="realestate"]) .grid3,
body:not([data-page="realestate"]) .dir-list,
body:not([data-page="realestate"]) .quote-grid,
body:not([data-page="realestate"]) .board{position:relative; isolation:isolate;}
/* Card-group watercolor blobs removed site-wide (Jenny #7/#24). */
body .cat-grid::before, body .grid3::before, body .dir-list::before,
body .quote-grid::before, body .board::before{ display:none !important; }
@media (prefers-reduced-motion: reduce){ .wc-defs{display:none;} }

/* softer lines: drop hard hairline borders on community cards, let soft shadow do the work */
body:not([data-page="realestate"]) .place,
body:not([data-page="realestate"]) .post,
body:not([data-page="realestate"]) .dir-item,
body:not([data-page="realestate"]) .note,
body:not([data-page="realestate"]) .quote,
body:not([data-page="realestate"]) .cel-card{border-color:transparent; box-shadow:0 2px 6px rgba(70,55,35,.05), 0 18px 40px -22px rgba(48,42,28,.30);}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
/* Keep long-form reading columns comfortable even on the wider layout */
#postDetail .listing-desc{max-width:74ch;}
/* Custom hero banner (title baked into Qwynny's watercolor art). Replaces the old text-over-photo hero. */
.page-banner{margin:0 auto; max-width:var(--maxw); padding:clamp(8px,1.6vw,16px) var(--gutter) 0;}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
/* The short line that used to sit over a photo header now sits just under a watercolor banner (About, Winter Watch). */
.banner-sub{max-width:var(--maxw); margin:clamp(14px,2vw,22px) auto 0; padding:0 var(--gutter); text-align:center;}
.banner-sub p{color:var(--text-soft); font-size:1.08rem; margin:.2rem auto 0; max-width:62ch;}
.page-banner img{display:block; width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow);}
/* On phones the wide banner is a thin strip; crop to center so the baked-in title reads bigger (Jenny). */
/* Mobile: show the FULL banner (these wide banners have edge content like the RE logo/name —
   a center-crop was cutting it off on iPhone). Let it scale down whole instead of cropping. */
@media (max-width:640px){ .page-banner img{height:auto; object-fit:contain;} }
.section{padding-block:clamp(18px,2.7vw,34px);} /* tightened vertical rhythm — less scrolling (Jenny) */
.section-head{text-align:center; max-width:56ch; margin:0 auto clamp(20px,3vw,34px);}
#trails{scroll-margin-top:90px;} /* so a #trails jump link isn't hidden under the sticky header */
/* Section-heading watercolor swash removed site-wide (Jenny #7/#24). */
body .section-head::before{ display:none !important; }
/* Eyebrow (the little note above each title). Jenny asked for the Lovestory SERIF in
   all-caps here so the small words stay legible (the brush script was too hard to read
   at this size). */
.eyebrow{display:inline-flex; align-items:center; gap:.7rem; font-family:"Lovestory Serif", Georgia, serif; font-size:1.04rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; line-height:1.3;}
.eyebrow::before,.eyebrow::after{content:""; width:24px; height:2px; background:color-mix(in srgb,var(--accent) 45%, transparent); border-radius:2px;}
h2.title{font-size:clamp(1.9rem,4vw,2.9rem);}
.section-head p{color:var(--text-soft); margin-top:.7rem; font-size:1.02rem;}
.center-link{display:block; text-align:center; margin-top:clamp(14px,2.2vw,24px);}
.center-link a{font-weight:700; text-decoration:underline; text-decoration-color:var(--accent);}
.tint{background:var(--surface-2);}

.sample-flag{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--sage); display:inline-flex; align-items:center; gap:.35rem;}
.sample-flag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--sage);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; font-size:.95rem; padding:.72rem 1.3rem; border-radius:var(--radius-pill); border:1.5px solid transparent; cursor:pointer; text-decoration:none; min-height:46px; transition:transform .12s, box-shadow .2s, background .2s, color .2s;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 16px -10px rgba(20,12,6,.45);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(20,12,6,.5);}
.btn-ghost{background:transparent; color:var(--heading); border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-ink);}
@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none;} }

/* ============================================================ HEADER */
/* Sticky with a negative top equal to the logo row's height (--brand-h, set in app.js): the logo
   scrolls away and only the nav band stays pinned, so the header stops eating the screen (Alex). */
.masthead{position:sticky; top:calc(-1 * var(--brand-h, 0px)); z-index:60; background:var(--sheet); border-bottom:0; box-shadow:0 2px 10px -6px rgba(60,50,32,.18);}
/* NEW header layout (Jenny, Sep 24): TOP row is the logo + a large angled "Alaska's Best Kept
   Secret" tagline stretching to the far right. BELOW it, a colored nav band (green via --band on
   every page, pink on the Real Estate page) with white nav text so the menu stands out. The
   "Seldovia Today" conditions bar moved down into the page content, beside the Marine Weather. */
.masthead-top{max-width:var(--maxw); margin-inline:auto; display:flex; align-items:flex-end; gap:1rem; padding:.25rem var(--gutter);}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; flex-shrink:0;}
/* Single combined logo + "Alaska's Best Kept Secret" lockup image (Jenny, Oct 1): one asset so it
   stays identical in proportion on mobile and desktop. Sized by width, prominent on phones, capped wide. */
.brand .brand-lockup{width:clamp(190px,18vw,260px); height:auto; display:block;}
/* Wider screens (Jenny Oct 5): "Alaska's Best Kept Secret" sits in the white space BESIDE the logo instead of under it,
   so the header is shorter. Phones keep the stacked logo above. */
.brand .brand-wide{display:flex; align-items:center; gap:clamp(12px,3.5vw,22px);}
.brand .brand-tagimg{display:none;}
.brand .brand-logo{width:clamp(112px,33vw,170px); height:auto; display:block;}
.brand .brand-tag2{width:clamp(140px,44vw,240px); height:auto; display:block;}
.brand-sp .brand-sp-img{width:clamp(150px,46vw,230px); height:auto; display:block;}
@media (min-width:761px){
  .brand .brand-tag2{display:none;}
  .brand .brand-tagimg{display:block;}
  .brand-sp .brand-sp-img{width:clamp(200px,18vw,290px);}
  .brand .brand-wide{display:flex; align-items:center; gap:clamp(18px,2.4vw,40px);}
  .brand .brand-logo{width:clamp(170px,16vw,240px); height:auto; display:block;}
  .brand .brand-tagimg{width:clamp(300px,38vw,640px); height:auto; display:block;}
  .masthead-top{padding-top:.5rem; padding-bottom:clamp(10px,1.1vw,16px);}   /* breathing room above the green bar (Alex) */
}
@media (max-width:560px){ .masthead-top{padding:.25rem var(--gutter);} }
/* Seldovia Property logo atop the Real Estate page hero */
/* Jenny's colored brokerage logo, directly on the hero photo (no card). */
.re-brand-logo{display:block; height:auto; width:min(320px,72vw); margin:0 auto 1rem;}
.brand .mark{width:32px; height:32px;}
.brand .word{font-weight:800; font-size:1.18rem; color:var(--heading); letter-spacing:-.02em; line-height:1;}
.brand .word b{color:var(--accent-ink);}
.brand .tagline{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); margin-top:2px;}
/* Colored nav band. --band is spruce green everywhere and pink on the RE page (see :root). */
.navband{background:var(--band); position:relative; z-index:2;}
.navband-inner{max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; gap:1rem; padding:.1rem var(--gutter); min-height:52px;}
nav.mainnav{display:flex; gap:.15rem; align-items:center;}
nav.mainnav a{font-size:.94rem; font-weight:700; color:#fff; text-decoration:none; padding:.55rem .72rem; border-radius:var(--radius-pill); white-space:nowrap; transition:background .15s,color .15s;}
nav.mainnav a:hover{background:rgba(255,255,255,.18); color:#fff;}
nav.mainnav a.active{background:#fff; color:var(--band);}
/* Real Estate: white nav text on the pink band. Jenny tried black (Sep 24) but it was
   unreadable, so back to white (Sep 29). */
body[data-page="realestate"] nav.mainnav a{color:#fff;}
body[data-page="realestate"] nav.mainnav a:hover{background:rgba(255,255,255,.18); color:#fff;}
body[data-page="realestate"] nav.mainnav a.active{background:#fff; color:var(--band);}
.head-actions{display:flex; align-items:center; gap:.5rem; margin-left:auto;}
.icon-btn{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; cursor:pointer;}
.icon-btn:hover{border-color:#fff; background:rgba(255,255,255,.24); color:#fff;}
.add-listing{display:inline-flex;}
#menuBtn{display:none;}
@media (max-width:1120px){ nav.mainnav{display:none;} #menuBtn{display:grid;} .add-listing{display:none;} }

.drawer{position:fixed; inset:0; z-index:80; display:none;}
.drawer.open{display:block;}
.drawer-scrim{position:absolute; inset:0; background:rgba(19,2,11,.5); backdrop-filter:blur(2px);}
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(84vw,340px); background:var(--sheet); border-left:1px solid var(--line); padding:1.2rem; display:flex; flex-direction:column; gap:.15rem; overflow-y:auto; box-shadow:var(--shadow-lg);}
.drawer-panel a{text-decoration:none; color:var(--text); font-size:1.05rem; padding:.72rem .5rem; border-radius:10px; border-bottom:1px solid var(--line);}
.drawer-panel a:hover,.drawer-panel a.active{color:var(--accent-ink);}
.drawer-panel .btn{margin-top:.8rem; border-bottom:0;}

/* slim page banner for sub-pages */
.page-hero{background:var(--surface-2); border-bottom:1px solid var(--line); padding:clamp(36px,6vw,60px) 0 clamp(28px,4vw,40px); text-align:center;}
body[data-page="realestate"] .page-hero{background:linear-gradient(160deg, #fde6f2 0%, #fbdcec 100%); border-bottom-color:#f2b9d8;}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.8rem); color:var(--heading);}
.page-hero p{color:var(--text-soft); margin-top:.6rem; max-width:56ch; margin-inline:auto;}
/* Photo-banner page hero (Jenny: a gorgeous Seldovia banner on every page). Set the image
   with style="--banner:url('...')" and use the WHITE heading; overlay keeps text readable. */
.page-hero.banner{position:relative; background:#33414d; border-bottom:0; color:#fff; overflow:clip; padding:clamp(44px,6.5vw,84px) 0 clamp(34px,5vw,60px);
  /* Match the home hero: capped at the site column, inset by the shared gutter, rounded (Jenny #22 + #6) */
  width:min(calc(100% - 2*var(--gutter)), var(--maxw)); margin:clamp(10px,1.6vw,18px) auto 0; border-radius:clamp(16px,2.4vw,26px);}
.page-hero.banner::before{content:""; position:absolute; inset:0; z-index:0; background-image:var(--banner); background-size:cover; background-position:center;}
/* Light scrim so the header photo stays vibrant; headings/text carry their own shadow (Jenny). */
.page-hero.banner::after{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 84% 130% at 50% 50%, rgba(8,6,4,.36) 0%, rgba(8,6,4,.24) 45%, rgba(8,6,4,.05) 100%);}
.page-hero.banner .wrap{position:relative; z-index:1;}
.page-hero.banner .eyebrow{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 1px 8px rgba(0,0,0,.5);}
.page-hero.banner .eyebrow::before,.page-hero.banner .eyebrow::after{background:rgba(255,255,255,.7);}
.page-hero.banner p{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 1px 10px rgba(0,0,0,.55);}
.page-hero.banner h1.wc-h img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.98)) drop-shadow(0 2px 8px rgba(0,0,0,.78)) drop-shadow(0 8px 22px rgba(0,0,0,.45));}
/* Soft dark "cloud" behind heading words on photos so they pop (Jenny #2) */
.hero .wc-h, .page-hero.banner .wc-h{position:relative; isolation:isolate;}
.hero .wc-h::before, .page-hero.banner .wc-h::before{content:""; position:absolute; inset:-16% -10%; z-index:-1; background:radial-gradient(ellipse at center, rgba(8,6,4,.62) 0%, rgba(8,6,4,.42) 42%, rgba(8,6,4,0) 72%); filter:blur(24px); pointer-events:none;}
body[data-page="realestate"] .page-hero.banner{background:#33414d; border-bottom-color:transparent;}
.page-hero.banner .re-brand-logo{position:relative; z-index:1; filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));}

/* ============================================================ HOME HERO (real Seldovia photo) */
.hero{position:relative; max-width:var(--maxw); margin-inline:auto; padding:clamp(14px,2.4vw,24px) var(--gutter) 0;}
.hero-media{position:relative; border-radius:clamp(16px,2.4vw,26px); overflow:clip; min-height:clamp(440px,56vw,600px); display:grid; place-items:center; isolation:isolate; padding-bottom:clamp(8px,2vw,16px);
  background:#54636e url("images/hero-seldovia.jpg") center 42%/cover no-repeat;}
/* Light scrim so Qwynny's photo stays vibrant; the heading rides on its own shadow (Jenny). */
.hero-media::after{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 82% 82% at 50% 46%, rgba(8,6,4,.4) 0%, rgba(8,6,4,.26) 45%, rgba(8,6,4,.04) 100%);}
.hero-text{position:relative; z-index:1; text-align:center; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.6); padding:clamp(30px,6vw,64px) clamp(18px,4vw,40px) 0; max-width:820px; margin-inline:auto;}
.hero-badge{display:inline-flex; align-items:center; gap:.5rem; font-family:"Lovestory Serif", Georgia, serif; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); padding:.42rem 1.15rem; border-radius:var(--radius-pill); backdrop-filter:blur(4px); line-height:1.35;}
.hero-badge svg{color:#ffe8b8;}
.hero h1{color:#fff; font-size:clamp(2.3rem,6.2vw,4.1rem); line-height:1.03; margin-top:1rem; text-shadow:0 2px 30px rgba(0,0,0,.45);}
.hero .lede{color:#f3ede0; font-size:clamp(1.02rem,2.2vw,1.22rem); margin-top:.9rem; text-shadow:0 1px 12px rgba(0,0,0,.4);}

/* ---- Bolder watercolor direction: display headlines in the calligraphy script ---- */
body:not([data-page="realestate"]) .hero h1,
body:not([data-page="realestate"]) h2.title,
body:not([data-page="realestate"]) .page-hero h1{font-family:var(--script); font-weight:400; letter-spacing:.01em; text-wrap:balance;}
/* Jenny asked for a THICKER brush stroke on the Lovestory script. It ships only one
   weight, so we faux-bolden by stroking the glyphs in their own color (paint-order keeps
   the fill crisp on top). Bump the px value for even heavier. */
/* Main headings — heavier brush stroke (Jenny wanted them thicker). Bump/drop this one px value to taste. */
body:not([data-page="realestate"]) .hero h1,
body:not([data-page="realestate"]) h2.title,
body:not([data-page="realestate"]) .page-hero h1{ -webkit-text-stroke:1.4px currentColor; paint-order:stroke fill; }
body:not([data-page="realestate"]) .hero h1{font-size:clamp(3.2rem,8.6vw,5.9rem); line-height:1.04; margin-top:.5rem; text-shadow:0 3px 26px rgba(0,0,0,.5);}

/* === REAL ESTATE brush headings (Jenny wanted the watercolor headings on every page,
   including Real Estate). TO REVERT to the clean serif look on the RE page, delete this
   whole block — nothing else depends on it. === */
body[data-page="realestate"] h2.title,
body[data-page="realestate"] .page-hero h1{ font-family:var(--script); font-weight:400; letter-spacing:.01em; text-wrap:balance; -webkit-text-stroke:1.4px currentColor; paint-order:stroke fill; }
/* === END REAL ESTATE brush headings === */

/* === WATERCOLOR HEADINGS (Jenny's real "watercolor brush stroke" Lovestory look). The
   textured glyphs are extracted from the Lovestory SVG font and composited into per-heading
   PNGs by gen-headings.py -> images/headings/. In the HTML the heading keeps its real text
   (as the <img> alt, for SEO + screen readers) and shows the watercolor image. TO REVERT,
   change the heading markup back to plain text and delete this block. === */
.wc-h{ line-height:0; }
/* Size by HEIGHT so every heading keeps a consistent visual weight (capping by width
   would make short titles balloon and long ones shrink). max-width:100% keeps long
   ones on-screen on mobile. */
.wc-h img{ display:block; width:auto; height:auto; max-width:100%; }
h2.title.wc-h img{ margin:0 auto; max-height:clamp(48px, 8.2vw, 92px); }   /* centered section titles (Jenny: a bit bigger) */
h2.title.wc-h.wc-left img{ margin:0; max-height:clamp(40px, 6vw, 72px); } /* left-aligned (sponsors) */
.page-hero h1.wc-h img{ margin:0 auto; max-height:clamp(56px, 10vw, 112px); }
body[data-page="home"] .hero h1.wc-h{ margin-top:.4rem; }
body[data-page="home"] .hero h1.wc-h img{ max-width:min(98%, 1040px); filter:drop-shadow(0 1px 2px rgba(0,0,0,.98)) drop-shadow(0 2px 8px rgba(0,0,0,.8)) drop-shadow(0 12px 26px rgba(0,0,0,.5)); }
/* === END WATERCOLOR HEADINGS === */
/* Admin: list editor for the "of the day" content (add/remove rows) */
.ex-list{display:flex; flex-direction:column; gap:.4rem; margin-bottom:.55rem; max-height:360px; overflow:auto; padding:.15rem;}
.ex-row{display:flex; gap:.45rem; align-items:center;}
.ex-row .ex-item{flex:1; min-width:0;}
.ex-rm{flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--sheet); color:var(--accent-ink); cursor:pointer; font-size:1.15rem; line-height:1;}
.ex-rm:hover{background:var(--surface-2);}
.ex-add{display:flex; gap:.5rem; align-items:center;}
.ex-add input{flex:1; min-width:0;}

/* Explore business cards — contact line + non-clickable (no-website) variant */
.place-contact{margin-top:.5rem; font-size:.86rem; color:var(--text-soft);}
.place-contact a{color:var(--accent-ink); text-decoration:none; font-weight:600;}
.place-contact a:hover{text-decoration:underline;}
.place-web{color:var(--accent-ink); font-weight:700;}
.place-static{cursor:default;}

/* Home "of the day" widget card */
.extra-card{display:flex; gap:1rem; align-items:flex-start; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.3rem; box-shadow:var(--shadow);}
/* Combined "of the day" + "this week" into one box (Jenny) */
.home-duo{display:grid; grid-template-columns:1fr 1fr; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.home-duo > div{min-width:0; display:flex;}
.home-duo > div > *{width:100%;}
.home-duo > div:first-child{border-right:1px solid var(--line);}
.home-duo .extra-card, .home-duo .today-sched{background:transparent; border:0; box-shadow:none; border-radius:0;}
@media (max-width:640px){ .home-duo{grid-template-columns:1fr;} .home-duo > div:first-child{border-right:0; border-bottom:1px solid var(--line);} }
.extra-ico{font-size:1.7rem; line-height:1; flex:0 0 auto; margin-top:.1rem;}
.extra-main{min-width:0;}
.extra-body{color:var(--text); line-height:1.55; margin-top:.15rem;}
.extra-body p{margin:0;}
.extra-link{margin-top:.5rem; font-size:.88rem; font-weight:700;}
.extra-link a{color:var(--accent-ink); text-decoration:none;}
.about-card{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow); max-width:760px;}
.about-card h3{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); color:var(--heading); margin-bottom:.7rem;}
.about-card p{color:var(--text-soft); line-height:1.65; margin-top:.7rem;}

body:not([data-page="realestate"]) h2.title{font-size:clamp(2.5rem,5.6vw,3.9rem); line-height:1.1;}
body:not([data-page="realestate"]) .page-hero h1{font-size:clamp(2.7rem,6.2vw,4.2rem); line-height:1.1;}
.hero-search{position:relative; z-index:2; margin:clamp(24px,4vw,36px) auto 0; max-width:840px; transform:translateY(clamp(20px,3vw,34px));}
.hero-search-card{background:var(--sheet); border-radius:var(--radius); box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr 1fr auto; gap:.4rem; padding:.55rem; align-items:stretch;}
.hs-field{display:flex; align-items:center; gap:.6rem; padding:.4rem .8rem; border-radius:var(--radius-s); position:relative;}
.hs-field + .hs-field{border-left:1px solid var(--line);}
.hs-field svg{color:var(--sage); flex:none;}
.hs-field input{border:0; background:transparent; font-size:1rem; color:var(--text); width:100%; padding:.5rem 0; min-height:40px;}
.hs-field input:focus{outline:none;}
.hs-field input::placeholder{color:var(--muted);}
/* Hero search button in a logo-matching blue (Jenny: the turquoise didn't tie in). */
.hero-search .btn-primary{background:#2b6cb0; border-color:#2b6cb0; color:#fff;}
.hero-search .btn-primary:hover{background:#245e99; border-color:#245e99;}
.hero-search .btn-primary{border-radius:var(--radius-s); padding-inline:1.6rem;}
.hero-results{position:fixed; z-index:200; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); max-height:min(58vh,420px); overflow-y:auto; overflow-x:hidden; display:none; text-align:left;}
.hero-results.show{display:block;}
@media (max-width:680px){ .hero-search-card{grid-template-columns:1fr;} .hs-field + .hs-field{border-left:0; border-top:1px solid var(--line);} .hero-search .btn-primary{width:100%;} }
/* Home search bar overlaid on the banner image (over the water, below the baked-in title). */
.home-banner{position:relative;}
.home-search-over{transform:none; margin:clamp(12px,2vw,18px) auto 0; max-width:660px;} /* mobile default: just below the banner */
@media (min-width:720px){
  .home-search-over{position:absolute; left:50%; bottom:4%; transform:translateX(-50%); margin:0; width:min(460px,52%); z-index:3;}   /* smaller + lower (Jenny Oct 8) */
  .home-search-over .hero-search-card{padding:.35rem;}
  .home-search-over input{font-size:.95rem;}
  .home-search-over .btn-primary{padding:.5rem 1rem;}
}
/* Watercolor soft-bleed edges on the home banner (Jenny: "watercolor effect on the edges").
   Feathers the photo into the page instead of a hard rectangle + drop shadow. The TOP edge
   stays solid so the baked-in title never fades; the sides and bottom bleed away softly.
   Reversible: remove the wc-edges class on .home-banner to get the plain framed banner back. */
.home-banner.wc-edges{box-shadow:none; background:transparent;}
.home-banner.wc-edges img{
  border-radius:0; box-shadow:none;
  -webkit-mask:
    linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask:
    linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
  mask-composite:intersect;
}
.quickcats{position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:clamp(46px,6vw,64px) auto clamp(18px,5vw,28px); max-width:900px; padding-top:clamp(8px,2vw,14px);}
.quickcat{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.55); border-radius:var(--radius-pill); padding:.6rem 1rem; font-size:.9rem; font-weight:700; color:var(--accent-ink); text-decoration:none; box-shadow:var(--shadow); cursor:pointer; transition:background .15s,color .15s,transform .12s;}
.quickcat:hover{background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-1px);}
.quickcat svg{color:var(--accent);}
.quickcat:hover svg{color:#fff;}


.results{position:absolute; z-index:70; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); max-height:min(60vh,440px); overflow-y:auto; overflow-x:hidden; display:none;}
.results.show{display:block;}
.r-empty{padding:1.1rem; color:var(--text-soft); font-size:.94rem;}
.r-item{display:flex; flex-direction:column; gap:.12rem; padding:.6rem 1rem; text-decoration:none; color:var(--text); border-top:1px solid var(--line); min-width:0;}
.r-item>span{min-width:0;}
.r-item:first-of-type{border-top:0;}
.r-item:hover,.r-item.active{background:var(--surface-2);}
.r-type{font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink); font-weight:800;}
.r-title{font-weight:700; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.r-title mark{background:var(--accent-soft); color:inherit; border-radius:3px; padding:0 1px;}
.r-desc{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text-soft); font-size:.84rem; margin-top:1px; overflow-wrap:anywhere;}
.navsearch{position:relative;}
.navsearch input{width:200px; border:1px solid var(--line-2); background:var(--sheet); border-radius:var(--radius-pill); padding:.55rem .9rem .55rem 2.4rem; font-size:.9rem; color:var(--text); min-height:42px;}
.navsearch .s-icon{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--sage); pointer-events:none;}
@media (max-width:1240px){ .head-actions .navsearch{display:none;} }
.dir-controls .navsearch{display:block;} .dir-controls .navsearch input{width:min(320px,80vw);}

/* 10 home cards as 2 rows of 5, a bit smaller (Jenny Oct 1). */
.cat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.3vw,16px);}
@media (max-width:1100px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
.cat-tile{position:relative; border-radius:var(--radius); overflow:clip; text-decoration:none; box-shadow:var(--shadow); aspect-ratio:1/1.05; display:block; transition:transform .16s, box-shadow .2s;}
.cat-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.cat-tile svg,.cat-tile .cat-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* Smaller white caption banner on the home cards (Jenny #19) */
.cat-tile .cap{position:absolute; left:8px; right:8px; bottom:8px; background:var(--sheet); border-radius:var(--radius-s); padding:.42rem .55rem; text-align:center; box-shadow:0 6px 16px -8px rgba(0,0,0,.3); line-height:1.2;}
.cat-tile .cap b{display:block; color:var(--heading); font-weight:800; font-size:.92rem;}
.cat-tile .cap span{font-size:.7rem; color:var(--text-soft);}
@media (max-width:520px){ .cat-tile .cap{left:6px; right:6px; bottom:6px; padding:.32rem .4rem;} .cat-tile .cap b{font-size:.8rem;} .cat-tile .cap span{font-size:.64rem;} }
@media (prefers-reduced-motion: reduce){ .cat-tile:hover{transform:none;} }

.feature{background:var(--peach); border-radius:clamp(18px,2.6vw,26px); overflow:clip; display:grid; grid-template-columns:1fr 1fr; align-items:center;}
@media (max-width:760px){ .feature{grid-template-columns:1fr;} }
.feature-body{padding:clamp(24px,4vw,48px);}
.feature-body h3{font-size:clamp(1.5rem,3vw,2.1rem);}
.feature-body p{color:var(--text-soft); margin-top:.8rem; font-size:1.02rem;}
.feature-body .btn{margin-top:1.3rem;}
.feature-media{min-height:clamp(220px,32vw,360px); position:relative;}
.feature-media svg,.feature-media .feature-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.tabs{display:flex; gap:.15rem .25rem; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,32px); border-bottom:1px solid var(--line); padding-bottom:.2rem;}
.tab{border:0; background:transparent; font-weight:700; font-size:.9rem; color:var(--text-soft); padding:.5rem .6rem; cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; white-space:nowrap;}
/* Phones (Jenny, Oct 6: people didn't notice the swipe row): every category shows at once as a grid of
   clear buttons, no scrolling. The selected one is solid green like the menu bar. */
@media (max-width:640px){
  .tabs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; border-bottom:0; padding-bottom:0;}
  .tab{margin:0; white-space:normal; text-align:center; font-size:1rem; line-height:1.2; padding:.7rem .5rem; min-height:48px;
       background:var(--sheet); color:var(--heading); border:1.5px solid var(--band); border-radius:12px; box-shadow:var(--shadow);}
  .tabs .tab[aria-pressed="true"]{background:var(--band); color:#fff; border-color:var(--band);}
  .tabs-wrap .tabs-arrow{display:none !important;}
}
/* Left/right arrows over the tab row (shown by app.js only when the row actually scrolls). */
.tabs-wrap{position:relative;}
.tabs-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px; padding:0; border-radius:50%; display:grid; place-items:center; background:var(--sheet); color:var(--accent-ink); border:1px solid var(--line-2); box-shadow:var(--shadow); cursor:pointer;}
.tabs-prev{left:-6px;} .tabs-next{right:-6px;}
.tab[aria-pressed="true"]{color:var(--accent-ink); border-bottom-color:var(--accent);}
.place-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,24px);}
@media (max-width:900px){ .place-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .place-grid{grid-template-columns:1fr;} }
/* listings carousel — 3 per view with arrows */
.re-carousel{position:relative;}
.re-track{--gap:clamp(16px,2.2vw,24px); display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*var(--gap))/3); gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:.4rem; scrollbar-width:none;}
.re-track::-webkit-scrollbar{display:none;}
.re-track>.place{scroll-snap-align:start;}
@media (max-width:900px){ .re-track{grid-auto-columns:calc((100% - var(--gap))/2);} }
@media (max-width:600px){ .re-track{grid-auto-columns:88%;} }
.car-arrow{position:absolute; top:38%; transform:translateY(-50%); width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--sheet); color:var(--accent-ink); border:1px solid var(--line); box-shadow:var(--shadow-lg); cursor:pointer; z-index:3; transition:transform .12s, background .15s;}
.car-arrow svg{width:28px; height:28px;}
.car-arrow:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
.car-arrow:disabled,.car-arrow[hidden]{display:none;}
/* Real Estate (Jenny #10): landscape listing photos + pink arrows, and a peek of the next card so it's clear there are more than three */
body[data-page="realestate"] .place-media{aspect-ratio:3/2;}
body[data-page="realestate"] .car-arrow{background:var(--accent); color:#fff; border-color:var(--accent);}
body[data-page="realestate"] .car-arrow:hover{filter:brightness(.92);}
body[data-page="realestate"] .re-track{grid-auto-columns:calc((100% - 2.3*var(--gap))/3.25);}
@media (max-width:900px){ body[data-page="realestate"] .re-track{grid-auto-columns:calc((100% - 1.3*var(--gap))/2.2);} }
@media (max-width:600px){ body[data-page="realestate"] .re-track{grid-auto-columns:86%;} }
.car-prev{left:-14px;} .car-next{right:-14px;}
/* Phones: keep the arrows (smaller, tucked inside the edges) so people can tell the listings scroll (Alex). */
/* Both arrows sit just inside the left/right edges of the card in view (the card is ~86% wide, so the
   right arrow is inset by the ~14% "peek" of the next card) — symmetric over the photo. */
@media (max-width:520px){ .car-arrow{width:42px; height:42px; top:30%;} .car-arrow svg{width:20px; height:20px;} .car-prev{left:calc(9% + 8px);} .car-next{right:calc(9% + 8px);} }
/* Phones: every card sits CENTERED with a sliver of its neighbours on both sides, whether you swipe or tap
   the arrows (Jason: cards drifted off-center). Side padding lets the first and last cards center too. */
@media (max-width:600px){
  .re-track, body[data-page="realestate"] .re-track, .quote-row.re-track{grid-auto-columns:100%; padding-inline:9%; scroll-padding-inline:9%; scroll-snap-type:x mandatory;}
  .re-track>*, .quote-row .quote{scroll-snap-align:center; scroll-snap-stop:always;}
  .quote-row.re-track .quote{flex:0 0 100%;}
}
/* Computers/tablets: arrows sit centered ON the outer card edges (Alex: they were ~15px inside the edge).
   Listings: app.js also centers them on the photo's height. */
@media (min-width:601px){
  .car-prev{left:-29px;} .car-next{right:-29px;}
  /* Testimonials: whole cards only (no half-visible review sliding under an arrow), arrows at the sides,
     vertically centered, and a little extra side padding so an arrow never touches the words. */
  .quote-row.re-track .quote{flex:0 0 calc((100% - 2 * clamp(16px,2.2vw,24px)) / 3); padding-inline:2.4rem; scroll-snap-align:start;}
  .re-carousel:has(.quote-row) .car-arrow{top:50%;}
}
@media (min-width:601px) and (max-width:900px){
  .quote-row.re-track .quote{flex-basis:calc((100% - clamp(16px,2.2vw,24px)) / 2);}
}
@media (min-width:601px) and (max-width:760px){ .car-prev{left:-10px;} .car-next{right:-10px;} }  /* narrow side margins: keep arrows on screen */
/* Phones only: testimonial arrows sit UNDER the reviews (no photo to sit on, so over the card they covered
   the words), with a divider below so they read as part of the reviews (Alex). Also used up to 760px (small
   tablets / phones turned sideways), where there isn't room for side arrows. */
@media (max-width:760px){
  .re-carousel:has(.quote-row){padding-bottom:72px; margin-bottom:clamp(36px,5vw,56px);}
  .re-carousel:has(.quote-row)::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:calc(-1 * clamp(20px,3vw,30px)); width:min(320px,70%); height:1px; background:var(--line-2);}
  .re-carousel:has(.quote-row) .car-arrow{top:auto; bottom:0; transform:none;}
  .re-carousel:has(.quote-row) .car-prev{left:calc(50% - 68px);}
  .re-carousel:has(.quote-row) .car-next{right:calc(50% - 68px);}
  /* At the first/last review only one arrow shows: center it instead of leaving it off to one side. */
  .re-carousel:has(.quote-row):has(.car-prev[hidden]) .car-next{right:auto; left:50%; transform:translateX(-50%);}
  .re-carousel:has(.quote-row):has(.car-next[hidden]) .car-prev{left:50%; transform:translateX(-50%);}
}
@media (max-width:520px){   /* smaller phone arrows (42px) sit closer together */
  .re-carousel:has(.quote-row){padding-bottom:58px;}
  .re-carousel:has(.quote-row):not(:has(.car-arrow[hidden])) .car-prev{left:calc(50% - 52px);}
  .re-carousel:has(.quote-row):not(:has(.car-arrow[hidden])) .car-next{right:calc(50% - 52px);}
}
.place{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); overflow:clip; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .16s, box-shadow .2s, border-color .2s;}
.place:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2);}
@media (prefers-reduced-motion: reduce){ .place:hover{transform:none;} }
.place-media{position:relative; aspect-ratio:1/1;}
.place-media svg,.place-media .place-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.place-badge{position:absolute; top:9px; right:9px; z-index:2; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--accent-ink); font-weight:800; font-size:.92rem; display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.25); letter-spacing:0;}
.place-media-blank{background:linear-gradient(150deg,#f2ece7 0%,#e7ded2 100%);}
/* Seasonal Open/Closed sign on the corner of an Explore card (Jenny) */
.place-sign{position:absolute; top:10px; left:10px; z-index:2; font-weight:800; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; padding:.3rem .62rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.3); border:2px solid #fff; line-height:1;}
.place-sign-open{background:#1f9d55; color:#fff;}
.place-sign-closed{background:#6b7280; color:#fff;}
.badge-open{position:absolute; top:12px; left:12px; background:var(--open-bg); color:var(--open); font-size:.72rem; font-weight:800; padding:.28rem .6rem; border-radius:7px;}
.badge-sold{background:#b23b3b; color:#fff; text-transform:uppercase; letter-spacing:.04em;}
.place-sold .place-photo{filter:saturate(.72) brightness(.98);}
.place-body{padding:.95rem 1.05rem 1.1rem; display:flex; flex-direction:column; gap:.35rem;}
.rating{display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-soft);}
.rating .stars{color:var(--star); letter-spacing:1px;}
.rating b{color:var(--heading);}
.place-body h4{font-size:1.12rem;}
.place-loc{display:flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--muted);}
.place-owner{font-size:.82rem; color:var(--text-soft); font-weight:600;}
.place-blurb{font-size:.86rem; color:var(--text-soft); line-height:1.42; margin-top:.1rem;}
/* Uniform business cards (Jenny): clamp the blurb to 3 lines, with a Read more toggle. */
.place-blurb.clamp{display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.place-more{align-self:flex-start; background:none; border:0; padding:0; margin-top:.15rem; color:var(--accent-ink); font-weight:700; font-size:.82rem; cursor:pointer;}
.place-more:hover{text-decoration:underline;}
/* Floating "go to top" button (Jenny) */
#toTop{position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:70; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--sheet); color:var(--accent-ink); font-size:1.35rem; line-height:1; cursor:pointer; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s;}
#toTop.show{opacity:1; visibility:visible; transform:none;}
#toTop:hover{border-color:var(--accent);}
/* Jenny Oct 5: the Explore category arrows and the "scroll to top" button are GREEN like the menu bar, so they stand out. */
.tabs-arrow, #toTop{background:var(--band); color:#fff; border-color:var(--band); box-shadow:0 3px 10px rgba(0,0,0,.22);}
.tabs-arrow:hover, #toTop:hover{filter:brightness(1.12); border-color:var(--band);}
/* "Search" in the phone menu (Jenny Oct 5): icon sits beside the word. */
.drawer-panel .drawer-search{display:flex; align-items:center; gap:.55rem;}
/* flash a card when arriving from a search suggestion (?find=) */
.search-hit{outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:var(--radius-s); animation:searchHit 2.4s ease forwards;}
@keyframes searchHit{0%,55%{outline-color:var(--accent-ink);} 100%{outline-color:transparent;}}
@media (prefers-reduced-motion:reduce){ .search-hit{animation:none;} }
.place-loc svg{color:var(--sage);}

.howband{background:var(--band); color:rgba(255,255,255,.86); border-radius:clamp(18px,2.6vw,26px); padding:clamp(30px,5vw,60px) clamp(20px,4vw,52px); text-align:center; background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0 8px, transparent 9px); background-size:34px 34px;}
/* watercolor-painted band: the fill sits on a displaced layer behind, so edges
   bleed like paint while the text stays perfectly crisp */
body:not([data-page="realestate"]) .howband{position:relative; isolation:isolate; background-color:transparent; border-radius:0;}
body:not([data-page="realestate"]) .howband::before{content:""; position:absolute; inset:-10px -6px; z-index:-1; background:var(--band); border-radius:clamp(18px,2.6vw,26px); filter:url(#wcEdge);}
.howband .eyebrow{color:rgba(255,255,255,.85);} .howband .eyebrow::before,.howband .eyebrow::after{background:rgba(255,255,255,.3);}
.howband h2{color:#fff; font-size:clamp(1.6rem,3.2vw,2.3rem);}
.how-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(28px,4vw,44px);}
@media (max-width:760px){ .how-steps{grid-template-columns:1fr;} }
.how-step .ico{position:relative; width:72px; height:72px; border-radius:50%; margin:0 auto .9rem; display:grid; place-items:center; background:transparent; border:0; color:#fff;}
/* watercolor splash behind each icon (Bar Harbor style) */
.how-step .ico::before{content:""; position:absolute; inset:-4px; z-index:-1; border-radius:50%; filter:url(#wcEdgeSm);
  background:radial-gradient(circle at 42% 38%, rgba(255,255,255,.34), rgba(255,255,255,.16) 62%, rgba(255,255,255,.06) 78%, transparent 85%);}
.how-step .ico svg{position:relative; z-index:1;}
.how-step h4{color:#fff; font-size:1.2rem;}
.how-step p{color:rgba(255,255,255,.8); font-size:.92rem; margin-top:.5rem; max-width:32ch; margin-inline:auto;}

/* ============================================================ MEET JENNY (real photos) */
.jenny-card{display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:clamp(20px,3vw,40px); align-items:start; background:var(--surface-2); border:1px solid var(--line); border-radius:clamp(18px,2.6vw,26px); overflow:clip; padding:clamp(18px,3vw,32px);}
@media (max-width:680px){ .jenny-card{grid-template-columns:1fr; text-align:center; justify-items:center;} }
.jenny-card img{border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%; max-width:300px; aspect-ratio:4/5; object-fit:cover; object-position:top; transform:scaleX(-1);} /* flipped per Jenny #12 */
/* Jenny's full bio (#13) — verbatim from her homes.com profile */
/* Jenny's "Read more" bio expands INSIDE the Meet-Jenny card (part of the same box, single column). */
.re-bio{margin:1rem 0 0; color:var(--text); font-size:1.02rem; line-height:1.72;}
.re-bio p{margin:0 0 1rem;}
.re-bio-h{font-family:var(--serif); color:var(--heading); font-size:clamp(1.3rem,2.4vw,1.65rem); margin:1.6rem 0 .6rem;}
.re-more-btn{background:none; border:0; padding:0; margin:.2rem 0 1rem; color:var(--accent-ink); font-weight:800; font-size:.95rem; cursor:pointer; font-family:inherit;}
.re-more-btn:hover{text-decoration:underline;}
.jenny-card h3{font-size:clamp(1.5rem,3vw,2rem);}
.jenny-card p{color:var(--text-soft); margin-top:.7rem; font-size:1rem;}
.jenny-card .jenny-contact{margin-top:1rem; display:flex; gap:1.2rem; flex-wrap:wrap; font-weight:700; color:var(--heading);}
.jenny-card .jenny-contact a{color:var(--accent-ink); text-decoration:none;}
.jenny-card .btn{margin-top:1.2rem;}

.cal-toolbar{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-bottom:1.4rem;}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px;}
.seg button{border:0; background:transparent; font-weight:700; font-size:.9rem; color:var(--text-soft); padding:.5rem 1.1rem; border-radius:var(--radius-pill); cursor:pointer; min-height:40px;}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff;}
.cal-hint{font-size:.85rem; color:var(--text-soft);}
.agenda{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:clip; max-width:800px; margin-inline:auto;}
.agenda-scroll{max-height:560px; overflow-y:auto; scroll-behavior:smooth; overscroll-behavior:contain;}
.agenda-day{position:sticky; top:0; z-index:1; background:color-mix(in srgb,var(--champagne) 65%, var(--sheet)); backdrop-filter:blur(4px); padding:.5rem 1.1rem; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--seal); border-bottom:1px solid var(--line);}
:root[data-theme="dark"] .agenda-day{color:var(--accent-ink);}
.event{display:grid; grid-template-columns:74px 1fr auto; gap:1rem; align-items:center; padding:.9rem 1.1rem; border-bottom:1px solid var(--line);}
.event:last-child{border-bottom:0;}
.event:hover{background:var(--surface-2);}
.ev-time{font-weight:800; color:var(--heading); font-size:.9rem; font-variant-numeric:tabular-nums;}
.ev-time small{display:block; color:var(--text-soft); font-weight:600; font-size:.7rem;}
.ev-title{font-weight:700; color:var(--heading);}
.ev-where{font-size:.85rem; color:var(--text-soft);}
.ev-cat{font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-ink); background:var(--accent-soft); padding:.2rem .5rem; border-radius:6px;}
.add-cal{border:1px solid var(--line-2); background:var(--sheet); color:var(--heading); border-radius:var(--radius-pill); padding:.35rem .7rem; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap;}
.add-cal:hover{border-color:var(--accent); color:var(--accent-ink);}
.col-right{display:flex; flex-direction:column; gap:.35rem; align-items:flex-end;}
@media (max-width:560px){ .event{grid-template-columns:60px 1fr;} .event .col-right{grid-column:2; justify-self:start; flex-direction:row;} }
.monthgrid{display:none; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:clip; max-width:900px; margin-inline:auto;}
.monthgrid.show{display:block;} .agenda.hide{display:none;}
.mg-head,.mg-body{display:grid; grid-template-columns:repeat(7,minmax(0,1fr));}
.mg-cell{min-width:0;}
.mg-head span{padding:.6rem; text-align:center; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); border-bottom:1px solid var(--line);}
.mg-cell{min-height:88px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); padding:.4rem; font-size:.8rem;}
.mg-cell:nth-child(7n+1){border-left:0;}
.mg-cell .d{font-weight:800; color:var(--heading); font-variant-numeric:tabular-nums;}
.mg-cell.out{color:var(--muted); background:var(--surface-2);}
.mg-cell .pip{display:block; margin-top:.25rem; font-size:.68rem; background:var(--accent-soft); color:var(--accent-ink); border-radius:5px; padding:.1rem .3rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:560px){ .mg-cell{min-height:56px;} .mg-cell .pip{display:none;} .mg-cell.has::after{content:"•"; color:var(--accent); display:block; text-align:center;} }

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,24px); align-items:start;}
@media (max-width:900px){ .grid3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid3{grid-template-columns:1fr;} }
.post{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); overflow:clip; box-shadow:var(--shadow); color:inherit; display:flex; flex-direction:column; min-width:0;}
/* prevent a long unbreakable word/URL in one card from stretching its grid column and pushing the page sideways */
.grid3>*{min-width:0;}
.post-body{min-width:0;}
.post-body h4,.post-text{overflow-wrap:anywhere;}
/* uniform blog cards — consistent image size, clamped text, Read more to expand */
.post-media{position:relative; aspect-ratio:3/4; background:#fff; display:block; text-decoration:none;}
.post h4 a{color:inherit; text-decoration:none;}
.post h4 a:hover{color:var(--accent-ink);}
a.show-more{text-decoration:none; display:inline-block;}
/* Show the WHOLE image inside the card — shrink to fit with white letterboxing
   above/below (or beside) so tall flyers/graphics are never cropped. */
.post-media .post-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;}
.post-media svg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
/* post detail page — show the FULL image, never cropped */
.post-detail-media{margin-top:.6rem; text-align:center;}
.post-detail-media img{display:block; max-width:100%; max-height:75vh; width:auto; height:auto; margin:0 auto; border-radius:var(--radius); box-shadow:var(--shadow);}
/* Inline photos placed within a blog story body (Jenny) */
.post-inline-img{display:block; width:100%; max-width:640px; height:auto; margin:1.3rem auto; border-radius:var(--radius); box-shadow:var(--shadow);}
/* Admin: reorderable "More Photos" thumbnails for a listing (Qwynny) — drag-and-drop + big previews */
.lst-photos{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.5rem;}
.lst-ph{width:190px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--sheet); cursor:grab; transition:box-shadow .1s, opacity .1s;}
.lst-ph:active{cursor:grabbing;}
.lst-ph.dragging{opacity:.4;}
.lst-ph.drop-before{box-shadow:-4px 0 0 0 var(--accent);}
.lst-ph.drop-after{box-shadow:4px 0 0 0 var(--accent);}
.lst-ph img{display:block; width:100%; height:150px; object-fit:cover; pointer-events:none;}
.lst-ph-btns{display:flex; align-items:center; gap:.2rem; padding:.3rem .35rem;}
.lst-ph-grip{cursor:grab; color:var(--text-soft); font-size:1.05rem; line-height:1; padding:0 .1rem;}
.lst-ph-btns button{border:1px solid var(--line); background:var(--sheet); border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:.82rem; line-height:1; color:var(--text); padding:0;}
.lst-ph-btns button:hover:not(:disabled){border-color:var(--accent); color:var(--accent-ink);}
.lst-ph-btns button:disabled{opacity:.35; cursor:default;}
.lst-ph-n{font-size:.8rem; color:var(--text-soft); min-width:16px; text-align:center;}
.lst-ph-rm{margin-left:auto; color:var(--accent-ink)!important;}
.post-body{padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.4rem;}
.kicker{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--accent-ink);}
.post-body h4{font-size:1.14rem; font-family:var(--serif);}
.post-meta{font-size:.82rem; color:var(--muted); display:flex; gap:.5rem;}
.post-text{color:var(--text-soft); font-size:.92rem; line-height:1.55; margin-top:.35rem;}
.post-text p{margin:0 0 .55rem;} .post-text p:last-child{margin-bottom:0;}
.post-text.clamp{display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}
.show-more{align-self:flex-start; margin-top:.25rem; background:none; border:0; padding:0; color:var(--accent-ink); font-weight:800; font-size:.85rem; cursor:pointer; font-family:inherit;}
.show-more:hover{text-decoration:underline;}
/* Blog search + pagination */
.blog-tools{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.4rem;}
.blog-tools #blogSearch{flex:1 1 260px; max-width:460px; padding:.7rem 1rem; font:inherit; font-size:1rem; color:var(--text); background:var(--surface,#fff); border:1px solid rgba(0,0,0,.16); border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.blog-tools #blogSearch:focus{outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px rgba(30,90,120,.15);}
.blog-count{color:var(--text-soft); font-size:.9rem; white-space:nowrap;}
.blog-more{display:flex; justify-content:center; margin-top:1.8rem;}
.blog-more .btn{min-width:220px;}
/* Search results page */
.search-page{max-width:920px; margin-inline:auto;}
.search-head h1{font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--heading); text-align:center;}
.search-box{display:flex; align-items:center; gap:.5rem; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:.4rem .4rem .4rem 1rem; margin:1.2rem auto 0; max-width:660px;}
.search-box .s-icon{color:var(--text-soft); display:flex;}
.search-box input{flex:1; border:0; background:none; font:inherit; font-size:1rem; color:var(--text); outline:none; padding:.55rem 0;}
.search-summary{text-align:center; color:var(--text-soft); margin-top:1.1rem; font-size:1.02rem;}
.search-summary b{color:var(--heading);}
.sr-q{color:var(--accent-ink); font-weight:600;}
.sr-group{margin-top:2rem;}
.sr-h{font-family:var(--serif); font-size:1.15rem; color:var(--heading); border-bottom:1px solid var(--line); padding-bottom:.4rem; margin:0 0 .3rem; display:flex; align-items:center; gap:.55rem;}
.sr-count{font-size:.72rem; font-weight:800; color:var(--text-soft); background:var(--surface-2); border-radius:999px; padding:.08rem .55rem;}
.sr-item{display:flex; align-items:center; gap:.9rem; padding:.8rem .4rem; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;}
.sr-item:hover{background:var(--surface-2);}
.sr-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.sr-date{color:var(--text-soft); font-size:.8rem; white-space:nowrap; flex:0 0 auto;}
.r-item.r-all{border-top:1px solid var(--line); font-weight:700;}
.r-item.r-all .r-title{color:var(--accent-ink);}
/* Directory-add listing-type tabs (Jenny #28) */
.type-tabs{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.45rem;}
.type-tabs button{padding:.55rem 1.15rem; font:inherit; font-weight:700; color:var(--text); background:var(--sheet); border:1.5px solid var(--line); border-radius:999px; cursor:pointer; transition:background .12s, color .12s, border-color .12s;}
.type-tabs button:hover{border-color:var(--accent-ink);}
.type-tabs button.is-active{background:var(--accent-ink); color:#fff; border-color:var(--accent-ink);}

.masonry{columns:4 210px; column-gap:16px;}
.masonry figure{break-inside:avoid; margin:0 0 16px; border-radius:var(--radius-s); overflow:clip; position:relative; box-shadow:var(--shadow);}
.masonry figure svg,.masonry figure img{width:100%; height:auto; display:block;}
.masonry figcaption{position:absolute; inset:auto 0 0 0; padding:.7rem .8rem; font-size:.8rem; color:#fff; background:linear-gradient(transparent, rgba(19,2,11,.78)); opacity:0; transition:opacity .2s;}
.masonry figure:hover figcaption, .masonry figure:focus-within figcaption{opacity:1;}

.re-info{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,24px); margin-top:clamp(22px,3vw,34px);}
@media (max-width:760px){ .re-info{grid-template-columns:1fr;} }
.info-block{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow);}
.info-block h4{font-size:1.2rem; display:flex; align-items:center; gap:.5rem;}
.info-block ul{margin:.8rem 0 0; padding-left:1.1rem; color:var(--text-soft); font-size:.93rem;}
.info-block li{margin:.35rem 0;}
.price{font-weight:800; color:var(--heading);}
.re-cta{margin-top:clamp(22px,3vw,34px); background:var(--band); color:#fff; border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); display:flex; gap:1.2rem; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.re-cta h3{color:#fff; font-size:clamp(1.3rem,2.4vw,1.7rem);} .re-cta p{color:rgba(255,255,255,.85); margin-top:.3rem; font-size:.95rem; max-width:46ch;}
.re-cta .btn-primary{background:#fff; color:var(--accent-ink); box-shadow:0 8px 18px -10px rgba(0,0,0,.45);}
.re-cta .btn-primary:hover{background:#fff2f9; color:var(--accent-ink);}
.re-cta .btn-ghost{color:#fff; border-color:rgba(255,255,255,.6);}
.re-cta .btn-ghost:hover{background:rgba(255,255,255,.14); border-color:#fff; color:#fff;}

/* single listing detail */
.back-link{display:inline-block; color:var(--accent-ink); font-weight:700; text-decoration:none; margin-bottom:1rem;}
.back-link:hover{text-decoration:underline;}
.listing-hero{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:clip; box-shadow:var(--shadow);}
.listing-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.listing-hero .badge-open{position:absolute; top:14px; left:14px;}
/* Listing photo carousel — swipe/scroll right through every photo in the main image area */
.listing-carousel{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#0c1418;}
.lc-track{display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.lc-track::-webkit-scrollbar{display:none;}
.lc-track img{flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center; display:block;}
.lc-btn{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.85); color:#1a1a1a; font-size:1.7rem; line-height:1; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.25); transition:background .15s;}
.lc-btn:hover{background:#fff;}
.lc-prev{left:12px;} .lc-next{right:12px;}
.lc-count{position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.6); color:#fff; font-size:.8rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; font-variant-numeric:tabular-nums;}
.listing-carousel .badge-open{position:absolute; top:14px; left:14px;}
@media (max-width:560px){ .lc-btn{width:38px; height:38px; font-size:1.4rem;} }
.listing-top{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-top:1.3rem;}
.listing-top h1{font-size:clamp(1.5rem,3.4vw,2.1rem);}
.listing-city{color:var(--text-soft); margin-top:.2rem;}
.listing-stats{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem;}
.listing-stats>div{flex:1 1 90px; text-align:center; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s); padding:.7rem .5rem;}
.listing-stats b{display:block; font-size:1.15rem; color:var(--heading); font-variant-numeric:tabular-nums;}
.listing-stats span{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700;}
.listing-h{margin:1.8rem 0 .7rem; font-size:1.2rem;}
.spec-chips{display:flex; flex-wrap:wrap; gap:.5rem;}
.spec-chip{background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:.85rem; border-radius:var(--radius-pill); padding:.35rem .8rem;}
.listing-desc p{color:var(--text-soft); margin-bottom:.9rem; line-height:1.7;}
.listing-dl{display:grid; grid-template-columns:repeat(2,1fr); gap:.1rem .8rem; margin-bottom:1rem;}
@media (max-width:560px){ .listing-dl{grid-template-columns:1fr;} }
.dl-row{display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line);}
.dl-row dt{color:var(--muted); font-weight:600;}
.dl-row dd{margin:0; color:var(--heading); font-weight:700; text-align:right;}
.listing-schools{margin:0; padding-left:1.1rem; color:var(--text-soft); line-height:1.7;}

/* Row-major grid so cards read newest -> oldest left-to-right, top-to-bottom
   (a vertical-column masonry scrambles the date order when read across). */
.board{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; align-items:start;}
@media (max-width:600px){ .board{grid-template-columns:1fr;} }
.note{break-inside:avoid; margin:0 0 16px; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius-s); padding:1.1rem; box-shadow:var(--shadow); position:relative;}
.note .n-cat{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--sage);}
.note h4{margin:.35rem 0 .4rem; font-size:1.1rem;}
.note p{font-size:.9rem; color:var(--text-soft);}
.note .n-foot{margin-top:.7rem; font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between;}

.quote-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.2vw,24px);}
@media (max-width:700px){ .quote-grid{grid-template-columns:1fr;} }
.quote{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); position:relative;}
.quote .qmark{position:absolute; top:1rem; right:1.2rem; font-size:3rem; line-height:1; color:var(--accent-soft); font-weight:800;}
.quote-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem;}
.avatar{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; font-size:1.1rem;}
.quote-head b{display:block; font-family:var(--serif); font-weight:600; color:var(--heading); font-size:1.1rem;} .quote-head span{font-size:.82rem; color:var(--text-soft);}
.quote p{color:var(--text-soft); font-size:.94rem;}
/* Testimonials gentle auto-scroll (Jenny #14) — pauses on hover so they can be read */
.quote-strip{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.quote-track{display:flex; align-items:flex-start; gap:clamp(16px,2.2vw,24px); width:max-content; animation:slideQuotes 42s linear infinite;}
.quote-strip:hover .quote-track{animation-play-state:paused;}
.quote-track .quote{flex:0 0 auto; width:min(430px,82vw);}
.quote-text p{margin:0 0 .6rem;} .quote-text p:last-child{margin-bottom:0;}
.quote-stars{color:#f1b02e; letter-spacing:3px; font-size:1.05rem; margin-top:.7rem;}
@keyframes slideQuotes{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .quote-track{animation:none;} .quote-strip{overflow-x:auto;} }
/* Testimonials carousel — equal-height cards with "Read more", arrow navigation (Jenny). */
.quote-row{display:flex; align-items:flex-start; gap:clamp(16px,2.2vw,24px); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:.4rem;}
.quote-row::-webkit-scrollbar{display:none;}
.quote-row .quote{flex:0 0 min(430px,82vw); scroll-snap-align:start;}
.quote-row .quote-text{max-height:12em; overflow:hidden; position:relative;}
.quote-row .quote.expanded .quote-text{max-height:none;}
.quote-row .quote.clamped:not(.expanded) .quote-text::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2.4em; background:linear-gradient(transparent,var(--sheet)); pointer-events:none;}
.quote-more{margin-top:.5rem; background:none; border:0; color:var(--accent-ink); font-weight:700; cursor:pointer; padding:.1rem 0; font:inherit;}
.quote-more:hover{text-decoration:underline;}

.sponsor-carousel{position:relative;}
.sponsor-strip{overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--sheet); box-shadow:var(--shadow); scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.sponsor-strip::-webkit-scrollbar{display:none;}
.sponsor-track{display:flex; width:max-content; will-change:scroll-position;}
.sp-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--sheet); color:var(--accent-ink); box-shadow:var(--shadow-lg); cursor:pointer; font-size:1.6rem; line-height:1; display:grid; place-items:center; transition:background .15s, color .15s;}
.sp-arrow:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
/* Arrows sit centered ON the strip's left and right edges, same as the Real Estate carousels (Alex, Oct 6). */
.sp-prev{left:-21px;} .sp-next{right:-21px;}
@media (max-width:760px){ .sp-prev{left:-12px;} .sp-next{right:-12px;} }
@media (max-width:600px){ .sp-arrow{width:36px; height:36px; font-size:1.3rem;} .sp-prev{left:-16px;} .sp-next{right:-16px;} }
.sponsor{flex:0 0 auto; width:210px; padding:1.4rem 1.2rem; border-left:1px solid var(--line); text-align:center; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.5rem; justify-content:center;}
.sponsor .logo{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:1rem;}
/* Photo-contest ad slides in the scroll */
.sponsor-ad{padding:.8rem; width:230px;}
.sponsor-ad img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; transition:transform .2s ease;}
.sponsor-ad[href]:hover img{transform:scale(1.03);}
.sponsor .s-name{font-weight:700; color:var(--heading); font-size:.94rem;}
.sponsor .s-cat{font-size:.74rem; color:var(--text-soft);}
.sponsor:hover .s-name{color:var(--accent-ink);}

.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(20px,3vw,40px); align-items:start;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
form.stack{display:grid; gap:.85rem;}
.field{display:grid; gap:.35rem;}
.field label{font-size:.82rem; font-weight:700; color:var(--heading);}
.field input,.field textarea,.field select{font-size:1rem; color:var(--text); background:var(--sheet); border:1.5px solid var(--line-2); border-radius:var(--radius-s); padding:.7rem .85rem; min-height:46px; width:100%; font-family:inherit;}
.field textarea{min-height:110px; resize:vertical;}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:var(--accent); outline-offset:0;}
.form-2col{display:grid; grid-template-columns:1fr 1fr; gap:.85rem;}
@media (max-width:520px){ .form-2col{grid-template-columns:1fr;} }
.form-note{font-size:.8rem; color:var(--text-soft);}
.social-row{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem;}
.social-row a{width:44px; height:44px; border-radius:12px; border:1px solid var(--line); display:grid; place-items:center; color:var(--accent-ink); text-decoration:none;}
.social-row a:hover{border-color:var(--accent);}

.chips{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center;}
.chip{border:1px solid var(--line-2); background:var(--sheet); color:var(--text-soft); border-radius:var(--radius-pill); padding:.45rem .9rem; font-size:.85rem; font-weight:700; cursor:pointer; min-height:40px;}
.chip[aria-pressed="true"]{background:var(--seal); color:#fff; border-color:var(--seal);}
.dir-controls{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-bottom:1.1rem; justify-content:center;}
.dir-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media (max-width:720px){ .dir-list{grid-template-columns:1fr;} }
.dir-item{display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--sheet); position:relative; box-shadow:var(--shadow);}
.dir-item.sponsored{border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); background:color-mix(in srgb,var(--accent) 4%, var(--sheet));}
.dir-item .d-ico{width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); color:var(--sage); font-weight:800; font-size:1.1rem; border:1px solid var(--line);}
.dir-item h4{font-size:1.05rem;} .dir-item .d-cat{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sage); font-weight:800;}
.dir-item .d-contact{font-size:.88rem; color:var(--text-soft); margin-top:.3rem; font-variant-numeric:tabular-nums;}
.dir-item .spon-flag{position:absolute; top:.7rem; right:.8rem; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--accent-ink);}
.dir-empty{grid-column:1/-1; text-align:center; color:var(--text-soft); padding:1.5rem;}
.dir-item.featured{border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); background:color-mix(in srgb,var(--accent) 5%, var(--sheet));}
.dir-item .d-main{min-width:0;}
.dir-item.person .d-ico{background:var(--accent-soft); color:var(--accent);}
.dir-item .d-photo{width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; border:1px solid var(--line);}
.dir-item .d-muted{font-style:italic; color:var(--muted);}
.dir-item .d-contact a{color:inherit; text-decoration:none;}
.dir-item .d-contact a:hover{color:var(--accent-ink); text-decoration:underline;}
.dir-item .d-site{margin-top:.28rem; font-size:.84rem;}
.dir-item .d-site a{color:var(--accent-ink); font-weight:700; text-decoration:none;}
.dir-item .d-site a:hover{text-decoration:underline;}
.d-cel{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem;}
.d-cel .cel{font-size:.74rem; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--radius-pill); padding:.12rem .5rem;}
.dir-note{text-align:center; color:var(--text-soft); font-size:.92rem; margin-top:1.4rem;}
.dir-note a{color:var(--accent-ink); font-weight:700;}

/* community celebrations */
.celebrations:empty{display:none;}
.celebrations{margin-bottom:1.6rem;}
.cel-head{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.8rem;}
.cel-head h3{font-size:1.15rem;}
.cel-sub{font-size:.85rem; color:var(--text-soft);}
.cel-row{display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.3rem;}
.cel-card{flex:0 0 auto; min-width:190px; display:flex; align-items:center; gap:.6rem; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius-s); padding:.7rem .85rem; box-shadow:var(--shadow);}
.cel-card.cel-now{border-color:color-mix(in srgb,var(--accent) 50%, var(--line)); background:color-mix(in srgb,var(--accent) 6%, var(--sheet));}
.cel-emoji{font-size:1.4rem; line-height:1;}
.cel-name{font-weight:800; color:var(--heading); font-size:.95rem;}
.cel-date{font-size:.78rem; color:var(--text-soft);}

/* Community phone book — signup form */
.signup-form{max-width:600px; margin-inline:auto; display:grid; gap:1.1rem; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.2rem,3vw,2rem); box-shadow:var(--shadow);}
.signup-form .form-note{background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--radius-s); padding:.7rem .9rem; font-size:.9rem; font-weight:600;}
.signup-form .field{display:grid; gap:.4rem; border:0; padding:0; margin:0;}
.signup-form label, .signup-form legend{font-weight:700; color:var(--heading); font-size:.95rem;}
.signup-form .opt{font-weight:500; color:var(--muted); font-size:.82rem;}
.signup-form .req{color:var(--accent);}
.signup-form input[type=text],.signup-form input[type=tel],.signup-form input[type=number],.signup-form select,.signup-form textarea{
  width:100%; border:1.5px solid var(--line-2); background:var(--page); border-radius:var(--radius-s); padding:.7rem .85rem; font-size:1rem; color:var(--text); font-family:inherit; min-height:46px;}
.signup-form textarea{min-height:auto; resize:vertical;}
.signup-form input:focus,.signup-form select:focus,.signup-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.signup-form input[type=file]{width:100%; font-size:.92rem; color:var(--text-soft); padding:.55rem 0;}
.signup-form .row-2{display:grid; grid-template-columns:1.3fr .7fr; gap:.6rem;}
.signup-form .hint{font-size:.8rem; color:var(--muted);}
.signup-form .consent{display:flex; gap:.6rem; align-items:flex-start; font-weight:500; color:var(--text-soft); font-size:.9rem; line-height:1.45;}
.signup-form .consent input{margin-top:.2rem; width:18px; height:18px; flex:none; accent-color:var(--accent);}
.signup-form .btn{justify-self:start;}
/* community directory form — per-field privacy switch + tag grid */
.dir-form .type-group{display:grid; gap:1.1rem;}
.dir-form .priv-row{display:grid; grid-template-columns:1fr auto; gap:.7rem; align-items:end;}
.dir-form .priv{display:flex; flex-direction:column; gap:.25rem; align-self:end;}
.dir-form .priv span{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700;}
.dir-form .priv select{min-height:46px; width:auto; padding-right:2rem;}
@media (max-width:520px){ .dir-form .priv-row{grid-template-columns:1fr;} }
.dir-form .tag-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.4rem .8rem;}
.dir-form .tag-grid label{display:flex; align-items:center; gap:.5rem; font-weight:500; color:var(--text-soft); font-size:.9rem;}
.dir-form .tag-grid input{width:17px; height:17px; accent-color:var(--accent);}
.dir-form optgroup{font-weight:800;}
.signup-form .form-fine{font-size:.82rem; color:var(--muted); margin:0;}
.thanks-mark{width:64px; height:64px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);}

footer.site{background:var(--band); color:rgba(255,255,255,.82); margin-top:clamp(24px,4vw,44px); padding:clamp(40px,6vw,64px) 0 1.5rem;}
footer.site a{color:rgba(255,255,255,.82); text-decoration:none;} footer.site a:hover{color:#fff; text-decoration:underline;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1.6fr; gap:clamp(24px,4vw,40px);}
@media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr;} }
.foot-col h4{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:.8rem;}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.92rem;}
.foot-brand .word{font-family:var(--serif); font-weight:600; font-size:1.55rem; color:#fff;}
.foot-brand p{color:rgba(255,255,255,.78); font-size:.9rem; margin-top:.6rem; max-width:36ch;}
.foot-util{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.85rem; color:rgba(255,255,255,.75); margin-top:.7rem; font-variant-numeric:tabular-nums;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.2); margin-top:2rem; padding-top:1.2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:rgba(255,255,255,.6);}
.disclaimer{max-width:72ch;}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); z-index:120; background:var(--ink); color:#fff; padding:.8rem 1.2rem; border-radius:var(--radius-pill); font-size:.9rem; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* Sponsor strip now scrolls via JS (auto + manual + arrows) — see app.js. */

/* auto-scrolling photo gallery */
/* Reserve the strip height so the top row never collapses to nothing while its images load
   (Jenny: the top slider is "finicky about showing up"). */
.gallery-strip{position:relative; overflow:hidden; min-height:clamp(180px,19.5vw,240px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.gallery-strip + .gallery-strip{margin-top:16px;}
.gallery-track{display:flex; gap:16px; width:max-content; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; animation:slideGallery 70s linear infinite;}
.gallery-track.reverse{animation-direction:reverse;}
.gallery-strip:hover .gallery-track{animation-play-state:paused;}
.gallery-photo{flex:0 0 auto; width:clamp(240px,26vw,320px); aspect-ratio:4/3; margin:0; position:relative; border-radius:var(--radius-s); overflow:clip; box-shadow:var(--shadow);}
.gallery-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-photo figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.4rem .85rem .7rem; color:#fff; font-size:.82rem; font-weight:600; background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));}
@keyframes slideGallery{ from{transform:translateX(0);} to{transform:translateX(calc(-50% - 8px));} }
@media (prefers-reduced-motion: reduce){ .gallery-track{animation:none;} .gallery-strip{overflow-x:auto; -webkit-overflow-scrolling:touch;} }

/* ============ ADMIN PANEL ============ */
.admin-tabs{display:inline-flex; flex-wrap:wrap; gap:.35rem; background:var(--surface-2); padding:.3rem; border-radius:var(--radius-pill);}
/* Phones: the tab bar wraps onto several rows so every tab is reachable (was locked off-screen). */
.admin-tab{border:0; background:transparent; padding:.55rem 1.1rem; border-radius:var(--radius-pill); font:inherit; font-weight:700; color:var(--text-soft); cursor:pointer; transition:background .15s,color .15s;}
.admin-tab.is-active{background:var(--sheet); color:var(--heading); box-shadow:var(--shadow);}
@media (max-width:760px){ .admin-tabs{border-radius:var(--radius-s);} .admin-tab{font-size:.85rem; padding:.42rem .7rem;} }
.admin-photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.admin-photo{margin:0; display:flex; flex-direction:column; gap:.4rem;}
.admin-photo img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-s); box-shadow:var(--shadow);}
.admin-photo figcaption{font-size:.78rem; color:var(--text-soft); line-height:1.3;}
.admin-photo .btn{min-height:34px; padding:.3rem .7rem; font-size:.8rem;}
.hint{display:block; font-size:.8rem; color:var(--text-soft); margin-top:.3rem;}
.req{color:var(--accent-ink);} .opt{color:var(--text-soft); font-weight:400; font-size:.85em;}

/* ============ PHOTO JOURNAL ============ */
/* Photo Journal search (Jenny #8/#18) */
.journal-search{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.6rem;}
.journal-search input{flex:1 1 280px; max-width:480px; padding:.7rem 1rem; font:inherit; font-size:1rem; color:var(--text); background:var(--sheet); border:1px solid rgba(0,0,0,.16); border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.journal-search input:focus{outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px rgba(30,90,120,.15);}
.jsearch-count{color:var(--text-soft); font-size:.9rem; white-space:nowrap;}
.today-feature{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(18px,3vw,40px); align-items:center; margin-bottom:2.4rem;}
.today-media{position:relative;}
.today-media img{display:block; margin-inline:auto; max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:calc(var(--radius) + 6px);
  box-shadow:0 8px 24px rgba(70,55,35,.12), 0 40px 70px -30px rgba(48,42,28,.4);
  /* soft, floating edges */
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, #000 78%, transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 50%, #000 78%, transparent 100%);}
.today-cap .eyebrow{color:var(--accent-ink);}
.today-cap h2{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.12; margin:.2rem 0 .5rem;}
.today-date{font-weight:700; color:var(--text-soft);}
.journal-section{margin-bottom:2.6rem;}
/* Month titles in Jenny's brushstroke font, centered (Jenny #5b) */
.journal-month{margin:0 0 1.2rem; padding-bottom:.4rem; text-align:center;}
.journal-month h3,.journal-h{font-family:var(--script); font-weight:400; font-size:clamp(2.4rem,5.5vw,3.4rem); color:var(--heading); line-height:1.05;}
/* Month + year headings on the Photos page, same size as the About page's script headings (Jenny/Alex, Oct 6: "they look so tiny"). */
.journal-month h3, h2.journal-h{font-size:clamp(3.6rem,7vw,5.6rem); line-height:1.1;}
.journal-h{margin:0;}
.journal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(16px,2.4vw,28px);}
.jphoto{margin:0; display:flex; flex-direction:column; gap:.55rem;}
.jphoto img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px;
  box-shadow:0 4px 14px rgba(70,55,35,.10), 0 26px 46px -26px rgba(48,42,28,.34);
  transition:transform .18s, box-shadow .2s;
  -webkit-mask-image:radial-gradient(115% 115% at 50% 50%, #000 80%, transparent 100%);
          mask-image:radial-gradient(115% 115% at 50% 50%, #000 80%, transparent 100%);}
.jphoto:hover img{transform:translateY(-3px); box-shadow:0 8px 20px rgba(70,55,35,.14), 0 34px 60px -28px rgba(48,42,28,.44);}
.jphoto figcaption{font-size:.86rem; color:var(--text-soft); line-height:1.35;}
.jphoto figcaption b{color:var(--heading); font-weight:700;}
@media (max-width:720px){ .today-feature{grid-template-columns:1fr;} }

/* ============ SELDOVIA TODAY BAR ============ */
/* Pinned right beneath the sticky header (top = measured header height, --head-h) so the
   two-row header never scrolls over the tide text. z-index sits just under the header. */
/* Seldovia Today moved out of the sticky top into page content, beside the Marine Weather
   (Jenny, Sep 24). Now a rounded band in the flow rather than a full-bleed sticky strip. */
/* "Seldovia Today" is now a light card stacked in the left home column (Jenny, Sep 29):
   all the day's live stats together (time, weather, tides, daylight, marine), not a green bar. */
.today-bar{background:var(--sheet); color:var(--text); border-radius:var(--radius); overflow:hidden; height:100%;}
.home-duo .today-bar{background:transparent; border:0; box-shadow:none; border-radius:0;}
.today-inner{padding:clamp(1.1rem,2.4vw,1.6rem); display:flex; flex-direction:column; gap:1rem; align-items:stretch;}
.today-title{font-family:var(--serif); font-weight:700; font-size:1.5rem; color:var(--heading); letter-spacing:.01em; line-height:1.1;}
.today-item{display:flex; align-items:flex-start; gap:.7rem;}
.ti-ico{font-size:1.3rem; line-height:1.15;}
.ti-body{display:flex; flex-direction:column; line-height:1.28; min-width:0;}
.ti-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); font-weight:800;}
.ti-value{font-size:1rem; font-weight:700; color:var(--heading);}
.ti-value .ti-sub{font-weight:600; color:var(--text-soft); font-size:.85em;}
.ti-tide-row{display:block;} /* highs on one line, lows on the next */
.today-item a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; font-weight:700; white-space:nowrap;}

/* ============ TODAY'S FERRY WIDGET ============ */
.ferry-card{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1.1rem,2.4vw,1.6rem);}
.fw-head{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;}
.fw-ico{font-size:2rem; line-height:1;}
.fw-head h3{font-family:var(--serif); font-size:1.25rem; color:var(--heading); line-height:1.15;}
.fw-status{margin-left:auto; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:var(--radius-pill);}
.fw-status.is-on{background:var(--open-bg); color:var(--open);}
.fw-status.is-off{background:var(--surface-2); color:var(--text-soft);}
.fw-routes{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.1rem 0 .3rem;}
.fw-route{background:var(--surface-2); border-radius:var(--radius-s); padding:.8rem 1rem;}
.fw-route h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); margin-bottom:.25rem;}
.fw-route p{font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--heading);}
.fw-note{font-size:.9rem; color:var(--text-soft); margin-top:.6rem;}
.fw-note a{font-weight:700;}
@media (max-width:520px){ .fw-routes{grid-template-columns:1fr;} }

/* ============ SELDOVIA WEBCAMS ============ */
.webcam-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,2.4vw,24px);}
.webcam-card{display:flex; flex-direction:column; text-decoration:none; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); overflow:clip; box-shadow:var(--shadow);}
.wc-player{position:relative; aspect-ratio:16/9; background:#0c1418;}
.wc-video{width:100%; height:100%; object-fit:cover; display:block;}
.wc-badge{position:absolute; top:.6rem; right:.6rem; background:rgba(200,13,50,.92); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.03em; padding:.22rem .55rem; border-radius:999px; text-transform:uppercase;}
.wc-offline .wc-badge{background:rgba(90,90,90,.9);}
.wc-offline .wc-badge::after{content:" — offline";}
.wc-offline .wc-player::after{content:"This camera is temporarily offline"; position:absolute; inset:0; display:grid; place-items:center; color:#cbd5db; font-size:.9rem; text-align:center; padding:1rem;}
/* Phone full-screen webcam view (webcams.js): fills the screen, big obvious Close, tap anywhere to close. */
.wc-player.wc-expanded{position:fixed; inset:0; z-index:200; aspect-ratio:auto; border-radius:0; background:#000;}
.wc-player.wc-expanded .wc-video,.wc-player.wc-expanded .wc-snap{width:100% !important; height:100% !important; object-fit:contain !important;}
.wc-player.wc-expanded .wc-badge{right:auto; left:.8rem; top:max(.8rem, env(safe-area-inset-top));}
.wc-close{position:absolute; top:max(.8rem, env(safe-area-inset-top)); right:.8rem; z-index:3; background:#fff; color:#111; border:0; border-radius:999px; padding:.75rem 1.2rem; font:inherit; font-weight:800; font-size:1.05rem; box-shadow:0 4px 16px rgba(0,0,0,.45); cursor:pointer;}
.wc-player.wc-expanded::before{content:"Tap anywhere to close"; position:absolute; left:0; right:0; bottom:max(1.2rem, env(safe-area-inset-bottom)); z-index:3; text-align:center; color:#fff; font-size:.95rem; opacity:.85; pointer-events:none;}
.wc-body{padding:1rem 1.1rem 1.2rem;}
.wc-body h4{font-family:var(--serif); font-size:1.15rem; color:var(--heading);}
.wc-body p{font-size:.9rem; color:var(--text-soft); margin:.3rem 0 0; line-height:1.4;}
.wc-body p a{color:var(--accent-ink); font-weight:700; text-decoration:none; white-space:nowrap;}
.wc-credit{font-size:.8rem; color:var(--text-soft); margin-top:1rem; text-align:center;}
.wc-credit a{color:var(--accent-ink); text-decoration:none; font-weight:600;}
.wc-credit-lg{font-size:1rem; margin-top:.5rem; color:var(--text); max-width:60ch; margin-left:auto; margin-right:auto;}

/* ============ CALENDAR EMBED ============ */
.cal-embed{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:clip;}
.cal-embed iframe{display:block; width:100%; height:min(78vh,760px); border:0;}
.cal-note{font-size:.86rem; color:var(--text-soft); margin-top:.7rem; text-align:center;}
/* Home "What's on this week" schedule widget (home-schedule.js) */
.today-sched{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1rem,2.4vw,1.6rem);}
.ts-head{margin-bottom:.5rem;}
.ts-head h3{font-family:var(--serif); font-size:1.35rem; color:var(--heading); margin-top:.1rem;}
.ts-list{list-style:none; margin:.4rem 0 .9rem; padding:0;}
.ts-item{display:grid; grid-template-columns:120px 1fr; gap:1rem; align-items:baseline; padding:.55rem 0; border-top:1px solid var(--line);}
.ts-item:first-child{border-top:0;}
.ts-when b{font-weight:800; font-size:.9rem; color:var(--heading);} .ts-when small{display:block; color:var(--text-soft); font-weight:600; font-size:.75rem;}
.ts-title{font-weight:700; color:var(--heading);}
.ts-empty{color:var(--text-soft); margin:.2rem 0 .9rem;}
.ts-all{color:var(--accent-ink); font-weight:800; text-decoration:none; font-size:.92rem;}
@media (max-width:520px){ .ts-item{grid-template-columns:92px 1fr; gap:.6rem;} }

/* ============ EXPLORE — soft "floating" featured-place images ============ */
.place-grid .place-media{background:transparent;}
.place-grid .place-media .place-photo{
  -webkit-mask-image:radial-gradient(130% 130% at 50% 42%, #000 76%, transparent 100%);
          mask-image:radial-gradient(130% 130% at 50% 42%, #000 76%, transparent 100%);}
.place-grid .place{border-color:transparent; box-shadow:0 2px 8px rgba(70,55,35,.06), 0 22px 44px -26px rgba(48,42,28,.34);}

/* ============ BULLETIN — clickable flyer panels ============ */
.note-link{display:block; text-decoration:none; color:inherit; transition:transform .16s, box-shadow .2s, border-color .2s;}
.note-link:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--accent);}
.n-open{display:inline-block; margin-top:.7rem; font-weight:800; font-size:.82rem; color:var(--accent-ink);}

/* ---- Horizontal, swipeable bulletin row (Qwynny's request) ---- */
.board-carousel{position:relative;}
.board.board-row{columns:auto; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity; padding:.4rem .2rem 1.1rem; -webkit-overflow-scrolling:touch;}
.board.board-row .note{flex:0 0 300px; width:300px; max-width:82vw; margin:0; padding:0; overflow:hidden; scroll-snap-align:start; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .12s, box-shadow .15s;}
.board.board-row .note .n-body{padding:1.05rem 1.15rem 1.15rem;}
.board.board-row .note.note-own{cursor:pointer;}
.board.board-row .note:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.n-media{margin:0; background:var(--surface-2);}
.n-media img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover;}
/* News pinboard cards (masonry board, like the blog) */
.board .note{padding:0; overflow:hidden; margin:0;}
.board .note .n-body{padding:1.05rem 1.15rem 1.15rem;}
.board .note.note-own{cursor:pointer;}
.board .note:hover{box-shadow:var(--shadow-lg);}
.n-event{display:inline-block; margin-top:.5rem; font-weight:700; font-size:.86rem; color:var(--accent-ink); text-decoration:none;}
.n-event:hover{text-decoration:underline;}
.board-arrow{position:absolute; top:44%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--sheet); color:var(--accent-ink); border:1px solid var(--line); box-shadow:var(--shadow-lg); cursor:pointer; z-index:4;}
.board-prev{left:-8px;} .board-next{right:-8px;}
.board-arrow[hidden]{display:none;}
@media (max-width:560px){ .board-arrow{display:none;} }
/* Bulletin single-post detail modal (shareable permalink) */
.bul-modal{position:fixed; inset:0; z-index:100; background:rgba(20,15,10,.55); display:grid; place-items:center; padding:1rem; overflow:auto;}
.bul-modal-card{background:var(--sheet); border-radius:var(--radius); max-width:560px; width:100%; padding:1.4rem 1.5rem 1.6rem; position:relative; box-shadow:var(--shadow-lg); max-height:90vh; overflow:auto;}
.bul-modal-img{width:100%; max-height:340px; object-fit:cover; border-radius:12px; margin-bottom:1rem;}
.bul-close{position:absolute; top:.6rem; right:.7rem; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--sheet); font-size:1.35rem; line-height:1; cursor:pointer; color:var(--text-soft);}
.bul-modal-card h3{font-family:var(--serif); font-size:1.5rem; color:var(--heading); margin:.3rem 0 .2rem;}
.bul-meta{font-size:.85rem; color:var(--muted); margin-bottom:.8rem;}
.bul-body{color:var(--text); line-height:1.6; white-space:pre-wrap;}
.bul-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.2rem;}

/* ============ LISTINGS — date, photo gallery, video (Supabase listings) ============ */
.listing-date{font-size:.8rem; font-weight:700; color:var(--muted); margin-top:.35rem;}
.listing-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:.4rem;}
.listing-gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-s); box-shadow:var(--shadow); cursor:zoom-in;}
.listing-video{position:relative; aspect-ratio:16/9; margin-top:.5rem; border-radius:var(--radius); overflow:clip; box-shadow:var(--shadow);}
.listing-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* admin row action buttons (Edit / Delete) */
.admin-row-btns{display:flex; gap:.4rem; flex-shrink:0;}
.admin-row-btns .btn{min-height:36px; padding:.35rem .75rem; font-size:.82rem;}
.admin-photo .admin-row-btns{margin-top:.1rem;}
/* Phones: admin list rows (e.g. Published listings) put the buttons on their own line under the text,
   so the text isn't squeezed into a one-word-wide column beneath the buttons (Alex). */
@media (max-width:640px){
  .dir-item:has(> .admin-row-btns){flex-wrap:wrap;}
  .dir-item:has(> .admin-row-btns) > .d-main{flex:1 1 0;}
  .dir-item > .admin-row-btns{flex-basis:100%; flex-wrap:wrap;}
}
/* Listing page: nudge that photos open full size (Jenny Oct 6). "Tap" on phones, "Click" with a mouse. */
.lc-hint{display:flex; align-items:center; justify-content:center; gap:.4rem; color:var(--text-soft); font-size:.95rem; margin:.65rem 0 0; text-align:center;}
.lc-hint svg{flex:0 0 auto; color:var(--accent-ink);}
.lc-hint-touch{display:none;}
@media (hover:none){ .lc-hint-touch{display:inline;} .lc-hint-mouse{display:none;} }

/* Blog videos play right in the post (Jenny, Oct 6). Facebook reels are tall, everything else is widescreen. */
.post-video{position:relative; width:100%; max-width:820px; margin:0 auto; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:var(--shadow);}
.post-video.is-vertical{aspect-ratio:9/16; max-width:min(420px,100%);}
.post-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.post-video-note{text-align:center; color:var(--text-soft); font-size:.9rem; margin:.6rem 0 0;}
.post-media{position:relative;}
.video-tag{position:absolute; left:10px; top:10px; z-index:2; background:rgba(0,0,0,.72); color:#fff; font-weight:700; font-size:.8rem; padding:.3rem .6rem; border-radius:999px; letter-spacing:.02em;}

/* Buy Me a Coffee spots (Jenny, Oct 6). Only appear once SUPPORT_URL is set in app.js. */
.support-float{position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:69; display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .95rem; border-radius:999px; background:var(--sheet); color:var(--heading); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); font-weight:700; font-size:.92rem; text-decoration:none;}
.support-float:hover{border-color:var(--band); color:var(--band);}
@media (max-width:600px){ .support-float{padding:.55rem .8rem; font-size:.86rem;} }
body.has-support #toTop{bottom:calc(clamp(14px,3vw,28px) + 58px);}
.foot-support{margin-top:.8rem;} .foot-support a{color:inherit; font-weight:700;}
.support-card{max-width:640px; margin:0 auto; text-align:center; padding:clamp(20px,3vw,32px); border:1px solid var(--line); border-radius:var(--radius); background:var(--sheet); box-shadow:var(--shadow);}
.support-card h3{margin:0 0 .4rem;} .support-card p{color:var(--text-soft); margin:0 0 1rem;}
.today-support{display:block; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line); color:var(--text-soft); text-decoration:none; font-size:.92rem;}
.today-support b{color:var(--accent-ink);}

/* Admin Phone Book search: make the "4 of 67 shown" count easy to spot (Alex, Oct 6) */
.list-count{font-weight:700 !important; color:var(--accent-ink) !important; font-size:.92rem !important;}
/* Listing photo hint: keep the sentence together (it split into two columns on phones) */
.lc-hint-text{display:inline;}
/* Sponsor arrows: solid teal so they stand out (Alex, Oct 6) */
.sp-arrow{background:var(--accent); color:#fff; border-color:var(--accent);}
.sp-arrow:hover{background:var(--accent); color:#fff; filter:brightness(1.12);}
/* About quote: on phones break before "for our" so the two lines read naturally (Alex, Oct 6) */
.q-br{display:none;}
@media (max-width:760px){ .q-br{display:inline;} }
/* Neighbor phone numbers are tappable to call (Alex, Oct 6) */
.dir-item.person .d-contact a{color:inherit; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px;}

/* Admin > Businesses rows on phones (Alex, Oct 6) */
@media (max-width:640px){
  .bc-row > div:first-child{flex-wrap:wrap;}
  .bc-row > div:first-child .d-main{flex:1 1 calc(100% - 70px) !important;}
  .bc-row > div:first-child .d-main h4{font-size:1rem !important;}
  .bc-row > div:first-child .bc-sel{max-width:none !important; flex:1 1 auto !important;}
  .bc-row > div:not(:first-child){padding-left:0 !important;}
  .bc-row > div:not(:first-child) label{width:100%;}
  .bc-row > div:not(:first-child) label > input, .bc-row > div:not(:first-child) label > select{flex:1 1 auto; width:auto !important; min-width:0;}
}
/* Photos page eyebrow: on phones, "This month over / the years" instead of leaving "YEARS" alone (Alex) */
.eb-br{display:none;}
@media (max-width:640px){ .eb-br{display:inline;} }

/* Buy Me a Coffee widget sits bottom-right; lift the green "scroll to top" button above it (Oct 6) */
body.has-support #toTop{bottom:calc(18px + 76px) !important;}
/* Jenny's license line on the Real Estate page (Oct 6) */
.re-license{font-size:.88rem !important; color:var(--text-soft) !important; margin-top:.9rem !important;}

/* Explore page search box (Jenny, Oct 6) */
.place-search{display:flex; align-items:center; gap:.6rem; max-width:560px; margin:0 auto 1rem; padding:.2rem .9rem; background:var(--sheet); border:1.5px solid var(--band); border-radius:999px; box-shadow:var(--shadow);}
.place-search input{flex:1; border:0; background:transparent; font:inherit; font-size:1.02rem; padding:.65rem 0; outline:none; min-width:0;}
.place-count{color:var(--text-soft); font-size:.88rem; white-space:nowrap;}

/* "Add to your phone" / "Make us your home page" (Jenny, Oct 6) */
.keep-handy{display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem 1rem; max-width:var(--maxw); margin:clamp(12px,1.6vw,18px) auto 0; padding:0 var(--gutter);}
.keep-handy.is-phone{flex-direction:column; align-items:center;}
.kh-btn{background:var(--sheet); border:1.5px solid var(--line-2); color:var(--heading); font:inherit; font-weight:700; font-size:.95rem; padding:.55rem 1rem; border-radius:999px; cursor:pointer; box-shadow:var(--shadow);}
.kh-btn:hover{border-color:var(--band); color:var(--band);}
.kh-modal{position:fixed; inset:0; z-index:200; background:rgba(10,18,14,.55); display:grid; place-items:center; padding:16px;}
.kh-modal[hidden]{display:none;}
.kh-card{position:relative; background:var(--sheet); border-radius:var(--radius); box-shadow:var(--shadow-lg); max-width:520px; width:100%; max-height:85vh; overflow:auto; padding:clamp(20px,3vw,30px);}
.kh-card h3{margin:0 2rem .5rem 0;} .kh-card p{color:var(--text-soft);} .kh-card ol{padding-left:1.3rem; line-height:1.7;} .kh-card li{margin:.3rem 0;}
.kh-card code{background:var(--surface-2); padding:.1rem .35rem; border-radius:6px; word-break:break-all;}
.kh-card details{margin-top:1rem;} .kh-card summary{cursor:pointer; font-weight:700; color:var(--accent-ink);}
.kh-close{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--sheet); font-size:1.1rem; cursor:pointer;}

/* Explore box logo (Jenny Oct 7) */
.ykyis-logo{display:block; width:min(100%,380px); height:auto; margin:0 0 .6rem; border-radius:12px;}
/* Small descriptor under playful Explore tab names (Jenny Oct 7) */
.tab .tab-sub{display:block; font-size:.72rem; font-weight:600; color:var(--text-soft); letter-spacing:.01em; margin-top:.1rem;}
.tabs .tab[aria-pressed="true"] .tab-sub{color:inherit; opacity:.85;}
/* Real estate details in the Real Estate page footer + Contact page (Jenny Oct 7) */
.re-foot-details{line-height:1.7; margin-bottom:.8rem !important;}
.re-foot-details a{color:inherit;}
.contact-address{margin:.8rem 0 0; font-weight:600; color:var(--heading); line-height:1.6;}
.contact-address span{font-weight:400; color:var(--text-soft);}
.contact-license{margin-top:.6rem; font-size:.88rem; color:var(--text-soft);}

/* Home: 3 columns — Seldovia Today · Photo of the Day · What's on this week (Jenny Oct 8) */
.home-trio{grid-template-columns:1fr 1fr 1fr;}
.home-trio > div{border-right:1px solid var(--line);} .home-trio > div:last-child{border-right:0;}
.home-potd .potd-card{padding:clamp(16px,2vw,22px); display:flex; flex-direction:column; gap:.5rem; width:100%;}
.home-potd .ts-head h3{margin:0;}
.potd-link{display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:inherit;}
.potd-media{display:block; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--surface-2);}
.potd-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s;}
.potd-link:hover .potd-media img{transform:scale(1.03);}
.potd-cap{font-weight:700; color:var(--heading); line-height:1.35;}
.potd-date{font-size:.85rem; color:var(--text-soft);}
@media (max-width:980px){ .home-trio{grid-template-columns:1fr 1fr;} .home-trio > #schedCol{grid-column:1/-1; border-top:1px solid var(--line);} .home-trio > div:nth-child(2){border-right:0;} }
@media (max-width:640px){ .home-trio{grid-template-columns:1fr;} .home-trio > div{border-right:0; border-bottom:1px solid var(--line);} .home-trio > div:last-child{border-bottom:0;} }
/* Meet Jenny: family photo on the right (Jenny Oct 8) */
.jenny-card.jenny-card-family{grid-template-columns:1fr minmax(220px,340px);}
.jenny-card .jenny-family{transform:none !important; aspect-ratio:auto !important; width:100%; max-width:340px; height:auto; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg);}
@media (max-width:680px){ .jenny-card.jenny-card-family{grid-template-columns:1fr;} .jenny-card .jenny-family{order:-1; max-width:300px;} }
.jenny-card img.jenny-signature{display:block; width:min(240px,60%); max-width:240px; height:auto; aspect-ratio:auto; object-fit:contain; transform:none; box-shadow:none; border-radius:0; margin:1.2rem 0 .4rem;} /* not a photo: no crop/flip/shadow */
/* Our own floating coffee cup (Jenny Oct 8) */
.bmc-cup{position:fixed; right:18px; bottom:18px; z-index:69; display:block; line-height:0; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:transform .15s;}
.bmc-cup img{display:block; height:auto;} .bmc-cup .bmc-btn-img{width:170px; border-radius:12px;} .bmc-cup .bmc-circle-img{display:none; width:60px; border-radius:50%;}
@media (max-width:760px){ .bmc-cup{border-radius:50%;} .bmc-cup .bmc-btn-img{display:none;} .bmc-cup .bmc-circle-img{display:block;} }
.bmc-cup:hover{transform:scale(1.07);}
/* Footer: phone / home-page buttons under the coffee link (Jenny Oct 8) */
footer.site .keep-handy{justify-content:flex-start; margin:.6rem 0 0; padding:0; flex-direction:column; align-items:flex-start; gap:.4rem;}
footer.site .kh-btn{font-size:.85rem; padding:.4rem .8rem; box-shadow:none;}

/* Explore box: logo on the left, no white box (Jenny Oct 8) */
.feature.feature-ykyis{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.feature.feature-ykyis .feature-logo{order:-1; min-height:0; display:grid; place-items:center; padding:clamp(18px,3vw,36px);}
.feature.feature-ykyis .feature-logo img{width:100%; max-width:440px; height:auto; display:block;}
@media (max-width:760px){ .feature.feature-ykyis{grid-template-columns:1fr;} .feature.feature-ykyis .feature-logo{padding-bottom:0;} }
/* Intro lines on the Blog and Photos pages (Jenny Oct 8) */
.page-intro{max-width:var(--maxw); margin:clamp(18px,2.6vw,28px) auto 0; padding:0 var(--gutter); text-align:center; font-size:1.12rem; line-height:1.7; color:var(--text);}
.page-intro a{font-weight:700; color:var(--accent-ink);}
/* This month's photo contest (Jenny/Qwynny Oct 8) */
.contest-wrap{padding-bottom:0;}
.contest-card{max-width:760px; margin:0 auto; text-align:center; background:var(--sheet); border:2px solid var(--band); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(20px,3vw,32px);}
.contest-card h2{margin:.2rem 0 .6rem;} .contest-deadline,.contest-prize{margin:.3rem 0; font-size:1.05rem;}
.contest-blurb{text-align:left; margin:1rem auto; max-width:62ch; color:var(--text);} .contest-blurb p{margin:0 0 .7rem;}
.contest-rules{margin-top:.8rem; font-size:.9rem;}
/* Blog opening line in the script font, like the About page's "Thank you for stopping by" (Oct 8) */
.page-intro.page-intro-script{font-family:var(--script); font-weight:400; color:var(--heading); font-size:clamp(2.4rem,5.2vw,4.2rem); line-height:1.2; text-wrap:balance; max-width:1200px;}

/* Footer (Jenny Oct 9): Menu + every Explore tab; the long Explore list splits into two columns on wide screens */
@media (min-width:781px){ .foot-explore ul{display:block; columns:2; column-gap:1.4rem;} .foot-explore li{break-inside:avoid; margin-bottom:.5rem;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr 1fr; column-gap:16px;} .foot-grid .foot-brand{grid-column:1/-1;} }
.foot-email{margin-top:.6rem;} .foot-email a{color:inherit; font-weight:700;}

/* ===== Oct 10 batch (Jenny) ===== */
/* Intro lines under the Blog / Photos / Phone Book banners: storybook serif, tighter lines, full banner width */
.page-intro{font-family:"Lovestory Serif", Georgia, serif; font-weight:400; font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.32; color:var(--heading); text-align:center; text-wrap:pretty;}
.page-intro a{font-family:inherit;}
.page-intro-cta{text-align:center; margin:1rem 0 0;}
/* Seldovia.com intro on Home (moved from About) */
.home-intro{text-align:center; padding-bottom:0;}
.home-intro .home-intro-h{font-family:"Lovestory Serif", Georgia, serif; font-weight:400; color:var(--band); font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.15; text-wrap:balance; margin:0 auto .7rem;}
.home-intro p{font-family:"Lovestory Serif", Georgia, serif; font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.4; color:var(--text); max-width:none; margin:0 auto; text-wrap:pretty;}
/* Footer sponsor link */
.foot-sponsor{margin-top:.35rem;} .foot-sponsor a{color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px;}
/* Mobile menu button: 3 lines + MENU */
@media (max-width:1120px){ #menuBtn{display:inline-flex; align-items:center; gap:7px; width:auto; height:44px; padding:0 15px 0 12px; border-radius:999px; border:2px solid #fff; background:rgba(255,255,255,.18);} }
#menuBtn .menu-word{font-family:var(--sans); font-weight:800; font-size:.85rem; letter-spacing:.1em; line-height:1;}
/* Explore -> map link */
.place-map-link{text-align:center; margin:.6rem 0 0; font-weight:700;} .place-map-link a{color:var(--accent-ink);}
/* Find Me Map page */
.fm-title{font-family:var(--script); font-weight:400; font-size:clamp(3rem,7vw,5rem); color:var(--heading); margin:.1rem 0 0; line-height:1;}
.fm-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1rem; margin:1rem 0 .6rem;}
.fm-msg{font-weight:600; color:var(--heading);}
.fm-chips{justify-content:center; flex-wrap:wrap; margin-bottom:.8rem;}
.fm-dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle;}
.fm-map{height:min(72vh,680px); min-height:380px; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; z-index:0;}
.fm-count{text-align:center; color:var(--text-soft); font-size:.92rem; margin-top:.6rem;}
.fm-pop b{font-size:1rem;} .fm-pop span{color:#666;} .fm-pop-links{margin-top:.4rem; font-weight:700;}
/* Admin Map Pins tab */
.mp-wrap{display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:16px;}
.mp-tools{display:flex; gap:6px; margin-bottom:6px;} .mp-tools select,.mp-tools input{flex:1; min-width:0; padding:.45rem .5rem; border-radius:8px; border:1px solid #ccc;}
.mp-list{max-height:560px; overflow:auto; display:grid; gap:4px;}
.mp-row{display:block; text-align:left; width:100%; padding:.45rem .6rem; border:1px solid #e3ddd2; border-radius:8px; background:#fff; cursor:pointer;}
.mp-row small{display:block; color:#777;} .mp-row.on{border-color:var(--band); background:#eef4ef;}
.mp-sel{margin-bottom:6px;} .mp-map{height:520px; border-radius:10px; overflow:hidden;} .mp-actions{margin-top:8px;}
@media (max-width:760px){ .mp-wrap{grid-template-columns:1fr;} .mp-map{height:380px;} .mp-list{max-height:260px;} }
.about-map-fig figcaption a{white-space:nowrap;} /* keep "Find Me Map" on one line */

/* Oct 18 (Jenny Oct 17): "See on map" on Explore cards; map buttons with the Explore second line; footer jump target */
.place-maplink{display:inline-flex; align-items:center; gap:.3rem; margin:.15rem 0 .35rem; font-weight:700; font-size:.9rem; color:var(--accent-ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px; width:max-content;}
.place-maplink:hover{color:var(--band);}
.fm-chips .tab{display:inline-flex; flex-direction:column; align-items:center; line-height:1.2;}
.fm-chips .tab .fm-lbl{display:inline-flex; align-items:center;}
#ykyis{scroll-margin-top:90px;}

/* Oct 19 (Jenny): contest entry form on Contact + Flier of the Month beside the Photo of the Day */
.contest-fields{display:grid; gap:.2rem;} .contest-note{margin:0 0 .4rem; font-weight:700; color:var(--heading);}
.req{color:#c0392b;}
.ce-preview{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:.5rem;} .ce-preview img{width:64px; height:64px; object-fit:cover; border-radius:8px;}
.ce-preview span{font-weight:700; color:var(--text-soft); font-size:.9rem;}
.pj-flier{display:block; margin-top:1.1rem; text-decoration:none; color:inherit;}
.pj-flier img{display:block; width:100%; max-width:340px; height:auto; border-radius:12px; box-shadow:var(--shadow); margin:.35rem 0 .5rem; transition:transform .15s;}
.pj-flier:hover img{transform:scale(1.02);}
.pj-flier-cta{font-weight:800; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;}
.msg-thumbs{display:flex; flex-wrap:wrap; gap:6px; margin-top:.6rem;} .msg-thumbs img{width:90px; height:90px; object-fit:cover; border-radius:8px;}

/* ===== Oct 22 batch (Jenny Oct 21-22) ===== */
/* Home hub: 18 cards = 3 rows of 6 on computers, 2 across on phones */
@media (max-width:1100px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
.cat-tile.cat-art .cat-photo{object-fit:cover;}
.home-col{display:flex; flex-direction:column; min-width:0;}
.home-col > #seldoviaToday, .home-col > #todaySchedule{flex:0 0 auto;}
.home-news{padding:0 clamp(1rem,2.4vw,1.6rem) clamp(1rem,2.4vw,1.4rem);}
.home-news h3{font-family:var(--serif); font-size:1.2rem; color:var(--heading); margin:.2rem 0 .5rem; padding-top:.9rem; border-top:1px solid var(--line);}
.home-news ul{list-style:none; margin:0 0 .7rem; padding:0; display:grid; gap:.45rem;}
.home-news li a{color:var(--heading); text-decoration:none; font-weight:600; font-size:.95rem; line-height:1.35;}
.home-news li a:hover{color:var(--accent-ink); text-decoration:underline;}
#homeSupport .today-support{margin:0 clamp(1rem,2.4vw,1.6rem) clamp(1rem,2.4vw,1.4rem);}
/* no logo row on top: the banner sits right under the menu bar */
.masthead{top:0;}
.back-btn{background:rgba(255,255,255,.16); color:#fff; border:2px solid #fff; border-radius:999px; height:40px; padding:0 14px; font-weight:800; font-size:.9rem; cursor:pointer; flex:0 0 auto;}
/* footer: Seldovia.com logo + Alaska's Best Kept Secret on a light card */
.foot-logo-card{display:inline-flex; flex-direction:column; align-items:center; gap:.35rem; background:#fffdf7; border-radius:14px; padding:.8rem 1rem; text-decoration:none; max-width:260px;}
.foot-logo{width:170px; height:auto; display:block;} .foot-tagline{width:220px; height:auto; display:block;}
/* intro lines on Phone Book, Photos and News & Stories: same size/style as the Find Me Map text */
.page-intro, main .page-intro{font-size:1.06rem; line-height:1.5; color:var(--text-soft); max-width:62ch; margin-left:auto; margin-right:auto;}
.page-intro.page-intro-script{font-size:1.06rem;}
/* contest flier: centered, "Enter Our Contest This Month" on top */
.pj-flier{display:flex; flex-direction:column; align-items:center; text-align:center; margin:1.1rem auto 0; max-width:340px;}
.pj-flier-top{font-weight:800; font-size:1.1rem; color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px; margin-bottom:.4rem;}
.pj-flier img{margin:.2rem auto 0;}
/* contest form: 4 photo slots */
.ce-slot{display:grid; grid-template-columns:auto 1fr; gap:.4rem .8rem; align-items:center; padding:.7rem 0; border-top:1px solid var(--line);}
.ce-slot label{font-weight:700; grid-column:1/-1;}
.ce-slot input[type=file]{grid-column:1/-1;} .ce-slot input[type=text]{grid-column:1/-1;}
.ce-more{font-size:.9rem; color:var(--text-soft); margin:.4rem 0 0;}
/* map icons + admin multi */
.fm-icon{background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.35); display:grid !important; place-items:center;}
.mp-multi{display:flex; gap:.5rem; align-items:center; font-weight:700; margin:.2rem 0 .5rem;}
/* Real Estate (Jenny Oct 21) */
.jenny-card.jenny-card-stack{grid-template-columns:1fr;}
.jenny-bottom{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-top:1.4rem; flex-wrap:wrap;}
.jenny-card .jenny-bottom .jenny-family{max-width:200px; width:40%; min-width:140px; margin:0;}
.jenny-card .jenny-bottom img.jenny-signature{margin:0;}
@media (max-width:680px){ .jenny-bottom{justify-content:center;} }
.re-cta.re-cta-soft{background:var(--surface-2); color:var(--heading); border:1px solid var(--line); padding:clamp(1rem,2vw,1.4rem) clamp(1.1rem,2.4vw,1.6rem); align-items:center;}
.re-cta.re-cta-soft h3{color:var(--heading); font-size:clamp(1.1rem,2vw,1.35rem);} .re-cta.re-cta-soft p{color:var(--text-soft); font-size:.9rem;}
.re-cta.re-cta-soft .btn-primary{background:var(--accent); color:#fff;} .re-cta.re-cta-soft .btn-primary:hover{background:var(--accent-ink); color:#fff;}
.home-duo > .home-col{flex-direction:column;}
.home-col > .today-bar, .home-col > #todaySchedule{height:auto;}
/* Oct 23: back-to-top arrow keeps its green (pink on Real Estate) but gets a white ring so it shows on the green footer */
#toTop{border:3px solid #fff !important; box-shadow:0 4px 14px rgba(0,0,0,.3);}
/* Oct 23: Meet Jenny bottom — signature and family photo side by side (no big gap) */
.jenny-bottom{justify-content:flex-start; align-items:center; gap:clamp(1.2rem,4vw,3rem);}
.jenny-card .jenny-bottom .jenny-family{max-width:170px; width:170px; min-width:0;}
@media (max-width:680px){ .jenny-bottom{justify-content:center;} .jenny-card .jenny-bottom .jenny-family{width:140px;} }
/* 404 / page moved (Oct 23) */
.nf-title{font-family:var(--script); font-weight:400; font-size:clamp(2.6rem,7vw,4.2rem); color:var(--heading); margin:.2rem 0 .4rem;}
.nf-msg{color:var(--text-soft); margin-bottom:1rem;}
.nf-search{display:flex; gap:.5rem; max-width:560px; margin:0 auto 1rem;} .nf-search input{flex:1; min-width:0; padding:.7rem .9rem; border-radius:999px; border:1px solid var(--line);}
.nf-links{font-weight:700;} .nf-links a{color:var(--accent-ink);}
.find-hit.search-hit{animation-duration:6s;}

/* Oct 26 (Jenny): smaller category buttons on phones, Explore + Find Me Map: 3 across, compact */
@media (max-width:640px){
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem;}
  .tabs .tab{font-size:.78rem; padding:.38rem .3rem; min-height:0; border-radius:10px; border-width:1.2px; box-shadow:none; line-height:1.15;}
  .tabs .tab .tab-sub{font-size:.6rem; margin-top:.05rem;}
  .fm-chips .tab .fm-dot{width:8px; height:8px; margin-right:4px;}
}
/* Oct 26: phone category buttons — text centered top-to-bottom in every button (even spacing), and the
   colored dot sits right before the first word instead of floating beside wrapped text */
@media (max-width:640px){
  .tabs .tab{display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;}
  .fm-chips .tab .fm-lbl{display:block;}
  .fm-chips .tab .fm-dot{display:inline-block; vertical-align:middle; position:relative; top:-1px;}
}