/*
 * MacCV website.
 *
 * One stylesheet for both language pages. The two pages share identical markup
 * structure and differ only in text, so a single sheet keeps them from drifting
 * apart visually — the usual failure mode of a hand-maintained bilingual site.
 */

:root {
  /* Palette taken from assets/logo.svg so the site and the app agree. */
  --indigo: #4c3ddb;
  --violet: #6d4ae8;
  --violet-light: #8b5cf6;
  --cyan: #22d3ee;
  --teal: #5eead4;
  --bg: #0b0b12;
  --bg-raised: #13131f;
  --bg-card: #17172a;
  --border: #262640;
  --text: #f2f2f7;
  --text-dim: #a5a5bd;
  --text-faint: #6f6f8a;

  --radius: 14px;
  --radius-sm: 9px;
  --width: 1020px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfbfd;
    --bg-raised: #ffffff;
    --bg-card: #ffffff;
    --border: #e4e4ee;
    --text: #16161d;
    --text-dim: #55556b;
    --text-faint: #8a8aa0;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.wrap {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 24px;
}

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

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

header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
}

.nav .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  color: var(--text);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.nav .brand img { width: 26px; height: 26px; border-radius: 7px; }

.nav .links {
  display: flex;
  gap: 20px;
  margin-left: 14px;
  font-size: 15px;
}

.nav .links a { color: var(--text-dim); }
.nav .links a:hover { color: var(--text); text-decoration: none; }

.nav .spacer { flex: 1; }

.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-faint);
}

.lang a { color: var(--text-dim); }
.lang .current { color: var(--text); font-weight: 600; }

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

/* The hero is two columns: the claim on the left, the panel on the right.
   Side by side because the screenshot is the most persuasive thing on the page, and
   putting it below the fold asks a visitor to scroll to see it. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
  padding: 72px 0 64px;
}

.hero-copy { text-align: left; }

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  /* The rendered image carries its own backdrop; the shadow only lifts it off the page. */
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
}

.hero img.mark {
  width: 92px;
  height: 92px;
  border-radius: 21px;
}

.hero h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 20px 0 0;
  font-weight: 700;
  background: linear-gradient(120deg, var(--text), var(--violet-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .tagline {
  font-size: clamp(18px, 2.1vw, 21px);
  color: var(--text-dim);
  margin: 16px 0 0;
  max-width: 34ch;
}

.hero .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid transparent;
  transition: transform .12s ease, opacity .12s ease;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn.primary {
  background: linear-gradient(135deg, var(--violet), var(--violet-light));
  color: #fff;
  box-shadow: 0 6px 22px -8px var(--violet);
}

.btn.secondary {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

.hero .meta {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-faint);
}

/* Below this the two columns would each be too narrow for the panel to stay legible,
   so the hero stacks — copy first, since that is what a reader needs before scrolling. */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 52px 0 44px;
    text-align: center;
  }

  .hero-copy { text-align: center; }
  .hero h1 { margin-left: auto; margin-right: auto; }
  .hero .tagline { margin-left: auto; margin-right: auto; }
  .hero .actions { justify-content: center; }
  /* The panel is the taller element; on a phone it should not push the copy off screen. */
  .hero-shot { max-width: 460px; margin: 0 auto; }
}

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

section { padding: 56px 0; }

section h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  font-weight: 680;
}

section .lead {
  color: var(--text-dim);
  margin: 0 0 32px;
  max-width: 62ch;
}

/* ---------- philosophy cards ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.pillar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.pillar .icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--violet) 18%, transparent);
}

.pillar h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.pillar p { margin: 0; color: var(--text-dim); font-size: 15.5px; }

.pillar ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 15px; }
.pillar li { margin: 5px 0; }

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

.shot {
  position: relative;
  margin: 8px 0 4px;
  border-radius: var(--radius);
  overflow: hidden;
  /* The rendered image already carries its own backdrop; this is only the frame, so the
     border stays quiet and the corners match the panel's own radius. */
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.65);
  line-height: 0;
}

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

@media (prefers-color-scheme: light) {
  .shot { box-shadow: 0 20px 48px -28px rgba(20, 20, 40, 0.35); }
}

/* ---------- metrics ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.metric {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
}

.metric .value {
  font-size: 27px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.metric .label { font-size: 14px; color: var(--text-faint); margin-top: 2px; }

/* ---------- honest-limit callout ---------- */

.limit {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  margin-top: 26px;
}

.limit h3 { margin: 0 0 10px; font-size: 18px; }
.limit p { margin: 0 0 12px; color: var(--text-dim); font-size: 15.5px; }
.limit p:last-child { margin-bottom: 0; }
.limit code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  padding: 1.5px 6px;
  border-radius: 5px;
}

/* ---------- generic card grid ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ---------- table ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  margin-top: 8px;
}

th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { color: var(--text-faint); font-weight: 600; font-size: 14px; }
td { color: var(--text-dim); }
td:first-child { color: var(--text); white-space: nowrap; }

/* ---------- steps ---------- */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 22px 0 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 52px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 15.5px;
}

.steps li:last-child { border-bottom: none; }

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 13px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--violet) 22%, transparent);
  color: var(--violet-light);
  font-weight: 700;
  font-size: 14px;
}

.steps li strong { color: var(--text); }

/* ---------- code ---------- */

pre {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
}

code { font-family: var(--mono); font-size: 0.92em; }

p code, li code {
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  padding: 1.5px 6px;
  border-radius: 5px;
}

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

footer {
  border-top: 1px solid var(--border);
  padding: 34px 0 44px;
  color: var(--text-faint);
  font-size: 14.5px;
}

footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
}

footer .spacer { flex: 1; }

/* ---------- misc ---------- */

.muted { color: var(--text-faint); font-size: 14.5px; }
.center { text-align: center; }
.mt { margin-top: 26px; }