/* ─── Variables — Pantone Mix: Floral Pathways base + Light & Shadow accents ── */
:root {
  /* Warm base from Floral Pathways */
  --cream:       #EDE8E0;   /* darker than before — Gardenia/Cloud Dancer warmed */
  --cream-lt:    #F5F1EB;
  --ink:         #2A2320;
  --ink-soft:    #5C524E;
  --border:      rgba(42,35,32,0.11);

  /* Mocha Mousse family */
  --mocha:       #9E7B5E;
  --mocha-lt:    #E8DDD4;
  --rose-tan:    #C4887A;   /* Rose Tan 16-1511 */
  --cobble:      #8E8882;   /* Cobblestone 16-1407 */

  /* Cool accents from Light & Shadow */
  --lavender:    #B8A8CC;   /* Quiet Violet 16-3610 */
  --lavender-lt: #EAE3F0;
  --sage:        #7A9E76;   /* Willow 16-0632 shifted */
  --sage-lt:     #D0E2CE;
  --terracotta:  #B86E54;   /* warmed terracotta */
  --terra-lt:    #EDD8CE;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;
}

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }

/* ─── Nav ────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 4rem;
  background: rgba(237,232,224,0.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-name { display: flex; align-items: center; gap: 0.5rem; }
.nav-feather { width: 16px; height: 22px; flex-shrink: 0; opacity: 0.85; }
.nav-initials {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600; letter-spacing: 0.2em;
}
.nav-m, .nav-v, .nav-w { color: var(--terracotta); }
nav ul { list-style: none; display: flex; gap: 2.5rem; }
nav ul li a {
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.2s;
}
nav ul li a:hover { color: var(--lavender); }

/* ─── Hero ───────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7rem 5rem 4rem 4rem;
  position: relative;
  overflow: hidden;
  gap: 2rem;
}
.hero::before {
  content: '';
  position: absolute; top: -80px; right: 160px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(184,168,204,0.22) 0%, transparent 70%);
  border-radius: 50%; z-index: 0;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: -60px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(122,158,118,0.15) 0%, transparent 70%);
  border-radius: 50%; z-index: 0;
}
.hero-left {
  position: relative; z-index: 1;
  max-width: 560px;
  display: flex; flex-direction: column;
}
.hero-right {
  position: relative;
  align-self: flex-start;
  flex-shrink: 0;
  z-index: 1;
  margin-top: 5.5rem; /* aligns photo near "Research" tag level */
}

/* ─── Profile photo ──────────────────────────────────── */
.profile-frame {
  width: 240px; height: 240px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--lavender) 0%, var(--sage) 100%);
  box-shadow: 0 6px 32px rgba(158,123,94,0.22), 0 2px 10px rgba(0,0,0,0.07);
  animation: fadeUp 0.9s 0.3s both;
}
.profile-photo {
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--cream); display: block;
}

/* ─── Hero text ──────────────────────────────────────── */
.hero-tag {
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 0.6rem;
  opacity: 0; animation: fadeUp 0.7s 0.1s forwards;
}

/* ─── Name Block — heavy overlap ────────────────────── */
.hero-name-block {
  position: relative;
  margin-bottom: 1.6rem;
  opacity: 0; animation: fadeUp 0.8s 0.25s forwards;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* tight block — no gaps */
  line-height: 1;
}
.name-michella {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7.5vw, 8rem);
  font-weight: 300;
  color: var(--ink);
  display: block;
  line-height: 0.88;
  letter-spacing: -0.02em;
  position: relative; z-index: 3;
}
/* Voughn — heavily overlapping, deep ghost */
.name-voughn {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7.5vw, 8rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(90, 80, 74, 0.10);
  display: block;
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin-top: -0.38em;  /* heavy overlap up into Michella */
  margin-bottom: -0.38em; /* heavy overlap down into Warren */
  position: relative; z-index: 2;
  user-select: none; pointer-events: none;
}
.name-warren {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7.5vw, 8rem);
  font-weight: 300;
  font-style: italic;
  color: var(--sage);
  display: block;
  line-height: 0.88;
  letter-spacing: -0.02em;
  position: relative; z-index: 3;
}

