:root {
  font-family: "Google Sans", Arial, sans-serif;
  color: #463342;
  background: #f3d8d9;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --inset: clamp(28px, 6vw, 88px);
  --ink: #463342;
  --body-ink: #654b5a;
  --muted-ink: #775c64;
  --button-ink: #4e3a47;
  --button-fill: rgba(255, 249, 246, .44);
  --button-hover: rgba(255, 249, 246, .75);
  --button-border: rgba(110, 74, 89, .24);
  --focus: #70445d;
  color-scheme: light;
}
[data-theme="night"] {
  color-scheme: dark;
  background: #090b10;
  --ink: #eeeef1;
  --body-ink: #b3b4c0;
  --muted-ink: #858692;
  --button-ink: #dddde5;
  --button-fill: rgba(255, 255, 255, .045);
  --button-hover: rgba(255, 255, 255, .09);
  --button-border: rgba(210, 214, 235, .18);
  --focus: #c4c8df;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; position: relative; isolation: isolate; overflow-x: hidden; color: var(--ink); transition: color .7s; }
.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 90% 94%, rgba(255, 222, 170, .95), transparent 56%),
    radial-gradient(ellipse at 6% 68%, rgba(240, 161, 174, .5), transparent 57%),
    linear-gradient(173deg, #d7d7e9 0%, #ead0df 31%, #f3c8ce 57%, #f8d3be 79%, #f5dfb7 100%);
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  pointer-events: none;
}
.clouds {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: .8;
  transition: opacity .9s ease;
}
[data-theme="night"] .clouds { opacity: 0; }
.coastal-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  transition: opacity .8s, filter .8s;
}
.night-sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 88% 95%, #222431 0%, transparent 55%), radial-gradient(ellipse at 12% 12%, #141923 0%, transparent 50%), linear-gradient(160deg, #080a0f, #060709 55%, #111319);
  transition: opacity .9s ease;
}
.night-sky img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
[data-theme="night"] .night-sky { opacity: 1; }
[data-theme="night"] .coastal-waves { filter: grayscale(1) brightness(1.7); opacity: .36; }
[data-theme="night"] .sunset { opacity: 0; }
.sunset {
  position: absolute;
  right: clamp(12px, 3vw, 48px);
  bottom: 0;
  width: clamp(260px, 36vw, 480px);
  height: auto;
  z-index: -1;
  pointer-events: none;
  transition: opacity .8s ease;
}
header { height: 112px; display: flex; align-items: center; padding-left: calc(var(--inset) + 28px); }
.theme-toggle { display: grid; place-items: center; width: 48px; height: 44px; margin-left: -7px; padding: 7px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, transform .2s; }
.theme-toggle:hover { background: var(--button-fill); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.96); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.flag { width: 34px; height: auto; display: block; filter: drop-shadow(0 1px 2px #27213412); }
main { min-height: calc(100svh - 200px); display: grid; place-items: center; padding: 64px max(32px, calc(var(--inset) + 28px)) 100px; }
.introduction { width: 100%; max-width: 480px; animation: arrive .9s ease-out both; }
h1 { font-size: clamp(36px, 4.25vw, 54px); line-height: 1.12; letter-spacing: -2.3px; font-weight: 500; margin: 0 0 26px; }
p { max-width: 390px; font-size: 18px; line-height: 1.7; letter-spacing: -.18px; margin: 0 0 32px; color: var(--body-ink); transition: color .7s; }
.email { display: inline-flex; gap: 16px; align-items: center; padding: 13px 19px; text-decoration: none; color: var(--button-ink); background: var(--button-fill); border: 1px solid var(--button-border); border-radius: 7px; box-shadow: 0 1px 2px #62445105; font-size: 14px; font-weight: 500; transition: background .2s, transform .2s, box-shadow .2s, color .7s, border-color .7s; }
.email:hover { background: var(--button-hover); transform: translateY(-2px); box-shadow: 0 4px 15px #6244510d; }
.email svg { transition: transform .2s; }
.email:hover svg { transform: translateX(3px); }
.email:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
footer { min-height: 88px; display: flex; align-items: center; padding: 20px calc(var(--inset) + 28px); font-size: 11px; letter-spacing: .3px; color: var(--muted-ink); transition: color .7s; }
.journey { display: flex; align-items: center; gap: 8px; }
.airport-code { font-size: 11px; font-weight: 500; letter-spacing: 1.5px; }
.flight-path { flex: 0 0 56px; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  header { height: 90px; padding-left: calc(var(--inset) + 20px); }
  main { min-height: calc(100svh - 194px); padding: 60px 30px 90px calc(var(--inset) + 20px); }
  h1 { letter-spacing: -1.6px; margin-bottom: 24px; }
  p { font-size: 17px; line-height: 1.7; }
  footer { min-height: 104px; align-items: flex-end; padding: 20px 24px 26px calc(var(--inset) + 20px); font-size: 10px; }
  .flag { width: 32px; }
  .sunset { width: 250px; right: 0; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .introduction { animation: none; }
  *, *::before, *::after { transition: none !important; }
}