/* --- CUSTOM ARCHITECTURAL FONTS --- */
@font-face {
  font-family: 'AkzidenzGrotesk';
  src: url('AkzidenzGroteskProRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ApercuMono';
  src: url('ApercuMonoProLight.ttf') format('truetype'); /* Swapped directly to Apercu Mono Light weight */
  font-weight: normal;
  font-style: normal;
}

/* --- RESET AND BASE WEB LAYOUT --- */
html {
  overflow-y: scroll !important; /* Force a permanent vertical scroll bar to prevent horizontal layout shift on tab changes */
  overflow-x: hidden;
}

body {
  background-color: #ffffff;
  color: #000000;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: 'ApercuMono', monospace;
}

/* Master Layout Container (Completely full-bleed, stretching 100% horizontally) */
.mario-portfolio-root, .site-container {
  background-color: #ffffff;
  color: #000000;
  padding: 40px;
  width: 100%;
  max-width: 100% !important; /* Spans full width edge-to-edge with no margins */
  margin: 0 !important;
  box-sizing: border-box;
  overflow: visible !important; /* Required for child sticky headers to work properly */
}

/* --- TYPOGRAPHY FAMILIES --- */
/* Header Font Family */
.site-title, .nav-tab, .section-label, h3, h2, strong {
  font-family: 'AkzidenzGrotesk', -apple-system, sans-serif;
}

/* Body Font Family */
body, html, p, .about-text, .portfolio-row, .cv-content, .cv-contact-grid, .cv-item-desc, .cv-list-item, .cv-awards-grid, .cv-interests, .blog-entry {
  font-family: 'ApercuMono', monospace;
}

/* --- ONLY TWO SIZES GLOBALLY --- */
/* Size 1: Header Size */
.site-header {
  position: -webkit-sticky;
  position: sticky; /* Keep your name frozen when scrolling */
  top: 40px; /* Sticks 40px from viewport top, in line with site container padding */
  z-index: 1000; /* Stays securely stacked on top of scrolling CV rows */
  margin-bottom: 60px;
  pointer-events: none; /* Allows clicks to pass through any empty container space around your name */
}

.site-title {
  display: inline-block; /* Black box only encloses the text width */
  background-color: #000000; /* Solid black background */
  color: #ffffff !important; /* Solid white text */
  padding: 10px 20px; /* Precise padding around your name */
  font-size: 2.2rem !important; 
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-transform: none;
  margin: 0;
  pointer-events: auto; /* Re-enables hover/clicking events on the name itself */
  transition: background-color 0.3s ease; /* Transition background color on scroll */
}

/* 
  On scroll, the background transitions to light grey (#dddddd)
  while the text stays straight white (#ffffff).
*/
.site-title.dimmed {
  background-color: #dddddd !important; /* Dynamic background change to light grey */
  color: #ffffff !important; /* Keep text straight white */
}

/* Size 2: Body Size (Uniformly applied to all other text and sections) */
body, html, p, .nav-tab, .section-label, .about-text, .text-block, .portfolio-row, .cv-label, .cv-content, .cv-item-header, .cv-item-date, .cv-list-meta, .cv-awards-grid, .cv-interests, .blog-entry, .entry-date {
  font-size: 0.95rem !important; 
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* --- HORIZONTAL NAVIGATION --- */
.top-nav {
  display: flex;
  justify-content: space-between; /* Spreads navigation horizontally across the full page width */
  padding-bottom: 15px;
  margin-bottom: 40px;
  width: 100%;
}

.nav-tab {
  text-decoration: none;
  color: #000000; /* Solid Black */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.25; /* Semi-transparent base state */
  transition: opacity 0.3s ease;
}

.top-nav:hover .nav-tab {
  opacity: 0.15;
}
.top-nav .nav-tab:hover, .top-nav .nav-tab.active {
  opacity: 1 !important;
  color: #000000 !important;
}

/* --- TAB TRANSITIONS --- */
.content-wrapper {
  position: relative;
  min-height: 500px;
  width: 100%;
}

.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.content-wrapper .tab-content.active {
  display: block;
}

.tab-content.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- LABELS & SECTION STYLING --- */
.section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888888;
  margin-bottom: 30px;
  border-bottom: 1px dashed #dddddd;
  padding-bottom: 5px;
  display: inline-block;
}

.about-text, .text-block {
  max-width: 850px; /* Constrains readable text blocks on broad screens */
  color: #000000;
}

.about-text p {
  text-align: justify; /* Aligns left and right margins to straight, singular lines */
  margin-top: 0;
  margin-bottom: 25px; /* Spacing between biography paragraphs */
}

.about-text p:last-child {
  margin-bottom: 0;
}

.editorial-p {
  font-weight: 300;
  text-align: justify;
}

/* --- PORTFOLIO & IMMERSIVE PDF VIEWER --- */
/* 
  Removed margin-top constraints, the selected works labels, and download actions.
  The container now mounts directly at the top of the tab wrapper, letting the 
  sticky name header float beautifully over the PDF on scroll.
*/
.pdf-viewer-container {
  width: 100%;
  height: 105vh; /* Immersive landscape ratio mapping */
  min-height: 1000px; /* Keeps file sheets legible on high-density displays */
  border: 1px solid #000000;
  background-color: #f7f7f7;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-top: 0px !important;
  margin-bottom: 40px;
  position: relative;
  z-index: 1; /* Sits underneath sticky name block (z-index 1000) */
}

.pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* --- PORTFOLIO ROWS --- */
.portfolio-list {
  display: flex;
  flex-direction: column;
}

.portfolio-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  padding: 12px 0;
  font-size: 1.1rem;
}

