/* ============================================================
   SECCIONES DEL CV — editorial minimalista sobre fondo negro,
   comparte tokens con la presentacion 3D (mismo :root).
   ============================================================ */

body[data-mode='portfolio'] {
  /* Tokens locales del documento (no tocan la presentacion 3D) */
  color-scheme: dark;
  --cv-bg: var(--bg);
  --cv-ink: var(--on-surface);
  --cv-line: var(--border);
  --cv-line-strong: var(--border-strong);
  --cv-panel: var(--surface-container-low);
  --cv-panel-2: var(--surface-container);
  --cv-rule: var(--outline-variant);
  --cv-accent: var(--primary);
  --cv-nav-bg: rgba(11, 11, 12, 0.86);

  /* El documento necesita una lectura más densa que la presentación 3D. */
  font-size: 1.0625rem;
  line-height: 1.65;

  background: var(--cv-bg);
  color: var(--cv-ink);
}

/* Oculta artefactos del modo presentacion */
body[data-mode='portfolio'] .video-stage,
body[data-mode='portfolio'] #binaryCanvas,
body[data-mode='portfolio'] .loading-intro,
body[data-mode='portfolio'] .scroll-indicator,
body[data-mode='portfolio'] .hero-terminal,
body[data-mode='portfolio'] .hero-bg {
  display: none !important;
}

.cv-document {
  position: relative;
  z-index: 2;
}

/* ──────────────────────────────────────────────────────────
   NAVBAR — barra tecnica fina
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] #navbar {
  border-bottom: 1px solid var(--cv-line);
  background: var(--cv-nav-bg);
  backdrop-filter: blur(10px);
}

body[data-mode='portfolio'] .nav-logo {
  color: var(--cv-accent);
  text-shadow: none;
}

body[data-mode='portfolio'] .nav-links a {
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

body[data-mode='portfolio'] .nav-links a:hover,
body[data-mode='portfolio'] .nav-links a.active {
  color: var(--cv-ink);
}

/* ──────────────────────────────────────────────────────────
   RITMO Y SECCIONES
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] section {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  scroll-margin-top: 4.5rem;
}

body[data-mode='portfolio'] #hero {
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: 5.5rem;
  padding-bottom: 4.5rem;
}

body[data-mode='portfolio'] .hero-content,
body[data-mode='portfolio'] .hero-main {
  grid-template-columns: 1fr;
}

/* Encabezado de seccion: regla fina + marcador de indice rojo + label mono */
body[data-mode='portfolio'] .pixel-divider {
  height: 1px;
  margin-bottom: 1.6rem;
  background: var(--cv-rule);
  opacity: 1;
  position: relative;
}

body[data-mode='portfolio'] .pixel-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 56px;
  height: 7px;
  background: var(--cv-accent);
}

body[data-mode='portfolio'] .section-label {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: var(--cv-accent);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

body[data-mode='portfolio'] .section-label::before {
  content: '// ';
  color: var(--text-dim);
}

body[data-mode='portfolio'] .section-title {
  margin-bottom: 2rem;
  color: var(--cv-ink);
  font-family: var(--font-headline);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────
   PANELES / TARJETAS — slate plano, esquina marcada, top-rule rojo
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .hero-copy,
body[data-mode='portfolio'] .skill-card,
body[data-mode='portfolio'] .project-card,
body[data-mode='portfolio'] .hobby-card,
body[data-mode='portfolio'] .talk-card,
body[data-mode='portfolio'] .contact-box,
body[data-mode='portfolio'] .timeline-item,
body[data-mode='portfolio'] .metric {
  position: relative;
  background: var(--cv-panel);
  border: 1px solid var(--cv-line);
  border-radius: 0;
  box-shadow: none !important;
  backdrop-filter: none;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}

/* Esquina superior-izquierda tipo "corchete" tecnico */
body[data-mode='portfolio'] .skill-card::before,
body[data-mode='portfolio'] .project-card::before,
body[data-mode='portfolio'] .hobby-card::before,
body[data-mode='portfolio'] .talk-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--cv-accent);
  border-left: 2px solid var(--cv-accent);
  opacity: 0;
  transition: opacity var(--transition);
}

body[data-mode='portfolio'] .skill-card:hover,
body[data-mode='portfolio'] .project-card:hover,
body[data-mode='portfolio'] .hobby-card:hover,
body[data-mode='portfolio'] .talk-card:hover,
body[data-mode='portfolio'] .contact-box:hover,
body[data-mode='portfolio'] .timeline-item:hover {
  border-color: var(--cv-line-strong);
  background: var(--cv-panel-2);
  transform: translateY(-3px);
}