.hero-subtitle {
  max-width: 480px; font-size: 0.95rem;
  color: var(--ink-soft); font-weight: 300; line-height: 1.75;
  margin-bottom: 1.8rem;
  opacity: 0; animation: fadeUp 0.8s 0.4s forwards;
}

/* ─── Pills ──────────────────────────────────────────── */
.hero-pills {
  display: flex; flex-wrap: nowrap; gap: 0.5rem;
  margin-bottom: 2rem;
  opacity: 0; animation: fadeUp 0.8s 0.55s forwards;
  overflow: hidden;
}
.hero-pills span {
  padding: 0.3rem 0.8rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.02em;
  white-space: nowrap; border: 1px solid var(--border);
  background: rgba(255,255,255,0.5); color: var(--ink-soft); flex-shrink: 0;
}
.hero-pills span:nth-child(1) { border-color: var(--lavender); background: var(--lavender-lt); }
.hero-pills span:nth-child(2) { border-color: var(--sage);     background: var(--sage-lt); }
.hero-pills span:nth-child(3) { border-color: var(--terracotta); background: var(--terra-lt); }

.btn {
  display: inline-block; padding: 0.85rem 2rem;
  background: var(--ink); color: var(--cream);
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em;
  border-radius: 4px; transition: background 0.25s, transform 0.2s;
  opacity: 0; animation: fadeUp 0.8s 0.7s forwards;
}
.btn:hover { background: var(--mocha); color: var(--cream); transform: translateY(-2px); }

.scroll-hint {
  position: absolute; bottom: 2rem; left: 5rem;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.5; writing-mode: vertical-rl;
}
.scroll-hint::before {
  content: ''; display: block; width: 1px; height: 50px;
  background: var(--ink-soft); margin: 0 auto 8px;
  animation: scrollLine 2s infinite;
}

/* ─── Vine ───────────────────────────────────────────── */
.vine-container {
  position: fixed; right: 0; top: 0;
  width: 180px; height: 100vh;
  pointer-events: none; z-index: 0;
}
.vine-svg { width: 100%; height: 100%; animation: vinePulse 6s ease-in-out infinite; }
.vine-stem-1 { stroke-dasharray:1800; stroke-dashoffset:1800; animation:drawVine 4s ease-out 0.3s forwards; }
.vine-stem-2 { stroke-dasharray:1600; stroke-dashoffset:1600; animation:drawVine 4s ease-out 0.6s forwards; }
.vine-stem-3 { stroke-dasharray:1400; stroke-dashoffset:1400; animation:drawVine 4s ease-out 0.9s forwards; }
.vine-stem-4 { stroke-dasharray:1200; stroke-dashoffset:1200; animation:drawVine 3.5s ease-out 1.1s forwards; }
.vl1,.vl2,.vl3,.vl4,.vl5,.vl6 { opacity:0; transform:scale(0); transform-origin:center; }
.vl1 { animation:leafUnfurl 0.8s ease-out 2.5s forwards; }
.vl2 { animation:leafUnfurl 0.8s ease-out 3.0s forwards; }
.vl3 { animation:leafUnfurl 0.8s ease-out 3.5s forwards; }
.vl4 { animation:leafUnfurl 0.8s ease-out 4.0s forwards; }
.vl5 { animation:leafUnfurl 0.8s ease-out 4.5s forwards; }
.vl6 { animation:leafUnfurl 0.8s ease-out 5.0s forwards; }
.jasmine-bloom { opacity:0; transform-origin:center; transform:scale(0); }
body.page-connect .jasmine-bloom { animation:jasmineOpen 1.2s ease-out 1.5s forwards; }

