/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111}

.hero{background:linear-gradient(180deg,#f8fafc,#ffffff);display:flex;flex-direction:column;align-items:center;position:relative;padding:3rem 0}
.hero-inner{width:90%;max-width:1100px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:2;padding-bottom:2rem}
.hero-left{flex:1;padding-right:2rem}
.hero-copy{display:flex;flex-direction:column;gap:1rem}
.nav{margin-bottom:1rem}
.hero-footer{width:100%;border-top:1px solid #e5e7eb;padding-top:1rem}
.social-links{display:flex;justify-content:center;gap:0.75rem;padding:0.75rem 0}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#9ca3af;transition:color 180ms ease, transform 180ms ease, border-color 180ms ease, background-color 180ms ease}
.social-link svg{width:27px;height:27px;fill:currentColor;stroke:none}
.social-link:hover{border-color:rgba(255,255,255,0.35);background:rgba(255,255,255,0.18);color:#6b7280;transform:translateY(-1px)}
.nav a{margin-right:1rem;color:#555;text-decoration:none;font-weight:600}
.name{font-size:2.25rem;margin-bottom:0}
.bio{color:#444;line-height:1.6;max-width:42ch;margin:0}
.hero-tags{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.25rem}
.hero-tags .tag{background:rgba(15,23,42,0.08);color:#111827;padding:0.45rem 0.85rem;border-radius:999px;font-size:0.9rem;font-weight:700}

/* Avatar (circle mask, editable image file) */
.hero-right{width:390px;display:flex;justify-content:flex-end}
.avatar{width:330px;height:330px;border-radius:50%;overflow:hidden;flex-shrink:0;border:6px solid rgba(0,0,0,0.06);box-shadow:0 6px 18px rgba(12,18,25,0.06)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Hero bottom fade into the next section (smooth gradient transition) */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(to bottom, rgba(248,250,252,1) 0%, rgba(248,250,252,0) 100%);pointer-events:none}

/* Scrollable sections */
.scroll-section{padding:3rem 0;border-top:1px solid #f0f0f0;background:#fff}
.scroll-section h2{width:50%;max-width:600px;margin:0 0 1rem 25%;font-size:1.25rem;color:#222;text-align:left}
.scroll-area{width:90%;max-width:1100px;margin:0 auto;max-height:48vh;overflow-y:auto;padding-right:0.5rem}
.card{background:#fafafa;border:1px solid #eee;padding:1rem;border-radius:8px;margin-bottom:0.75rem}
.timeline-wrapper{width:90%;max-width:1100px;margin:0 auto;padding:1.5rem 0;position:relative}

/* Default: vertical timeline for desktop/laptop */
.timeline{display:block;position:relative;padding:1.5rem 0;padding-left:72px}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#e6edf3;transform:translateX(-50%);z-index:1}
.timeline::after{content:'';position:absolute;left:50%;top:-10px;width:14px;height:14px;border-radius:50%;background:#d9c96f;transform:translateX(-50%);opacity:0;transition:opacity 180ms ease;z-index:3}
.timeline-item{position:relative;padding:1rem 0;min-height:64px;z-index:2;display:flex;justify-content:center}
.timeline-content{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:0.9rem 1.1rem;box-shadow:0 6px 18px rgba(15,23,42,0.05);color:#1f2937;line-height:1.5;position:relative;max-width:680px;width:66%}
.timeline-item.ongoing .timeline-content{background:#c8d68c;border-color:#c8d68c} /* Border around timeline item */
.timeline-item.ongoing .timeline-tags .tag.ongoing{background:#e9f9a3;color:#263418} /* Tag background color */
.timeline-content strong{display:block;margin-bottom:0.35rem;color:#111827}

/* Small screens: horizontal, scrollable timeline */
@media (max-width:880px){
  .timeline{display:flex;justify-content:flex-start;align-items:flex-start;gap:1rem;padding:1.25rem 0;overflow-x:auto;white-space:nowrap}
  .timeline::before{content:'';position:absolute;left:5%;right:5%;top:28px;height:2px;background:linear-gradient(90deg,rgba(15,23,42,0.1),rgba(15,23,42,0.05),rgba(15,23,42,0.1));z-index:1}
  /* Mobile: make items card-shaped and ensure text wraps */
  .timeline-item{position:relative;flex:0 0 auto;min-width:220px;padding:0 0.75rem;margin-left:0;display:flex;align-items:stretch}
  .timeline-content{position:relative;top:0;margin:0 auto;display:block;min-height:140px;max-height:none;width:220px;padding:1rem;border-radius:12px;white-space:normal;overflow-wrap:break-word;word-break:break-word}
  .timeline-tags{display:none!important}
}

/* Desktop-only hover tags + blur effect */
@media (min-width:881px){
  .timeline-item{position:relative}
  .timeline::after{opacity:1}
  .timeline-tags{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0.5rem;opacity:0;pointer-events:none;transition:opacity 240ms ease;z-index:4}
  .timeline-tags .tag{background:rgba(15,23,42,0.9);color:#fff;padding:0.35rem 0.6rem;border-radius:999px;font-size:0.85rem;box-shadow:0 6px 18px rgba(15,23,42,0.08)}
  .timeline-item:hover .timeline-tags{opacity:1;pointer-events:auto}
  .timeline-item:hover .timeline-content{filter:blur(3px);transition:filter 180ms linear}
}

/* Image-only section (second section) */
.image-section{height:60vh;background-image:url('../images/section2.jpg');background-size:cover;background-position:center;position:relative;overflow:hidden}
.image-section img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border:0;background-color:#f5f5f5}

/* Revert option: add `image-contain` to the section element to restore the previous behavior */
.image-section.image-contain img{object-fit:contain;object-position:top center}
.image-section::after{content:'';position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #ffffff 100%);pointer-events:none}
.image-section::before{content:'';position:absolute;left:0;right:0;top:0;height:80px;background:linear-gradient(to top, rgba(255,255,255,0.0), rgba(255,255,255,0.0));pointer-events:none}

/* The collage */
/* About page collage section only */
.memory-collage-section{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;

  padding:5rem 2rem 8rem 2rem; /* extra bottom space */

  background:#000;
  overflow:visible; /* important */
}

/* 2x2 collage */
.memory-collage-grid{
  width:min(1000px, 100%);
  aspect-ratio:1.4 / 1;

  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;

  gap:16px;
}

.memory-collage-grid img{
  width:100%;
  height:100%;

  object-fit:cover;
  display:block;

  border-radius:22px;
  box-shadow:0 10px 28px rgba(0,0,0,0.08);
}

/* Overlay caption */
.memory-collage-caption{
  position:absolute;
  z-index:2;

  max-width:500px;
  text-align:center;

  padding:2rem 2.5rem;

  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(16px);

  border-radius:28px;
  border:1px solid rgba(255,255,255,0.5);

  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

/* Give the next section enough clearance */
.memory-collage-section + .scroll-section{
  padding-top:6rem;
}


/* Mobile */
@media (max-width:768px){
  .memory-collage-section{
    padding:3rem 1rem 5rem 1rem;
  }

  .memory-collage-grid{
    aspect-ratio:1 / 1;
    gap:8px;
  }

  .memory-collage-caption{
    width:85%;
    padding:1.25rem;
  }
}

.about-hero{position:relative;min-height:70vh;background-size:cover;background-position:center;display:flex;align-items:center;overflow:hidden}
.about-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,24,0.18),rgba(17,19,24,0.45));pointer-events:none}
.about-hero-overlay{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end;align-items:center;padding:2rem}
.about-bio{max-width:480px;margin-left:auto;padding:2rem;border-radius:24px;background:rgba(15,23,42,0.72);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(14px);color:#f8fafc}
.about-bio .eyebrow{display:block;text-transform:uppercase;letter-spacing:0.18em;font-size:0.8rem;color:#94a3b8;margin-bottom:1rem}
.about-bio h2{font-size:2rem;color:#ffffff;margin:0 0 1rem}
.about-bio p{min-height:136px;color:#d1d5db;line-height:1.8}

.travel-section{padding:3rem 0;background:#ffffff;border-top:1px solid #e5e7eb}
.travel-header{width:90%;max-width:1100px;margin:0 auto;padding:0 1rem}
.travel-header h2{font-size:1.5rem;color:#111827;margin:0 0 1rem}
.travel-strip{width:90%;max-width:1100px;margin:0 auto;padding:0 1rem;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;}
.travel-strip::-webkit-scrollbar{height:10px}
.travel-strip::-webkit-scrollbar-track{background:#f3f4f6;border-radius:999px}
.travel-strip::-webkit-scrollbar-thumb{background:rgba(15,23,42,0.2);border-radius:999px}
.travel-card{flex:0 0 220px;background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:1.25rem;text-align:center;scroll-snap-align:start;box-shadow:0 12px 36px rgba(15,23,42,0.06)}
.travel-image{width:112px;height:112px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;border:3px solid #e5e7eb}
.travel-image img{width:100%;height:100%;object-fit:cover;display:block}
.travel-name{font-size:1rem;font-weight:700;color:#111827}

.prompt-section{padding:3rem 0;background:#111318;border-top:1px solid rgba(255,255,255,0.08)}
.prompt-inner{width:90%;max-width:980px;margin:0 auto;display:grid;gap:1rem}
.prompt-section h2{font-size:1.6rem;color:#f8fafc;margin:0}
.prompt-copy{max-width:42ch;color:#cbd5e1;line-height:1.7}
.prompt-bar{background:#181a20;border:1px solid #2f323b;border-radius:999px;padding:1rem 1.25rem;display:flex;align-items:center;gap:0.75rem;box-shadow:0 10px 30px rgba(0,0,0,0.22);color:#cbd5e1;font-size:1rem}
.prompt-bar span{flex:1}
.prompt-actions{display:flex;flex-wrap:wrap;gap:0.85rem;margin-top:0.5rem}
.prompt-chip{display:inline-flex;align-items:center;justify-content:center;padding:0.95rem 1.25rem;background:#f8fafc;color:#111827;border-radius:999px;text-decoration:none;font-weight:650;transition:transform 180ms ease, background 180ms ease, color 180ms ease}
.prompt-chip:hover{background:#e5e7eb;transform:translateY(-1px)}

/* Reveal animation */
.card{opacity:0;transform:translateY(12px);transition:opacity 360ms ease, transform 360ms ease}
.card.visible{opacity:1;transform:none}

/* Responsive */
@media (max-width:880px){
  .hero-inner{flex-direction:column-reverse;gap:1.5rem;text-align:center}
  .hero-left{padding-right:0}
  .hero-right{width:auto}
  .avatar{width:240px;height:240px}
}

.about-hero{position:relative;min-height:70vh;background-size:cover;background-position:center;display:flex;align-items:center;overflow:hidden}
.about-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,24,0.18),rgba(17,19,24,0.45));pointer-events:none}
.about-hero-overlay{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end;align-items:center;padding:2rem}
.about-bio{max-width:480px;margin-left:auto;padding:2rem;border-radius:24px;background:rgba(15,23,42,0.72);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(14px);color:#f8fafc}
.about-bio .eyebrow{display:block;text-transform:uppercase;letter-spacing:0.18em;font-size:0.8rem;color:#94a3b8;margin-bottom:1rem}
.about-bio h2{font-size:2rem;color:#ffffff;margin:0 0 1rem}
/* About page bio text */
.about-bio p{
  min-height:auto;   /* remove forced height */
  margin:0 0 0.65rem 0;
  color:#d1d5db;
  line-height:1.6;
}

/* Remove margin on last paragraph */
.about-bio p:last-child{
  margin-bottom:0;
}

@media (max-width:420px){
  .name{font-size:1.6rem}
  .avatar{width:180px;height:180px}
}

/* About.html only — Field Notes */
.field-notes-section{
  background:#f5f5f4;
  padding:5rem 0;
}

.field-notes-header{
  width:90%;
  max-width:1100px;
  margin:0 auto 2.5rem auto;
  text-align:center;
}

.field-notes-header h2{
  margin:0 0 0.75rem 0;
  font-size:2rem;
  color:#111827;
}

.field-notes-header p{
  margin:0;
  color:#6b7280;
}

/* Desktop layout */
.field-notes-grid{
  width:90%;
  max-width:1100px;
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}

.field-note-card{
  background:#ffffff;
  padding:2rem;

  /* No rounded corners */
  border-radius:0;

  /* Subtle elevation */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.04);

  transition:transform 180ms ease;
}

.field-note-card:hover{
  transform:translateY(-2px);
}

.field-note-date{
  display:block;
  margin-bottom:1rem;

  font-size:0.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;

  color:#6b7280;
}

.field-note-card h3{
  margin:0 0 1rem 0;
  font-size:1.15rem;
  color:#111827;
}

.field-note-card p{
  margin:0;
  color:#4b5563;
  line-height:1.7;
}

/* Mobile: horizontal scroll */
@media (max-width:880px){
  .field-notes-grid {display: flex;gap: 1rem;overflow-x: auto;padding: 0 5%;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;}
  .field-notes-grid::-webkit-scrollbar{display:none;}
  .field-note-card{flex:0 0 300px;scroll-snap-align:start;}
}

/* ===================================
   RESEARCH SECTION
   =================================== */

.research-section {
  position: relative;
  width: 100%;
}

.research-section-title {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 10;
}

.research-section-title h2 {
  font-size: 1.25rem;
  color: #f8fafc;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Desktop title visible, mobile title hidden by default */
.desktop-title {
  display: block;
}

.mobile-title {
  display: none;
}

/* Slider */
.research-slider {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.research-slide {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  padding-right: 4rem;

  background-size: cover;
  background-position: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity 300ms ease;
}

/* Fallback background for slides with no image */
.research-slide.bg-grey {
  background-color: #1e293b;
}

/* Only active slide is visible */
.research-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Overlay panel */
.research-overlay {
  position: relative;
  z-index: 3;

  width: min(800px, 90%);
  min-height: 480px;

  display: flex;
  flex-direction: column;

  padding: 2.5rem;

  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);

  color: #f8fafc;
}

.research-overlay h2 {
  font-size: 1.75rem;
  margin: 0.5rem 0 1rem;
  color: #f8fafc;
}

.research-overlay p {
  color: rgba(248, 250, 252, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Status badges */
.research-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  width: fit-content;
  margin-bottom: 1rem;
}

.research-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.research-status.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.research-status.completed span {
  background: #10b981;
}

.research-status.progress {
  background: rgba(251, 191, 36, 0.15);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.research-status.progress span {
  background: #f59e0b;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Nav controls */
.research-controls {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.research-controls button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: background 200ms ease;
}

.research-controls button:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ===================================
   MOBILE
   =================================== */

@media (max-width: 768px) {
  .research-slider {
    height: auto;
    min-height: unset;
    position: relative;
  }

  /* All slides hidden and out of flow by default */
  .research-slide {
    display: none;
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: none;
  }

  /* Only active slide shown — it drives the container height */
  .research-slide.active {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    pointer-events: auto;
  }

  .research-overlay {
    min-height: 0;
    width: 100%;
    margin: 0 auto;
  }

  .desktop-title {
    display: none;
  }

  .mobile-title {
    display: block;
    position: static;
    margin-top: auto;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-title h2 {
    font-size: 1rem;
    opacity: 0.6;
  }
}