.portfolio-row:hover {
  background-color: #fcfcfc;
}

.proj-date {
  font-family: 'DM Mono', monospace;
  font-size: 0.9rem;
  width: 100px;
}

.proj-title {
  flex-grow: 1;
  font-weight: 500;
}

.proj-type {
  font-size: 0.95rem;
  color: #666666;
  text-align: right;
}

/* --- BLOG ENTRIES --- */
.blog-entry {
  margin-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.blog-entry h3 {
  font-size: 1.3rem;
  font-weight: 400;
  margin: 5px 0 0 0;
}

.entry-date {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: #888888;
}

/* --- COMPREHENSIVE CV SPLIT-GRID --- */
.cv-container {
  font-family: 'ApercuMono', monospace; /* Restricting all CV to the uniform mono space font */
  color: #000000;
  max-width: 900px;
  margin-top: 20px;
}

.cv-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  border-bottom: 1px solid #eeeeee;
  padding: 30px 0;
}

.cv-row:last-child {
  border-bottom: none;
}

.cv-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888888;
  padding-top: 4px;
}

.cv-content {
  font-size: 1rem;
  line-height: 1.5;
}

.cv-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 0.9rem;
}

.cv-item {
  margin-bottom: 28px;
}

.cv-item:last-child {
  margin-bottom: 0;
}

.cv-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 500;
  font-size: 1.1rem;
}

.cv-item-title {
  color: #000000;
}

.cv-item-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: #666666;
  font-weight: 300;
}

.cv-item-date {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: #888888;
  margin: 3px 0 8px 0;
}

.cv-item-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444444;
  max-width: 680px;
}

.cv-skills-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
}

.cv-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
  padding: 8px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.cv-list-item:last-child {
  border-bottom: none;
}

.cv-list-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: #888888;
  white-space: nowrap;
  margin-left: 20px;
}

.cv-awards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 30px;
  font-size: 0.9rem;
}

.cv-interests {
  color: #444444;
}

/* --- IMAGES & FLOATING COLLAGE --- */
.scattered-canvas {
  position: relative;
  width: 100%;
  min-height: 80vh;
  margin-top: 40px;
  overflow: visible; /* Allows floating bounds to bleed cleanly */
}

/* 
  Removed padding: 6px, border: 1px solid #eeeeee, and background-color: #ffffff
  to display the raw transparent-background images with their shadows.
*/
.floating-image-wrapper {
  position: absolute;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
  animation: slow-drift var(--drift-duration) ease-in-out infinite alternate;
  cursor: grab;
  user-select: none;
}

.floating-image-wrapper:active {
  cursor: grabbing;
}

.floating-image-wrapper:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  animation-play-state: paused; /* Hover pauses the drift animation */
}

.floating-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* Disables native browser ghost dragging on images */
}

/* Slow structural drift animation */
@keyframes slow-drift {
  0% {
    transform: translate(0, 0) rotate(var(--rot));
  }
  100% {
    transform: translate(var(--drift-x), var(--drift-y)) rotate(calc(var(--rot) + var(--drift-rot)));
  }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  .site-container, .mario-portfolio-root {
    padding: 20px !important;
  }
  
  .top-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  .site-title {
    font-size: 1.8rem !important;
  }
  
  .portfolio-row {
    flex-direction: column;
    gap: 4px;
  }
  
  .proj-type {
    text-align: left;
  }
  
  .cv-row {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px 0;
  }
  
  .cv-contact-grid, .cv-awards-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .cv-item-header {
    flex-direction: column;
    gap: 2px;
  }
  
  .cv-list-item {
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
  }
  
  .cv-list-meta {
    margin-left: 0;
  }
  
  .image-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}