@font-face{font-family:Cambon;src:url('../assets/fonts/cambon-light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Sohne;src:url('../assets/fonts/sohne-roman.woff2') format('woff2');font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:'Sohne Mono';src:url('../assets/fonts/sohne-mono-buch.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}

:root{color-scheme:light;--background:#faf9f6;--foreground:#27251e;--secondary:#716d66;--line:#ddd9d2;--paper:#e9e6df;--accent:#0000ff;--outer:8px;--inset:20px;--header:64px;--serif:Cambon,'Apple Garamond',Baskerville,'Times New Roman','Droid Serif',Times,'Source Serif Pro',serif;--sans:Sohne,-apple-system,system-ui,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;--mono:'Sohne Mono',ui-monospace,monospace;--display-weight:300;--body-weight:300;--label-weight:400}
*{box-sizing:border-box}
html{background:var(--background);scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
svg{display:block}
[hidden]{display:none!important}
::selection{background:var(--accent);color:#fff}
.outer{padding-inline:var(--outer)}
.content{padding-inline:var(--inset)}
.skip-link{position:fixed;z-index:20;top:8px;left:20px;transform:translateY(-180%);clip-path:inset(50%);padding:12px 16px;background:var(--accent);color:#fff}
.skip-link:focus{transform:translateY(0);clip-path:none}

.site-header{position:relative;z-index:5}
.site-header__inner{height:var(--header);max-width:1400px;margin-inline:auto;display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
.brand__mark{width:24px;height:32px;fill:var(--accent)}
.desktop-nav{display:none}
.header-actions{display:none;margin-left:auto;align-items:center;gap:12px}
.desktop-nav a{display:inline-flex;align-items:center;height:32px;border-radius:999px;padding:0 16px;font:var(--label-weight) 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-rendering:auto;transition:background .2s}
.desktop-nav a:hover{background:var(--paper)}
.menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:0;background:transparent;margin-left:auto;width:40px;height:40px;border-radius:50%}
.menu-toggle span{display:block;width:21px;height:1px;background:currentColor;transition:transform .2s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{position:absolute;top:64px;left:0;right:0;background:var(--background);border-bottom:1px solid var(--line);padding:12px calc(var(--outer) + var(--inset)) 24px;box-shadow:0 24px 40px #1a191812}
.mobile-menu a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font:400 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}

.hero{max-width:1400px;margin-inline:auto;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:calc(100dvh - var(--header) - 128px)}
.hero__copy{align-content:end;display:grid;grid-template-areas:'title' 'description' 'actions';grid-template-columns:minmax(0,1fr);align-items:end;row-gap:16px;padding-top:calc(var(--inset) * 2);padding-bottom:var(--inset)}
h1{grid-area:title;margin:0;font:var(--display-weight) 32px/1 var(--serif);letter-spacing:-.02em;text-wrap:pretty;font-feature-settings:'liga' 1,'clig' 1}
h1 span{display:block}
.hero__description{grid-area:description;max-width:50ch;margin:0;font:var(--body-weight) 18px/1.4 var(--sans);text-wrap:pretty}
.hero__description span{color:var(--secondary)}
.desktop-break{display:none}
.hero__actions{grid-area:actions;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 14px;border-radius:9999px;overflow:hidden;font:var(--label-weight) 12px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s}
.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;margin-right:-4px;transition:transform .25s}
.button:hover svg{transform:translateX(2px)}
.button--light{background:var(--accent);color:#fff}
.button--light:hover{background:#002bcd}
.button--outline{background:var(--background);box-shadow:inset 0 0 0 1px var(--line)}
.button--outline:hover,.button--ghost:hover{background:var(--paper)}
.hero__announcement{grid-area:announcement;display:none;justify-self:end;align-items:center;gap:12px;font:400 14px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:color .2s}
.hero__announcement:hover{color:var(--accent)}
.hero__announcement>svg{width:12px;height:12px;fill:none;stroke:var(--secondary);stroke-width:1.5}
.status-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 6px #0000ff08}

.hero__map{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:180px;overflow:hidden;border-block:1px solid var(--line);background:var(--background)}
.hero__map canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .2s}
.hero__map[data-ready] canvas{opacity:1}
.map-fallback{position:absolute;inset:8px 0;width:100%;height:calc(100% - 16px);object-fit:contain;opacity:.6}
.hero__map[data-ready] .map-fallback{visibility:hidden}
.motion-toggle{position:absolute;right:16px;bottom:12px;display:grid;place-items:center;width:28px;height:28px;padding:0;background:#faf9f6ed;border:1px solid var(--line);border-radius:50%;color:var(--secondary);transition:color .2s,border-color .2s}
.motion-toggle:hover{color:var(--foreground);border-color:var(--secondary)}
.motion-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.motion-toggle .play-icon{display:none}
.motion-toggle[aria-pressed=true] .play-icon{display:block}
.motion-toggle[aria-pressed=true] .pause-icon{display:none}

@media(min-width:640px){:root{--outer:16px;--inset:24px}.hero__map{height:254px}}
@media(min-width:768px){h1{font-size:40px}.hero__description{font-size:20px}}
@media(min-width:960px){
  .hero__copy{grid-template-areas:'title title' 'description description' 'actions announcement';grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  h1{font-size:72px}
  .hero__announcement{display:flex;font-size:14px}
  .button{padding:12px 20px;gap:6px}
  .button--small{padding:8px 14px;gap:4px}
  .desktop-break{display:block}
}
@media(min-width:1120px){
  :root{--inset:40px}
  .desktop-nav{display:flex;position:absolute;left:50%;top:16px;transform:translateX(-50%)}
  .header-actions{display:flex}
  .menu-toggle{display:none}
  .mobile-menu{display:none}
  .hero__announcement{font-size:14px}
}
@media(min-width:1120px) and (max-width:1279px){.header-actions .button--ghost{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
