/* Marketing site styles — extracted from docs/feedback/v1/landing.html and
   docs/feedback/v1/blog-post.html (the design anchor for Phase 3.5).
   Keep changes here in sync with the anchor unless you also update the anchor. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1F2937;background:#FAFAF7;line-height:1.6;-webkit-font-smoothing:antialiased}
.serif{font-family:ui-serif,"Iowan Old Style","Apple Garamond",Baskerville,Georgia,serif}
img{display:block;max-width:100%}
a{color:#0F4C5C;text-decoration:none}
a:hover{color:#1B6F82}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:8px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:all .15s ease;text-decoration:none}
.btn-primary{background:#0F4C5C;color:#fff}
.btn-primary:hover{background:#1B6F82;color:#fff}
.btn-ghost{background:transparent;color:#0F4C5C;border-color:#0F4C5C}
.btn-ghost:hover{background:#0F4C5C;color:#fff}
.btn-hero{background:#D4A574;color:#1F2937}
.btn-hero:hover{background:#B88654;color:#fff}
.btn-hero-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.65);backdrop-filter:blur(4px)}
.btn-hero-ghost:hover{background:#fff;color:#0F4C5C}
/* WhatsApp green darkened from brand #25D366 (white-on-green only 1.98:1) to
   meet WCAG AA 4.5:1 for the white button label — #107C3E = 5.28:1. */