body[data-mode='portfolio'] .skill-card:hover::before,
body[data-mode='portfolio'] .project-card:hover::before,
body[data-mode='portfolio'] .hobby-card:hover::before,
body[data-mode='portfolio'] .talk-card:hover::before {
  opacity: 1;
}

/* Sin glitch/explosion del project-card original */
body[data-mode='portfolio'] .project-card::after,
body[data-mode='portfolio'] .project-card::before {
  display: none !important;
}

body[data-mode='portfolio'] .project-card:hover,
body[data-mode='portfolio'] .project-card:hover .project-name,
body[data-mode='portfolio'] .project-card:hover .project-header {
  animation: none !important;
}

body[data-mode='portfolio'] .project-card:hover {
  transform: none;
}

/* ──────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .hero-copy {
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

body[data-mode='portfolio'] .hero-tag {
  color: var(--cv-accent);
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
}

body[data-mode='portfolio'] .hero-avatar-frame {
  margin: 0 0 1.4rem;
  background: var(--cv-panel-2);
  border: 1px solid var(--cv-line);
  box-shadow: none;
}

body[data-mode='portfolio'] .hero-avatar-frame:hover {
  transform: none;
}

body[data-mode='portfolio'] .hero-avatar-frame::after {
  display: none;
}

body[data-mode='portfolio'] .hero-name {
  color: var(--cv-ink);
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: none !important;
  font-size: clamp(2.6rem, 7vw, 5rem);
}

body[data-mode='portfolio'] .hero-name::before,
body[data-mode='portfolio'] .hero-name::after {
  display: none;
}

body[data-mode='portfolio'] .hero-title {
  color: var(--cv-accent);
  font-family: var(--font-label);
}

body[data-mode='portfolio'] .typed-cursor {
  opacity: 0.5;
  animation: none !important;
}

body[data-mode='portfolio'] .hero-summary {
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 60ch;
  font-size: 1.08rem;
}

body[data-mode='portfolio'] .hero-summary strong {
  color: var(--cv-ink);
}

/* Metricas como chips tecnicos */
body[data-mode='portfolio'] .metric {
  padding: 1rem 1.1rem;
}

body[data-mode='portfolio'] .metric-value {
  color: var(--cv-accent);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

body[data-mode='portfolio'] .metric-label {
  color: var(--text-dim);
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────
   BOTONES — finos, sin glitch
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .btn {
  border-radius: 0;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  min-height: 44px;
}

body[data-mode='portfolio'] .btn:hover {
  transform: translateY(-2px);
}

body[data-mode='portfolio'] .btn-primary {
  background: var(--cv-accent);
  color: var(--on-primary);
  box-shadow: none !important;
}

body[data-mode='portfolio'] .btn-primary:hover {
  opacity: 0.9;
}

body[data-mode='portfolio'] .btn-outline {
  border: 1px solid var(--cv-accent);
  color: var(--cv-accent);
}

body[data-mode='portfolio'] .btn-outline:hover {
  background: var(--primary-dim);
  text-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────
   ABOUT
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .about-text p {
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 1.05rem;
}

body[data-mode='portfolio'] .about-text strong {
  color: var(--cv-ink);
}

body[data-mode='portfolio'] .tag,
body[data-mode='portfolio'] .tag-button {
  border: 1px solid var(--cv-line);
  background: var(--cv-panel);
  color: var(--text-soft);
  border-radius: 0;
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

body[data-mode='portfolio'] .tag-button:hover,
body[data-mode='portfolio'] .tag-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cv-accent);
  color: var(--cv-ink);
  background: var(--primary-dim);
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────
   TIMELINE — rail slate + nodos rojos solidos
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .timeline::before {
  width: 1px;
  background: var(--cv-rule);
}

body[data-mode='portfolio'] .timeline-item {
  animation: none !important;
}

body[data-mode='portfolio'] .timeline-item:hover {
  transform: translateX(3px);
}

body[data-mode='portfolio'] .timeline-dot {
  background: var(--cv-accent);
  border: none;
  box-shadow: none !important;
  animation: none !important;
}

body[data-mode='portfolio'] .timeline-date {
  color: var(--cv-accent);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

body[data-mode='portfolio'] .timeline-role {
  color: var(--cv-ink);
  text-shadow: none !important;
}

body[data-mode='portfolio'] .timeline-company {
  color: var(--text-soft);
}

body[data-mode='portfolio'] .timeline-desc {
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 62ch;
}

body[data-mode='portfolio'] .timeline-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--cv-line-strong);
  background: transparent;
  color: var(--cv-accent);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

body[data-mode='portfolio'] .timeline-more:hover,
body[data-mode='portfolio'] .timeline-more:focus-visible {
  border-color: var(--cv-accent);
  background: var(--primary-dim);
  color: var(--cv-ink);
}

body.career-dialog-open {
  overflow: hidden;
}

body[data-mode='portfolio'] .career-dialog {
  width: min(1180px, calc(100vw - 2rem));
  max-width: none;
  height: calc(100dvh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--cv-line-strong);
  background: var(--cv-panel);
  color: var(--cv-ink);
  box-shadow: var(--panel-shadow);
}

body[data-mode='portfolio'] .career-dialog::backdrop {
  background: rgba(10, 11, 14, 0.8);
  backdrop-filter: blur(8px);
}

body[data-mode='portfolio'] .career-dialog[open] {
  animation: career-dialog-enter 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-mode='portfolio'] .career-dialog__frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  border-top: 3px solid var(--cv-accent);
}

body[data-mode='portfolio'] .career-dialog__header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--cv-line);
  background: var(--cv-panel-2);
}

