/* — Reset & Base — */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5; color:#333; font-weight:300;
}

/* — Headings — */
h1,h2,h3,h4 { font-weight:500; }

/* — Nav & Content Animations — */
@keyframes navEnter{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes contentEnter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* — Top Nav — */
.site-header{
  position:sticky; top:20px; margin-bottom:1.5rem;
  width:100%; display:flex; justify-content:center;
  z-index:1000; pointer-events:none;
}
.site-header .top-nav{
  pointer-events:all;
  display:inline-flex;justify-content:center;align-items:center;
  gap:1.5rem;padding:0.5rem 1.5rem;
  background:#f5f5f5;border-radius:9999px;
  animation:navEnter .4s ease-out both;
}
.site-header .top-nav a{
  position:relative;text-decoration:none;color:#000;font-weight:500;
}
.site-header .top-nav a.active::after{
  content:"";position:absolute;bottom:-.25rem;left:0;right:0;
  height:2px;background:#000;
}
/* hover underline for non-active links */
.site-header .top-nav a:not(.active):not(.btn-primary)::after{
  content:"";position:absolute;bottom:-.25rem;left:0;right:0;
  height:2px;background:transparent;transition:background .2s;
}
.site-header .top-nav a:not(.active):not(.btn-primary):hover::after{
  background:#000;
}

/* — Buttons — */
.top-nav a.btn-primary{
  display:inline-block;padding:.5rem 1rem;
  background:#000;color:#fff;border-radius:9999px;
  transition:background .2s;
}
.top-nav a.btn-primary:hover{background:#333}
.btn-secondary{
  display:inline-block;padding:.5rem 1rem;
  border:1px solid #333;color:#333;border-radius:9999px;
  text-decoration:none;transition:background .2s,color .2s;
}
.btn-secondary:hover{background:#333;color:#fff}

/* — Shared content fade/slide in — */
.hero-container,
.hero,
.hero__avatar,
.content-section,
.projects-grid,
.project-card,
.resume-section{
  opacity:0;animation:contentEnter .5s ease-out both .3s;
}

/* — Hero Section — */
.hero-container{display:flex;justify-content:center;padding:0 1rem}
.hero{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:2rem;
  max-width:1000px;margin:0 auto;
}
.hero__avatar{
  width:250px;height:250px;border-radius:50%;
  object-fit:cover;border:2px solid #eee;margin-bottom:1.5rem;
}
.hero__title{font-size:2.5rem;margin-bottom:.5rem;line-height:1.2}
.hero__subtitle{font-size:1rem;color:#555;margin-bottom:1.5rem}
.hero__actions{display:inline-flex;gap:1rem}

/* — Content Sections — */
.content-section{
  max-width:800px;margin:2rem auto;padding:0 1rem;
}
.content-section h2{
  font-size:1.75rem;margin-bottom:1rem;font-weight:600;
}
.content-section p{line-height:1.6;color:#444}

/* — Projects Grid — */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 0 1rem 3rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* — Clickable Project Cards — */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.project-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.project-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
.project-card:hover img {
  transform: scale(1.05);
}
.project-card h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 500;
  text-align: center;
  font-size: 1.1rem;
}

/* — Résumé Embed via PDF.js — */
.resume-section{
  max-width:800px;margin:2rem auto;padding:0 1rem;
  text-align:center;display:flex;flex-direction:column;
  align-items:center;
}
.resume-section h2{font-size:1.75rem;margin-bottom:1rem;font-weight:600}
#pdf-canvas{
  width:100%;box-shadow:0 2px 8px rgba(0,0,0,0.1);
  border-radius:.25rem;margin-bottom:1rem;display:block;
}

/* — Projects Page Overrides — */
.projects-page .hero__avatar{width:120px;height:120px}

/* — Build Process Section — */
.content-section.build-process {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: left;
}
.content-section.build-process h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}
.content-section.build-process p {
  margin: 1rem 0;
  line-height: 1.6;
}
.content-section.build-process ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}
.content-section.build-process ol li {
  margin-bottom: 0.75rem;
}

/* Center & enlarge technical drawings */
.technical-drawings {
  text-align: center;            /* center the heading */
  margin: 2rem auto;
  padding: 0 1rem;
}

.technical-drawings h2 {
  margin-bottom: 1.5rem;
}

.technical-drawings figure {
  max-width: 800px;              /* limit how wide each figure can grow */
  width: 100%;
  margin: 0 auto 2rem;           /* center each figure and add bottom space */
}

.technical-drawings img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.technical-drawings figcaption {
  margin-top: 0.5rem;
  color: #444;
  font-size: 0.95rem;
}