/* Titillium Web, self-hosted (SIL OFL 1.1, see fonts/OFL.txt) */
@font-face {
  font-family: 'Titillium Web';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/titillium-web-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Titillium Web';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/titillium-web-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Titillium Web';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/titillium-web-latin-700-normal.woff2') format('woff2');
}

/* Same tokens as flock/webui styles.scss so the two sites feel like one family */
:root {
  color-scheme: light dark;
  --bg: light-dark(#fff9f0, #071f3b);
  --surface: light-dark(#ffffff, #0b2f55);
  --on-surface: light-dark(#0b2f55, #eaf3fb);
  --muted: light-dark(#4a6382, #a9c3dc);
  --border: light-dark(#e5ded3, #24507f);
  --primary: light-dark(#0b73b8, #83cfff);
  --tertiary: light-dark(#c75530, #f4774b);
  --orange: #ff9c21;
  --turquoise: #34bbc1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* everything fits in one screen: sizes below scale with the viewport height */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--on-surface);
  font: 400 1rem/1.6 'Titillium Web', system-ui, sans-serif;
}

a { color: var(--primary); }

header, main, footer {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(.5rem, 2vh, 1.25rem);
}

header img { height: clamp(2rem, 5vh, 2.5rem); display: block; }

nav { display: flex; gap: 1.5rem; font-weight: 600; }
nav a { text-decoration: none; color: var(--on-surface); }
nav a:hover { color: var(--primary); }

main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* safe: if a tiny screen overflows, keep the top visible instead of clipping it */
  justify-content: safe center;
  gap: clamp(1rem, 4vh, 2.5rem);
}

.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
}

h1 {
  font-size: clamp(2rem, min(6vw, 7.5vh), 4rem);
  line-height: 1.05;
  font-weight: 700;
  margin: clamp(.5rem, 1.5vh, 1rem) 0;
}
h1 em { font-style: normal; color: var(--primary); }

.lead { font-size: clamp(1rem, 2.4vh, 1.25rem); color: var(--muted); max-width: 32rem; margin: 0; }

.name-story {
  margin: clamp(.5rem, 2vh, 1.5rem) 0 0;
  font-size: .9375rem;
  color: var(--muted);
}
.name-story b { color: var(--on-surface); }
.name-story .sea { color: var(--primary); }
.name-story .cicada { color: var(--tertiary); }

.mascot-wrap { position: relative; display: grid; place-items: center; }
.sun {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* summer sun by day, pale moon over the bay by night */
  background: light-dark(rgb(255 156 33 / 28%), rgb(131 207 255 / 16%));
}
.mascot {
  position: relative;
  width: clamp(7rem, min(26vw, 34vh), 18rem);
}

/* half-built nest in front of the gull's feet; one twig keeps dropping into place */
.nest {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 88%;
  transform: translateX(-50%);
  overflow: visible;
}
.nest .bowl { fill: light-dark(#d9a46a, #9c6a3c); }
.nest .twig { fill: none; stroke: light-dark(#9a6438, #c48a52); stroke-width: 3.5; stroke-linecap: round; }
.nest .twig.light { stroke: light-dark(#c78b52, #ddb07a); }
.nest .falling { animation: drop 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
/* the twig starts in the gull's beak, is held for a moment, then dropped into the nest */
@keyframes drop {
  0% { transform: translate(14px, -111px) rotate(-8deg); opacity: 0; }
  10%, 35% { transform: translate(14px, -111px) rotate(-8deg); opacity: 1; }
  60%, 85% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .nest .falling { animation: none; } }

.card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(.75rem, 2.5vh, 1.5rem) 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
}
.card img { height: clamp(3rem, 8vh, 4.5rem); display: block; }
.card h2 { margin: 0; font-size: 1.25rem; }
.card p { margin: .25rem 0 0; color: var(--muted); }

.button {
  padding: .5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.button:hover { background: var(--primary); color: var(--surface); }

/* flat old-town and lighthouse silhouette standing on the sea, footer band continues the deep water */
.coast { position: relative; height: clamp(6rem, 24vh, 15rem); margin-bottom: -1px; }
.coast svg { position: absolute; left: 0; width: 100%; }
.coast-far { bottom: 18%; height: 50%; }
.coast-town { bottom: 18%; height: 100%; }
.coast-sea { bottom: 0; height: 26%; }
.coast .far { fill: light-dark(#e8eef0, #0a2846); }
.coast .town { fill: light-dark(#f3e1c7, #0f3a66); }
.coast .roof { fill: light-dark(#f7c3a4, #14497d); }
.coast .window { fill: light-dark(#e9cfae, #0a2c52); }
.coast .palm { fill: light-dark(#cfe3c4, #12406f); }
.coast .forest-far { fill: light-dark(#d5e4c6, #113d69); }
.coast .forest { fill: light-dark(#c3d8ae, #144676); }
.coast .forest-deep { fill: light-dark(#adc999, #185081); }
.coast .lantern { fill: light-dark(#f4774b, #ff9c21); }
.coast .dome { fill: light-dark(#dfe6ec, #d9e6f2); }
.coast .flag { fill: var(--orange); }
.coast .w1 { fill: light-dark(#83cfff, #0b73b8); }
.coast .w2 { fill: #0b8fde; }
.coast .w3 { fill: light-dark(#073b74, #063261); }

.footer-band { background: light-dark(#073b74, #063261); color: #eaf3fb; }
footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: 0 clamp(.5rem, 1.5vh, 1rem);
  font-size: .875rem;
}

@media (max-width: 40rem) {
  .hero { grid-template-columns: 1fr; text-align: center; gap: .5rem; }
  .hero .mascot-wrap { order: -1; justify-self: center; }
  /* phones scroll: the one-screen lock only applies to larger screens */
  body { height: auto; min-height: 100dvh; overflow: visible; }
  main { gap: 2rem; padding-block: 1.5rem; }
  .mascot { width: 10rem; }
  h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .lead { margin: 0 auto; font-size: 1.0625rem; }
  .card { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1rem; padding: 1.5rem 1rem; }
  .card img { height: 3.5rem; }
  .coast { height: 9rem; }
  nav { gap: 1rem; }
}