@keyframes drawVine { to { stroke-dashoffset: 0; } }
@keyframes vinePulse { 0%,100%{transform:scaleX(1) scaleY(1);} 50%{transform:scaleX(1.015) scaleY(1.008);} }
@keyframes leafUnfurl { 0%{opacity:0;transform:scale(0.2) rotate(-20deg);} 60%{opacity:0.7;transform:scale(1.1) rotate(3deg);} 100%{opacity:0.55;transform:scale(1) rotate(0deg);} }
@keyframes jasmineOpen { 0%{opacity:0;transform:scale(0);} 50%{opacity:1;transform:scale(1.15);} 100%{opacity:1;transform:scale(1);} }

/* ─── About Strip ────────────────────────────────────── */
.about-strip {
  background: rgba(255,255,255,0.45);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5rem 4rem;
}
.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; max-width:1100px; margin:0 auto; }
.about-block { padding: 1.5rem 0; }
.about-num { font-family:var(--font-display); font-size:3rem; font-weight:300; color:var(--lavender); display:block; margin-bottom:0.8rem; line-height:1; }
.about-block h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:600; margin-bottom:0.6rem; }
.about-block p { font-size:0.9rem; color:var(--ink-soft); font-weight:300; }

/* ─── Page Hero ──────────────────────────────────────── */
.page-hero { padding:9rem 4rem 4rem; border-bottom:1px solid var(--border); }
.page-hero .tag { font-size:0.75rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracotta); margin-bottom:1rem; display:block; }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,5rem); font-weight:300; line-height:1.1; }
.page-hero h1 em { font-style:italic; color:var(--lavender); }
.page-hero p { max-width:560px; color:var(--ink-soft); margin-top:1.2rem; font-size:0.95rem; font-weight:300; line-height:1.8; }

/* ─── Section Content ────────────────────────────────── */
.section-content { padding:4rem 4rem 6rem; max-width:1100px; margin:0 auto; }

/* ─── Cards ──────────────────────────────────────────── */
.card-grid { display:flex; flex-direction:row; overflow-x:auto; gap:1.5rem; margin-top:2.5rem; padding-bottom:1.5rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.card-grid .card { flex:0 0 340px; scroll-snap-align:start; }
.card {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(4px);
}
.card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(158,123,94,0.12); }
.card-label { font-size:0.72rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage); margin-bottom:0.7rem; display:block; }
.card h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:600; margin-bottom:0.6rem; }
.card p { font-size:0.88rem; color:var(--ink-soft); font-weight:300; line-height:1.7; }
.card-footer { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border); display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.tag-chip { font-size:0.72rem; padding:0.25rem 0.7rem; border-radius:999px; background:var(--lavender-lt); color:var(--ink-soft); }
.tag-link { background:var(--terra-lt); color:var(--terracotta); border:1px solid var(--terracotta); transition:background 0.2s,color 0.2s; }
.tag-link:hover { background:var(--terracotta); color:white; }

/* ─── Skills ─────────────────────────────────────────── */
.skills-section { margin-top:3.5rem; }
.skills-section h2 { font-family:var(--font-display); font-size:2rem; font-weight:400; margin-bottom:1.5rem; }
.skill-category { margin-bottom:2.5rem; }
.skill-category h4 { font-size:0.78rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--terracotta); margin-bottom:0.8rem; }
.skill-pills-icons { display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:0.8rem; }
.skill-icon-item { display:flex; flex-direction:column; align-items:center; gap:0.35rem; font-size:0.7rem; color:var(--ink-soft); }
.skill-icon-item img { width:36px; height:36px; filter:grayscale(0.15) opacity(0.88); transition:filter 0.2s,transform 0.2s; }
.skill-icon-item:hover img { filter:grayscale(0) opacity(1); transform:scale(1.1); }
.skill-icon-item svg { transition: transform 0.2s, opacity 0.2s; opacity: 0.88; }
.skill-icon-item:hover svg { transform:scale(1.1); opacity:1; }

/* ─── Skill tags — outline style, NOT button-like ───── */
.skill-pills { display:flex; flex-wrap:wrap; gap:0.5rem; }
.skill-pills span {
  padding: 0.3rem 0.85rem;
  font-size: 0.80rem;
  border-radius: 999px;
  border: 1px solid rgba(158,123,94,0.35);
  background: rgba(232,221,212,0.30);
  color: var(--ink-soft);
  font-weight: 300;
  letter-spacing: 0.01em;
  cursor: default;
  user-select: none;
}

