/* Shared framing for the standalone portfolio pages. */
/* Short entrance on every document load; content stays usable throughout. */
@media (prefers-reduced-motion: no-preference) {
  .portfolio-page > main { animation: page-enter .9s cubic-bezier(.2,.7,.25,1); }
  .portfolio-page > .page-pagination { animation: page-footer-enter 1s ease-out; }
  /* Avoid stacking the old home entrance over the shared page entrance. */
  .portfolio-page :is(.hero > .eyebrow, .hero h1, .hero-description, .hero-actions, .code-stage, .chronology-heading) { animation: none; }
  .portfolio-page.page-entry-reset > :is(main, .page-pagination) { animation: none; }
}
@keyframes page-enter {
  from { opacity: .12; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes page-footer-enter {
  from { opacity: .2; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-page > :is(main, .page-pagination) { animation: none; }
}
@media print {
  .portfolio-page > :is(main, .page-pagination) { animation: none; }
}
.portfolio-page { min-height: 100dvh; display: flex; flex-direction: column; }
.portfolio-page > header { flex-shrink: 0; }
.portfolio-page > main { flex: 1; width: 100%; min-width: 0; }
.portfolio-page .wrap { width: min(1120px, calc(100% - 64px)); }
.portfolio-page .nav { gap: 16px; }
.portfolio-page .navlinks { gap: 18px; font-size: 13px; }
.portfolio-page .navlinks a[aria-current="page"] { color: var(--orange); }
.portfolio-page .navlinks a[aria-current="page"]::after { transform: scaleX(1); }
.portfolio-page .nav-contact[aria-current="page"] { outline: 2px solid var(--orange); outline-offset: 4px; }
.portfolio-page main > .section { padding-block: clamp(48px, 7vw, 88px); }
.portfolio-page main > .hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 32px; }
.portfolio-page .page-title { font-size: clamp(38px, 4.6vw, 62px); font-weight: 650; line-height: 1.12; letter-spacing: -2px; margin: 0; text-wrap: balance; }
.portfolio-page .page-title > span { background: none; color: inherit; }
.portfolio-page .page-title > .orange-text { color: var(--orange); }
.portfolio-page .page-title > .subtle { color: var(--muted); }
.portfolio-page .contact .page-title { font-size: clamp(44px, 6vw, 80px); }
.portfolio-page .contact .page-title > span { color: var(--orange); }
.portfolio-page .section-heading { align-items: flex-start; }
.portfolio-page .section-heading > div { min-width: 0; }
.portfolio-page .journey-grid { gap: clamp(32px, 6vw, 80px); }
.portfolio-page :is(.skills-grid, .project-grid, .internship-grid, .certifications-grid, .passkey-intro, .security-columns) > * { min-width: 0; }
.portfolio-page .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-page .contact { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 60vh; }
.portfolio-page .page-pagination { display: flex; justify-content: space-between; gap: 24px; padding-block: 28px; border-top: 1px solid #80808030; }
.page-pagination a { display: grid; gap: 8px; padding-block: 8px; }
.page-pagination a:last-child { text-align: right; }
.page-pagination span { font-size: 12px; color: var(--muted); }
.page-pagination strong { font-size: 16px; font-weight: 550; }
.page-pagination a:hover strong { color: var(--orange); }
.portfolio-page footer { margin-top: 0; }
.portfolio-page .chronology-heading { padding-top: 56px; }
.chronology-heading > .back-link { display: inline-block; margin-bottom: 32px; }
.portfolio-page.chronology-page > main { width: min(1120px, calc(100% - 64px)); }
@media (max-width: 1280px) {
  .portfolio-page .nav .navlinks { gap: 4px; }
  .portfolio-page .navlinks a::after { display: none; }
  .portfolio-page .navlinks a[aria-current="page"] { background: var(--panel); }
  html[data-theme="light"] .portfolio-page .nav .navlinks { background: #fafafa; border-color: #d4d4db; }
  html[data-theme="light"] .portfolio-page .nav .navlinks a { color: #34343d; }
  html[data-theme="light"] .portfolio-page .nav .navlinks a:is(:hover, :focus-visible, [aria-current="page"]) { background: #eee4da; color: #8c3e16; }
  .portfolio-page .nav:not(.navigation-ready) { height: auto; min-height: 72px; flex-wrap: wrap; padding-block: 16px; }
  .portfolio-page .nav:not(.navigation-ready) .menu-toggle { display: none; }
  .portfolio-page .nav:not(.navigation-ready) .navlinks { display: flex; position: static; order: 4; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; max-height: none; box-shadow: none; }
}
@media (max-width: 760px) {
  .portfolio-page .wrap, .portfolio-page.chronology-page > main { width: calc(100% - 40px); }
  .portfolio-page .nav { gap: 8px; }
  .portfolio-page .page-title { letter-spacing: -1.4px; }
  .portfolio-page .project-grid { grid-template-columns: 1fr; }
  .portfolio-page .section-heading { margin-bottom: 28px; }
  .portfolio-page .page-pagination { gap: 16px; padding-block: 24px; }
  .portfolio-page .chronology-heading { padding-top: 40px; }
  .portfolio-page .contact { min-height: 60vh; }
  .portfolio-page .hero-foot { gap: 16px; line-height: 1.6; }
}
@media (max-width: 380px) {
  .portfolio-page .wrap, .portfolio-page.chronology-page > main { width: calc(100% - 32px); }
  .portfolio-page .nav .brand { font-size: 18px; }
  .portfolio-page .nav-contact { padding: 9px 10px; }
  .portfolio-page .nav-contact span { display: none; }
  .portfolio-page .nav { gap: 6px; }
  .portfolio-page .hero-foot { flex-wrap: wrap; }
}