/* Landing page - Galaxy Planet Colonise.
   Flat per COLORS.md: solid fills, honest 1px edges, no gradients, no
   shadows, no glass. The storytelling is done by type scale and whitespace -
   big for the fiction, small and plain for the facts. Palette comes from
   site.css custom properties only. */

.land{overflow-x:clip}
.land section{padding:58px 0 6px}

/* ---------- shared type ---------- */
.land .k{
  margin:0 0 10px;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--blaze);font-weight:800;
}
.land h2{
  margin:0 0 18px;font-size:clamp(26px,4.4vw,34px);line-height:1.16;
  font-weight:800;letter-spacing:-.4px;
}
.land p{color:#e6ddd0}
.land p.wide{max-width:var(--measure)}

/* ---------- screenshots ---------- */
.shot{margin:0}
.shot img{
  width:100%;height:auto;display:block;
  background:var(--panel);border:1px solid var(--line);border-radius:22px;
}
.shot figcaption{margin-top:10px;font-size:14px;color:var(--bone-shade)}

/* ---------- prologue ---------- */
.hero{padding:66px 0 26px}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:56px;align-items:center;
}
.kicker{
  margin:0;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--blaze);font-weight:800;
}
.hero h1{
  margin:10px 0 20px;font-size:clamp(40px,7.5vw,72px);line-height:1.04;
  font-weight:800;letter-spacing:-1.5px;
}
.hero .lede{margin:0 0 16px;font-size:19px;line-height:1.6;max-width:56ch}
.hero .lede.strong{color:var(--bone);font-weight:700}

.plain{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 20px;
  font-size:14px;font-weight:700;color:var(--bone-shade);
}
.plain li{display:flex;align-items:center;gap:8px}
.plain li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--blaze);flex:none;
}

/* ---------- store CTA (both branches deliberate) ---------- */
.store{
  display:inline-block;margin:14px 0 0;
  background:var(--blaze);color:var(--void);text-decoration:none;
  font-weight:800;letter-spacing:.4px;font-size:17px;
  padding:14px 26px;border-radius:999px;
}
a.store:hover{background:#ff9445;color:var(--void)}
a.store:active{background:var(--deep-blaze)}
.store.soon{
  background:transparent;color:var(--bone);
  border:1px solid var(--line);cursor:default;
}
.store.soon em{
  font-style:normal;font-weight:700;font-size:13px;color:var(--bone-shade);
  margin-left:8px;
}
.store.big{font-size:20px;padding:17px 40px}
.store-note{margin:16px 0 0;font-size:15px;color:var(--bone-shade)}
.store-note a{color:var(--blaze)}

/* ---------- at a glance ---------- */
/* One factual paragraph for search and answer engines to quote whole, set as
   a document note (site.css's .callout) so it reads as an aside to the
   fiction rather than a second hero. */
.land section.glance{padding:14px 0 0}
.glance .callout{max-width:var(--measure);margin:0}
.glance p{margin:0;font-size:15px;line-height:1.65}
.glance strong{color:var(--bone)}

/* ---------- the record (timeline) ---------- */
.chapter{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 34px;
  margin:34px 0 0;
}
.chapter h3{
  margin:14px 0 0;font-size:14px;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:800;color:var(--bone);
}
.chapter h3 i{
  font-style:normal;color:var(--blaze);display:block;
  font-size:22px;letter-spacing:0;margin-bottom:2px;
}
.beats{list-style:none;margin:0;padding:0;max-width:var(--measure)}
.beats li{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;
  padding:12px 0;border-top:1px solid var(--line);
}
.beats li:first-child{border-top-color:var(--blaze)}
.beats b{
  color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1.65;
}
.beats span{color:#e6ddd0}
.pivot{
  margin:44px 0 0;font-size:clamp(20px,3.2vw,26px);font-weight:800;
  color:var(--bone);letter-spacing:-.3px;
}

/* ---------- media rows ---------- */
.row{
  display:grid;grid-template-columns:minmax(0,1fr) 280px;
  gap:52px;align-items:center;margin:0 0 26px;
}
.row.flip{grid-template-columns:280px minmax(0,1fr)}
.row p{max-width:56ch}

/* Sign-off line at the end of a block - the joke lands harder with air around
   it and the full Bone weight, rather than running on as body copy. */
.closer{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--bone);font-weight:700;
}

/* ---------- galaxy index ---------- */
.galaxies{
  list-style:none;margin:18px 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.galaxies li{
  display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:6px 15px 6px 12px;font-size:14px;font-weight:700;color:var(--bone);
}
.galaxies i{
  font-style:normal;color:var(--blaze);font-weight:800;font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* ---------- the run ---------- */
.duo{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  max-width:620px;margin:30px 0 0;
}

/* ---------- service records ---------- */
.files{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:14px;margin:26px 0 0;
}
.file{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  border-left:3px solid var(--teal);padding:18px 20px 14px;
}
.file h3{
  margin:0;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:800;color:var(--teal);
}
.file .rank{
  margin:2px 0 10px;font-size:13px;font-weight:700;color:var(--bone-shade);
}
.file p{margin:0;font-size:15px;line-height:1.6}
.file.cmd{border-left-color:var(--gold)}
.file.cmd h3{color:var(--gold)}
.files-note{margin:18px 0 0;font-size:14px;color:var(--bone-shade)}

/* ---------- the terms ---------- */
table.terms{max-width:var(--measure);margin-top:6px}

/* ---------- recruitment ---------- */
.recruit{text-align:center;padding:84px 0 20px}
.recruit h2{margin-bottom:6px}
.recruit .k{margin-bottom:14px}

/* ---------- motion (opening reveal only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero .hero-copy,.hero .hero-shot{
    animation:land-rise .65s ease both;
  }
  .hero .hero-shot{animation-delay:.15s}
  @keyframes land-rise{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }
}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .chapter{grid-template-columns:1fr;gap:4px}
  .chapter h3{display:flex;align-items:baseline;gap:10px}
  .chapter h3 i{display:inline;font-size:16px;margin:0}
}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .hero-shot{max-width:280px;margin:0 auto;width:100%}
  .row,.row.flip{grid-template-columns:1fr;gap:26px}
  .row .shot{max-width:280px;width:100%;margin:0 auto}
  .row.flip .shot{order:2}
  .land section{padding:46px 0 4px}
}
@media (max-width:420px){
  .duo{grid-template-columns:1fr;max-width:280px}
  .store{display:block;text-align:center}
  .plain{gap:6px 14px}
}