/* ─── Interest list ──────────────────────────────────── */
.interest-list { margin-top:2rem; }
.interest-item { display:grid; grid-template-columns:60px 1fr; gap:1.5rem; align-items:start; padding:2rem 0; border-bottom:1px solid var(--border); }
.interest-num { font-family:var(--font-display); font-size:2.5rem; font-weight:300; color:var(--sage-lt); line-height:1; }
.interest-item h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:600; margin-bottom:0.4rem; }
.interest-item p { font-size:0.9rem; color:var(--ink-soft); font-weight:300; }

/* ─── Contact ────────────────────────────────────────── */
.sage-em { color: var(--sage) !important; }
.contact-icon-links { display:flex; gap:1.6rem; align-items:center; margin-top:1.6rem; }
.contact-icon-links a { display:flex; align-items:center; gap:0.45rem; color:var(--ink-soft); font-size:0.82rem; font-weight:400; letter-spacing:0.03em; text-decoration:none; transition:color 0.2s; }
.contact-icon-links a:hover { color:var(--terracotta); }
.contact-icon-links svg { width:19px; height:19px; flex-shrink:0; }
.open-invite { margin-top:2rem; padding:2.5rem; background:rgba(208,226,206,0.45); border-radius:10px; border-left:3px solid var(--sage); backdrop-filter:blur(4px); }
.open-invite h3 { font-family:var(--font-display); font-size:1.6rem; font-weight:600; margin-bottom:0.8rem; }
.open-invite p { font-size:0.9rem; color:var(--ink-soft); font-weight:300; }

/* ─── Footer ─────────────────────────────────────────── */
footer { padding:2rem 4rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; color:var(--ink-soft); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a:hover { color:var(--lavender); }

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width:960px) {
  .hero { flex-direction:column-reverse; align-items:flex-start; padding-top:7rem; }
  .hero-right { align-self:center; margin-top:0; }
  .vine-container { width:100px; opacity:0.4; }
}
@media (max-width:768px) {
  nav { padding:1rem 1.5rem; }
  nav ul { gap:1rem; }
  nav ul li a { font-size:0.7rem; }
  .hero { padding:7rem 1.5rem 3rem; }
  .hero-pills { overflow-x:auto; padding-bottom:4px; }
  .about-strip { padding:3rem 1.5rem; }
  .about-grid { grid-template-columns:1fr; gap:1.5rem; }
  .page-hero { padding:8rem 1.5rem 3rem; }
  .section-content { padding:2.5rem 1.5rem 4rem; }
  footer { flex-direction:column; gap:1rem; padding:1.5rem; }
  .vine-container { display:none; }
}

/* ─── Page-specific em colours ───────────────────────── */
body.page-connect .page-hero h1 em { color: var(--sage); }
body.page-interests .page-hero h1 em { color: var(--terracotta); }

/* ─── Research page — horizontal scroll ──────────────── */
body.page-research .section-content { max-width:100%; padding-left:4rem; padding-right:0; }
body.page-research .card-grid { display:flex; flex-direction:row; flex-wrap:nowrap; gap:1.8rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:1.5rem; padding-right:4rem; cursor:grab; }
body.page-research .card-grid:active { cursor:grabbing; }
body.page-research .card-grid .card { flex:0 0 460px; min-width:460px; scroll-snap-align:start; align-self:flex-start; }
body.page-research .card-grid::-webkit-scrollbar { height:4px; }
body.page-research .card-grid::-webkit-scrollbar-track { background:transparent; }
body.page-research .card-grid::-webkit-scrollbar-thumb { background:var(--lavender); border-radius:999px; }
@media (max-width:768px) {
  body.page-research .section-content { padding-left:1.5rem; }
  body.page-research .card-grid .card { flex:0 0 85vw; min-width:85vw; }
}

