/* All projects and Education pages, "Canvas" design. Loads after site-toolbar.css and canvas-base.css. */

.canvas-page { --section-gap: clamp(96px, 10vw, 152px); }

.page-hero { padding-top: clamp(56px, 7vw, 96px); }
.page-hero__title { font-size: clamp(48px, 8vw, 104px); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.page-hero__lead { max-width: 640px; margin-top: 24px; color: var(--muted); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.6; }
.page-hero__meta { margin-top: 20px; color: var(--faint); font-size: 15px; font-variant-numeric: tabular-nums; }
.page-hero__meta:empty { display: none; }
.page-body { padding-top: clamp(48px, 6vw, 80px); }

/* ---------- All projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }

/* Placeholder cards while the projects load for the first time */
.work-card.is-skeleton .frame { pointer-events: none; }
.work-card.is-skeleton .frame__image,
.work-card.is-skeleton .skeleton-bar { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.skeleton-bar { display: block; height: 14px; border-radius: 7px; }
.skeleton-bar--title { width: 45%; height: 24px; }
.skeleton-bar--line { width: 75%; margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .work-card.is-skeleton .frame { animation: page-pulse 1.4s ease-in-out infinite alternate; }
  @keyframes page-pulse { from { opacity: 1; } to { opacity: 0.6; } }
}

/* Empty and "didn't load" states */
.page-state { display: grid; justify-items: start; gap: 12px; padding: clamp(28px, 5vw, 56px); border: 1.5px dashed var(--control); border-radius: var(--radius-card); }
.page-state h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.page-state p { max-width: 520px; color: var(--muted); }
.page-state__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- Education ---------- */
.timeline__links { display: grid; gap: 6px; align-self: start; justify-items: start; }
.page-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-card); background: var(--frame); }
.page-next h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.page-next p { margin-top: 6px; color: var(--muted); }
.page-next__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .timeline__links { grid-column: 2; }
}
@media (max-width: 640px) {
  .page-hero { padding-top: 40px; }
  .timeline__links { grid-column: auto; margin-top: 6px; }
}