/* Shared rhythm: clear horizontal sections, readable type, compact supporting content. */
:root { --space-section:64px; }
.section { position:relative; padding-block:64px; border-top:1px solid var(--border); }
.section::before { content:none; }
.section__header { margin-bottom:24px; text-align:left; }
.section__eyebrow { font-size:12px; letter-spacing:.14em; margin-bottom:8px; }
.section__title { font-size:clamp(30px,3.3vw,42px); font-weight:600; letter-spacing:-.045em; line-height:1.12; text-align:left; }
.section__header .section__subtitle { max-width:52ch; margin:10px 0 0; font-size:15px; line-height:1.6; }
.nav__logo { font-size:27px; letter-spacing:-.055em; }
.nav__link { font-size:13px; }
.nav::after { content:''; position:absolute; bottom:-1px; left:0; height:2px; width:100%; background:linear-gradient(90deg,#538af9,#9b7aea); transform:scaleX(var(--reading-progress,0)); transform-origin:left; pointer-events:none; }

/* Original ribbon animation, with a shorter opening composition. */
.hero { min-height:0; padding:112px 0 52px; border-bottom:0; }
.hero__content { max-width:1000px; }
.hero__greeting { margin-bottom:12px; letter-spacing:.16em; }
.hero__name { margin-bottom:12px; font-size:clamp(42px,6.1vw,78px); letter-spacing:-.05em; line-height:1.05; }
.hero__title { margin-bottom:12px; font-size:22px; letter-spacing:-.02em; }
.hero__current { margin-bottom:16px; }
.hero__tagline { max-width:630px; font-size:16px; line-height:1.65; margin-bottom:20px; text-wrap:balance; }
.hero__stats { gap:42px; margin-bottom:24px; }
.hero__stat-number { font-size:29px; letter-spacing:-.035em; }
.hero__stat-label { font-size:12px; }
.hero__cta { gap:12px; }
.hero__cta .btn { min-height:44px; padding:10px 20px; font-size:14px; }
.hero__cta .btn--primary { box-shadow:0 5px 20px -10px #4e6cf6; }
.hero__cta .btn:last-child { border-color:transparent; }
.hero__scroll-indicator { display:none; }
.hero__motion-toggle { bottom:10px; font-size:12px; }

/* Sections have distinct surfaces and an aligned editorial rail. */
.about,.skills,.recognition { background:var(--bg-secondary); }
.about__grid { display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; align-items:center; }
.about__photo-frame { width:180px; max-width:100%; border-radius:16px; margin:0; border:1px solid var(--border-light); }
.about__photo { aspect-ratio:1; object-fit:cover; }
.about__text p { font-size:14px; line-height:1.7; margin-bottom:12px; }
.about__text p:first-child { font-size:17px; line-height:1.6; color:var(--text); letter-spacing:-.015em; }
.about__stats { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); gap:26px; }
.about__stat-number { font-size:24px; }
.about__stat-label { font-size:12px; }

.projects>.container>.section__header { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; column-gap:32px; }
.projects .section__eyebrow { width:100%; }
.projects .section__subtitle { max-width:48ch; margin:0; font-size:14px; }
.project-jump { position:static; display:flex; flex-wrap:wrap; width:100%; margin-bottom:28px; padding:0 0 12px; gap:4px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:none; box-shadow:none; backdrop-filter:none; overflow:visible; }
.project-jump__link { min-height:42px; border-color:transparent; border-radius:8px; padding-inline:14px; font-size:13px; }
.project-jump__link[aria-current='location'] { background:var(--surface); color:var(--text); border-color:var(--border); }
.project-jump__link[aria-current='location'] span { color:var(--accent-text); }

.skills__categories { gap:0; }
.skills__category { display:grid; grid-template-columns:136px minmax(0,1fr); gap:18px; padding:12px 0; border-bottom:1px solid var(--border); align-items:center; }
.skills__category-title { margin:0; font-size:12px; letter-spacing:.07em; text-align:left; }
.skills__grid { display:flex; flex-wrap:wrap; gap:6px; width:100%; max-width:none; margin:0; }
.skill-card { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:7px; padding:7px 10px; background:var(--bg); border:1px solid var(--border); border-radius:7px; }
.skill-card__icon { width:17px; height:17px; margin:0; }
.skill-card__name { font-size:12px; }
.recent-stack { display:flex; align-items:baseline; gap:18px; width:100%; max-width:none; margin:18px 0 0; padding:0; border:0; border-radius:0; background:none; }
.recent-stack h3 { flex:none; font-size:13px; margin:0; }
.recent-stack ul { margin:0; }
.recent-stack .experience__technologies { margin:0; gap:6px; }

.timeline { max-width:none; width:100%; margin:0; padding-left:24px; }
.timeline::before { left:4px; width:1px; }
.timeline__dot { left:-25px; width:11px; height:11px; top:5px; }
.timeline__item { margin-bottom:22px; }
.timeline__content { padding:0 0 20px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
.timeline__content:hover { border-color:var(--border); background:transparent; box-shadow:none; }
.timeline__item--current .timeline__content { padding:18px 20px; border:1px solid var(--border); border-radius:12px; background:var(--bg-secondary); }
.timeline__title { font-size:19px; line-height:1.3; letter-spacing:-.02em; }
.timeline__desc { font-size:14px; line-height:1.6; }
.timeline__company { margin-top:4px; font-size:13px; }
.timeline__date { font-size:12px; }
.experience__subhead { max-width:none; margin:24px 0 18px; font-size:18px; }
.career-details { margin-top:12px; }
.career-details summary { width:fit-content; color:var(--accent-text); font-size:13px; cursor:pointer; min-height:32px; line-height:32px; }
.career-details .timeline__highlights { margin-top:10px; }
.recognition__grid { gap:16px; }
.recognition__card { padding:22px; border-radius:12px; text-align:left; background:var(--bg); }
.recognition__icon { width:32px; height:32px; margin:0 0 14px; }
.recognition__icon svg { width:20px; height:20px; }
.recognition__title { font-size:18px; letter-spacing:-.02em; }
.recognition__desc { font-size:13px; line-height:1.6; }

.blog__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.blog-card { display:block; border:0; border-left:1px solid var(--border-light); border-radius:0; padding:0 0 0 20px; background:none; box-shadow:none; }
.blog-card:hover { transform:none; background:none; border-color:var(--accent); box-shadow:none; }
.blog-card__image { display:none; }
.blog-card__content { padding:0; }
.blog-card__date { margin-bottom:10px; font-size:12px; }
.blog-card__title { font-size:18px; letter-spacing:-.025em; line-height:1.35; margin-bottom:10px; }
.blog-card__excerpt { margin:0; font-size:13px; line-height:1.6; }
.blog-card__pending { display:none; }

.contact { background:var(--bg-secondary); }
.contact .container { padding-inline:var(--gutter); border:0; border-radius:0; background:none; }
.contact__grid { gap:44px; }
.contact__form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact__form .form-group { margin:0; }
.contact__form .form-group:has(textarea),.contact__form>button,.contact__form>.form-note { grid-column:1/-1; }
.contact__form>button { justify-self:start; }
.form-label { margin-bottom:6px; font-size:13px; }
.form-input { padding:10px 12px; background:var(--bg); border-width:1px; border-radius:8px; }
.form-textarea { min-height:100px; }
.contact__info { gap:6px; justify-content:flex-start; }
.contact__info-item { padding:16px 0; background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; gap:16px; }
.contact__info-label { font-size:12px; }
.contact__info-value { font-size:14px; }
.footer { padding:28px 0; }
.footer__container { padding-block:0; }

@media(min-width:1001px) {
 .about>.container,.skills>.container,.experience>.container { display:grid; grid-template-columns:230px minmax(0,1fr); column-gap:48px; align-items:start; }
 .about .section__header,.skills .section__header,.experience .section__header { grid-column:1; grid-row:1/5; margin:0; }
 .about__grid,.skills__categories,.recent-stack,.experience__subhead,.experience .timeline { grid-column:2; }
 .experience .section__header { position:sticky; top:104px; }
 .recent-stack { flex-direction:column; gap:10px; }
}
@media(max-width:1000px) {
 .section { padding-block:48px; }
 .about__grid { grid-template-columns:150px 1fr; }
 .about__photo-frame { width:150px; }
 .hero { padding-top:104px; }
 .hero__name { font-size:clamp(40px,7vw,64px); }
 .contact__grid { gap:30px; }
 .recent-stack { flex-direction:column; gap:10px; }
}
@media(max-width:700px) {
 .section { padding-block:36px; }
 .section__header { margin-bottom:20px; }
 .hero { padding:98px 0 40px; }
 .hero__name { font-size:clamp(34px,9vw,50px); }
 .hero__title { font-size:18px; }
 .hero__tagline { font-size:14px; margin-bottom:18px; padding:0; }
 .hero__stats { gap:18px; margin-bottom:22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .hero__stat-number { font-size:24px; }
 .hero__stat-label { font-size:12px; letter-spacing:0; }
 .hero__cta { gap:6px; flex-direction:row; }
 .hero__cta .btn { padding:10px 12px; font-size:12px; }
 .about__grid { grid-template-columns:90px minmax(0,1fr); gap:20px; align-items:start; }
 .about__photo-frame { width:90px; border-radius:12px; }
 .about__text p:first-child { font-size:15px; }
 .about__text p { font-size:13px; }
 .about__stats { gap:14px; flex-wrap:wrap; }
 .about__stat-number { font-size:20px; }
 .projects .section__subtitle { margin-top:10px; }
 .project-jump { gap:0; margin-bottom:22px; }
 .project-jump__link { padding-inline:10px; font-size:12px; gap:6px; }
 .skills__category { grid-template-columns:1fr; gap:10px; padding:15px 0; }
 .skills__category-title { font-size:12px; }
 .timeline__title { font-size:18px; }
 .timeline__desc { font-size:13px; }
 .recognition__grid { grid-template-columns:1fr; }
 .recognition__card { padding:18px; }
 .blog__grid { grid-template-columns:1fr; gap:20px; }
 .contact__grid { grid-template-columns:1fr; gap:24px; }
 .contact__form { display:flex; flex-direction:column; gap:14px; }
 .contact__form>button { align-self:flex-start; }
}
@media(max-width:360px) {
 .about__grid { display:block; }
 .about__image { float:left; margin:0 16px 8px 0; }
 .about__stats { clear:both; }
 .project-jump__link { padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) { .nav::after { transition:none; } }

/* Project details open with their name and a persistent, reachable close control. */
dialog.modal { padding:24px; }
.modal__container { width:100%; max-width:1160px; padding:0 32px 32px; border:1px solid var(--border-light); border-radius:24px; max-height:calc(100dvh - 48px); }
.modal__heading { position:sticky; top:0; z-index:5; padding:24px 60px 20px 0; margin:0 0 24px; border-bottom:1px solid var(--border); background:var(--bg-card); }
.modal__heading .modal__title { margin:8px 0 6px; font-size:clamp(26px,3vw,38px); line-height:1.15; letter-spacing:-.04em; }
.modal__heading .modal__role { margin:0; font-size:13px; }
.modal__close { position:absolute; top:24px; right:0; border:1px solid var(--border-light); border-radius:50%; background:var(--bg-secondary); }
.modal__body { gap:36px; align-items:start; }
.modal__details { padding:0; }
.modal__desc { margin-top:0; font-size:16px; line-height:1.7; }
.modal__media-note { padding:14px 0; border-top:1px solid var(--border); }
.gallery-caption { min-height:0; }
.gallery-stage { height:clamp(320px,54dvh,580px); border-radius:16px; }
.gallery-stage__zoom { background:rgba(var(--bg-rgb),.88); backdrop-filter:blur(12px); }
.gallery-thumbnail { border-radius:9px; }
.gallery-thumbnail[aria-pressed='true'] { box-shadow:inset 0 0 0 2px var(--accent-text); }
.modal:not([data-media='phone']) .gallery-stage { max-height:60dvh; }
.modal:not([data-media='phone']) .modal__details { display:grid; grid-template-columns:1.3fr 1fr; column-gap:48px; }
.modal:not([data-media='phone']) .modal__desc { grid-column:1; grid-row:1/4; }
.modal:not([data-media='phone']) .modal__tags,.modal:not([data-media='phone']) .modal__highlights { grid-column:2; }
.modal:not([data-media='phone']) .modal__actions,.modal:not([data-media='phone']) .modal__media-note { grid-column:1/-1; }
.experience-launch { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:46px; padding:12px 20px; border:1px solid transparent; border-radius:28px; color:#fff; background:var(--accent-fill); font:600 14px var(--font); cursor:pointer; }
.experience-launch:hover { background:var(--accent-fill-hover); }
.experience-launch:focus-visible,.experience-toolbar button:focus-visible,.experience-toolbar a:focus-visible { outline:3px solid #93bfff; outline-offset:4px; }
.experience-dialog { position:fixed; inset:16px; margin:auto; width:calc(100% - 32px); max-width:1600px; height:calc(100dvh - 32px); max-height:none; padding:0; border:1px solid var(--border-light); border-radius:20px; background:#07070a; color:#f2f3f5; overflow:hidden; }
.experience-dialog[open] { display:flex; flex-direction:column; }
.experience-dialog::backdrop { background:#000c; backdrop-filter:blur(10px); }
.experience-toolbar { display:flex; align-items:center; gap:20px; padding:12px 20px; border-bottom:1px solid #ffffff20; flex:none; }
.experience-toolbar h2 { font-size:17px; letter-spacing:-.035em; }
.experience-toolbar p { color:#a8aebb; font-size:12px; margin-top:3px; }
.experience-toolbar a { margin-left:auto; color:#b0caff; font-size:13px; }
.experience-toolbar button { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; border:1px solid #ffffff35; color:#fff; background:#14171e; font-size:25px; cursor:pointer; }
.experience-stage { flex:1; min-height:0; display:flex; }
.experience-stage iframe { width:100%; height:100%; border:0; }
.experience-loading { position:absolute; top:50%; left:0; right:0; text-align:center; color:#bdc8e0; pointer-events:none; }

@media(max-width:760px) {
 dialog.modal { padding:10px; }
 .modal__container { max-height:calc(100dvh - 20px); padding:0 20px 24px; border-radius:18px; }
 .modal__heading { padding:20px 44px 18px 0; margin-bottom:20px; }
 .modal__close { top:18px; right:-4px; }
 .modal__body { grid-template-columns:1fr; gap:28px; }
 .modal:not([data-media='phone']) .modal__details { display:block; }
 .modal[data-media='phone'] .modal__screenshots { width:100%; max-width:420px; }
 .gallery-stage { height:52dvh; min-height:260px; }
 .experience-dialog { inset:0; width:100%; height:100dvh; border-radius:0; }
 .experience-toolbar { gap:10px; padding:10px 12px; }
 .experience-toolbar h2 { font-size:15px; }
 .experience-toolbar a { font-size:12px; max-width:75px; }
}