/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --bg:        #F2F4EE;   /* pale sage paper */
  --bg-card:   #FBFBF7;
  --ink:       #1E2A22;   /* deep forest ink */
  --ink-soft:  #4B584E;
  --trunk:     #4B6350;   /* muted sage — branches */
  --root:      #7A5A3A;   /* soil brown — roots */
  --leaf:      #7C9473;   /* soft leaf green — nodes */
  --gold:      #B5892B;   /* warm ochre — accents / CTAs */
  --line:      #DAD9CD;   /* hairline */
  --shadow:    0 1px 2px rgba(30,42,34,.05), 0 8px 24px -12px rgba(30,42,34,.18);

  --display: "Fraunces", Georgia, serif;
  --body:    "Inter", -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }

/* subtle paper grain so the flat sage bg doesn't feel flat */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image:radial-gradient(rgba(30,42,34,.05) 1px, transparent 1px);
  background-size:3px 3px;
}

/* =========================================================
   VIEW SWITCHING
   ========================================================= */
.view{
  position:relative;
  z-index:1;
  display:none;
  min-height:100vh;
  padding:8vh 6vw 10vh;
}
.view--active{
  display:flex;
  flex-direction:column;
  animation:rise .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .view--active{ animation:none; }
}

/* =========================================================
   HERO
   ========================================================= */
#view-hero{
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2.4rem;
}

.hero-sprig{ width:64px; opacity:.9; }
.hero-sprig svg{ width:100%; height:auto; }
.sprig-stem{ stroke:var(--trunk); fill:none; }
.sprig-leaf{ fill:var(--leaf); opacity:.85; }
.sprig-bud{ fill:var(--gold); }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

.hero-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2rem, 6vw, 3.6rem);
  line-height:1.18;
  max-width:16ch;
  margin:0;
  color:var(--ink);
}
.hero-title em{
  font-style:italic;
  font-weight:500;
  color:var(--trunk);
}

.hero-actions{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  width:100%;
  max-width:440px;
  margin-top:.6rem;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:flex;
  align-items:center;
  gap:.9rem;
  width:100%;
  padding:1.05rem 1.3rem;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--bg-card);
  color:var(--ink);
  font-family:var(--body);
  font-size:.98rem;
  font-weight:500;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover{
  border-color:var(--trunk);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.btn-num{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--gold);
  flex-shrink:0;
}
.btn-text{ flex:1; }
.btn-arrow{
  color:var(--ink-soft);
  transition:transform .25s ease;
}
.btn:hover .btn-arrow{ transform:translateX(3px); color:var(--trunk); }

.btn--primary{ padding:1.1rem 1.4rem; }

.btn--contact{
  padding:1.3rem 1.4rem;
}
.btn-icon{
  width:38px; height:38px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--bg);
  color:var(--trunk);
}
.btn-icon svg{ width:19px; height:19px; }
.btn-text-group{ flex:1; display:flex; flex-direction:column; gap:.15rem; }
.btn-label{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-family:var(--mono); }
.btn-value{ font-size:1.02rem; font-weight:500; }

/* =========================================================
   SHARED VIEW HEADER (CV + CONTACT)
   ========================================================= */
.view-header{
  max-width:640px;
  margin:0 auto 3.5rem;
  width:100%;
  text-align:center;
}
.btn-back{
  display:inline-block;
  background:none;
  border:none;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--ink-soft);
  cursor:pointer;
  padding:.4rem 0;
  margin-bottom:1.6rem;
  transition:color .2s ease;
}
.btn-back:hover{ color:var(--trunk); }

.view-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.7rem, 4vw, 2.4rem);
  margin:0 0 .5rem;
}
.view-sub{
  font-size:.92rem;
  color:var(--ink-soft);
  margin:0;
}

/* =========================================================
   CONTACT VIEW
   ========================================================= */
.contact-actions{
  max-width:480px;
  margin:0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* =========================================================
   CV — ABSTRACT TREE
   ========================================================= */
.tree{
  position:relative;
  max-width:760px;
  margin:0 auto;
  width:100%;
  padding-top:1rem;
}

.tree-line{
  position:absolute;
  top:70px;
  bottom:70px;
  left:50%;
  width:2px;
  transform:translateX(-1px);
  background:linear-gradient(to bottom, var(--trunk) 0%, var(--trunk) 60%, var(--root) 100%);
  z-index:0;
}

.canopy{ width:150px; margin:0 auto 1rem; opacity:.9; }
.canopy svg{ width:100%; height:auto; }
.canopy-leaf{ fill:var(--leaf); }

.roots{ width:150px; margin:1rem auto 0; opacity:.8; }
.roots svg{ width:100%; height:auto; }
.root-line{ stroke:var(--root); stroke-width:2; fill:none; stroke-linecap:round; }

.tree-divider{
  position:relative;
  z-index:1;
  text-align:center;
  margin:1.4rem 0;
}
.tree-divider span{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--root);
  background:var(--bg);
  padding:.3rem .8rem;
  border:1px solid var(--line);
  border-radius:20px;
}

.node{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:50%;
  padding:1.1rem 0;
}
.node--left{
  left:0;
  justify-content:flex-end;
  padding-right:2.4rem;
}
.node--right{
  left:50%;
  justify-content:flex-start;
  padding-left:2.4rem;
}

.node-dot{
  position:absolute;
  top:50%;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--leaf);
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--trunk);
  transform:translateY(-50%);
  z-index:2;
}
.node--left .node-dot{ right:-6px; }
.node--right .node-dot{ left:-6px; }
.node--root .node-dot{ background:var(--root); box-shadow:0 0 0 1px var(--root); }

.node-branch{
  position:absolute;
  top:50%;
  height:1.5px;
  background:var(--line);
  transform:translateY(-50%);
}
.node--left .node-branch{ right:5px; width:2.4rem; }
.node--right .node-branch{ left:5px; width:2.4rem; }

.node-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:2px;
  padding:1rem 1.2rem;
  max-width:300px;
  width:100%;
  transition:border-color .25s ease, transform .25s ease;
}
.node-card:hover{ border-color:var(--trunk); transform:translateY(-1px); }

.node-kicker{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .3rem;
}
.node-role{
  font-family:var(--display);
  font-weight:500;
  font-size:1.08rem;
  margin:0 0 .15rem;
}
.node-org{
  font-size:.88rem;
  color:var(--ink-soft);
  margin:0 0 .35rem;
}
.node-org a{ color:var(--trunk); text-decoration:none; border-bottom:1px solid var(--line); }
.node-org a:hover{ border-color:var(--trunk); }
.node-meta{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-soft);
  margin:0;
}

/* =========================================================
   RESPONSIVE — collapse tree to single column
   ========================================================= */
@media (max-width:680px){
  .view{ padding:6vh 5vw 8vh; }

  .tree-line{ left:16px; }
  .node, .node--left, .node--right{
    width:100%;
    left:0;
    justify-content:flex-start;
    padding:.8rem 0 .8rem 3rem;
  }
  .node--left .node-dot, .node--right .node-dot{ left:11px; right:auto; }
  .node--left .node-branch, .node--right .node-branch{ left:22px; right:auto; width:1.6rem; }
  .node-card{ max-width:none; }

  .btn--primary{ padding:1rem 1.1rem; }
}