*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f3f0e8;color:#10201c;font-family:Manrope,Inter,system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}.wrap{width:min(calc(100% - 48px),1280px);margin:auto}.eyebrow{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.68}.site-header{position:fixed;inset:0 0 auto;z-index:100;color:#fff;transition:.35s}.site-header.is-scrolled{background:rgba(9,30,25,.93);backdrop-filter:blur(18px);box-shadow:0 1px rgba(255,255,255,.08)}.nav{height:86px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand-mark{width:11px;height:11px;border:1px solid currentColor;border-radius:50%;position:relative}.brand-mark:after{content:'';position:absolute;width:1px;height:22px;background:currentColor;left:4px;top:-6px;transform:rotate(32deg)}.brand-word{font-size:.78rem;letter-spacing:.22em;font-weight:400}.brand-word small{display:block;font-size:.48rem;letter-spacing:.14em;opacity:.55;margin-top:4px}.nav-links{display:flex;align-items:center;gap:25px}.nav-links a{font-size:.68rem;letter-spacing:.06em;opacity:.84}.nav-links a:hover{opacity:1}.lang{position:relative}.lang>button,.menu-btn{border:0;background:none;color:inherit;cursor:pointer;font-size:.66rem;letter-spacing:.1em}.lang-menu{position:absolute;right:0;top:35px;width:185px;padding:9px;background:#f5f2ea;color:#10201c;box-shadow:0 18px 60px rgba(0,0,0,.19);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s}.lang.is-open .lang-menu{opacity:1;visibility:visible;transform:none}.lang-menu a{display:flex;justify-content:space-between;padding:10px 9px;font-size:.7rem}.lang-menu a:hover{background:#e8e4da}.menu-btn{display:none}.mobile-panel{display:none}.hero,.page-hero{position:relative;color:#fff;overflow:hidden;background:#17342f}.hero{min-height:100svh}.hero-media{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(5,22,18,.4),rgba(5,22,18,.06) 65%),var(--hero);background-size:cover;background-position:center;transform:scale(1.02)}.hero:after,.page-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,24,20,.35),transparent 50%);pointer-events:none}.hero-content{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:150px 0 70px}.hero h1,.page-hero h1,.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,.partner-grid h2{font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:200;letter-spacing:-.045em}.hero h1{font-size:clamp(4rem,10vw,9rem);line-height:.86;margin:12px 0 26px;max-width:1050px}.hero .lead{font-size:clamp(1rem,1.45vw,1.25rem);line-height:1.7;max-width:720px;color:rgba(255,255,255,.87)}.hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.67)}.scroll-cue{position:absolute;z-index:3;right:25px;bottom:34px;writing-mode:vertical-rl;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;opacity:.65}.section{padding:112px 0}.section-tight{padding:78px 0}.intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.intro-grid h2{font-size:clamp(2.8rem,5.4vw,5.3rem);line-height:1.02;margin:0}.intro-copy{font-size:clamp(1.12rem,1.8vw,1.45rem);line-height:1.75;margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:78px;border-block:1px solid rgba(16,32,28,.14)}.stat{padding:30px 24px}.stat+.stat{border-left:1px solid rgba(16,32,28,.14)}.stat b{font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:200;font-size:clamp(2rem,3.8vw,3.5rem)}.stat span{display:block;margin-top:8px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.56}.photo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:15px}.photo-card{min-height:620px;position:relative;overflow:hidden;background:#bccbc4}.photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s}.photo-card:hover img{transform:scale(1.035)}.caption{position:absolute;z-index:2;inset:auto 0 0;padding:30px;color:#fff;background:linear-gradient(transparent,rgba(3,20,16,.72))}.caption h3{font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:200;font-size:2.25rem;margin:8px 0 0}.dark{background:#0c2923;color:#f5f3ec}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.story-grid h2{font-size:clamp(2.8rem,5vw,5rem);line-height:1.02}.story-grid p{font-size:1.08rem;line-height:1.85;color:rgba(255,255,255,.74)}.story-image{aspect-ratio:4/5;overflow:hidden}.story-image img{width:100%;height:100%;object-fit:cover}.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;border-radius:999px;padding:11px 16px;font-size:.68rem;letter-spacing:.06em;margin-top:15px}.section-kicker{margin-bottom:23px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.guide-card{min-height:340px;padding:30px;background:#fff;border:1px solid rgba(15,35,29,.07);display:flex;flex-direction:column;transition:.3s}.guide-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(20,38,31,.10)}.guide-card .num{font-family:'Cormorant Garamond','Times New Roman',serif;opacity:.42}.guide-card h3{font-family:'Cormorant Garamond','Times New Roman',serif;font-size:2rem;font-weight:200;line-height:1.08;margin:36px 0 12px}.guide-card p{font-size:.84rem;line-height:1.65;opacity:.64}.guide-card .arrow{margin-top:auto;font-size:1.2rem}.quiet{background:#dfe5dc}.quote{font-family:'Cormorant Garamond','Times New Roman',serif;font-size:clamp(2.8rem,6vw,6rem);line-height:1.04;letter-spacing:-.04em;max-width:1050px}.footer{background:#071d18;color:#f0f3ee;padding:65px 0 30px}.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:72px}.footer h4{font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:200;font-size:1.45rem;margin:0 0 16px}.footer p,.footer a{font-size:.76rem;color:rgba(255,255,255,.66);line-height:1.7}.footer-links{display:grid;gap:8px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:45px;padding-top:22px;display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.06em;color:rgba(255,255,255,.45)}.footer-brand{margin-bottom:18px}.micro{font-size:.62rem!important;text-transform:uppercase;letter-spacing:.09em}.page-hero{min-height:72svh;display:flex;align-items:flex-end}.page-hero .wrap{position:relative;z-index:2;padding:160px 0 58px}.page-hero h1{font-size:clamp(3.2rem,7.5vw,7rem);line-height:.95;margin:12px 0 20px;max-width:1080px}.page-hero .lead{font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.7;max-width:810px;color:rgba(255,255,255,.86)}.breadcrumbs{display:flex;gap:9px;font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;opacity:.62;margin-bottom:25px}.page-section{padding:100px 0}.article-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);gap:85px;align-items:start}.prose h2,.article-narrow h2{font-size:clamp(2.7rem,5vw,5rem);line-height:1.04;margin:12px 0 32px}.prose p,.article-narrow p{font-size:1.08rem;line-height:1.9;margin:0 0 25px}.prose>p:first-of-type{font-size:1.26rem}.side-index,.fact-box{position:sticky;top:112px;border-top:1px solid rgba(16,32,28,.16)}.side-index a{display:block;padding:18px 0;border-bottom:1px solid rgba(16,32,28,.13);font-size:.78rem}.fact-row{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid rgba(16,32,28,.13);font-size:.75rem}.fact-row span{opacity:.54}.fact-row strong{text-align:right;font-weight:500}.fact-link{margin-top:24px}.official-box{margin-top:34px;background:#fff;padding:25px;border:1px solid rgba(16,32,28,.08)}.official-box p{font-size:.83rem!important;line-height:1.65;margin:11px 0!important}.official-box a{font-size:.72rem;border-bottom:1px solid currentColor}.wide-image{height:min(68vw,760px);overflow:hidden}.wide-image img{width:100%;height:100%;object-fit:cover}.mini-facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid rgba(16,32,28,.14);margin:40px 0}.mini-facts div{padding:18px 16px 18px 0}.mini-facts div+div{border-left:1px solid rgba(16,32,28,.14);padding-left:16px}.mini-facts span,.mini-facts strong{display:block}.mini-facts span{font-size:.61rem;letter-spacing:.09em;text-transform:uppercase;opacity:.5}.mini-facts strong{margin-top:5px;font-weight:500;font-size:.8rem}.article-narrow{max-width:850px}.article-narrow h3{font-family:'Cormorant Garamond','Times New Roman',serif;font-size:2rem;font-weight:200;margin-top:52px}.source-list{padding:0;list-style:none;border-top:1px solid rgba(16,32,28,.14)}.source-list li{padding:14px 0;border-bottom:1px solid rgba(16,32,28,.14);font-size:.78rem}.source-list a{border-bottom:1px solid currentColor}.related{background:#e5e1d8}.partner-band{padding:70px 0;background:#cbd7cc}.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.partner-grid h2{font-size:clamp(2.5rem,4.8vw,4.6rem);margin:10px 0}.partner-grid p{font-size:1.02rem;line-height:1.8}.faq{background:#f8f6f0}.faq-grid{margin-top:25px;border-top:1px solid rgba(16,32,28,.14)}details{border-bottom:1px solid rgba(16,32,28,.14);padding:18px 0}summary{cursor:pointer;font-family:'Cormorant Garamond','Times New Roman',serif;font-size:1.4rem;font-weight:300;list-style:none}summary::-webkit-details-marker{display:none}details p{max-width:800px;line-height:1.7;opacity:.7}.table-wrap{overflow-x:auto;margin:34px 0}.price-table{width:100%;border-collapse:collapse;background:#fff}.price-table th,.price-table td{padding:15px 13px;border-bottom:1px solid rgba(16,32,28,.12);font-size:.77rem;text-align:left;white-space:nowrap}.price-table th:not(:first-child),.price-table td:not(:first-child){text-align:right}.principles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(16,32,28,.12);margin:35px 0}.principles>div{background:#f3f0e8;padding:22px}.principles span{font-family:'Cormorant Garamond','Times New Roman',serif;opacity:.42}.principles p{font-size:.86rem!important;margin:12px 0 0!important}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.section-head h2{font-size:clamp(2.7rem,5vw,5rem);margin:10px 0 0}.map-home{background:#dce3db}.interactive-map{border:1px solid rgba(16,32,28,.15);background:#f7f4ec}.map-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-bottom:1px solid rgba(16,32,28,.12)}.map-filter{border:1px solid rgba(16,32,28,.2);background:transparent;border-radius:99px;padding:8px 12px;font-size:.66rem;cursor:pointer}.map-filter.active{background:#102720;color:#fff}.map-stage{height:650px;position:relative;overflow:hidden;background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.8),transparent 30%),#dce7e6}.map-shape{position:absolute;height:91%;width:auto;left:50%;top:4.5%;transform:translateX(-50%);filter:drop-shadow(0 15px 22px rgba(22,43,36,.10))}.map-shape path{fill:#d1d7c4;stroke:#1b3b32;stroke-width:1.5}.map-shape .map-coastline{fill:none;stroke:#779183;stroke-width:4;opacity:.35}.map-water-label{position:absolute;right:6%;bottom:8%;font-family:'Cormorant Garamond','Times New Roman',serif;font-size:3rem;letter-spacing:.14em;color:#48665e;opacity:.14}.map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;background:none;cursor:pointer;z-index:3;padding:0}.map-pin span{width:13px;height:13px;display:block;border-radius:50%;background:#102720;border:3px solid #f5f2ea;box-shadow:0 2px 8px rgba(0,0,0,.25);margin:auto}.map-pin.geology span{background:#986949}.map-pin.sport span{background:#426d7a}.map-pin.landmark span{background:#705d78}.map-pin b{display:block;margin-top:6px;background:rgba(247,244,236,.92);padding:4px 6px;font-size:.57rem;font-weight:600;white-space:nowrap}.map-pin.is-hidden{display:none}.map-info{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 24px;border-top:1px solid rgba(16,32,28,.12)}.map-info h3{font-family:'Cormorant Garamond','Times New Roman',serif;font-size:1.65rem;font-weight:400;margin:4px 0}.map-info p{font-size:.72rem;margin:0;opacity:.6}.map-info .pill{margin:0}.compare-wrap{margin:35px 0}.compare-scroll{overflow-x:auto}.compare-table{width:100%;border-collapse:collapse;background:#fff}.compare-table th,.compare-table td{padding:14px 12px;border-bottom:1px solid rgba(16,32,28,.11);text-align:center;font-size:.7rem;white-space:nowrap}.compare-table th:first-child,.compare-table td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:1}.score{letter-spacing:2px}.score i{font-style:normal;opacity:.18}.source-note{font-size:.67rem!important;opacity:.6;margin-top:12px!important}.reveal{opacity:0;transform:translateY(15px);transition:.7s}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:980px){.nav-links{display:none}.menu-btn{display:block}.menu-btn span{display:none}.mobile-panel{position:fixed;inset:0;z-index:130;background:#071d18;color:#fff;padding:22px;flex-direction:column}.mobile-panel.is-open{display:flex}.mobile-top{display:flex;align-items:center;justify-content:space-between}.mobile-links{display:grid;gap:10px;margin:auto 0}.mobile-links a{font-family:'Cormorant Garamond','Times New Roman',serif;font-size:2.6rem}.mobile-langs{display:flex;flex-wrap:wrap;gap:16px;border-top:1px solid rgba(255,255,255,.15);padding-top:18px}.intro-grid,.story-grid,.article-grid,.partner-grid{grid-template-columns:1fr;gap:42px}.stats{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0;border-top:1px solid rgba(16,32,28,.14)}.stat:nth-child(4){border-top:1px solid rgba(16,32,28,.14)}.cards{grid-template-columns:1fr 1fr}.side-index,.fact-box{position:static}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.map-stage{height:560px}}
@media(max-width:680px){.wrap{width:min(calc(100% - 30px),1280px)}.nav{height:67px}.brand-word{font-size:.68rem}.brand-word small{display:none}.hero h1{font-size:clamp(3.55rem,18vw,5.6rem)}.hero-content{padding:120px 0 42px}.scroll-cue{display:none}.section{padding:72px 0}.section-tight{padding:52px 0}.photo-grid{grid-template-columns:1fr}.photo-card{min-height:430px}.story-grid{gap:32px}.cards{grid-template-columns:1fr}.guide-card{min-height:280px}.page-hero{min-height:67svh}.page-hero .wrap{padding:122px 0 44px}.page-hero h1{font-size:clamp(3rem,14vw,5.3rem)}.page-section{padding:70px 0}.prose p,.article-narrow p{font-size:1rem}.prose>p:first-of-type{font-size:1.12rem}.mini-facts{grid-template-columns:1fr}.mini-facts div+div{border-left:0;border-top:1px solid rgba(16,32,28,.14);padding-left:0}.wide-image{height:65svh}.footer-grid{grid-template-columns:1fr;gap:34px}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{flex-direction:column;gap:8px}.section-head{align-items:flex-start;flex-direction:column}.map-stage{height:520px}.map-pin b{display:none}.map-info{align-items:flex-start;flex-direction:column}.map-info .pill{width:100%;justify-content:center}.principles{grid-template-columns:1fr}.partner-grid{gap:25px}.quote{font-size:clamp(2.6rem,13vw,4.4rem)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.photo-card img{transition:none}}
/* 2026 visual refinement pass */
.hero-media.hero-coast{--hero:image-set(url('/assets/img/coast-1600.avif') type('image/avif'),url('/assets/img/coast-1600.webp') type('image/webp'));--hero-mobile:image-set(url('/assets/img/coast-mobile-960.avif') type('image/avif'),url('/assets/img/coast-mobile-960.webp') type('image/webp'))}
.hero-media.hero-cove{--hero:image-set(url('/assets/img/cove-1600.avif') type('image/avif'),url('/assets/img/cove-1600.webp') type('image/webp'));--hero-mobile:image-set(url('/assets/img/cove-mobile-960.avif') type('image/avif'),url('/assets/img/cove-mobile-960.webp') type('image/webp'))}
.hero-media.hero-sunset{--hero:image-set(url('/assets/img/sunset-1600.avif') type('image/avif'),url('/assets/img/sunset-1600.webp') type('image/webp'));--hero-mobile:image-set(url('/assets/img/sunset-mobile-960.avif') type('image/avif'),url('/assets/img/sunset-mobile-960.webp') type('image/webp'))}
.hero-media.hero-cliff{--hero:image-set(url('/assets/img/cliff-1536.avif') type('image/avif'),url('/assets/img/cliff-1536.webp') type('image/webp'));--hero-mobile:image-set(url('/assets/img/cliff-mobile-960.avif') type('image/avif'),url('/assets/img/cliff-mobile-960.webp') type('image/webp'))}
.hero-media{background-image:linear-gradient(90deg,rgba(5,22,18,.46),rgba(5,22,18,.08) 68%),var(--hero);background-position:center;background-size:cover}
.page-hero .hero-media{filter:saturate(.96) contrast(1.02)}
.hero h1,.page-hero h1{font-weight:200;text-wrap:balance}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,.partner-grid h2,.quote{font-weight:200}
.hero .lead,.page-hero .lead{font-weight:300}
/* photographic cards */
.guide-card{overflow:hidden}
.guide-card::before{content:'';display:block;height:154px;flex:0 0 auto;margin:-30px -30px 24px;background-size:cover;background-position:center;transition:transform .65s ease,filter .65s ease;filter:saturate(.93)}
.guide-card:nth-child(4n+1)::before{background-image:image-set(url('/assets/img/hidden-bay-1200.avif') type('image/avif'),url('/assets/img/hidden-bay-1200.webp') type('image/webp'))}
.guide-card:nth-child(4n+2)::before{background-image:image-set(url('/assets/img/shore-detail-1200.avif') type('image/avif'),url('/assets/img/shore-detail-1200.webp') type('image/webp'))}
.guide-card:nth-child(4n+3)::before{background-image:image-set(url('/assets/img/blue-horizon-1200.avif') type('image/avif'),url('/assets/img/blue-horizon-1200.webp') type('image/webp'))}
.guide-card:nth-child(4n+4)::before{background-image:image-set(url('/assets/img/golden-coast-1200.avif') type('image/avif'),url('/assets/img/golden-coast-1200.webp') type('image/webp'))}
.guide-card:hover::before{transform:scale(1.025);filter:saturate(1.03)}
.guide-card .num{margin-top:2px}
/* universal visual break added to editorial pages */
.visual-break{padding:0 0 96px;background:#f3f0e8}
.visual-break-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:14px;height:min(56vw,720px)}
.visual-frame,.visual-stack{min-height:0}
.visual-frame{margin:0;overflow:hidden;background:#d7ddd6;position:relative}
.visual-frame picture,.visual-frame img{display:block;width:100%;height:100%}
.visual-frame img{object-fit:cover;transition:transform 1s ease}
.visual-frame:hover img{transform:scale(1.02)}
.visual-stack{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.visual-frame.tone-right img{object-position:70% center}
.visual-frame.tone-left img{object-position:30% center}
/* homepage visual rhythm */
.home-visual-break{padding-top:18px}
/* thinner, more editorial utility typography */
.eyebrow{font-weight:500;letter-spacing:.2em}
.nav-links a,.lang>button,.menu-btn{font-weight:300}
.pill{font-weight:300;letter-spacing:.08em}
.caption h3{font-weight:200}
.map-info h3{font-weight:200}
.map-water-label{font-weight:200}
@media(max-width:680px){
.hero-media{background-image:linear-gradient(0deg,rgba(5,22,18,.42),rgba(5,22,18,.06) 70%),var(--hero-mobile,var(--hero));background-position:center}
.visual-break{padding-bottom:64px}
.visual-break-grid{grid-template-columns:1fr;height:auto;gap:10px}
.visual-frame{height:58vw;min-height:240px}
.visual-stack{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:10px}
.visual-stack .visual-frame{height:44vw;min-height:180px}
.guide-card::before{height:138px}
}
/* robust local hero media */
.hero-media{background:#17342f!important;transform:none}
.hero-picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,18,.44),rgba(5,22,18,.05) 68%);pointer-events:none}
@media(max-width:680px){.hero-media::after{background:linear-gradient(0deg,rgba(5,22,18,.46),rgba(5,22,18,.05) 68%)}}
/* =========================================================
V4 — hairline typography + mobile hero stability pass
========================================================= */
:root{
--display:'Cormorant Garamond','Times New Roman',serif;
--ink:#10201c;
--deep:#071d18;
}
html{overflow-x:hidden}
body{font-weight:300;overflow-x:hidden;font-optical-sizing:auto;text-rendering:optimizeLegibility}
/* Hairline editorial display typography */
.hero h1,.page-hero h1,.intro-grid h2,.story-grid h2,.section-head h2,
.article-narrow h2,.prose h2,.partner-grid h2,.quote,.caption h3,
.guide-card h3,.article-narrow h3,.footer h4,.mobile-links a,.map-info h3,
.map-water-label,.stat b,summary{
font-family:var(--display);
font-weight:100;
font-synthesis:none;
}
.hero h1,.page-hero h1,.intro-grid h2,.story-grid h2,.section-head h2,
.article-narrow h2,.prose h2,.partner-grid h2,.quote{
letter-spacing:-.055em;
}
.hero h1{line-height:.89}
.page-hero h1{line-height:.93}
.hero .lead,.page-hero .lead{font-weight:200}
.brand-word{font-weight:300;letter-spacing:.205em}
.nav-links a,.lang>button,.menu-btn,.pill{font-weight:200}
.eyebrow{font-weight:400}
/* Prevent long translated titles and navigation labels from creating overflow */
.hero h1,.page-hero h1,.mobile-links a,.section-head h2,.prose h2,.article-narrow h2{
max-width:100%;
overflow-wrap:break-word;
hyphens:auto;
}
/* Mobile controls: larger tap target without heavier visual treatment */
@media(max-width:980px){
.lang>button,.menu-btn{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.mobile-panel{overflow-y:auto;overscroll-behavior:contain}
.mobile-links a{font-size:clamp(2.05rem,10.5vw,2.65rem);line-height:.98;font-weight:100}
}
@media(max-width:680px){
/* Header remains calm at 320–430px widths */
.wrap{width:min(calc(100% - 34px),1280px)}
.nav{height:68px;gap:10px}
.brand{gap:10px;min-width:0}
.brand-word{font-size:.64rem;letter-spacing:.17em;white-space:nowrap}
.brand-mark{flex:0 0 auto}
.lang{margin-left:auto}
.lang>button{font-size:.61rem;letter-spacing:.07em}
.menu-btn{font-size:.8rem}
/* Homepage hero: full-height photo with a deliberate, smooth dark fade.
This removes the hard horizontal image cut visible on Chrome mobile. */
.hero{
min-height:max(100svh,690px);
background:var(--deep);
isolation:isolate;
}
.hero-media{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
min-height:100%!important;
overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 67%,rgba(0,0,0,.96) 74%,rgba(0,0,0,.62) 85%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,#000 67%,rgba(0,0,0,.96) 74%,rgba(0,0,0,.62) 85%,transparent 100%);
}
.hero-picture,.hero-picture img{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
}
.hero-picture img{
object-fit:cover!important;
object-position:center 35%!important;
}
.hero-media::after{
background:linear-gradient(180deg,rgba(4,18,15,.03) 0%,rgba(4,18,15,.05) 44%,rgba(4,18,15,.22) 62%,rgba(7,29,24,.74) 86%,#071d18 100%)!important;
}
.hero::after{
z-index:1;
background:linear-gradient(180deg,transparent 0 52%,rgba(7,29,24,.12) 66%,rgba(7,29,24,.72) 88%,#071d18 100%);
}
.hero-content{
min-height:max(100svh,690px);
justify-content:flex-start;
padding:44svh 0 46px;
}
.hero .eyebrow{font-size:.58rem;letter-spacing:.18em;margin-bottom:8px}
.hero h1{
font-size:clamp(3.2rem,15vw,4.35rem);
line-height:.88;
margin:5px 0 20px;
letter-spacing:-.06em;
max-width:8.8ch;
}
.hero .lead{
font-size:.98rem;
line-height:1.68;
max-width:32ch;
color:rgba(255,255,255,.84);
}
.hero-meta{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:100%;
margin-top:28px;
font-size:.51rem;
line-height:1.45;
letter-spacing:.095em;
}
.hero-meta span{min-width:0}
/* Inner page heroes: prevent long translations from dominating the viewport */
.page-hero{min-height:70svh;background:var(--deep)}
.page-hero .wrap{padding:116px 0 42px}
.page-hero h1{
font-size:clamp(2.8rem,12.8vw,4.2rem);
line-height:.94;
letter-spacing:-.055em;
margin:10px 0 17px;
}
.page-hero .lead{font-size:.96rem;line-height:1.68;max-width:34ch}
/* Body typography: light, but not so thin that readability suffers */
.intro-copy,.story-grid p,.partner-grid p{font-weight:300}
.prose p,.article-narrow p{font-size:.98rem;line-height:1.82}
.prose>p:first-of-type{font-size:1.07rem}
.guide-card h3{font-size:1.85rem;line-height:1.02}
.caption h3{font-size:2.05rem;line-height:1}
.quote{font-size:clamp(2.7rem,12vw,4rem);line-height:.98}
/* More balanced mobile metadata and map controls */
.map-toolbar{gap:6px;padding:12px}
.map-filter{padding:8px 10px;font-size:.6rem}
.map-info{padding:18px}
.map-info h3{font-size:1.55rem}
/* Stop cards / wide tables from forcing horizontal page scrolling */
.guide-card,.official-box,.interactive-map,.table-wrap,.compare-wrap{max-width:100%}
.price-table,.compare-table{min-width:max-content}
.table-wrap,.compare-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
}
@media(max-width:380px){
.brand-word{font-size:.60rem;letter-spacing:.14em}
.hero-content{padding-top:42svh}
.hero h1{font-size:clamp(3rem,14.4vw,3.75rem)}
.hero .lead{font-size:.93rem}
.hero-meta{font-size:.48rem;gap:7px}
.page-hero h1{font-size:clamp(2.6rem,12vw,3.7rem)}
}
html.menu-open,body.menu-open{overflow:hidden!important;touch-action:none}
.menu-btn[aria-expanded="true"]{opacity:.82}
@media(max-width:680px){.hero h1{max-width:100%}}
@media(max-width:680px){.hero h1{text-wrap:wrap}}
/* =========================================================
V5 — mobile hero title positioning / legibility refinement
========================================================= */
@media(max-width:680px){
/* Lift the editorial block into the calmer upper-middle of the photograph.
The previous 44svh start put the hairline title directly over the brightest
limestone and turquoise details. */
.hero-content{
padding-top:34svh;
padding-bottom:48px;
}
.hero .eyebrow{
margin-bottom:10px;
text-shadow:0 2px 14px rgba(3,18,15,.36);
}
.hero h1{
max-width:8.1ch;
margin:4px 0 22px;
text-shadow:0 3px 24px rgba(3,18,15,.28);
}
.hero .lead{
text-shadow:0 2px 16px rgba(3,18,15,.25);
}
/* Localized contrast veil on the left where the text sits, preserving the
brighter open-water view on the right. */
.hero-media::after{
background:
linear-gradient(90deg,rgba(3,18,15,.30) 0%,rgba(3,18,15,.16) 43%,rgba(3,18,15,.03) 78%),
linear-gradient(180deg,rgba(4,18,15,.02) 0%,rgba(4,18,15,.04) 34%,rgba(4,18,15,.18) 60%,rgba(7,29,24,.72) 86%,#071d18 100%)!important;
}
}
@media(max-width:380px){
.hero-content{padding-top:32svh}
.hero h1{max-width:8.4ch}
}
/* =========================================================
V6 — couture-thin display typography
High-contrast Cormorant Garamond for all large editorial titles.
Times New Roman is the intentional low-bandwidth fallback because its
strokes stay noticeably finer than Georgia on Android/Chrome.
========================================================= */
:root{
--display:'Cormorant Garamond','Times New Roman',serif;
}
.hero h1,.page-hero h1,.intro-grid h2,.story-grid h2,.section-head h2,
.article-narrow h2,.prose h2,.partner-grid h2,.quote,.caption h3,
.guide-card h3,.article-narrow h3,.footer h4,.mobile-links a,.map-info h3,
.map-water-label,.stat b,summary{
font-family:var(--display)!important;
font-weight:300!important;
font-style:normal;
font-synthesis:none;
font-optical-sizing:auto;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.hero h1,.page-hero h1,.intro-grid h2,.story-grid h2,.section-head h2,
.article-narrow h2,.prose h2,.partner-grid h2,.quote{
letter-spacing:-.045em;
}
.hero h1{line-height:.84}
.page-hero h1{line-height:.88}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,.partner-grid h2{line-height:.94}
.caption h3,.guide-card h3,.article-narrow h3,.footer h4,.map-info h3,summary{letter-spacing:-.025em}
@media(max-width:680px){
.hero h1{
font-size:clamp(3.35rem,15.5vw,4.55rem);
line-height:.82;
letter-spacing:-.047em;
max-width:8.15ch;
}
.page-hero h1{
font-size:clamp(3rem,13.3vw,4.35rem);
line-height:.88;
letter-spacing:-.045em;
}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,.partner-grid h2{
line-height:.94;
letter-spacing:-.04em;
}
.guide-card h3{font-size:1.95rem;line-height:.96}
.caption h3{font-size:2.15rem;line-height:.95}
.mobile-links a{font-weight:300!important;line-height:.9;letter-spacing:-.03em}
}
@media(max-width:380px){
.hero h1{font-size:clamp(3.15rem,15vw,4rem);line-height:.82}
}
/* =========================================================
V7 — refined hairline typography + rebuilt mobile hero
========================================================= */
:root{
--display:'Noto Serif Display','Noto Serif',ui-serif,serif;
}
/* A true thin display face for the large editorial hierarchy. 100 is
reserved for the principal hero titles; secondary headings stay at 200
so they remain crisp on lower-density Android screens. */
.hero h1,.page-hero h1{
font-family:var(--display)!important;
font-weight:100!important;
font-synthesis:none!important;
font-optical-sizing:auto;
letter-spacing:-.038em!important;
}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,
.partner-grid h2,.quote,.caption h3,.guide-card h3,.article-narrow h3,.footer h4,
.mobile-links a,.map-info h3,.map-water-label,.stat b,summary,.guide-card .num,
.principles span{
font-family:var(--display)!important;
font-weight:200!important;
font-synthesis:none!important;
font-optical-sizing:auto;
}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,
.partner-grid h2,.quote{letter-spacing:-.034em!important}
.caption h3,.guide-card h3,.article-narrow h3,.footer h4,.map-info h3,summary{letter-spacing:-.018em!important}
/* Desktop hero is deliberately lighter and less oversized. */
@media(min-width:681px){
.hero h1{font-size:clamp(4rem,8.8vw,8rem);line-height:.9!important;max-width:980px}
.page-hero h1{font-size:clamp(3.1rem,6.8vw,6.25rem);line-height:.94!important}
}
@media(max-width:680px){
/* Home hero is now two deliberate zones:
1) photograph + title, 2) clean dark copy panel.
This prevents copy from straddling the image boundary on mobile. */
.hero{
min-height:0!important;
height:auto!important;
overflow:hidden;
background:#071d18!important;
isolation:isolate;
}
.hero-media{
inset:0 0 auto!important;
height:72svh!important;
min-height:545px!important;
max-height:700px!important;
width:100%!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
.hero-picture,.hero-picture img{height:100%!important;width:100%!important}
.hero-picture img{
object-fit:cover!important;
object-position:52% 39%!important;
}
.hero-media::after{
background:
linear-gradient(90deg,rgba(3,18,15,.34) 0%,rgba(3,18,15,.12) 52%,rgba(3,18,15,.02) 82%),
linear-gradient(180deg,rgba(3,18,15,.03) 0%,rgba(3,18,15,.04) 45%,rgba(3,18,15,.34) 74%,rgba(7,29,24,.82) 100%)!important;
}
.hero::after{
inset:0 0 auto!important;
height:72svh!important;
min-height:545px!important;
max-height:700px!important;
background:linear-gradient(180deg,transparent 0 50%,rgba(5,21,17,.08) 63%,rgba(5,21,17,.62) 100%)!important;
}
.hero-content{
min-height:0!important;
height:auto!important;
display:block!important;
padding:0!important;
}
.hero-title-block{
height:72svh;
min-height:545px;
max-height:700px;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:0 0 clamp(58px,8.5svh,78px);
position:relative;
z-index:2;
}
.hero-title-block .eyebrow{
margin:0 0 11px!important;
font-size:.55rem!important;
line-height:1.35;
letter-spacing:.19em!important;
opacity:.8;
text-shadow:0 2px 16px rgba(2,13,11,.34);
}
.hero h1{
font-size:clamp(3.1rem,13.4vw,4.05rem)!important;
line-height:.87!important;
letter-spacing:-.038em!important;
max-width:8.9ch!important;
margin:0!important;
text-wrap:balance;
overflow-wrap:normal!important;
hyphens:none!important;
text-shadow:0 3px 24px rgba(2,13,11,.25);
}
.hero-copy-block{
position:relative;
z-index:3;
padding:28px 0 42px;
background:#071d18;
}
.hero .lead{
margin:0;
max-width:35ch!important;
font-size:.91rem!important;
line-height:1.72!important;
font-weight:300!important;
color:rgba(255,255,255,.82)!important;
text-shadow:none!important;
}
.hero-meta{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;
gap:12px 18px!important;
width:100%;
margin-top:29px!important;
padding-top:19px;
border-top:1px solid rgba(255,255,255,.13);
font-size:.5rem!important;
line-height:1.45;
letter-spacing:.09em!important;
}
.hero-meta span{min-width:0}
.hero-meta span:last-child{grid-column:1/-1}
.scroll-cue{display:none!important}
/* Interior hero titles use the same thinner face but a calmer scale. */
.page-hero{min-height:68svh!important;background:#071d18}
.page-hero .wrap{padding:112px 0 39px!important}
.page-hero h1{
font-size:clamp(2.72rem,11.7vw,3.9rem)!important;
line-height:.92!important;
letter-spacing:-.035em!important;
margin:8px 0 16px!important;
max-width:10.5ch;
text-wrap:balance;
}
.page-hero .lead{
font-size:.9rem!important;
line-height:1.7!important;
max-width:34ch!important;
color:rgba(255,255,255,.82)!important;
}
.breadcrumbs{margin-bottom:18px!important;font-size:.55rem!important}
/* Large body headings: thinner, with slightly more air than V6. */
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,.partner-grid h2{
font-size:clamp(2.45rem,10.8vw,3.85rem)!important;
line-height:.98!important;
letter-spacing:-.03em!important;
}
.guide-card h3{font-size:1.78rem!important;line-height:1.02!important}
.caption h3{font-size:1.98rem!important;line-height:1!important}
.quote{font-size:clamp(2.55rem,11.2vw,3.8rem)!important;line-height:1!important}
/* Slightly lighter supporting UI without sacrificing legibility. */
.brand-word{font-weight:300!important}
.eyebrow{font-weight:400!important}
.nav-links a,.lang>button,.menu-btn,.pill{font-weight:300!important}
}
@media(max-width:380px){
.hero-media,.hero::after,.hero-title-block{height:70svh!important;min-height:520px!important}
.hero h1{font-size:clamp(2.95rem,13vw,3.55rem)!important;max-width:9.2ch!important}
.hero-title-block{padding-bottom:54px}
.hero .lead{font-size:.88rem!important}
.page-hero h1{font-size:clamp(2.55rem,11.4vw,3.4rem)!important}
}
/* V7.1 — narrow-screen overflow cleanup discovered in 320px audit */
@media(max-width:680px){
.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.stat{min-width:0;padding:24px 16px!important}
.stat span{overflow-wrap:anywhere;word-break:normal}
.map-shape{
width:88%!important;
height:auto!important;
max-height:86%!important;
left:50%!important;
top:7%!important;
transform:translateX(-50%)!important;
}
.map-water-label{
right:4%!important;
left:auto!important;
font-size:clamp(1.65rem,7.7vw,2.25rem)!important;
letter-spacing:.08em!important;
white-space:nowrap;
}
/* Interior heroes must size their media to their own container rather than
inheriting the taller home-hero photo height. */
.page-hero .hero-media{
inset:0!important;
width:100%!important;
height:100%!important;
min-height:100%!important;
max-height:none!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
.page-hero::after{
inset:0!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
}
.page-hero .hero-picture,.page-hero .hero-picture img{height:100%!important}
}
/* V7.2 — keep comparison content inside the mobile article column */
.article-grid>*{min-width:0}
.prose,.article-narrow{min-width:0;max-width:100%}
.compare-wrap,.compare-scroll{min-width:0;max-width:100%}
@media(max-width:680px){
.compare-scroll{width:100%;overflow-x:auto!important}
.compare-table{width:max-content;min-width:100%!important}
}
/* =========================================================
V8 — editorial Bodoni hierarchy + cache-safe mobile hero +
cartographic map skin. Added 2026-09-28.
========================================================= */
:root{
--display:'Bodoni Moda','Bodoni 72','Didot','Times New Roman',serif;
--ink:#10201c;
--forest:#0b2a23;
--paper:#f4f0e7;
--sea:#dbe8e7;
}
/* High-contrast editorial display type. Bodoni's hairlines read much finer
than a low-weight transitional serif while the stems remain legible. */
.hero h1,.page-hero h1,.intro-grid h2,.story-grid h2,.section-head h2,
.article-narrow h2,.prose h2,.partner-grid h2,.quote,.caption h3,.guide-card h3,
.article-narrow h3,.footer h4,.mobile-links a,.map-info h3,.map-water-label,
.stat b,summary,.guide-card .num,.principles span{
font-family:var(--display)!important;
font-synthesis:none!important;
text-rendering:optimizeLegibility;
font-optical-sizing:auto;
}
.hero h1,.page-hero h1{
font-weight:400!important;
letter-spacing:-.055em!important;
}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,
.partner-grid h2,.quote{
font-weight:400!important;
letter-spacing:-.048em!important;
}
.caption h3,.guide-card h3,.article-narrow h3,.footer h4,.map-info h3,summary{
font-weight:400!important;
letter-spacing:-.032em!important;
}
.guide-card .num,.principles span,.stat b{font-weight:400!important}
@media(min-width:681px){
.hero h1{font-size:clamp(4rem,8vw,7.6rem)!important;line-height:.91!important;max-width:920px!important}
.page-hero h1{font-size:clamp(3rem,6.2vw,5.9rem)!important;line-height:.95!important}
}
/* Mobile hero: hard separation between image/title and copy. New asset
filename prevents stale cached CSS from reintroducing the old overlap. */
@media(max-width:680px){
.hero{background:var(--forest)!important;min-height:0!important;height:auto!important;overflow:hidden!important}
.hero-media,.hero::after,.hero-title-block{
height:74svh!important;
min-height:560px!important;
max-height:720px!important;
}
.hero-media{inset:0 0 auto!important}
.hero-picture,.hero-picture img{height:100%!important;width:100%!important}
.hero-picture img{object-fit:cover!important;object-position:52% 38%!important}
.hero-media::after{
background:
linear-gradient(90deg,rgba(3,18,15,.28) 0%,rgba(3,18,15,.08) 52%,rgba(3,18,15,.00) 82%),
linear-gradient(180deg,rgba(3,18,15,.02) 0%,rgba(3,18,15,.03) 47%,rgba(3,18,15,.22) 72%,rgba(7,29,24,.72) 100%)!important;
}
.hero::after{
inset:0 0 auto!important;
background:linear-gradient(180deg,transparent 0 52%,rgba(4,18,15,.08) 67%,rgba(7,29,24,.6) 100%)!important;
}
.hero-content{display:block!important;min-height:0!important;height:auto!important;padding:0!important}
.hero-title-block{
display:flex!important;flex-direction:column;justify-content:flex-end;
position:relative;z-index:3;
padding:0 0 clamp(92px,12svh,122px)!important;
}
.hero-title-block .eyebrow{
margin:0 0 9px!important;font-size:.53rem!important;line-height:1.35!important;
letter-spacing:.18em!important;font-weight:400!important;opacity:.82!important;
text-shadow:0 2px 14px rgba(2,13,11,.34);
}
.hero h1{
font-size:clamp(2.95rem,12.4vw,3.72rem)!important;
line-height:.90!important;
letter-spacing:-.058em!important;
max-width:9.6ch!important;
margin:0!important;
text-wrap:balance!important;
overflow-wrap:normal!important;
hyphens:none!important;
text-shadow:0 2px 22px rgba(2,13,11,.18);
}
.hero-copy-block{
position:relative!important;z-index:4!important;
margin:0!important;padding:30px 0 44px!important;
background:var(--forest)!important;
}
.hero .lead{
margin:0!important;max-width:35ch!important;
font-size:.91rem!important;line-height:1.76!important;font-weight:300!important;
color:rgba(255,255,255,.82)!important;text-shadow:none!important;
}
.hero-meta{
display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;
gap:12px 16px!important;width:100%;margin-top:28px!important;padding-top:18px!important;
border-top:1px solid rgba(255,255,255,.13)!important;
font-size:.49rem!important;line-height:1.5!important;letter-spacing:.085em!important;
}
.hero-meta span:last-child{grid-column:1/-1!important}
.page-hero h1{
font-size:clamp(2.55rem,10.9vw,3.45rem)!important;
line-height:.95!important;letter-spacing:-.052em!important;
max-width:11ch!important;margin:8px 0 15px!important;
}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,.partner-grid h2{
font-size:clamp(2.25rem,9.6vw,3.35rem)!important;line-height:1.01!important;letter-spacing:-.045em!important;
}
.guide-card h3{font-size:1.72rem!important;line-height:1.04!important}
.caption h3{font-size:1.9rem!important;line-height:1.03!important}
.quote{font-size:clamp(2.35rem,10.3vw,3.45rem)!important;line-height:1.01!important}
}
@media(max-width:380px){
.hero-media,.hero::after,.hero-title-block{height:72svh!important;min-height:525px!important}
.hero-title-block{padding-bottom:82px!important}
.hero h1{font-size:clamp(2.72rem,12.5vw,3.35rem)!important;max-width:9.4ch!important}
.hero .lead{font-size:.88rem!important}
.page-hero h1{font-size:clamp(2.38rem,10.6vw,3.05rem)!important}
}
/* Premium map shell */
.interactive-map{
border:1px solid rgba(16,32,28,.13)!important;
background:#f7f4ec!important;
box-shadow:0 22px 65px rgba(17,39,32,.07);
overflow:hidden;
}
.map-toolbar{
position:relative;z-index:6;
background:rgba(248,245,237,.96)!important;
border-bottom:1px solid rgba(16,32,28,.10)!important;
padding:13px 14px!important;
}
.map-filter{
border-color:rgba(16,32,28,.17)!important;
background:rgba(255,255,255,.54)!important;
color:#18342d!important;
padding:8px 14px!important;
transition:.2s ease;
}
.map-filter:hover{background:#fff!important}
.map-filter.active{background:#102720!important;color:#fff!important;border-color:#102720!important}
.map-stage{
height:630px!important;
background:
radial-gradient(circle at 36% 30%,rgba(255,255,255,.88),transparent 32%),
linear-gradient(135deg,#d8e5e4,#e5eeec)!important;
border:0!important;
}
.map-stage::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.25;
background-image:linear-gradient(rgba(41,71,63,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(41,71,63,.08) 1px,transparent 1px);
background-size:64px 64px;
}
.map-shape{height:88%!important;top:6%!important;filter:drop-shadow(0 20px 30px rgba(22,43,36,.12))!important}
.map-shape path{fill:#d7dcc9!important;stroke:#294d43!important;stroke-width:1.25!important}
.map-shape .map-coastline{stroke:#86a69a!important;stroke-width:3!important;opacity:.38!important}
.map-water-label{
right:4.5%!important;bottom:5.5%!important;font-size:2.05rem!important;
letter-spacing:.11em!important;color:#48665e!important;opacity:.12!important;
}
.map-pin b{border:1px solid rgba(16,32,28,.08);box-shadow:0 5px 15px rgba(22,43,36,.08);font-weight:500!important}
.map-info{background:#fbf9f4!important;padding:20px 24px!important}
.map-info h3{font-size:1.75rem!important}
/* Enhanced live map (Leaflet). The local SVG remains as a graceful fallback. */
.map-stage.leaflet-active::before{display:none}
.map-stage.leaflet-active>.map-shape,
.map-stage.leaflet-active>.map-pin,
.map-stage.leaflet-active>.map-water-label{display:none!important}
.leaflet-map-canvas{position:absolute!important;inset:0!important;z-index:2!important;background:#dce8e6!important}
.leaflet-container{font-family:Manrope,Inter,system-ui,sans-serif!important;color:#17332c!important}
.leaflet-tile-pane{filter:saturate(.76) contrast(.95) brightness(1.025)}
.leaflet-control-zoom{border:0!important;box-shadow:0 8px 24px rgba(12,37,30,.16)!important}
.leaflet-control-zoom a{width:34px!important;height:34px!important;line-height:34px!important;border:0!important;color:#123229!important;background:rgba(250,248,242,.96)!important}
.leaflet-control-zoom a+a{border-top:1px solid rgba(16,32,28,.09)!important}
.leaflet-control-attribution{background:rgba(250,248,242,.88)!important;color:#415a53!important;font-size:9px!important;padding:2px 5px!important}
.leaflet-control-attribution a{color:#264e43!important}
.ck-map-divicon{background:transparent!important;border:0!important}
.ck-marker{display:block;width:16px;height:16px;border-radius:50%;border:3px solid rgba(250,248,242,.98);box-shadow:0 3px 13px rgba(11,37,30,.34);background:#133b31}
.ck-marker.cove{background:#133b31}.ck-marker.geology{background:#a26e4e}.ck-marker.sport{background:#426f7f}.ck-marker.landmark{background:#765f7c}
.ck-map-label{
background:rgba(250,248,242,.95)!important;border:1px solid rgba(16,32,28,.10)!important;
color:#17332c!important;box-shadow:0 6px 20px rgba(16,38,31,.10)!important;
border-radius:99px!important;padding:4px 7px!important;font-size:10px!important;font-weight:500!important;
}
.ck-map-label::before{display:none!important}
.leaflet-popup-content-wrapper{
border-radius:2px!important;background:#fbf8f0!important;color:#17332c!important;
box-shadow:0 18px 50px rgba(10,35,28,.20)!important;
}
.leaflet-popup-tip{background:#fbf8f0!important}
.ck-popup{min-width:175px}.ck-popup b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:400;letter-spacing:-.025em;margin-bottom:4px}.ck-popup span{font-size:.67rem;opacity:.65;text-transform:uppercase;letter-spacing:.08em}.ck-popup a{display:inline-block;margin-top:10px;font-size:.68rem;border-bottom:1px solid currentColor}
@media(max-width:680px){
.interactive-map{margin-inline:0!important}
.map-toolbar{
display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important;
-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:11px 12px!important;
}
.map-toolbar::-webkit-scrollbar{display:none}
.map-filter{flex:0 0 auto!important;padding:8px 13px!important;font-size:.64rem!important}
.map-stage{height:520px!important;min-height:500px!important}
.map-info{padding:18px 18px 20px!important;gap:14px!important}
.map-info h3{font-size:1.55rem!important}
.map-water-label{font-size:1.35rem!important;right:4%!important;bottom:4%!important}
.leaflet-control-attribution{font-size:8px!important;max-width:78%;white-space:normal!important;line-height:1.25!important}
}
/* =========================================================
V9 — semantic answer layer + search/AI readability.
========================================================= */
.answer-capsule{padding:34px 0;background:#e7ece6;border-bottom:1px solid rgba(16,32,28,.09)}
.answer-grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:44px;align-items:start}
.answer-capsule .eyebrow{padding-top:8px}
.answer-text{font-family:var(--display);font-size:clamp(1.35rem,2.1vw,2rem);font-weight:400;line-height:1.28;letter-spacing:-.025em;margin:0;max-width:980px}
.answer-source{font-size:.72rem;line-height:1.7;opacity:.58;margin:13px 0 0;max-width:900px}
@media(max-width:680px){.answer-capsule{padding:25px 0}.answer-grid{grid-template-columns:1fr;gap:9px}.answer-capsule .eyebrow{padding-top:0}.answer-text{font-size:1.38rem;line-height:1.27}.answer-source{font-size:.69rem;margin-top:10px}}
/* =========================================================
V10 — readable editorial typography refinement.
Newsreader keeps a luxury editorial character without the
fragile hairlines and extreme contrast of Bodoni on mobile.
========================================================= */
:root{
--display:'Newsreader','Noto Serif',Georgia,'Times New Roman',serif;
}
.hero h1,.page-hero h1,.intro-grid h2,.story-grid h2,.section-head h2,
.article-narrow h2,.prose h2,.partner-grid h2,.quote{
font-family:var(--display)!important;
font-weight:300!important;
font-optical-sizing:auto;
letter-spacing:-.032em!important;
text-rendering:optimizeLegibility;
}
.hero h1{line-height:.93!important}
.page-hero h1{line-height:.97!important}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,
.partner-grid h2,.quote{line-height:1.035!important}
.caption h3,.guide-card h3,.article-narrow h3,.footer h4,.map-info h3,
summary,.answer-text,.ck-popup b{
font-family:var(--display)!important;
font-weight:400!important;
letter-spacing:-.018em!important;
line-height:1.08;
}
.stat b,.guide-card .num,.principles span,.map-water-label{
font-family:var(--display)!important;
font-weight:300!important;
letter-spacing:-.015em!important;
}
/* Comfortable reading measure and cleaner rhythm for editorial titles. */
.hero h1,.page-hero h1,.section-head h2,.prose h2,.article-narrow h2,
.intro-grid h2,.story-grid h2,.partner-grid h2{
text-wrap:balance;
}
@media(min-width:681px){
.hero h1{font-size:clamp(4rem,7.5vw,7.2rem)!important;max-width:980px!important}
.page-hero h1{font-size:clamp(3rem,5.8vw,5.6rem)!important}
}
@media(max-width:680px){
.hero h1{
font-size:clamp(2.9rem,11.8vw,3.55rem)!important;
line-height:.94!important;
letter-spacing:-.03em!important;
max-width:10.2ch!important;
text-shadow:0 2px 18px rgba(2,13,11,.22)!important;
}
.page-hero h1{
font-size:clamp(2.5rem,10.4vw,3.32rem)!important;
line-height:.98!important;
letter-spacing:-.028em!important;
max-width:12ch!important;
}
.intro-grid h2,.story-grid h2,.section-head h2,.article-narrow h2,.prose h2,.partner-grid h2{
font-size:clamp(2.25rem,9.2vw,3.2rem)!important;
line-height:1.04!important;
letter-spacing:-.026em!important;
}
.quote{font-size:clamp(2.35rem,9.8vw,3.35rem)!important;line-height:1.04!important}
.guide-card h3{font-size:1.72rem!important;line-height:1.08!important}
.caption h3{font-size:1.88rem!important;line-height:1.06!important}
.answer-text{font-size:1.32rem!important;line-height:1.34!important}
}
@media(max-width:380px){
.hero h1{font-size:clamp(2.72rem,11.8vw,3.18rem)!important;max-width:10.4ch!important}
.page-hero h1{font-size:clamp(2.32rem,10.1vw,2.96rem)!important}
}