/*
Theme Name: Princess Island Guide
Theme URI: https://princessislandguide.com/
Description: Bespoke coastal theme for princessislandguide.com — the Princes' Islands (Adalar) travel guide. Static-site design ported to a classic WordPress theme (shared header/footer, per-page SEO + JSON-LD).
Author: Princess Island Guide
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: princess-island-guide
*/

/* ============================================================
   PRINCESS ISLAND GUIDE — "Adalı" theme
   Modern coastal · Aegean blue + sun gold + deep navy
   Maritime accents: ferry route lines + boarding-pass cards
   Display: Bricolage Grotesque · Body: Nunito Sans · Labels: Oswald
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --sky:#e9f2f5;         /* page ground (pale sky) */
  --sky-2:#dceaef;
  --paper:#ffffff;       /* raised surface */
  --paper-2:#f4f9fa;
  --ink:#0b2438;         /* deep navy — headings/text on light */
  --ink-2:#26425a;       /* softer navy */
  --stone:#5a6f7a;       /* muted body text */
  --stone-2:#8298a2;     /* faint */
  --blue:#0f66ab;        /* primary Aegean blue */
  --blue-d:#0b5493;      /* hover */
  --blue-t:#e2eef7;      /* blue tint bg */
  --navy:#0b2438;        /* dark sections */
  --navy-2:#123353;      /* dark section gradient partner */
  --sun:#f4b63a;         /* sun gold pop */
  --sun-d:#e5a41f;
  --coral:#e2543a;       /* maritime warm accent (sparingly) */
  --foam:#7fb3ba;        /* soft teal-foam */
  --line:#cfe0e6;        /* hairline on sky */
  --line-2:#e5eef1;      /* hairline on white */
  --ok:#1f9d78;

  --font-display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --font-body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-label:"Oswald","Arial Narrow",sans-serif;

  --wrap:1180px; --wrap-narrow:780px;
  --r:20px; --r-sm:12px; --r-lg:28px;
  --sh-sm:0 1px 2px rgba(11,36,56,.06), 0 4px 14px rgba(11,36,56,.06);
  --sh:0 10px 34px rgba(11,36,56,.10);
  --sh-lg:0 30px 70px rgba(11,36,56,.18);
  --sh-blue:0 14px 34px rgba(15,102,171,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--sky); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{display:block; max-width:100%}
a{color:var(--blue); text-decoration:none; transition:color .18s var(--ease)}
a:hover{color:var(--blue-d)}
ul,ol{padding-left:1.1em}
strong{font-weight:800; color:var(--ink)}
hr{border:0; border-top:1px solid var(--line); margin:2.4rem 0}
:focus-visible{outline:3px solid var(--sun); outline-offset:2px; border-radius:4px}
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:16px; top:16px; z-index:200; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px}

/* ---------- 3. Type ---------- */
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); line-height:1.04;
  font-weight:800; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.5rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem); letter-spacing:-.015em}
h4{font-size:1.16rem; letter-spacing:-.01em}
p{margin:0 0 1.15rem}
.lead{font-size:1.22rem; line-height:1.6; color:var(--ink-2)}
.muted{color:var(--stone)}

.eyebrow{font-family:var(--font-label); font-weight:600; font-size:.86rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:.7em; margin:0 0 1rem}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--sun)}
.eyebrow--sun{color:var(--sun-d)}
.eyebrow--light{color:var(--sun)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.narrow{max-width:var(--wrap-narrow); margin-inline:auto}
.section{padding:clamp(3.6rem,7vw,6.5rem) 0}
.section--tight{padding:clamp(2.4rem,4vw,3.4rem) 0}
.section--navy{background:linear-gradient(160deg,var(--navy),var(--navy-2)); color:#cfe0ea}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--sky2{background:var(--sky-2)}
.section--paper{background:var(--paper)}
.sec-head{max-width:640px; margin-bottom:2.6rem}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head p{color:var(--stone); font-size:1.1rem; margin:.4rem 0 0}
.grid{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.text-center{text-align:center}
.mt1{margin-top:1rem}.mt2{margin-top:1.8rem}

/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-body);
  font-weight:800; font-size:1rem; line-height:1; padding:15px 26px; border-radius:999px;
  border:2px solid transparent; cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease); white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--blue); color:#fff; box-shadow:var(--sh-blue)}
