/* Crouse Craft — public home page.
   Built to CrouseCraft_K02_design_spec.txt. Every colour below is from the
   spec; none were sampled off a raster.

     Ultramarine  #172A8A   field and wordmark   12.11:1 on white, 10.94:1 on pale blue
     Vivid orange #FF6A27   the rising sun       4.23:1 on ultramarine, 2.58:1 on pale blue
     Pale blue    #E9F5FF   presentation ground
     White        #FFFFFF   the open linework

   Rules from the spec that this file obeys:
   · Orange is never small body text on pale blue (2.58:1). It is the sun, and
     non-text accent rules. Buttons are ultramarine on white — 12.11:1.
   · Body copy is a clear contemporary sans. The wordmark is outlined DejaVu
     Serif Bold and is used only as supplied, never re-typeset, so the page
     sets nothing in a serif.
   · The logo appears on the supplied pale blue, unaltered, with clear space
     around it. No stretching, rotation, gradients or shadows anywhere.
   · The horizon in the hero is page ornament built from the mark's vocabulary.
     It is NOT a modified logo — the real lockup appears once, in the masthead. */

:root {
  --blue: #172a8a;
  --blue-deep: #102066;
  --blue-ink: #0d1a52;
  --sun: #ff6a27;
  --sun-deep: #e2530f;
  --sky: #e9f5ff;
  --sky-edge: #cfe5f7;
  --paper: #ffffff;
  --body: #3a4661;
  --muted: #5b6880;
  --rule: rgba(23, 42, 138, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--body);
  font: 400 17px/1.65 "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--blue); font-weight: 600; letter-spacing: -.012em; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--sun); color: #fff; padding: 10px 16px; z-index: 60; }
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead { background: var(--sky); border-bottom: 1px solid var(--sky-edge); }
.masthead .wrap { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; }
.masthead img { width: 176px; height: auto; display: block; }
.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.masthead nav a {
  color: var(--blue); text-decoration: none; font-weight: 500; font-size: 15px;
}
.masthead nav a:hover { color: var(--blue-deep); text-decoration: underline; }

.signin {
  background: var(--blue); color: #fff !important; text-decoration: none;
  font-weight: 600; padding: 10px 24px; border: 0; display: inline-block;
  transition: background .16s ease;
}
.signin:hover { background: var(--blue-deep); color: #fff !important; }

/* ── hero ───────────────────────────────────────────────────────────────── */
/* Faithful to how the mark is actually composed: the horizon runs the FULL
   width of the navy field, low in the frame, with the sun sitting on it and the
   window grid at the right edge. Two earlier attempts got this wrong — first by
   blowing the sun up to viewport scale behind the headline, then by boxing the
   composition into a panel beside it, which left the left half of the field
   empty. The words sit above the horizon; nothing overlaps. */
.hero { background: var(--blue); overflow: hidden; position: relative; }
.hero .wrap { padding-top: 40px; padding-bottom: 16px; position: relative; z-index: 2; }

.hero h1 {
  color: var(--sky);
  font-size: clamp(31px, 4.2vw, 49px);
  line-height: 1.11;
  margin: 0 0 16px;
  max-width: 26ch;
  font-weight: 600;
}
.hero p.lede { color: #bcdcf5; font-size: clamp(16px, 1.5vw, 18px); max-width: 46ch; margin: 0 0 24px; }
.hero .actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
/* Ultramarine on ultramarine is invisible. White on the field is 12.11:1;
   orange behind white lettering fails, and orange behind ultramarine is
   4.23:1 — under AA for normal-size text. So the field's button is white. */
.hero .signin { background: #fff; color: var(--blue) !important; }
.hero .signin:hover { background: var(--sky); color: var(--blue-deep) !important; }
.hero .ghost {
  color: var(--sky); text-decoration: none; font-weight: 500;
  border-bottom: 2px solid var(--sun); padding-bottom: 2px;
}

/* The horizon: full-bleed, the last thing in the field. */
.horizon { position: relative; height: 168px; margin-top: 10px; z-index: 2; }

.horizon .sun {
  position: absolute; right: 21%; bottom: 70px;
  width: 218px; max-width: 26vw; aspect-ratio: 2 / 1;
  background: var(--sun);
  border-radius: 999px 999px 0 0;
  /* In the mark the linework is WHITE — negative space opened through the
     dark field — not the pale-blue presentation ground. A hairline, never
     a halo: the spec forbids shadows and gradients. */
  box-shadow: 0 0 0 8px #fff;
}
.horizon .band {
  position: absolute; left: -4%; right: -4%; height: 10px;
  background: #fff;
}
.horizon .band.b1 { bottom: 74px; transform: rotate(-.9deg); }
.horizon .band.b2 { bottom: 57px; transform: rotate(1.1deg); }
.horizon .band.b3 { bottom: 22px; }
.hero .grid {
  position: absolute; z-index: 1; top: 0; bottom: 0; right: 5%;
  width: 190px;
  background:
    linear-gradient(#fff, #fff) 22% 0 / 10px 100% no-repeat,
    linear-gradient(#fff, #fff) 78% 0 / 10px 100% no-repeat;
}

/* ── sections ───────────────────────────────────────────────────────────── */
section { padding: 78px 0; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 8px;
}
h2 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 10px; font-weight: 600; }
.section-lede { color: var(--muted); max-width: 58ch; margin: 0 0 34px; }

/* The mark's signature: a heavy rule broken by two verticals. */
.gridrule {
  height: 8px; background: var(--blue); margin: 0 0 34px;
  position: relative; max-width: 300px;
}
.gridrule::before, .gridrule::after {
  content: ""; position: absolute; top: -7px; bottom: -7px; width: 6px; background: var(--sky);
}
.gridrule::before { right: 46px; }
.gridrule::after { right: 22px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.co {
  background: var(--paper);
  border: 1px solid var(--sky-edge);
  border-top: 5px solid var(--accent, var(--blue));
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
}
.co .code {
  font: 600 11px/1 "Barlow", sans-serif; letter-spacing: .16em;
  color: #fff; background: var(--accent, var(--blue));
  padding: 5px 9px; align-self: flex-start;
}
.co h3 { font-size: 21px; margin: 14px 0 8px; font-weight: 600; }
.co p { margin: 0 0 16px; color: var(--muted); font-size: 16px; flex: 1; }
.co a {
  color: var(--blue); font-size: 14px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px; align-self: flex-start;
}
.co a:hover { color: var(--blue-deep); border-bottom-color: var(--blue); }

/* ── creed band ─────────────────────────────────────────────────────────── */
.creed { background: var(--blue); color: var(--sky); position: relative; }
.creed::before, .creed::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; background: var(--sky);
}
.creed::before { top: 26px; }
.creed::after { bottom: 26px; }
/* The sun as a non-text accent rule — orange is never asked to carry text. */
.creed .sunbar { width: 78px; height: 8px; background: var(--sun); margin: 0 auto 22px; }
.creed blockquote {
  margin: 0 auto; max-width: 56ch; text-align: center;
  font-size: clamp(19px, 2.9vw, 26px); line-height: 1.5; color: #fff; font-weight: 500;
}
.creed cite { display: block; margin-top: 16px; font: 500 12px/1 "Barlow", sans-serif; color: #b9cdea; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer { background: var(--blue-ink); color: #b9d4ea; padding: 40px 0; }
footer .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
footer p { margin: 0; font-size: 14px; }
footer .right { margin-left: auto; display: flex; gap: 18px; }
footer a { color: var(--sky); text-decoration: none; font-size: 14px; }
footer a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .hero .wrap { padding-top: 52px; padding-bottom: 20px; }
  .horizon { height: 150px; margin-top: 10px; }
  .horizon .sun { right: 8%; bottom: 66px; width: 170px; box-shadow: 0 0 0 6px var(--sky); }
  .horizon .band { height: 7px; }
  .horizon .band.b1 { bottom: 64px; }
  .horizon .band.b2 { bottom: 50px; }
  .horizon .band.b3 { bottom: 18px; }
  .hero .grid { display: none; }
  .masthead img { width: 156px; }
  .masthead nav { gap: 12px; }
  .masthead nav a.hide-sm { display: none; }
  section { padding: 54px 0; }
  footer .right { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .signin { transition: none; }
}