:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body { margin: 0; background: #0a0a0a; color: #20201e; font-family: Montserrat, Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
::selection { background: #c5d68b; color: #161616; }
h1, h2, h3, p { margin-top: 0; }

.portfolio-shell { width: 100%; }
.portfolio-header { position: absolute; top: 0; left: 0; z-index: 5; padding: clamp(20px, 3vw, 42px); }
.back-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.3); border-radius: 50%; font-size: 25px; line-height: 1; transition: transform .35s ease, background .35s ease; }
.back-icon:hover { transform: translateX(-5px); background: rgba(0,0,0,.55); }

.portfolio-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; min-height: 100svh; background: #f7f6f2; }
.portfolio-intro-photo { min-height: 720px; position: relative; overflow: hidden; background: #1b1b1b; }
.portfolio-intro-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(.82); }
.portfolio-intro-photo img.is-default-photo { object-position: 25% center; }
.portfolio-intro-copy { min-width: 0; padding: clamp(66px, 7vw, 116px) clamp(32px, 5vw, 100px); display: flex; flex-direction: column; justify-content: center; }
.portfolio-intro-copy h1 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 600; letter-spacing: -.055em; line-height: 1.14; margin-bottom: clamp(35px, 4vw, 65px); }
.portfolio-intro-copy h2 { font-size: clamp(22px, 2.1vw, 29px); font-weight: 600; letter-spacing: -.04em; margin-bottom: 18px; }
.portfolio-bio { max-width: 700px; color: #494944; font-size: clamp(14px, 1vw, 16px); line-height: 1.78; margin-bottom: 0; }
.portfolio-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: clamp(32px, 4vw, 65px); }
.portfolio-facts h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 15px; }
.portfolio-facts a, .portfolio-facts > div > span { display: block; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.portfolio-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-list span { border: 1px solid #c5c4be; border-radius: 100px; padding: 6px 9px; font-size: 11px; line-height: 1.3; }

.portfolio-section { padding: clamp(72px, 8vw, 125px) clamp(24px, 5vw, 100px); background: #0a0a0a; color: #f4f4f4; }
.portfolio-journey { position: relative; background: #0a0a0a; }
.portfolio-journey .portfolio-section { position: relative; z-index: 1; background: transparent; }
.journey-spine { position: absolute; z-index: 0; top: 0; left: 50%; width: 2px; height: 0; transform: translateX(-50%); background: #e5e5e5; pointer-events: none; }
.journey-origin { position: absolute; z-index: 3; top: 0; left: 50%; width: 34px; height: 34px; border: 2px solid #e5e5e5; border-radius: 50%; background: #0a0a0a; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease; pointer-events: none; }
.journey-origin.is-visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.section-heading { margin: 0 auto clamp(38px, 5vw, 70px); max-width: 1200px; }
.section-heading h2 { font-size: clamp(23px, 2.4vw, 31px); font-weight: 600; letter-spacing: -.04em; line-height: 1.2; margin: 0; }
.education-section .section-heading, .works-section .section-heading { text-align: center; }
.experience-timeline { position: relative; max-width: 1200px; margin: auto; }
.experience-item { display: grid; grid-template-columns: 1fr 1fr; position: relative; min-height: 150px; padding-bottom: 44px; }
.experience-item:last-child { padding-bottom: 0; }
.experience-item::before { content: ''; position: absolute; left: calc(50% - 5px); top: 20px; width: 11px; height: 11px; border-radius: 50%; background: #e8e8e8; box-shadow: 0 0 0 7px #0a0a0a; z-index: 1; opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.experience-item.is-reached::before { opacity: 1; transform: scale(1); }
.experience-logo-wrap, .experience-details { opacity: 0; transition: opacity .65s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.experience-logo-wrap { transform: translateX(-24px); }
.experience-details { transform: translateX(24px); }
.experience-item.is-reached .experience-logo-wrap, .experience-item.is-reached .experience-details { opacity: 1; transform: translateX(0); }
.experience-logo-wrap { display: flex; align-items: flex-start; justify-content: flex-end; padding: 0 clamp(28px, 6vw, 92px) 0 15px; }
.experience-logo-wrap img { width: min(130px, 13vw); height: 95px; object-fit: contain; }
.experience-lettermark { display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid #7c7c7c; border-radius: 50%; font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.experience-details { padding: 8px 20px 0 clamp(28px, 6vw, 92px); }
.experience-details h3 { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.03em; line-height: 1.35; margin-bottom: 7px; }
.experience-company { font-size: 14px; line-height: 1.55; margin-bottom: 5px; }
.experience-period { color: #a5a5a5; font-size: 13px; margin-bottom: 0; }
.experience-description { max-width: 500px; color: #b5b5b5; font-size: 13px; line-height: 1.7; margin-top: 12px; }
.education-frame { position: relative; width: min(100%, 1200px); margin-inline: auto; padding: clamp(24px, 4vw, 52px); }
.education-frame-border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.education-frame-border path { fill: none; stroke: #929292; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 10000px; stroke-dashoffset: 10000px; }
.education-frame .section-heading { margin-bottom: clamp(30px, 4vw, 55px); }
.education-frame .section-heading, .education-frame .portfolio-image-card { opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.education-frame .section-heading { transform: translateY(18px); }
.education-frame .portfolio-image-card:nth-child(odd) { transform: translateX(-32px); }
.education-frame .portfolio-image-card:nth-child(even) { transform: translateX(32px); }
.education-frame .section-heading.is-reached, .education-frame .portfolio-image-card.is-reached { opacity: 1; transform: translate(0,0); }

.portfolio-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); width: min(100%, 1080px); margin-inline: auto; }
.portfolio-image-card { position: relative; isolation: isolate; display: block; aspect-ratio: .93; min-height: 340px; max-height: 640px; overflow: hidden; background: #272723; color: #fff; }
.portfolio-card-image { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center; filter: blur(8px) brightness(.68) saturate(.75); transform: scale(1.08); transition: filter 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
.portfolio-card-image.is-default-photo { object-position: 25% center; }
.portfolio-card-shade { position: absolute; inset: 0; background: rgba(0,0,0,.2); transition: opacity .75s ease; }
.portfolio-card-copy { position: absolute; inset: clamp(24px, 4vw, 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.portfolio-card-logo { max-width: min(135px, 40%); max-height: 100px; object-fit: contain; margin-bottom: 22px; }
.portfolio-card-lettermark { width: 72px; height: 72px; display: grid; place-items: center; border: 1.5px solid #fff; border-radius: 50%; font-size: 22px; font-weight: 600; margin-bottom: 22px; }
.portfolio-card-copy h3 { font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.04em; line-height: 1.25; margin-bottom: 10px; }
.portfolio-card-copy p { font-size: clamp(13px, 1vw, 15px); line-height: 1.6; max-width: 330px; margin-bottom: 7px; }
.portfolio-card-year, .portfolio-card-link { font-size: 12px; letter-spacing: .04em; }
.portfolio-card-link { margin-top: 9px; text-decoration: underline; text-underline-offset: 4px; }
.portfolio-image-card:hover .portfolio-card-image, .portfolio-image-card:focus-visible .portfolio-card-image { filter: blur(0) brightness(.93) saturate(.95); transform: scale(1); }
.portfolio-image-card:hover .portfolio-card-shade, .portfolio-image-card:focus-visible .portfolio-card-shade { opacity: 0; }
.portfolio-image-card:hover .portfolio-card-copy { opacity: 0; transform: translateY(-16px); }
.portfolio-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 27px clamp(24px, 5vw, 100px); background: #0a0a0a; color: #a5a5a5; font-size: 12px; }
.portfolio-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.portfolio-arrival-curtain, .portfolio-exit-curtain { position: fixed; inset: 0; z-index: 99; pointer-events: none; will-change: transform; }
.portfolio-arrival-curtain { background: #f7f6f2; transform: translateY(100%); }
html.portfolio-arriving .portfolio-arrival-curtain { transform: translateY(0); }
html.portfolio-arriving.portfolio-reveal .portfolio-arrival-curtain { transform: translateY(100%); transition: transform .74s cubic-bezier(.7,0,.2,1); }
.portfolio-exit-curtain { background: #050505; transform: translateY(100%); }
html.portfolio-exiting .portfolio-exit-curtain { transform: translateY(0); transition: transform .68s cubic-bezier(.7,0,.18,1); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s ease, transform .95s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translate(0,0); }
.portfolio-intro-photo.reveal { transform: translateX(-7vw); }
.portfolio-intro-copy.reveal { transform: translateX(7vw); }
.portfolio-image-card.from-left.reveal { transform: translateX(-6vw); }
.portfolio-image-card.from-right.reveal { transform: translateX(6vw); }
.portfolio-intro-photo.reveal.is-visible, .portfolio-intro-copy.reveal.is-visible, .portfolio-image-card.reveal.is-visible { transform: translateX(0); }
html.portfolio-arriving .portfolio-intro .reveal { transition-delay: .14s; }

@media (max-width: 1000px) {
  .portfolio-intro-copy { padding: 65px 35px; }
  .portfolio-facts { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 680px) {
  .portfolio-intro { display: block; }
  .portfolio-intro-photo { min-height: 0; height: min(72svh, 570px); }
  .portfolio-intro-copy { padding: 42px 24px 65px; }
  .portfolio-intro-copy h1 { font-size: clamp(28px, 8vw, 38px); margin-bottom: 34px; }
  .portfolio-facts { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 35px; }
  .portfolio-section { padding: 70px 24px; }
  .experience-logo-wrap { padding-right: 23px; }
  .experience-logo-wrap img { width: 70px; height: 70px; }
  .experience-lettermark { width: 60px; height: 60px; font-size: 17px; }
  .experience-details { padding-left: 24px; padding-right: 0; }
  .experience-item { min-height: 130px; padding-bottom: 35px; }
  .experience-details h3 { font-size: 16px; }
  .experience-company { font-size: 12px; }
  .experience-period { font-size: 11px; }
  .portfolio-card-grid { grid-template-columns: 1fr; gap: 16px; }
  .portfolio-image-card { aspect-ratio: 1.07; min-height: 310px; }
  .portfolio-footer { padding: 26px 24px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .portfolio-intro-photo.reveal, .portfolio-intro-copy.reveal, .portfolio-image-card.reveal { opacity: 1; transform: none; transition: none; }
  .experience-item::before, .experience-logo-wrap, .experience-details, .education-frame .section-heading, .education-frame .portfolio-image-card { transition: none; }
  .portfolio-card-image, .portfolio-card-shade, .portfolio-card-copy { transition-duration: .01ms; }
  html.portfolio-arriving.portfolio-reveal .portfolio-arrival-curtain, html.portfolio-exiting .portfolio-exit-curtain { transition-duration: .01ms; }
}