.btn--primary:hover{background:var(--blue-d); color:#fff; transform:translateY(-2px)}
.btn--sun{background:var(--sun); color:var(--navy)}
.btn--sun:hover{background:var(--sun-d); color:var(--navy); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue); background:var(--paper)}
.btn--light{background:#fff; color:var(--navy)} .btn--light:hover{transform:translateY(-2px); color:var(--navy)}
.btn--onnavy{background:var(--sun); color:var(--navy)} .btn--onnavy:hover{background:var(--sun-d); color:var(--navy); transform:translateY(-2px)}
.btn--block{width:100%; justify-content:center}
.btn--lg{padding:17px 32px; font-size:1.06rem}
.arrow{transition:transform .18s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- 6. Header ---------- */
.topbar{background:var(--navy); color:#b9cdd8}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:38px; font-family:var(--font-label); font-weight:500; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase}
.topbar__route{display:flex; align-items:center; gap:9px; flex-wrap:wrap; overflow:hidden}
.topbar__route .dot{width:5px;height:5px;border-radius:50%;background:var(--foam)}
.topbar__route b{color:#fff; font-weight:600}
.topbar__link{color:var(--sun); display:inline-flex; align-items:center; gap:.4em}
.topbar__link:hover{color:#fff}
@media(max-width:720px){.topbar{display:none}}

.site-header{position:sticky; top:0; z-index:80; background:rgba(233,242,245,.82);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1.4rem; height:74px}
.brand{display:flex; align-items:center; gap:.62rem; flex-shrink:0; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand__mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--blue),var(--navy)); color:#fff; box-shadow:var(--sh-sm)}
.brand__name{font-family:var(--font-display); font-weight:800; font-size:1.16rem; line-height:1; letter-spacing:-.02em; display:block}
.brand__name span{color:var(--blue)}
.brand__sub{font-family:var(--font-label); font-weight:500; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--stone); display:block; margin-top:3px}
.nav__menu{display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0}
.nav__menu a{font-weight:700; font-size:.96rem; color:var(--ink-2); padding:9px 13px; border-radius:10px}
.nav__menu a:hover{color:var(--blue); background:var(--blue-t)}
.nav__menu a.is-active{color:var(--blue)}
.nav__actions{display:flex; align-items:center; gap:.7rem}
.nav__cta{padding:12px 20px}
.nav__toggle{display:none; width:44px;height:44px; border:1px solid var(--line); border-radius:11px;
  background:var(--paper); cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.nav__toggle span{width:20px;height:2px;background:var(--ink); border-radius:2px; transition:.2s var(--ease)}
@media(max-width:1000px){
  .nav__menu{position:fixed; inset:112px 16px auto 16px; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:var(--sh-lg);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s var(--ease)}
  .nav__menu.open{transform:none; opacity:1; pointer-events:auto}
  .nav__menu a{padding:13px 15px; font-size:1.05rem}
  .nav__cta{display:none}
  .nav__toggle{display:flex}
}

/* ---------- 7. Hero ---------- */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(90% 120% at 100% 0%, #cfe7ee 0%, rgba(207,231,238,0) 55%),
  linear-gradient(180deg,var(--sky),var(--sky-2))}
.hero__in{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding:clamp(2.6rem,5vw,4.6rem) 0 clamp(4rem,7vw,6rem)}
.hero__sun{position:absolute; top:-70px; right:-40px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--sun) 0%,#f6c765 55%,rgba(244,182,58,0) 72%); opacity:.5; pointer-events:none}
.hero h1{margin-bottom:.35em}
.hero h1 .u{position:relative; white-space:nowrap; color:var(--blue)}
.hero h1 .u::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.13em;
  background:var(--sun); border-radius:3px; opacity:.9}
.hero__lead{font-size:1.24rem; line-height:1.55; color:var(--ink-2); max-width:32ch; margin:0 0 1.9rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem}
.hero__trust{margin:1.7rem 0 0; display:flex; align-items:center; gap:.6rem; font-size:.94rem; color:var(--stone)}
.hero__trust svg{color:var(--sun-d)}
@media(max-width:900px){.hero__in{grid-template-columns:1fr; gap:34px}}

/* Boarding-pass card (maritime accent) */
.pass{background:var(--paper); border-radius:var(--r); box-shadow:var(--sh-lg); overflow:hidden; position:relative}
.pass__top{background:linear-gradient(150deg,var(--navy),var(--navy-2)); color:#fff; padding:20px 22px; position:relative}
.pass__top .k{font-family:var(--font-label); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--foam)}
.pass__top .v{font-family:var(--font-display); font-weight:800; font-size:1.5rem; margin-top:2px}
.pass__stamp{position:absolute; top:16px; right:18px; width:56px;height:56px; border-radius:50%;
  border:2px solid var(--sun); color:var(--sun); display:grid; place-items:center; transform:rotate(-10deg);
  font-family:var(--font-label); font-weight:600; font-size:.56rem; letter-spacing:.05em; text-transform:uppercase; text-align:center; line-height:1.2}
.pass__perf{height:0; border-top:2px dashed var(--line); position:relative}
.pass__perf::before,.pass__perf::after{content:""; position:absolute; top:-11px; width:22px;height:22px; border-radius:50%; background:var(--sky)}
.pass__perf::before{left:-11px} .pass__perf::after{right:-11px}
.pass__body{padding:20px 22px 22px}
.pass__row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line-2)}
.pass__row:first-child{border-top:0}
.pass__row .lbl{font-family:var(--font-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; color:var(--stone)}
.pass__row .val{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.05rem}
.pass__row .val.blue{color:var(--blue)}
.pass__cta{margin-top:16px}

/* ---------- 8. Ferry route line (signature) ---------- */
.routeline{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); padding:22px clamp(16px,3vw,30px); margin-top:-38px; position:relative; z-index:5}
.routeline__title{font-family:var(--font-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-size:.76rem; color:var(--stone); margin:0 0 16px; display:flex; align-items:center; gap:.6em}
.routeline__title svg{color:var(--blue)}
.stops{display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding-bottom:6px}
.stop{flex:1 0 auto; min-width:96px; position:relative; text-align:center; padding-top:26px}
.stop::before{content:""; position:absolute; top:7px; left:50%; right:-50%; height:3px; background:var(--line);
  background-image:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.stop:last-child::before{display:none}
.stop .pin{position:absolute; top:0; left:50%; transform:translateX(-50%); width:16px;height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--blue)}
.stop.port .pin{border-color:var(--stone)}
.stop.end .pin{background:var(--sun); border-color:var(--sun-d); width:19px;height:19px; top:-1px}
.stop .nm{font-family:var(--font-display); font-weight:800; font-size:.95rem; color:var(--ink); line-height:1.1}
.stop .ty{font-family:var(--font-label); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.62rem; color:var(--stone-2); margin-top:2px}

/* ---------- 9. Island cards ---------- */
.isle{position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease); color:var(--ink)}
.isle:hover{transform:translateY(-5px); box-shadow:var(--sh-lg); color:var(--ink)}
.isle__media{aspect-ratio:16/10; background:linear-gradient(150deg,var(--blue-t),var(--sky-2)); position:relative;
  display:grid; place-items:center; color:var(--blue); font-family:var(--font-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem}
.isle__tag{position:absolute; top:12px; left:12px; background:var(--navy); color:#fff; font-family:var(--font-label);
  font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.66rem; padding:5px 10px; border-radius:7px}
.isle__b{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.isle__b h3{margin:0 0 .3em}
.isle__b p{color:var(--stone); font-size:.96rem; margin:0 0 1rem}
.isle__link{margin-top:auto; font-family:var(--font-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:.76rem; color:var(--blue); display:inline-flex; align-items:center; gap:.5em}
.isle:hover .isle__link .arrow{transform:translateX(3px)}

/* pills */
.pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{font-family:var(--font-display); font-weight:800; font-size:.95rem; padding:11px 16px; border-radius:12px;
  background:var(--paper); border:2px solid var(--line); color:var(--ink)}
.pill.on{background:var(--sun); border-color:var(--sun); color:var(--navy)}

/* ---------- 10. Value blocks ---------- */
.value{display:flex; gap:16px; align-items:flex-start}
.value__ico{flex:none; width:52px;height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--blue-t); color:var(--blue)}
.value__ico.sun{background:#fdf0d3; color:var(--sun-d)}
.value h3{margin:0 0 .25em; font-size:1.28rem}
.value p{margin:0; color:var(--stone); font-size:.98rem}

/* ---------- 11. Split / with-aside ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.aside-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:40px; align-items:start}
@media(max-width:900px){.aside-grid{grid-template-columns:1fr}}
.media-ph{border-radius:var(--r); background:linear-gradient(150deg,var(--blue-t),var(--sky-2));
  min-height:300px; display:grid; place-items:center; color:var(--blue); font-family:var(--font-label);
  font-weight:500; letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; text-align:center; padding:24px; border:1px solid var(--line)}

/* steps list */
.steps{list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-direction:column; gap:16px}
.steps li{display:flex; gap:15px; align-items:flex-start}
.steps .n{flex:none; width:34px;height:34px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--font-display); font-weight:800; display:grid; place-items:center; font-size:.95rem}
.steps h4{margin:0 0 .15em} .steps p{margin:0; color:var(--stone); font-size:.96rem}

/* ---------- 12. Tours / boarding-pass CTA (money) ---------- */
.book{background:var(--paper); border-radius:var(--r); box-shadow:var(--sh-lg); border:1px solid var(--line-2);
  overflow:hidden; position:sticky; top:96px}
.book__top{background:linear-gradient(150deg,var(--blue),var(--navy)); color:#fff; padding:20px 22px}
.book__tag{display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--sun)}
.book__top h3{color:#fff; margin:.35rem 0 .2rem}
.book__top p{margin:0; color:#cfe0ea; font-size:.95rem}
.book__body{padding:18px 22px 22px}
.book__list{list-style:none; padding:0; margin:0 0 16px; font-size:.95rem}
.book__list li{display:flex; gap:.5em; padding:6px 0; color:var(--ink-2)}
.book__list svg{color:var(--ok); flex:none; margin-top:3px}
.book__note{text-align:center; font-size:.84rem; color:var(--stone); margin:12px 0 0}

/* GYG widget frame */
.gyg{background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); padding:22px; box-shadow:var(--sh-sm)}

/* ---------- 13. Plan cards ---------- */
.plan{display:flex; flex-direction:column; gap:14px; background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r); padding:24px; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease); color:var(--ink)}
.plan:hover{transform:translateY(-4px); box-shadow:var(--sh); color:var(--ink)}
.plan__ico{width:48px;height:48px; border-radius:13px; background:var(--navy); color:var(--sun); display:grid; place-items:center}
.plan h3{margin:0} .plan p{margin:0; color:var(--stone); font-size:.97rem}
.plan__link{margin-top:auto; font-weight:800; color:var(--blue); display:inline-flex; align-items:center; gap:.4em}

/* ---------- 14. Ad slot ---------- */
.ad{border:1.5px dashed var(--line); border-radius:var(--r); background:var(--paper-2);
  min-height:104px; display:grid; place-items:center; color:var(--stone-2); font-family:var(--font-label);
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; text-align:center; padding:16px}

/* ---------- 15. FAQ ---------- */
.faqs{display:grid; gap:12px; max-width:860px; margin-inline:auto}
.faq{background:var(--paper); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; transition:border-color .2s}
.faq.open{border-color:var(--blue)}
.faq__q{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:19px 22px;
  font-family:var(--font-display); font-weight:800; font-size:1.08rem; color:var(--ink); display:flex;
  align-items:center; justify-content:space-between; gap:16px; letter-spacing:-.01em}
.faq__q::after{content:""; flex:none; width:12px;height:12px; border-right:2.5px solid var(--blue);
  border-bottom:2.5px solid var(--blue); transform:rotate(45deg); transition:transform .2s var(--ease); margin-top:-4px}
.faq.open .faq__q::after{transform:rotate(-135deg); margin-top:2px}
.faq__a{max-height:0; overflow:hidden; transition:max-height .28s var(--ease)}
.faq__a-in{padding:0 22px 20px; color:var(--stone)}
.faq__a-in p{margin:0}

/* ---------- 16. Map ---------- */
.mapframe{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-sm); background:var(--paper)}
.mapframe iframe{display:block; width:100%; height:420px; border:0}

/* ---------- 17. CTA band ---------- */
.cta-band{position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--navy),var(--navy-2)); color:#fff; padding:clamp(30px,5vw,52px);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.cta-band h3{color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); margin:0 0 .3em}
.cta-band p{margin:0; color:#cfe0ea; max-width:52ch}
.cta-band__sun{position:absolute; right:-50px; top:-50px; width:200px;height:200px; border-radius:50%;
  background:radial-gradient(circle,var(--sun) 0%,rgba(244,182,58,0) 70%); opacity:.35}

/* ---------- 18. Wave divider ---------- */
.wave{display:block; width:100%; height:44px; color:var(--sky)}
.wave--paper{color:var(--paper)}

/* ---------- 19. Footer ---------- */
.site-footer{background:linear-gradient(180deg,var(--navy),#081a2b); color:#9fb6c4; padding:56px 0 30px; position:relative; overflow:hidden}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer__brand .brand{color:#fff}
.footer__brand .brand__name{color:#fff} .footer__brand .brand__name span{color:var(--sun)}
.footer__brand .brand__sub{color:#7f97a5}
.footer__brand p{margin:1rem 0 1.2rem; font-size:.94rem; max-width:34ch; color:#9fb6c4}
.footer__social{display:flex; gap:10px}
.footer__social a{width:38px;height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center; color:#cfe0ea}
.footer__social a:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.footcol h4{color:#fff; font-family:var(--font-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin:0 0 1rem}
.footcol ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem}
.footcol a{color:#9fb6c4; font-size:.95rem} .footcol a:hover{color:var(--sun)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.86rem; color:#7f97a5}
.footer__bottom .disc{max-width:60ch}

/* ---------- 20. Breadcrumb + page hero (interior pages) ---------- */
.crumb{font-family:var(--font-label); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:.74rem; color:var(--stone)}
.crumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:.5em; padding:0; margin:0}
.crumb li::after{content:"›"; margin-left:.5em; color:var(--stone-2)}
.crumb li:last-child::after{display:none}
.page-hero{background:linear-gradient(180deg,var(--sky),var(--sky-2)); padding:clamp(2rem,4vw,3.2rem) 0 clamp(2.4rem,5vw,3.6rem)}
.page-hero h1{margin:.6rem 0 .4rem}
.page-hero p{max-width:60ch; color:var(--ink-2); font-size:1.14rem; margin:0}

/* ---------- 21. Reveal ---------- */
.reveal{opacity:1}
.reveal--armed{opacity:0; transform:translateY(18px)}
.reveal--armed.in{opacity:1; transform:none; transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}
  .reveal,.reveal--armed{opacity:1!important; transform:none!important}}

/* ---------- 22. Interior article (prose) ---------- */
.prose{font-size:1.07rem; line-height:1.72}
.prose h2{margin:2.3rem 0 .7rem; font-size:clamp(1.55rem,2.6vw,2.05rem)}
.prose h3{margin:1.8rem 0 .5rem; font-size:clamp(1.25rem,2.1vw,1.5rem)}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{margin:0 0 1.25rem; padding-left:1.25em}
.prose li{margin-bottom:.5rem}
.prose a{font-weight:700; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--blue)}
.prose > .lead:first-child,.prose .lead{color:var(--ink-2)}

/* key-facts panel (full-width card at the top of an article) */
.factbox{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm);
  padding:22px 24px; margin:0 0 2rem}
.factbox h3{font-family:var(--font-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.76rem; color:var(--blue); margin:0 0 1rem}
.factbox dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px 24px; margin:0}
.factbox dt{font-family:var(--font-label); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:.7rem; color:var(--stone); margin:0}
.factbox dd{margin:.15rem 0 0; font-weight:800; color:var(--ink); font-size:1.04rem; line-height:1.25}

/* tables */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); margin:0 0 1.5rem}
.table{width:100%; border-collapse:collapse; font-size:.97rem; min-width:440px}
.table th,.table td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--line-2); vertical-align:top}
.table thead th{font-family:var(--font-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:.74rem; color:var(--stone); background:var(--paper-2)}
.table tbody tr:last-child td,.table tr:last-child td{border-bottom:0}
.table td strong{color:var(--ink)}

/* callout */
.callout{display:flex; gap:14px; align-items:flex-start; background:var(--blue-t); border:1px solid #c4dcee;
  border-radius:var(--r); padding:16px 19px; margin:1.5rem 0}
.callout .ico{flex:none; color:var(--blue); margin-top:2px}
.callout p{margin:0; color:var(--ink-2)}

/* tour type cards */
.tcard{display:flex; flex-direction:column; gap:11px; background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r); padding:22px; box-shadow:var(--sh-sm)}
.tcard .meta{font-family:var(--font-label); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.7rem; color:var(--blue)}
.tcard h3{margin:0; font-size:1.24rem}
.tcard p{margin:0; color:var(--stone); font-size:.95rem}
.tcard .btn{margin-top:auto}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.gallery figure{margin:0}
.gallery .ph{aspect-ratio:4/3; border-radius:var(--r-sm); background:linear-gradient(150deg,var(--blue-t),var(--sky-2));
  display:grid; place-items:center; color:var(--blue); font-family:var(--font-label); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; text-align:center; padding:14px; border:1px solid var(--line)}

