:root {
  --paper: #fffdf7;
  --paper-deep: #fff5d9;
  --ink: #17233c;
  --muted: #5d687d;
  --line: #d8d9d2;
  --coral: #ff6e61;
  --coral-deep: #dc4d45;
  --yellow: #f7c948;
  --blue: #71a9ff;
  --blue-deep: #3d6edd;
  --lilac: #c6a8ff;
  --mint: #8fe3cb;
  --teal: #23ad9d;
  --purple: #6e56cf;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.58; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.055em; line-height: .98; }
ul { padding: 0; margin: 0; list-style: none; }
button { font: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.section-pad { position: relative; padding: 132px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.paper-texture { position: fixed; z-index: -2; inset: 0; opacity: .3; pointer-events: none; background-image: radial-gradient(rgba(23,35,60,.18) .65px, transparent .65px); background-size: 5px 5px; }
.ambient { position: fixed; z-index: -3; border-radius: 999px; filter: blur(1px); opacity: .55; pointer-events: none; animation: drift 15s ease-in-out infinite alternate; }
.ambient-one { width: 38vw; height: 38vw; top: 7vh; right: -12vw; background: radial-gradient(circle, rgba(113,169,255,.28), transparent 68%); }
.ambient-two { width: 45vw; height: 45vw; bottom: -25vw; left: -18vw; background: radial-gradient(circle, rgba(255,215,91,.22), transparent 69%); animation-delay: -8s; }
.page-progress { position: fixed; z-index: 100; inset: 0 auto auto 0; width: 100%; height: 5px; background: rgba(255,255,255,.52); }
#progress-bar { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--coral), var(--yellow), var(--teal), var(--blue)); transition: width .1s linear; }

/* navigation */
.site-header { position: fixed; z-index: 80; inset: 0 0 auto; padding: 18px 0; }
.nav-shell { width: min(var(--max), calc(100% - 32px)); min-height: 58px; margin: auto; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 20px; border: 1px solid rgba(23,35,60,.11); border-radius: 18px; background: rgba(255,253,247,.78); box-shadow: 0 10px 35px rgba(23,35,60,.07); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .94rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px 10px 10px 2px; color: var(--ink); background: var(--yellow); font-family: var(--display); font-size: 1rem; box-shadow: 3px 3px 0 var(--ink); transition: transform .25s ease; }
.brand:hover .brand-mark { transform: rotate(-10deg) translate(-1px, -1px); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.site-nav a { padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: .83rem; font-weight: 600; transition: color .2s, background .2s, transform .2s; }
.site-nav a:hover, .site-nav a.active { color: var(--ink); background: var(--paper-deep); transform: translateY(-1px); }
.nav-contact { margin-left: 10px; padding: 10px 13px; border-radius: 11px; background: var(--ink); color: white; font-size: .82rem; font-weight: 700; transition: transform .2s, background .2s; white-space: nowrap; }
.nav-contact:hover { background: var(--coral-deep); transform: translateY(-2px) rotate(-1deg); }
.menu-button { display: none; border: 0; background: transparent; cursor: pointer; }

/* shared sections */
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--muted); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.eyebrow-spark { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--mono); font-size: .65rem; letter-spacing: 0; }
.section-heading h2 { max-width: 710px; font-size: clamp(3rem, 5.5vw, 5.55rem); }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 60px; }
.split-heading .section-summary { margin-bottom: 6px; }
.section-summary { max-width: 330px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.mono-label { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .72s cubic-bezier(.22,.8,.25,1), transform .72s cubic-bezier(.22,.8,.25,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .14s; }

/* hero */
.hero { display: grid; min-height: min(850px, 100svh); padding-top: 154px; padding-bottom: 64px; align-items: center; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 44px; }
.hero h1 { max-width: 630px; font-size: clamp(4rem, 7.7vw, 7.6rem); }
.hero h1 em { font-style: normal; color: var(--coral); position: relative; }
.hero h1 em::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -7px; bottom: 5%; height: 27%; border-radius: 99px; background: var(--yellow); transform: rotate(-2deg); }
.hero-intro { max-width: 550px; margin-top: 28px; color: var(--muted); font-size: 1.12rem; line-height: 1.58; }
.hero-intro strong { color: var(--ink); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 13px; font-weight: 700; font-size: .9rem; transition: transform .23s ease, box-shadow .23s ease, background .23s ease; }
.button:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.button-coral { background: var(--coral); }
.button-plain { background: rgba(255,255,255,.5); }
.button-plain:hover { background: white; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--muted); font-family: var(--mono); font-size: .7rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(35,173,157,.4); animation: heartbeat 2s infinite; }
.hero-visual { min-height: 500px; display: grid; place-items: center; }
.orbit-card { isolation: isolate; position: relative; width: min(420px, 100%); aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 42% 58% 55% 45% / 44% 45% 55% 56%; background: linear-gradient(140deg, #fff2bf, #d8f5f2 59%, #bdd7ff); box-shadow: 13px 14px 0 var(--ink); overflow: hidden; animation: shape-shift 11s ease-in-out infinite alternate; }
.orbit-card::before { content: ''; position: absolute; inset: 12%; border-radius: inherit; background: repeating-linear-gradient(-45deg, rgba(23,35,60,.08) 0 1px, transparent 1px 10px); }
.core-shape { position: absolute; z-index: 3; top: 50%; left: 50%; width: 108px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 35% 65% 51% 49% / 38% 38% 62% 62%; background: var(--coral); color: var(--ink); font-size: 3.4rem; box-shadow: 7px 7px 0 var(--ink); transform: translate(-50%, -50%) rotate(12deg); animation: bob 4s ease-in-out infinite; }
.orbit { position: absolute; z-index: 2; top: 50%; left: 50%; border: 1.6px dashed rgba(23,35,60,.62); border-radius: 50%; transform: translate(-50%, -50%) rotate(-16deg); }
.orbit-outer { width: 85%; height: 48%; animation: spin 17s linear infinite; }
.orbit-inner { width: 50%; height: 80%; border-style: solid; opacity: .8; animation: spin-reverse 13s linear infinite; }
.orbit i { position: absolute; display: block; width: 17px; aspect-ratio: 1; border: 1.4px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.orbit-outer i:first-child { top: -9px; left: 17%; }
.orbit-outer i:last-child { right: 13%; bottom: -9px; background: var(--blue); }
.orbit-inner i { top: 24%; right: -9px; width: 14px; background: var(--mint); }
.visual-label { position: absolute; z-index: 4; padding: 8px 10px; border: 1.4px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 3px 3px 0 rgba(23,35,60,.7); font-family: var(--mono); font-size: .68rem; font-weight: 500; transform: rotate(-5deg); animation: tag-float 5s ease-in-out infinite; }
.visual-label span { margin-right: 5px; color: var(--coral-deep); font-size: .9rem; }
.label-code { top: 24%; left: 6%; }
.label-hardware { right: 5%; bottom: 26%; animation-delay: -1.6s; }
.label-ai { top: 17%; right: 14%; animation-delay: -3.2s; }
.sticker { position: absolute; z-index: 4; display: grid; place-items: center; text-align: center; line-height: 1.1; border: 1.5px solid var(--ink); font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .05em; box-shadow: 4px 4px 0 var(--ink); }
.sticker-top { right: 7%; bottom: 10%; width: 88px; height: 88px; border-radius: 50%; background: var(--lilac); transform: rotate(13deg); }
.sticker-top small { font-size: .59rem; margin-top: 3px; }
.sticker-bottom { left: 6%; bottom: 9%; padding: 8px 12px; border-radius: 5px 13px 8px 14px; background: var(--paper); transform: rotate(-7deg); }
.sticker-bottom span { font-size: .54rem; color: var(--muted); }
.sticker-bottom strong { font-family: var(--display); font-size: .93rem; letter-spacing: -.05em; }
.sparkle { position: absolute; z-index: 5; color: var(--ink); font-size: 1.05rem; animation: sparkle-pop 3s ease-in-out infinite; }
.scroll-prompt { position: absolute; bottom: 30px; left: max(24px, calc((100% - var(--max)) / 2)); display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.scroll-prompt i { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); font-style: normal; animation: bounce-down 1.8s ease-in-out infinite; }

/* about */
.about-section { background: linear-gradient(180deg, transparent, rgba(113,169,255,.07) 18%, transparent); }
.about-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 68px; margin-top: 58px; }
.about-story { max-width: 650px; }
.large-copy { font-family: var(--display); font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -.035em; line-height: 1.28; }
.about-story > p:not(.large-copy) { max-width: 570px; margin-top: 20px; color: var(--muted); }
.education-card { display: grid; grid-template-columns: 46px 1fr; gap: 15px; margin-top: 38px; padding: 21px; border: 1.5px solid var(--ink); border-radius: 16px 22px 16px 22px; background: var(--paper); box-shadow: 6px 6px 0 var(--yellow); }
.education-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50% 50% 12px 50%; background: var(--ink); color: var(--yellow); font-family: var(--display); font-size: 1.2rem; }
.education-detail { margin-top: 5px; color: var(--muted); font-size: .86rem; }
.course-tags { grid-column: 1 / -1; display: flex; gap: 7px; flex-wrap: wrap; margin-top: 1px; }
.course-tags span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-deep); font-family: var(--mono); font-size: .61rem; }
.stat-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.stat-card { position: relative; min-height: 180px; padding: 21px 19px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 19px; transition: transform .28s ease, box-shadow .28s ease; }
.stat-card:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: 7px 9px 0 var(--ink); }
.stat-number { display: block; font-family: var(--display); font-size: clamp(3.4rem, 4vw, 4.4rem); font-weight: 700; letter-spacing: -.09em; line-height: 1; }
.stat-card p { position: relative; z-index: 1; max-width: 155px; margin-top: 12px; font-size: .78rem; font-weight: 600; line-height: 1.35; }
.stat-arrow { position: absolute; right: 18px; bottom: 12px; font-size: 1.35rem; }
.stat-yellow { background: var(--yellow); }.stat-blue { background: var(--blue); }.stat-lilac { background: var(--lilac); }.stat-mint { background: var(--mint); }

