@font-face { font-family: "Russo One"; src: url("fonts/russo-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --navy: #0a2a66;
  --gold: #f5a623;
  --display: "Russo One", Impact, "Arial Black", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #2a6fb0;
  color: #fff;
  font-family: var(--body);
}

/* Full-page photo: fills the screen and crops instead of stretching */
.photo {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("beach.webp") center 22% / cover no-repeat;
  filter: saturate(1.3) contrast(1.06) brightness(1.04);
}
/* Blue sky tint to brighten the overcast sky */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(25,125,230,.55) 0%, rgba(25,125,230,.25) 40%, rgba(25,125,230,0) 65%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ---------- Menu ---------- */
.menu {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .04em;
  color: #fff;
  text-decoration: none;
  background: rgba(10, 42, 102, .72);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  transition: background .15s, transform .15s, color .15s;
  white-space: nowrap;
}
.pill:hover, .pill:focus-visible { background: var(--gold); color: var(--navy); outline: none; }
.pill:active { transform: scale(.97); }
.menu-btn::after { content: "\25BE"; display: inline-block; transition: transform .2s; font-size: .8em; }
.menu-btn[aria-expanded="true"]::after { transform: rotate(180deg); }

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.menu-list.open { opacity: 1; visibility: visible; transform: none; }
.pill[aria-current="page"] { background: var(--gold); color: var(--navy); }
.pill-apply { background: var(--gold); color: var(--navy); }
.pill-apply:hover, .pill-apply:focus-visible { background: #fff; color: var(--navy); }

.home-link { position: fixed; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 10; }

/* ---------- Home page ---------- */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 4vw max(15vh, 96px);
}
.brand { display: block; width: auto; height: auto; max-width: min(92vw, 700px); max-height: 42vh; }

.tagline {
  margin: 1.6vh 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(5.6vh, 8.4vw);
  line-height: 1.08;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: .2em var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 .06em .1em rgba(0,0,0,.45);
}
.tagline span { display: block; }
.rule { width: min(32vw, 190px); height: 3px; margin: 2.4vh auto 2vh; background: var(--gold); border: 0; }
.blurb {
  margin: 0;
  max-width: 25em;
  text-wrap: balance;
  font-weight: 600;
  font-size: min(2.7vh, 4.4vw);
  line-height: 1.3;
  color: #fff;
  -webkit-text-stroke: .28em var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 .1em .2em rgba(0,0,0,.4);
}
.fine {
  margin: 1.8vh 0 0;
  font-weight: 600;
  font-size: min(1.9vh, 3.2vw);
  letter-spacing: .16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: .35em var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 .1em .2em rgba(0,0,0,.4);
}

/* ---------- Placeholder pages ---------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 5vw max(15vh, 96px);
}
.panel {
  width: min(100%, 760px);
  background: rgba(10, 42, 102, .66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 2px solid var(--gold);
  border-radius: 24px;
  padding: clamp(24px, 5vw, 48px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.panel h1 {
  margin: 0 0 .5em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 56px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--gold);
}
.panel p { margin: 0; font-size: clamp(16px, 2.4vw, 20px); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}