/* contact form */
.cform{display:flex; flex-direction:column; gap:14px; max-width:540px; margin:1.4rem 0}
.cform label{font-weight:800; font-size:.92rem; margin-bottom:-6px}
.cform input,.cform textarea{width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:1rem; background:var(--paper); color:var(--ink)}
.cform input:focus,.cform textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-t)}

/* small helpers */
.note{font-size:.9rem; color:var(--stone)}
.verify{font-size:.88rem; color:var(--stone); font-style:italic}
.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin:1.2rem 0}

/* inline affiliate module (transfers, eSIM, hotel CTA) */
.aff{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  background:linear-gradient(150deg,var(--paper),var(--paper-2)); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 24px; margin:1.7rem 0; box-shadow:var(--sh-sm)}
.aff__ico{flex:none; width:48px; height:48px; border-radius:13px; background:var(--navy); color:var(--sun);
  display:grid; place-items:center}
.aff__t{flex:1 1 260px}
.aff__t h4{margin:0 0 .18em; font-size:1.16rem}
.aff__t p{margin:0; color:var(--stone); font-size:.94rem}
.aff .btn{flex:none}
.book--flat{position:static}

/* author + last-updated byline (E-E-A-T) */
.byline{font-family:var(--font-label); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:.72rem; color:var(--stone); margin:0 0 1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--line-2)}
.byline strong{color:var(--ink-2); font-weight:700}

/* real photos in cards */
.isle__media{position:relative; overflow:hidden}
.isle__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease)}
.isle__media .isle__tag{z-index:2}
.isle:hover .isle__img{transform:scale(1.05)}
/* lead figure at the top of an article */
.lead-fig{margin:0 0 1.7rem; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh)}
.lead-fig img{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}
.lead-fig figcaption{font-size:.82rem; color:var(--stone); padding:8px 12px; background:var(--paper-2)}
/* gallery real photos */
.gallery figure img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm); display:block; box-shadow:var(--sh-sm)}
/* hero with a background photo */
.hero--photo{position:relative}
.hero--photo::before{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(11,36,56,.86) 0%, rgba(11,36,56,.55) 55%, rgba(11,36,56,.30) 100%),
  var(--hero-img) center/cover no-repeat;}
.hero--photo .wrap{position:relative; z-index:1}
.hero--photo .eyebrow{color:var(--sun)}
.hero--photo h1,.hero--photo .hero__lead{color:#fff}
.hero--photo .hero__lead{color:#e7eef2}
.hero--photo .hero__trust{color:#cdd8de}
.hero--photo .btn--ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.hero--photo .btn--ghost:hover{background:rgba(255,255,255,.12); color:#fff; border-color:#fff}