@font-face{font-family:UmaSatoshi;src:url('../assets/figma-shared/Satoshi-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

#journey.portfolio-journey,#contact.portfolio-footer{box-sizing:border-box;padding-block:60px 128px;font-family:Figtree,Arial,sans-serif;color:#0f1115;scroll-margin-top:0}
#journey.portfolio-journey *,#contact.portfolio-footer *{box-sizing:border-box}
#journey>.section-heading,#contact>.section-heading{height:52px;display:flex;align-items:flex-start;margin:0 0 40px;padding:0;border-bottom:1px solid #d2dae4}
#journey>.section-heading h2,#contact>.section-heading h2{margin:0;font-size:24px;line-height:32px;font-weight:700;letter-spacing:0}
#journey .journey-layout,#contact .footer-layout{width:100%;background:#f9fafb;border-radius:40px;padding:8px;overflow:hidden;box-shadow:0 7px 8px -6px rgba(44,45,48,.13)}
#journey .journey-layout{height:820px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
#journey .journey-experiences{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:8px;min-height:0}
#journey .journey-experience,#journey .journey-story{background:#fff;border-radius:32px;box-shadow:0 6px 18px -12px rgba(44,45,48,.22)}
#journey .journey-experience{padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
#journey .journey-experience-heading{display:flex;align-items:flex-start;gap:20px;min-width:0}
#journey .journey-experience-heading>img{width:52px;height:52px;object-fit:cover;border-radius:10px;flex:none}
#journey .journey-experience-heading>div{min-width:0}
#journey .journey-experience h3{margin:0;font-size:20px;line-height:24px;font-weight:700;letter-spacing:0}
#journey .journey-experience h3 span{color:#50576b}
#journey .journey-experience-heading p{margin:8px 0 0;color:#50576b;font-size:16px;line-height:22px;font-weight:500}
#journey .journey-experience .journey-description{margin:0;color:#50576b;font-size:18px;line-height:24px;font-weight:500}
#journey .journey-mobile-date{display:none}
#journey .journey-story{position:relative;overflow:hidden;padding:28px 28px 12px;min-width:0}
#journey .journey-story-copy{position:relative;z-index:1}
#journey .journey-story h3{margin:0 0 8px;font-size:24px;line-height:32px;font-weight:700;letter-spacing:0}
#journey .journey-story p{margin:0;color:#50576b;font-size:18px;line-height:24px;font-weight:500}
#journey .journey-photo-strip{position:absolute;right:0;bottom:0;left:0;height:218px;overflow:hidden}
#journey .journey-photo-track{display:flex;align-items:flex-end;width:max-content;height:100%}
#journey .journey-photo-track.is-looping{animation:journey-photo-loop 36s linear infinite}
#journey .journey-photo-strip:hover .journey-photo-track{animation-play-state:paused}
#journey .journey-photo-set{display:flex;align-items:flex-end;flex:none;height:100%;padding-right:24px}
#journey .journey-photo-set span{display:block;flex:none;width:178px;height:205px;margin-left:-28px;padding:3px;border:2px solid #fff;border-radius:14px;background:#f9fafb;overflow:hidden;box-shadow:0 8px 15px -8px rgba(16,18,22,.28);transform:rotate(8deg)}
#journey .journey-photo-set span:first-child{margin-left:0}
#journey .journey-photo-set span:nth-child(even){transform:rotate(-8deg)}
#journey .journey-photo-set img,#journey .journey-photo-set video{display:block;width:100%;height:100%;border-radius:9px;object-fit:cover}
@keyframes journey-photo-loop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#journey .journey-photo-track.is-looping{animation:none}}

#contact .footer-layout{height:620px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}
#contact .footer-card{position:relative;display:block;min-width:0;overflow:hidden;padding:28px;border:0;border-radius:32px;background:#fff;box-shadow:0 6px 18px -12px rgba(44,45,48,.22);color:#0f1115;text-align:left;text-decoration:none}
#contact a.footer-card:hover .footer-action,#contact button.footer-card:hover .footer-action{background:#edf0f3;transform:translateY(-2px)}
#contact .footer-card:focus-visible{outline:2px solid #323745;outline-offset:-4px}
#contact .footer-bio{grid-column:1/3;grid-row:1/5}
#contact .footer-bio p{position:relative;z-index:1;margin:0;font-family:UmaSatoshi,Figtree,Arial,sans-serif;font-size:24px;line-height:32px;font-weight:700}
#contact .footer-bio p span{color:#a8aebd}
#contact .footer-portrait{position:absolute;left:0;bottom:0;display:block;width:100%;height:auto}
#contact .footer-music{grid-column:3/5;grid-row:1/3}
#contact .footer-location{grid-column:3/5;grid-row:3/5}
#contact .footer-resume{grid-column:5/7;grid-row:1/3}
#contact .footer-linkedin{grid-column:5;grid-row:3}
#contact .footer-medium{grid-column:6;grid-row:3}
#contact .footer-email{grid-column:5/7;grid-row:4;width:100%;cursor:pointer;font-family:inherit}
#contact .footer-card-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start}
#contact .footer-icon{display:block;width:40px;height:40px;object-fit:contain}
#contact .footer-location-icon{width:36px;height:36px}
#contact .footer-action{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:#f8f9fa;transition:background .2s ease,transform .2s ease}
#contact .footer-action img{display:block;width:20px;height:20px;object-fit:contain}
#contact .footer-card-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;margin-top:14px}
#contact .footer-card-copy small{color:#50576b;font-size:14px;line-height:20px;font-weight:500}
#contact .footer-card-copy strong{font-size:20px;line-height:24px;font-weight:700}
#contact .footer-record{position:absolute;z-index:1;top:35%;left:50%;display:block;width:82%;height:auto;transform:translateX(-50%)}
#contact .footer-globe{position:absolute;left:50%;top:50%;display:block;width:88%;height:auto;opacity:.24;transform:translateX(-50%) rotate(0deg);animation:footer-globe-spin 30s linear infinite}
#contact .footer-folder{position:absolute;left:50%;top:20px;display:block;width:135%;max-width:none;height:auto;transform:translateX(-50%)}
@keyframes footer-globe-spin{to{transform:translateX(-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#contact .footer-globe{animation:none}}
#contact .footer-social{padding:28px}
#contact .footer-social>strong,#contact .footer-email>strong{position:absolute;left:28px;bottom:26px;z-index:1;font-size:20px;line-height:24px;font-weight:700}
#contact .footer-email>strong{right:24px;overflow-wrap:anywhere}

@media(max-width:800px){
  #journey.portfolio-journey,#contact.portfolio-footer{padding-block:64px 106px}
  #journey>.section-heading,#contact>.section-heading{height:44px;margin-bottom:20px}
  #contact>.section-heading{height:52px}
  #journey>.section-heading h2,#contact>.section-heading h2{font-size:20px;line-height:24px}
  #journey .journey-layout{height:auto;display:flex;flex-direction:column;gap:8px}
  #journey .journey-experiences{display:flex;flex-direction:column;gap:8px;flex:none}
  #journey .journey-experience{height:auto;min-height:168px;flex:none;padding:16px}
  #journey .journey-experience:first-child{height:auto;min-height:164px}
  #journey .journey-experience-heading{gap:12px}
  #journey .journey-experience-heading>img{width:44px;height:44px;border-radius:8px}
  #journey .journey-experience h3{font-size:15px;line-height:20px;overflow-wrap:anywhere}
  #journey .journey-experience-heading p{margin-top:4px;font-size:14px;line-height:20px}
  #journey .journey-experience .journey-description{font-size:14px;line-height:20px}
  #journey .journey-experience .journey-description{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  #journey .journey-desktop-date{display:none}
  #journey .journey-mobile-date{display:block}
  #journey .journey-story{height:auto;min-height:484px;flex:none;padding:28px;overflow:hidden}
  #journey .journey-story h3{margin-bottom:8px;font-size:18px;line-height:24px}
  #journey .journey-story p{font-size:14px;line-height:20px}
  #journey .journey-photo-strip{bottom:12px;height:164px}
  #journey .journey-photo-set span{width:146px;height:150px;margin-left:-24px;padding:2px;border-width:1px;border-radius:9px}
  #journey .journey-photo-set img,#journey .journey-photo-set video{border-radius:7px}

  #contact .footer-layout{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:472px 216px 298px 104px 100px}
  #contact .footer-card{padding:16px;border-radius:32px}
  #contact .footer-bio{grid-column:1/3;grid-row:1}
  #contact .footer-bio p{font-size:18px;line-height:24px}
  #contact .footer-portrait{left:50%;width:min(100%,400px);transform:translateX(-50%)}
  #contact .footer-music{grid-column:1;grid-row:2}
  #contact .footer-location{grid-column:2;grid-row:2}
  #contact .footer-resume{grid-column:1/3;grid-row:3}
  #contact .footer-linkedin{grid-column:1;grid-row:4}
  #contact .footer-medium{grid-column:2;grid-row:4}
  #contact .footer-email{grid-column:1/3;grid-row:5}
  #contact .footer-icon{width:28px;height:28px}
  #contact .footer-location-icon{width:28px;height:28px}
  #contact .footer-action{width:28px;height:28px}
  #contact .footer-action img{width:16px;height:16px}
  #contact .footer-card-copy{margin-top:8px;gap:2px}
  #contact .footer-card-copy small{font-size:12px;line-height:16px}
  #contact .footer-card-copy strong{font-size:16px;line-height:20px}
  #contact .footer-record{top:35%;width:110%}
  #contact .footer-globe{top:56%;width:115%}
  #contact .footer-folder{top:20px;width:135%}
  #contact .footer-social>strong,#contact .footer-email>strong{left:16px;bottom:14px;font-size:16px;line-height:20px}
  #contact .footer-email>strong{right:16px;font-size:15px}
}

@media(max-width:380px){
  #journey .journey-experience h3{font-size:14px}
  #contact .footer-bio p{font-size:17px;line-height:23px}
  #contact .footer-email>strong{font-size:14px}
}