/* ==========================================================================
   pages.css — Page-specific sections. Hero, about layout, pages' hero
   banners, bookshelf, gallery, 404, contact page layout.
   ========================================================================== */

/* ---------- HERO (home) ---------- */
.hero {
  min-height: calc(100vh - var(--nav-height));
  display: grid;
  align-items: center;
  padding-block: var(--space-7) var(--space-9);
  position: relative;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 10px var(--accent-teal);
  animation: pulse 2s infinite;
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}
.hero__title .accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__tagline {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  min-height: 1.6em;
  font-weight: 400;
}
.hero__tagline .cursor {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--accent-violet);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(2) infinite;
}
.hero__intro {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.hero__socials { margin-top: var(--space-4); }

/* Hero portrait area */
.hero__portrait {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(169,155,255,0.3), rgba(240,169,142,0.2));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), var(--glow-violet);
  isolation: isolate;
}
.hero__portrait img,
.hero__portrait .avatar-placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__portrait::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(169,155,255,0.5), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.hero__portrait-ring {
  position: absolute;
  inset: -24px;
  border-radius: var(--radius-xl);
  border: 1px dashed rgba(169,155,255,0.4);
  animation: spin 40s linear infinite;
  pointer-events: none;
}

/* Floating orbs around portrait */
.hero__orb {
  position: absolute;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-xs);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero__orb span { color: var(--accent-violet); font-weight: 600; }
.hero__orb--top { top: 10%; left: -8%; animation: float 7s ease-in-out infinite; }
.hero__orb--bottom { bottom: 12%; right: -10%; animation: float 9s ease-in-out infinite reverse; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__portrait { max-width: 320px; }
  .hero__orb--top { left: 0; }
  .hero__orb--bottom { right: 0; }
}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero {
  padding-block: var(--space-8) var(--space-6);
  text-align: left;
  position: relative;
}
.page-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-bottom: var(--space-3);
  display: inline-block;
}
.page-hero h1 {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  margin-bottom: var(--space-3);
}
.page-hero p {
  font-size: var(--fs-lg);
  max-width: 60ch;
  color: var(--text-secondary);
}

/* ---------- About page ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-7);
  align-items: start;
}
.about-portrait {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, rgba(169,155,255,0.25), rgba(240,169,142,0.15));
  border: 1px solid var(--border-strong);
}
.about-portrait img,
.about-portrait .avatar-placeholder { width: 100%; height: 100%; object-fit: cover; }
.about-body h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.about-body h2:first-child { margin-top: 0; }
.about-body p { margin-bottom: var(--space-4); font-size: var(--fs-base); line-height: var(--lh-loose); }

.quick-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.quick-fact__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.quick-fact__value {
  font-weight: 500;
  color: var(--text-primary);
}

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { position: static; max-width: 320px; }
}

/* ---------- Skills ---------- */
.skills-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.skill-group {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  transition: all var(--transition-base);
}
.skill-group:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.skill-group h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.skill-group__list {
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* ---------- "Beyond Work" teaser row ---------- */
.beyond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.beyond-card {
  position: relative;
  padding: var(--space-6);
  min-height: 280px;
  border-radius: var(--radius-lg);
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.beyond-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}
.beyond-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.beyond-card:hover::before { opacity: 0.9; }
.beyond-card--art::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(240,169,142,0.3), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(169,155,255,0.25), transparent 50%);
}
.beyond-card--books::before {
  background:
    radial-gradient(circle at 70% 20%, rgba(230,197,133,0.25), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(122,215,198,0.2), transparent 50%);
}
.beyond-card--volunteer::before {
  background:
    radial-gradient(circle at 50% 20%, rgba(122,215,198,0.25), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(169,155,255,0.22), transparent 50%);
}
.beyond-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.beyond-card h3 { margin-bottom: var(--space-2); }
.beyond-card p { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.beyond-card .arrow-link { color: var(--text-primary); }

/* ---------- Contact section ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-7);
}
.contact-aside h3 { margin-bottom: var(--space-3); }
.contact-aside p { margin-bottom: var(--space-4); }
.contact-list {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-5);
}
.contact-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.contact-list a:hover {
  border-color: var(--accent-violet);
  background: var(--bg-3);
  color: var(--text-primary);
  transform: translateX(4px);
}
.contact-list svg { width: 20px; height: 20px; color: var(--accent-violet); flex-shrink: 0; }
.contact-list .label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Experience page detail ---------- */
.experience-block {
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.experience-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--accent-violet), var(--accent-coral));
  opacity: 0.6;
}
.experience-block__header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.experience-block__dates {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-violet);
  font-weight: 600;
}
.experience-block__role {
  color: var(--text-primary);
  font-size: var(--fs-xl);
  margin-bottom: 4px;
}
.experience-block__company {
  color: var(--text-secondary);
  font-size: var(--fs-base);
}
.experience-block__company a { color: var(--accent-violet); }
.experience-block h4 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  color: var(--accent-violet);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.experience-block ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: var(--space-4);
}
.experience-block ul li {
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.experience-block ul li::marker { color: var(--accent-violet); }
.experience-block__tech {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--space-3);
}

/* ---------- Books shelf ---------- */
.books-section { margin-bottom: var(--space-7); }
.books-section h2 {
  display: flex; align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.books-section h2 .count {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

/* ---------- Volunteering ---------- */
.volunteer-list { display: grid; gap: var(--space-4); }

/* ---------- 404 ---------- */
.notfound {
  min-height: calc(100vh - var(--nav-height));
  display: grid;
  place-items: center;
  padding: var(--space-7);
  text-align: center;
}
.notfound__inner { max-width: 540px; }
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 10rem);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.notfound h1 { margin-bottom: var(--space-3); }
.notfound p { margin-bottom: var(--space-5); margin-inline: auto; }

/* ---------- Decorative dividers ---------- */
.divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin-block: var(--space-7);
}

/* ---------- Featured sections (home) ---------- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.section-header h2 { margin-bottom: 6px; }
.section-header p { color: var(--text-secondary); }