:root { --accent:#e5673f; --paper:#f3f1ea; --ink:#17181c; --mut:#6b6c72; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family:'Manrope',system-ui,sans-serif; background:var(--paper); color:var(--ink); overflow-x:hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; }
.reveal.in { animation: rise 0.7s cubic-bezier(0.2,0.7,0.2,1) forwards; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.navlink:hover { color: var(--ink); }
.pcard { transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(23,24,28,0.35); }
/* Portrait fallback (shows if assets/joji.png is missing) */
#heroImg { position:relative; z-index:2; display:block; width:100%; max-height:560px; object-fit:contain; object-position:bottom; mix-blend-mode:multiply; filter:contrast(1.02); }
#heroFallback { display:none; position:relative; z-index:2; aspect-ratio:3/4; width:100%; max-height:560px; border-radius:22px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, var(--paper)), var(--paper));
  place-items:center; }
#heroFallback span { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(72px,14vw,150px); letter-spacing:-0.04em; color:var(--ink); opacity:0.9; }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-media { order: -1; }
  .stat-strip { grid-template-columns: 1fr !important; }
  .job-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .nav-links a:not(.nav-cta) { display: none; }
  .about-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .about-sub { grid-template-columns: 1fr !important; }
}