/* Desktop presentation layer. Shared content and components live in styles.css. */
.intro-stage{
  inset:0 52% 0 0;
}

.intro-stage #livingHead{
  left:-12%;
  bottom:-5%;
  width:83%;
  height:79%;
}

.comic-intro{
  top:7%;
  right:4%;
  width:255px;
  max-width:255px;
  padding:14px 15px 13px;
  border-width:3px;
  box-shadow:7px 7px 0 #101828,10px 10px 0 #ffd84d;
}

.comic-intro>span{font-size:9px}
.comic-intro h2{margin:6px 0;font-size:27px;line-height:.91}
.comic-intro>p{min-height:38px;font-size:12px;line-height:1.32}
.comic-controls{gap:6px;margin-top:9px}
.comic-controls button{padding:6px 7px;font-size:9px}
.comic-controls b{font-size:9px}
.wardrobe{margin-top:8px;padding-top:7px}
.wardrobe>span{font-size:7px}
.wardrobe>div{gap:4px}
.wardrobe button{height:25px;padding:3px 5px;font-size:7px}
.wardrobe button i{width:9px;height:9px}
.comic-intro:after{bottom:34px!important;width:23px!important;height:30px!important}
.avatar-mood{left:4%;bottom:13%;padding:6px 9px}
.intro-stage .head-label{left:4%;bottom:4%}

.finder{
  height:min(720px,calc(100dvh - 104px));
  max-height:calc(100dvh - 104px);
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}

.finder .titlebar{
  position:sticky;
  top:0;
  z-index:12;
}

.finder .finder-toolbar{
  position:sticky;
  top:38px;
  z-index:11;
  background:#eef2f8;
}

.finder-intro{
  padding:30px 36px 20px;
}

.finder-intro>span{
  margin-bottom:14px;
}

.finder-intro h1{
  max-width:620px;
  margin-bottom:16px;
}

.finder-intro .finder-opening{
  max-width:640px;
}

.career-direction{
  gap:14px;
  margin-top:19px;
}

.career-direction article{
  padding:16px 18px;
}

.role-ribbon{
  margin-top:14px;
}

.dashboard-groups{
  padding:10px 22px 30px;
}

.dashboard-group{
  padding:15px 16px 16px;
}

.dashboard-group .file-grid{
  padding-top:14px;
}

.case-study-group .file-grid{
  gap:12px;
}

.case-study-group .project-file{
  padding:10px 6px 12px;
}

.case-study-group .project-file>i{
  width:76px;
  height:56px;
}

.case-study-group .project-file strong{
  display:grid;
  align-items:center;
  min-height:27px;
  margin-top:5px;
  line-height:1.1;
  white-space:normal;
}

.case-study-group .project-file span{font-size:10px}

@media(min-width:621px) and (max-width:950px){
  .finder{
    height:calc(100dvh - 125px);
    min-height:560px;
    max-height:calc(100dvh - 125px);
  }
  .dashboard-groups{padding-bottom:96px}
}

@media(max-height:840px){
  .finder-intro{padding:21px 30px 13px}
  .finder-intro>span{margin-bottom:9px}
  .finder-intro h1{margin-bottom:10px;font-size:40px;line-height:.98}
  .finder-intro .finder-opening{font-size:13px;line-height:1.5}
  .career-direction{gap:10px;margin-top:11px}
  .career-direction article{min-height:100px;padding:10px 14px}
  .career-direction b{margin-bottom:5px}
  .career-direction article>p{margin-bottom:4px!important}
  .career-direction ul{gap:2px;font-size:10px;line-height:1.3}
  .role-ribbon{margin-top:8px}
  .dashboard-groups{padding:5px 18px 16px}
  .dashboard-group{padding:10px 12px}
  .dashboard-group>header{padding-bottom:8px}
  .dashboard-group .file-grid{padding-top:9px}
  .case-study-group .project-file{padding:6px 4px 8px}
  .case-study-group .project-file>i{width:66px;height:49px}
}

@media(max-height:760px){
  .intro-stage #livingHead{width:76%;height:73%}
  .comic-intro{top:5%;width:235px;max-width:235px;padding:12px 13px}
  .comic-intro h2{font-size:24px}.comic-intro>p{font-size:11px;min-height:32px}
  .finder-intro{padding:20px 32px 11px}
  .career-direction{margin-top:11px}
  .career-direction article{padding:11px 14px}
  .role-ribbon{margin-top:8px}
  .dashboard-groups{padding:5px 18px 16px}
  .dashboard-group{padding:10px 12px}
  .dashboard-group .file-grid{padding-top:8px}
  .case-study-group .project-file{padding:6px 4px}
}