body[data-mode='portfolio'] .career-dialog__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--cv-accent);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-mode='portfolio'] .career-dialog__title {
  margin: 0;
  color: var(--cv-ink);
  font-family: var(--font-headline);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1;
}

body[data-mode='portfolio'] .career-dialog__close {
  display: grid;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--cv-line-strong);
  background: transparent;
  color: var(--text-soft);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

body[data-mode='portfolio'] .career-dialog__close:hover,
body[data-mode='portfolio'] .career-dialog__close:focus-visible {
  border-color: var(--cv-accent);
  color: var(--cv-accent);
}

body[data-mode='portfolio'] .career-dialog__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  scrollbar-color: var(--cv-accent) var(--cv-panel-2);
}

body[data-mode='portfolio'] .career-dialog__intro {
  max-width: 72ch;
  margin: 0;
  color: var(--cv-ink);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.75;
}

body[data-mode='portfolio'] .career-dialog__sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.8rem;
  border: 1px solid var(--cv-line);
  background: var(--cv-line);
}

body[data-mode='portfolio'] .career-dialog__section,
body[data-mode='portfolio'] .career-dialog__outcomes {
  width: auto;
  margin: 0;
  padding: 1.25rem;
  background: var(--cv-panel-2);
}

body[data-mode='portfolio'] .career-dialog__section h3,
body[data-mode='portfolio'] .career-dialog__outcomes h3 {
  margin: 0 0 0.7rem;
  color: var(--cv-accent);
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-mode='portfolio'] .career-dialog__section p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.7;
}

body[data-mode='portfolio'] .career-dialog__outcomes {
  margin-top: 1px;
  border: 1px solid var(--cv-line);
}

body[data-mode='portfolio'] .career-dialog__outcomes ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-mode='portfolio'] .career-dialog__outcomes li {
  position: relative;
  padding-left: 1rem;
  color: var(--text-soft);
  line-height: 1.55;
}

body[data-mode='portfolio'] .career-dialog__outcomes li::before {
  content: '';
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 0.35rem;
  height: 0.35rem;
  background: var(--cv-accent);
  transform: rotate(45deg);
}

body[data-mode='portfolio'] .career-dialog__link {
  display: inline-flex;
  margin-top: 1.5rem;
  color: var(--cv-accent);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-underline-offset: 0.3rem;
}

@keyframes career-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

/* ──────────────────────────────────────────────────────────
   SKILLS — barra fina, fill rojo
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .skill-card {
  padding: 1.3rem 1.35rem;
}

body[data-mode='portfolio'] .skill-label {
  color: var(--text-dim);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

body[data-mode='portfolio'] .skill-name {
  color: var(--cv-ink);
  text-shadow: none !important;
}

body[data-mode='portfolio'] .skill-meta {
  color: var(--text-dim);
}

body[data-mode='portfolio'] .skill-bar-wrap {
  background: var(--cv-rule);
  border-radius: 0;
}

body[data-mode='portfolio'] .skill-bar {
  background: var(--cv-accent);
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────
   PROJECTS
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .project-card {
  padding: 1.5rem;
}

body[data-mode='portfolio'] .project-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding: 0.9rem 0 0;
  border: 0;
  border-top: 1px solid var(--cv-line);
  background: transparent;
  color: var(--cv-accent);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-mode='portfolio'] .project-more:hover,
body[data-mode='portfolio'] .project-more:focus-visible {
  color: var(--cv-ink);
}

body[data-mode='portfolio'] .project-code {
  color: var(--cv-accent);
  text-shadow: none !important;
}

body[data-mode='portfolio'] .project-lang {
  color: var(--text-dim);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

body[data-mode='portfolio'] .project-name {
  color: var(--cv-ink);
  text-shadow: none !important;
}

body[data-mode='portfolio'] .project-card:hover .project-name {
  color: var(--cv-ink);
}

body[data-mode='portfolio'] .project-desc {
  color: var(--text-soft);
  line-height: 1.65;
}

body[data-mode='portfolio'] .project-link {
  color: var(--cv-accent);
}

body[data-mode='portfolio'] .project-dialog__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.75rem;
  border: 1px solid var(--cv-line);
  background: var(--cv-line);
}

body[data-mode='portfolio'] .project-dialog__shot {
  margin: 0;
  background: var(--cv-panel-2);
}

/* Marco tipo "ventana de navegador" para las capturas de proyecto */
body[data-mode='portfolio'] .shot-frame {
  overflow: hidden;
  border: 1px solid var(--cv-line);
  border-radius: 8px;
}

