/* Personal portfolio composition; cinematic environment and shared HUD frames live in hud.css. */
.page-shell { isolation: isolate; padding-top: 16px; }
.nav { min-height: 78px; backdrop-filter: none; padding-block: 12px; }
.nav-links a { background: transparent; border: 0; padding: 12px 14px; }
.nav-links a.active { background: transparent; box-shadow: none; }
.nav-links a::after { bottom: -13px; }
.nav-links a:hover { background: rgba(130, 209, 255, .08); }
.nav:has(.mobile-menu.open) { background: #071522; }
.personal-home { max-width: var(--content-width); margin: 0 auto; }
.personal-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 64px; min-height: calc(100svh - 94px); padding: 60px 0 84px; }
.personal-introduction { position: relative; z-index: 1; }
.personal-education { font-size: .95rem; color: #bdd1de; margin: 0 0 22px; }
.personal-introduction h1 { font-size: clamp(4rem, 7vw, 8rem); line-height: 1.02; font-weight: 650; letter-spacing: -.055em; margin: 0 0 24px; }
.personal-introduction h1 span { display: inline; color: var(--blue); }
.personal-motto { font-size: clamp(1.15rem, 1.8vw, 1.6rem); color: #d8e4ed; line-height: 1.6; margin: 0; }
.personal-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.personal-actions .button { width: auto; min-height: 48px; padding: 0 22px; font-size: .9rem; display: inline-flex; gap: 20px; }
.personal-portrait { position: relative; margin: 0; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: clamp(440px, 70vh, 660px); background: transparent; }
.personal-portrait img { position: relative; height: 100%; max-width: 100%; width: auto; object-fit: contain; mask-image: linear-gradient(black 0%, black 87%, transparent 100%); }
.personal-story, .personal-work { padding: 96px 0; border-top: 1px solid rgba(124, 192, 230, .18); }
.personal-story > div { max-width: 760px; }
.personal-home h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 550; line-height: 1.2; margin: 0 0 28px; letter-spacing: -.025em; }
.personal-story p { font-size: 1.05rem; color: #c2d2df; line-height: 1.85; max-width: 62ch; margin: 0 0 24px; }
.personal-text-link { display: inline-flex; align-items: center; gap: 16px; color: #a6e1fa; font-size: .9rem; font-weight: 550; min-height: 44px; }
.personal-text-link:hover { color: white; }
.personal-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.personal-section-heading h2 { margin: 0; }
.personal-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.personal-project-card { display: block; min-width: 0; transition: transform 180ms ease; }
.personal-project-card:hover, .personal-project-card:focus-visible { transform: translateY(-4px); }
.personal-project-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.project-artwork { display: flex; align-items: center; justify-content: center; height: clamp(190px, 19vw, 280px); padding: 18px; overflow: hidden; background: linear-gradient(135deg, #112b3c, #091b28); border: 1px solid rgba(124, 192, 230, .18); transition: border-color 180ms ease; }
.project-artwork img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.artwork-mobile img { border-radius: 8px; }
.artwork-hardware img { filter: brightness(1.65); }
.personal-project-card:hover .project-artwork, .personal-project-card:focus-visible .project-artwork { border-color: var(--blue); }
.personal-project-card h3 { margin: 18px 0 0; font-size: 1.08rem; font-weight: 550; line-height: 1.4; }
.personal-next { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 0 32px; }
.personal-next .button { display: inline-flex; width: auto; min-height: 48px; padding: 12px 22px; gap: 20px; font-size: .9rem; }
.project-filters { position: relative; padding-bottom: 20px; border-bottom: 1px solid var(--dashboard-border); }
.project-filter { background: transparent; border-radius: 0; }
.project-filter.active { background: #133244; box-shadow: inset 0 -2px #78d8ff; }
.hud-panel-secondary, .info-card { --panel-cut: 0px; }
@media (max-height: 820px) and (min-width: 1101px) {
  .personal-hero { padding: 36px 0 64px; }
  .personal-portrait { height: 480px; }
}
@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .personal-hero { gap: 28px; grid-template-columns: 1.15fr .85fr; }
  .personal-introduction h1 { font-size: clamp(3.3rem, 7vw, 5.8rem); }
}
@media (max-width: 740px) {
  .page-shell { padding-top: 8px; }
  .nav { min-height: 72px; padding-inline: 8px; }
  .personal-hero { grid-template-columns: 1fr; gap: 32px; padding: 56px 0 40px; min-height: calc(100svh - 80px); }
  .personal-introduction h1 { font-size: clamp(2.6rem, 12vw, 5rem); margin-bottom: 18px; }
  .personal-education { font-size: .83rem; margin-bottom: 20px; }
  .personal-motto { font-size: 1.05rem; }
  .personal-actions { gap: 12px; margin-top: 26px; }
  .personal-actions .button { min-height: 46px; font-size: .85rem; padding-inline: 18px; }
  .personal-portrait { height: 350px; max-width: 350px; justify-self: center; }
  .personal-story, .personal-work { padding: 56px 0; }
  .personal-story p { font-size: .95rem; }
  .personal-section-heading { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 24px; }
  .personal-project-grid { grid-template-columns: 1fr; gap: 32px; }
  .project-artwork { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-project-card, .project-artwork { transition: none; }
  .personal-project-card:hover, .personal-project-card:focus-visible { transform: none; }
}