/* ─── Work page — cards contrast on blue-fusion bg ──── */
body.page-work .card {
  background: rgba(255,255,255,0.72);
  border-color: rgba(80,100,160,0.18);
  box-shadow: 0 2px 16px rgba(60,80,140,0.08);
}
body.page-work .section-content {
  background: transparent;
}
body.page-work .page-hero {
  border-bottom-color: rgba(80,100,160,0.15);
}

/* ─── Research page — cards contrast on cream bg ─────── */
body.page-research .card {
  background: rgba(255,255,255,0.78);
  border-color: rgba(184,168,204,0.28);
  box-shadow: 0 2px 16px rgba(150,130,180,0.08);
}

/* ─── Interests page — items contrast on mocha bg ────── */
body.page-interests .interest-item {
  background: rgba(255,255,255,0.22);
  border-radius: 8px;
  padding: 1.6rem 2rem;
  border-bottom: none;
  margin-bottom: 0.8rem;
  width: 100%;
  max-width: 860px;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: auto;
}
body.page-interests .section-content {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page-interests .interest-num {
  color: rgba(184,100,70,0.55) !important;
  font-size: 2rem;
}
body.page-interests .interest-item h3 {
  color: #2A1E18;
}
body.page-interests .interest-item p {
  color: rgba(42,30,24,0.72);
}

/* ─── Page hero box contrast — work, research, connect ── */
body.page-work .page-hero {
  background: rgba(255,255,255,0.45);
  border-radius: 0 0 12px 12px;
  border-bottom: none !important;
  margin-bottom: 1rem;
}
body.page-research .page-hero {
  background: rgba(255,255,255,0.50);
  border-radius: 0 0 12px 12px;
  border-bottom: none !important;
  margin-bottom: 1rem;
}
/* Connect page hero — transparent, handled inline */
body.page-connect .section-content {
  padding: 1.5rem 3rem 5rem !important;
  max-width: 700px !important;
  margin: 0 0 0 4rem !important;
}
body.page-connect .open-invite {
  background: rgba(255,255,255,0.10) !important;
  border-left: 3px solid rgba(168,216,176,0.45) !important;
  backdrop-filter: blur(8px);
  max-width: 580px;
}

/* ─── Language Switcher ──────────────────────────────── */
#lang-switcher {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 9999;
  font-family: var(--font-body);
}
#lang-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: rgba(42,35,32,0.88);
  color: rgba(250,248,244,0.92);
  border: 1px solid rgba(250,248,244,0.15);
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  cursor: pointer; backdrop-filter: blur(10px);
  transition: background 0.2s, transform 0.15s;
}
#lang-toggle:hover { background: rgba(42,35,32,1); transform: translateY(-1px); }
#lang-toggle svg { opacity: 0.7; }
body.page-connect #lang-toggle {
  background: rgba(10,14,28,0.88);
  border-color: rgba(255,255,255,0.15);
  color: rgba(232,224,213,0.92);
}
#lang-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  background: rgba(42,35,32,0.96);
  border: 1px solid rgba(250,248,244,0.12);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  min-width: 120px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
#lang-switcher.open #lang-dropdown { display: block; }
.lang-option {
  display: block; width: 100%;
  padding: 0.6rem 1rem;
  text-align: left;
  font-size: 0.82rem; font-weight: 400;
  color: rgba(250,248,244,0.75);
  background: transparent; border: none;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.lang-option:hover { background: rgba(255,255,255,0.08); color: rgba(250,248,244,1); }
.lang-option.active { color: var(--sage); font-weight: 500; }
body.rtl .lang-option { text-align: right; }
/* RTL global adjustments */
body.rtl { font-family: 'Segoe UI', Tahoma, 'Arabic UI Text', var(--font-body); }
body.rtl .hero { flex-direction: row-reverse; }
body.rtl .nav-name { flex-direction: row-reverse; }
body.rtl .scroll-hint { left: auto; right: 5rem; }
body.rtl .page-hero, body.rtl .section-content { text-align: right; }
body.rtl #lang-dropdown { right: auto; left: 0; }