/* CrewCosting site styles.
   One spacing scale (fleet/house_style.md 2). Every vertical gap on this site
   comes from a --space-* token; nothing sets an ad hoc margin. */

:root {
  --ink: #1A2027;
  --slate: #0F3D5C;
  --orange: #E8622C;
  --paper: #F7F5F1;
  --card: #FFFFFF;
  --steel: #6B7785;
  --line: #E3DFD6;
  --tint: #EFEAE0;
  --green: #2E7D4F;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --measure: 65ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}

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

h1, h2, h3 { line-height: 1.2; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* ---- rhythm -------------------------------------------------------------
   One rule owns section padding. Sections never carry their own, and the
   first heading and last paragraph inside one are flush, so stacking two
   sections gives one gap rather than two. */

section { padding: var(--space-6) 0; }
section > .wrap > :first-child,
section.wrap > :first-child { margin-top: 0; }
section > .wrap > :last-child,
section.wrap > :last-child { margin-bottom: 0; }

section h2 {
  font-size: 1.45rem;
  margin: 0 0 var(--space-3);
}

section p { max-width: var(--measure); margin: 0 0 var(--space-3); }
section p:last-child { margin-bottom: 0; }

section.tint { background: var(--tint); }

/* ---- header and footer -------------------------------------------------- */

header.site {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

header.site img { height: 26px; width: auto; display: block; }

header.site nav a {
  margin-left: var(--space-3);
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

footer.site {
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0;
  color: var(--steel);
  font-size: 0.9rem;
  background: var(--card);
}

footer.site p { margin: 0 0 var(--space-1); max-width: var(--measure); }
footer.site p:last-child { margin-bottom: 0; }

/* ---- hero --------------------------------------------------------------- */

.hero { padding: var(--space-6) 0 var(--space-5); }

.hero h1 {
  font-size: 2.2rem;
  margin: 0 0 var(--space-2);
  max-width: 22ch;
}

.hero .sub {
  font-size: 1.1rem;
  color: var(--slate);
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
}

.buy {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0;
}

.price {
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
}

.btn.secondary {
  background: transparent;
  color: var(--slate);
  border: 2px solid var(--slate);
  padding: 10px var(--space-3);
}

.status {
  display: inline-block;
  border: 1px dashed var(--steel);
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
  color: var(--steel);
  font-size: 0.95rem;
  background: var(--card);
}

/* ---- product screenshot ------------------------------------------------- */

.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: var(--space-3);
  overflow-x: auto;
}

.shot img { display: block; max-width: 100%; height: auto; }

.shot figcaption {
  margin-top: var(--space-2);
  font-size: 0.88rem;
  color: var(--steel);
}

/* ---- before and after --------------------------------------------------- */

.ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.ba > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-3);
}

.ba h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

.ba ul { margin: 0; padding-left: var(--space-3); }
.ba li { margin-bottom: var(--space-1); }
.ba li:last-child { margin-bottom: 0; }
.ba .after { border-color: var(--green); }

/* ---- cards and lists ---------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}

.card h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.card p { margin: 0 0 var(--space-3); color: var(--steel); font-size: 0.95rem; }
.card .price { font-size: 1.1rem; margin-bottom: var(--space-1); }
.card a { font-weight: 700; text-decoration: none; margin-top: auto; }

ul.inside { padding-left: var(--space-3); margin: 0; max-width: var(--measure); }
ul.inside li { margin-bottom: var(--space-2); }
ul.inside li:last-child { margin-bottom: 0; }

details { border-bottom: 1px solid var(--line); padding: var(--space-2) 0; }
details:first-of-type { border-top: 1px solid var(--line); }
details summary { font-weight: 700; cursor: pointer; }
details p { margin: var(--space-1) 0 0; }

.note { font-size: 0.9rem; color: var(--steel); }