/* Landing page — turn 4a of the design direction.
   White ground, flag navy as the structural colour, horizon yellow rationed to
   exactly one button on the page. Radii are 3px throughout: civic, not soft.
   Values are lifted from 4a; the palette matches app/styles.css so / and /app/
   read as one site. This page commits to light — there is no dark variant. */
:root {
  --ink: #0E1A2B;          /* headings */
  --body: #2C3A4C;         /* running prose */
  --muted: #46566A;        /* secondary copy */
  --quiet: #56677A;        /* footer */
  --navy: #0F1C6B;         /* flag navy — structure, step numbers, eyebrow */
  --sun: #F0A93B;          /* horizon yellow — the one button, the one rail */
  --line: #DCE3EC;
  --line-strong: #C6D1DE;  /* input borders */
  --panel-2: #F4F6FA;      /* the form card */
  --pin-bg: #FDF3E1;       /* "Pinned:" confirmation */
  --pin-ink: #6B4A12;      /* 5.9:1 on --pin-bg */
  --placeholder: #5E6E80;
  --measure: 660px;        /* every block below the masthead sits on this */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

#page { max-width: 1068px; margin: 0 auto; padding: 26px; }

/* ── masthead letterbox ────────────────────────────────────────────────
   Towers step down into the bluff face, the bluff slides into the lake.
   Built from clip-paths rather than an image so it stays crisp at any width
   and costs no request. Decorative: the <div> carries the alt text. */
.hero { position: relative; }
.masthead {
  position: relative;
  aspect-ratio: 2.99 / 1;
  overflow: hidden;
  background: #FFFFFF;
}
/* the illustration is one labelled image to a screen reader; the h1 sits
   outside it so the page still has a real heading */
.mh-art { position: absolute; inset: 0; }
.mh-shape { position: absolute; inset: 0; background: var(--navy); }

/* the bluff mass, and the three striations cut into its face */
.mh-bluff   { clip-path: polygon(0 62.5%, 26% 62.5%, 50% 125%, 0 125%); }
.mh-cut-1   { clip-path: polygon(30.2% 71.25%, 34.8% 71.25%, 55.4% 125%, 50.8% 125%); }
.mh-cut-2   { clip-path: polygon(38.9% 80%, 43.1% 80%, 60.4% 125%, 56.2% 125%); }
.mh-cut-3   { clip-path: polygon(46.8% 87.5%, 50.4% 87.5%, 64.8% 125%, 61.2% 125%); }

/* towers — a navy block with a window grid laid over it */
.mh-tower { position: absolute; bottom: 37.5%; background: var(--navy); }
.mh-tower::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(255,255,255,.34) 6px 8px),
    repeating-linear-gradient(90deg,  transparent 0 5px, rgba(255,255,255,.34) 5px 7px);
}
.mh-tower-1 { left: 1.8%; width: 3.2%; top: 48.75%; }
.mh-tower-2 { left: 5.5%; width: 3.8%; top: 51.9%; }
.mh-tower-2::after {
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(255,255,255,.34) 6px 8px),
    repeating-linear-gradient(90deg,  transparent 0 6px, rgba(255,255,255,.34) 6px 8px);
}
.mh-tower-3 { left: 9.8%; width: 3%; top: 50%; }

/* two peaked houses and a sawtooth roof — the low-rise between tower and bluff */
.mh-house { position: absolute; bottom: 37.5%; background: var(--navy); }
.mh-house-1 { left: 13.6%; width: 3.2%; top: 55.6%; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.mh-house-2 { left: 17.2%; width: 3.4%; top: 55%;   clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0 38%); }
.mh-saw {
  left: 21.2%; width: 4.4%; top: 56.25%;
  clip-path: polygon(0 100%, 0 46%, 16.6% 4%, 33.3% 48%, 50% 0, 66.6% 46%, 83.3% 6%, 100% 44%, 100% 100%);
}

.mh-sun {
  position: absolute; right: 8%; top: 20%; width: 6.5%;
  aspect-ratio: 1; border-radius: 50%; background: var(--sun);
}

/* the lake: a field of wave glyphs, clipped so it tucks under the bluff toe */
.mh-water {
  position: absolute; left: 40.8%; right: 0; top: 80%; bottom: 0; overflow: hidden;
  clip-path: polygon(3.9% 0, 100% 0, 100% 100%, 24.3% 100%, 16.2% 37.5%, 8.8% 37.5%);
}
.mh-water svg { display: block; width: 100%; aspect-ratio: 393 / 100; }
.mh-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 6.25%; background: var(--navy); }

/* the title sits in the white, clear of the navy mass below it */
.mh-title { position: absolute; left: 4%; top: 8%; width: 56%; z-index: 1; }
.mh-title h1 {
  margin: 0;
  font-size: clamp(40px, 7.1vw, 76px);
  font-weight: 700; line-height: .92; letter-spacing: -.04em; color: var(--ink);
}
.mh-title p {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.6vw, 17px); color: var(--muted);
}

