/* Red Barela Portfolio - frontend polish v3
   Targeted visual refinements only. No project content or integrations are replaced. */

html{
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navigation: slightly cleaner separation from dense sections. */
.nav-shell{
  border-color:rgba(255,255,255,.11);
  background:rgba(7,8,20,.82);
  box-shadow:0 16px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.03);
}
.nav-links a,.resume-mini,.motion-control{white-space:nowrap}
.resume-mini{min-width:max-content}

/* Flagship project media: keep full-page screenshots inside a controlled premium frame. */
.flagship{align-items:center}
.flagship__visual.screenshot-frame{
  width:100%;
  aspect-ratio:16/10;
  min-height:0;
  max-height:620px;
  align-self:center;
}
.flagship__visual.screenshot-frame .browser-chrome{position:relative;z-index:2;flex:0 0 40px}
.flagship__visual.screenshot-frame img{
  display:block;
  width:100%;
  height:calc(100% - 40px);
  aspect-ratio:auto;
  object-fit:cover;
  object-position:top center;
}

/* Featured grid: consistent card rhythm and cleaner action placement. */
.project-card{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.project-card__art{flex:0 0 auto}
.project-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:300px;
}
.project-card__body p{line-height:1.7}
.project-card__body>.text-link,
.project-card__body>.project-actions{
  margin-top:auto;
  padding-top:25px;
}
.project-card__body .project-actions .text-link{margin-top:0;padding-top:0}
.project-actions{row-gap:12px}

/* About: improve long-form readability and CTA alignment. */
.bio{max-width:760px;line-height:1.72}
.about blockquote{
  max-width:800px;
  line-height:1.55;
  letter-spacing:-.012em;
  color:#eef0f8;
}
.about__actions .button{min-height:48px}

/* Web package: improve number rendering and card balance without changing pricing. */
.package-price strong{
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.055em;
}
.package-pricing-grid{align-items:stretch}
.pricing-card{height:100%}
.package-feature-grid li{transition:border-color .22s ease,background .22s ease,transform .22s ease}
.package-feature-grid li:hover{
  transform:translateY(-2px);
  border-color:rgba(110,124,255,.22);
  background:rgba(255,255,255,.027);
}

/* Accessible, visible keyboard focus across interactive portfolio elements. */
:is(a,button,input,select,textarea):focus-visible{
  outline:2px solid rgba(113,137,255,.95);
  outline-offset:3px;
}

@media (max-width:1080px){
  .flagship__visual.screenshot-frame{max-height:none}
  .project-card__body{min-height:0}
}

@media (max-width:820px){
  .flagship__visual.screenshot-frame{aspect-ratio:16/11}
  .project-card__body{padding-bottom:28px}
}

@media (max-width:560px){
  .nav-shell{background:rgba(7,8,20,.9)}
  .flagship__visual.screenshot-frame{aspect-ratio:4/3}
  .project-card__body{padding:26px}
  .project-card__body h3{font-size:clamp(2.1rem,11vw,2.8rem)}
  .about blockquote{font-size:1rem}
  .package-price strong{letter-spacing:-.045em}
}

@media (prefers-reduced-motion:reduce){
  .package-feature-grid li{transition:none}
}