/* Bella Gallo — portfolio main page styles. Structure lives in index.html. */

/* colors */
:root{
/* Color vars to easily adjust as needed*/
  --cream:#55493A;     /* bg, medium desert brown (not too dark) */
  --paper:#635741;     /* cards, lighter */
  --sand:#7A6E54;      /* borders */
  --clay:#A65A49;      /* ashy rust red */
  --clay-soft:#6E3B2E;
  --sage:#869A7E;      /* ashy sage green */
  --sage-soft:#566049;
  --teal:#5F9199;      /* ashy teal */
  --teal-soft:#3C5A5C;
  --blue:#738CA0;      /* ashy slate blue */
  --blue-soft:#44586B;
  --plum:#93788C;      /* ashy mauve purple */
  --plum-soft:#5C4A57;
  --ochre:#C68A55;     /* warm sand, rare */
  --ink:#F3EBDA;       /* light text */
  --muted:#CBBDA2;
  --shadow:26px 26px 60px rgba(0,0,0,0.3);
  --hover-shadow:0 16px 38px rgba(0,0,0,0.33);  /* soft lift on hover */
  --flow:0.4s cubic-bezier(.2,.8,.2,1);         /* flowy easing */
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* faint tiled texture over the whole page (rocky-wall.png) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.3;
  background-image:url("assets/images/rocky-wall.png");
  background-repeat:repeat;
}
a{color:inherit;text-decoration:none;}

/* bg blobs */
.blob{
  position:absolute;border-radius:50%;filter:blur(55px);opacity:0.5;
  z-index:0;pointer-events:none;
}

.shell{max-width:1080px;margin:0 auto;padding:0 28px;position:relative;z-index:2;}

/* sticky top nav with its own little bar */
nav{
  position: -webkit-sticky;
  position: sticky;      /* sticks up top when you scroll */
  top: 0;
  z-index: 100;          /* keep it over everything */
  /* see-through bar + blur so stuff scrolls under it, not through it */
  background: rgba(85, 73, 58, 0.82);   /* --cream with some see-through */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand);
}
/* lines the name + links up with the rest of the page */
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1080px;margin:0 auto;padding:18px 28px;
}
/* little logo up top, kept plain so it's not a repeat of the big script name */
.brand{
  display:inline-block;
  font-family:"Hanken Grotesk",sans-serif;font-weight:700;
  font-size:1.15rem;line-height:1;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ink);
}
.brand .dot{color:var(--clay);}
.navlinks{display:flex;gap:26px;font-size:0.95rem;}
.navlinks a{color:var(--muted);transition:color .2s;}
.navlinks a:hover{color:var(--clay);}

/* hero */
.hero{position:relative;padding:150px 0 90px;}
.hero-inner{display:flex;align-items:center;gap:56px;flex-wrap:wrap;}
.hero-text{flex:1 1 420px;}
.kicker{font-family:"Indie Flower",cursive;font-style:italic;font-size:1.35rem;color:var(--plum);margin-bottom:8px;}
h1{font-family:"Mr De Haviland",cursive;font-weight:400;font-size:clamp(2.6rem,9vw,6.4rem);line-height:1.1;letter-spacing:0;margin:0 0 2px;max-width:100%;color:var(--teal);background:linear-gradient(100deg,var(--teal),var(--plum));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0.08em 0.1em 0.22em;}
h1 .leaf{font-style:normal;}
/* name underline */
.squiggle{display:block;width:230px;max-width:60%;height:auto;color:var(--teal);margin:6px 0 22px;}
.role{font-size:1.1rem;color:var(--muted);margin-bottom:20px;}
.lede{max-width:48ch;font-size:1.08rem;margin-bottom:30px;}
.btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:0.98rem;padding:13px 26px;
  border-radius:999px;cursor:pointer;border:1.5px solid var(--clay);display:inline-block;
  transition:all var(--flow);}
