/* ============================================
   FOLIO — About + explorations + resume
   ============================================ */

.about-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-3xl); align-items: center; padding-top: var(--space-2xl); padding-bottom: var(--space-lg); }
.about-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.portrait-wrap { position: relative; width: 100%; max-width: 380px; justify-self: end; }
.portrait-wrap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 22%;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--violet-600), var(--sky-400));
  box-shadow: 0 18px 44px rgba(18,18,19,.16);
}
.portrait-wrap img { position: relative; width: 100%; display: block; filter: drop-shadow(0 8px 18px rgba(18,18,19,.22)); }

/* Workflow */
.workflow { padding-top: var(--space-3xl); }
.workflow h2, .principles h2, .past h2 { font-size: var(--text-h2); font-weight: 600; margin: 0 0 var(--space-lg); letter-spacing: -0.01em; }
.flow { display: flex; gap: var(--space-md); align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.flow .step { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: 180px; text-align: center; }
.flow .step small { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); line-height: 1.5; }
.flow .sep { color: var(--color-text-secondary); font-size: 1.2rem; padding-top: 9px; }
.flow .node { transition: transform .25s ease, border-color .25s ease; }
.flow .step:hover .node { transform: translateY(-3px); border-color: var(--color-accent); }
.proof-line { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); text-align: center; margin-top: var(--space-lg); }

/* Principles */
.principles { padding-top: var(--space-3xl); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.principle {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-xl);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.principle:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(18,18,19,.10); border-color: var(--color-accent); }
.principle h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--space-sm); }
.principle p { font-size: var(--text-small); color: var(--color-text-secondary); margin: 0; line-height: 1.6; }

/* Explorations strip */
.past { padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); }
.past > p { color: var(--color-text-secondary); max-width: 68ch; }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); }
.explore-card { text-decoration: none; color: inherit; display: block; }
.explore-card .tile {
  display: block;
  aspect-ratio: 3/2; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border); position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tile-route svg { display: block; }
.explore-card:hover .tile { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(18,18,19,.14); }
.explore-card .tile img { width: 100%; height: 100%; object-fit: cover; }
.explore-card .chip { display: block; margin-top: var(--space-sm); color: var(--color-accent); }
.explore-card h4 { font-size: 1rem; font-weight: 600; margin: 4px 0; }
.explore-card p { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0; line-height: 1.55; }
/* Commuter route tile (pure CSS) */
.tile-route { background: var(--ink-900); }
.tile-route svg { width: 100%; height: 100%; }

/* Exploration detail pages */
.xp-hero { padding-top: var(--space-2xl); }
.xp-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.xp-imgs { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin: var(--space-xl) 0; }
.xp-imgs img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); max-width: min(420px, 100%); height: auto; }
.back-link { font-size: var(--text-small); font-weight: 500; }

/* Resume page */
.resume-hero { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.resume-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 700; margin: var(--space-md) 0; letter-spacing: -0.02em; }
.btn {
  display: inline-block; background: var(--color-bg-inverse); color: var(--color-text-inverse);
  font-weight: 500; padding: 14px 28px; border-radius: var(--radius-full);
  transition: background .25s ease, transform .25s ease;
}
.btn:hover { background: var(--color-accent); transform: translateY(-2px); }
[data-theme="dark"] .btn { background: var(--white); color: var(--ink-900); }
[data-theme="dark"] .btn:hover { background: var(--color-accent); color: #fff; }
.resume-block { border-top: 1px solid var(--color-border); padding: var(--space-xl) 0; display: grid; grid-template-columns: 240px 1fr; gap: var(--space-xl); }
.resume-block .when { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .05em; color: var(--color-text-secondary); text-transform: uppercase; padding-top: 4px; }
.resume-block h3 { margin: 0 0 6px; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.resume-block .org {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-secondary); margin: 0 0 var(--space-md); line-height: 1.8;
}
.resume-block .org a { text-transform: none; letter-spacing: normal; }
.resume-block ul { margin: 0; padding-left: 1.1em; color: var(--color-text-secondary); font-size: var(--text-small); line-height: 1.65; }
.resume-block ul li { margin-bottom: 4px; }
.resume-block ul li::marker { color: var(--color-accent); }

/* Skills as pills */
.skill-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.skill-tags li {
  font-size: 0.8125rem; font-weight: 500; color: var(--color-text-primary);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-full);
  padding: 6px 16px; white-space: nowrap;
}

@media (max-width: 860px) {
  .about-hero { grid-template-columns: 1fr; }
  .portrait-wrap { justify-self: center; max-width: 300px; }
  .principle-grid { grid-template-columns: 1fr; }
  .flow .sep { display: none; }
  .resume-block { grid-template-columns: 1fr; gap: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .principle, .explore-card .tile, .flow .node, .btn { transition: none; }
}

/* Exploration hero video */
.xp-video {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  margin: var(--space-xl) 0; display: block;
  box-shadow: 0 18px 44px rgba(18,18,19,.12);
}

/* Tool badges with logos */
.tool-badges { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-xl) 0; }
.tool {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  padding: 9px 18px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary);
  background: var(--color-bg-card);
}
.tool img { width: 20px; height: 20px; display: block; }
[data-theme="dark"] .tool img { filter: invert(0.85) hue-rotate(180deg); }

/* Gradient button */
.btn.btn-grad, [data-theme="dark"] .btn.btn-grad {
  background: var(--grad-brand); background-size: 160% 100%; background-position: 0 0; color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .28);
  transition: background-position .3s ease, transform .25s ease;
}
.btn.btn-grad:hover, [data-theme="dark"] .btn.btn-grad:hover {
  background: var(--grad-brand); background-size: 160% 100%; background-position: 100% 0; color: #fff;
}