:root {
  --content-max: 1680px;
  --workspace-max: 1920px;
  --page-gutter: clamp(24px, 3vw, 64px);
  --workspace-gutter: clamp(24px, 2.5vw, 56px);
}
.header-inner, body:has(.home-page) .header-inner {
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.workspace-header .header-inner { max-width: none; }
.site-footer { padding-inline: 0; }
.footer-inner, body:has(.home-page) .footer-inner {
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.page-wrap, .public-page.page-wrap, .public-narrow.page-wrap {
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.public-page.page-wrap { padding-top: 0; }

.public-heading {
  --heading-fill: var(--public-blue);
  isolation: isolate; overflow: visible; border: 0; border-radius: 0;
}
.public-heading, .public-heading[data-public-route] { background: transparent; }
.public-heading[data-public-route="/downloads"], .public-heading[data-public-route="/contact"] {
  --heading-fill: var(--public-coral);
}
.public-heading[data-public-route="/privacy"], .public-heading[data-public-route="/terms"] {
  --heading-fill: var(--public-paper);
}
.public-heading::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--heading-fill); box-shadow: 0 0 0 100vmax var(--heading-fill);
  clip-path: inset(0 -100vmax); pointer-events: none;
}
.public-heading-copy { padding-inline: 0; padding-right: 32px; }
.workspace-content > .page-wrap {
  width: 100%; max-width: var(--workspace-max); margin-inline: auto;
  padding-inline: var(--workspace-gutter);
}

body:not([data-page="/"]) #app { min-height: 100svh; display: flex; flex-direction: column; }
body:not([data-page="/"]) #app > main,
body:not([data-page="/"]) #app > .workspace-layout { flex: 1 0 auto; }

.auth-layout {
  width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0;
  min-height: 620px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auth-intro {
  padding: clamp(40px, 6vh, 90px) 40px;
  padding-left: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2 + var(--page-gutter)));
}
.auth-card {
  max-width: 480px;
  margin-inline: max(35px, calc((min(100vw, var(--content-max)) / 2 - 480px) / 2));
}
.home-section-inner { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-gutter); }
@media (min-width: 1600px) {
  .home-page .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-page .home-seascape {
    --scene-offset: max(0px, calc((100% - 1000px) / 2));
    background: linear-gradient(to top, #59b4d5 0 var(--scene-offset), var(--home-scene) var(--scene-offset) 100%);
    background-color: var(--home-scene);
  }
  .home-page .home-copy {
    padding-left: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2 + var(--page-gutter)));
  }
  .home-page .home-world-map {
    width: min(128%, 1080px); left: -70px; right: auto; top: auto;
    bottom: calc(160px + var(--scene-offset));
  }
  .home-page .home-vessel { left: 150px; width: 440px; bottom: calc(80px + var(--scene-offset)); }
  .home-page .home-seascape:before {
    width: 740px; left: 40px; right: auto; top: auto;
    bottom: calc(130px + var(--scene-offset));
  }
  .home-page .home-tides { bottom: calc(var(--scene-offset) - 1px); }
  .home-page .home-world-caption { max-width: 740px; }
  .public-download-layout, .public-help-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 32%); gap: 40px;
  }
  .connect-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 800px) {
  :root { --page-gutter: 20px; --workspace-gutter: 20px; }
  .auth-layout { min-height: 0; }
  .auth-intro { padding: 28px 22px; }
  .auth-card { margin-inline: auto; }
}
@media (max-width: 640px) {
  .public-heading-copy { padding: 27px 12px 27px 0; }
}
@media (max-width: 370px) {
  .public-heading-copy { padding: 24px 10px 24px 0; }
}
@media (max-width: 360px) {
  .auth-intro { padding: 25px 18px; }
}