/* 01 · Porcelain — token skin. Pair with ../base.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* color */
  --bg: #FFFFFF;
  --bg-alt: #F3F7FB;
  --bg-dark: #12283C;
  --surface: #FFFFFF;
  --ink: #12283C;
  --ink-inverse: #FFFFFF;
  --text-body: #12283C;
  --muted: #54687C;
  --accent: #2E6BD6;
  --accent-hover: #2254AE;
  --accent-tint: #E8F0FB;
  --accent-2: #2E6BD6;            /* single-accent system */
  --line: #DFE8F1;

  /* type — the discipline is the personality: Inter everywhere, two weights max */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-utility: 'Inter', system-ui, sans-serif;
  --display-weight: 600;
  --fs-h1: clamp(2.5rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.875rem, 3.5vw, 2.375rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --lh-body: 1.65;

  /* shape & depth */
  --radius-sm: 8px;               /* buttons, inputs */
  --radius-md: 10px;              /* cards */
  --radius-lg: 16px;              /* photos */
  --shadow: 0 8px 24px rgba(18, 40, 60, 0.06);
  --shadow-hover: 0 8px 24px rgba(18, 40, 60, 0.10);
}

h1 { letter-spacing: -0.02em; }

/* One-photo-per-viewport rule: the site's single large photograph per screenful */
.photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.card .icon-chip {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--radius-sm);
}

/* Cards sitting on tinted sections keep their hairline */
.section-alt .card { border-color: var(--line); }

/* Sticky nav gains blur + hairline on scroll (toggle .is-scrolled via JS) */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
}