@font-face{font-family:Pixelify;src:url('assets/pixelify-sans.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:DM Sans;src:url('assets/dm-sans.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#f5f3eb;--ink:#fffdf2;--blue:#174b7a;--pixel:Pixelify,monospace}
*{box-sizing:border-box}
html{min-width:0;min-height:100%;background:#0c5fb1}
body{margin:0;min-height:100svh;font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}
.postcard{position:relative;isolation:isolate;width:100%;height:100svh;height:100dvh;overflow:hidden;background:#1760a6;color:var(--ink)}
.landscape{position:absolute;inset:0;z-index:-3;width:100%;height:100%;image-rendering:pixelated}
.landscape img{width:100%;height:100%;object-fit:cover;object-position:center bottom;image-rendering:pixelated}
.sky-tint{position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(8,53,90,.28),rgba(19,57,87,.08) 55%,transparent 73%);pointer-events:none}
.intro{position:absolute;top:max(calc(env(safe-area-inset-top) + 32px),15%);left:24px;right:24px;text-align:center;display:flex;align-items:center;flex-direction:column}
h1{font-family:var(--pixel);font-weight:400;font-size:38px;line-height:1.15;margin:0;letter-spacing:.6px}
.discipline{font-family:var(--pixel);font-size:14px;line-height:1.5;letter-spacing:3px;margin:12px 0 0}
.invitation{margin-top:29px;display:flex;flex-direction:column;align-items:center}
.contact{position:relative;display:flex;justify-content:center;align-items:center;gap:20px;min-width:190px;min-height:52px;padding:12px 21px;color:var(--ink);background:transparent;text-decoration:none;font-family:var(--pixel);font-size:20px;transition:background-color .15s,transform .15s}
.contact-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arrow{font-family:monospace;font-size:20px}
.contact:hover{background:rgba(255,253,242,.08);transform:translateY(-1px)}
.contact:active{transform:translateY(1px)}
.contact:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
@media(min-width:768px) and (min-aspect-ratio:1/1){.intro{top:max(calc(env(safe-area-inset-top) + 32px),13%)}h1{font-size:clamp(38px,3vw,48px);letter-spacing:.8px}.discipline{font-size:16px;letter-spacing:4px;margin-top:15px}.invitation{margin-top:32px}.contact{min-height:54px;font-size:21px;padding:13px 24px}}
@media(max-width:350px){h1{font-size:clamp(30px,10vw,34px)}.discipline{font-size:12px}.intro{top:max(calc(env(safe-area-inset-top) + 24px),13%)}.invitation{margin-top:22px}}
@media(max-height:500px) and (min-aspect-ratio:1/1){.intro{top:max(calc(env(safe-area-inset-top) + 12px),8%)}h1{font-size:32px}.discipline{font-size:12px;margin-top:8px}.invitation{margin-top:18px}.contact{min-height:46px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.contact{transition:none}}

/* The SVG shares the original portrait coordinates, so all layers crop together. */
.motion-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:0;pointer-events:none;image-rendering:pixelated}
.motion-ready .motion-scene{opacity:1}
.motion-ready .landscape{visibility:hidden}
.cloud-drift{will-change:transform}
.motion-ready .cloud-drift{animation:cloud-drift 180s linear infinite}
.motion-scene{--journey-duration:28s}
.train-journey{transform:translateX(var(--train-still,740px));will-change:transform}
.motion-ready .train-journey{animation:train-journey var(--journey-duration) linear infinite}
.bird-flight{transform:translateX(-400px);will-change:transform}
.motion-ready .bird-flight{animation:bird-flight var(--journey-duration) linear 3s infinite}
.bird-sprite{overflow:hidden;image-rendering:pixelated}
.bird-frames{will-change:transform}
.motion-ready .bird-frames{animation:bird-flap .5s steps(4,end) var(--wing-phase,0s) infinite}
@keyframes bird-flap{from{transform:translateX(0)}to{transform:translateX(-960px)}}
@keyframes bird-flight{0%{transform:translateX(-400px)}55%,100%{transform:translateX(var(--birds-end,1300px))}}
@keyframes cloud-drift{from{transform:translateX(0)}to{transform:translateX(var(--cloud-shift,-1086px))}}
@keyframes train-journey{from{transform:translateX(var(--train-start,1100px))}to{transform:translateX(-1450px)}}
.motion-paused .motion-scene *,.page-hidden .motion-scene *{animation-play-state:paused!important}
.motion-toggle{position:absolute;right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));width:44px;height:44px;border:0;background:var(--paper);color:var(--blue);cursor:pointer;display:grid;place-items:center;clip-path:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 3px,3px 3px)}
.motion-toggle[hidden]{display:none}
.motion-toggle svg{width:14px;height:14px;fill:currentColor}
.motion-toggle:focus-visible{outline:none;background:#fff;box-shadow:inset 0 0 0 3px var(--blue)}
.play-symbol{display:none}
.motion-paused .pause-symbol{display:none}
.motion-paused .play-symbol{display:block}
@media(prefers-reduced-motion:reduce){.motion-scene *{animation:none!important}.motion-toggle{display:none}}

.music-toggle{position:absolute;left:max(16px,calc(env(safe-area-inset-left) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));min-height:44px;min-width:104px;padding:10px 12px;border:0;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--paper);color:var(--blue);font:14px var(--pixel);cursor:pointer;clip-path:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 3px,3px 3px)}
.music-toggle[hidden]{display:none}
.music-toggle svg{width:17px;height:17px}
.music-toggle[aria-pressed="true"] .music-off{display:none}
.music-toggle:hover{background:#fff}
.music-toggle:focus-visible{outline:none;background:#fff;box-shadow:inset 0 0 0 3px var(--blue)}
.music-toggle[aria-busy="true"]{opacity:.7}
.music-status{position:absolute;left:max(16px,calc(env(safe-area-inset-left) + 12px));bottom:max(72px,calc(env(safe-area-inset-bottom) + 68px));max-width:220px;margin:0;padding:10px 12px;background:var(--paper);color:var(--blue);font-size:12px;line-height:1.5}
.music-status:empty{display:none}