/* ianlan.dev — the umbrella site.
   Deliberately restrained, and sharing the docs palette so ianlan.dev and
   docs.ianlan.dev read as one system. No JavaScript: the theme follows the
   reader's system preference, so there is nothing to toggle and nothing to
   persist. */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --border: #e4e7ec;
  --text: #1a1d23;
  --text-soft: #545a66;
  --text-faint: #8b919e;
  --accent: #2ea043;
  --accent-line: rgba(46, 160, 67, 0.35);
  --accent-wash: rgba(46, 160, 67, 0.10);
  --radius: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --bg-soft: #131920;
    --border: #232b36;
    --text: #e6edf3;
    --text-soft: #9aa4b2;
    --text-faint: #6e7681;
    --accent: #3fb950;
    --accent-line: rgba(63, 185, 80, 0.4);
    --accent-wash: rgba(63, 185, 80, 0.13);
  }
}

* { box-sizing: border-box; }

/* One wash of accent behind the masthead, the same gesture the docs hub uses.
   Anchored to the top of the document rather than the viewport, so it scrolls
   away with the masthead it decorates instead of sitting over the cards. */

body { position: relative; }

body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 500px;
  background: radial-gradient(58% 100% at 50% 0%, var(--accent-wash), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

header.top, main, footer { position: relative; z-index: 1; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

.wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------------------------ header */

header.top {
  border-bottom: 1px solid var(--border);
}
header.top .wrap {
  display: flex; align-items: center; gap: 20px;
  height: 62px;
}
.brand {
  font-weight: 650; color: var(--text); font-size: 1rem;
  display: flex; align-items: center; gap: 9px;
}
.brand:hover { text-decoration: none; }
.top nav { margin-left: auto; display: flex; gap: 20px; font-size: 0.9rem; }
.top nav a { color: var(--text-soft); }
.top nav a:hover { color: var(--text); text-decoration: none; }

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

.hero { padding: 84px 0 20px; }
.hero .eyebrow {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero h1 {
  margin: 0 0 14px;
  font-size: 2.6rem;
  letter-spacing: -0.028em;
  line-height: 1.15;
}
.hero-lede {
  margin: 0;
  color: var(--text-soft);
  font-size: 1.1rem;
  max-width: 58ch;
}

/* Three facts, each of which the site can stand behind: the project count
   matches products.json, and every doc set really does carry a
   "What it is not" section — TEMPLATE.md requires one. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--text-faint);
}
.hero-facts li { display: flex; align-items: baseline; gap: 7px; }
.hero-facts li + li::before {
  content: "";
  align-self: center;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--border);
  margin-left: -19px; margin-right: 19px;
}
.hero-facts strong { font-weight: 600; color: var(--text); }

/* ---------------------------------------------------------------- sections */

section { padding: 56px 0; }
section h2 {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
section > .wrap > p.section-lede,
section > .wrap-wide > p.section-lede {
  margin: 0 0 26px;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- projects */

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* A hairline of accent along the top edge, drawn in on hover — the same
   gesture the docs hub cards use. */
.project::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.project:hover::before { transform: scaleX(1); }
.project:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  text-decoration: none;
}
.project-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.project h3 { margin: 0; font-size: 1.1rem; }
.project .status.alpha { border-color: var(--accent-line); color: var(--accent); }
.project .status.early { color: var(--text-faint); }
.project .status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
}
.project .source-state {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}
.project p { margin: 0 0 14px; color: var(--text-soft); font-size: 0.93rem; }
.project p.meta {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}
.project-links {
  display: flex; align-items: baseline; gap: 16px;
  margin-top: auto;
  font-size: 0.87rem; font-weight: 600;
}
.project-links span { color: var(--accent); }
.project-links span.muted { color: var(--text-faint); font-weight: 400; }
.project-links .go::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s ease;
}
.project:hover .go::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ footer */

footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 48px;
  color: var(--text-faint);
  font-size: 0.87rem;
}
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--text-soft); }

@media (max-width: 600px) {
  .hero { padding: 56px 0 8px; }
  .hero h1 { font-size: 1.95rem; }
  .hero-lede { font-size: 1rem; }
  .top nav { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .project:hover { transform: none; }
}

/* ------------------------------------------------------------------- suite */
/* The Packet family page. Wider than the umbrella so the at-a-glance table
   has room; everything else inherits the tokens above. */

.wrap-wide { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 22px; }

.suite-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 8px 0 0; }
.suite-table th {
  text-align: left; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-faint); font-weight: 650;
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--border);
}
.suite-table td {
  padding: 13px 14px 13px 0; border-bottom: 1px solid var(--border);
  vertical-align: top; color: var(--text-soft);
}
.suite-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

.badge {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem;
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px;
  white-space: nowrap; color: var(--text-soft);
}
.badge.alpha { border-color: var(--accent-line); color: var(--accent); }
.badge.early { color: var(--text-faint); }

.product-detail { padding: 30px 0; border-bottom: 1px solid var(--border); }
.product-detail:last-child { border-bottom: 0; }
.product-detail h3 { margin: 0 0 3px; font-size: 1.12rem; }
.product-detail .meta {
  margin: 0 0 12px; font-family: var(--mono); font-size: 0.76rem; color: var(--text-faint);
}
.product-detail p { margin: 0 0 12px; color: var(--text-soft); font-size: 0.94rem; }
.product-detail .links { display: flex; gap: 16px; font-size: 0.87rem; flex-wrap: wrap; }

.callout {
  border-left: 2px solid var(--accent-line); background: var(--bg-soft);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 22px 0 0;
}
.callout p { margin: 0; color: var(--text-soft); font-size: 0.93rem; }
.callout strong { color: var(--text); }

.fit { color: var(--text-soft); font-size: 0.94rem; max-width: 68ch; }
.fit strong { color: var(--text); }

/* Two things that only show up in a narrow column: the arrow wrapping onto a
   line of its own away from its label, and the fact-list separators leaving a
   hanging indent wherever the list wraps. Both are cheaper to remove than to
   fight. */
.project-links .go { white-space: nowrap; }

@media (max-width: 600px) {
  .hero-facts { gap: 4px 18px; }
  .hero-facts li + li::before { display: none; }
}