.btn-wa{background:#107C3E;color:#fff}
.btn-wa:hover{background:#0E6E37;color:#fff}
.btn-wa .wa-icon{width:18px;height:18px;fill:currentColor;flex-shrink:0}

/* Nav */
.nav{background:#FAFAF7;border-bottom:1px solid #E5E0D5}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:ui-serif,"Iowan Old Style",Georgia,serif;font-size:20px;font-weight:600;color:#0F4C5C;letter-spacing:.01em;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-icon{width:28px;height:28px;flex-shrink:0;border-radius:6px}
.brand-mark{color:#B88654}
@media(max-width:859px){.brand-text{display:none}}
.nav-links{display:none;gap:28px;font-size:14px}
.nav-links a{color:#4B5563}
.nav-links a:hover{color:#0F4C5C}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-cta{display:none}
.lang-toggle{font-size:12px;font-weight:600;letter-spacing:.06em;color:#4B5563;border:1px solid #E5E0D5;border-radius:4px;padding:3px 8px;text-decoration:none;transition:color .15s,border-color .15s}
.lang-toggle:hover{color:#0F4C5C;border-color:#0F4C5C}
@media(min-width:860px){.nav-links{display:flex}.nav-cta{display:inline-flex}}

/* Mobile/tablet nav — full-viewport modal via <details>. Toggle shows <860px;
   horizontal links + CTA take over >=860px. Nav bar stays 64px at all times;
   modal is position:fixed so it doesn't affect layout flow. */
/* Reset the global FAQ-accordion details/summary rules (see ~L465) that bleed
   onto this <details>-based burger: the global `details{padding:20px 0;border}`
   inflated the toggle past the 64px nav bar and displaced the tap target, and
   `summary::after{content:"+"}` injected a stray glyph — so the burger looked
   dead on tablet + mobile. Scope-reset both here. */
.nav-menu{display:none;position:static;border:0;padding:0}
.nav-toggle{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;border-radius:8px;font-size:inherit;gap:0;-webkit-tap-highlight-color:transparent}
.nav-toggle::after{content:none}
.nav-toggle::-webkit-details-marker{display:none}
.nav-toggle:focus-visible{outline:2px solid #0F4C5C;outline-offset:2px}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:22px;height:2px;background:#4B5563;border-radius:2px}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-7px}
.nav-toggle-bars::after{top:7px}
.nav-menu-panel{position:fixed;inset:0;background:#fff;z-index:200;display:none;flex-direction:column;padding:0 24px 32px;overflow-y:auto}
details.nav-menu[open] .nav-menu-panel{display:flex}
.nav-menu-header{display:flex;align-items:center;justify-content:space-between;height:64px;border-bottom:1px solid #E5E0D5;margin:0 -24px;padding:0 24px;flex-shrink:0}
.nav-menu-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:20px;color:#4B5563;cursor:pointer;border-radius:8px;background:none;border:none;padding:0;-webkit-tap-highlight-color:transparent}
.nav-menu-close:hover{color:#0F4C5C}
.nav-menu-panel>a{display:flex;align-items:center;min-height:56px;padding:0 4px;color:#1F2937;font-size:18px;font-weight:500;border-bottom:1px solid #F3F0EA}
.nav-menu-panel>a:first-of-type{margin-top:8px}
.nav-menu-panel>a:hover{color:#0F4C5C}
.nav-menu-cta{justify-content:center;margin-top:24px;border-bottom:none !important;font-size:15px !important;font-weight:600 !important;color:#fff !important;border-radius:999px !important}
.nav-menu-panel>a.nav-menu-cta:hover{color:#fff}
@media(max-width:859px){.nav-menu{display:block}}

/* ---- Layout 02 floating "island" nav (overlays the half-hero split) ----
   Centered, rounded, semi-transparent dark + blur; floats over the hero and is
   NOT sticky (scrolls away). Scoped via the .ovnav markup, emitted only for the
   landing Layout 02 hero (NavHidden branch in base.html). Reuses .nav-menu /
   .nav-menu-panel for the mobile burger panel. */
/* IMPORTANT: .ovnav must NOT carry transform/filter/backdrop-filter — any of
   those make it a containing block for position:fixed, which would trap the
   mobile menu panel (.nav-menu-panel, a descendant) inside the ~56px bar instead
   of the viewport (the "opens white but only the header shows" bug). So the bar
   is centred with auto margins (no transform) and the glass — gradient, border,
   blur, shadow — lives on the ::before pseudo, which is NOT an ancestor box. */
.ovnav{position:absolute;top:18px;left:0;right:0;margin-inline:auto;z-index:50;width:calc(100% - 36px);max-width:1080px;border-radius:16px}
.ovnav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:16px;background:linear-gradient(180deg,rgba(13,52,63,.66),rgba(8,38,47,.78));border:1px solid rgba(232,201,160,.22);box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
.ovnav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 12px 0 18px}
.ovbrand{font-family:ui-serif,"Iowan Old Style",Georgia,serif;font-size:19px;font-weight:600;color:#fff;letter-spacing:0;display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.ovbrand-icon{width:30px;height:30px;flex-shrink:0;border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.ovbrand .mark{color:#E8C9A0}
.ovbrand:focus-visible{outline:2px solid #E8C9A0;outline-offset:3px;border-radius:6px}
.ovnav-links{display:none;gap:26px;font-size:13.5px;list-style:none;margin:0;padding:0}
.ovnav-links a{color:rgba(255,255,255,.82);text-decoration:none;letter-spacing:.01em;font-weight:500;padding:6px 2px;position:relative;transition:color .15s ease}
.ovnav-links a:hover{color:#fff}
.ovnav-links a::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:1.5px;background:#E8C9A0;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.ovnav-links a:hover::after,.ovnav-links a[aria-current="page"]::after{transform:scaleX(1)}
.ovnav-links a:focus-visible{outline:2px solid #E8C9A0;outline-offset:3px;border-radius:3px}
.ovnav-actions{display:flex;align-items:center;gap:10px}
/* CTA is the brand .btn-wa component (green #107C3E, white text + glyph); .ovcta
   only resizes it for the bar. One consistent WhatsApp button everywhere. */
.ovcta{height:38px;padding:0 16px;font-size:13px;letter-spacing:.01em}
.ovcta:focus-visible{outline:2px solid #E8C9A0;outline-offset:2px}
/* burger — borderless, gold bars; shown ≤859px (the .nav-menu rule above flips
   .ovnav-menu to display:block at that width). */
/* Fully isolate from the global FAQ-accordion <summary> rules (~L499) that
   otherwise bleed onto this <summary>-based burger and distort its shape:
   summary{display:flex;justify-content:space-between;gap:12px;font-size:17px}
   spread the bars off-centre, and summary::after{content:"+"} injected a stray
   "+". Override every one so the live burger matches the mock exactly. */
.ovburger{display:flex;align-items:center;justify-content:center;gap:0;width:44px;height:44px;border:none;background:none;padding:0;margin:0;font-size:0;font-weight:400;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.ovburger::-webkit-details-marker{display:none}
.ovburger::after{content:none;display:none}
.ovburger:focus-visible{outline:2px solid #E8C9A0;outline-offset:2px;border-radius:6px}
.ovburger .bars,.ovburger .bars::before,.ovburger .bars::after{display:block;width:22px;height:2px;background:#F2E4D0;border-radius:2px;position:relative}
.ovburger .bars::before,.ovburger .bars::after{content:"";position:absolute;left:0}
.ovburger .bars::before{top:-6px}.ovburger .bars::after{top:6px}
/* desktop ≥860px: show links + CTA, hide burger */
@media(min-width:860px){.ovnav-links{display:flex}.ovnav-menu{display:none}}
/* tablet/mobile: tighter gutters + slightly more opaque over the photo banner */
@media(max-width:859px){.ovnav{top:14px;width:calc(100% - 32px)}.ovcta{display:none}}
@media(max-width:600px){.ovnav{top:12px;width:calc(100% - 24px)}.ovnav::before{background:rgba(8,38,47,.82)}}

/* Hero (landing) */
/* Half-hero: split layout. Text sits on a solid teal panel (no scrim needed),
   photo lives in a ≤45vw column so the browser fetches the 800w derivative
   instead of the 1600w — far smaller LCP image. The teal panel replaces the
   former full-bleed scrim+vignette that the overlay-on-photo design required. */
.hero{position:relative;background:#0A3540;color:#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:55fr 45fr;align-items:stretch;min-height:min(88vh,88dvh)}
/* padding-block ONLY for the gutter logic noted below; the grid handles columns.
 * Desktop: the teal panel is its own surface, so the display-serif H1 gets a
 * larger 64px left inset than the global 24px .container gutter (a 38–66px serif
 * leaning on a 24px margin reads as pinned to the edge). Collapses back to the
 * 24px container gutter on mobile (see ≤600px) where the inset would only steal
 * line length. padding-inline-end stays at the container 24px. */
.hero-inner{position:relative;align-self:center;padding-block:96px 64px;padding-left:64px;width:100%;z-index:2}
.hero-eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E8C9A0;background:rgba(10,53,64,.45);padding:6px 14px;border:1px solid rgba(212,165,116,.85);border-radius:999px;margin-bottom:24px}
/* R2 headline emphasis carries over; no text-shadow needed now that the
   headline sits on a flat teal panel rather than over a busy photo. */
.hero h1{font-family:ui-serif,"Iowan Old Style",Georgia,serif;font-size:clamp(38px,6.2vw,66px);font-weight:500;line-height:1.04;letter-spacing:-.015em;margin:0 0 20px;max-width:640px}
.hero h1 .hl{color:#E8C9A0}
.hero-sub{font-size:clamp(16px,1.6vw,19px);max-width:46ch;color:#D7E0E0;margin:0 0 36px;line-height:1.55}
.hero-facts{display:flex;flex-wrap:wrap;gap:14px 28px;margin-bottom:36px;font-size:14px}
.hero-facts>div{display:flex;align-items:center;gap:8px;color:#EDE7DC}
.hero-facts>div::before{content:"";width:4px;height:4px;background:#D4A574;border-radius:50%}
.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap}
/* Photo column: a single hero photo filling the 45fr column. (The markup
 * renders only the first cell; the prior 3-col/2-row mosaic template left the
 * lone image stranded in the 1.55fr track, so it read as a narrow strip.) */
.hero-photo-grid{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;margin:0}
.hero-grid-cell{overflow:hidden;min-height:0}
.hero-grid-cell img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-grid-showall{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92);color:#1F2937;font-size:12px;font-weight:600;padding:7px 14px;border-radius:6px;text-decoration:none;z-index:2;white-space:nowrap}
.hero-grid-showall:hover{background:#fff}
.scroll-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);display:none;z-index:2}
@media(min-width:860px){.scroll-hint{display:block}}
/* Tablet: keep the split, give the photo slightly more room. */
@media(max-width:860px){.hero-grid{grid-template-columns:52fr 48fr}}
@media(max-width:600px){
  /* Stack: short photo banner on top, text below. Only the first cell shows. */
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-photo-grid{order:-1;height:220px;grid-template-columns:1fr;grid-template-rows:1fr}
  .hero-grid-cell:not(.hero-grid-cell--first){display:none}
  /* The 220px banner is much shorter than the tall portrait photo, so a
     centred cover-crop lands on the ceiling/blinds. Bias the crop downward to
     keep the living scene (table, chairs, view) in frame. */
  .hero-grid-cell img{object-position:center 70%}
  .hero-grid-showall{display:none}
  /* Collapse the desktop 64px panel inset back to the global container gutter. */
  .hero-inner{padding-block:64px 32px;padding-left:24px}
  .hero-cta-row{gap:16px}
  /* The hero headline carries a hard <br> from the DB value (hero.headline,
     rendered via | safeHTML) which forces an ugly 3-line wrap on phones.
     We can't edit the DB string here, so neutralize the <br> below 600px and
     let clamp() + the h1's max-width drive natural wrapping instead. */
  .hero h1 br{display:none}
  /* Force a deterministic 3-up layout instead of flex's content-width-driven
     wrap, which was producing 3+2 / 4+1 / 2+3 across viewport widths.
     `minmax(0,max-content)` lets columns shrink under tight widths instead
     of pushing the third column off-screen. */
  .hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:10px 18px;justify-content:start}
}
/* iPhone SE / Galaxy Fold front: drop to 2-up so the third column can't
   overflow even after the minmax() shrink. */
@media(max-width:360px){.hero-facts{grid-template-columns:repeat(2,max-content)}}

/* ===========================================================================
   Hero layout 01 — Bolighub-clone listing (literal-value port of
   docs/PROJECT MOCK/hero-bolighub-clone.html). All .v1-* selectors so the
   clone can't collide with the existing public classes (.nav, .gallery,
   .carousel, .overlay, .lightbox are all already used elsewhere on the site).
   Responsive keys off real media queries (mock used .vp-frame classes).
   =========================================================================== */

/* ---- Scoped teal focus ring (mock spec; the global ring is gold) ---- */
.v1-page :focus-visible,.v1-nav :focus-visible,.v1-nav-panel :focus-visible,
.v1-mobile-bar :focus-visible,.v1-overlay :focus-visible,.v1-lightbox :focus-visible{outline:3px solid #0F4C5C;outline-offset:2px;border-radius:4px}

/* ---- Scoped shell font (mock body stack; serif headings unaffected — they
   set their own ui-serif family). Scoped to Layout 01 chrome only so the
   global body font on every other page is untouched. ---- */
.v1-page,.v1-nav,.v1-nav-panel{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* ---- NAV (cloned chrome) ---- */
.v1-nav{background:#fff;border-bottom:1px solid #E5E0D5;height:68px;display:flex;align-items:center}
.v1-nav-inner{max-width:1200px;width:100%;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:28px}
.v1-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:ui-serif,"Iowan Old Style",Georgia,serif;font-size:21px;font-weight:700;color:#0F4C5C;white-space:nowrap;flex-shrink:0}
.v1-brand-icon{width:28px;height:28px;border-radius:6px;flex-shrink:0}
.v1-brand .jb{color:#B88654}
.v1-nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;flex:1}
.v1-nav-links a{text-decoration:none;color:#374151;font-size:15px;font-weight:500;padding:8px 2px;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.v1-nav-links a:hover{color:#0F4C5C}
.v1-nav-right{display:flex;align-items:center;gap:18px;flex-shrink:0}
.v1-nav .btn-wa,.v1-nav-panel .btn-wa{appearance:none;background:#107C3E;color:#fff;border:none;border-radius:999px;padding:0 20px;height:44px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.v1-nav .btn-wa:hover,.v1-nav-panel .btn-wa:hover{background:#0E6E37}
.v1-nav-compact{display:none;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}
.v1-hamburger{appearance:none;background:none;border:1px solid #E5E0D5;border-radius:10px;width:44px;height:44px;cursor:pointer;color:#1f2937;display:inline-flex;align-items:center;justify-content:center}
.v1-nav-panel{position:fixed;inset:0;z-index:9100;display:none;flex-direction:column;background:#fff;padding:0 24px 32px;overflow-y:auto}
.v1-nav-panel.open{display:flex}
.v1-nav-panel-header{display:flex;align-items:center;gap:10px;height:64px;border-bottom:1px solid #E5E0D5;margin:0 -24px;padding:0 24px;flex-shrink:0}
.v1-nav-panel-icon{flex-shrink:0}
.v1-nav-panel-brand{flex:1;font-family:ui-serif,"Iowan Old Style",Georgia,serif;font-size:18px;font-weight:600;color:#0F4C5C}
.v1-nav-panel-brand .jb{color:#B88654}
.v1-nav-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:20px;color:#4B5563;cursor:pointer;border-radius:8px;background:none;border:none}
.v1-nav-close:hover{color:#0F4C5C}
.v1-nav-panel>a{display:flex;align-items:center;min-height:56px;padding:0 4px;color:#1F2937;font-size:18px;font-weight:500;border-bottom:1px solid #F3F0EA;text-decoration:none}
.v1-nav-panel>a:first-of-type{margin-top:8px}
.v1-nav-panel>a:hover{color:#0F4C5C}
.v1-nav-panel-cta{justify-content:center;margin-top:24px;border-bottom:none!important}
.v1-nav-panel>a.v1-nav-panel-cta:hover{color:#fff}

/* ---- PAGE CONTAINER ---- */
.v1-page{max-width:1200px;margin:0 auto;padding:12px 32px 80px}

/* ---- MOSAIC (desktop) ---- */
/* Explicit height + literal-fraction rows: in-flow <img>s otherwise hijack
   `1fr` row tracks to their intrinsic aspect, collapsing the grid below its box
   and dropping the absolute "Show all photos" pill into the dead space. Tying
   the rows to the same height math forces the tiles to fill it. */
.v1-gallery{position:relative;display:grid;grid-template-columns:1.55fr 1fr 1fr;grid-template-rows:calc((min(43.7vw,520px) - 8px)/2) calc((min(43.7vw,520px) - 8px)/2);gap:8px;border-radius:12px;overflow:hidden;height:min(43.7vw,520px);padding:0}
.v1-tile{margin:0;padding:0;overflow:hidden;position:relative;cursor:pointer;background:#ece7dd;border-radius:12px;min-height:0}
.v1-tile.primary{grid-row:1/span 2;grid-column:1}
.v1-tile picture{display:block;width:100%;height:100%}
.v1-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.v1-tile:hover img{transform:scale(1.04)}
.v1-tile:focus-visible{outline-offset:-3px}
.v1-show-all{position:absolute;right:16px;bottom:16px;background:#fff;color:#1f2937;border:1px solid #d8d2c6;border-radius:999px;height:40px;padding:0 16px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.v1-show-all:hover{background:#f6f3ec}
.v1-show-all .grid-ico{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:14px;height:14px}
.v1-show-all .grid-ico i{background:#1f2937;border-radius:1px}

/* ---- CAROUSEL (tablet + mobile) ---- */
.v1-carousel{display:none;position:relative;width:100%;aspect-ratio:16/10;background:#ece7dd;border-radius:12px;overflow:hidden;padding:0}
.v1-carousel.tall{aspect-ratio:3/4;max-height:min(80vh,420px)}
.v1-car-track{position:absolute;inset:0}
.v1-car-img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.v1-car-nav{appearance:none;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;background:rgba(20,20,20,.55);border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.v1-car-nav:hover{background:rgba(20,20,20,.72)}
.v1-car-prev{left:10px}
.v1-car-next{right:10px}
.v1-car-counter{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px}
.v1-car-expand{appearance:none;position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:999px;background:rgba(20,20,20,.6);border:none;color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.v1-car-expand:hover{background:rgba(20,20,20,.78)}
.v1-car-expand .ic-zoom-out{display:none}
.v1-car-expand[aria-pressed="true"] .ic-zoom-in{display:none}
.v1-car-expand[aria-pressed="true"] .ic-zoom-out{display:inline}

/* ---- TITLE ROW ---- */
.v1-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:20px 0 4px}
.v1-listing-title{font-family:ui-serif,"Iowan Old Style",Georgia,serif;font-size:30px;line-height:1.2;font-weight:700;color:#0A3540;margin:0;max-width:760px}
.v1-breadcrumb{color:#4B5563;font-size:15px;margin:6px 0 0}
.v1-breadcrumb .dot{color:#B88654;padding:0 6px}
.v1-title-actions{display:flex;gap:10px;flex-shrink:0}
.v1-icon-btn{appearance:none;background:#fff;border:1px solid #E5E0D5;border-radius:999px;height:44px;padding:0 16px;font-size:14px;font-weight:600;color:#1f2937;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.v1-icon-btn:hover{background:#f6f3ec}
.v1-icon-btn[aria-pressed="true"]{color:#B88654;border-color:#D4A574}

/* ---- TWO-COLUMN DETAIL ---- */
.v1-detail{display:grid;grid-template-columns:1fr 360px;gap:48px;margin-top:16px;align-items:start}.v1-detail section{padding:0}
.v1-detail h2{font-family:ui-serif,"Iowan Old Style",Georgia,serif;font-size:22px;color:#0A3540;margin:0 0 14px}
.v1-about-body{color:#374151;font-size:16px;line-height:1.7;max-width:640px;margin:0 0 26px}
.v1-facts{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid #E5E0D5;display:flex;flex-wrap:wrap;gap:10px 24px}
.v1-facts li{color:#1f2937;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:9px}
.v1-facts li::before{content:"";width:7px;height:7px;border-radius:999px;background:#D4A574;flex-shrink:0}

/* ---- STICKY ENQUIRY CARD ---- */
.v1-enquiry-card{position:sticky;top:24px;background:#fff;border:1px solid #E5E0D5;border-radius:12px;box-shadow:0 8px 28px rgba(10,53,64,.08);padding:22px}
.v1-enquiry-card .ec-heading{font-size:21px;font-weight:700;color:#0A3540;font-family:ui-serif,"Iowan Old Style",Georgia,serif;margin:0;line-height:1.25}
.v1-enquiry-card .ec-trust{display:inline-flex;align-items:center;gap:7px;color:#0E6E37;font-size:14px;font-weight:600;margin:8px 0 0}
.v1-enquiry-card .ec-trust .dot-live{width:8px;height:8px;border-radius:999px;background:#107C3E;flex-shrink:0;animation:dot-pulse 2.4s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,124,62,.55)}60%{box-shadow:0 0 0 5px rgba(16,124,62,0)}}
.v1-enquiry-card .ec-facts{list-style:none;margin:16px 0;padding:16px 0;border-top:1px solid #E5E0D5;border-bottom:1px solid #E5E0D5;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:#374151}
.v1-enquiry-card .ec-facts li{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.v1-enquiry-card .ec-facts li+li::before{content:"·";color:#B88654;margin-right:7px;font-weight:700}
.v1-enquiry-card .btn-wa{appearance:none;width:100%;justify-content:center;margin-top:16px;background:#107C3E;color:#fff;border:none;border-radius:999px;height:44px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.v1-enquiry-card .btn-wa:hover{background:#0E6E37}
.v1-btn-secondary{appearance:none;width:100%;background:#fff;color:#0F4C5C;border:1px solid #0F4C5C;border-radius:999px;height:44px;font-size:15px;font-weight:600;cursor:pointer;margin-top:10px}
.v1-btn-secondary:hover{background:#f0f6f7}

/* ---- MOBILE / TABLET STICKY BOTTOM BAR ---- */
.v1-mobile-bar{display:none;position:sticky;bottom:0;background:#fff;border-top:1px solid #E5E0D5;box-shadow:0 -4px 18px rgba(10,53,64,.08);padding:12px 16px;align-items:center;gap:12px;z-index:50}
.v1-mobile-bar .mb-value{font-weight:700;color:#0A3540;font-size:15px;line-height:1.2}
.v1-mobile-bar .mb-value small{font-weight:500;color:#0E6E37;font-size:12px;display:block;margin-top:2px}
.v1-mobile-bar .btn-wa{margin-left:auto;appearance:none;background:#107C3E;color:#fff;border:none;border-radius:999px;padding:0 20px;height:44px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.v1-mobile-bar .btn-wa:hover{background:#0E6E37}

/* ---- STAGE 2 — white masonry overlay ---- */
.v1-overlay{position:fixed;inset:0;background:#fff;z-index:9500;display:none;flex-direction:column}
.v1-overlay.open{display:flex}
.v1-overlay-top{height:64px;flex-shrink:0;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid #eee;background:#fff;position:sticky;top:0}
.v1-overlay-back{appearance:none;background:#fff;border:1px solid #E5E0D5;border-radius:999px;width:44px;height:44px;font-size:20px;cursor:pointer;color:#1f2937;display:inline-flex;align-items:center;justify-content:center}
.v1-overlay-back:hover{background:#f6f3ec}
.v1-overlay-title{margin-left:16px;font-size:15px;font-weight:600;color:#374151}
.v1-overlay-grid{flex:1;overflow-y:auto;padding:22px clamp(16px,8vw,140px) 80px}
.v1-masonry{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:920px;margin:0 auto}
.v1-masonry figure{margin:0;cursor:pointer;overflow:hidden;border-radius:10px;background:#ece7dd}
.v1-masonry figure.span2{grid-column:1/-1}
.v1-masonry img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
.v1-masonry figure.span2 img{aspect-ratio:16/9}
.v1-masonry figure:focus-visible{outline-offset:-3px}

/* ---- STAGE 3 — lightbox ---- */
/* height pinned to the dynamic viewport (100dvh) so the stage shrinks/grows
 * with the mobile browser's toolbar instead of extending under it — otherwise
 * inset:0 resolves to the LARGE viewport and the image's bottom is cut off when
 * the toolbar is showing (landscape especially). 100vh is the fallback. */
.v1-lightbox{position:fixed;inset:0;height:100vh;height:100dvh;background:#0b0b0b;z-index:9700;display:none;flex-direction:column}
.v1-lightbox.open{display:flex}
.v1-lb-top{height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;padding:0 18px}
.v1-lb-close{appearance:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;width:44px;height:44px;font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.v1-lb-close:hover{background:rgba(255,255,255,.18)}
/* Vertical padding is symmetric (top == bottom) so the image's centre lines up
 * with the stage's geometric centre — which is where the prev/next nav buttons
 * sit (top:50%). Asymmetric padding pushed the buttons below the image. */
.v1-lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:50px 70px;overflow:hidden}
.v1-lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.v1-lb-nav{position:absolute;top:50%;transform:translateY(-50%);appearance:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);color:#fff;width:48px;height:48px;border-radius:999px;font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.v1-lb-nav:hover{background:rgba(255,255,255,.2)}
.v1-lb-prev{left:18px}
.v1-lb-next{right:18px}
.v1-lb-counter{position:absolute;left:24px;bottom:22px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px}

/* ---- RESPONSIVE (mock keyed .vp-frame; live uses real media queries) ---- */
@media(max-width:900px){
  .v1-nav-links,.v1-nav-right{display:none}
  .v1-nav-compact{display:flex}
  .v1-nav-inner{padding:0 22px}
  .v1-page{padding-left:22px;padding-right:22px}
  .v1-gallery{display:none}
  .v1-carousel{display:block}
  .v1-detail{grid-template-columns:1fr;gap:28px}
  .v1-detail>aside{display:none}
  .v1-mobile-bar{display:flex}
  .v1-listing-title{font-size:26px}
}
@media(max-width:430px){
  .v1-nav-inner{padding:0 16px;gap:12px}
  .v1-brand-text{display:none}
  .v1-page{padding:16px 16px 24px}
  .v1-detail{gap:24px}
  .v1-listing-title{font-size:23px}
  .v1-title-row{flex-direction:column;gap:12px}
  .v1-masonry{grid-template-columns:1fr}
  .v1-lb-stage{padding:46px 56px}
}

/* ---- Landscape / short-height lightbox: width tests miss wide-but-short
   screens, so the chrome padding ate the viewport. Shrink the chrome by
   height so image + close/prev/next/counter all stay on-screen. ---- */
@media(max-height:500px){
  .v1-lb-top{height:44px}
  .v1-lb-stage{padding:32px 56px}
  .v1-lb-nav{width:40px;height:40px}
  .v1-lb-prev{left:10px}
  .v1-lb-next{right:10px}
  .v1-lb-counter{bottom:8px}
}

/* Sections */
section{padding:88px 0}
section.tight{padding:32px 0}
@media(max-width:767px){section{padding:56px 0}.section-sub{margin:0 0 32px}
  /* `.tight` (used by the quickfacts strip directly under the hero) was
     producing 32+32 above and 32+56 below on mobile, making the strip feel
     glued to the hero. Slight asymmetry restores rhythm. */
  section.tight{padding:40px 0 32px}}
.section-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#B88654;margin-bottom:14px}
.section-title{font-family:ui-serif,Georgia,serif;font-size:clamp(28px,3.6vw,40px);font-weight:500;line-height:1.15;letter-spacing:-.005em;margin:0 0 16px;max-width:720px}
.section-sub{color:#4B5563;max-width:640px;font-size:16px;margin:0 0 48px;line-height:1.6}

/* Quick facts */
.quickfacts{background:#fff;border-top:1px solid #E5E0D5;border-bottom:1px solid #E5E0D5}
.qf-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* Mobile 2-col can orphan an item on the last row. Rather than depend on an
   exact item count (the old `order:5` hack only worked for exactly 5 items),
   span the first item (Rating — highest signal, first in HTML order) across
   both columns so it reads as a full-width standalone row regardless of count.
   Desktop 5-col keeps source order. */
@media(max-width:767px){.qf-row>.qf-item:first-child{grid-column:1 / -1}}
@media(min-width:768px){.qf-row{grid-template-columns:repeat(5,1fr);gap:24px}}
.qf-item{display:flex;align-items:center;gap:12px}
.qf-icon{width:38px;height:38px;border-radius:8px;background:#F1EFE9;display:grid;place-items:center;color:#0F4C5C;flex-shrink:0;font-size:18px}
.qf-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#6B7280;line-height:1.2}
.qf-value{font-weight:600;color:#1F2937;font-size:14px;line-height:1.3}

/* Story */
.story-grid{display:grid;gap:48px}
@media(min-width:900px){.story-grid{grid-template-columns:1fr 1fr;gap:80px;align-items:center}}
.story-img{aspect-ratio:4/5;border-radius:8px;box-shadow:0 8px 24px rgba(15,76,92,.08),0 2px 6px rgba(15,76,92,.05);width:100%;height:auto;display:block;object-fit:cover;object-position:center}
.story-text p{color:#4B5563;font-size:17px;line-height:1.7;margin:0 0 18px}
.story-text p:first-of-type::first-letter{font-family:ui-serif,Georgia,serif;font-size:54px;float:left;line-height:.9;padding:6px 12px 0 0;color:#0F4C5C}
/* Below ~480px the 54px drop-cap eats ~30% of the first line and forces a
   single-word orphan ("This") on line 1 of the story. Scale it down. */
@media(max-width:480px){.story-text p:first-of-type::first-letter{font-size:42px;padding:4px 10px 0 0}}
.story-quote{margin-top:32px;padding-left:20px;border-left:3px solid #D4A574;font-family:ui-serif,Georgia,serif;font-size:19px;font-style:italic;color:#0A3540}
.story-quote-cite{display:block;font-family:ui-sans-serif,system-ui,sans-serif;font-style:normal;font-size:13px;color:#6B7280;margin-top:8px;letter-spacing:.04em}

/* Gallery */
.gallery{background:#F1EFE9}
.gallery-grid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
@media(min-width:768px){.gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}.gallery-grid>a:nth-child(1){grid-column:span 2;grid-row:span 2}.gallery-grid>a:nth-child(6){grid-column:span 2}}
.gallery-grid>a{display:block;border-radius:8px;overflow:hidden;position:relative;transition:transform .25s ease;box-shadow:0 1px 2px rgba(15,76,92,.06),0 1px 1px rgba(15,76,92,.04)}
/* <picture> wraps the <img> for WebP/JPEG fallback, so both the wrapper and the
   img must fill the grid cell (the old direct-child `a>img` rule no longer
   matched through the <picture>). */
.gallery-grid>a>picture{display:block;width:100%;height:100%}
.gallery-grid>a img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.gallery-grid>a:hover{transform:scale(1.015)}
.gallery-cta{display:flex;justify-content:center;margin-top:36px}

/* Full gallery page */
.gallery-page-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.gallery-page-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1100px){.gallery-page-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-page-grid figure{margin:0;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(15,76,92,.06),0 1px 1px rgba(15,76,92,.04)}
.gallery-page-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .35s ease}
.gallery-page-grid figure:hover img{transform:scale(1.03)}
.gallery-page-grid figcaption{padding:10px 14px;font-size:13px;color:#6B7280}

/* Amenities */
.amenities-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.amenities-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.amenity{display:flex;align-items:center;gap:12px;padding:18px;background:#fff;border:1px solid #E5E0D5;border-radius:8px;transition:all .15s ease}
/* 18px padding × 2-col on a 342px content column squeezes long labels
   ("Smart TV · Netflix ready") into 3 lines on iPhone SE. Trim it. */
@media(max-width:480px){.amenity{padding:14px;gap:10px}}
.amenity:hover{border-color:#D4A574;transform:translateY(-1px);box-shadow:0 1px 2px rgba(15,76,92,.06),0 1px 1px rgba(15,76,92,.04)}
.amenity-icon{width:24px;height:24px;color:#0F4C5C;flex-shrink:0}
.amenity-label{font-size:14px;font-weight:500;line-height:1.3}

/* Location */
.location-grid{display:grid;gap:32px}
@media(min-width:900px){.location-grid{grid-template-columns:1fr 1.4fr;align-items:stretch}}
.location-pills{display:flex;flex-direction:column;gap:10px}
.pill{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:#fff;border:1px solid #E5E0D5;border-radius:8px;transition:all .15s ease}
.pill[data-loc]{cursor:pointer}
.pill:hover{border-color:#D4A574;box-shadow:0 1px 2px rgba(15,76,92,.06),0 1px 1px rgba(15,76,92,.04)}
/* Column-flex so the tag (".pill-tag") stacks under the place name and
   left-aligns to it. Previous rule used row-flex with `gap:12px`, which
   put the tag inline; the `.pill-tag {display:block;margin-top:2px}`
   rule was dead in that context. */
.pill-place{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-weight:500;min-width:0}
.pill-tag{font-size:11px;color:#6B7280;text-transform:uppercase;letter-spacing:.08em;font-weight:400}
.pill-time{color:#B88654;font-weight:600;font-size:14px;white-space:nowrap}
.map-canvas{aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid #E5E0D5;box-shadow:0 1px 2px rgba(15,76,92,.06),0 1px 1px rgba(15,76,92,.04);min-height:300px}
/* Reserve a fallback height on mobile so a failed/slow MapLibre load doesn't
   collapse the canvas to ~0px. aspect-ratio still governs the sizing when the
   map renders; min-height only acts as a floor. */
@media(max-width:600px){.map-canvas{aspect-ratio:auto;min-height:360px}}
/* MapLibre SVG drop-pins */
.map-pin{display:block;cursor:pointer;transition:transform .15s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.map-pin svg{display:block}
.map-pin:hover{transform:scale(1.15)}
.map-pin--property{width:36px;height:36px;color:#EA4335}
.map-pin--location{width:24px;height:24px;color:#4285F4}
/* MapLibre popup content */
.map-popup-name{display:block;font-weight:600;font-size:13px;color:#1F2937;margin-bottom:2px}
.map-popup-sub{font-size:12px;color:#6B7280;margin:0}
/* Property popup */
.map-popup--property .map-popup-name{font-size:14px}
.map-popup--property .map-popup-sub{font-size:12px}
.map-popup--property .map-popup-link{text-align:center}
.map-popup-img{display:block;width:200px;height:110px;object-fit:cover;border-radius:4px;margin-bottom:8px}
.map-popup-link{display:block;margin-top:8px;font-size:12px;color:#B88654;text-decoration:none;font-weight:500}
.map-popup-link:hover{text-decoration:underline}
/* "Show property location" reset control */
.map-reset-link{background:none;border:none;padding:0;font:inherit;color:#B88654;text-decoration:underline;cursor:pointer}
.map-reset-link:hover{color:#1F2937}

/* Reviews */
.reviews{background:#F1EFE9}
.review-summary{display:grid;gap:16px;align-items:center;padding:28px;background:#fff;border-radius:8px;margin-bottom:32px;box-shadow:0 1px 2px rgba(15,76,92,.06),0 1px 1px rgba(15,76,92,.04)}
@media(min-width:600px){.review-summary{grid-template-columns:auto 1fr auto}}
.rating-big{font-size:54px;font-weight:600;color:#0F4C5C;font-family:ui-serif,Georgia,serif;line-height:1}
.rating-stars{color:#B88654;font-size:18px;letter-spacing:3px;margin-bottom:4px}
.rating-meta{color:#6B7280;font-size:14px}
.review-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:768px){.review-grid{grid-template-columns:repeat(3,1fr)}}
.review-card{background:#fff;padding:24px;border-radius:8px;border:1px solid #E5E0D5}
.review-stars{color:#B88654;font-size:13px;margin-bottom:12px;letter-spacing:2px}
.review-text{color:#4B5563;font-size:15px;margin:0 0 18px;line-height:1.6}
.review-author{font-size:13px;color:#6B7280;display:flex;align-items:center;gap:8px}
.review-author strong{color:#1F2937;font-weight:600}

/* FAQ */
.faq-list{max-width:780px;margin:32px auto 0}
details{border-bottom:1px solid #E5E0D5;padding:20px 0}
details:first-child{border-top:1px solid #E5E0D5}
summary{list-style:none;cursor:pointer;font-weight:500;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;font-weight:300;color:#B88654;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:#4B5563;margin:14px 0 0;font-size:15px;line-height:1.65}

/* CTA strip */
.cta-strip{background:#0F4C5C;color:#fff;background-image:linear-gradient(135deg,#0F4C5C 0%,#0A3540 100%)}
.cta-strip-inner{display:grid;gap:24px}
@media(min-width:768px){.cta-strip-inner{grid-template-columns:1.5fr 1fr;align-items:center}}
.cta-strip h2{font-family:ui-serif,Georgia,serif;font-size:clamp(26px,3.2vw,36px);margin:0 0 14px;font-weight:500;line-height:1.15}
.cta-strip p{opacity:.85;margin:0;font-size:16px}
.cta-strip-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-strip .btn-hero-ghost{color:#fff;border-color:rgba(255,255,255,.4)}

/* Footer */
.site-footer{padding:56px 0 32px;background:#fff;border-top:1px solid #E5E0D5}
.foot-grid{display:grid;gap:36px}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-brand-text{color:#4B5563;font-size:14px;margin-top:14px;max-width:320px;line-height:1.6}
.foot-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#6B7280;margin:0 0 14px;font-weight:600}
.foot-col a{display:block;color:#4B5563;font-size:14px;padding:5px 0}
.foot-col a:hover{color:#0F4C5C}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid #E5E0D5;font-size:13px;color:#6B7280;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* Decorative thin separator */
.sep{height:1px;background:linear-gradient(90deg,transparent,#E5E0D5 30%,#E5E0D5 70%,transparent);margin:0}

/* Accessibility */
:focus-visible{outline:3px solid #D4A574;outline-offset:2px;border-radius:3px}

/* Touch-press feedback — hover-only affordances are invisible on touch. */
.gallery-grid>a:active{transform:scale(.985)}
.amenity:active{transform:translateY(0);background:#F1EFE9}
.pill:active{transform:translateY(0);background:#F1EFE9}
.card:active{transform:translateY(0)}

/* Utility classes — used by templates that previously relied on inline style="…",
   which is no longer allowed under our strict CSP (no 'unsafe-inline'). */
.btn-block{width:100%;justify-content:center}
.related-on-page{background:#FAFAF7}
.gallery-page{padding-top:48px}
.blog-card-excerpt{font-size:14px;color:#4B5563;margin:0 0 10px;line-height:1.55}
.blog-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:48px;font-size:14px;color:#6B7280}
.blog-empty{color:#4B5563;font-size:17px}

/* Honor user motion preference. Disables transitions and the global smooth-scroll. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   Blog post (T057) — extracted from docs/feedback/v1/blog-post.html.
   De-duped against landing styles above; only adds new classes.
   ============================================================ */

/* Reading progress bar (sticky under nav) */
.progress{position:sticky;top:64px;height:3px;background:transparent;z-index:45}
.progress-bar{height:100%;width:0;background:#D4A574;transition:width .15s}

/* Article header */
.article-header{padding:64px 0 32px;background:#FAFAF7}
.breadcrumb{font-size:13px;color:#6B7280;margin-bottom:24px}
.breadcrumb a{color:#6B7280}
.breadcrumb a:hover{color:#0F4C5C}
.article-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B88654;margin-bottom:16px}
.article-title{font-family:ui-serif,Georgia,serif;font-size:clamp(32px,5vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:0 0 24px;max-width:880px}
.article-deck{font-size:clamp(17px,2vw,21px);color:#4B5563;max-width:740px;margin:0 0 32px;line-height:1.55}
.article-meta{display:flex;align-items:center;gap:16px;font-size:14px;color:#6B7280;flex-wrap:wrap}
.article-meta-author{display:flex;align-items:center;gap:10px}
.article-meta strong{color:#1F2937;font-weight:600}
.article-meta-sep{width:3px;height:3px;background:#6B7280;border-radius:50%}
.author-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#D4A574,#B88654);display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px}

.article-hero{aspect-ratio:21/9;border-radius:8px;box-shadow:0 8px 24px rgba(15,76,92,.08),0 2px 6px rgba(15,76,92,.05);margin:0;overflow:hidden}
.article-hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.article-hero-cap{font-size:13px;color:#6B7280;margin-top:12px;text-align:center;font-style:italic}

/* Article body grid */
.article-body{padding:48px 0 88px}
.article-grid{display:grid;gap:48px}
/* RHS aside-cta removed — the awkward 220-1fr-220 sandwich made the prose
   column too narrow on 1100px laptops. TOC stays on the left; the prose
   takes the remaining width. */
@media(min-width:1000px){.article-grid{grid-template-columns:220px minmax(0,1fr)}}

/* Sticky TOC */
.toc{display:none}
@media(min-width:1000px){.toc{display:block;position:sticky;top:96px;align-self:start;font-size:13px;max-height:calc(100vh - 120px);overflow-y:auto}}
.toc-title{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#6B7280;margin-bottom:14px;font-weight:600}
.toc ul,.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid #E5E0D5}
.toc li a{display:block;padding:8px 14px;color:#4B5563;border-left:2px solid transparent;margin-left:-1px;line-height:1.4;transition:all .15s ease}
/* H3 entries indent under their parent H2 so the reader can see the
   page's outline. */
.toc li.toc-l3 a{padding-left:28px;font-size:12px}
.toc li a:hover{color:#0F4C5C}
.toc li a.active{color:#0F4C5C;border-left-color:#D4A574;font-weight:500}

/* Sticky aside CTA card */
.aside-cta{display:none}
@media(min-width:1000px){.aside-cta{display:block;position:sticky;top:96px;align-self:start}}
.aside-card{background:#fff;border:1px solid #E5E0D5;border-radius:8px;padding:20px;box-shadow:0 1px 2px rgba(15,76,92,.06),0 1px 1px rgba(15,76,92,.04)}
.aside-img{aspect-ratio:4/3;background-position:center;background-size:cover;background-repeat:no-repeat;border-radius:6px;margin-bottom:16px}
.aside-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#B88654;font-weight:600;margin-bottom:6px}
.aside-title{font-family:ui-serif,Georgia,serif;font-size:18px;font-weight:500;line-height:1.25;margin:0 0 8px;color:#1F2937}
.aside-meta{font-size:12px;color:#6B7280;margin-bottom:14px}

/* Prose */
.prose{font-size:18px;line-height:1.75;color:#1F2937;max-width:720px;margin:0 auto}
.prose>*+*{margin-top:1.4em}
.prose p:first-child{font-size:20px;color:#1F2937}
.prose p:first-child::first-letter{font-family:ui-serif,Georgia,serif;font-size:64px;float:left;line-height:.85;padding:8px 14px 0 0;color:#0F4C5C;font-weight:500}
.prose h2{font-family:ui-serif,Georgia,serif;font-size:30px;font-weight:500;line-height:1.2;letter-spacing:-.005em;margin:2em 0 .6em;color:#0A3540;scroll-margin-top:80px}
.prose h3{font-family:ui-serif,Georgia,serif;font-size:22px;font-weight:500;margin:1.6em 0 .4em;color:#1F2937}
.prose h2 strong,.prose h3 strong{font-weight:inherit}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.4em 0}
.prose blockquote{margin:1.6em 0;padding:18px 24px;border-left:3px solid #D4A574;background:#F1EFE9;font-family:ui-serif,Georgia,serif;font-style:italic;font-size:19px;color:#0A3540;border-radius:0 8px 8px 0}
.prose blockquote p{margin:0}
.prose figure{margin:2em 0}
.prose figcaption{font-size:14px;color:#6B7280;margin-top:10px;text-align:center;font-style:italic}
.prose hr{border:none;height:1px;background:#E5E0D5;margin:3em 0}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid #E5E0D5}
.prose th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6B7280;font-weight:600;background:#F1EFE9}
.prose td{color:#4B5563}
.prose td:first-child{color:#1F2937;font-weight:500}

.callout{margin:2em 0;padding:24px;background:linear-gradient(135deg,#FFF8EE 0%,#FAF1DD 100%);border:1px solid #E8D6B5;border-radius:8px}
.callout-label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#B88654;font-weight:600;margin-bottom:8px}
.callout-title{font-family:ui-serif,Georgia,serif;font-size:18px;margin:0 0 8px;color:#0A3540;font-weight:500}
.callout p{margin:0;font-size:16px;color:#4B5563}

/* Author card + share bar (post footer) */
.author-card{margin-top:48px;padding:28px;background:#fff;border:1px solid #E5E0D5;border-radius:8px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.author-card .author-avatar{width:64px;height:64px;font-size:24px}
.author-card-name{font-weight:600;font-size:16px;margin-bottom:4px}
.author-card-bio{font-size:14px;color:#4B5563;line-height:1.55}
.share-bar{display:flex;gap:10px;align-items:center;margin-top:24px;padding-top:24px;border-top:1px solid #E5E0D5;font-size:13px;color:#6B7280;flex-wrap:wrap}
.share-bar a{padding:8px 14px;border:1px solid #E5E0D5;border-radius:8px;color:#4B5563;font-size:13px}
.share-bar a:hover{border-color:#0F4C5C;color:#0F4C5C}

/* Related strip */
.related{padding:80px 0;background:#F1EFE9}
.related-title{font-family:ui-serif,Georgia,serif;font-size:28px;font-weight:500;margin:0 0 32px;color:#0A3540}
.related-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:768px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid #E5E0D5;border-radius:8px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;display:block;color:inherit}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,76,92,.08),0 2px 6px rgba(15,76,92,.05);color:inherit}
.card-img{aspect-ratio:16/10;width:100%;display:block;object-fit:cover;object-position:center}
.card-body{padding:18px}
.card-tag{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#B88654;font-weight:600;margin-bottom:8px}
.card-title{font-family:ui-serif,Georgia,serif;font-size:18px;font-weight:500;line-height:1.3;margin:0 0 8px;color:#1F2937}
.card-meta{font-size:12px;color:#6B7280}

/* Availability calendar */
.availability{background:#FAFAF7}
.cal-widget{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:720px){.cal-widget{grid-template-columns:repeat(2,1fr);gap:32px}}
.cal-month{background:#fff;border:1px solid #e5e2da;border-radius:12px;padding:20px 16px;color:#1a1a1a}
.cal-month-header{display:flex;align-items:center;margin-bottom:16px}
.cal-month-title{font-size:17px;font-weight:600;color:#111;letter-spacing:.01em}
.cal-day-names{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.cal-day-names span{text-align:center;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#9e9890;padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;font-size:14px;font-weight:500;border-radius:6px;color:#2d2d2d;line-height:1}
.cal-cell-num{line-height:1}
.cal-cell-dot{width:5px;height:5px;border-radius:50%;background:#c0392b;flex-shrink:0}
.cal-cell--empty{color:#ccc;font-weight:400}
.cal-cell--today{background:#f1efe9;color:#111;font-weight:700}
.cal-legend{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;color:#9e9890;margin-top:4px}
.cal-legend-dot{width:8px;height:8px;border-radius:50%;background:#c0392b;flex-shrink:0}
.cal-nav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cal-nav-btn{background:none;border:1px solid #e5e2da;border-radius:6px;color:#6b6660;font-size:13px;font-weight:500;padding:6px 14px;cursor:pointer;transition:color .15s,border-color .15s}
.cal-nav-btn:hover:not(:disabled){color:#111;border-color:#bbb}
.cal-nav-btn:disabled{opacity:.3;cursor:default}

/* Lightbox — gallery-lightbox.js. Hidden until JS opens it; no-JS pages
   never see the modal because [hidden] keeps it out of the layout. */
.gallery-page-grid figure{cursor:zoom-in}
.gallery-page-grid figure:focus-visible{outline:3px solid #D4A574;outline-offset:2px}
body.body--lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,8,10,.96);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox-img{max-width:min(96vw,1600px);max-height:88vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox-counter{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#e8e8ea;font-size:13px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.lightbox-close,.lightbox-nav{position:absolute;background:transparent;border:0;color:#fff;cursor:pointer;line-height:1;padding:8px}
.lightbox-close{top:16px;right:20px;font-size:36px}
.lightbox-nav{top:50%;transform:translateY(-50%);font-size:56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.lightbox-prev{left:12px}
.lightbox-next{right:12px}
.lightbox-close:hover,.lightbox-nav:hover{color:#fff;opacity:.85}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
@media(max-width:600px){.lightbox-nav{font-size:44px;width:44px;height:44px}.lightbox-img{max-height:82vh}}