.btn.solid{background:var(--clay);color:#F4EAD8;}
.btn.ghost{background:transparent;color:var(--clay);}
.btn:hover{transform:translateY(-3px);box-shadow:var(--hover-shadow);}
.btn.ghost:hover{background:var(--clay-soft);}

/* fir tree behind the hero — pure css, shape from kerthin (MIT):
   https://dev.to/kerthin/11-geometric-objects-trees-pure-css-p8l
   size/position/color all live here */
.hero-art{position:absolute;z-index:0;pointer-events:none;
  /* slide it off to the right as the page gets narrow instead of sliding over the text */
  right:clamp(-220px, calc(100vw - 1140px), 40px);
  bottom:-180px;
  width:454px;height:750px;transform-origin:bottom right;transform:scale(1.05);
  opacity:0.2;filter:drop-shadow(0 14px 44px rgba(0,0,0,0.22));}

.fir{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:554px;height:850px;
  /* gentle organic warp — see #wisp filter in index.html */
  filter:url(#wisp);}
.fir .centerRod{position:absolute;left:290px;width:4px;height:804px;background-color:var(--ink);}
.fir .centerRod .sideRods{position:absolute;top:52px;left:50%;transform:translateX(-50%);
  width:368px;height:663px;border:4px solid var(--ink);border-bottom-right-radius:280px;border-top:0;}
.fir .centerRod .centerRod__basis{position:absolute;top:662px;left:50%;transform:translateX(-50%);
  width:72px;height:72px;border-radius:50%;}
.fir .centerRod .angleLeftRod{position:absolute;top:690px;right:0;width:110px;height:90px;
  border:4px solid var(--ink);border-top:0;border-bottom-left-radius:20px;border-bottom-right-radius:70px;}
.fir .centerRod .angleLeftRod .angleLeftRod__leftBtunch{position:absolute;top:-74px;left:-4px;
  width:4px;height:74px;background-color:var(--ink);}
.fir .centerRod .angleRightRod{position:absolute;top:690px;width:100px;height:40px;
  border:4px solid var(--ink);border-top:0;border-bottom-left-radius:70px;border-bottom-right-radius:20px;}
.fir .centerRod .angleRightRod .angleLeftRod__rightBtunch{position:absolute;top:-620px;right:-4px;
  width:4px;height:620px;background-color:var(--ink);}
.fir .centerRod .kernel{position:absolute;width:35px;height:35px;border-radius:50%;}
.fir .centerRod .kernel._centered{left:50%;transform:translateX(-50%);}
.fir .centerRod .kernel._bottom{bottom:-19px;}
.fir .centerRod .kernel._bottomR{bottom:-19px;left:-19px;}
.fir .centerRod .roots{position:absolute;bottom:-280px;left:50%;transform:translateX(-50%);
  width:280px;height:280px;border:4px solid var(--ink);border-radius:50%;
  border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;}

.fir .sideRods__crownsWrap{position:absolute;height:554px;width:222px;}
.fir .sideRods__crownsWrap._centerCW{top:10px;left:50%;transform:translateX(-50%);}
.fir .sideRods__crownsWrap._leftCW{left:-2px;transform:translateX(-50%);}
.fir .sideRods__crownsWrap._rightCW{top:5px;right:-2px;transform:translateX(50%);}

.fir .crown{position:absolute;left:50%;transform:translateX(-50%);
  /* lopsided curve so the edge looks organic, not perfectly round */
  border-radius:0 0 46% 54% / 0 0 94% 112%;
  /* soft foliage: cream fading up to sage, blurred edge + glow */
  background:linear-gradient(to top, var(--ink) 0%, var(--sage) 80%, transparent 100%);
  filter:blur(0.6px);
  box-shadow:0 0 8px rgba(243,235,218,0.30);}
/* flip the lean each row so they don't stack perfectly */
.fir .crown:nth-child(odd){border-radius:0 0 54% 46% / 0 0 112% 94%;}
.fir .crown._margin_rightCW{left:0%;transform:translate(0%);}
.fir .crown._1{top:18px;width:34px;height:8px;}
.fir .crown._2{top:66px;width:61px;height:11px;}
.fir .crown._3{top:116px;width:71px;height:13px;}
.fir .crown._4{top:165px;width:84px;height:15px;}
.fir .crown._5{top:214px;width:100px;height:18px;}
.fir .crown._6{top:256px;width:116px;height:21px;}
.fir .crown._7{top:304px;width:136px;height:25px;}
.fir .crown._8{top:357px;width:160px;height:28px;}
.fir .crown._9{top:426px;width:190px;height:34px;}
.fir .crown._10{top:514px;width:222px;height:40px;}
.fir .crown._1._margin_rightB{top:calc(18px + 50px);}
.fir .crown._2._margin_rightB{top:calc(66px + 50px);}
.fir .crown._3._margin_rightB{top:calc(116px + 50px);}
.fir .crown._9._margin_rightCW{left:1px;}
.fir .crown._10._margin_rightCW{left:-55px;}

.fir .constellation{position:absolute;top:-50px;right:-20px;width:126px;height:95px;}
.fir .constellation .line{position:relative;margin-top:45.5px;width:126px;height:4px;background-color:var(--ink);}
.fir .constellation .line .star{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;}
.fir .constellation .line .star._small{width:18px;height:18px;}
.fir .constellation .line .star._big{left:25px;width:37px;height:37px;}
/* soft glowing clay orb (the original was a hard crescent) */
.fir .constellation .moon{position:absolute;top:0;right:44px;width:95px;height:95px;border-radius:50%;
  background:var(--clay);box-shadow:0 0 34px 8px var(--clay);opacity:0.55;}

/* the little accent dots, recolored to our palette (black/red in the original) */
.fir ._bg_black{background-color:var(--ink);}
.fir ._bg_red{background-color:var(--clay);}
.fir ._bg_teal{background-color:var(--teal);}

/* section headings */
.sec{position:relative;padding:70px 0;}
.sec-eyebrow{font-family:"Indie Flower",cursive;font-style:italic;color:var(--teal);font-size:1.1rem;margin-bottom:6px;}
.sec-title{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:34px;}
.sub-head{font-family:"Indie Flower",cursive;font-style:italic;color:var(--clay);font-size:1.25rem;margin:36px 0 16px;}

/* about */
.about-wrap{display:flex;gap:48px;flex-wrap:wrap;}
.about-bio{flex:1 1 420px;font-size:1.08rem;}
.about-bio p{margin-bottom:16px;}
.about-side{flex:1 1 280px;}
.contact{display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:22px 24px 20px 26px;
  padding:22px 24px;box-shadow:12px 12px 30px rgba(0,0,0,0.18);transition:transform var(--flow), box-shadow var(--flow);}
.contact:hover{transform:translateY(-4px);box-shadow:var(--hover-shadow);}
.contact a{color:var(--muted);font-size:0.95rem;transition:color .2s;}
.contact a:hover{color:var(--clay);}
.contact .who{font-family:"Yeseva One",serif;font-size:1.3rem;color:var(--ink);margin-bottom:4px;}

/* timeline */
.tl-item{position:relative;padding:0 0 26px 26px;border-left:2px solid var(--sand);}
.tl-item::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--clay);}
.tl-item:last-child{border-left-color:transparent;}
.tl-date{font-size:0.82rem;color:var(--muted);letter-spacing:0.5px;}
.tl-role{font-family:"Yeseva One",serif;font-size:1.18rem;}
.tl-org{color:var(--sage);font-size:0.95rem;margin-bottom:4px;}
.tl-desc{font-size:0.95rem;color:var(--muted);}

/* interests */
.interests{display:flex;gap:16px;flex-wrap:wrap;}
.interest{flex:1 1 230px;background:var(--paper);border-radius:20px 22px 20px 24px;
  padding:20px 22px;box-shadow:12px 12px 30px rgba(0,0,0,0.18);transition:transform var(--flow), box-shadow var(--flow);}
.interest:hover{transform:translateY(-5px);box-shadow:var(--hover-shadow);}
.interest h4{font-family:"Yeseva One",serif;font-weight:500;font-size:1.15rem;margin-bottom:6px;}
.interest p{font-size:0.92rem;color:var(--muted);}

/* work cards */
.work-list{display:flex;flex-direction:column;gap:40px;}
.work-card{background:var(--paper);border-radius:26px 30px 24px 30px;box-shadow:var(--shadow);
  overflow:hidden;display:flex;max-width:760px;color:var(--ink);
  transition:transform var(--flow), box-shadow var(--flow);}
.work-card:nth-child(odd){align-self:flex-start;transform:rotate(-1.1deg);}
.work-card:nth-child(even){align-self:flex-end;transform:rotate(1.1deg);flex-direction:row-reverse;}
.work-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:34px 34px 70px rgba(0,0,0,0.2);}
.wc-img{flex:0 0 240px;background:var(--sand);overflow:hidden;}
.wc-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:210px;}
.wc-body{flex:1;padding:26px 28px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.wc-cat{font-family:"Indie Flower",cursive;font-style:italic;color:var(--teal);font-size:0.98rem;}
.wc-body h3{font-family:"Yeseva One",serif;font-weight:500;font-size:1.5rem;line-height:1.12;}
.wc-body p{font-size:0.98rem;color:var(--muted);}
.wc-foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:8px;}
.wc-status{font-size:0.82rem;font-weight:700;color:var(--clay);}
.wc-view{font-size:0.82rem;color:var(--muted);margin-left:auto;}
.work-card:hover .wc-view{color:var(--clay);}
.work-card.noimg{max-width:620px;}