/* skills */
.skills-section { border-top: 1px solid rgba(23,35,60,.1); }
.skills-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; }
.skills-main { padding: 30px; border: 1.5px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 10px 10px 0 var(--blue); }
.skills-intro { display: flex; align-items: center; gap: 13px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.skills-intro > div > p:last-child { margin-top: 3px; color: var(--muted); font-size: .83rem; }
.mini-orbit { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border: 1.5px dashed var(--ink); border-radius: 50%; color: var(--coral); font-size: 1.3rem; animation: spin-simple 10s linear infinite; }
.skill-meter { display: grid; grid-template-columns: 108px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .89rem; font-weight: 700; }
.meter-track { display: block; height: 9px; overflow: hidden; border-radius: 20px; background: #e6e5df; }
.meter-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--yellow)); transform-origin: left; animation: meter-grow 1.1s .35s cubic-bezier(.2,.8,.2,1) both; }
.skill-meter small { color: var(--muted); font-family: var(--mono); font-size: .58rem; font-weight: 400; }
.now-learning { display: flex; gap: 11px; align-items: flex-start; margin-top: 23px; padding: 16px; border-radius: 13px; background: #e8f9f4; }
.now-learning strong { font-size: .85rem; }.now-learning p { margin-top: 3px; color: var(--muted); font-size: .77rem; }
.learning-star { color: var(--teal); font-size: 1.1rem; animation: spin-simple 8s linear infinite; }
.skill-groups { display: grid; align-content: start; gap: 14px; }
.skill-cloud { position: relative; padding: 24px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease; }
.skill-cloud::after { content: '✦'; position: absolute; right: 21px; top: 12px; opacity: .38; font-size: 2rem; }
.skill-cloud:hover { transform: translateX(6px); box-shadow: -6px 6px 0 var(--ink); }
.skill-cloud > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.skill-cloud span { padding: 7px 9px; border: 1px solid rgba(23,35,60,.35); border-radius: 999px; background: rgba(255,255,255,.45); font-size: .76rem; font-weight: 600; }
.cloud-teal { background: var(--mint); }.cloud-coral { background: #ffb5aa; }.cloud-yellow { background: #ffe890; }

/* flagship */
.flagship-section { overflow: hidden; background: var(--ink); color: white; }
.flagship-section::before { content: ''; position: absolute; width: 55vw; height: 55vw; right: -18vw; top: -33vw; border-radius: 50%; background: radial-gradient(circle, rgba(113,169,255,.3), transparent 66%); }
.flagship-section .eyebrow { color: #c6d1e7; }.flagship-section .eyebrow-spark { color: var(--ink); background: var(--yellow); }
.flagship-card { position: relative; z-index: 1; margin-top: 58px; padding: 34px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 26px; background: rgba(255,255,255,.06); box-shadow: 0 26px 50px rgba(0,0,0,.17); }
.flagship-card::after { content: ''; position: absolute; inset: auto -60px -72px auto; width: 230px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.flagship-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.18); }
.project-label { color: #b7c3d8; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }.live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 99px; background: rgba(143,227,203,.18); color: var(--mint); font-family: var(--mono); font-size: .64rem; }.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: heartbeat 2s infinite; }
.flagship-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 46px; align-items: center; padding: 44px 0; }
.flagship-copy h3 { max-width: 600px; font-size: clamp(2.35rem, 4.1vw, 4.25rem); }.flagship-copy > p { max-width: 650px; margin-top: 22px; color: #c6d1e7; font-size: 1rem; }
.idea-quote { display: flex; gap: 11px; align-items: center; margin-top: 29px; padding: 13px 17px; border-left: 3px solid var(--yellow); background: rgba(255,255,255,.06); }.idea-quote span { color: var(--yellow); font-family: Georgia, serif; font-size: 2.2rem; line-height: 1; }.idea-quote p { color: white; font-family: var(--display); font-size: 1rem; letter-spacing: -.02em; }
.study-window { position: relative; z-index: 2; overflow: hidden; border: 1.5px solid rgba(255,255,255,.8); border-radius: 16px; background: #f8fbff; box-shadow: 8px 9px 0 var(--yellow); color: var(--ink); transform: rotate(2.5deg); transition: transform .3s ease; }.study-window:hover { transform: rotate(0) translateY(-4px); }
.window-chrome { display: flex; align-items: center; gap: 5px; padding: 11px; border-bottom: 1px solid #cfd8e7; background: #e8effa; }.window-chrome i { width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }.window-chrome i:nth-child(2) { background: var(--yellow); }.window-chrome i:nth-child(3) { background: var(--mint); }.window-chrome span { margin-left: 4px; color: #66718a; font-family: var(--mono); font-size: .57rem; }.study-content { padding: 24px; }.study-question { font-family: var(--display); font-size: 1.03rem; font-weight: 700; }.study-answer { margin-top: 16px; padding: 14px; border-radius: 11px; background: #e3f9f3; }.study-answer > span { display: inline-grid; width: 22px; aspect-ratio: 1; place-items: center; border-radius: 6px; background: var(--teal); color: white; font-family: var(--mono); font-size: .52rem; }.study-answer p { margin-top: 8px; font-size: .75rem; line-height: 1.5; }.study-answer small { display: block; margin-top: 8px; color: var(--teal); font-family: var(--mono); font-size: .57rem; }.study-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }.study-chips span { padding: 5px 7px; border: 1px solid #bfccdc; border-radius: 5px; font-family: var(--mono); font-size: .55rem; }
.project-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.18); }.project-details .mono-label, .roadmap-wrap .mono-label { color: #b7c3d8; }.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }.tag-list span { padding: 6px 8px; border-radius: 6px; background: rgba(143,227,203,.15); color: var(--mint); font-size: .69rem; font-weight: 600; }.tag-list-dark span { border: 1px solid rgba(255,255,255,.2); background: transparent; color: #dbe5f3; font-family: var(--mono); font-size: .62rem; font-weight: 400; }
.roadmap-wrap { padding-top: 25px; border-top: 1px solid rgba(255,255,255,.18); }.roadmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin-top: 18px; }.roadmap-step { position: relative; min-height: 86px; padding-top: 13px; border-top: 2px solid rgba(255,255,255,.25); }.roadmap-step::before { content: ''; position: absolute; top: -5px; width: 8px; aspect-ratio: 1; border-radius: 50%; background: #8b99b2; }.roadmap-step.active { border-color: var(--yellow); }.roadmap-step.active::before { background: var(--yellow); box-shadow: 0 0 0 5px rgba(247,201,72,.16); }.roadmap-step b { display: block; color: var(--yellow); font-family: var(--mono); font-size: .69rem; }.roadmap-step span { display: block; margin-top: 6px; color: #c6d1e7; font-size: .67rem; line-height: 1.35; }

/* projects */
.project-list { display: grid; gap: 18px; }.project-row { display: grid; grid-template-columns: 40px 78px minmax(0,1fr) 185px; gap: 21px; align-items: start; padding: 30px; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--paper); transition: transform .3s ease, box-shadow .3s ease; }.project-row:hover { transform: translateY(-5px); box-shadow: 10px 10px 0 var(--ink); }.project-number { padding-top: 5px; font-family: var(--mono); font-size: .68rem; }.project-symbol { width: 62px; aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 18px 18px 18px 4px; font-family: var(--display); font-size: 1.9rem; transform: rotate(-5deg); }.project-info h3 { font-size: clamp(1.55rem, 2.5vw, 2.1rem); }.project-info > p { max-width: 630px; margin-top: 12px; color: var(--muted); font-size: .92rem; }.project-info ul { display: grid; gap: 7px; margin-top: 16px; }.project-info li { position: relative; padding-left: 16px; color: var(--muted); font-size: .8rem; }.project-info li::before { content: '✦'; position: absolute; left: 0; color: var(--coral-deep); font-size: .58rem; top: 3px; }.project-tags { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; justify-content: flex-end; }.project-tags span { padding: 5px 7px; border: 1px solid rgba(23,35,60,.3); border-radius: 999px; background: rgba(255,255,255,.43); font-family: var(--mono); font-size: .59rem; }.project-orange { background: #ffd6c0; }.project-orange .project-symbol { background: var(--coral); }.project-blue { background: #cedfff; }.project-blue .project-symbol { background: var(--yellow); }.project-lime { background: #dff5a9; }.project-lime .project-symbol { background: var(--mint); }

/* achievements */
.achievements-section { background: linear-gradient(180deg, rgba(198,168,255,.15), rgba(255,253,247,.85)); }.achievements-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: center; }.achievements-layout .section-summary { margin-top: 24px; }.achievement-board { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.achievement-card { position: relative; min-height: 175px; padding: 22px 20px 18px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); font-size: .78rem; line-height: 1.48; transition: transform .25s ease; }.achievement-card:hover { transform: rotate(1.5deg) translateY(-4px); }.achievement-card strong { font-size: .88rem; }.achievement-icon { display: grid; place-items: center; width: 33px; aspect-ratio: 1; margin-bottom: 16px; border: 1px solid var(--ink); border-radius: 50%; background: rgba(255,255,255,.5); font-size: .9rem; }.card-coral { background: #ffb7ab; transform: rotate(-2deg); }.card-yellow { background: #ffe995; transform: rotate(1deg); }.card-lilac { background: #d9c5ff; transform: rotate(1deg); }.card-mint { background: #b5eedc; transform: rotate(-1deg); }

/* contact/footer */
.contact-section { padding-top: 75px; }.contact-card { position: relative; overflow: hidden; padding: 60px; border: 1.5px solid var(--ink); border-radius: 28px 28px 7px 28px; background: linear-gradient(128deg, var(--purple), #5b8de5 57%, #70cbb8); color: white; box-shadow: 12px 12px 0 var(--yellow); }.contact-card > *:not(.contact-flare) { position: relative; z-index: 2; }.contact-flare { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); }.flare-one { width: 340px; aspect-ratio: 1; right: -105px; top: -108px; background: radial-gradient(circle, rgba(255,235,144,.47), transparent 67%); animation: spin-simple 20s linear infinite; }.flare-two { width: 160px; aspect-ratio: 1; left: 42%; bottom: -100px; background: rgba(255,110,97,.32); }.eyebrow-light { color: rgba(255,255,255,.8); }.eyebrow-light .eyebrow-spark { background: var(--yellow); color: var(--ink); }.contact-card h2 { font-size: clamp(3.5rem, 7vw, 6.8rem); }.contact-intro { max-width: 460px; margin-top: 21px; color: rgba(255,255,255,.85); font-size: 1.12rem; }.contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 37px; max-width: 790px; }.contact-links a { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; min-height: 76px; padding: 14px 15px; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: rgba(255,255,255,.11); font-size: .82rem; transition: background .2s, transform .2s; }.contact-links a:hover { background: rgba(255,255,255,.23); transform: translateY(-3px); }.contact-key { grid-column: 1 / 2; align-self: end; color: rgba(255,255,255,.65); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; }.contact-links a > span:not(.contact-key) { font-weight: 700; overflow-wrap: anywhere; }.contact-links b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.1rem; }footer { padding: 37px 0 46px; }footer .wrap { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; color: var(--muted); font-family: var(--mono); font-size: .66rem; }footer i { color: var(--coral); font-style: normal; }footer a { color: var(--ink); font-weight: 500; }

/* movement */
@keyframes drift { to { transform: translate(4vw, 4vh) scale(1.08); } } @keyframes heartbeat { 0%, 100% { box-shadow: 0 0 0 0 rgba(35,173,157,.42); } 55% { box-shadow: 0 0 0 8px rgba(35,173,157,0); } } @keyframes shape-shift { 0% { border-radius: 42% 58% 55% 45% / 44% 45% 55% 56%; } 100% { border-radius: 58% 42% 43% 57% / 55% 60% 40% 45%; } } @keyframes bob { 50% { transform: translate(-50%, -56%) rotate(-7deg); } } @keyframes spin { to { transform: translate(-50%, -50%) rotate(344deg); } } @keyframes spin-reverse { to { transform: translate(-50%, -50%) rotate(-376deg); } } @keyframes spin-simple { to { transform: rotate(360deg); } } @keyframes tag-float { 50% { translate: 0 -8px; } } @keyframes sparkle-pop { 0%,100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(40deg); } } @keyframes bounce-down { 50% { transform: translateY(5px); } } @keyframes meter-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 970px) { .site-nav { gap: 0; }.site-nav a { padding-inline: 7px; }.hero-grid, .about-layout, .skills-layout, .achievements-layout { grid-template-columns: 1fr; }.hero { min-height: auto; padding-top: 160px; }.hero-copy { max-width: 710px; }.hero-visual { min-height: 380px; max-width: 490px; justify-self: end; width: 100%; }.about-layout, .skills-layout { gap: 44px; }.stat-stack { max-width: 620px; }.flagship-grid { grid-template-columns: 1fr; }.study-window { max-width: 420px; width: 100%; justify-self: end; }.project-row { grid-template-columns: 35px 65px minmax(0,1fr); }.project-tags { grid-column: 3; justify-content: flex-start; }.achievements-layout { gap: 45px; }.achievements-layout .section-summary { max-width: 440px; } }
@media (max-width: 760px) { .wrap { width: min(100% - 32px, var(--max)); }.section-pad { padding: 86px 0; }.site-header { padding: 10px 0; }.nav-shell { min-height: 55px; }.brand { font-size: .84rem; }.brand-mark { width: 28px; height: 28px; }.menu-button { display: grid; gap: 4px; margin-left: auto; padding: 10px; }.menu-line { display: block; width: 19px; height: 2px; border-radius: 3px; background: var(--ink); transition: transform .22s ease, opacity .22s ease; }.menu-button[aria-expanded='true'] .menu-line:first-child { transform: translateY(6px) rotate(45deg); }.menu-button[aria-expanded='true'] .menu-line:nth-child(2) { opacity: 0; }.menu-button[aria-expanded='true'] .menu-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }.nav-contact { display: none; }.site-nav { position: absolute; top: 63px; right: 0; left: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(23,35,60,.11); border-radius: 16px; background: rgba(255,253,247,.96); box-shadow: 0 10px 35px rgba(23,35,60,.12); transform: translateY(-9px) scale(.98); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }.site-nav.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }.site-nav a { padding: 10px; }.hero { padding-top: 125px; padding-bottom: 100px; }.hero-grid { gap: 18px; }.hero h1 { font-size: clamp(3.65rem, 16vw, 5.5rem); }.hero-intro { margin-top: 23px; font-size: 1rem; }.hero-visual { min-height: 330px; justify-self: center; }.orbit-card { width: min(335px, 88vw); }.scroll-prompt { display: none; }.section-heading h2 { font-size: clamp(2.9rem, 14vw, 4.5rem); }.split-heading { display: block; margin-bottom: 40px; }.split-heading .section-summary { margin-top: 20px; }.stat-stack { grid-template-columns: 1fr 1fr; }.stat-card { min-height: 155px; }.stat-number { font-size: 3.3rem; }.skills-main { padding: 22px 18px; box-shadow: 6px 6px 0 var(--blue); }.skill-meter { grid-template-columns: 90px 1fr; }.skill-meter small { display: none; }.flagship-card { margin-top: 40px; padding: 21px 17px; border-radius: 20px; }.flagship-grid { gap: 30px; padding: 31px 0; }.project-details { grid-template-columns: 1fr; gap: 22px; }.roadmap { grid-template-columns: repeat(2, 1fr); gap: 9px 17px; }.roadmap-step { min-height: 68px; }.project-row { grid-template-columns: 34px 1fr; gap: 14px; padding: 21px 17px; }.project-symbol { grid-column: 2; grid-row: 1; justify-self: end; width: 50px; font-size: 1.4rem; }.project-info { grid-column: 1 / -1; }.project-tags { grid-column: 1 / -1; justify-content: flex-start; }.achievement-board { gap: 10px; }.achievement-card { min-height: 190px; padding: 18px 14px; font-size: .72rem; }.achievement-card strong { font-size: .78rem; }.contact-section { padding-top: 35px; }.contact-card { padding: 41px 21px; box-shadow: 7px 8px 0 var(--yellow); }.contact-card h2 { font-size: clamp(3.25rem, 15vw, 4.6rem); }.contact-links { grid-template-columns: 1fr; margin-top: 30px; }.contact-links a { min-height: 64px; }.contact-intro { font-size: 1rem; } }
@media (max-width: 420px) { .brand > span:last-child { display: none; }.nav-shell { gap: 8px; }.hero-actions { display: grid; }.button { width: 100%; }.stat-stack { grid-template-columns: 1fr; }.stat-card { min-height: 130px; }.achievement-board { grid-template-columns: 1fr; }.achievement-card { min-height: auto; }.education-card { grid-template-columns: 38px 1fr; padding: 15px; }.education-icon { width: 38px; height: 38px; }.course-tags { gap: 5px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.ambient, .pulse-dot, .orbit-card, .core-shape, .orbit, .visual-label, .mini-orbit, .learning-star, .live-badge i, .scroll-prompt i, .sparkle, .flare-one { animation: none !important; }.reveal { opacity: 1; transform: none; transition: none; }.meter-track i { animation: none; }.button, .project-row, .stat-card, .skill-cloud, .achievement-card, .contact-links a, .study-window { transition: none; } }


/* accessibility refinements */
.contact-card { background: linear-gradient(128deg, #36448c, #304783 57%, #17776d); }
.contact-intro, .contact-key { color: #fff; }
.contact-links a { background: rgba(0, 0, 0, .18); }
.contact-links a:hover { background: rgba(0, 0, 0, .30); }
.project-info > p, .project-info li { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #progress-bar, .site-nav, .menu-line, .brand-mark, .site-nav a, .nav-contact, .button, .project-row, .stat-card, .skill-cloud, .achievement-card, .contact-links a, .study-window { transition: none !important; }
  .brand:hover .brand-mark, .site-nav a:hover, .site-nav a.active, .nav-contact:hover, .button:hover, .stat-card:hover, .skill-cloud:hover, .study-window:hover, .project-row:hover, .achievement-card:hover, .contact-links a:hover, .menu-button[aria-expanded='true'] .menu-line:first-child, .menu-button[aria-expanded='true'] .menu-line:nth-child(3) { transform: none !important; }
}

/* new project details and status badges */
.completed-badge { background: rgba(143, 227, 203, .18); color: #8fe3cb; }
.project-title-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-status { display: inline-flex; align-items: center; padding: 5px 9px; flex: none; border: 1px solid rgba(23,35,60,.32); border-radius: 999px; background: rgba(255,255,255,.55); font-family: var(--mono); font-size: .6rem; line-height: 1.3; }
.status-progress { background: var(--yellow); }
.project-violet { background: #dfd3ff; }
.project-violet .project-symbol { background: #b99aff; }
.brain-symbol { font-family: var(--body); font-size: 2rem; }
.watpass-symbol { background: var(--mint) !important; font-family: var(--display); font-size: 2rem; font-weight: 700; }
.project-extra { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(23,35,60,.18); }
.resume-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.resume-feature-grid .mono-label, .resume-roadmap .mono-label { margin-bottom: 10px; }
.resume-feature-grid ul { display: grid; gap: 8px; }
.resume-feature-grid li { position: relative; padding-left: 16px; color: var(--ink); font-size: .82rem; line-height: 1.45; }
.resume-feature-grid li::before { position: absolute; top: 1px; left: 0; color: var(--coral-deep); content: '✦'; font-size: .6rem; }
.resume-feature-grid p:not(.mono-label) { color: var(--ink); font-size: .82rem; }
.resume-feature-grid code, .run-instructions code { padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,.68); font-family: var(--mono); font-size: .76em; }
.honesty-note { margin-top: 13px; padding: 11px 13px; border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.52); font-size: .75rem; line-height: 1.5; }
.run-instructions { margin-top: 21px; border: 1px solid rgba(23,35,60,.28); border-radius: 12px; background: rgba(255,255,255,.52); }
.run-instructions summary { padding: 12px 15px; cursor: pointer; font-size: .82rem; font-weight: 700; }
.run-instructions pre { margin: 0 13px 10px; padding: 12px; overflow-x: auto; border-radius: 8px; background: var(--ink); color: #f8fbff; font-size: .72rem; line-height: 1.55; }
.run-instructions pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
.run-instructions > p { margin: 0 13px 11px; color: var(--muted); font-size: .74rem; }
.resume-roadmap { margin-top: 20px; }
.resume-roadmap-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.resume-roadmap-tags span { padding: 6px 8px; border: 1px solid rgba(23,35,60,.27); border-radius: 999px; background: rgba(255,255,255,.5); font-size: .71rem; font-weight: 600; }
.roadmap-step.done { border-color: rgba(143,227,203,.72); }
.roadmap-step.done::before { background: var(--mint); }
.roadmap-step.done b { color: var(--mint); }
@media (max-width: 760px) {
  .project-title-line { align-items: flex-start; flex-direction: column; }
  .resume-feature-grid { grid-template-columns: 1fr; gap: 19px; }
}


/* approved immersive polish: progressive reveals, layered CSS depth, and safe fallbacks */
.reveal { opacity: 1; transform: none; transition: opacity .72s cubic-bezier(.22,.8,.25,1), transform .72s cubic-bezier(.22,.8,.25,1); }
html.motion-ready .reveal { opacity: 0; transform: translateY(34px); }
html.motion-ready .reveal.in-view { opacity: 1; transform: translateY(0); }
.hero-visual { perspective: 1200px; perspective-origin: 50% 48%; }
.orbit-card { transform-style: preserve-3d; backface-visibility: hidden; }
.orbit-card::before { transform: translateZ(8px); }
.orbit-card::after { content: ''; position: absolute; z-index: 1; inset: -25%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at 32% 28%, rgba(255,255,255,.76), rgba(255,255,255,.08) 29%, transparent 58%); transform: translateZ(18px); mix-blend-mode: screen; }
.orbit { translate: 0 0 29px; }
.core-shape { transform: translate3d(-50%, -50%, 56px) rotate(12deg); backface-visibility: hidden; }
.visual-label { translate: 0 0 34px; }
.sticker { translate: 0 0 23px; }
.sparkle { translate: 0 0 62px; }
@keyframes bob { 50% { transform: translate3d(-50%, -56%, 56px) rotate(-7deg); } }
.project-row { perspective: 1050px; transform-style: preserve-3d; }
.project-row:hover { transform: perspective(1050px) translateY(-5px) rotateX(.55deg); }
.project-row:hover .project-symbol { translate: 0 0 18px; }
.project-row:hover .project-info, .project-row:hover .project-tags { translate: 0 0 6px; }
.project-symbol, .project-info, .project-tags { transition: translate .3s ease; }
.project-list .project-row:nth-child(2) { transition-delay: .05s; }
.project-list .project-row:nth-child(3) { transition-delay: .1s; }
.project-list .project-row:nth-child(4) { transition-delay: .15s; }
.project-list .project-row:nth-child(5) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, html.motion-ready .reveal, html.motion-ready .reveal.in-view { opacity: 1 !important; transform: none !important; }
  .orbit-card, .orbit, .core-shape, .visual-label, .sticker, .sparkle, .project-row:hover, .project-row:hover .project-symbol, .project-row:hover .project-info, .project-row:hover .project-tags { translate: none !important; transform: none !important; }
  #progress-bar { transition: none !important; }
}

/* Preserve the 3D scene while keeping highlights clipped to the organic card silhouette. */
.orbit-card { overflow: visible; }
.orbit-card::before, .orbit-card::after { border-radius: inherit; }
.orbit-card::after { inset: 0; }

/* AA text accents: adjust text values without muting the bright background palette. */
:root { --muted: #4d5a71; --coral-deep: #a9342e; }
.hero h1 em { color: #c4423b; }
.window-chrome span { color: #536077; }
.study-answer > span { color: var(--ink); }
.study-answer small { color: #0b6b5d; }
.eyebrow-light { color: #fff; }

/* accessibility and low-cost motion refinements from independent review */
.skip-link { position: fixed; z-index: 120; top: 12px; left: 12px; padding: 11px 15px; border: 1px solid var(--yellow); border-radius: 9px; background: var(--ink); color: #fff; font-weight: 700; transform: translateY(calc(-100% - 20px)); transition: transform .18s ease; }
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--yellow); outline-offset: 3px; }
.contact-card :focus-visible { outline-color: #fff; outline-offset: 4px; }
#progress-bar { width: 100%; transform: scaleX(0); transform-origin: left center; transition: transform .1s linear; }
.orbit-card { animation: none; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); opacity: 1; } 55% { transform: scale(1.25); opacity: .68; } }

/* Portrait-led hero and scroll-driven pixel dissolve */
.hero-portrait{position:relative!important;min-height:540px;display:grid;place-items:center;isolation:isolate;perspective:1000px;overflow:visible!important}
.portrait-backdrop{position:absolute;inset:7% 2% 3%;z-index:-1;border:1px solid #8b9f7b40;border-radius:48% 48% 8px 8px;background:radial-gradient(ellipse at 50% 38%,#e1ead7 0%,#edf0e5 45%,transparent 73%);box-shadow:inset 0 0 60px #ffffff75}
.portrait-backdrop:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#66884b17 1px,transparent 1px),linear-gradient(90deg,#66884b17 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse,black,transparent 72%);transform:rotate(-7deg)}
.portrait-frame{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:2;transform-style:preserve-3d;will-change:transform;transition:opacity .12s linear}
.portrait-frame img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 24px #1f2e1d25);user-select:none;-webkit-user-drag:none}
#pixel-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0;transition:opacity .18s}
.hero-portrait.is-dispersing #pixel-canvas{opacity:1}
.portrait-float{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;padding:11px 13px;background:#fbfaf0d9;backdrop-filter:blur(12px);border:1px solid #d7dfcd;box-shadow:0 12px 28px #24331b13;font:500 8px/1.2 'DM Mono',monospace;letter-spacing:.7px;color:#5e6b58;animation:portrait-float 5.5s ease-in-out infinite}
.portrait-code{top:18%;left:-1%;transform:rotate(-4deg)}.portrait-ai{top:53%;right:-1%;transform:rotate(4deg);animation-delay:-2.1s}.portrait-ai span{font-size:17px;color:#527642}.mini-dot{width:6px;height:6px;background:#66884b;border-radius:50%}
.portrait-caption{position:absolute;z-index:5;bottom:8px;left:4%;right:4%;display:flex;justify-content:space-between;font:500 8px 'DM Mono',monospace;letter-spacing:1px;color:#65715f}
.pixel-hint{position:absolute;bottom:-22px;left:4%;z-index:5;display:flex;gap:9px;align-items:center;font:500 8px 'DM Mono',monospace;letter-spacing:1px;color:#687164}.pixel-hint span{font-size:16px;color:#42642e}
@keyframes portrait-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
[data-theme="dark"] .portrait-backdrop{background:radial-gradient(ellipse at 50% 38%,#263323 0%,#151b14 50%,transparent 73%);border-color:#839c6b44}
[data-theme="dark"] .portrait-float{background:#141a13dd;border-color:#35432f;color:#c0c9b8}
[data-theme="dark"] .portrait-caption,[data-theme="dark"] .pixel-hint{color:#b3bea9}
@media(max-width:800px){.hero-portrait{min-height:460px;width:100%;margin-top:10px}.portrait-code{left:0}.portrait-ai{right:0}}
@media(max-width:520px){.hero-portrait{min-height:390px}.portrait-float{font-size:7px;padding:8px 9px}.portrait-code{top:13%}.portrait-ai{top:56%}.portrait-caption{font-size:7px}}
@media(prefers-reduced-motion:reduce){.portrait-float{animation:none!important}#pixel-canvas{display:none!important}}


/* Centered portrait with editorial type layered across the image */
.hero-centered{display:block;padding-top:34px;padding-bottom:62px;overflow:hidden}
.centered-hero-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.centered-eyebrow{justify-content:center;margin:0 0 0;position:relative;z-index:8}
.centered-portrait{width:100%;max-width:1120px;height:min(58vw,650px);min-height:500px;max-height:680px;margin:0 auto;position:relative;display:grid;place-items:center;isolation:isolate;overflow:visible}
.centered-portrait .portrait-backdrop{position:absolute;left:20%;right:20%;top:8%;bottom:5%;border-radius:50% 50% 3px 3px;background:radial-gradient(ellipse at 50% 45%,#e3ead9 0%,#eef0e7 53%,transparent 76%);border:1px solid #d6deca;z-index:-2}
.centered-portrait .portrait-frame{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;z-index:3;transition:opacity .08s linear;will-change:opacity,transform}
.centered-portrait .portrait-frame img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 30px #15231a20);position:relative;z-index:3}
.centered-portrait #pixel-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .1s linear}
.centered-portrait.is-dispersing #pixel-canvas{opacity:1}
.centered-portrait .portrait-float{z-index:7}
.hero-overprint{position:absolute;left:0;right:0;z-index:6;pointer-events:none;white-space:nowrap;font-weight:850;line-height:.78;letter-spacing:-.075em;color:#18233d;mix-blend-mode:multiply}
.hero-overprint-top{top:17%;font-size:clamp(80px,15vw,190px)}
.hero-overprint-bottom{bottom:13%;font-size:clamp(18px,3vw,34px);letter-spacing:.2em;color:#47683a}
.centered-portrait .portrait-code{left:7%;top:31%;transform:rotate(-4deg);z-index:8}
.centered-portrait .portrait-ai{right:7%;top:57%;transform:rotate(4deg);z-index:8}
.centered-portrait .portrait-caption{left:20%;right:20%;bottom:5%;z-index:8;display:flex;justify-content:space-between;border-top:1px solid #bdc9b4;border-bottom:1px solid #bdc9b4;padding:8px 0;background:#f8f7f0a6}
.centered-portrait .pixel-hint{left:calc(50% - 145px);bottom:-24px;z-index:8;white-space:nowrap}
.centered-hero-copy{max-width:690px;margin:27px auto 0;position:relative;z-index:9}
.centered-hero-copy h1{font-size:clamp(44px,6vw,70px);line-height:1.02;letter-spacing:-.055em;margin:0;font-weight:750}
.centered-hero-copy h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#47683a}
.centered-hero-copy>p{max-width:600px;margin:17px auto 22px;color:var(--ink-muted,#526078);font-size:15px;line-height:1.8}
.centered-hero-copy .hero-actions{justify-content:center}
.centered-hero-copy .hero-note{justify-content:center;margin-top:24px}
body[data-theme="dark"] .hero-overprint{color:#e8ecdf;mix-blend-mode:screen}
body[data-theme="dark"] .hero-overprint-bottom{color:#bdd5a9}
body[data-theme="dark"] .centered-portrait .portrait-backdrop{background:radial-gradient(ellipse,#2a3825 0%,#1c241a 58%,transparent 77%);border-color:#384a32}
body[data-theme="dark"] .centered-portrait .portrait-caption{background:#101610a6;border-color:#45543e}
@media(max-width:700px){
 .hero-centered{padding-top:27px;padding-bottom:52px}
 .centered-portrait{height:125vw;min-height:430px;max-height:570px}
 .centered-portrait .portrait-backdrop{left:8%;right:8%;top:10%;bottom:6%}
 .hero-overprint-top{top:22%;font-size:clamp(55px,17vw,110px)}
 .hero-overprint-bottom{bottom:15%;font-size:clamp(13px,3.7vw,21px);letter-spacing:.13em}
 .centered-portrait .portrait-code{left:-1%;top:29%;font-size:8px;padding:9px}
 .centered-portrait .portrait-ai{right:-1%;top:56%;font-size:8px;padding:9px}
 .centered-portrait .portrait-caption{left:8%;right:8%;font-size:7px;letter-spacing:.5px}
 .centered-portrait .pixel-hint{left:calc(50% - 135px);font-size:7px}
 .centered-hero-copy{margin-top:29px}
 .centered-hero-copy h1{font-size:clamp(40px,10vw,56px)}
 .centered-hero-copy>p{font-size:12px}
}

/* Resumind project card layout refinement */
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.project-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 1.5px solid var(--ink); border-radius: 999px; background: rgba(255,255,255,.58); color: var(--ink); font-family: var(--mono); font-size: .68rem; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.project-links a:hover { transform: translateY(-2px); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.project-violet .project-symbol { display: grid; place-items: center; font-family: var(--display); font-size: 2.1rem; font-weight: 800; }
@media (max-width: 760px) { .project-links { grid-column: 1 / -1; } }