/* ── the film ──────────────────────────────────────────────────────── */
.about { max-width: var(--measure); margin: 40px auto 0; text-align: center; }
.eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--sun); flex: none; }
.eyebrow span {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.about p {
  margin: 18px 0 0; font-size: 19px; line-height: 1.6; color: var(--body);
  text-wrap: pretty;
}

/* ── the places so far ─────────────────────────────────────────────────
   Curated, text-first, no map (turn 5c holds). The eyebrow here takes a NAVY
   bar — the yellow one belongs to "The film" alone (one highlight bar per
   screen). Status reads as film progress in tinted pills; status colour never
   carries text on white. */
.places { max-width: var(--measure); margin: 46px auto 0; }
.places[hidden] { display: none; }
.eyebrow-quiet::before { background: var(--navy); }
.places-count { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.pg-soon { margin: 10px 0 0; font-size: 14px; color: var(--quiet); }

.places-groups { margin-top: 20px; columns: 2; column-gap: 32px; }
.pgroup { break-inside: avoid; margin-bottom: 24px; }
.pgroup h3 {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line-strong);
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--navy);
}
.pg-blurb { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pgroup ul { list-style: none; margin: 10px 0 0; padding: 0; }
.pgroup li { margin: 0 0 10px; }
.pl-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-t { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pl-stage {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.st-filmed   { background: #E4F3EC; color: #17603F; }
.st-scouting { background: #FDF3E1; color: #6B4A12; }
.st-list     { background: #EEF1F6; color: #3D4C5E; }
.pl-blurb { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--body); }

/* ── the story form ────────────────────────────────────────────────── */
.story { max-width: var(--measure); margin: 36px auto 0; }
.story-card {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 26px 24px;
}
.story-head { text-align: center; margin-bottom: 22px; }
.story-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.story-head p { margin: 8px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

.steps { display: flex; flex-direction: column; gap: 18px; }
.step-label { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.step-n {
  width: 22px; height: 22px; border-radius: 3px; background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none;
}
.step-label span:last-child { font-size: 15px; font-weight: 600; }

.story input, .story textarea {
  display: block; width: 100%; margin: 0;
  background: #FFFFFF; border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 12px; font-size: 14px; font-family: inherit; color: var(--ink);
}
.story textarea { min-height: 76px; line-height: 1.5; resize: vertical; }
.story ::placeholder { color: var(--placeholder); opacity: 1; }
.story input:focus-visible, .story textarea:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy);
}

/* (the "Pinned:" pill lives on /suggest now — --pin-bg/--pin-ink stay in the
   token block above because suggest.css mirrors it) */

/* the one yellow thing you can press */
.send {
  display: block; width: 100%; border: 1px solid var(--sun); background: var(--sun);
  color: var(--ink); text-align: center; font-size: 15px; font-weight: 700;
  font-family: inherit; padding: 15px; border-radius: 3px; cursor: pointer;
}
.send:hover { background: #E39C2E; border-color: #E39C2E; }
.send:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ── footer ────────────────────────────────────────────────────────── */
.foot {
  max-width: var(--measure); margin: 44px auto 0; padding: 20px 0 8px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 12.5px; color: var(--quiet);
}
.foot a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--quiet); text-decoration: none;
}
.foot a:hover { color: var(--navy); text-decoration: underline; }
.foot a:hover svg { stroke: var(--navy); }
.foot svg { flex: none; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* the phone's single call to action — see .cta-phone in the media query */
.cta-phone { display: none; }

/* ── phone (4f) ────────────────────────────────────────────────────────
   "The hero re-crops, it does not shrink." At 375 the 2.99:1 letterbox would
   be 125px tall and unreadable, so the composition keeps every clip-path and
   moves to 1.72:1; the title steps out of the frame into the flow beneath it.
   Copy goes left-aligned, and the inline form gives way to one button. */
@media (max-width: 760px) {
  #page { padding: 20px 16px 28px; }

  /* full-bleed: cancel the page padding so the horizon runs edge to edge */
  .masthead {
    aspect-ratio: 1.72 / 1;
    margin-inline: -16px;
    width: calc(100% + 32px);
  }
  .mh-title { position: static; width: auto; margin-top: 20px; }
  .mh-title h1 { font-size: clamp(44px, 13vw, 62px); }
  .mh-title p { font-size: 16px; margin-top: 8px; }
  /* the 1.72:1 re-crop leaves the sun stranded high in the white — bring it
     down toward the horizon it belongs to */
  .mh-sun { top: 30%; }

  .about { margin-top: 22px; text-align: left; }
  .about p { font-size: 17px; }

  .places { margin-top: 30px; }
  .places-groups { columns: 1; }

  /* the two-step form is desktop-only; the phone gets the button below it */
  .story { display: none; }
  .cta-phone {
    display: block; margin: 22px 0 0; text-decoration: none;
    min-height: 44px; padding: 16px;
  }

  .foot { margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 10px; }
}