/* GeekHorizon Limited — official site styles.
   Design system: Refactoring UI 20 rules (see ../geekhorizon-docs/design-log.md).
   Tokens below are "recommended defaults" from the skill's design-tokens.md. */

:root {
  /* Greys: 10 shades, slate scale (R13) */
  --grey-50: #F8FAFC;
  --grey-100: #F1F5F9;
  --grey-200: #E2E8F0;
  --grey-300: #CBD5E1;
  --grey-400: #94A3B8;
  --grey-500: #64748B;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1E293B;
  --grey-900: #0F172A;

  /* Primary: navy, 9 shades (R13) */
  --navy-50: #F0F5FA;
  --navy-100: #DCE8F2;
  --navy-200: #B9D0E4;
  --navy-300: #8AADD0;
  --navy-400: #5B87B8;
  --navy-500: #3D6A9E;
  --navy-600: #2C5484;
  --navy-700: #23436B;
  --navy-800: #1B3353;
  --navy-900: #0F2440;

  /* Text colours: 3 levels (R03) */
  --text-1: var(--grey-900);
  --text-2: var(--grey-700);
  --text-3: var(--grey-500);

  --link: var(--navy-600);
  --radius: 6px; /* R01: serious */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06); /* R19 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text-2);
  background: #fff;
  line-height: 1.7;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 880px; margin-inline: auto; padding: 0 24px; }

/* Header: one hairline only (R19); logo + nav share a baseline (R12) */
.site-header { border-bottom: 1px solid var(--grey-200); background: #fff; }
.header-inner { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 0; }
.logo { font-size: 20px; font-weight: 700; color: var(--text-1); letter-spacing: -0.3px; }
.logo:hover { text-decoration: none; }
nav a { margin-left: 32px; color: var(--text-2); font-size: 15px; font-weight: 400; }
nav a.active { color: var(--text-1); font-weight: 600; } /* R04: siblings turned down */

/* Hero: 4px accent bar flush with the top edge (R16) */
.hero {
  background: var(--navy-900);
  color: #fff;
  padding: 96px 0 88px;
  margin-bottom: 96px; /* R07: generous section gap */
  border-top: 4px solid var(--navy-500);
}
.hero h1 { margin: 0 0 8px; font-size: 48px; line-height: 1.15; letter-spacing: -0.5px; color: #fff; }
.cn-name { margin: 0 0 24px; font-size: 18px; color: var(--navy-200); }
.tagline { margin: 0 0 32px; font-size: 18px; line-height: 1.6; color: #DBE4EE; max-width: 640px; }

/* Primary action: exactly one solid button per page (R06) */
.btn-primary {
  display: inline-block;
  background: #fff;
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius);
  text-decoration: none;
}
.btn-primary:hover { background: var(--navy-100); text-decoration: none; }
.btn-primary--dark { background: var(--navy-800); color: #fff; }
.btn-primary--dark:hover { background: var(--navy-700); }

main { padding-bottom: 96px; }
main h1 { font-size: 32px; line-height: 1.2; margin: 64px 0 8px; color: var(--text-1); }
main h2 { font-size: 22px; line-height: 1.3; margin: 64px 0 16px; color: var(--text-1); } /* R09: d_out 64 > d_in 16 */
main h2:first-child { margin-top: 0; }
main h3 { font-size: 17px; margin: 0 0 8px; color: var(--text-1); }
main p, main li { font-size: 16px; color: var(--text-2); }
main p { max-width: 65ch; } /* R11: 45-75 characters per line */
.meta { color: var(--text-3); font-size: 14px; }

/* Article pages: 45-75 chars per line (R11) */
.article { max-width: 65ch; }
.article p, .article li { line-height: 1.8; }

/* Sections: between-group gap much larger than within-group gap (R09) */
section + section { margin-top: 96px; }

/* Cards: shadow + background instead of borders (R19) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.card { border: none; border-radius: var(--radius); padding: 32px; background: var(--grey-50); box-shadow: var(--shadow-card); }
.card p { margin: 0; font-size: 15px; }

/* Spec sheet: labels slightly darker than the data (R05 exception).
   Rows separated by space, not lines (R19). */
.details { margin: 16px 0 0; }
.details div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 12px 0; }
.details dt { font-weight: 600; color: var(--text-1); font-size: 15px; }
.details dd { margin: 0; font-size: 15px; color: var(--text-2); }

.site-footer { border-top: 1px solid var(--grey-200); padding: 32px 0; background: var(--grey-50); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-inner p { margin: 0; font-size: 14px; color: var(--text-2); }

@media (max-width: 640px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 24px; }
  nav a { margin-left: 0; margin-right: 24px; }
  nav a:last-child { margin-right: 0; }
  .cards { grid-template-columns: 1fr; }
  .details div { grid-template-columns: 1fr; gap: 4px; }
  .hero { padding: 64px 0; margin-bottom: 64px; }
  .hero h1 { font-size: 28px; } /* R10: 28/16 = 1.75x on mobile, down from 3x on desktop */
  .tagline { font-size: 17px; }
  nav a { margin-left: 16px; }
  main h2 { margin-top: 48px; }
  section + section { margin-top: 64px; }
}