:root {
  --ink:#faf6ee;--ink-mid:#f3ecdd;--ink-soft:#ffffff;
  --chalk:#1b2a2e;--chalk-dim:#33403f;
  --rust:#b34a26;--aegean:#0e5e7e;--aegean-lt:#0c6f86;--aegean-pale:#d8eef4;
  --stone:#5a6b6a;--gold:#8f6418;--white:#1b2a2e;--green:#277a4c;
  --hero-bg:linear-gradient(165deg,#cdeaf2 0%,#e9f4ef 48%,#faf6ee 100%);--on-accent:#fff;--btn-outline-border:rgba(27,42,46,.35);
  --tx-strong:#13333f;--tx-lead:#2a3a3a;--tx-body:rgba(27,42,46,.82);--tx-tip:rgba(27,42,46,.85);--tx-soft:rgba(27,42,46,.68);--tx-faint:rgba(27,42,46,.64);
  --f-serif:'Fraunces',Georgia,serif;
  --f-sans:'Hanken Grotesk',system-ui,sans-serif;
  --f-mono:'Spline Sans Mono','Courier New',monospace;
  --ease:cubic-bezier(.4,0,.2,1);--r:2px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);background:var(--ink);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,48px);background:rgba(10,22,40,.92);border-bottom:1px solid rgba(58,143,168,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-logo{display:flex;align-items:center;padding:0!important;text-decoration:none}
.nav-logo img{height:36px;width:auto;filter:brightness(0) invert(1);opacity:.92;transition:opacity .2s}
.nav-logo:hover img{opacity:1}
.nav-logo b{color:var(--aegean-lt);font-weight:400}
.nav-links{display:flex;gap:clamp(16px,3vw,36px);list-style:none}
.nav-links a{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,249,247,.6);transition:color .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--aegean-lt)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-live{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;color:#ef7d7d;text-transform:uppercase}
.nav-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#ef7d7d;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.nav-lang{font-family:var(--f-mono);font-size:.62rem;color:var(--stone);background:none;border:1px solid rgba(122,143,166,.3);padding:4px 9px;cursor:pointer;border-radius:var(--r);transition:all .3s}
.nav-lang:hover{border-color:var(--aegean);color:var(--aegean-lt)}
@media(max-width:640px){.nav-links{display:none}}
.ticker-wrap{position:fixed;top:60px;left:0;right:0;z-index:199;height:36px;background:rgba(20,37,61,.97);border-bottom:1px solid rgba(58,143,168,.18);overflow:hidden;display:flex;align-items:center}
.ticker-label{flex-shrink:0;padding:0 16px;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--aegean);border-right:1px solid rgba(58,143,168,.2);white-space:nowrap}
.ticker-track{display:flex;animation:ticker 40s linear infinite;gap:0}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:6px;padding:0 28px;border-right:1px solid rgba(58,143,168,.1);white-space:nowrap;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;color:var(--stone)}
.ticker-val{color:var(--aegean-lt);font-weight:500}
.ticker-good{color:var(--green)!important}
.ticker-warn{color:#e8a030!important}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.page{padding-top:96px;min-height:100vh}
.hero{position:relative;min-height:calc(100vh - 96px);display:grid;place-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,#0a1e35 0%,#0f3050 35%,#1a5a78 60%,#0d2640 85%,#080f1a 100%)}
.hero-water{position:absolute;bottom:0;left:0;right:0;height:38%;overflow:hidden}
.hero-water svg{position:absolute;bottom:0;width:100%}
.hero-content{position:relative;z-index:2;text-align:center;padding:0 clamp(16px,5vw,80px);max-width:900px}
.hero-kicker{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--aegean-lt);margin-bottom:clamp(14px,3vh,24px);opacity:0;animation:rise .9s var(--ease) .3s forwards}
.hero-h1{font-family:var(--f-serif);line-height:.92;margin-bottom:clamp(14px,3vh,24px);opacity:0;animation:rise .9s var(--ease) .5s forwards}
.hero-h1 .word-see{display:block;font-size:clamp(2.4rem,7vw,6rem);font-weight:400;color:rgba(250,249,247,.5);letter-spacing:.04em}
.hero-h1 .word-chania{display:block;font-size:clamp(5rem,16vw,13rem);font-weight:700;font-style:italic;color:var(--white);letter-spacing:-.02em;line-height:.88}
.hero-h1 .word-live{display:block;font-size:clamp(1.6rem,5vw,4rem);font-weight:400;color:var(--aegean-lt);letter-spacing:.12em;text-transform:uppercase;margin-top:8px;font-style:normal}
.hero-sub{font-size:clamp(.85rem,1.8vw,1rem);color:rgba(250,249,247,.55);margin-bottom:clamp(24px,5vh,40px);line-height:1.65;font-weight:300;opacity:0;animation:rise .9s var(--ease) .7s forwards}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:rise .9s var(--ease) .9s forwards}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;font-family:var(--f-sans);font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r);cursor:pointer;transition:all .3s var(--ease);border:none;text-decoration:none}
.btn-solid{background:var(--aegean);color:var(--white)}
.btn-solid:hover{background:var(--aegean-lt);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(250,249,247,.3)}
.btn-outline:hover{border-color:var(--aegean-lt);color:var(--aegean-lt);transform:translateY(-2px)}
.sec{padding:clamp(56px,8vh,96px) clamp(16px,5vw,64px);position:relative}
.sec-alt{background:var(--ink-mid)}
.sec-kicker{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aegean);margin-bottom:8px}
.sec-title{font-family:var(--f-serif);font-size:clamp(1.9rem,4.5vw,3rem);font-weight:400;line-height:1.08;margin-bottom:clamp(28px,5vh,48px);color:var(--white)}
.sec-title em{font-style:italic;color:var(--aegean-lt)}
.inner{max-width:1160px;margin:0 auto}
.sec-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(24px,4vh,40px)}
.see-all{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aegean);text-decoration:none;white-space:nowrap;transition:color .3s}
.see-all:hover{color:var(--aegean-lt)}
.today-grid{display:grid;grid-template-columns:1.35fr 1fr;border:1px solid rgba(58,143,168,.14);border-radius:3px;overflow:hidden}
.today-main{background:var(--ink-soft);padding:clamp(24px,4vw,40px)}
.today-date{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;color:var(--aegean);text-transform:uppercase;margin-bottom:14px}
.today-mood{font-family:var(--f-serif);font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:var(--white);margin-bottom:10px;line-height:1.1}
.today-mood em{font-style:italic;color:var(--gold)}
.today-desc{font-size:.85rem;line-height:1.75;color:rgba(250,249,247,.62);margin-bottom:22px}
.today-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.pill{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px;border:1px solid}
.pill-sea{border-color:var(--aegean);color:var(--aegean-lt);background:rgba(58,143,168,.08)}
.pill-gold{border-color:var(--gold);color:var(--gold);background:rgba(196,151,62,.08)}
.pill-green{border-color:var(--green);color:var(--green);background:rgba(74,158,92,.08)}
.today-tip{background:rgba(196,151,62,.07);border-left:2px solid var(--gold);padding:14px 18px;margin-bottom:24px;border-radius:0 2px 2px 0}
.today-tip-lbl{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.today-tip p{font-family:var(--f-serif);font-size:.98rem;font-style:italic;color:rgba(250,249,247,.82);line-height:1.55}
.today-slots{display:flex;flex-direction:column}
.today-slot{padding:18px 24px;border-bottom:1px solid rgba(58,143,168,.09);text-decoration:none;transition:background .25s var(--ease)}
.today-slot:last-child{border-bottom:none}
.today-slot:hover{background:rgba(58,143,168,.06)}
.slot-time{font-family:var(--f-mono);font-size:.53rem;letter-spacing:.12em;color:var(--aegean);text-transform:uppercase;margin-bottom:4px}
.slot-name{font-family:var(--f-serif);font-size:1rem;color:var(--white);margin-bottom:3px;line-height:1.25}
.slot-sub{font-size:.72rem;color:var(--stone)}
.beach-masonry{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:2px;background:rgba(58,143,168,.06);border-radius:3px;overflow:hidden}
.beach-hero-card{grid-row:1/3;position:relative;min-height:460px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;text-decoration:none}
.beach-small-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;text-decoration:none;min-height:224px}
.beach-card-bg{position:absolute;inset:0;transition:transform .6s var(--ease)}
.beach-hero-card:hover .beach-card-bg,.beach-small-card:hover .beach-card-bg{transform:scale(1.04)}
.beach-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.88) 0%,rgba(10,22,40,.1) 55%,transparent 100%)}
.beach-card-body{position:relative;z-index:1;padding:clamp(14px,2vw,22px)}
.beach-cond{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.beach-cond-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.beach-cond-txt{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase}
.beach-name{font-family:var(--f-serif);color:var(--white);line-height:1.1;margin-bottom:3px}
.beach-hero-card .beach-name{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700}
.beach-small-card .beach-name{font-size:clamp(1rem,2vw,1.3rem);font-weight:400}
.beach-area{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,249,247,.5)}
.beach-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.beach-tag{font-family:var(--f-mono);font-size:.48rem;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;background:rgba(58,143,168,.18);color:var(--aegean-lt);border-radius:2px}
.cam-grid{display:grid;grid-template-columns:2fr 1fr;gap:2px;background:rgba(224,85,85,.08);border:1px solid rgba(224,85,85,.12);border-radius:3px;overflow:hidden}
.cam-main{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0d2a40}
.cam-thumb-col{display:flex;flex-direction:column;gap:2px}
.cam-thumb{flex:1;position:relative;overflow:hidden;min-height:90px;cursor:pointer;text-decoration:none;display:block}
.cam-thumb-bg{position:absolute;inset:0;transition:transform .5s var(--ease)}
.cam-thumb:hover .cam-thumb-bg{transform:scale(1.06)}
.cam-thumb-overlay{position:absolute;inset:0;background:rgba(10,22,40,.38)}
.cam-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:5px;background:rgba(10,22,40,.82);border:1px solid rgba(224,85,85,.3);padding:4px 10px;border-radius:2px;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.08em;color:#ff6b6b;text-transform:uppercase}
.cam-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:#e05555;animation:blink 1.4s ease-in-out infinite}
.cam-info{position:absolute;bottom:16px;left:18px}
.cam-name{font-family:var(--f-serif);font-size:1.35rem;font-weight:400;color:var(--white)}
.cam-meta{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.08em;color:rgba(250,249,247,.5);text-transform:uppercase;margin-top:3px}
.cam-dot{position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 2s ease-in-out infinite}
.cam-label{position:absolute;bottom:10px;left:12px}
.cam-label-name{font-family:var(--f-serif);font-size:.88rem;color:var(--white)}
.cam-label-st{font-family:var(--f-mono);font-size:.48rem;text-transform:uppercase;color:rgba(250,249,247,.5)}
.wx-panel{background:var(--ink-soft);border:1px solid rgba(58,143,168,.14);border-radius:3px;overflow:hidden}
.wx-current{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.wx-now{padding:clamp(20px,3vw,32px);background:linear-gradient(135deg,var(--ink-mid),var(--ink-soft));border-right:1px solid rgba(58,143,168,.1)}
.wx-temp-big{font-family:var(--f-serif);font-size:clamp(3rem,6vw,4.5rem);font-weight:700;color:var(--white);line-height:1}
.wx-feels{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.1em;color:var(--stone);text-transform:uppercase;margin-bottom:10px}
.wx-desc{font-family:var(--f-serif);font-size:.95rem;font-style:italic;color:rgba(250,249,247,.65)}
.wx-stat{padding:clamp(18px,2.5vw,28px) clamp(14px,2vw,22px);border-right:1px solid rgba(58,143,168,.1);display:flex;flex-direction:column;justify-content:center}
.wx-stat:last-child{border-right:none}
.wx-stat-lbl{font-family:var(--f-mono);font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:8px}
.wx-stat-val{font-family:var(--f-serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:var(--aegean-lt);line-height:1;margin-bottom:3px}
.wx-stat-unit{font-family:var(--f-mono);font-size:.5rem;color:var(--stone);text-transform:uppercase}
.wx-stat-detail{font-size:.68rem;color:rgba(250,249,247,.38);margin-top:5px}
.wx-forecast{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid rgba(58,143,168,.1)}
.wx-day{padding:12px 8px;text-align:center;border-right:1px solid rgba(58,143,168,.06)}
.wx-day:last-child{border-right:none}
.wx-day.today{background:rgba(58,143,168,.07)}
.wx-day-name{font-family:var(--f-mono);font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:5px}
.wx-day.today .wx-day-name{color:var(--aegean)}
.wx-day-icon{font-size:1rem;margin-bottom:5px;display:block}
.wx-day-hi{font-family:var(--f-mono);font-size:.7rem;color:var(--white);font-weight:500}
.wx-day-lo{font-family:var(--f-mono);font-size:.58rem;color:var(--stone)}
.stories-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:2px;background:rgba(184,92,56,.07);border-radius:3px;overflow:hidden}
.story-hero{position:relative;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;text-decoration:none}
.story-hero-bg{position:absolute;inset:0;transition:transform .6s var(--ease)}
.story-hero:hover .story-hero-bg{transform:scale(1.03)}
.story-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.92) 0%,rgba(10,22,40,.15) 55%,transparent 100%)}
.story-body{position:relative;z-index:1;padding:28px}
.story-cat{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);margin-bottom:8px}
.story-title{font-family:var(--f-serif);font-size:clamp(1.25rem,2.5vw,1.85rem);font-weight:700;color:var(--white);line-height:1.15;margin-bottom:10px}
.story-excerpt{font-size:.78rem;line-height:1.6;color:rgba(250,249,247,.58);margin-bottom:14px}
.story-byline{font-family:var(--f-mono);font-size:.52rem;color:var(--stone);text-transform:uppercase;letter-spacing:.08em}
.story-cards{display:flex;flex-direction:column;gap:2px}
.story-card{background:var(--ink-soft);padding:22px;text-decoration:none;border-left:2px solid transparent;transition:all .28s var(--ease);flex:1;position:relative;overflow:hidden}
.story-card::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(58,143,168,.025) 24px);pointer-events:none}
.story-card:hover{background:var(--ink-mid);border-left-color:var(--rust)}
.story-card-cat{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aegean);margin-bottom:6px}
.story-card-title{font-family:var(--f-serif);font-size:.98rem;color:var(--white);line-height:1.3;margin-bottom:6px}
.story-card-exc{font-size:.73rem;color:var(--stone);line-height:1.5}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(196,151,62,.05);border-radius:3px;overflow:hidden}
.guide-card{background:var(--ink-soft);padding:clamp(22px,3vw,32px);text-decoration:none;border-bottom:2px solid transparent;transition:all .28s var(--ease);display:block}
.guide-card:hover{background:var(--ink);border-bottom-color:var(--gold)}
.guide-icon{font-size:1.5rem;display:block;margin-bottom:14px}
.guide-badge{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(196,151,62,.28);padding:3px 9px;border-radius:2px;display:inline-block;margin-bottom:12px}
.guide-title{font-family:var(--f-serif);font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:8px;line-height:1.2}
.guide-desc{font-size:.76rem;line-height:1.62;color:var(--stone);margin-bottom:14px}
.guide-count{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.08em;color:var(--aegean);text-transform:uppercase}
.native-ad{border:1px solid rgba(196,151,62,.18);border-radius:3px;padding:clamp(18px,3vw,28px) clamp(20px,3vw,32px);display:flex;align-items:center;gap:clamp(16px,3vw,32px);position:relative;background:var(--ink-soft)}
.native-ad-sponsor{position:absolute;top:10px;right:14px;font-family:var(--f-mono);font-size:.44rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(196,151,62,.4)}
.native-ad-lbl{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin-bottom:5px}
.native-ad-title{font-family:var(--f-serif);font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:5px}
.native-ad-desc{font-size:.76rem;color:var(--stone);line-height:1.5}
footer{background:#060e19;padding:clamp(48px,6vh,72px) clamp(16px,5vw,64px) clamp(24px,4vh,40px);position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(58,143,168,.18),transparent)}
.footer-grid{max-width:1160px;margin:0 auto clamp(36px,5vh,56px);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px)}
.footer-brand{font-family:var(--f-serif);font-size:1.65rem;color:var(--white);margin-bottom:9px}
.footer-brand b{color:var(--aegean-lt);font-weight:400}
.footer-tagline{font-family:var(--f-serif);font-style:italic;font-size:.82rem;color:var(--stone);margin-bottom:18px;line-height:1.5}
.footer-social{display:flex;gap:8px}
.soc-btn{width:30px;height:30px;border:1px solid rgba(58,143,168,.18);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--stone);cursor:pointer;transition:all .3s;text-decoration:none}
.soc-btn:hover{border-color:var(--aegean);color:var(--aegean-lt)}
.footer-col-title{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aegean);margin-bottom:14px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:9px}
.footer-links a{font-size:.78rem;color:var(--stone);text-decoration:none;transition:color .3s}
.footer-links a:hover{color:var(--white)}
.footer-bottom{max-width:1160px;margin:0 auto;padding-top:20px;border-top:1px solid rgba(58,143,168,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.08em;color:rgba(122,143,166,.45);text-transform:uppercase}
.footer-lang{display:flex;gap:12px}
.footer-lang a{font-family:var(--f-mono);font-size:.52rem;color:rgba(122,143,166,.45);text-decoration:none;text-transform:uppercase;transition:color .3s;letter-spacing:.08em}
.footer-lang a:hover{color:var(--aegean-lt)}
.footer-lang a.active{color:var(--aegean)}
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(10,22,40,.97);border-top:1px solid rgba(58,143,168,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.mob-nav-inner{display:flex;justify-content:space-around}
.mob-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:4px 12px;color:var(--stone);transition:color .25s;text-decoration:none}
.mob-btn.active{color:var(--aegean-lt)}
.mob-icon{font-size:1.15rem;line-height:1}
.mob-lbl{font-family:var(--f-mono);font-size:.46rem;letter-spacing:.1em;text-transform:uppercase}
.breadcrumb{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-bottom:18px}
.breadcrumb a{color:var(--aegean);text-decoration:none}
.breadcrumb span{margin:0 7px;opacity:.35}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.on{opacity:1;transform:none}
.d1{transition-delay:.1s}
.d2{transition-delay:.2s}
.d3{transition-delay:.3s}
.d4{transition-delay:.4s}
#xania-map{width:100%;height:520px;border-radius:0 0 3px 3px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:900px){.today-grid{grid-template-columns:1fr}.beach-masonry{grid-template-columns:1fr;grid-template-rows:auto}.beach-hero-card{grid-row:auto;min-height:300px}.beach-small-card{min-height:180px}.cam-grid{grid-template-columns:1fr}.cam-thumb-col{flex-direction:row}.cam-thumb{min-height:120px}.wx-current{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.stories-grid{grid-template-columns:1fr}.guide-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:600px){.guide-grid{grid-template-columns:1fr}.wx-current{grid-template-columns:1fr 1fr}.wx-forecast{grid-template-columns:repeat(4,1fr)}.footer-grid{grid-template-columns:1fr}.mob-nav{display:block}footer{padding-bottom:80px}.native-ad{flex-direction:column;text-align:center}.native-ad .btn{width:100%;justify-content:center}.hero-h1 .word-chania{font-size:clamp(3.5rem,18vw,7rem)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.hero-content *{animation:none!important;opacity:1!important;transform:none!important}}


/* ============================================================
   DIRECTION A — "Sun & Salt" light-theme corrections.
   Base CSS is dark-shaped: nav, ticker, hero, footer, mob-nav and
   photo overlays have hardcoded-dark backgrounds whose text comes
   from --white/--aegean-lt (now dark). Force light text back here.
   ============================================================ */
.btn-solid{background:var(--aegean);color:var(--on-accent)}
.btn-solid:hover{background:var(--aegean-lt);color:var(--on-accent)}
.btn-outline{color:var(--white);border-color:var(--btn-outline-border)}
.btn-outline:hover{border-color:var(--aegean);color:var(--aegean)}
/* Nav (stays dark) */
.nav-logo b{color:#7fd3e3}
.nav-links a:hover,.nav-links a.active{color:#7fd3e3}
.nav-lang{color:#cfe0e5;border-color:rgba(255,255,255,.28)}
.nav-lang:hover{color:#7fd3e3;border-color:#7fd3e3}
/* Ticker (stays dark) */
.ticker-label{color:#7fd3e3}
.ticker-item{color:#9fb4bb}
.ticker-val{color:#dff0f4}
.ticker-good{color:#7fe0a0!important}
.ticker-warn{color:#f0b860!important}
/* Hero -> daylight */
.hero-bg{background:var(--hero-bg)}
.hero-kicker{color:var(--aegean)}
.hero-h1 .word-see{color:var(--tx-faint)}
.hero-h1 .word-live{color:var(--aegean)}
.hero-sub{color:var(--tx-soft)}
/* Light card surfaces: kill leftover light-on-light text */
.today-desc{color:var(--tx-soft)}
.today-tip p{color:var(--tx-tip)}
.wx-desc{color:var(--tx-soft)}
.wx-stat-detail{color:var(--tx-soft)}
/* Photo-overlay text stays light */
.beach-name,.beach-area{color:#fff}
.beach-tag{color:#dff0f4}
.story-cat{color:#ffd9a0}
.story-title,.story-excerpt{color:#fff}
.story-byline{color:rgba(255,255,255,.72)}
.cam-name,.cam-label-name{color:#fff}
.cam-meta,.cam-label-st{color:rgba(255,255,255,.62)}
/* Footer (stays dark) */
.footer-brand b{color:#7fd3e3}
.footer-tagline{color:#9fb4bb}
.footer-col-title{color:#7fd3e3}
.footer-links a{color:#aebfc5}
.footer-links a:hover{color:#fff}
.footer-copy,.footer-lang a{color:rgba(255,255,255,.5)}
.footer-lang a:hover,.footer-lang a.active{color:#7fd3e3}
.soc-btn{color:#aebfc5;border-color:rgba(127,211,227,.25)}
.soc-btn:hover{color:#7fd3e3;border-color:#7fd3e3}
/* Mobile bottom nav (stays dark) */
.mob-btn{color:#9fb4bb}
.mob-btn.active{color:#7fd3e3}
/* Contact modal (stays dark) */
.contact-sub{color:#9fb4bb}
.contact-label{color:#7fd3e3}
.contact-close{color:#9fb4bb}

/* ============================================================
   DIRECTION A — interior-page corrections.
   Every interior template ships its own inline <style> with
   hardcoded light text (#fff/#EAF1F7/#D8E4EE/rgba(250,249,247,*)
   or var(--white), now dark) designed for a dark page.
   site.css loads BEFORE those inline blocks, so every rule here
   needs !important to win.
   Rule of thumb:
     - light text sitting on the LIGHT page / LIGHT (--ink-soft=#fff)
       cards  -> make DARK (invisible otherwise).
     - var(--white) (now #1b2a2e dark) sitting on a DARK photo hero
       or DARK chrome/badge/button  -> FORCE light.
   Dark-on-light palette matches the block above:
     headings var(--tx-strong) · lead/intro var(--tx-lead) · body var(--tx-body)
     tip var(--tx-tip) · muted/meta rgba(27,42,46,.6-.7).
   ============================================================ */

/* --- Stories (art-*) : hero art-h1/cat/sub/byline stay light (dark photo) --- */
.art-lead{color:var(--tx-lead)!important}
.art-body h2{color:var(--tx-strong)!important}
.art-body p{color:var(--tx-body)!important}
.art-tip p{color:var(--tx-tip)!important}

/* --- Areas (av-*) : hero av-h1/gr/tag stay light --- */
.av-intro{color:var(--tx-lead)!important}
.av-sec{color:var(--tx-strong)!important}
.av-body p{color:var(--tx-body)!important}
.it-act{color:var(--tx-strong)!important}

/* --- Hidden gems (hd-*) : hero hd-h1/gr/tag stay light --- */
.hd-intro{color:var(--tx-lead)!important}
.hd-sec-title{color:var(--tx-strong)!important}
.hd-body p{color:var(--tx-body)!important}
.hd-why li{color:var(--tx-body)!important}

/* --- Road trips (rt-*) : hero rt-h1/tag + rt-stat-v stay as-is --- */
.rt-intro{color:var(--tx-lead)!important}
.rt-sec{color:var(--tx-strong)!important}

/* --- Shared light-surface blocks across av/hd/rt --- */
.tip-box p{color:var(--tx-tip)!important}
.faq-q{color:var(--tx-strong)!important}
.faq-a{color:var(--tx-body)!important}

/* --- Beach detail (beach-*) : hero text on a very dark photo -> FORCE light --- */
.beach-hero-body .beach-tagline{color:#7fd3e3!important}
.beach-hero-body .beach-h1{color:#fff!important}
.beach-hero-body .beach-h1 em{color:#7fd3e3!important}
/* beach detail body (light page) -> dark */
.beach-desc-block p{color:var(--tx-body)!important}
.beach-tip-box p{color:var(--tx-tip)!important}
/* primary CTA = dark text on dark-teal --aegean button -> light */
.beach-cta-primary{color:#fff!important}

/* --- Beaches index : featured/listing panel body is a LIGHT card.
       Scope under .beach-body so the over-photo .beach-name-top
       (and homepage photo cards) keep their light text. --- */
.beach-body .beach-name{color:var(--tx-strong)!important}
.beach-body .beach-name-gr{color:var(--tx-soft)!important}
.beach-body .beach-desc{color:var(--tx-body)!important}
.beach-body .b-stat-l{color:var(--tx-soft)!important}
.beach-body .b-stat-v{color:var(--tx-strong)!important}
.beach-card .beach-tip p{color:var(--tx-tip)!important}

/* --- Guide stays (stay-*) : name on light card stays dark (fine) --- */
.stay-desc{color:var(--tx-soft)!important}
.stay-tip p{color:var(--tx-tip)!important}
/* price = var(--white) on a DARK badge; cta = var(--white) on --aegean btn -> light */
.stay-price{color:#fff!important}
.stay-cta{color:var(--on-accent)!important}

/* --- Today / briefing (tdy-*) : *-name/*-v var(--white) on light cards stay dark.
       Fix only light text on light cards + dark-teal tag on dark badge. --- */
.botd-why{color:var(--tx-soft)!important}
.dcard-desc{color:var(--tx-soft)!important}
.dcard-tag{color:#7fd3e3!important}
.tipcard p{color:var(--tx-tip)!important}
.chal-d{color:var(--tx-body)!important}


/* ============================================================
   DIRECTION C — dual theme. Light is the default; this dark
   palette swaps in (a) automatically via the OS setting when the
   visitor has not chosen, and (b) explicitly when they pin a
   choice with the nav toggle (data-theme on <html>). Typography
   (Fraunces / Hanken Grotesk / Spline Sans Mono) stays constant.
   ============================================================ */
:root[data-theme="dark"]{--ink:#0e1b26;--ink-mid:#162935;--ink-soft:#1e3543;--chalk:#f3eee3;--chalk-dim:#dcd6c8;--rust:#e0a24a;--aegean:#5fc9d6;--aegean-lt:#9be3ec;--aegean-pale:#bfeaf0;--stone:#a7b6bd;--gold:#e0a24a;--white:#f3eee3;--green:#5dbe82;--hero-bg:linear-gradient(160deg,#0a1e35 0%,#0f3050 35%,#1a5a78 60%,#0d2640 85%,#080f1a 100%);--on-accent:#06222a;--btn-outline-border:rgba(243,238,227,.3);--tx-strong:#f3eee3;--tx-lead:rgba(243,238,227,.9);--tx-body:rgba(243,238,227,.82);--tx-tip:rgba(243,238,227,.86);--tx-soft:rgba(243,238,227,.66);--tx-faint:rgba(243,238,227,.5);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink:#0e1b26;--ink-mid:#162935;--ink-soft:#1e3543;--chalk:#f3eee3;--chalk-dim:#dcd6c8;--rust:#e0a24a;--aegean:#5fc9d6;--aegean-lt:#9be3ec;--aegean-pale:#bfeaf0;--stone:#a7b6bd;--gold:#e0a24a;--white:#f3eee3;--green:#5dbe82;--hero-bg:linear-gradient(160deg,#0a1e35 0%,#0f3050 35%,#1a5a78 60%,#0d2640 85%,#080f1a 100%);--on-accent:#06222a;--btn-outline-border:rgba(243,238,227,.3);--tx-strong:#f3eee3;--tx-lead:rgba(243,238,227,.9);--tx-body:rgba(243,238,227,.82);--tx-tip:rgba(243,238,227,.86);--tx-soft:rgba(243,238,227,.66);--tx-faint:rgba(243,238,227,.5);}}
/* Nav theme toggle button (nav is dark in both themes) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:none;border:1px solid rgba(255,255,255,.28);border-radius:var(--r);color:#cfe0e5;cursor:pointer;font-size:.95rem;line-height:1;transition:border-color .3s,color .3s}
.theme-toggle:hover{border-color:#7fd3e3;color:#7fd3e3}
.theme-toggle:focus-visible{outline:2px solid #7fd3e3;outline-offset:2px}


/* ============================================================
   WCAG 2.2 AA
   ============================================================ */
.skip-link{position:absolute;left:8px;top:-48px;z-index:300;background:var(--aegean);color:var(--on-accent);padding:10px 16px;border-radius:var(--r);font-family:var(--f-sans);font-size:.8rem;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:8px;outline:2px solid #7fd3e3;outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--aegean-lt);outline-offset:2px;border-radius:2px}
.nav a:focus-visible,.nav button:focus-visible,.mob-btn:focus-visible,footer a:focus-visible,.ticker-track a:focus-visible{outline-color:#7fd3e3}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-lang{min-height:24px;min-width:24px}
.soc-btn{width:32px;height:32px}
@media(max-width:600px){.mob-btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){.nav-live::before,.cam-badge::before,.cam-dot,[style*="animation:blink"],[style*="animation: blink"]{animation:none!important}}

/* ============================================================
   --- WCAG 2 AA contrast + link fixes ---
   Page-specific <style> blocks are emitted into each page <head> AFTER this
   shared stylesheet, so they win the cascade on equal specificity; !important
   is required here to override them (and the inline style attribute on the
   advertisement label). Every value below is verified legible in BOTH the
   light and dark themes.
   ============================================================ */

/* A2  Beach distance badge sits on a dark scrim over a beach photo, but its
   text used --white (which is DARK in the light theme) -> invisible. The scrim
   is dark in both themes, so force a fixed light text colour. */
.beach-dist-badge{color:#faf6ee !important}

/* A6/A7/A8  Live "Your Day, Planned" slots: a translucent-dark overlay over a
   WHITE card composited to a mid-grey that failed the dark slot text. Lighten
   the overlay to a faint tint so it tracks the card colour in either theme;
   the slot's own --aegean/--stone/--white text then clears 4.5:1. */
.pl-slot{background:rgba(58,143,168,.08) !important}

/* A9/A10  Sunset score chips: same translucent-dark-over-white problem. */
.sc-score{background:rgba(58,143,168,.08) !important}

/* A5  Today's Challenge title/button used a hardcoded mid-green on a light
   card (3.31:1). Use the theme-aware --green (dark-on-light / light-on-dark). */
.chal-t,.chal-btn{color:var(--green) !important}

/* A4  Advertisement label was near-transparent grey (1.34:1) on the page bg.
   Use theme-aware --stone, which passes on both the light and dark body. */
.ad-slot>div{color:var(--stone) !important}

/* A11  Floating "contact" button: several per-page <style> blocks hardcode
   color:#fff on background:var(--aegean). In the dark theme --aegean becomes a
   light teal (#5fc9d6) so white text fails (1.94:1). Force the theme-aware
   --on-accent token (=#fff in light, dark ink in dark) used by index.html. */
.contact-btn{color:var(--on-accent) !important}

/* B  link-in-text-block: links embedded in prose / breadcrumb trails / footer
   text rows are distinguished from surrounding text by colour alone (<3:1).
   Add a non-colour cue (underline). Scoped to text-block contexts so nav,
   buttons and cards are untouched. */
.breadcrumb a{text-decoration:underline;text-underline-offset:.18em}
/* Prose/content links are distinguished from surrounding body text by colour
   alone. Add an underline (non-colour cue). Scoped to in-prose anchors inside
   <main> (paragraph/list text, and inline-coloured accent links), so nav,
   footer, buttons and whole-card link wrappers stay clean. */
main p a:not(.btn):not(.see-all),
main li a:not(.btn),
main a[href^="mailto:"]:not(.btn),
.alt-contact a,
main a[style*="aegean"]:not(.btn){text-decoration:underline !important;text-underline-offset:.18em}

/* The hero CTA reveal animates opacity 0->1; a contrast snapshot taken mid-fade
   sees the solid "Watch Live" button composited onto the hero gradient and
   reports a transient sub-threshold ratio. Reveal via transform only (opacity
   stays 1) so the button label is fully legible at every frame. Home hero only. */
.hero-ctas{opacity:1;animation-name:rise-up;animation-fill-mode:both}
@keyframes rise-up{from{transform:translateY(16px)}to{transform:none}}