/* Figma desktop frame: 1280 × 6464. Container units preserve its proportions. */
:root { color-scheme: dark; --paper: #d9d9d9; --ink: #2d2d2d; --white: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: Inter, sans-serif; }
.site { width: 100%; container-type: inline-size; overflow: clip; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 10; padding: 12px 18px; background: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero { position: relative; }
#about, #resume, #contact { scroll-margin-top: clamp(90px, 8.5vw, 130px); }
.hero-scene { position: relative; width: 100%; aspect-ratio: 1280 / 1700; isolation: isolate; overflow: hidden; }
.design-divider { position: absolute; top: 0; left: 50%; z-index: -1; }
.hero-background, .hero-person { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.hero-background { z-index: 0; }
.hero-person { z-index: 2; pointer-events: none; }
.hero-barcode { position: absolute; z-index: 1; left: 1.25cqw; top: 34.84375cqw; width: 99.453125cqw; height: 14.921875cqw; display: flex; align-items: center; justify-content: center; font-family: 'Libre Barcode 128', monospace; font-size: 54.6875cqw; line-height: 1.49; letter-spacing: -.2734375cqw; font-weight: 400; }
/* Keep the header outside .site: container-type creates a containing block for fixed descendants. */
.header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; display: flex; justify-content: center; padding: clamp(14px, 1.875vw, 28px) 16px; pointer-events: none; }
.nav { display: flex; align-items: center; justify-content: center; gap: 3.125vw; padding: 1.25vw 3.125vw; border: 1px solid rgba(255,255,255,.27); border-radius: 40px; background: rgba(0,0,0,.05); backdrop-filter: blur(27.5px); -webkit-backdrop-filter: blur(27.5px); pointer-events: auto; transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.nav a { position: relative; font-weight: 500; font-size: clamp(14px, 1.25vw, 22px); line-height: 1.45; letter-spacing: -.00625vw; text-decoration: none; white-space: nowrap; transition: transform .2s ease; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
.nav a:hover { transform: translateY(-2px); }
.nav a:hover::after, .nav a[aria-current="location"]::after { transform: scaleX(1); }
.header.is-scrolled .nav { background: rgba(25,25,25,.78); border-color: rgba(255,255,255,.4); box-shadow: 0 8px 28px rgba(0,0,0,.15); }
.hero-copy { position: absolute; z-index: 3; top: 48.10625cqw; right: 5.78125cqw; width: 45.78125cqw; text-align: right; }
.hero-copy h1 { font-size: 3.75cqw; font-weight: 500; line-height: 1.51; letter-spacing: -.01875cqw; }
.hero-bio { margin-top: .36796875cqw; font-size: 1.171875cqw; line-height: 1.49; letter-spacing: -.005859375cqw; }
.resume { background: var(--ink); }
.creative { position: relative; min-height: 107.605514cqw; }
.resume-heading { position: absolute; top: .3796875cqw; left: 55.703125cqw; width: 47.890625cqw; text-align: center; font-family: 'Libre Barcode 39 Text', monospace; font-size: 11.71875cqw; line-height: 1.45; letter-spacing: -.05859375cqw; font-weight: 400; }
.terminal { width: 77.8125cqw; margin-left: 11.328125cqw; font-family: 'JetBrains Mono', monospace; font-size: 1.5625cqw; line-height: 1.45; letter-spacing: -.0078125cqw; font-variant-ligatures: none; overflow-wrap: break-word; }
.terminal p, .terminal-heading { white-space: pre-wrap; }
.terminal-heading { font-size: inherit; font-weight: 400; line-height: inherit; }
.creative-text { padding-top: 20.3125cqw; }
.painting-gallery { height: 36.940372cqw; background: var(--paper); display: flex; align-items: center; }
.painting-pair { display: flex; align-items: center; gap: 1.62351cqw; margin-left: 11.069126cqw; }
.painting { display: block; height: 31.70226cqw; object-fit: fill; }
.painting-red { width: 25.330498cqw; height: 31.663125cqw; }
.painting-color { width: 25.361807cqw; height: 31.702261cqw; }
.learning { min-height: 109.09566cqw; padding-top: 11.71875cqw; }
.principles { min-height: 42.375489cqw; padding-top: 2.1875cqw; padding-bottom: 1.640625cqw; color: #000; background: var(--paper); }
.closing::before { content: '“ '; }
.contact { position: relative; height: 76.171875cqw; background: var(--ink); }
.contact-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.email-link { position: absolute; inset: 0; display: block; text-decoration: none; }
.contact-barcode { position: absolute; top: 32.6875cqw; left: 18.046875cqw; width: 67.578125cqw; text-align: center; font-family: 'Libre Barcode 39 Text', monospace; font-size: 7.5cqw; line-height: 1.45; letter-spacing: -.0375cqw; }
.contact-domain { position: absolute; top: 42.25cqw; left: 50cqw; width: 62.734375cqw; text-align: center; font-family: 'Libre Baskerville', serif; font-size: 2.5cqw; line-height: 1.45; letter-spacing: -.0125cqw; }
.email-link:focus-visible { outline-offset: -8px; }
.email-link:hover .contact-domain { text-decoration: underline; text-underline-offset: 5px; }
/* Entrance animation and scroll reveals finish at the original Figma positions. */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-barcode { animation: enter-up 1.15s cubic-bezier(.2,.65,.25,1) both; }
.hero-person { animation: enter-up 1.15s cubic-bezier(.2,.65,.25,1) .12s both; }
.hero-copy { animation: enter-up .9s cubic-bezier(.2,.65,.25,1) .3s both; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.25,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible, .reveal:focus-visible { opacity: 1; transform: translateY(0); }
/* Reflow the biography and terminal text on smaller screens. */
@media (max-width: 900px) {
  .nav { gap: 28px; padding: 14px 28px; }
  .nav a { font-size: 14px; letter-spacing: -.07px; }
  .header { padding-top: 20px; }
  .hero-copy { position: relative; top: auto; right: auto; width: auto; margin: 0; padding: 34px 7vw 44px; text-align: left; background: var(--ink); }
  .hero-copy h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.3; }
  .hero-bio { margin-top: 16px; font-size: 15px; line-height: 1.6; letter-spacing: -.075px; }
  .hero-bio p + p { margin-top: 12px; }
  .creative { min-height: 0; padding-top: 44px; padding-bottom: 44px; }
  .resume-heading { position: static; width: auto; margin: 0 7vw 36px; text-align: right; font-size: clamp(84px, 14vw, 126px); line-height: 1; }
  .terminal { width: auto; margin: 0 7vw; font-size: 15px; line-height: 1.6; letter-spacing: -.075px; }
  .creative-text { padding-top: 0; }
  .terminal p, .terminal-heading { white-space: pre-wrap; }
  .painting-gallery { height: auto; padding: 28px 7vw; }
  .painting-pair { gap: 16px; margin: 0; width: 100%; }
  .painting { width: calc((100% - 16px) / 2); height: auto; aspect-ratio: 325 / 406; }
  .learning { min-height: 0; padding: 48px 0; }
  .principles { min-height: 0; padding: 30px 0 36px; }
  .contact { height: 76.171875cqw; min-height: 320px; }
  .contact-background { object-fit: cover; }
  .contact-barcode { top: 40%; left: 5%; width: 90%; font-size: 10cqw; line-height: 1.45; }
  .contact-domain { top: calc(40% + 14cqw); left: auto; right: 7%; width: auto; font-size: clamp(18px, 3.3cqw, 26px); }
}
@media (max-width: 480px) {
  .terminal { font-size: 13px; line-height: 1.65; }
  .nav { gap: 24px; padding: 12px 24px; }
  .header { padding-top: 14px; }
  .hero-barcode { top: 41cqw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-barcode, .hero-person, .hero-copy { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .nav, .nav a, .nav a::after { transition: none; }
  .nav a:hover { transform: none; }
}