/* A restrained finish for the portfolio only; resume/print layouts stay independent. */
@media screen {
.portfolio {
  --polish-ease: cubic-bezier(.22, 1, .36, 1);
  --polish-shadow: 0 16px 48px -30px #0009;
  --polish-edge: color-mix(in srgb, var(--neutral-on-background-strong) 16%, transparent);
}
.portfolio .nav {
  top: 14px; left: max(20px, calc((100vw - 1320px) / 2)); right: max(20px, calc((100vw - 1320px) / 2));
  padding: 11px 18px; border: 1px solid var(--neutral-border-weak); border-radius: 18px;
  background: color-mix(in srgb, var(--neutral-background-weak) 88%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 3px 18px #00000008;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.portfolio .nav.is-stuck { border-color: var(--neutral-border-medium); box-shadow: 0 8px 32px #00000014; }
.portfolio .nav__mark { padding: 4px 6px; }
.portfolio .nav__links a { border-radius: 9px; transition: color .25s, background .25s; }
.portfolio .nav__links a.is-active { color: var(--accent-on-background); background: var(--accent-alpha-weak); }
.portfolio .hero { padding-top: clamp(140px, 14vw, 190px); padding-bottom: 72px; }
.portfolio .hero__grid { gap: clamp(40px, 6vw, 88px); }
.portfolio .hero__title--sm { font-size: clamp(2.6rem, 4.3vw, 4.2rem); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.portfolio .hero__role { line-height: 1.55; max-width: 42ch; }
.portfolio .hero__lead--sm { max-width: 48ch; font-size: 1rem; line-height: 1.75; }
.portfolio .hero__chip { background: var(--accent-alpha-weak); border-color: var(--accent-border); font-size: .8125rem; line-height: 1.5; }
.portfolio .portrait--hero {
  border-radius: 28px; border: 1px solid var(--polish-edge);
  box-shadow: 0 24px 70px -36px #0008, 0 0 0 7px var(--neutral-alpha-weak);
}
.portfolio .portrait--hero img { transition: transform 1.2s var(--polish-ease); }
.portfolio .hero__glow { opacity: .65; background: radial-gradient(ellipse at 65% 48%, var(--accent-alpha-weak), transparent 60%); }
.portfolio .btn {
  min-height: 48px; border-radius: 12px;
  transition: box-shadow .35s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.portfolio .btn--solid { box-shadow: 0 4px 20px -8px var(--accent-solid), inset 0 1px 0 #ffffff30; }
.portfolio .marquee { margin-top: 72px; border-color: var(--neutral-border-weak); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.portfolio .marquee__track { opacity: .75; }
.portfolio .section { padding-block: clamp(64px, 8vw, 112px); }
.portfolio .section__head { margin-bottom: 40px; }
.portfolio .section__title { letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.portfolio .section__note { color: var(--neutral-on-background-medium); line-height: 1.6; }
.portfolio .idx { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-on-background); }
.portfolio .idx::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.portfolio :is(.kpi, .card:not(.card--product), .contact__card) {
  background-image: linear-gradient(145deg, var(--neutral-alpha-weak), transparent 65%);
  box-shadow: inset 0 1px 0 var(--neutral-alpha-weak);
}
.portfolio :is(.kpi, .card, .contact__card) {
  transition: opacity .7s var(--polish-ease), border-color .35s ease, box-shadow .4s ease, background-color .35s ease;
}
.portfolio .kpi { padding: 28px; border-radius: 20px; gap: 14px; }
.portfolio .kpi__num { font-size: clamp(1.75rem, 2.6vw, 2.35rem); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.portfolio .kpi__what { line-height: 1.65; }
.portfolio .kpi__src { margin-top: auto; padding-top: 24px; font-size: .75rem; }
.portfolio .kpi--accent { box-shadow: inset 0 1px 0 var(--accent-border); }
.portfolio .card__title { letter-spacing: -.035em; }
.portfolio .card__text { line-height: 1.7; }
.portfolio .card__arrow, .portfolio .contact__card-go { transition: transform .45s var(--polish-ease), color .3s ease; }
.portfolio .card__tags span { border-radius: 7px; }
.portfolio .role-item { padding-block: 36px; }
.portfolio .role-item__title { letter-spacing: -.025em; }
.portfolio .role-item__when { font-size: .8125rem; }
.portfolio .role-item--live .role-item__title::after { box-shadow: 0 0 0 5px var(--accent-alpha-weak); }
.portfolio .press__group { letter-spacing: .08em; }
.portfolio .press__item a { border-radius: 12px; transition: color .3s, background .35s; }
.portfolio .press__name { letter-spacing: -.015em; }
.portfolio .contact__title { letter-spacing: -.045em; text-wrap: balance; }
.portfolio .contact__cards { gap: 14px; }
.portfolio .contact__card { border-radius: 18px; padding: 22px; }
.portfolio .contact__card-icon { border-radius: 12px; transition: color .35s, background .35s; }
.portfolio .footer { background: var(--neutral-background-medium); }
/* Only opacity changes on collider elements: no shifting platforms below the mascot. */
.js .portfolio .reveal { transform: none; transition: opacity .75s var(--polish-ease), border-color .35s ease, box-shadow .4s ease, background-color .35s ease; }
.js .portfolio .reveal.is-in { transform: none; }
.portfolio :is(.btn, .kpi, a.card, .contact__card):hover { transform: none; }
.portfolio .press__item a:hover { padding-inline: 0; }
.portfolio :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-on-background); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .portfolio :is(.kpi, .card, .contact__card):hover { border-color: var(--polish-edge); box-shadow: inset 0 1px 0 var(--polish-edge), var(--polish-shadow); }
  .portfolio .btn--solid:hover { box-shadow: 0 8px 26px -8px var(--accent-solid); }
  .portfolio .contact__card:hover .contact__card-go { transform: translate(3px, -3px); }
  .portfolio .portrait--hero:hover img { transform: scale(1.035); }
}
@media (max-width: 1024px) {
  .portfolio .hero__title--sm { font-size: clamp(2.5rem, 6.5vw, 3.6rem); }
  .portfolio .hero__grid { gap: 40px; }
}
@media (max-width: 720px) {
  .portfolio .nav { top: 8px; left: 10px; right: 10px; padding: 10px 12px; border-radius: 14px; }
  .portfolio .hero { padding-top: 118px; padding-bottom: 40px; }
  .portfolio .hero__title--sm { font-size: clamp(2.2rem, 8.5vw, 3.1rem); line-height: 1.1; }
  .portfolio .hero__chip { font-size: .75rem; }
  .portfolio .portrait--hero { border-radius: 22px; }
  .portfolio .section { padding-block: 60px; }
  .portfolio .section__head { margin-bottom: 28px; }
  .portfolio .kpi { padding: 24px; }
  .portfolio .contact__card { padding: 18px; }
  .portfolio .marquee { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio *, .portfolio *::before, .portfolio *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .portfolio .reveal { opacity: 1; transform: none; }
}
}