/* The Island Journal — selected option 2. */
@font-face{font-family:Journal Serif;src:url('../fonts/cormorant-400.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Journal Sans;src:url('../fonts/dm-sans-400.ttf') format('truetype');font-weight:400 600;font-display:swap}
:root{--font:'Faruma','Journal Sans','Atkinson Hyperlegible Next',Arial,sans-serif;--display:'Faruma','Journal Serif',Georgia,serif;--paper:#f6f3ec;--surface:#fdfbf6;--surface-2:#ebece1;--ink:#18221b;--muted:#62665e;--line:#d3d4c8;--line-strong:#a6b09c;--lagoon:#536646;--lagoon-hover:#3f5235;--lagoon-tint:#e6eadc;--lagoon-ink:#fff;--r-sm:8px;--r-md:14px;--r-lg:20px;--gutter:36px;--max:90rem;--header-h:98px;--photo-radius:20px}
html{scroll-behavior:smooth;scroll-padding-top:110px}body{font-family:var(--font);font-size:16px;letter-spacing:0;background:var(--paper)}h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.04em;line-height:1.06}a,button{transition:background .2s,color .2s,transform .25s}a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:5px}.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:600}.site-header{position:relative;background:var(--paper);border:0;backdrop-filter:none;min-height:98px}.site-header .journal-header{min-height:98px;position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:26px;border-bottom:1px solid var(--line);padding-block:18px;margin-inline:auto;max-width:calc(100% - 72px);padding-inline:0}.wordmark{display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;margin:0;color:var(--ink);font:400 40px/.95 var(--display);letter-spacing:.005em;text-transform:uppercase}.wordmark small{font:500 9px/1.2 var(--font);letter-spacing:.3em;color:var(--lagoon);text-align:center;max-width:30ch}.primary-nav{display:flex;align-items:center;gap:42px;margin:0}.nav-left{justify-content:center}.nav-right{justify-content:center}.primary-nav a{font:500 10px/1.4 var(--font);letter-spacing:.15em;text-transform:uppercase;padding:10px 0;white-space:nowrap}.primary-nav a[aria-current=page]{color:var(--lagoon);border-radius:0;box-shadow:inset 0 -1px 0 var(--lagoon)}.primary-nav a:hover{background:transparent;color:var(--lagoon)}.header-actions{gap:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.nav-right{padding-right:85px}.nav-left{padding-left:85px}.header-actions .icon-btn{width:32px;height:36px}.header-actions .icon{width:17px;height:17px;stroke-width:1.4}.menu-theme-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.journal-intro{text-align:center;padding:40px 20px 35px}.journal-intro h1{font-size:clamp(50px,6.05vw,94px);margin:0 auto 16px;line-height:1;max-width:22ch;overflow-wrap:break-word}.journal-intro p{font-size:17px;line-height:1.65;max-width:65ch;margin:0 auto 25px;color:var(--muted);white-space:pre-line}.journal-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;border:1px solid var(--lagoon);background:var(--lagoon);color:var(--lagoon-ink);min-height:48px;padding:15px 24px;font:500 10px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:0;cursor:pointer;max-width:100%;text-align:center}.journal-button .icon{width:19px;height:19px;stroke-width:1.4;flex-shrink:0}.journal-button:hover{background:var(--lagoon-hover);color:var(--lagoon-ink);transform:translateY(-2px)}.button-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}.journal-hero{position:relative;aspect-ratio:1.98;background:#1b555d;overflow:hidden;isolation:isolate}.journal-hero>img,.journal-hero>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 51%}.journal-hero>video{opacity:0;transition:opacity .7s}.journal-hero>video.is-playing{opacity:1}.journal-film-button{position:absolute;left:3.2%;bottom:34px;display:flex;align-items:center;gap:26px;background:#052d3438;color:#fff;padding:0 18px 0 0;border:0;border-radius:40px;cursor:pointer;min-height:56px;font:400 14px var(--font);text-align:left}.film-circle{display:grid;place-items:center;width:58px;height:58px;border:1px solid #fff;border-radius:100%}.film-circle .icon{height:21px;width:21px;stroke-width:1.3}.film-caption{border-left:1px solid #fff8;padding-left:25px;max-width:40ch}.journal-film-button:hover{background:#052d3480}.hero-photo-credit{position:absolute;right:24px;bottom:20px;font-size:9px;color:#fff;background:#06323d80;padding:5px 8px;max-width:45ch}.journal-story{text-align:center;padding-block:49px 38px}.journal-story h2{font-size:clamp(36px,3.8vw,59px);line-height:1.01;margin:0 auto 24px;max-width:30ch;white-space:pre-line}.journal-story p{font-size:16px;line-height:1.6;max-width:75ch;margin:0 auto;color:var(--muted);white-space:pre-line}.journal-photos{display:grid;grid-template-columns:1.63fr 1fr;gap:20px;padding-bottom:60px}.journal-photos figure{margin:0;min-width:0}.journal-photos figure>a{display:block;height:440px;border-radius:var(--photo-radius);overflow:hidden}.journal-photos img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 1s cubic-bezier(.2,.65,.3,1)}.journal-photos figure:first-child img{object-position:50% 50%}.journal-photos figure:last-child img{object-position:62% 50%}.journal-photos a:hover img{transform:scale(1.025)}.journal-photos figcaption{padding:15px 2px 0;display:flex;justify-content:space-between;align-items:start;gap:15px;flex-wrap:wrap}.journal-photos figcaption a{display:inline-flex;align-items:center;gap:15px;text-decoration:none;color:var(--ink);font-size:13px}.journal-photos figcaption .icon{width:16px;height:16px}.journal-photos figcaption small{font-size:9px;color:var(--muted)}.journal-search{border-block:1px solid var(--line);padding-block:44px;margin-bottom:25px;display:grid;grid-template-columns:1fr 1fr;gap:25px 45px;align-items:center}.journal-search .eyebrow{font-size:9px;margin:0 0 12px}.journal-search h2{font-size:36px;max-width:23ch;margin:0}.journal-search .searchbar{gap:8px}.journal-search .input-wrap{min-width:0}.journal-search .input{border-radius:0;min-width:0;background:var(--surface);font-size:13px;min-height:50px}.journal-search .journal-button{gap:15px}.journal-essentials{grid-column:1/-1;display:flex;justify-content:center;gap:40px;padding-top:18px;flex-wrap:wrap}.journal-essentials a{color:var(--muted);font-size:12px;text-decoration:none}.journal-essentials a:hover{color:var(--lagoon)}.section{padding-block:40px}.section-head h2{font-size:38px;font-weight:400}.section-head>a{font-size:12px;font-weight:400}.section-head .icon{width:16px;height:16px}.journal-help{display:flex;justify-content:space-between;gap:35px;align-items:center;padding-block:45px;border-top:1px solid var(--line);margin-top:40px}.journal-help h2{font-size:39px;margin-bottom:15px}.journal-help p:not(.eyebrow){font-size:13px;color:var(--muted);max-width:70ch}.photo-credit{font-size:10px;line-height:1.7;color:var(--muted);padding-block:15px 28px}.photo-credit a{color:inherit}.site-footer{margin-top:0;background:var(--surface-2);padding-block:55px 25px}.site-footer .wrap{gap:36px}.site-footer h2{font:500 11px/1.3 var(--font);letter-spacing:.13em;text-transform:uppercase}.site-footer .wrap>div:first-child h2{font:400 39px/1.1 var(--display);letter-spacing:0}.site-footer p,.site-footer a{font-size:13px;line-height:1.8}.site-footer .fineprint{font-size:10px}.page-head{padding-top:60px;padding-bottom:32px}.page-head h1{font-size:clamp(48px,6vw,82px);line-height:1;max-width:24ch}.page-head .lede{font-size:16px;line-height:1.7;max-width:62ch}.btn{font-weight:500;border-radius:4px}.place-card{box-shadow:none;border-radius:14px}.place-card h3{font-family:var(--display);font-size:29px}.news-item h3{font-size:30px}.news-item time{font-size:11px}.news-item p{font-size:14px}.gallery-tile{border-radius:16px;overflow:hidden}.state{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:30px}.state h3{font-family:var(--font);font-size:17px;letter-spacing:0}.state p{font-size:13px;line-height:1.7}.auth-wrap{padding-block:55px;max-width:32rem}.auth-card{border-radius:16px;padding:32px;background:var(--surface)}.auth-card h1{font-size:44px}.auth-card p{font-size:14px}.tabbar{background:var(--paper)}.tabbar a,.tabbar button{font-size:10px}.admin h1,.admin h2,.admin h3{font-family:var(--font);letter-spacing:-.03em}.admin-side .wordmark{font-size:30px;align-items:flex-start}.journal-intro h1,.journal-intro p,.journal-intro .journal-button{animation:journal-in .85s both}.journal-intro p{animation-delay:.12s}.journal-intro .journal-button{animation-delay:.22s}@keyframes journal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.motion-paused *{animation-play-state:paused!important}
[hidden]{display:none!important}
@media(min-width:1700px){.journal-hero{max-height:850px}.journal-photos figure>a{height:500px}}
@media(max-width:1100px){.primary-nav{gap:22px}.site-header .journal-header{gap:18px;max-width:calc(100% - 48px)}.wordmark{font-size:34px}.primary-nav a{font-size:9px;letter-spacing:.1em}.journal-intro{padding-top:34px}.journal-intro p{font-size:15px}.journal-photos figure>a{height:350px}}
@media(max-width:800px){:root{--gutter:22px;--header-h:85px}.site-header,.site-header .journal-header{min-height:85px}.site-header .journal-header{display:flex;justify-content:center;max-width:calc(100% - 40px);padding-block:17px}.site-header .primary-nav{display:none}.site-header .wordmark{font-size:32px;padding-right:0}.wordmark small{font-size:8px}.header-actions{position:absolute;right:0}.header-actions .icon-btn{width:30px}.journal-intro{padding:36px 6px 30px}.journal-intro h1{font-size:clamp(45px,8vw,66px);max-width:18ch;line-height:1.01;margin-bottom:18px}.journal-intro p{font-size:14px;line-height:1.65;max-width:42ch;margin-bottom:24px}.journal-button{font-size:9px;min-height:46px;padding:13px 18px;gap:20px}.journal-hero{aspect-ratio:1.35}.journal-hero>img{object-position:52% 53%}.journal-film-button{bottom:25px;left:22px;font-size:12px;gap:17px;min-height:46px}.film-circle{width:46px;height:46px}.film-caption{padding-left:17px}.hero-photo-credit{font-size:7px;right:10px;bottom:7px}.journal-story{padding-block:38px 27px}.journal-story h2{font-size:39px;line-height:1.04;margin-bottom:19px}.journal-story p{font-size:14px;line-height:1.7;white-space:normal}.journal-photos{gap:16px;padding-bottom:35px}.journal-photos figure>a{height:300px}.journal-photos figcaption a{font-size:12px}.journal-photos figcaption small{font-size:8px}.journal-search{grid-template-columns:1fr;gap:25px;padding-block:32px}.journal-search h2{font-size:34px;max-width:none}.journal-essentials{gap:18px 25px;padding-top:6px;justify-content:flex-start}.journal-essentials a{font-size:11px}.section{padding-block:30px}.section-head h2{font-size:32px}.section-head>a{font-size:11px}.journal-help{display:block;padding-block:32px}.journal-help h2{font-size:34px}.journal-help .journal-button{margin-top:12px}.site-footer{padding-top:38px}.page-head{padding-top:38px}.page-head h1{font-size:54px}.page-head .lede{font-size:14px}.photo-credit{font-size:9px}}
@media(max-width:520px){.journal-photos{grid-template-columns:1fr}.journal-photos figure>a{height:auto;aspect-ratio:1.3}.journal-photos figure:last-child>a{aspect-ratio:1.5}.journal-photos figcaption{padding-top:11px}.journal-hero{aspect-ratio:1.12}.journal-search .input{font-size:12px}.header-actions .icon-btn:first-child{display:none}.journal-intro h1{font-size:48px}.wordmark{max-width:70%;overflow-wrap:anywhere}.journal-story h2{font-size:35px}.journal-button{white-space:normal}.journal-film-button{max-width:calc(100% - 44px)}.film-caption{max-width:22ch}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:1100px) and (min-width:801px){.nav-left{padding-left:60px}.nav-right{padding-right:60px}.primary-nav{gap:16px}}
/* Option 1 — Lagoon House, framed hero and floating discovery panel. */
.lagoon-home{--paper:#fcfbf8;--surface:#fff;--lagoon:#35492f;--lagoon-hover:#253b23;--photo-radius:20px}
.lagoon-home .site-header,.lagoon-home .site-header .journal-header{min-height:82px}
.lagoon-home .site-header .journal-header{border:0;max-width:calc(100% - 64px);padding-block:16px;grid-template-columns:1fr auto 1fr}
.lagoon-home .nav-left{padding-left:0;justify-content:flex-start;gap:22px}.lagoon-home .nav-right{padding-right:0;justify-content:flex-end;gap:32px}.lagoon-home .primary-nav a{font-size:13px;letter-spacing:0;text-transform:none}.lagoon-home .nav-right .btn{border-radius:999px;min-width:98px;text-align:center;padding:8px 22px}.lagoon-home .wordmark{font-size:41px;letter-spacing:-.06em}.lagoon-home .wordmark small{display:none}
.lagoon-home .journal-hero{margin:0 18px;min-height:650px;height:calc(100svh - 125px);max-height:850px;aspect-ratio:auto;border-radius:16px;overflow:hidden;background:#163b43}
.lagoon-home .journal-hero>img{object-position:center 58%;animation:lagoon-arrival 2s ease-out both}.lagoon-home .journal-hero::after{content:'';position:absolute;inset:0;background:rgba(0,30,42,.28);z-index:1;pointer-events:none}
.lagoon-home .journal-intro{position:relative;z-index:2;padding:62px 20px 0;color:#fff}.lagoon-home .journal-intro .hero-kicker{font:400 11px/1.5 var(--font);text-transform:uppercase;letter-spacing:.28em;color:#fff;margin:0 auto 30px}.lagoon-home .journal-intro h1{font-size:clamp(54px,6.2vw,98px);max-width:24ch;color:#fff;text-shadow:0 2px 22px #12363b44}.lagoon-home .journal-intro p{color:#fff;font-size:19px;line-height:1.5;max-width:55ch}.lagoon-home .journal-intro .journal-button{color:white;background:transparent;border:1px solid #ffffff80;border-radius:99px;min-height:42px;padding:10px 22px;font-size:10px}.lagoon-home .journal-intro .journal-button:hover{background:#ffffff20}
.lagoon-home .journal-film-button{z-index:3;bottom:110px;left:50%;transform:translateX(-50%);white-space:nowrap}.lagoon-home .hero-photo-credit{z-index:3;bottom:20px;right:24px}.lagoon-home .film-circle{width:52px;height:52px}.lagoon-home .film-caption{border:0;padding-left:0}
.lagoon-search{position:relative;z-index:4;width:min(930px,calc(100% - 100px));margin:-66px auto 0;padding:26px 30px;background:var(--surface);border-radius:12px;box-shadow:0 9px 26px #17282019}.lagoon-search .searchbar{display:grid;grid-template-columns:1fr 1.25fr auto;gap:22px;align-items:end;max-width:none}.lagoon-search label{display:block;margin-bottom:9px;font-size:13px;color:var(--ink)}.lagoon-search .input,.lagoon-search .select{height:54px;background:var(--surface);border:1px solid var(--line);border-radius:7px;font-size:14px;width:100%}.lagoon-search .journal-button{height:54px;border-radius:7px;font-size:11px;letter-spacing:.02em;text-transform:none}.search-kind,.search-keyword{min-width:0}
.lagoon-home .journal-story{padding-top:60px;padding-bottom:30px;text-align:center}.lagoon-home .journal-story h2{font-size:clamp(40px,4.1vw,64px);line-height:1.1;max-width:28ch;margin:0 auto 18px}.lagoon-home .journal-story p{max-width:80ch;margin:auto;font-size:17px;line-height:1.65;color:var(--muted)}
.lagoon-home .journal-photos{max-width:none;width:auto;margin-inline:18px;padding-inline:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:48px}.lagoon-home .journal-photos figure{position:relative;overflow:hidden;border-radius:var(--photo-radius);margin:0;background:#173e44}.lagoon-home .journal-photos figure>a{height:320px;border-radius:inherit;display:block}.lagoon-home .journal-photos img{height:100%;width:100%;object-fit:cover;transition:transform .7s,filter .4s;filter:brightness(.8)}.lagoon-home .journal-photos figure:hover img{transform:scale(1.04);filter:brightness(.95)}.lagoon-home .journal-photos figcaption{position:absolute;bottom:0;left:0;right:0;padding:22px;color:white;background:#10282045;pointer-events:none}.lagoon-home .journal-photos figcaption a{font:400 31px/1.1 var(--display);color:white;pointer-events:auto}.lagoon-home .journal-photos figcaption small{color:#fff;font-size:8px;margin-top:9px;display:block}
@keyframes lagoon-arrival{from{transform:scale(1.045)}to{transform:scale(1)}}
@media(max-width:800px){.lagoon-home .site-header .journal-header{display:grid;max-width:calc(100% - 32px);gap:10px;min-height:74px}.lagoon-home .site-header .primary-nav{display:flex}.lagoon-home .wordmark{font-size:32px;max-width:none}.lagoon-home .nav-left{gap:8px}.lagoon-home .primary-nav a{font-size:11px}.lagoon-home .nav-right{gap:10px}.lagoon-home .nav-right>a:first-child{display:none}.lagoon-home .nav-right .btn{min-width:0;padding:7px 12px}.lagoon-home .journal-hero{margin-inline:12px;min-height:580px;height:72svh;border-radius:14px}.lagoon-home .journal-intro{padding:44px 14px 0}.lagoon-home .journal-intro h1{font-size:60px;max-width:16ch}.lagoon-home .journal-intro p{font-size:16px;max-width:40ch}.lagoon-home .journal-intro .hero-kicker{font-size:9px;margin-bottom:22px}.lagoon-search{width:calc(100% - 54px);padding:20px;margin-top:-55px}.lagoon-search .searchbar{grid-template-columns:1fr 1fr;gap:15px}.lagoon-search .journal-button{grid-column:1/-1;width:100%;height:45px}.lagoon-home .journal-film-button{bottom:100px;font-size:13px}.lagoon-home .journal-story{padding-top:44px}.lagoon-home .journal-story p{font-size:15px}.lagoon-home .journal-photos{margin-inline:16px;gap:12px}.lagoon-home .journal-photos figure>a{height:260px}.lagoon-home .journal-photos figcaption{padding:16px}.lagoon-home .journal-photos figcaption a{font-size:24px}}
@media(max-width:520px){.lagoon-home .nav-left>a{display:none}.lagoon-home .wordmark{font-size:30px}.lagoon-home .journal-intro h1{font-size:54px;max-width:11ch}.lagoon-home .journal-intro p{font-size:14px;max-width:32ch}.lagoon-home .journal-hero{min-height:610px;height:77svh}.lagoon-search{width:calc(100% - 44px);padding:18px}.lagoon-search .searchbar{grid-template-columns:1fr}.lagoon-search .input,.lagoon-search .select{height:47px}.lagoon-search label{font-size:12px;margin-bottom:6px}.lagoon-home .journal-film-button{bottom:98px}.lagoon-home .journal-photos{grid-template-columns:1fr}.lagoon-home .journal-photos figure>a,.lagoon-home .journal-photos figure:last-child>a{height:290px;aspect-ratio:auto}.lagoon-home .journal-photos figcaption a{font-size:32px}.lagoon-home .journal-story h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){.lagoon-home .journal-hero>img{animation:none}.lagoon-home .journal-photos img{transition:none}}
/* Navigation opens at the side, never as a full-width bottom sheet. */
dialog.navigation-drawer{position:fixed;inset:0 auto 0 0;margin:0;width:min(360px,90vw);max-width:90vw;height:100dvh;max-height:100dvh;border:0;border-radius:0 20px 20px 0;padding:0;background:var(--paper);color:var(--ink);box-shadow:12px 0 45px #10251b26;overflow:hidden}
.navigation-drawer[open]{display:flex;flex-direction:column;animation:drawer-in .25s ease-out}.navigation-drawer .dialog-head{padding:25px 22px 18px;border-bottom:1px solid var(--line);flex-shrink:0}.navigation-drawer .dialog-head h2{font:400 32px/1 var(--display)}.navigation-drawer .dialog-body{padding:16px 10px 28px;max-height:none;overflow-y:auto;flex:1}.navigation-drawer .sheet-nav{gap:5px;padding:0 6px}.navigation-drawer .sheet-nav a{padding:13px 15px;border-radius:10px;font-size:15px}.navigation-drawer .menu-theme-row{padding:16px 14px;border-top:1px solid var(--line);margin-top:12px}.navigation-drawer::backdrop{background:#10282388}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.lagoon-home .journal-hero>.hero-slide{opacity:0;animation:none;transform:none;transition:opacity 1.2s ease-in-out;pointer-events:none}.lagoon-home .journal-hero>.hero-slide.is-active{opacity:1}
.hero-slide-controls{position:absolute;z-index:3;bottom:96px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;background:#112e3980;border:1px solid #ffffff66;color:#fff;padding:6px 9px;border-radius:99px;backdrop-filter:blur(8px)}.hero-slide-controls .icon-btn{color:#fff;width:36px;height:36px;border-radius:50%;background:transparent}.hero-slide-controls .icon-btn:hover{background:#ffffff25}.hero-slide-controls #slide-count{font-size:12px;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.navigation-drawer[open]{animation:none}.lagoon-home .journal-hero>.hero-slide{transition:none}}
/* Consistent, thumb-friendly left navigation on every public page. */
.site-header .journal-header .nav-left{padding-left:0;justify-content:flex-start;gap:22px}.site-header .journal-header .nav-right{padding-right:0;justify-content:flex-end}.site-header .header-actions-left{position:static;transform:none;display:flex;align-items:center;gap:4px;flex-shrink:0}.site-header .header-actions-left .icon-btn{display:inline-flex;width:44px;height:44px;min-width:44px;border-radius:10px}.site-header .header-actions-left .icon{width:21px;height:21px;stroke-width:1.7}.navigation-drawer .dialog-head .icon-btn{width:44px;height:44px;min-width:44px;border:1px solid var(--line);border-radius:10px}
@media(max-width:1100px){.site-header .journal-header .nav-left{gap:12px}.site-header .nav-left>a{display:none}}
@media(max-width:800px){.site-header .journal-header{display:grid;grid-template-columns:1fr auto 1fr;gap:10px}.site-header .journal-header .nav-left{display:flex}.site-header .journal-header .nav-right{display:flex}.site-header .nav-right>a{display:none}.site-header .wordmark{font-size:30px;max-width:none}.site-header .header-actions-left{gap:0}.lagoon-home .site-header .nav-right .btn{display:inline-flex}}
@media(max-width:400px){.site-header .journal-header{max-width:calc(100% - 20px);gap:4px}.site-header .wordmark{font-size:25px}.site-header .wordmark small{font-size:6px;letter-spacing:.15em}.lagoon-home .nav-right .btn{padding:7px 9px;font-size:10px}}

/* Home: endless moving row of category boxes (see core/chip-marquee.js) */
.marquee{position:relative;overflow:hidden;padding:10px 0 14px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee.dragging{cursor:grabbing}
.marquee-static{cursor:default;-webkit-mask-image:none;mask-image:none}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-set{display:flex;gap:14px;padding-right:14px}
.marquee-set[hidden]{display:none}
.cat-box{display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:12px 24px 12px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);text-decoration:none;font:500 16px/1.2 var(--font);white-space:nowrap;box-shadow:0 1px 2px rgba(24,34,27,.05);transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
.cat-box-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--lagoon-tint);color:var(--lagoon);flex:none}
.cat-box-icon .icon{width:20px;height:20px;stroke-width:1.6}
.cat-box:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 10px 24px -12px rgba(24,34,27,.35);color:var(--ink)}
.cat-box:hover .cat-box-icon{background:var(--lagoon);color:var(--lagoon-ink)}
.marquee.dragging .cat-box{pointer-events:none}
.cat-box:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:800px){.cat-box{min-height:56px;padding:10px 18px 10px 10px;font-size:15px;border-radius:16px}.cat-box-icon{width:36px;height:36px;border-radius:11px}.marquee-set{gap:10px;padding-right:10px}}
@media(prefers-reduced-motion:reduce){.cat-box{transition:none}}
.cat-box{font-family:var(--font);cursor:inherit}
button.cat-box{cursor:pointer}
.marquee.dragging button.cat-box{cursor:grabbing}
.cat-box[aria-pressed=true]{background:var(--lagoon);border-color:var(--lagoon);color:var(--lagoon-ink)}
.cat-box[aria-pressed=true] .cat-box-icon,.cat-box[aria-pressed=true]:hover .cat-box-icon{background:rgba(255,255,255,.18);color:var(--lagoon-ink)}
.cat-box[aria-pressed=true]:hover{color:var(--lagoon-ink)}
#cat-filter.marquee{margin-top:8px}

/* Gallery groups */
.gallery-groups{margin:0 0 18px}
.gallery-groups[hidden]{display:none}
.cat-box-count{min-width:26px;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;text-align:center}
.cat-box[aria-pressed=true] .cat-box-count{background:rgba(255,255,255,.2);color:var(--lagoon-ink)}
.gallery-group{padding-block:14px 26px;border-top:1px solid var(--line)}
.gallery-group:first-child{border-top:0;padding-top:0}
.gallery-group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.gallery-group-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:32px}
@media(max-width:800px){.gallery-group-head h2{font-size:26px}}
/* "What does the photo show?" picker in the submit form */
.group-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.group-option{position:relative;cursor:pointer}
.group-option input{position:absolute;opacity:0;width:1px;height:1px}
.group-option-box{display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 12px 7px 7px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);font-size:14px;line-height:1.25;transition:border-color .2s,background .2s}
.group-option-box .cat-box-icon{width:34px;height:34px;border-radius:10px}
.group-option:hover .group-option-box{border-color:var(--lagoon)}
.group-option input:checked+.group-option-box{border:2px solid var(--lagoon);background:var(--lagoon-tint);font-weight:600}
.group-option input:checked+.group-option-box .cat-box-icon{background:var(--lagoon);color:var(--lagoon-ink)}
.group-option input:focus-visible+.group-option-box{outline:3px solid var(--focus);outline-offset:2px}
.group-pick[aria-invalid=true] .group-option-box{border-color:var(--signal)}

/* Homepage small photos: fewer than three when some are removed */
.journal-photos figure[hidden]{display:none}
.lagoon-home .journal-photos[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.lagoon-home .journal-photos[data-count="1"]{grid-template-columns:minmax(0,1fr)}
@media(max-width:520px){.lagoon-home .journal-photos[data-count]{grid-template-columns:1fr}}

/* Logo: light-theme and dark-theme versions, switched with the theme */
.logo-mark{display:inline-grid;flex:none;width:52px;height:52px}
.logo-mark img{grid-area:1/1;width:100%;height:100%;object-fit:contain}
.logo-for-dark{display:none}
[data-theme=dark] .logo-for-light{display:none}
[data-theme=dark] .logo-for-dark{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .logo-for-light{display:none}:root:not([data-theme=light]) .logo-for-dark{display:block}}
.wordmark.has-logo{flex-direction:row;align-items:center;gap:14px}
.wordmark-text{display:flex;flex-direction:column;align-items:center;gap:7px}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand h2{margin:0}
.logo-footer{width:56px;height:56px}
.admin-side .wordmark.has-logo{display:flex;flex-direction:row;align-items:center;gap:10px}
.admin-side .logo-mark{width:38px;height:38px}
@media(max-width:800px){.logo-mark{width:40px;height:40px}.wordmark.has-logo{gap:10px}.logo-footer{width:46px;height:46px}}
@media(max-width:400px){.site-header .logo-mark{width:32px;height:32px}.wordmark.has-logo{gap:7px}}

/* News groups */
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}
.news-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:var(--lagoon-tint);color:var(--lagoon);font-size:12px;font-weight:600;line-height:1.4;text-decoration:none}
a.news-tag:hover{background:var(--lagoon);color:var(--lagoon-ink)}
.news-meta .official-tag{margin:0}

/* Hero text readability: a soft dark shade behind the text (top of the photo),
   strength set in Admin > Homepage editor (--hero-shade, 0 to 0.9). */
:root{--hero-shade:.55}
.lagoon-home .journal-hero::after{background:linear-gradient(180deg,rgba(3,22,28,calc(var(--hero-shade) * 1)) 0%,rgba(3,22,28,calc(var(--hero-shade) * .82)) 30%,rgba(3,22,28,calc(var(--hero-shade) * .45)) 55%,rgba(3,22,28,calc(var(--hero-shade) * .12)) 78%,rgba(3,22,28,.05) 100%)}
.lagoon-home .journal-intro .hero-kicker{text-shadow:0 1px 10px rgba(0,0,0,.6);font-weight:600}
.lagoon-home .journal-intro h1{text-shadow:0 2px 6px rgba(0,0,0,.25),0 4px 30px rgba(0,0,0,.45)}
.lagoon-home .journal-intro p{font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.5)}
.lagoon-home .journal-intro .journal-button{background:rgba(6,32,38,.42);border-color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:600}
.lagoon-home .journal-intro .journal-button:hover{background:rgba(6,32,38,.62)}

/* Sticky header: solid at the top, frosted glass after scrolling */
.site-header{position:sticky;top:0;z-index:60;transition:background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease}
.site-header .journal-header{transition:min-height .35s ease,padding .35s ease,border-color .35s ease}
.site-header.is-scrolled{background:rgba(246,243,236,.72);background:color-mix(in srgb,var(--paper) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 color-mix(in srgb,var(--line) 70%,transparent)}
.site-header.is-scrolled .journal-header{border-bottom-color:transparent}
@media(min-width:801px){.site-header.is-scrolled,.site-header.is-scrolled .journal-header{min-height:74px}.site-header.is-scrolled .journal-header{padding-block:10px}.site-header.is-scrolled .wordmark small{display:none}.site-header .logo-mark{transition:width .35s ease,height .35s ease}.site-header.is-scrolled .logo-mark{width:42px;height:42px}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-header.is-scrolled{background:var(--paper)}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .journal-header,.site-header .logo-mark{transition:none}}
/* Profile icon: on every page, also on phones */
.site-header .nav-right>a.header-account{display:inline-grid!important;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;letter-spacing:0;box-shadow:none;color:var(--ink);flex:none}
.site-header .nav-right>a.header-account:hover{background:var(--surface-2);color:var(--lagoon)}
.site-header .nav-right>a.header-account[aria-current=page]{background:var(--lagoon-tint);color:var(--lagoon)}
.site-header .nav-right>a.header-account.is-signed-in::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:var(--lagoon);transform:translate(11px,11px);box-shadow:0 0 0 2px var(--paper)}
.site-header .header-account .icon{width:21px;height:21px;stroke-width:1.5}
@media(max-width:800px){.site-header .journal-header .nav-right{justify-content:flex-end}.site-header .nav-right>a.header-account{width:34px;height:34px}}

/* Island profile */
.island-head .eyebrow{margin:0 0 14px}
.island-banner{aspect-ratio:21/8;border-radius:20px;margin-bottom:22px}
@media(max-width:700px){.island-banner{aspect-ratio:4/3;border-radius:14px}}
.island-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:0 0 40px;padding:0}
.island-facts[hidden]{display:none}
.island-facts .fact{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.island-facts dt{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.island-facts dd{margin:0;font:400 26px/1.15 var(--display);color:var(--ink)}
.island-facts .fact:first-child{background:var(--lagoon);border-color:var(--lagoon)}
.island-facts .fact:first-child dd{color:var(--lagoon-ink);font-size:40px}
.island-facts .fact:first-child dt{color:var(--lagoon-ink);opacity:.85}
.island-layout{display:grid;gap:32px;align-items:start}
@media(min-width:960px){.island-layout{grid-template-columns:minmax(0,1fr) 260px;gap:56px}}
.island-body{max-width:70ch}
.island-body h2{font-size:34px;margin:36px 0 12px}
.island-body h2:first-child{margin-top:0}
.island-body li{margin-bottom:8px}
.island-links{position:sticky;top:110px;display:grid;gap:4px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.island-links h2{font:600 12px/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.island-links a{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px}
.island-links a:last-child{border-bottom:0}
.island-links a:hover{color:var(--lagoon)}
@media(max-width:959px){.island-links{position:static}}

/* Live weather and air quality */
.aw-loading,.aw-error{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--muted)}
.aw-error p{margin:0 0 12px}
.aw-grid{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
@media(min-width:900px){.aw-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.aw-aqi{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 24px;border-radius:14px;background:#dcf5e7;color:#0b4a2a}
.aw-aqi.tone-moderate{background:#fff6cc;color:#5c4700}
.aw-aqi.tone-sensitive{background:#ffe6cc;color:#6b3300}
.aw-aqi.tone-unhealthy{background:#ffd9d9;color:#7a1010}
.aw-aqi.tone-very,.aw-aqi.tone-hazard{background:#f0dcef;color:#5a0f55}
.aw-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;opacity:.8}
.aw-aqi-value{font:700 64px/1 var(--font)}
.aw-aqi-label{font-size:18px;font-weight:600}
.aw-scale{position:relative;width:100%;max-width:380px;height:12px;margin-top:14px}
.aw-scale-bar{position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#1a9850 0%,#a6d96a 14%,#fee08b 28%,#fdae61 42%,#d73027 60%,#7b3294 80%,#40004b 100%)}
.aw-scale-marker{position:absolute;top:-9px;width:0;height:0;margin-left:-7px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid currentColor}
.aw-scale-ends{display:flex;justify-content:space-between;width:100%;max-width:380px;font-size:12px;opacity:.8}
.aw-advice{margin:8px 0 0;font-size:14px;max-width:40ch}
.aw-pms{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:900px){.aw-pms{grid-template-columns:1fr}}
.aw-pm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:18px 12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-align:center}
.aw-pm-name{font-size:13px;font-weight:600;color:var(--muted)}
.aw-pm strong{font:700 36px/1.1 var(--font);color:var(--ink)}
.aw-pm-unit{font-size:11px;color:var(--muted)}
.aw-pm-label{margin-top:6px;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:#dcf5e7;color:#0b4a2a}
.aw-pm.tone-moderate .aw-pm-label{background:#fff6cc;color:#5c4700}
.aw-pm.tone-high .aw-pm-label{background:#ffd9d9;color:#7a1010}
.aw-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aw-metric{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--paper)}
.aw-metric-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--lagoon-tint);color:var(--lagoon)}
.aw-metric strong{display:block;font-size:18px;line-height:1.2;color:var(--ink)}
.aw-metric strong small{font-size:12px;font-weight:500;color:var(--muted)}
.aw-metric span{display:block;font-size:12px;color:var(--muted)}
.aw-metric em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.aw-source{margin:10px 0 0;font-size:12px;color:var(--muted)}
.aw-source a{color:inherit}

/* ---- Measured reading, and how much the models agree --------------------
   Both of these sit above the air-quality grid, because a real instrument
   reading and an honest statement of uncertainty are the two most useful
   things on the page. Colours are mixed from the theme tokens rather than
   hard-coded, so light and dark both work with no second set of rules. */
.aw-observed{display:flex;gap:14px;align-items:flex-start;margin:0 0 12px;padding:16px 18px;
  border:1px solid var(--line);border-left:3px solid var(--lagoon);border-radius:16px;background:var(--surface)}
.aw-observed-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;
  background:var(--lagoon-tint);color:var(--lagoon)}
.aw-observed-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.aw-observed strong{font-size:17px;line-height:1.35;color:var(--ink);font-weight:600}
.aw-observed-where{font-size:12px;color:var(--muted)}
.aw-observed.tone-wet{border-left-color:#3b82c4}
.aw-observed.tone-wet .aw-observed-icon{background:color-mix(in srgb,#3b82c4 16%,transparent);color:#3b82c4}
.aw-observed.tone-storm{border-left-color:#b4792a}
.aw-observed.tone-storm .aw-observed-icon{background:color-mix(in srgb,#b4792a 18%,transparent);color:#b4792a}

.aw-consensus{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:16px 18px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.aw-consensus strong{font-size:16px;color:var(--ink);font-weight:600}
.aw-consensus-note{font-size:12px;color:var(--muted)}
.aw-consensus-hedge{font-style:normal;font-size:12px;color:var(--muted);
  padding-top:6px;border-top:1px dashed var(--line)}
/* One pip per forecasting centre: filled means that model expects rain. */
.aw-pips{display:flex;gap:6px;margin:4px 0 2px}
.aw-pip{width:28px;height:7px;border-radius:99px;background:var(--line)}
.aw-pip.is-wet{background:#3b82c4}
.aw-consensus.verdict-dry .aw-pip.is-dry{background:color-mix(in srgb,var(--lagoon) 38%,transparent)}
@media (max-width:420px){.aw-pip{width:100%}.aw-pips{gap:5px}}

.weather-pill.is-wet{box-shadow:inset 0 0 0 1px color-mix(in srgb,#3b82c4 45%,transparent)}

@media (prefers-reduced-motion:no-preference){
  .aw-observed,.aw-consensus{animation:aw-rise .32s ease both}
}
@keyframes aw-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Homepage header: live weather pill */
.site-header .nav-left>a.weather-pill{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font:500 12px/1.2 var(--font);letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:none;text-decoration:none}
.site-header .nav-left>a.weather-pill:hover{border-color:var(--lagoon);color:var(--lagoon)}
.weather-pill .wp-part{display:inline-flex;align-items:center;gap:4px}
.weather-pill .icon{width:15px;height:15px;color:var(--lagoon);stroke-width:1.7}
@media(max-width:1100px){.weather-pill .wp-wind{display:none}}
.weather-pill-hero{display:none}
@media(max-width:800px){
  .site-header .nav-left>a.weather-pill{display:none!important}
  .weather-pill-hero{display:inline-flex;align-items:center;gap:12px;margin:0 auto 18px;padding:7px 14px;border:1px solid rgba(255,255,255,.55);border-radius:99px;background:rgba(6,32,38,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:600 12px/1.2 var(--font);text-decoration:none}
  .weather-pill-hero .icon{color:#fff;width:14px;height:14px}
  .weather-pill-hero .wp-wind{display:inline-flex}
}

/* Weather and air quality page */
.aq-top{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
@media(min-width:1000px){.aq-top{grid-template-columns:minmax(0,1.25fr) minmax(0,1.5fr) 170px;align-items:stretch}}
.aq-big{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:28px 22px;border-radius:16px}
.aq-big-value{font:700 72px/1 var(--font)}
.aq-big-label{font-size:19px;font-weight:600}
.aq-dominant{margin:8px 0 0;font-size:13px;opacity:.85}
.tone-good{--tone-bg:#dcf5e7;--tone-ink:#0b4a2a}
.tone-moderate{--tone-bg:#fff4c2;--tone-ink:#5c4700}
.tone-sensitive{--tone-bg:#ffe2c4;--tone-ink:#6b3300}
.tone-unhealthy{--tone-bg:#ffd6d6;--tone-ink:#7a1010}
.tone-very,.tone-hazard{--tone-bg:#efd9ee;--tone-ink:#5a0f55}
.tone-none{--tone-bg:var(--surface-2);--tone-ink:var(--muted)}
.aq-big{background:var(--tone-bg);color:var(--tone-ink)}
.aq-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aq-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border:1px solid var(--line);border-radius:16px;background:var(--paper);text-align:center}
.aq-card-name{font:400 22px/1 var(--display);color:var(--ink)}
.aq-card-aqi{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:104px;padding:10px 6px;border-radius:12px;background:var(--tone-bg);color:var(--tone-ink)}
.aq-card-aqi strong{font:700 38px/1.05 var(--font)}
.aq-card-aqi span{font-size:12px;font-weight:600;line-height:1.25}
.aq-card-conc{font-size:13px;color:var(--muted)}
.aq-card-conc b{color:var(--ink);font-size:15px}
.aq-card-note{font-size:11px;color:var(--muted);margin-top:-6px}
.aq-side{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:1000px){.aq-side{grid-template-columns:1fr}}
.aq-side-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;background:var(--paper);text-align:center}
.aq-side-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lagoon-tint);color:var(--lagoon)}
.aq-side-item strong{font-size:16px;color:var(--ink)}
.aq-side-item strong small{font-size:11px;font-weight:500;color:var(--muted)}
.aq-side-item>span:last-child{font-size:11px;color:var(--muted)}
@media(max-width:620px){.aq-cards{grid-template-columns:1fr 1fr 1fr;gap:6px}.aq-card{padding:12px 6px}.aq-card-name{font-size:17px}.aq-card-aqi{min-height:84px}.aq-card-aqi strong{font-size:28px}.aq-card-aqi span{font-size:10px}.aq-big-value{font-size:60px}}
.aq-section{margin-top:44px}
.aq-section h2{font-size:34px;margin:0 0 6px}
.aq-advice-list{display:grid;gap:10px;margin-top:14px}
@media(min-width:800px){.aq-advice-list{grid-template-columns:1fr 1fr}}
.aq-advice-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.aq-advice-item p{margin:0;font-size:15px}
.aq-advice-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--tone-bg);color:var(--tone-ink)}
.aq-strip{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 14px;scroll-snap-type:x proximity}
.aq-row-card{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:92px;padding:12px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);scroll-snap-align:start;flex:none}
.aq-row-card.is-now{border:2px solid var(--lagoon)}
.aq-row-top{font-size:13px;font-weight:600;color:var(--ink)}
.aq-row-sub{font-size:11px;color:var(--muted);margin-top:-4px}
.aq-row-aqi{display:flex;flex-direction:column;align-items:center;width:100%;padding:8px 4px;border-radius:10px;background:var(--tone-bg);color:var(--tone-ink)}
.aq-row-aqi strong{font:700 24px/1.1 var(--font)}
.aq-row-aqi span{font-size:10px;font-weight:600;text-align:center}
.aq-row-metric{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.aq-row-metric .icon{color:var(--lagoon)}
.aq-days .aq-row-card{min-width:110px}
.aq-faq{display:grid;gap:10px;margin-top:14px}
.aq-faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.aq-faq summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;font-weight:600;list-style:none}
.aq-faq summary::-webkit-details-marker{display:none}
.aq-faq summary::after{content:'+';margin-left:auto;font-size:20px;color:var(--muted)}
.aq-faq details[open] summary::after{content:'−'}
.aq-faq summary .icon{color:var(--lagoon);flex:none}
.aq-faq details p{margin:0;padding:0 18px 18px 48px;color:var(--muted);line-height:1.7}
@media(min-width:1000px){.aq-top{grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) 280px;align-items:start}.aq-side{grid-template-columns:1fr 1fr}.aq-big{min-height:100%}.aq-top>.aq-big,.aq-top>.aq-cards{align-self:stretch}}
.aq-faq .faq-q-icon{display:grid;place-items:center;width:22px;height:22px;flex:none;border:1.5px solid var(--lagoon);border-radius:50%;color:var(--lagoon);font-size:12px;font-weight:700}
.aq-faq .faq-a{padding:0 18px 16px 52px;color:var(--muted);line-height:1.7}
.aq-faq .faq-a p{margin:0 0 10px}
.aq-faq .faq-a>:last-child{margin-bottom:0}
.aq-section[hidden]{display:none}

/* Home: 4 gallery photos (2 by 2 on phones and tablets, 4 in a row on computers) */
.home-gallery{grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.home-gallery{grid-template-columns:repeat(4,1fr)}}
.home-gallery-more{margin:16px 0 0;text-align:center}

/* Until the saved homepage and page text are applied, keep editable content
   invisible (no flash of the built-in defaults). Removed by journal.js. */
.design-loading [data-design],.design-loading [data-design-image],.design-loading [data-page-text],.design-loading [data-page-body],.design-loading [data-page-banner],.design-loading [data-page-facts],.design-loading .journal-photos figcaption{opacity:0!important;transition:none!important}
[data-design],[data-page-text],[data-page-body],.journal-photos figcaption{transition:opacity .25s ease}
.site-header{overflow-anchor:none}
.site-header{transition:background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease,margin-bottom .35s ease}
.hdr-measure,.hdr-measure *{transition:none!important}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}

/* Homepage in dark mode: the homepage design sets its own light colours, so
   switch them to the dark ones as well (otherwise light text on light paper). */

/* Map page: street map / plot map switch and the zoomable plot map */
.map-switch{display:inline-grid;grid-template-columns:repeat(3,auto);gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);justify-self:start}
.map-switch-btn{border:0;background:transparent;color:var(--muted);font:500 13px/1 var(--font);padding:10px 16px;min-height:40px;border-radius:999px;cursor:pointer;white-space:nowrap}
.map-switch-btn:hover{color:var(--ink)}
.map-switch-btn[aria-pressed=true]{background:var(--lagoon);color:var(--lagoon-ink,#fff)}
.map-stage>.map-view{position:absolute;inset:0}
.map-stage>.map-view[hidden]{display:none}
.map-view .google-frame{height:100%}
.plot-map{position:absolute;inset:0;overflow:hidden}
.plot-view{position:absolute;inset:0;overflow:hidden;background:#fff;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.plot-view.dragging{cursor:grabbing}
.plot-view:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.plot-canvas{position:absolute;left:0;top:0;transform-origin:0 0}
.plot-canvas.glide{transition:transform .35s ease}
.plot-img{display:block;width:100%;height:100%;max-width:none;pointer-events:none;-webkit-user-drag:none}
.plot-ring{position:absolute;border:2px solid #d9452f;border-radius:8px;box-shadow:0 0 0 2px rgba(217,69,47,.28);pointer-events:none;animation:plot-ring 1.6s ease-out 2}
@keyframes plot-ring{0%{box-shadow:0 0 0 0 rgba(217,69,47,.55)}100%{box-shadow:0 0 0 9px rgba(217,69,47,0)}}
.plot-search{position:absolute;top:12px;left:12px;right:72px;max-width:380px;z-index:2}
.plot-search-icon{position:absolute;left:13px;top:13px;color:var(--muted);pointer-events:none;display:flex}
.plot-search-input{width:100%;min-height:44px;padding-left:40px;border-radius:12px;background:var(--surface);box-shadow:0 4px 18px rgba(0,0,0,.12)}
.plot-results{margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.16);max-height:min(50vh,340px);overflow:auto;padding:4px}
.plot-result{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font:400 14px/1.3 var(--font);padding:11px 12px;border-radius:8px;cursor:pointer}
.plot-result:hover,.plot-result:focus-visible{background:var(--surface-2)}
.plot-empty{margin:0;padding:12px;font-size:13px;color:var(--muted)}
.plot-tools{position:absolute;right:12px;top:12px;display:grid;gap:8px;z-index:2}
.plot-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.plot-btn:hover{color:var(--lagoon)}
.plot-credit{position:absolute;left:0;right:0;bottom:0;margin:0;padding:6px 12px;font-size:11px;line-height:1.4;color:var(--muted);background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);border-top:1px solid var(--line);z-index:1}
.plot-credit a{color:inherit}
/* Dark mode: show the white plot map with dark paper and light lines. */
[data-theme=dark] .plot-view{background:#151515}
[data-theme=dark] .plot-img{filter:invert(.92) hue-rotate(180deg)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .plot-view{background:#151515}:root:not([data-theme=light]) .plot-img{filter:invert(.92) hue-rotate(180deg)}}
@media(prefers-reduced-motion:reduce){.plot-canvas.glide{transition:none}.plot-ring{animation:none}}

/* Plot map on phones: no zoom buttons, a taller map, bigger text and tap targets */
@media(max-width:959px){
  /* Room around the map and the text, so nothing sits against the screen edge. */
  .map-head,.map-list-wrap{padding-inline:24px}
  body.map-plot-mode .map-stage,body.map-pins-mode .map-stage{height:calc(100svh - var(--header-h) - 300px);min-height:430px;margin-inline:24px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
  /* Vertical swipes on the map scroll the page; sideways drags still move the map. */
  .plot-view{touch-action:pan-y}
  .map-list button{min-height:52px;padding-block:12px}

  .plot-tools{top:auto;bottom:44px;right:10px}
  .plot-search{left:10px;right:10px;max-width:none;top:10px}
  .plot-search-input{font-size:16px;min-height:48px}
  .plot-result{font-size:16px;min-height:48px;display:flex;align-items:center}
  .plot-btn{width:48px;height:48px}
  .plot-credit{font-size:12px;padding:8px 12px}
}

/* Phones: smaller headings and cards so the page fits the screen without feeling oversized. */
@media(max-width:800px){
  .section-head h2{font-size:26px}
  .section-head>a{font-size:11px}
  .place-card{border-radius:12px}
  .place-card .media{aspect-ratio:16/9}
  .place-card .body{padding:12px 14px 14px;gap:5px}
  .place-card h3{font-size:21px}
  .place-card .cat{font-size:13px}
  .place-card .addr{font-size:13px}
  .news-item h3{font-size:22px}
  .news-item p{font-size:13px}
  .page-head h1{font-size:40px}
  .page-head .lede{font-size:15px}
  .journal-story h2{font-size:30px}
  .journal-search h2,.journal-help h2{font-size:28px}
}
@media(max-width:520px){
  .journal-intro h1{font-size:42px}
  .journal-intro p{font-size:15px}
  .gallery-group-head h2{font-size:22px}
}

/* Phones: places and news as compact list rows (small picture on the left) instead of large cards. */
@media(max-width:800px){
  .grid-cards{grid-template-columns:1fr;gap:12px;border-top:0}
  .place-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .place-card .media{width:84px;height:84px;aspect-ratio:auto;border-radius:12px;overflow:hidden}
  .place-card .body{padding:0 6px 0 0;gap:3px;min-width:0}
  .place-card .cat{font-size:12px}
  .place-card h3{font-size:18px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .place-card .addr{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .place-card .meta{margin-top:2px;gap:4px}
  .news-item,.news-item.has-img{grid-template-columns:minmax(0,1fr) 84px;gap:14px;padding:14px 0}
  .news-item img{width:84px;height:84px;aspect-ratio:1/1}
  .news-item h3{font-size:18px;margin-bottom:4px;line-height:1.15}
  .news-item p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .news-item time{font-size:11px;margin-bottom:3px}
}

/* Phones: every other page uses smaller type, tighter cards and fewer large boxes. */
@media(max-width:800px){
  body{font-size:15px}
  .lede,.page-head .lede{font-size:15px}
  .em-list{gap:0;border-top:1px solid var(--line)}
  .em-card{padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
  .em-card h2{font-size:17px}
  .em-card .org{font-size:13px}
  .state{padding:18px;border-radius:12px}
  .state h3{font-size:16px}
  .sub-row{padding:10px;gap:12px;grid-template-columns:56px 1fr}
  .info-row{padding:10px 0;gap:10px}
  .event-item{padding:12px 0;gap:14px;grid-template-columns:60px 1fr}
  .event-date{height:64px}
  .event-item h3{font-size:17px}
  .event-item p{font-size:13px}
  .gallery-group-head h2{font-size:22px}
  .section{padding-block:26px}
  .auth-card{padding:22px}
  .auth-card h1{font-size:34px}
  .journal-search h2,.journal-help h2{font-size:26px}
  .journal-story p{font-size:15px}
}

/* ===== Enhancements ===================================================== */

/* Smooth page changes where the browser supports it (no effect elsewhere). */
@view-transition { navigation: auto; }

/* Hero photos follow the Maldives clock: softer at dawn, warmer at dusk, dimmer at night. */
html[data-tod=dawn] .journal-hero>img{filter:saturate(1.05) brightness(1.02)}
html[data-tod=dusk] .journal-hero>img{filter:saturate(1.12) sepia(.14) brightness(.96)}
html[data-tod=night] .journal-hero>img{filter:saturate(.92) brightness(.82)}

/* Scroll reveals: content eases in as it reaches the screen. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.65,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Lagoon wave between sections on the home page. */
.wave-divider{height:56px;overflow:hidden;color:var(--lagoon-tint);margin-block:6px 0}
.wave-divider svg{display:block;width:104%;height:100%;margin-left:-2%;fill:currentColor}
@media(prefers-reduced-motion:no-preference){.wave-divider svg{animation:wave-sway 9s ease-in-out infinite alternate}}
@keyframes wave-sway{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}

/* Island in numbers. */
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-block:28px 8px;text-align:center}
.stats-strip[hidden]{display:none}
.stat{padding:16px 8px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.stat strong{display:block;font:400 clamp(30px,4vw,44px)/1 var(--display);color:var(--lagoon)}
.stat span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}

/* Buttons and small rows. */
.action-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.action-row .btn{display:inline-flex;align-items:center;gap:8px}
.save-btn.is-saved{color:var(--lagoon);border-color:var(--lagoon)}
.save-btn.is-saved svg{fill:currentColor}
.distance{margin-top:4px;justify-self:start}
.recent-searches{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}

/* Reading progress across the top of an article. */
.read-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--lagoon);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* Install card, above the tab bar on phones. */
.install-card{position:fixed;left:16px;right:16px;bottom:88px;max-width:440px;margin:0 auto;z-index:70;display:grid;gap:12px;padding:16px 18px;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.install-card p{margin:4px 0 0}
@media(min-width:960px){.install-card{bottom:24px}}
@media(prefers-reduced-motion:no-preference){.install-card{animation:card-in .4s ease both}}
@keyframes card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Start page cards. */
.start-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
@media(min-width:640px){.start-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.start-grid{grid-template-columns:repeat(3,1fr)}}
.start-card{display:grid;gap:6px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .25s}
.start-card:hover{border-color:var(--lagoon);transform:translateY(-2px)}
.start-card strong{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1}
.start-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--lagoon-tint);color:var(--lagoon);margin-bottom:6px}
.start-emergency .start-icon{color:var(--signal,#b42318);background:transparent;border:1px solid currentColor}
.tips{padding-left:20px;line-height:1.7}

/* Phones: the scroll reveal keeps list items in view, and the tab bar is clear of the install card. */
@media(max-width:800px){
  .stats-strip{gap:8px}
  .stat{padding:12px 6px}
  .stat span{font-size:11px}
}


/* ===== Dark mode: Lagoon night (remastered) =====
   One palette for the whole site. Light mode is unchanged. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0E1A1C;
  --surface: #142426;
  --surface-2: #1A2E30;
  --ink: #EEF6F4;
  --muted: #A9C2BE;
  --line: #22393B;
  --line-strong: #3E5E60;
  --lagoon: #5FD3C5;
  --lagoon-hover: #8AE6DA;
  --lagoon-ink: #06201E;
  --lagoon-tint: #173A3A;
  --deep: #0A3436;
  --deep-ink: #E6F6F3;
  --deep-muted: #9FD0C8;
  --contour: rgba(95, 211, 197, 0.12);
  --signal: #FF8E98;
  --signal-tint: #3A1A20;
  --signal-ink: #2A0A0F;
  --verified: #7EE0A8;
  --verified-tint: #163A2A;
  --caution: #F5CD78;
  --caution-tint: #3D3218;
  --focus: #8DB8FF;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #0E1A1C;
  --surface: #142426;
  --surface-2: #1A2E30;
  --ink: #EEF6F4;
  --muted: #A9C2BE;
  --line: #22393B;
  --line-strong: #3E5E60;
  --lagoon: #5FD3C5;
  --lagoon-hover: #8AE6DA;
  --lagoon-ink: #06201E;
  --lagoon-tint: #173A3A;
  --deep: #0A3436;
  --deep-ink: #E6F6F3;
  --deep-muted: #9FD0C8;
  --contour: rgba(95, 211, 197, 0.12);
  --signal: #FF8E98;
  --signal-tint: #3A1A20;
  --signal-ink: #2A0A0F;
  --verified: #7EE0A8;
  --verified-tint: #163A2A;
  --caution: #F5CD78;
  --caution-tint: #3D3218;
  --focus: #8DB8FF;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}
}
/* Dark-only details */

  html[data-theme="dark"] body { background-color: var(--paper); background-image:
    radial-gradient(1100px 620px at 88% -14%, rgba(95, 211, 197, 0.11), transparent 62%),
    radial-gradient(900px 520px at -12% 38%, rgba(95, 211, 197, 0.06), transparent 60%); }
  .place-card, .news-item, .em-card, .stat, .start-card, .state, .auth-card, .event-item, .gallery-tile {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 36px -22px rgba(0, 0, 0, 0.8); }
  .place-card:hover, .start-card:hover { border-color: var(--lagoon); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(95,211,197,.25), 0 18px 40px -20px rgba(95,211,197,.25); }
  .place-card .media img, .news-item img, .gallery-tile img, .journal-photos img { filter: brightness(0.93) saturate(0.96); }
  .journal-button { box-shadow: 0 8px 24px -10px rgba(95, 211, 197, 0.55); }
  .journal-button:hover { box-shadow: 0 12px 30px -10px rgba(95, 211, 197, 0.7); }
  .primary-nav a[aria-current=page] { box-shadow: inset 0 -1px 0 var(--lagoon); }
  .badge-verified { box-shadow: inset 0 0 0 1px rgba(126, 224, 168, 0.35); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-color: var(--paper); background-image:
    radial-gradient(1100px 620px at 88% -14%, rgba(95, 211, 197, 0.11), transparent 62%),
    radial-gradient(900px 520px at -12% 38%, rgba(95, 211, 197, 0.06), transparent 60%); }
  .place-card, .news-item, .em-card, .stat, .start-card, .state, .auth-card, .event-item, .gallery-tile {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 36px -22px rgba(0, 0, 0, 0.8); }
  .place-card:hover, .start-card:hover { border-color: var(--lagoon); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(95,211,197,.25), 0 18px 40px -20px rgba(95,211,197,.25); }
  .place-card .media img, .news-item img, .gallery-tile img, .journal-photos img { filter: brightness(0.93) saturate(0.96); }
  .journal-button { box-shadow: 0 8px 24px -10px rgba(95, 211, 197, 0.55); }
  .journal-button:hover { box-shadow: 0 12px 30px -10px rgba(95, 211, 197, 0.7); }
  .primary-nav a[aria-current=page] { box-shadow: inset 0 -1px 0 var(--lagoon); }
  .badge-verified { box-shadow: inset 0 0 0 1px rgba(126, 224, 168, 0.35); }
}
/* Shared polish (both themes): glass header once scrolled, softer theme change, branded text selection. */
.site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
::selection { background: var(--lagoon); color: var(--lagoon-ink); }
@media (prefers-reduced-motion: no-preference) { body { transition: background-color .35s ease, color .35s ease; } }

/* Home page: its own light colours are replaced in dark mode too. */
html[data-theme="dark"] .lagoon-home { --paper: #0E1A1C; --surface: #142426; --surface-2: #1A2E30; --lagoon: #5FD3C5; --lagoon-hover: #8AE6DA; --lagoon-ink: #06201E; }
html[data-theme="dark"] .lagoon-search, html[data-theme="dark"] .journal-search .input { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lagoon-home { --paper: #0E1A1C; --surface: #142426; --surface-2: #1A2E30; --lagoon: #5FD3C5; --lagoon-hover: #8AE6DA; --lagoon-ink: #06201E; }
  :root:not([data-theme="light"]) .lagoon-search, :root:not([data-theme="light"]) .journal-search .input { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
}

/* Place pins map (OpenStreetMap base, clustered pins) */
.map-view-pins{background:var(--surface-2)}
.map-view-pins .cluster-canvas{position:absolute;inset:0;font-family:var(--font)}
.map-loading{position:absolute;inset:16px;margin:0;padding:16px;background:var(--surface);border-radius:12px}
.cluster-canvas .leaflet-control-attribution{font-size:11px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted)}
.cluster-canvas .leaflet-control-attribution a{color:inherit}
.cluster-canvas .leaflet-bar a{background:var(--surface);color:var(--ink);border-color:var(--line)}
.cluster-canvas .leaflet-bar a:hover{background:var(--surface-2);color:var(--lagoon)}
.cluster-canvas .leaflet-popup-content-wrapper,.cluster-canvas .leaflet-popup-tip{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop,0 10px 30px rgba(0,0,0,.18))}
.cluster-canvas .leaflet-popup-content{margin:14px 16px;font:400 14px/1.4 var(--font)}
.cluster-pop{display:grid;gap:6px;justify-items:start;min-width:160px}
.cluster-pop strong{font-size:15px}
.cluster-pop .btn{margin-top:4px}
.cluster-canvas .marker-cluster div{background:var(--lagoon);color:var(--lagoon-ink,#fff);font:600 13px/1 var(--font)}
.cluster-canvas .marker-cluster-small,.cluster-canvas .marker-cluster-medium,.cluster-canvas .marker-cluster-large{background:color-mix(in srgb,var(--lagoon) 35%,transparent)}
.cluster-canvas .marker-cluster-small div,.cluster-canvas .marker-cluster-medium div,.cluster-canvas .marker-cluster-large div{background:var(--lagoon);color:var(--lagoon-ink,#fff)}
/* Dark mode: invert the street tiles so they read as a dark map. */
[data-theme=dark] .cluster-canvas .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.95)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .cluster-canvas .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.95)}}
@media(prefers-reduced-motion:reduce){.cluster-canvas .leaflet-zoom-animated{transition:none}}
@media(max-width:480px){.map-switch-btn{padding:10px 11px;font-size:12px}.map-switch{gap:2px;padding:3px}}

/* Open now badge and weekly hours on the place page */
.open-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:34px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:400 13px/1.3 var(--font)}
.open-badge strong{font-weight:600}
.open-badge>span:last-child{color:var(--muted)}
.open-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.open-badge.is-open{border-color:transparent;background:var(--verified-tint,var(--surface-2))}
.open-badge.is-open .open-dot{background:var(--verified,#2E8B57);box-shadow:0 0 0 3px color-mix(in srgb,var(--verified,#2E8B57) 25%,transparent)}
.open-badge.is-closed{border-color:transparent;background:var(--signal-tint,var(--surface-2))}
.open-badge.is-closed .open-dot{background:var(--signal,#B3261E)}
.hours-list{display:grid;gap:4px;margin:2px 0 0}
.hours-list>div{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;margin:0;padding:8px 0;border-bottom:1px solid var(--line)}
.hours-list dd span{display:block}
.hours-list dt{font-weight:600}
.hours-list dd{margin:0}

/* Home page refresh: calmer story block, open stats row, rounded news cards */
.lagoon-home .journal-story{position:relative}
.lagoon-home .journal-story::before{content:'Our story';display:block;margin-bottom:14px;font:600 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--lagoon)}
.lagoon-home .journal-story h2::after{content:'';display:block;width:56px;height:2px;margin:26px auto 0;background:var(--lagoon);border-radius:2px;opacity:.9}
.lagoon-home .journal-story p{max-width:58ch;margin-inline:auto;color:var(--muted);line-height:1.7}

.lagoon-home .stats-strip{gap:0;margin-block:40px 12px;padding-block:28px;border-block:1px solid var(--line)}
.lagoon-home .stat{padding:8px 12px;border:0;border-radius:0;background:transparent;position:relative}
.lagoon-home .stat+.stat::before{content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line-strong,var(--line))}
.lagoon-home .stat strong{color:var(--ink);font-size:clamp(34px,4.4vw,52px)}
.lagoon-home .stat span{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

.news-list{gap:12px;border-top:0}
.news-list .news-item{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden}
.news-list .news-item:hover{border-color:var(--line-strong,var(--line))}
.news-list .news-item img{border-radius:12px}
@media (min-width:640px){.news-list .news-item.has-img{padding:18px;gap:24px}}
@media (max-width:520px){.lagoon-home .journal-story::before{font-size:11px}.lagoon-home .stat span{font-size:10px;letter-spacing:.1em}}
.lagoon-home .stats-strip{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));justify-items:center}
.lagoon-home .stat{box-shadow:none;width:100%;text-align:center}

/* Site-wide refresh: rounded cards, calmer page headings, consistent spacing */
.page-head{padding:2.5rem 0 1.5rem}
.page-head h1{font-size:clamp(40px,5vw,58px);letter-spacing:-.03em;line-height:1.02}
.page-head .lede{max-width:52ch;line-height:1.6}
.section-top h1{font-size:clamp(36px,4.4vw,52px);letter-spacing:-.03em}

.grid-cards{gap:20px}
.place-card,.em-card,.gallery-tile,.state{border-radius:18px}
.place-card{border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.place-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,0,0,.28)}
.place-card .media{border-radius:18px 18px 0 0}
.gallery-tile{overflow:hidden}
.gallery-tile img{border-radius:0}
.news-item,.event-item{border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden}
.news-item img,.event-item img{border-radius:12px}
.event-item{margin-bottom:12px}
.em-card{border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.state{border:1px solid var(--line)}
@media (max-width:959px){
  .place-card:hover{transform:none}
  .news-item,.event-item{padding:14px}
  .page-head{padding:1.75rem 0 1.25rem}
}

/* Page headings: small label and accent line, as on the home page */
.page-head::before,.map-head::before{display:block;margin-bottom:12px;font:600 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--lagoon)}
.page-head h1::after,.map-head h1::after{content:'';display:block;width:56px;height:2px;margin-top:18px;background:var(--lagoon);border-radius:2px;opacity:.9}
body[data-page-key="explore"] .page-head::before{content:'Discover'}
body[data-page-key="news"] .page-head::before{content:'Stories'}
body[data-page-key="events"] .page-head::before{content:"What's on"}
body[data-page-key="gallery"] .page-head::before{content:'Photos'}
body[data-page-key="about"] .page-head::before{content:'About'}
body[data-page-key="island"] .page-head::before{content:'The island'}
body[data-page-key="air"] .page-head::before{content:'Weather'}
body[data-page-key="emergency"] .page-head::before{content:'Help'}
body[data-page-key="search"] .page-head::before{content:'Find'}
body[data-page-key="map"] .map-head::before{content:'Find your way'}

/* Place page photo strip: moves in a loop when there are many photos */
.thumbs.marquee{width:100%;min-width:0;max-width:100%;overflow:hidden;margin-top:8px;padding:4px 0 6px;-webkit-mask-image:none;mask-image:none}
.thumbs.marquee .marquee-set{gap:8px;padding-right:8px}
.thumbs.marquee button{padding:0;border:2px solid transparent;border-radius:var(--r-sm,10px);background:none;cursor:pointer}
.thumbs.marquee button[aria-current="true"]{border-color:var(--lagoon)}

/* Place page: keep the single column the width of the phone, so a long photo strip cannot widen it */
.place-layout{grid-template-columns:minmax(0,1fr)}
.place-layout>*{min-width:0}

/* Photo strip: every thumbnail the same size and evenly spaced, whatever the photo's shape */
.thumbs.marquee .marquee-set{gap:10px;padding-right:10px}
.thumbs.marquee button{flex:none;width:96px;height:72px;box-sizing:border-box;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--surface-2,#e9e6dc);box-shadow:none}
.thumbs.marquee button img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
@media (min-width:960px){.thumbs.marquee button{width:112px;height:80px}}

/* Home: a dhoni sails through the waves, in the island's weather and light.
   The look is set by data-mood on .sea (night, dawn, day, golden, dusk) and by
   the numbers --wind, --cover, --storm, --sun-x/y/o, which core/sea-boat.js
   keeps up to date. Without the script the day palette and the simple CSS
   drift below are used instead. */
.sea{--bw:clamp(104px,12vw,160px);--cover:.3;--storm:0;--wind:.35;--sun-o:0;--sun-x:50%;--sun-y:30%;--cloud-dur:110s;
  --sky-a:rgba(214,232,226,0);--sky-b:#e3efec;--w-back:#bad8d2;--w-front:#9cc7c0;
  --crest:rgba(255,255,255,.75);--cloud:#fff;--veil:120,132,140;
  position:relative;height:clamp(230px,25vw,310px);margin-top:6px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--sky-a),var(--sky-b) 78%);content-visibility:auto;contain-intrinsic-size:auto 280px}
.sea[data-mood=dawn]{--sky-a:rgba(255,232,214,0);--sky-b:#f7ded0;--w-back:#bcd2d6;--w-front:#9db9c2;--crest:rgba(255,245,235,.7);--cloud:#fff1e6;--veil:140,130,135}
.sea[data-mood=golden]{--sky-a:rgba(255,236,200,0);--sky-b:#fbe3c2;--w-back:#c6d3c8;--w-front:#a6bcb2;--crest:rgba(255,246,224,.75);--cloud:#fff3dd;--veil:150,134,110}
.sea[data-mood=dusk]{--sky-a:rgba(240,206,190,0);--sky-b:#e0b9ae;--w-back:#8fa5ab;--w-front:#748d96;--crest:rgba(255,235,225,.55);--cloud:#f3d9cd;--veil:110,104,116}
.sea[data-mood=night]{--sky-a:rgba(14,26,28,0);--sky-b:#14323d;--w-back:#17404a;--w-front:#1b525b;--crest:rgba(150,210,220,.35);--cloud:#9fc0cc;--veil:40,58,72}
/* Clouds thicken and the light goes flat when it is overcast or raining. */
.sea::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--veil),.72),rgba(var(--veil),.38));opacity:calc(var(--storm) * .7)}
.sea::after{content:'';position:absolute;inset:auto 0 0 0;height:30%;z-index:7;pointer-events:none;background:linear-gradient(180deg,transparent,var(--paper) 96%)}
.sea .wave{position:absolute;left:0;bottom:0;width:200%;max-width:none;display:block;will-change:transform}
.wave-back{height:46%;fill:var(--w-back);z-index:1}
.wave-front{height:34%;fill:var(--w-front);z-index:4}
.wave-front .crest{fill:none;stroke:var(--crest);stroke-width:2;vector-effect:non-scaling-stroke}
.sea-fx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
/* Rain and heavy cloud grey the water and the boat too, not just the sky. */
.sea-haze{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:calc(var(--storm) * .8);
  background:linear-gradient(180deg,rgba(var(--veil),0) 38%,rgba(var(--veil),.55) 54%,rgba(var(--veil),.8) 70%,rgba(var(--veil),.88))}
.sea-boat{position:absolute;left:0;bottom:12.5%;width:var(--bw);z-index:3;transform:translate3d(62vw,0,0)}
.boat-bob{position:relative;transform-origin:50% 92%}
.boat-bob img,.boat-cloth{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(20,60,60,.18))}
.boat-bob.has-cloth img{visibility:hidden}
.boat-bob.has-cloth .boat-cloth{position:absolute;inset:0}
/* Sun, moon, stars and clouds */
.sea-sun{position:absolute;left:var(--sun-x);top:var(--sun-y);width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#fff 28%,#ffe9ad 52%,rgba(255,214,130,0) 72%);
  box-shadow:0 0 50px 18px rgba(255,220,150,.45);
  opacity:calc(var(--sun-o) * (1 - var(--cover) * .8))}
.sea[data-mood=golden] .sea-sun,.sea[data-mood=dusk] .sea-sun{background:radial-gradient(circle,#fff6e0 26%,#ffc46a 52%,rgba(255,170,80,0) 74%);box-shadow:0 0 60px 22px rgba(255,170,90,.42)}
.sea[data-mood=dawn] .sea-sun{background:radial-gradient(circle,#fff3ea 26%,#ffb9a2 54%,rgba(255,160,140,0) 74%)}
.sea[data-mood=night] .sea-sun{display:none}
.cloud{position:absolute;height:26px;width:150px;border-radius:50%;background:var(--cloud);filter:blur(18px);z-index:0;
  opacity:calc((.1 + var(--cover) * .6) * (1 - var(--storm) * .8))}
.cloud.c1{top:15%;left:10%}
.cloud.c2{top:29%;left:62%;width:210px}
.cloud.c3{top:20%;left:38%;width:180px;height:30px}
.cloud.c4{top:38%;left:4%;width:240px;height:22px}
.cloud.c5{top:11%;left:78%;width:160px}
.sea-stars,.sea-moon,.boat-glow,.lamp,.glint{display:none}
@media(prefers-reduced-motion:no-preference){
  .sea:not(.sea-js) .sea-boat{animation:sea-sail 46s linear -17s infinite}
  .sea:not(.sea-js) .boat-bob{animation:sea-bob 5s ease-in-out infinite alternate}
  .sea:not(.sea-js) .wave-back{animation:sea-flow 26s linear infinite}
  .sea:not(.sea-js) .wave-front{animation:sea-flow 15s linear infinite}
  .cloud{animation:sea-cloud var(--cloud-dur) linear infinite alternate}
  .cloud.c2{animation-duration:calc(var(--cloud-dur) * 1.4)}
  .cloud.c3{animation-duration:calc(var(--cloud-dur) * .8)}
  .cloud.c4{animation-duration:calc(var(--cloud-dur) * 1.7)}
  .cloud.c5{animation-duration:calc(var(--cloud-dur) * .65)}
}
@keyframes sea-sail{from{transform:translate3d(calc(100vw + 30px),0,0)}to{transform:translate3d(calc(-1 * var(--bw) - 120px),0,0)}}
@keyframes sea-bob{from{transform:translateY(1px) rotate(-1.4deg)}to{transform:translateY(-6px) rotate(1.4deg)}}
@keyframes sea-flow{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes sea-cloud{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
@keyframes sea-lamp{from{opacity:.78}to{opacity:1}}
@keyframes sea-twinkle{from{opacity:.55}to{opacity:1}}
@media(max-width:700px){.sea{--bw:104px;height:236px}.sea:not(.sea-js) .sea-boat{animation-duration:34s}}
/* Night: stars, a moon and a lit boat */
.sea[data-mood=night] .sea-stars{display:block;position:absolute;inset:0 0 40% 0;z-index:0;opacity:calc(1 - var(--cover) * .85);background-image:radial-gradient(1.5px 1.5px at 8% 22%,#fff,transparent),radial-gradient(1px 1px at 17% 52%,#dfeff2,transparent),radial-gradient(1.5px 1.5px at 29% 14%,#fff,transparent),radial-gradient(1px 1px at 38% 40%,#dfeff2,transparent),radial-gradient(1.5px 1.5px at 47% 24%,#fff,transparent),radial-gradient(1px 1px at 58% 10%,#dfeff2,transparent),radial-gradient(1.5px 1.5px at 69% 46%,#fff,transparent),radial-gradient(1px 1px at 78% 18%,#dfeff2,transparent),radial-gradient(1.5px 1.5px at 91% 34%,#fff,transparent),radial-gradient(1px 1px at 96% 8%,#dfeff2,transparent)}
.sea[data-mood=night] .sea-moon{display:block;position:absolute;top:14%;right:11%;width:30px;height:30px;border-radius:50%;z-index:0;opacity:calc(1 - var(--cover) * .7);box-shadow:inset -9px -3px 0 0 #f6efd2,0 0 24px 4px rgba(246,239,210,.25)}
.sea[data-mood=night] .boat-bob img,.sea[data-mood=night] .boat-cloth{filter:brightness(.55) saturate(.85) contrast(1.05) drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.sea[data-mood=night] .boat-glow{display:block;position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 44% 66%,rgba(255,196,110,.5),transparent 42%),radial-gradient(circle at 88% 78%,rgba(255,190,100,.45),transparent 26%);-webkit-mask:url(../img/dhoni.webp) center/100% 100% no-repeat;mask:url(../img/dhoni.webp) center/100% 100% no-repeat}
.sea[data-mood=night] .lamp{display:block;position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ffe6a6;box-shadow:0 0 6px 3px rgba(255,205,120,.9),0 0 22px 10px rgba(255,170,70,.45)}
.sea[data-mood=night] .lamp.l1{left:90%;top:79%}
.sea[data-mood=night] .lamp.l2{left:66%;top:73%}
.sea[data-mood=night] .lamp.l3{left:33%;top:53%}
.sea[data-mood=night] .lamp.l4{left:5%;top:62%}
.sea[data-mood=night] .glint{display:block;position:absolute;left:6%;bottom:-8%;width:92%;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,120,.55),transparent);filter:blur(3px);z-index:3}
@media(prefers-reduced-motion:no-preference){
  .sea[data-mood=night] .lamp{animation:sea-lamp 1.9s ease-in-out infinite alternate}
  .sea[data-mood=night] .lamp.l2{animation-delay:-.6s}
  .sea[data-mood=night] .lamp.l3{animation-delay:-1.1s}
  .sea[data-mood=night] .sea-stars{animation:sea-twinkle 4s ease-in-out infinite alternate}
}
/* Before the script runs (or if it fails), follow the device's dark setting. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .sea:not(.sea-js){--sky-a:rgba(14,26,28,0);--sky-b:#14323d;--w-back:#17404a;--w-front:#1b525b;--crest:rgba(150,210,220,.35);--cloud:#9fc0cc;--veil:40,58,72}}
[data-theme=dark] .sea:not(.sea-js){--sky-a:rgba(14,26,28,0);--sky-b:#14323d;--w-back:#17404a;--w-front:#1b525b;--crest:rgba(150,210,220,.35);--cloud:#9fc0cc;--veil:40,58,72}
.sea.sea-js .sea-boat{top:0;bottom:auto;transform-origin:50% 91%;will-change:transform}

/* Header height: one set of numbers for every page.
   The home page carried its own shorter header (82px tall, 16px padding)
   under .lagoon-home, while every other page fell back to the taller
   defaults (98px / 18px). The logo is centred in that box, so on inner
   pages it sat a few pixels lower than on the home page. These rules give
   the inner pages the home page's box; the .lagoon-home rules above are
   more specific, so the home page itself is untouched. */
.site-header, .site-header .journal-header { min-height: 82px; }
/* 14px, not the home page's 16px: inner pages also show the tagline line
   under the name, which makes the text block 3.8px taller. Taking 2px off
   the top and bottom cancels that exactly, so the logo and the header's
   own height come out the same on every page. */
.site-header .journal-header { padding-block: 14px; }
@media (max-width: 800px) {
  /* The phone header already lines up at 16px; the tagline is small enough
     there that the logo centres in the same place. */
  .site-header .journal-header { min-height: 74px; padding-block: 16px; }
}

/* Phone: the same header on every page.
   The home page header is the one to match. Two things set it apart: it
   hides the tagline line under the name, and it lays the header out as a
   three-column grid with its own width and padding. Everywhere else kept
   the tagline, which made the block two lines tall, pushed the logo down
   and left the bar a different height. These rules give every page the home
   page's phone header. The .lagoon-home rules further up are more specific,
   so the home page itself is untouched. */
@media (max-width: 800px) {
  .site-header .wordmark small { display: none; }
  .site-header .journal-header {
    display: grid; grid-template-columns: 1fr auto 1fr;
    max-width: calc(100% - 32px); gap: 10px;
    min-height: 74px; padding-block: 16px; border: 0;
  }
  /* The home page also tightens the lettering; without it the word is wider
     and the logo beside it sits further left. */
  .site-header .wordmark { font-size: 32px; max-width: none; letter-spacing: -0.06em; }
}
@media (max-width: 520px) { .site-header .wordmark { font-size: 30px; } }

/* Phone: nudge the logo and name left.
   The header is three columns: menu and search on the left, the name in the
   middle, the account icon on the right. Two icons on the left against one
   on the right makes the left column 88px and the right only 34px, so the
   middle column -- and with it the logo and name -- was sitting about 25px
   right of the true centre of the screen. Matching the columns exactly
   would not fit the name on a 360px screen, so this moves it back by a set
   amount instead. It is an offset, not a margin: nothing else shifts. */
@media (max-width: 800px) {
  .site-header .wordmark { position: relative; left: -14px; }
}

/* Digits in the serif face.
   Cormorant Garamond ships old-style figures by default: digits drawn at
   x-height with descenders, so they sit among lowercase letters. In running
   text that is handsome, but in a short label it reads as a mistake --
   "PM 10" came out looking like "PM lo", and "PM 2.5" sat low and small
   beside the capitals. These ask the same font for lining figures, which it
   has: digits at capital height, all the same size. Harmless on the sans
   face, whose figures are already lining. */
h1, h2, h3,
.wordmark,
.aq-card-name,
.island-facts dd,
.start-card strong,
.stat strong {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}