/* skills */
.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.pill{background:var(--paper);border:1px solid var(--sand);border-radius:999px;
  padding:8px 16px;font-size:0.9rem;color:var(--ink);box-shadow:6px 6px 16px rgba(0,0,0,0.18);transition:transform var(--flow), box-shadow var(--flow), border-color var(--flow);}
.pill:hover{transform:translateY(-3px);box-shadow:var(--hover-shadow);border-color:var(--teal);}

/* footer */
footer{text-align:center;padding:70px 0 80px;position:relative;z-index:2;}
footer .sig{font-family:"Indie Flower",cursive;font-style:italic;font-size:1.6rem;margin-bottom:10px;}
footer .links{display:flex;gap:22px;justify-content:center;color:var(--muted);margin-bottom:14px;}
footer .links a:hover{color:var(--clay);}
footer .copy{font-size:0.82rem;color:var(--muted);}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.work-card.reveal.in:nth-child(odd){transform:rotate(-1.1deg);}
.work-card.reveal.in:nth-child(even){transform:rotate(1.1deg);}

@media (max-width:760px){
  .work-card,.work-card:nth-child(odd),.work-card:nth-child(even){
    align-self:stretch;transform:none;flex-direction:column;max-width:100%;}
  .work-card:hover{transform:translateY(-4px);}
  .wc-img{flex:none;}
  .nav-inner{flex-direction:column;gap:10px;padding:14px 20px;}
  .navlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;font-size:0.9rem;}
  /* same tree, just fainter on phones (the clamp already tucks it off to the right) */
  .hero-art{opacity:0.12;}
  .hero{padding:120px 0 60px;}
  .hero-inner{gap:30px;}
  .sec{padding:48px 0;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{transition:none !important;}
}