@font-face{font-family:Inter;src:url("assets/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-black-italic.woff2") format("woff2");font-style:italic;font-weight:900;font-display:swap}
:root{color-scheme:light;--paper:#fafbfd;--ink:#13171e;--muted:#525965;--line:#cccfcf;--sheet:#fff;--switch:#e9edf3;--blue:#1055c7;--ease:cubic-bezier(.16,1,.3,1)}
:root[data-theme=dark]{color-scheme:dark;--paper:#000;--ink:#f4f5f7;--muted:#b7bac2;--line:#33353a;--sheet:#171719;--switch:#242428;--blue:#1048a7}
:root{
  --hero:linear-gradient(160deg,#fff,#edf2f8);--headline:#2a5688;--primary:#194f91;--primary-hover:#123e73;--on-primary:#fff;
  --tint:#dce9fa;--on-tint:#183a65;--success:#dcefe6;--on-success:#214936;
  --ink-icon:invert(0);--button-icon:invert(1)
}
:root[data-theme=dark]{
  --hero:linear-gradient(168deg,#191a1d,#080809 28%,#000 64%,#09090a);--headline:#c1cad9;--primary:#a8c9ff;--primary-hover:#c8ddff;--on-primary:#091a32;
  --tint:#1c304b;--on-tint:#d8e7ff;--success:#172d24;--on-success:#b6e6cb;
  --ink-icon:invert(1);--button-icon:invert(0)
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px Inter,Arial,sans-serif;transition:background-color .28s,color .28s}
button{cursor:pointer;color:inherit;font:600 12px Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
header,main{width:min(calc(100% - 72px),1140px);margin-inline:auto}
.bar,.brand,.controls,.languages,.platform,.action,.channel{display:flex;align-items:center}
.bar{min-height:88px;justify-content:space-between;border:0}
.brand{font-weight:750;letter-spacing:-.065em;font-size:21px;gap:5px}
.brand b{font:500 10px Roboto,sans-serif;align-self:flex-start;margin-top:3px;letter-spacing:.04em}
.controls{gap:10px}.languages{background:var(--switch);padding:3px;border-radius:24px}
.languages button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;background:none;border:0;border-radius:20px;padding:0 11px}
.languages [aria-pressed=true]{background:var(--sheet);box-shadow:0 1px 3px #0002}
.languages img{width:18px;height:12px;object-fit:cover;border-radius:2px}
#theme{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:transparent;border:1px solid var(--line)}
#theme svg{width:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}
.sun,[data-theme=dark] .moon{display:none}[data-theme=dark] .sun{display:block}


main{padding:0 0 64px}
.destinations{color:var(--ink);background:var(--hero);margin-inline:calc((100vw - 100%) / -2);padding-inline:max(36px,calc((100vw - 1140px)/2));overflow:hidden}
.poster{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);align-items:center;min-height:clamp(350px,49vh,480px)}
.poster-copy{position:relative;z-index:1;padding:38px 0}
.artwork{display:grid;place-items:center}
[data-theme=dark] .artwork{mix-blend-mode:screen}
[data-theme=light] .artwork img{border-radius:50%;width:min(84%,320px);margin-block:14px}
.artwork img{width:min(100%,398px);display:block;transform:translate(var(--x,0),var(--y,0)) scale(var(--zoom,1));transition:transform .45s var(--ease)}
.platform{gap:8px;color:var(--ink);font:500 14px Roboto,sans-serif}.platform img{width:19px;filter:var(--ink-icon)}
.handle{font-size:12px;color:var(--muted);margin-left:5px}
h1{font:670 clamp(76px,8.1vw,122px)/.83 Inter,sans-serif;letter-spacing:-.083em;margin:22px 0 27px}
h1 span,h1 em{display:block}h1 em{width:fit-content;font:italic 900 1.05em/.96 Roboto,sans-serif;letter-spacing:-.065em;color:var(--headline)}
.hero-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.action,.channel{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;font-weight:640}
.action{gap:20px;padding:0 20px;border-radius:30px;background:var(--primary);color:var(--on-primary)}
.action img{width:16px}.action img{filter:var(--button-icon)}
.channel{color:var(--ink);text-underline-offset:.3em}.channel:hover{text-decoration:underline}
:focus-visible{outline:3px solid #5c9dff;outline-offset:4px}
@media(prefers-reduced-motion:no-preference){
 h1 span,h1 em,.hero-links,.artwork img{animation:enter .68s var(--ease) backwards}h1 em{animation-delay:80ms}.hero-links{animation-delay:150ms}
 @keyframes enter{from{opacity:0;translate:0 14px}}
 .action,.channel{transition:transform .22s var(--ease),background-color .22s}
 .action:active,.channel:active{transform:scale(.96)}
 @media(hover:hover){.artwork:hover{--zoom:1.035}.action:hover{background:var(--primary-hover)}}
}
@media(max-width:700px){
 header,main{width:calc(100% - 32px)}.bar{min-height:64px}.brand{font-size:15px;gap:3px}.brand b{font-size:8px}
 .controls{gap:5px}.languages button{padding:0 7px;min-height:32px}.languages img{width:15px}#theme{width:36px;height:36px}
 .destinations{padding-inline:16px}.poster{grid-template-columns:minmax(0,1fr) minmax(0,.88fr);min-height:0;padding:28px 0 24px;row-gap:17px}
 .poster-copy{display:contents}.platform{grid-column:1/-1;font-size:12px}.handle{font-size:11px}
 h1{grid-column:1;grid-row:2;font-size:clamp(54px,11.6vw,80px);margin:0}.artwork{grid-column:2;grid-row:2}.artwork img{max-height:210px;object-fit:contain}
 .hero-links{grid-column:1/-1;grid-row:3;gap:14px}.action{padding:0 15px;gap:13px}.channel{font-size:13px}
}
@media(max-width:360px){.brand b{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media(prefers-reduced-motion:no-preference){
  h1 span,h1 em{animation:headline-rise .78s cubic-bezier(.16,1,.3,1) backwards}
  h1 em{animation-delay:.12s}
  .hero-links{animation-delay:.22s}
  @keyframes headline-rise{
    from{clip-path:inset(100% -12% -18% -12%);transform:translateY(.23em) skewY(3deg);opacity:.25}
    to{clip-path:inset(-18% -12% -18% -12%);transform:none;opacity:1}
  }
}

/* Capture each palette at rest. The circular mask reveals the new snapshot. */
.theme-reveal body,.theme-reveal .action,.theme-reveal .channel{transition:none}
@media(prefers-reduced-motion:no-preference){
  .theme-reveal::view-transition-image-pair(root){isolation:isolate}
  .theme-reveal::view-transition-old(root),
  .theme-reveal::view-transition-new(root){animation:none;mix-blend-mode:normal}
  .theme-reveal::view-transition-old(root){z-index:0}
  .theme-reveal::view-transition-new(root){
    z-index:1;
    animation:palette-reveal 620ms cubic-bezier(.36,.02,.18,1) both;
  }
  @keyframes palette-reveal{
    from{clip-path:circle(0px at var(--switch-origin))}
    to{clip-path:circle(var(--switch-radius) at var(--switch-origin))}
  }
  #theme svg{transition:transform .48s cubic-bezier(.2,.75,.25,1.12)}
  [data-theme=light] #theme svg{transform:rotate(-18deg)}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

.channel{gap:7px}
.channel-arrow{display:inline-grid;place-items:center;width:1.35em;height:1.35em;overflow:hidden}
.channel-arrow img{display:block;width:16px;filter:var(--ink-icon)}
@media(prefers-reduced-motion:no-preference){
  .channel-arrow img{animation:arrow-appear .55s var(--ease) .45s backwards}
  .channel:is(:focus-visible,:active) .channel-arrow img{animation:arrow-travel .48s var(--ease)}
  @media(hover:hover){.channel:hover .channel-arrow img{animation:arrow-travel .48s var(--ease)}}
  @keyframes arrow-appear{from{opacity:0;transform:translate(-75%,75%)}}
  @keyframes arrow-travel{40%{transform:translate(135%,-135%);opacity:0}41%{transform:translate(-135%,135%);opacity:0}to{transform:none;opacity:1}}
}