/* OZKA: the header's language selector and theme button, the footer's city choice, and the light theme.
   Loaded after every page's own styles (scripts/site/release.mjs, the head links). The dark theme is the site
   as it was: nothing below changes it but the new controls. The light theme sets the shared tokens (assets/site.css)
   for ivory and warm white, and replaces the few colours written without them. Whatever stands on a film or a
   photograph (the heroes, the booking card and studio, the route cards, the closing bands) keeps the dark tokens in
   both themes: those surfaces are composed with their pictures. The gateway (/) does not load this file. */

/* ============================================================
   HEADER CONTROLS: language selector and theme button (both themes)
   ============================================================ */
.oz-ctl{display:flex;align-items:center;gap:6px}
.oz-lang{position:relative}
.oz-ico{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.oz-lang-btn{
  display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 10px;margin:0;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  color:var(--n-text);transition:color .18s ease;
}
.oz-lang-btn:hover,.oz-lang.open .oz-lang-btn{color:var(--n-gold)}
.oz-globe{width:16px;height:16px}
.oz-code{margin-right:-.2em}
.oz-chev{width:9px;height:6px;transition:transform .22s ease}
.oz-lang.open .oz-chev{transform:rotate(180deg)}
.oz-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:101;min-width:208px;max-width:calc(100vw - 32px);
  margin:0;padding:8px;list-style:none;text-shadow:none;
  background:rgba(14,15,18,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(223,203,168,.14);border-radius:12px;box-shadow:0 22px 50px -24px rgba(0,0,0,.75);
}
.oz-lang-menu[hidden]{display:none}
.oz-lang-menu::before{content:"";position:absolute;top:0;right:22px;width:34px;height:1px;background:var(--n-gold,#D8B166);opacity:.8}
.oz-lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 14px;border-radius:8px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#ECE7DE;transition:background-color .15s ease,color .15s ease;
}
.oz-lang-menu a:hover,.oz-lang-menu a:focus-visible{background:rgba(216,177,102,.09);color:#D8B166}
.oz-lang-menu a[aria-current="page"]{color:#9C958B}
.oz-lang-menu a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:#D8B166;opacity:.85}
.oz-lang-menu a:focus-visible{outline:2px solid #D8B166;outline-offset:-2px}
.oz-theme{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;margin:0;
  background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:8px;cursor:pointer;
  color:var(--n-text);transition:color .18s ease,border-color .18s ease;
}
.oz-theme:hover{color:var(--n-gold);border-color:rgba(216,177,102,.6)}
.oz-theme .oz-ico{width:17px;height:17px}
.oz-theme .oz-sun{display:none}
:root[data-theme="light"] .oz-theme .oz-moon{display:none}
:root[data-theme="light"] .oz-theme .oz-sun{display:block}
/* the header sheds its quietest things first (assets/site.css). Below 600px the logo, Book now and the menu
   button fill the header: the two controls move together to the top of the mobile panel (.oz-mctl) */
@media (max-width:919px){
  .sh-right .oz-ctl{gap:4px}
  .oz-lang-btn{padding:0 7px;gap:5px}
}
@media (max-width:599px){.sh-right .oz-ctl{display:none}}
/* the smallest phones: the logo and the right-hand group a little closer, so the menu button keeps its margin */
@media (max-width:400px){.sh-in{gap:12px}}
@media (max-width:374px){.sh-in{gap:10px}.sh-right{gap:8px}.brand .bw em{letter-spacing:.1em;margin-right:-.1em}}
/* the mobile panel: its links follow the controls; its Book now gets the header's gold, which was never
   defined outside the header (the button showed no colour of its own before this release) */
.oz-mctl + nav{margin-bottom:auto}
.mnav{--n-gold:#D8B166}

/* the mobile panel's controls: the languages as links, the theme as a labelled switch */
.oz-mctl{display:none}
@media (max-width:599px){
  .oz-mctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:0 0 18px;border-bottom:1px solid rgba(255,255,255,.07)}
}
.oz-mlang{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text-secondary)}
.oz-mlang .oz-globe{width:17px;height:17px}
.oz-mlang ul{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.oz-mlang a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid transparent;border-radius:8px;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--text-primary);
}
.oz-mlang a[aria-current="page"]{border-color:rgba(216,177,102,.45);color:#D8B166}
.oz-mtheme{width:auto;height:44px;gap:10px;padding:0 12px 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary)}
.oz-mtheme-l{white-space:nowrap}
.oz-switch{position:relative;width:30px;height:16px;border-radius:8px;background:rgba(255,255,255,.18);transition:background-color .18s ease}
.oz-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#F2EFE9;transition:transform .18s ease}
.oz-mtheme[aria-pressed="true"] .oz-switch{background:#D8B166}
.oz-mtheme[aria-pressed="true"] .oz-switch::after{transform:translateX(14px);background:#0B0C0E}

@media (prefers-reduced-motion:reduce){
  .oz-chev,.oz-lang-btn,.oz-theme,.oz-lang-menu a,.oz-switch,.oz-switch::after{transition:none}
}

/* ============================================================
   FOOTER: the city choice (Miami · Paris), between the tagline and the copyright
   ============================================================ */
.oz-market{display:flex;align-items:center;gap:6px}
.oz-market a,.oz-market .on{
  display:inline-flex;align-items:center;min-height:32px;padding:0 6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
}
footer .oz-market a{font-size:10.5px;color:var(--text-secondary)}
footer .oz-market a:hover{color:var(--accent)}
.oz-market .on{color:var(--accent)}
.oz-market i{font-style:normal;color:var(--text-secondary);opacity:.6}

/* ============================================================
   THE LIGHT THEME
   ============================================================ */
:root[data-theme="light"]{
  --canvas:#F7F3EC;
  --panel:#FFFDF8;
  --panel-2:#EFE8DC;
  --accent:#7E6028;
  --accent-hover:#5E4719;
  --accent-muted:#A0824C;
  --teal:#1F7F92;
  --text-primary:#14181D;
  --text-secondary:#4A5560;
  --line:#DCD2C1;
  --line-strong:#BCAF98;
  --tshadow:none;
}
/* surfaces composed with a film or a photograph keep the dark tokens; so does the footer, whose logo is drawn
   for a dark ground (its lettering is white) */
:root[data-theme="light"] :is(.hero,.statichero,.panel-layer,.bookpanel,.studio,.ac-pop,.route-card,.hclose,.fl-close,.xh,.xcab,.xcta,.sv-hero,.f2-hero,.f2-final,footer){
  --canvas:#0A0E12;
  --panel:#121A23;
  --panel-2:#0E141B;
  --accent:#D9B779;
  --accent-hover:#EFD3A0;
  --accent-muted:#8A6F42;
  --teal:#4FB3C7;
  --text-primary:#F2EFE9;
  --text-secondary:#9AA7B4;
  --line:#22303D;
  --line-strong:#38495A;
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  color:var(--text-primary);
}

/* the page's own light: a warm wash, the grain kept faint */
:root[data-theme="light"] .env{
  background:
    radial-gradient(ellipse 80% 55% at 18% 12%,rgba(79,179,199,.05),transparent 62%),
    radial-gradient(ellipse 70% 60% at 86% 78%,rgba(217,183,121,.10),transparent 60%);
}
:root[data-theme="light"] .env::after{opacity:.14;mix-blend-mode:multiply}

/* the header over page content: a light frost and dark words (over a film it stays as it was) */
:root[data-theme="light"] .nav.frost{
  --n-text:#3D434A;--n-gold:#7E6028;--n-line:rgba(20,24,29,.1);
  background:rgba(247,243,236,.86);text-shadow:none;box-shadow:0 1px 0 rgba(20,24,29,.06);
}
:root[data-theme="light"] .nav.frost .brand .bw em{color:rgba(20,24,29,.78);text-shadow:none}
:root[data-theme="light"] .nav.frost .sh-res span{color:#6B6358}
:root[data-theme="light"] .nav.frost .sh-res b{color:#2B2F35}
:root[data-theme="light"] .nav.frost .sh-menu,:root[data-theme="light"] .nav.frost .oz-theme{border-color:rgba(20,24,29,.22)}
:root[data-theme="light"] .nav.frost .sh-menu i{background:#14181D}
/* Book now keeps its champagne gold on the light frost (the header's gold token turns dark there) */
:root[data-theme="light"] .nav.frost .sh-book{background:#D8B166;color:#0B0C0E}
:root[data-theme="light"] .nav.frost .sh-book:hover{background:#E4C07E}
/* the logo's gold, a shade deeper on ivory so the lettering keeps its edge */
:root[data-theme="light"] .nav.frost .brand img{filter:brightness(.8) contrast(1.12) saturate(1.08)}
:root[data-theme="light"] .nav:not(.frost) .sh-menu i{background:#F2EFE9}
:root[data-theme="light"] .oz-lang-menu{background:rgba(255,253,248,.98);border-color:rgba(126,96,40,.22);box-shadow:0 22px 50px -24px rgba(40,30,10,.35)}
:root[data-theme="light"] .oz-lang-menu::before{background:#B08D52}
:root[data-theme="light"] .oz-lang-menu a{color:#1E2328}
:root[data-theme="light"] .oz-lang-menu a:hover,:root[data-theme="light"] .oz-lang-menu a:focus-visible{background:rgba(126,96,40,.08);color:#7E6028}
:root[data-theme="light"] .oz-lang-menu a[aria-current="page"]{color:#6B6358}
:root[data-theme="light"] .oz-lang-menu a[aria-current="page"]::after{background:#7E6028}
:root[data-theme="light"] .oz-lang-menu a:focus-visible{outline-color:#7E6028}

/* the mobile panel */
:root[data-theme="light"] .mnav{background:#FBF8F2;border-top-color:rgba(20,24,29,.08)}
:root[data-theme="light"] .mn-list>li{border-bottom-color:rgba(20,24,29,.09)}
:root[data-theme="light"] .mn-list>li>a:hover{color:var(--accent)}
:root[data-theme="light"] .mn-res span{color:#6B6358}
:root[data-theme="light"] .oz-mctl{border-bottom-color:rgba(20,24,29,.09)}
:root[data-theme="light"] .oz-mlang a[aria-current="page"]{border-color:rgba(126,96,40,.45);color:#7E6028}
:root[data-theme="light"] .oz-switch{background:rgba(20,24,29,.2)}
:root[data-theme="light"] .oz-switch::after{background:#FFFDF8;box-shadow:0 1px 2px rgba(20,24,29,.25)}

/* buttons: the gold keeps its champagne, the words on it stay dark */
:root[data-theme="light"] .btn-gold{background:#D9B779;color:#14181D}
:root[data-theme="light"] .btn-gold:hover{background:#E4C07E}

/* the footer: dark in both themes */
:root[data-theme="light"] footer{background:#0A0E12}

/* the inner pages: the colours written without tokens */
:root[data-theme="light"] .pg-table th,:root[data-theme="light"] .pg-table td::before,:root[data-theme="light"] .pg-note,:root[data-theme="light"] .fl-spec dt{color:#5E6670}
:root[data-theme="light"] .pg-cta{background:linear-gradient(180deg,transparent,rgba(229,220,204,.55))}
:root[data-theme="light"] .fl-hero figure::after{background:linear-gradient(180deg,rgba(247,243,236,0) 86%,rgba(247,243,236,.5))}

/* the home page: the journey's photograph washed in ivory, the step dots on the page */
:root[data-theme="light"] .jbg{
  background:
    linear-gradient(0deg,rgba(247,243,236,.72) 0%,rgba(247,243,236,.38) 45%,rgba(247,243,236,.46) 100%),
    url('/assets/journey-bg.jpg') 70% center / cover no-repeat;
}
:root[data-theme="light"] .jdot{background:var(--canvas)}

/* the Experience and Fleet pages write with their own tokens: dark words and a deep gold on ivory, the
   original light ones on their films and photographs */
:root[data-theme="light"] :is(.xp,.fx){--gold:#7E6028;--gold-soft:rgba(126,96,40,.5);--gold-line:rgba(126,96,40,.3);--ivory:#14181D;--warm:#4A5560;--warm-2:#6B6358;--hair:rgba(20,24,29,.12)}
:root[data-theme="light"] :is(.xp,.fx) :is(.xh,.xcab,.xcta,.f2-hero,.f2-final,footer){--gold:#D8B166;--gold-soft:rgba(216,177,102,.55);--gold-line:rgba(216,177,102,.32);--ivory:#F4EFE6;--warm:#ABA398;--warm-2:#827B71;--hair:rgba(223,203,168,.13)}
:root[data-theme="light"] .xq-list p,:root[data-theme="light"] .xtl-list p{color:#2B3036}
:root[data-theme="light"] .xtl-dot{background:var(--canvas)}
:root[data-theme="light"] .xq-link:hover{background:rgba(126,96,40,.06)}
:root[data-theme="light"] .f2-offset::before{border-color:rgba(126,96,40,.28)}
/* the large outline numerals behind the headings, and the Services notes */
:root[data-theme="light"] :is(.xo-n,.f2-n,.sv-n){-webkit-text-stroke-color:rgba(20,24,29,.08)}
:root[data-theme="light"] :is(.xh,.xcab,.xcta,.f2-hero,.f2-final,.sv-hero) :is(.xo-n,.f2-n,.sv-n){-webkit-text-stroke-color:rgba(244,239,230,.12)}
:root[data-theme="light"] .sv-note,:root[data-theme="light"] .sv-small{color:#5E6670}
/* the current page in the mobile panel (Experience) */
:root[data-theme="light"] .mn-list>li>a[aria-current="page"]{color:#7E6028}