body[data-mode='portfolio'] .shot-frame__bar {
  display: flex;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  background: var(--cv-panel);
  border-bottom: 1px solid var(--cv-line);
}

body[data-mode='portfolio'] .shot-frame__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cv-line-strong);
}

body[data-mode='portfolio'] .shot-frame__viewport {
  overflow: hidden;
}

body[data-mode='portfolio'] .project-dialog__shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-mode='portfolio'] .project-dialog__shot:hover img {
  transform: scale(1.045);
}

body[data-mode='portfolio'] .project-dialog__shot figcaption {
  padding: 0.75rem 0.9rem 0.85rem;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────
   HOBBIES
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .hobby-card {
  padding: 1.3rem 1.35rem;
}

body[data-mode='portfolio'] .hobby-label {
  color: var(--text-dim);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

body[data-mode='portfolio'] .hobby-name {
  color: var(--cv-ink);
}

/* ──────────────────────────────────────────────────────────
   CONTACT
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] .contact-box {
  padding: clamp(1.6rem, 4vw, 2.4rem);
}

body[data-mode='portfolio'] .contact-intro {
  color: var(--text-soft);
}

body[data-mode='portfolio'] .contact-email-link {
  color: var(--cv-accent);
  text-shadow: none !important;
}

body[data-mode='portfolio'] .contact-note {
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 60ch;
}

body[data-mode='portfolio'] .social-btn {
  border: 1px solid var(--cv-line);
  background: var(--cv-panel-2);
  color: var(--text-soft);
  border-radius: 0;
  box-shadow: none !important;
  font-family: var(--font-label);
  letter-spacing: 0.04em;
}

body[data-mode='portfolio'] .social-btn:hover {
  border-color: var(--cv-accent);
  color: var(--cv-ink);
  transform: translateY(-2px);
}

/* ──────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────── */
body[data-mode='portfolio'] footer {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--cv-line);
}

body[data-mode='portfolio'] .footer-copy span {
  color: var(--cv-accent);
}

body[data-mode='portfolio'] .footer-links a {
  color: var(--text-dim);
}

body[data-mode='portfolio'] .footer-links a:hover,
body[data-mode='portfolio'] .footer-links a:focus-visible {
  color: var(--cv-ink);
}

@media (max-width: 720px) {
  body[data-mode='portfolio'] #navbar {
    display: none;
  }

  body[data-mode='portfolio'] #hero {
    padding-top: clamp(2rem, 8vw, 3rem);
  }

  body[data-mode='portfolio'] #hero {
    min-height: 100svh;
    min-height: 100dvh;
  }

  body[data-mode='portfolio'] .project-dialog__gallery {
    grid-template-columns: 1fr;
  }

  .cv-mountain {
    opacity: calc(0.32 * var(--cv-mountain-fade, 1));
  }

  body[data-mode='portfolio'] .career-dialog {
    width: calc(100vw - 1rem);
  }

  body[data-mode='portfolio'] .career-dialog__frame {
    max-height: calc(100dvh - 1rem);
  }

  body[data-mode='portfolio'] .career-dialog__header,
  body[data-mode='portfolio'] .career-dialog__body {
    padding: 1.1rem;
  }

  body[data-mode='portfolio'] .career-dialog__sections,
  body[data-mode='portfolio'] .career-dialog__outcomes ul {
    grid-template-columns: 1fr;
  }

  body[data-mode='portfolio'] .timeline-more {
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode='portfolio'] .career-dialog[open] {
    animation: none;
  }
}

/* ──────────────────────────────────────────────────────────
   PRINT
   ────────────────────────────────────────────────────────── */
@media print {
  .experience-hud,
  .presentation-hud,
  #navbar,
  .hero-cta,
  .scroll-indicator,
  .timeline-more,
  .career-dialog,
  footer .footer-links {
    display: none !important;
  }

  body[data-mode='portfolio'] {
    background: #fff;
    color: #111;
  }

  body[data-mode='portfolio'] #hero {
    padding-top: 0;
    break-after: avoid;
  }

  body[data-mode='portfolio'] section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body[data-mode='portfolio'] a {
    color: #111;
    text-decoration: underline;
  }
}
</content>
</invoke>