@charset "UTF-8";
:root{--paper:#fcfbff;--ink:#31243f;--muted:#615e70;--accent:#6d35bd;--line:#e5dfed;--soft:#f3eff8}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.7}a{color:inherit;text-underline-offset:5px}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.16}h1{font-size:clamp(2.5rem,5.1vw,4.7rem);letter-spacing:-.045em;max-width:800px}h2{font-size:clamp(1.9rem,3.2vw,2.8rem);letter-spacing:-.03em}h3{font-size:1.25rem}p{color:var(--muted)}a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.container{width:min(1180px,calc(100% - 64px));margin-inline:auto}.skip-link{position:fixed;top:-100px;left:20px;z-index:20;background:white;padding:12px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:10}.nav{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:24px}.brand{font-size:30px;font-weight:800;letter-spacing:-2px;text-decoration:none}.brand span{color:var(--accent)}.nav-links{display:flex;gap:30px;align-items:center}.nav-links a{text-decoration:none;font-size:14px;font-weight:600}.nav-links a:hover,.text-link:hover{color:var(--accent);text-decoration:underline}.language{border-left:1px solid var(--line);padding-left:24px}.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;align-items:center;padding-block:88px 100px}.eyebrow{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:20px}.hero-lead{font-size:clamp(1.35rem,2.2vw,1.8rem);color:var(--ink);line-height:1.45;margin-top:26px}.hero-description{margin-top:20px;max-width:600px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:13px 22px;background:var(--accent);color:white;text-decoration:none;border:1px solid var(--accent);border-radius:6px;font-size:14px;font-weight:600;transition:background .2s}.button:hover{background:#8b53d9}.button.secondary{color:var(--ink);background:transparent;border-color:var(--line)}.button.secondary:hover{background:var(--soft)}.hero-contact{display:inline-block;margin-top:20px;font-size:14px}.portrait{padding:16px;background:#e7dcef;border-radius:120px 120px 12px 12px;transform:rotate(2deg)}.portrait img{width:100%;height:380px;object-fit:cover;object-position:center 25%;border-radius:108px 108px 6px 6px}.portrait-caption{display:flex;flex-direction:column;padding:20px 8px 8px;font-size:12px;gap:4px}.portrait-caption span:first-child{font-size:18px;font-weight:700}.section{padding-block:80px;border-top:1px solid var(--line)}.section-intro{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:40px}.section-intro>p{max-width:390px}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.project-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}.project-image{display:block;background:var(--soft);overflow:hidden;border-bottom:1px solid var(--line)}.project-image img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;transition:transform .25s}.project-image:hover img{transform:scale(1.035)}.project-copy{padding:24px;display:flex;flex-direction:column;flex:1}.project-copy .eyebrow{font-size:10px;margin-bottom:12px;letter-spacing:.1em}.project-copy p:not(.eyebrow){font-size:14px;margin-top:14px;margin-bottom:24px}.text-link{font-size:14px;font-weight:700}.project-copy .text-link{margin-top:auto;align-self:start}.more-work{margin-top:36px}.more-work summary{cursor:pointer;font-weight:600;padding:15px 0;width:fit-content}.more-work[open] summary{margin-bottom:24px}.tinted{background:var(--soft)}.job{display:grid;grid-template-columns:220px 1fr;gap:35px;border-top:1px solid #e5dfed;padding:28px 0}.job-date{font-size:14px}.job .company{color:var(--accent);font-weight:600;margin:8px 0 12px}.job div>p:last-child{max-width:760px;font-size:15px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.about-grid h2{margin-bottom:25px}.education{border-top:1px solid var(--line);margin-top:32px;padding-top:28px}.education .eyebrow{margin-bottom:12px}.education h3{font-size:17px}.education p:last-child{font-size:14px;margin-top:8px}.skills{background:white;border:1px solid var(--line);padding:32px;border-radius:10px;align-self:start}.skills>p{margin-top:16px;font-size:14px}.tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:24px 0}.tags li{padding:7px 13px;background:var(--soft);border-radius:5px;font-size:14px}.skills-note{border-top:1px solid var(--line);padding-top:18px}.contact{background:#21162f;color:white;padding-block:80px}.contact .eyebrow{color:#c6abdf}.contact h2{max-width:750px}.contact p:not(.eyebrow){color:#d8cce3;margin-top:24px;max-width:650px}.contact-email{display:inline-block;font-size:clamp(1.15rem,3.3vw,2.5rem);margin-top:26px;overflow-wrap:anywhere}.contact-links{display:flex;flex-wrap:wrap;gap:28px;margin-top:28px;font-size:14px}.footer{display:flex;justify-content:space-between;gap:20px;padding-block:26px;font-size:12px;color:var(--muted)}
@media(min-width:1500px){.hero{padding-block:110px}}
@media(max-width:1000px){.hero{gap:36px;grid-template-columns:1.3fr 1fr}.portrait img{height:320px}.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.about-grid{gap:40px}.nav-links{gap:20px}}
@media(max-width:650px){html{scroll-padding-top:120px}.container{width:calc(100% - 36px)}.nav{min-height:76px;gap:12px;flex-wrap:wrap;padding-block:12px}.brand{font-size:26px}.nav-links{gap:13px;flex-wrap:wrap}.nav-links a{font-size:12px}.language{padding-left:12px}.hero{grid-template-columns:1fr;padding-block:48px;gap:40px}.hero .eyebrow{font-size:10px}.hero h1{max-width:100%}.hero-description{font-size:15px}.portrait{max-width:320px;width:100%;justify-self:center;transform:none}.portrait img{height:270px}.portrait-caption{padding:14px 6px 4px}.section{padding-block:48px}.section-intro{display:block;margin-bottom:28px}.section-intro>p,.section-intro>.text-link{display:block;margin-top:20px}.projects{grid-template-columns:1fr;gap:22px}.project-copy{padding:22px}.job{grid-template-columns:1fr;gap:10px;padding-block:24px}.about-grid{grid-template-columns:1fr;gap:32px}.skills{padding:24px}.contact{padding-block:48px}.contact-links{gap:18px}.footer{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Purple palette and layout based on index_chat.html. */
.hero-background {
  background: linear-gradient(110deg, rgba(20,14,36,.96), rgba(30,20,52,.84)), url('../images/about/welcome-banner.jpg') center / cover;
  background-color: #181329;
}
.hero { grid-template-columns: 1.5fr 1fr; min-height: 660px; padding-block: 82px; }
.hero-name { color: #ded0f0; font-size: 16px; letter-spacing: .5px; margin-bottom: 24px; }
.hero h1 { color: #fff; font-size: clamp(42px,5.5vw,76px); font-weight: 600; letter-spacing: -2px; }
.hero h1 span { color: #cfadff; }
.hero-lead { color: #eee9f5; font-size: 19px; max-width: 550px; }
.hero-description { color: #c1b7d0; font-size: 14px; margin-top: 18px; }
.hero .button { background: #7640c3; border-color: #7640c3; border-radius: 8px; padding: 15px 23px; }
.hero .button.secondary { color: #fff; background: transparent; border-color: #867298; }
.hero .button:hover { background: #8b53d9; border-color: #8b53d9; }
.hero-contact { color: #dac0ff; }
.portrait { box-shadow: 0 16px 45px #10081c33; }
.portrait-caption { color: #31243f; }
.brand { color: var(--accent); font-size: 23px; letter-spacing: 0; font-weight: 600; }
.nav-links { gap: 24px; }
.section { border: 0; padding-block: 76px; }
.section-intro { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 32px; align-items: center; }
.section h2 { font-size: 32px; font-weight: 600; letter-spacing: -.6px; }
.portfolio-section { background: #f3eff8; }
.project-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 32px; }
.project-filters button { font: inherit; font-size: 14px; cursor: pointer; border: 1px solid #ddd3e9; border-radius: 24px; padding: 11px 21px; background: transparent; color: #61566e; }
.project-filters button[aria-pressed='true'] { background: #31243f; color: white; border-color: #31243f; }
.project-filters button:hover { border-color: var(--accent); }
.project-filters button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.projects[hidden] { display: none; }
.projects + .projects:not([hidden]) { margin-top: 28px; }
.project-card { border-radius: 12px; box-shadow: 0 5px 18px rgba(45,25,65,.035); }
.project-copy { padding: 22px; }
.project-copy h3 { order: -1; font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.project-copy .eyebrow { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; color: #74677e; margin-bottom: 18px; }
.project-copy .text-link { color: var(--accent); font-size: 13px; text-decoration: none; font-weight: 500; }
.project-copy .text-link:hover { text-decoration: underline; }
.project-copy .project-note { font-size: 12px; margin: 0 0 14px; }
.tinted { background: #f5f2f8; }
.job { grid-template-columns: 220px 1fr; padding-block: 30px; }
.job h3 { font-weight: 500; }
.jobs > .job:first-child {
  border-top: none;
}
.contact h2 { font-size: clamp(30px,4vw,50px); font-weight: 500; }
.contact-email { color: #dac0ff; }
.footer { width: 100%; padding-inline: max(32px,calc((100% - 1180px)/2)); background: #181020; color: #c8bdd5; }
.about-story { display: grid; grid-template-columns: 1.65fr 1fr; gap: 56px; align-items: start; }
.about-copy p { margin-bottom: 20px; line-height: 1.9; }
.about-copy p:first-child { color: var(--ink); font-size: 18px; }
.about-focus { padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.about-focus > h3 { color: var(--accent); font-size: 18px; }
.about-focus ul { padding-left: 20px; color: var(--muted); font-size: 14px; }
.about-focus li { margin-block: 12px; }
.skills-expanded { margin-top: 56px; }
.skills-expanded .section-intro p { margin-top: 16px; }
.skill-categories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.skill-category { padding: 26px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.skill-category h3 { font-size: 18px; color: var(--accent); }
.skill-category p { font-size: 14px; margin-top: 14px; }
.skill-category .tags { margin-bottom: 0; gap: 8px; }
.skill-category .tags li { font-size: 13px; }
@media(max-width:900px) {
  .about-story { grid-template-columns: 1fr; gap: 24px; }
  .skill-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .skill-categories { grid-template-columns: 1fr; }
  .about-focus, .skill-category { padding: 22px; }
  .about-copy p:first-child { font-size: 17px; }
}
@media(max-width:1000px) {
  .hero { gap: 36px; grid-template-columns: 1.3fr 1fr; }
  .nav-links { gap: 18px; }
}
@media(max-width:650px) {
  .nav { justify-content: center; }
  .nav-links { justify-content: center; gap: 16px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-block: 52px; }
  .hero h1 { letter-spacing: -1px; }
  .hero-lead { font-size: 17px; }
  .section { padding-block: 48px; }
  .section h2 { font-size: 27px; }
  .job { grid-template-columns: 1fr; }
  .footer { padding-inline: 18px; }
}
.compact-copy { gap: 14px; padding: 18px 20px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compact-copy .card-heading h3 { margin: 0; font-size: 17px; line-height: 1.4; }
.compact-copy .card-heading .text-link { margin: 0; align-self: center; white-space: nowrap; font-size: 12px; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.tech-tags li { background: #f0e9f8; color: #624780; font-size: 11px; line-height: 1.5; padding: 4px 9px; border-radius: 5px; }
.project-card:hover, .project-card:focus-within { border-color: #9464ce; }
.project-image:hover img { transform: none; }
.compact-copy .project-note { margin: 0; }
body.demo-open { overflow: hidden; }
.demo-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.demo-external { color: #6d35bd; font-size: 13px; }
@media(max-width:650px) { .demo-toolbar { flex-wrap: wrap; } .demo-actions { width: 100%; justify-content: space-between; gap: 10px; } }
.demo-dialog { width: min(1440px,96vw); max-width: none; height: 92vh; height: 92dvh; max-height: 96%; padding: 0; border: 1px solid #ddd3e9; border-radius: 12px; background: white; color: #31243f; }
.demo-dialog[open] { display: flex; flex-direction: column; }
.demo-dialog::backdrop { background: rgba(20,14,36,.8); }
.demo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #e5dfed; }
.demo-toolbar h2 { font-size: 18px; }
.demo-hint { font-size: 12px; margin-top: 4px; }
.demo-close { cursor: pointer; font: inherit; font-size: 14px; border: 1px solid #ddd3e9; border-radius: 6px; background: #f3eff8; color: #542689; padding: 9px 14px; flex-shrink: 0; }
.demo-close:focus-visible { outline: 3px solid #7640c3; outline-offset: 3px; }
.demo-frame { display: block; width: 100%; flex: 1; min-height: 0; border: 0; background: white; }
@media(max-width:650px) { .demo-dialog { width: 100%; height: 96dvh; border-radius: 8px; } .demo-toolbar { padding: 12px; } }