/* ─── SECTIONS ─── */

    .section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
    }
    .section--alt { background: var(--color-surface); }
    .section__header {
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .section__label {
      display: inline-flex; align-items: center; gap: var(--space-2);
      font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
      color: var(--color-primary); letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: var(--space-3);
    }
    .section__title {
      font-family: var(--font-mono);
      font-size: var(--text-2xl);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--color-text);
      margin-bottom: var(--space-4);
    }
    .section__desc {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      max-width: 56ch;
      line-height: 1.65;
    }

/* ─── ABOUT ─── */

    .about__grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: clamp(var(--space-8), 6vw, var(--space-16));
      align-items: start;
    }
    .about__avatar-wrap {
      position: relative;
    }
    .about__avatar {
      width: 100%; aspect-ratio: 1;
      border-radius: var(--radius-xl);
      object-fit: cover;
      background: var(--color-surface-offset);
      border: 1px solid var(--color-border);
    }
    .about__avatar-placeholder {
      width: 100%; aspect-ratio: 1;
      border-radius: var(--radius-xl);
      background: var(--color-surface-offset);
      border: 1px solid var(--color-border);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .about__avatar-placeholder svg {
      width: 60%; height: 60%; color: var(--color-text-faint);
    }
    .about__badge {
      position: absolute; bottom: -var(--space-3); right: -var(--space-3);
      background: var(--color-surface-2);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-4);
      box-shadow: var(--shadow-md);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      bottom: var(--space-4); right: calc(-1 * var(--space-6));
    }
    .about__badge-label { color: var(--color-text-faint); margin-bottom: var(--space-1); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
    .about__badge-val { color: var(--color-primary); font-weight: 700; font-size: var(--text-sm); }
    .about__content h2 {
      font-family: var(--font-mono);
      font-size: var(--text-2xl);
      font-weight: 700; letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .about__bio {
      color: var(--color-text-muted); font-size: var(--text-base);
      line-height: 1.7; margin-bottom: var(--space-6);
      max-width: 60ch;
    }
    .about__bio strong { color: var(--color-text); font-weight: 600; }
    .stat-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3); margin-bottom: var(--space-8);
    }
    .stat-card {
      background: var(--color-surface-offset);
      border: 1px solid oklch(from var(--color-text) l c h / 0.08);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-4);
      text-align: center;
    }
    .stat-card__num {
      font-family: var(--font-mono); font-size: var(--text-xl);
      font-weight: 700; color: var(--color-primary); line-height: 1;
      margin-bottom: var(--space-1);
    }
    .stat-card__label {
      font-size: var(--text-xs); color: var(--color-text-muted);
    }
    .skill-tags {
      display: flex; flex-wrap: wrap; gap: var(--space-2);
    }
    .skill-tag {
      font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
      padding: var(--space-1) var(--space-3);
      background: var(--color-accent-dim);
      border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
      color: var(--color-primary);
      border-radius: var(--radius-full);
    }
    .skill-tag--neutral {
      background: var(--color-surface-offset);
      border-color: var(--color-border);
      color: var(--color-text-muted);
    }

    @media (max-width: 768px) {
      .about__grid { grid-template-columns: 1fr; }
      .stat-grid { grid-template-columns: repeat(3, 1fr); }
    }

/* ─── EDUCATION ─── */

    .edu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
      gap: var(--space-5);
    }
    .edu-card {
      background: var(--color-surface);
      border: 1px solid oklch(from var(--color-text) l c h / 0.08);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      display: flex; flex-direction: column; gap: var(--space-3);
      box-shadow: var(--shadow-sm);
    }
    .edu-card__top {
      display: flex; align-items: flex-start; justify-content: space-between;
    }
    .edu-card__icon {
      width: 44px; height: 44px;
      background: var(--color-accent-dim);
      border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
      border-radius: var(--radius-lg);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-primary); flex-shrink: 0;
    }
    .edu-card__badge {
      font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
      color: var(--color-primary);
      background: var(--color-accent-dim);
      border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
      padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
    }
    .edu-card__school {
      font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700;
      letter-spacing: -0.02em; color: var(--color-text);
    }
    .edu-card__period { font-size: var(--text-xs); color: var(--color-text-faint); }
    .edu-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* ─── FOOTER ─── */

    .footer {
      border-top: 1px solid var(--color-divider);
      padding-block: var(--space-8);
    }
    .footer__inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-4); flex-wrap: wrap;
    }
    .footer__brand {
      display: flex; align-items: center; gap: var(--space-2);
      font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted);
    }
    .footer__brand svg { color: var(--color-primary); }
    .footer__copy { font-size: var(--text-xs); color: var(--color-text-faint); }
    .footer__links {
      display: flex; gap: var(--space-4); list-style: none;
    }
    .footer__links a {
      font-size: var(--text-xs); color: var(--color-text-faint);
      text-decoration: none;
    }
    .footer__links a:hover { color: var(--color-text-muted); }

/* ─── DIVIDER ─── */

    .divider { border: none; border-top: 1px solid var(--color-divider); }