:root{--ink:#18232c;--muted:#53616a;--bg:#f4f7f8;--night:#11171d;--accent:#d1f76f;--blue:#335de8;--line:#d6dfe3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:6px}.skip{position:fixed;top:-100px;background:white;padding:12px;z-index:99}.skip:focus{top:0}header{padding:0 5.5%;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--night);color:#f7f9fb;border-bottom:1px solid #333e47}.logo{font-size:38px;letter-spacing:-3px;font-weight:900;line-height:1}.logo span{color:var(--accent)}nav{display:flex;gap:32px;font-size:14px}nav a:hover{color:var(--accent)}.contact{font-size:14px;padding:9px 16px;border:1px solid #53606b;border-radius:5px}.contact span{margin-left:12px}.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:8%;padding:55px 5.5% 65px;background:var(--night);color:#f7f9fb;align-items:center}.eyebrow,.section-kicker{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:1px;font-weight:500}.eyebrow{color:#b3c0c8;margin-bottom:24px}.focus-label{font-size:12px;color:var(--accent);letter-spacing:1.2px;margin-bottom:20px;line-height:1.8}h1{font-size:clamp(40px,4.7vw,72px);line-height:1.035;letter-spacing:-2.8px;margin:0 0 26px;font-weight:750}em{font-style:normal;color:var(--accent)}.lead{font-size:18px;line-height:1.65;max-width:590px;color:#bdc9d0;margin-bottom:0}.hero-actions{display:flex;gap:26px;align-items:center;margin:30px 0 25px}.button{padding:13px 20px;font-size:14px;display:inline-flex;gap:25px;border-radius:5px}.dark{background:var(--accent);color:var(--night);font-weight:700}.dark:hover{background:#e0ffa3}.text-link{font-size:14px;border-bottom:1px solid #627581}.next-step{font-size:13px;color:#b3c0c8}.portrait{align-self:center;position:relative;background:#1d272f;padding:10px;border:1px solid #3b4a55;border-radius:10px;transform:rotate(2deg);max-width:460px;margin-left:auto;width:100%}.portrait-top,.portrait-bottom{display:flex;justify-content:space-between;gap:10px;font-family:ui-monospace,monospace;font-size:12px;color:#c8d6df;padding:8px 4px 14px}.portrait img{display:block;width:100%;height:465px;object-fit:cover;object-position:center 50%;border-radius:4px}.portrait-bottom{padding:14px 4px 4px;flex-wrap:wrap}.portrait-label{position:absolute;bottom:67px;left:-30px;padding:16px 20px;background:var(--accent);color:var(--night);font-size:18px;line-height:1.5;border-radius:4px;transform:rotate(-2deg)}.proof-strip{background:#e5edf0;display:grid;grid-template-columns:repeat(3,1fr);padding:27px 5.5%;border-bottom:1px solid #ccd7de}.proof-strip article{display:flex;flex-direction:column;gap:6px;padding:0 25px}@media(min-width:651px){.proof-strip article:first-child{padding-left:0}}.proof-strip article+article{border-left:1px solid #b6c7d0}.proof-strip strong{font-size:23px;letter-spacing:-.5px}.proof-strip span{font-size:14px;color:var(--muted)}.section{padding:80px 5.5%;display:grid;grid-template-columns:21% 1fr;gap:5%;max-width:1550px;margin:auto}.section-kicker{color:var(--muted);padding-top:9px}h2{font-size:clamp(32px,3.3vw,49px);line-height:1.15;letter-spacing:-1.7px;margin:0 0 28px}h3{line-height:1.3}p{margin-top:0}.accent{color:#2d57d0}.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:35px;color:var(--muted)}.human-note{border-left:3px solid var(--blue);padding:15px 22px;background:#e9eef8;margin-top:10px}.human-note span{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:1px;color:#335bc7}.human-note p{margin:8px 0 0;font-size:18px;max-width:750px}.experience{max-width:none;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* .experience drops the 1550px cap so its white band can bleed to both
   screen edges. Above 1550px that also un-capped its CONTENT, so its
   `21% 1fr` grid grew wider than every other .section and its content
   column slid left (1920px: 549.9 vs 638.7 for ki-praxis/ausbildung).
   Re-add the cap as padding so the band stays full-bleed and the columns
   line up again. 100% (not 100vw) keeps this scrollbar-proof. */
@media(min-width:651px){.experience{padding-left:calc(5.5% + max(0px,(100% - 1550px)/2));padding-right:calc(5.5% + max(0px,(100% - 1550px)/2))}}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.hint{font-size:12px;color:var(--muted);margin-bottom:33px}.timeline{border-top:1px solid #a5b5bf}details{border-bottom:1px solid var(--line);scroll-margin-top:25px}summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:140px 1fr 25px;gap:20px;align-items:start;padding:27px 0}summary::-webkit-details-marker{display:none}.date{font-size:13px;color:var(--muted);padding-top:4px}.role{display:flex;flex-direction:column;gap:6px}.role strong{font-size:21px;line-height:1.3;letter-spacing:-.4px}.role>span{font-size:15px;color:var(--muted)}.role small{font-size:13px;line-height:1.5;color:#3553a1;margin-top:4px}.plus{font-size:26px;line-height:1;transition:transform .2s}details[open] .plus{transform:rotate(45deg);color:var(--blue)}details:target{background:#f2f6ff}.detail{margin-left:160px;padding:0 20px 28px 0;color:var(--muted)}.detail h3{font-size:18px;color:var(--ink);margin-top:28px}.detail h3 span{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:5px}.location{display:block;font-size:13px;line-height:1.6;margin-bottom:15px}.detail ul{padding-left:18px}.detail li{margin:8px 0}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.tags span{border:1px solid #c6d1d8;border-radius:5px;font-size:13px;padding:4px 10px;line-height:1.5}.skills-section{background:var(--night);color:#f7f9fb;padding:75px 5.5% 80px}.skills-section>.section-kicker{color:#a3b5c1}.skills-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:32px}.skills-intro p{max-width:290px;color:#b9c9d4;margin-bottom:32px}.skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#394751;border:1px solid #394751;border-radius:8px;overflow:hidden;margin-top:12px}.skill-grid article{background:#18222b;padding:30px 34px;display:flex;flex-direction:column;align-items:start}.number{font-family:ui-monospace,monospace;font-size:12px;color:var(--accent);line-height:1.7}.skill-grid h3{font-size:29px;letter-spacing:-.7px;margin:22px 0 18px}.skill-grid p{color:#c3cfd7;max-width:550px}.skill-grid .ai-card{background:#22322c}.skill-grid .tags{margin-top:auto}.skill-grid .tags span{border-color:#6e8878;color:#d9e8df}.evidence-link{font-size:14px;color:var(--accent);border-bottom:1px solid #627447;margin-top:auto}.evidence-link:hover{color:white}.toolkit{margin-top:45px}.toolkit h3{font-size:20px;font-weight:500;margin-bottom:23px}.tool-row{display:grid;grid-template-columns:28% 1fr;gap:20px;padding:15px 0;border-top:1px solid #394751;font-size:14px}.tool-row strong{font-weight:400;color:#b3c7d2}.tool-row span{color:#e4edf2}.education-list article{border-top:1px solid var(--line);padding:25px 0;display:grid;grid-template-columns:135px 1fr 65px;gap:20px;align-items:start}.education-list h3{font-size:19px;margin:0 0 6px}.education-list p{font-size:14px;color:var(--muted);margin:0}.degree-badge{color:#3356c3;font-family:ui-monospace,monospace;font-size:12px;text-align:right;padding-top:5px}.education-list .coach{border-top:3px solid var(--blue)}.languages{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;border-top:1px solid var(--line);padding-top:25px}.languages strong{width:100%}.personal{border-top:1px solid var(--line);padding-top:65px;padding-bottom:65px}.personal p{max-width:760px;color:var(--muted)}.closing{background:#cffa79;padding:65px 5.5% 35px;color:#17271b}.closing .eyebrow{color:#42582d}.closing h2{font-size:clamp(40px,5.3vw,76px);letter-spacing:-2.3px}.closing em{color:#345820}.closing-intro{max-width:610px;margin-bottom:25px}.email{font-size:clamp(18px,2.4vw,32px);border-bottom:1px solid #506a36;overflow-wrap:anywhere}.closing-bottom{border-top:1px solid #9cc753;display:flex;justify-content:space-between;margin-top:45px;padding-top:22px;font-size:14px}footer{background:var(--night);color:#b9cad5;padding:24px 5.5%;display:flex;justify-content:space-between;gap:15px;font-size:12px}@media(min-width:1550px){.hero,.skills-section,.closing,.proof-strip{padding-left:max(5.5%,calc((100vw - 1380px)/2));padding-right:max(5.5%,calc((100vw - 1380px)/2))}}@media(max-width:1000px){.hero{gap:5%;padding-top:40px}h1{letter-spacing:-1.8px}.portrait img{height:425px}.portrait-label{font-size:16px;left:-15px}.hero-actions{flex-wrap:wrap;gap:18px}.contact{display:none}.section{grid-template-columns:1fr;gap:26px;padding:65px 5.5%}.section-kicker{padding-top:0}.proof-strip strong{font-size:20px}.skill-grid article{padding:27px}.portrait-top,.portrait-bottom{font-size:12px}.education-list article{grid-template-columns:150px 1fr 65px}}@media(max-width:650px){header{min-height:72px;padding:0 5%;gap:18px}.logo{font-size:34px}nav{gap:16px;font-size:12px}.hero{grid-template-columns:1fr;padding:35px 5% 45px;gap:35px}.focus-label{font-size:12px;letter-spacing:.4px}h1{font-size:clamp(39px,10vw,61px);letter-spacing:-1.6px}.lead{font-size:17px}.eyebrow{font-size:12px;letter-spacing:.5px}.hero-actions{margin:26px 0 20px}.portrait{max-width:none;width:calc(100% - 14px);margin:0 0 0 9px;transform:rotate(1deg)}.portrait img{height:375px;object-position:center 49%}.portrait-label{bottom:63px;font-size:17px;transform:rotate(-1deg)}.portrait-top,.portrait-bottom{font-size:12px}.proof-strip{grid-template-columns:1fr;padding:10px 5%}.proof-strip article{padding:17px 0;gap:3px}.proof-strip article+article{border-left:0;border-top:1px solid #bccdd5}.proof-strip strong{font-size:21px}.section{padding:50px 5%;gap:22px}h2{font-size:34px;letter-spacing:-1.2px}.about-copy{grid-template-columns:1fr;gap:0}.human-note{padding:14px 18px}.human-note p{font-size:17px}.section-heading{display:block}.hint{display:block;margin:-8px 0 22px}summary{grid-template-columns:1fr 24px;gap:7px;padding:23px 0}.date{grid-column:1}.role{grid-column:1}.plus{grid-column:2;grid-row:1/3;align-self:center}.role strong{font-size:20px}.detail{margin-left:0;padding-right:0}.skills-section{padding:50px 5%}.skills-intro{display:block}.skills-intro p{max-width:none}.skill-grid{grid-template-columns:1fr}.skill-grid article{padding:25px}.skill-grid h3{font-size:27px;margin-top:18px}.tool-row{grid-template-columns:1fr;gap:5px}.tool-row strong{color:var(--accent)}.education-list article{grid-template-columns:1fr 70px;gap:8px}.education-list article>div{grid-column:1/3;grid-row:2}.degree-badge{grid-column:2;grid-row:1}.languages{gap:9px}.languages span{width:100%}.closing{padding:50px 5% 30px}.closing h2{font-size:43px;letter-spacing:-1.5px}.closing-bottom{gap:20px;flex-wrap:wrap}.closing .eyebrow{font-size:12px;line-height:1.8}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{header,footer,.hero-actions,.hint,.plus,.portrait,.closing{display:none}body{font-size:11pt;color:black;background:white}.hero,.section,.skills-section{display:block;padding:15px 0;background:white;color:black}h1{font-size:28pt}h2{font-size:23pt}.lead,.eyebrow,.focus-label,.next-step,em,.skills-section p,.skills-section .section-kicker{color:black}.proof-strip{background:white}.detail{margin-left:0}.skill-grid{display:block;border:0;background:white}.skill-grid article{display:block;background:white;padding:15px 0}.skill-grid h3{font-size:18pt}.number,.skill-grid .tags span,.tool-row strong,.tool-row span,.evidence-link{color:black}.tags span{border-color:#bbb}details,article{break-inside:avoid}.skill-grid .ai-card{background:white}.tool-row{border-color:#ccc}.experience{border:0}.human-note{background:white}}
/* V3: personal images, practical AI evidence and restrained pink accents. */
:root{--pink:#e5007e}.logo span{color:var(--pink)}.portrait-label{background:var(--pink)}.portrait img{object-position:center 40%}.proof-strip{grid-template-columns:repeat(4,1fr)}.proof-strip strong{font-size:21px}.ai-practice{border-top:1px solid var(--line)}.ai-practice h2 .accent{color:var(--pink)}.ai-lead{color:var(--muted);max-width:780px}.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}.build-grid article{border:1px solid #d3dce3;border-radius:8px;padding:24px;background:white}.build-grid .number{color:var(--pink)}.build-grid h3{font-size:21px;margin:14px 0}.build-grid p{color:var(--muted);margin-bottom:0}.practice-photo{position:relative;margin-top:35px}.practice-photo img{width:100%;height:330px;object-fit:cover;object-position:50% 37%;display:block;border-radius:8px}.practice-photo>span{position:absolute;bottom:20px;left:20px;max-width:calc(100% - 40px);background:#11171de8;padding:10px 16px;color:white;font-size:14px;border-radius:4px}.community-block{border-left:3px solid var(--pink);background:#fff1f7;margin-top:35px;padding:24px}.community-label{font:12px ui-monospace,monospace;letter-spacing:1px;color:var(--pink)}.community-block h3{font-size:24px;letter-spacing:-.5px;margin:14px 0}.community-block p{color:var(--muted)}.community-block a{font-size:14px;color:var(--pink);border-bottom:1px solid var(--pink)}.personal-photo{margin:30px 0 0}.personal-photo img{width:100%;height:360px;display:block;object-fit:cover;object-position:center 35%;border-radius:8px}@media(max-width:1000px){.proof-strip{grid-template-columns:1fr 1fr;gap:20px}@media(min-width:651px){.proof-strip article:nth-child(3){border-left:0;padding-left:0}}}@media(max-width:650px){.proof-strip{grid-template-columns:1fr;gap:0}.build-grid{grid-template-columns:1fr}.practice-photo img,.personal-photo img{height:270px}.community-block{padding:20px}.community-block h3{font-size:22px}}@media print{.practice-photo,.personal-photo{display:none}.build-grid{display:block}.build-grid article{padding:8px 0;border:0}.community-block{background:white;padding:15px;border-color:#999}}

/* ═══════════════════════════════════════════════
   INTERACTIONS, ANIMATIONS & EASTER EGGS
   ═══════════════════════════════════════════════ */

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--pink),var(--accent));z-index:1001;pointer-events:none;transition:width .08s linear}

/* Scroll reveal — elements visible by default; JS adds .js-reveal to body to enable animation */
body.js-reveal [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
body.js-reveal [data-reveal].revealed{opacity:1;transform:none}
body.js-reveal [data-reveal][data-delay="1"]{transition-delay:.1s}
body.js-reveal [data-reveal][data-delay="2"]{transition-delay:.2s}
body.js-reveal [data-reveal][data-delay="3"]{transition-delay:.3s}

/* Toast */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(10px);background:#0c1419;color:#e0f0fb;padding:11px 22px;border-radius:7px;font-size:13.5px;border-left:3px solid var(--accent);opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease;z-index:1000;white-space:nowrap;box-shadow:0 4px 22px rgba(0,0,0,.45)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Back to top */
.back-top{position:fixed;bottom:30px;right:22px;width:42px;height:42px;background:var(--night);color:var(--accent);border:1px solid #3b4a55;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;z-index:999;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.back-top.visible{opacity:1;pointer-events:all}
.back-top:hover{background:#1d272f;transform:translateY(-2px)}

/* Active nav */
nav a{transition:color .2s}
nav a.active{color:var(--accent)}

/* Hover micro-interactions */
.proof-strip article{transition:transform .22s ease}
.proof-strip article:hover{transform:translateY(-4px)}
.build-grid article{transition:transform .22s ease,box-shadow .22s ease}
.build-grid article:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.11)}
.skill-grid article{transition:transform .22s ease,box-shadow .22s ease}
.skill-grid article:hover{transform:translateY(-5px);box-shadow:0 10px 36px rgba(0,0,0,.32)}
details summary{transition:background .15s}
details:not([open]) summary:hover{background:#f7fafb}
.button.dark{transition:background .18s,transform .15s}
.button.dark:hover{transform:translateY(-2px)}
a[href^="mailto:"]{cursor:copy}

/* Portrait tilt */
.portrait{transition:transform .5s cubic-bezier(.23,1,.32,1)}

/* Logo easter egg */
@keyframes logoPop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(18deg)}75%{transform:scale(.92) rotate(-6deg)}100%{transform:scale(1) rotate(0)}}
.logo.celebrate span{display:inline-block;animation:logoPop .65s ease}

/* Details slide-in */
@keyframes detailIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
details[open] .detail{animation:detailIn .28s ease}

/* Easter modal */
.easter-modal{position:fixed;inset:0;background:rgba(10,16,22,.9);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:20px}
.easter-modal.open{opacity:1;pointer-events:all}
.easter-modal-inner{background:#0e1a22;border:1px solid #3b4a55;border-radius:14px;padding:44px 52px;max-width:490px;width:100%;text-align:center;color:#f0f7fb;transform:translateY(18px) scale(.96);transition:transform .3s ease;position:relative}
.easter-modal.open .easter-modal-inner{transform:none}
.easter-modal-inner .easter-emoji{font-size:48px;display:block;margin:0 0 18px;line-height:1}
.easter-modal-inner h3{font-size:clamp(22px,3vw,28px);color:var(--accent);margin:0 0 16px;letter-spacing:-.4px}
.easter-modal-inner p{color:#9eb5c6;line-height:1.75;margin:0 0 28px;font-size:15px}
.easter-modal-inner .em-btn{background:var(--accent);color:var(--night);border:none;padding:13px 30px;border-radius:7px;font-size:15px;font-weight:700;cursor:pointer;transition:background .18s}
.easter-modal-inner .em-btn:hover{background:#e0ffa3}
.easter-modal-inner .em-close{position:absolute;top:14px;right:18px;background:none;border:none;color:#627581;font-size:22px;cursor:pointer;padding:5px;line-height:1}
.easter-modal-inner .em-close:hover{color:white}
@media(max-width:650px){.easter-modal-inner{padding:32px 24px}}

/* ── LINKEDIN LINK (header) ── */
.linkedin-link{font-size:13px;font-weight:700;letter-spacing:.5px;padding:7px 12px;border:1px solid #3d5266;border-radius:5px;color:#b3c0c8;transition:color .2s,border-color .2s;flex-shrink:0}
.linkedin-link:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:900px){.linkedin-link{display:none}}

/* ── CLOSING CTAs ── */
.closing-ctas{display:flex;flex-direction:column;gap:14px;margin-bottom:10px}
.email{font-size:clamp(18px,2.4vw,32px);border-bottom:1px solid #506a36;overflow-wrap:anywhere}
.linkedin-cta{font-size:clamp(15px,1.6vw,22px);color:#345820;border-bottom:1px solid #7aaa44;width:fit-content}
.linkedin-cta:hover{color:#1c3d10}
.closing-bottom{border-top:1px solid #9cc753;display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:45px;padding-top:22px;font-size:14px;gap:10px}
@media(max-width:650px){.closing-ctas{gap:10px}.linkedin-cta{font-size:16px}}

/* ── TOOL CHIPS ── */
.tool-icon{margin-right:8px;font-size:14px;opacity:.85}
.tool-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tool-chip{font-size:12px;padding:4px 11px;background:#1a2a32;border:1px solid #3b4a55;border-radius:20px;color:#ccdae5;line-height:1.5;transition:border-color .18s,color .18s,background .18s;cursor:default;white-space:nowrap}
.tool-chip:hover{border-color:var(--accent);color:var(--accent);background:#1e3028}
@media(max-width:650px){.tool-chip{font-size:11.5px;padding:3px 9px}.tool-row strong{color:var(--accent)}}

/* ── EDUCATION TIMELINE ── */
.edu-timeline{border-top:1px solid var(--line)}
.edu-entry{border-bottom:1px solid var(--line)}
details.edu-entry summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:135px 1fr auto 25px;gap:16px;align-items:start;padding:22px 0}
details.edu-entry summary::-webkit-details-marker{display:none}
.edu-date{font-size:13px;color:var(--muted);padding-top:3px;white-space:nowrap}
.edu-role{display:flex;flex-direction:column;gap:4px}
.edu-role strong{font-size:19px;letter-spacing:-.3px;line-height:1.3}
.edu-role>span{font-size:14px;color:var(--muted)}
.edu-role small{font-size:12px;color:var(--blue);margin-top:2px;line-height:1.4}
details.edu-entry .plus{font-size:22px;line-height:1;transition:transform .2s;padding-top:2px;color:var(--muted)}
details.edu-entry[open] .plus{transform:rotate(45deg);color:var(--blue)}
details.edu-entry:not([open]) summary:hover{background:#f7fafb}
.edu-coach summary{border-top:3px solid var(--blue);margin-top:-1px}
.edu-detail{margin-left:151px;padding:0 30px 22px 0;color:var(--muted);font-size:15px;line-height:1.65;animation:detailIn .28s ease}
.edu-detail p{margin:0 0 10px}
.edu-detail strong{color:var(--ink)}
.thesis-block{border-left:2.5px solid var(--blue);padding:10px 16px;background:#eef2fb;margin:12px 0 0;border-radius:0 5px 5px 0}
.thesis-label{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:var(--blue);display:block;margin-bottom:6px;font-weight:600}
.thesis-block p{color:#2a3f7a;margin:0;font-size:13.5px;font-style:italic;line-height:1.65}
.edu-simple{display:grid;grid-template-columns:135px 1fr;gap:16px;align-items:start;padding:20px 0}
@media(max-width:1000px){details.edu-entry summary{grid-template-columns:120px 1fr auto 22px}}
/* Mobile layout for education rows; the shared accordion system below
   owns the summary row, the +/− indicator and the separators. */
@media(max-width:650px){
  .edu-date{font-size:12px}
  .degree-badge{display:none}
  .edu-simple{grid-template-columns:1fr;gap:4px;padding:16px 0}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.toast,.back-top,.easter-modal-inner{transition:none}details[open] .detail{animation:none}.portrait{transition:none}.scroll-progress{transition:none}}
@media print{.scroll-progress,.toast,.back-top,.easter-modal{display:none}}

/* ── NAV CENTERING + HEADER-RIGHT ── */
.header-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-right .linkedin-link{margin-right:0}
@media(min-width:651px){header{position:relative}nav{position:absolute;left:50%;transform:translateX(-50%)}}

/* ── LINKEDIN ICON BUTTON ── */
.linkedin-link{padding:6px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.linkedin-link svg{width:16px;height:16px;display:block;flex-shrink:0}

/* ── TAGS PILL (MAGENTA) ── */
.tags span{background:rgba(229,0,126,.07);border:1px solid rgba(229,0,126,.25);color:#b00060;border-radius:20px}

/* ── PROOF STRIP REDESIGN ── */
.proof-strip .proof-card{display:flex;flex-direction:column;padding:26px 22px 22px;border-top:2px solid transparent;border-left:0;cursor:default;transition:background .22s,transform .22s,border-color .22s;gap:10px}
.proof-strip .proof-card+.proof-card{border-left:1px solid #b6c7d0}
.proof-strip .proof-card:hover{background:rgba(229,0,126,.05);transform:translateY(-4px);border-top-color:var(--pink)}
.proof-icon{width:26px;height:26px;color:var(--pink);flex-shrink:0}
.proof-card strong{font-size:20px;letter-spacing:-.3px;line-height:1.2}
.proof-card>span{font-size:13px;color:var(--muted);line-height:1.55;max-height:0;overflow:hidden;opacity:0;transition:max-height .32s ease,opacity .28s ease}
.proof-card:hover>span{max-height:80px;opacity:1}
@media(max-width:1000px){.proof-strip .proof-card+.proof-card{border-left:0}}
@media(max-width:650px){.proof-strip .proof-card{padding:18px 0;border-top:0;border-bottom:1px solid #bccdd5}.proof-card>span{max-height:none!important;opacity:1!important}}

/* ── CHIP ICON (Simple Icons img) ── */
.tool-chip{display:inline-flex;align-items:center;gap:5px}
img.chip-icon{width:13px;height:13px;filter:brightness(0) invert(.8);flex-shrink:0;display:block;transition:filter .18s}
.tool-chip:hover img.chip-icon{filter:brightness(0) invert(1)}

/* ── MOBILE NAV & RESPONSIVE OVERHAUL ── */
.mobile-nav-toggle{display:none;background:none;border:1px solid #3b4a55;border-radius:5px;color:#f7f9fb;cursor:pointer;padding:6px 10px;font-size:20px;line-height:1;flex-shrink:0;align-items:center}
.mobile-contact-link{display:none}
/* Wrapper exists only to give the portrait label a positioning context on
   mobile; on desktop it is transparent to layout. */
.portrait-media{display:contents}
/* On desktop: m-expand details show content, summary invisible.
   display:block on the body makes it work without JS too (UA hides it when closed). */
@media(min-width:651px){
  details.m-expand>summary{display:none}
  details.m-expand>:not(summary){display:block!important}
}
@media(max-width:650px){
  /* Hamburger + nav overlay */
  .mobile-nav-toggle{display:flex}
  .lang-switch{display:flex!important}
  header>nav:not(.nav-open){display:none}
  header>nav.nav-open{display:flex;flex-direction:column;position:fixed;top:72px;left:0;right:0;background:var(--night);border-bottom:2px solid #243340;z-index:300;padding:4px 5% 20px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
  header>nav a{padding:15px 0;font-size:15px;border-bottom:1px solid #1e2d37;color:#f7f9fb;display:block}
  header>nav a:last-child{border-bottom:none}
  .mobile-contact-link{display:block}
  /* Compact portrait. The label is anchored to the image instead of the card,
     so it never covers the caption row underneath (which it did at every
     mobile width before, because `bottom` was measured from the card). */
  .portrait img{height:210px!important}
  .portrait-media{display:block;position:relative}
  .portrait-label{left:0!important;font-size:15px!important;padding:11px 14px!important;bottom:10px!important;max-width:calc(100% - 20px)}
}

/* ── CERT SECTION ── */
.cert-section{margin-top:32px}
.cert-kicker{display:block;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:var(--muted);margin-bottom:14px;font-weight:600;text-transform:uppercase}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cert-card{border:1px solid var(--line);border-radius:8px;padding:20px 22px;background:white;display:flex;flex-direction:column;gap:8px;transition:box-shadow .22s,transform .22s}
.cert-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.cert-issuer{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:var(--muted);line-height:1}
.cert-name{font-size:15px;margin:0;letter-spacing:-.15px;color:var(--ink);font-weight:600;line-height:1.3}
.cert-badge{display:inline-block;font-size:10px;font-family:ui-monospace,monospace;letter-spacing:.8px;background:rgba(229,0,126,.07);border:1px solid rgba(229,0,126,.25);color:var(--pink);border-radius:4px;padding:3px 8px;width:fit-content;margin-top:4px}

/* ── ADDRESS & CLOSING BOTTOM ── */
address{font-style:normal}
.closing-bottom address,.closing-bottom a{color:#345820}

/* ── PRINT: hide extras ── */
@media print{.cert-section{display:none}.header-right{display:none}}

/* ═══════════════════════════════════════════
   PROOF STRIP — DARK, ALWAYS-VISIBLE REDESIGN
   ═══════════════════════════════════════════ */
.proof-strip{background:var(--night)!important;border-top:0;border-bottom:1px solid #1e2d37}
.proof-strip .proof-card{padding:40px 28px;border-top:none!important;border-left:none!important;gap:14px;background:transparent;transition:background .2s}
.proof-strip .proof-card+.proof-card{border-left:1px solid #243340!important}
.proof-strip .proof-card:hover{background:rgba(255,255,255,.04)!important;transform:none!important}
.proof-card strong{font-size:21px;letter-spacing:-.4px;color:#f0f7fb!important}
.proof-card>span{font-size:13px;color:#7a9aad!important;max-height:80px!important;opacity:1!important;overflow:visible;transition:none;line-height:1.55}
@media(max-width:1000px){.proof-strip .proof-card{padding:30px 20px}.proof-strip .proof-card+.proof-card{border-left:none!important;border-top:1px solid #243340!important}}
@media(max-width:650px){.proof-strip .proof-card{padding:22px 0;border-top:none!important;border-bottom:1px solid #1e2d37!important}.proof-strip .proof-card:last-child{border-bottom:none!important}}


/* ── EXPLORE LARA ── */
.explore-section{background:var(--night);color:#f7f9fb;padding:80px 5.5% 90px;border-top:1px solid #1e2d37}
.explore-inner{max-width:1380px;margin:auto}
.explore-eyebrow{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:1.2px;color:var(--accent);margin:0 0 18px;font-weight:600}
.explore-headline{font-size:clamp(26px,3vw,42px);line-height:1.15;letter-spacing:-1.4px;margin:0 0 14px;font-weight:750;color:#f0f7fb}
.explore-lead{font-size:16px;color:#8fa8b5;margin:0 0 40px;max-width:560px}
.explore-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#243340;border:1px solid #243340;border-radius:8px 8px 0 0;overflow:hidden}
.explore-tab{background:#0d1a22;border:none;padding:20px 22px 18px;text-align:left;cursor:pointer;color:#7a9aad;transition:background .18s,color .18s;position:relative;display:flex;flex-direction:column;gap:5px;min-height:44px}
.explore-tab:hover{background:#162028;color:#cde5f2}
.explore-tab:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:1}
.explore-tab.active{background:#122028;color:var(--accent)}
.explore-tab.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}
.explore-tab-num{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1px;opacity:.55;line-height:1}
.explore-tab-label{font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;letter-spacing:-.2px;line-height:1.2;color:inherit}
.explore-panel-wrap{border:1px solid #243340;border-top:none;border-radius:0 0 8px 8px;overflow:hidden}
.explore-panel{display:none;padding:48px 52px;background:#0d1a22}
.explore-panel.active{display:block;animation:exploreFade .28s ease}
@keyframes exploreFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ep-intro{color:#8fa8b5;font-size:15px;line-height:1.75;margin:0 0 28px}
.ep-closing{color:#627581;font-size:14px;line-height:1.7;margin:24px 0 0;border-top:1px solid #1e2d37;padding-top:20px;font-style:italic}
.ep-projects{display:flex;flex-direction:column;gap:20px}
.ep-supporting{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ep-card{border:1px solid #243340;border-radius:8px;padding:22px 26px;background:#0f1f2a;display:flex;flex-direction:column;gap:14px}
.ep-featured{border-color:#2d4555;padding:28px 32px;background:#122028}
.ep-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ep-card-title{font-size:18px;letter-spacing:-.3px;margin:0;color:#e4edf2;line-height:1.25;font-weight:700}
.ep-featured .ep-card-title{font-size:21px}
.ep-status{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:1px;font-weight:700;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#c3d8e8;white-space:nowrap}
.ep-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dot,#7a9aad);flex-shrink:0}
.ep-desc{color:#8fa8b5;font-size:14px;line-height:1.7;margin:0}
.ep-featured .ep-desc{font-size:15px}
.ep-meta{display:flex;flex-direction:column;gap:4px}
.ep-meta-label{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1px;color:#627581;text-transform:uppercase;font-weight:600}
.ep-meta-text{color:#b3c0c8;font-size:13.5px;line-height:1.6;margin:3px 0 0}
.ep-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ep-tool{font-size:12px;color:#7a9aad;background:rgba(255,255,255,.05);border:1px solid #243340;border-radius:4px;padding:3px 8px;line-height:1.5}
.ep-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 24px}
.ep-step{background:rgba(255,255,255,.03);border:1px solid #1e2d37;border-radius:8px;padding:22px 24px}
.ep-step-num{font-family:ui-monospace,monospace;font-size:10px;color:var(--accent);letter-spacing:1.2px;display:block;margin-bottom:10px;font-weight:600}
.ep-step-heading{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:#8fa8b5;text-transform:uppercase;margin:0 0 10px;font-weight:600}
.ep-step-text{color:#b3c0c8;font-size:14px;line-height:1.7;margin:0}
.ep-roles{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:0 0 24px}
.ep-role{border-left:2px solid #1e2d37;padding:12px 16px}
.ep-role-heading{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:1px;color:var(--accent);text-transform:uppercase;margin:0 0 8px;font-weight:700}
.ep-role-text{color:#b3c0c8;font-size:14px;line-height:1.65;margin:0 0 7px}
.ep-role-tools{color:#627581;font-size:12px;line-height:1.4;margin:0;font-family:ui-monospace,monospace;letter-spacing:.2px}
.ep-principles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 24px}
.ep-principle{padding:18px 22px;background:rgba(255,255,255,.03);border:1px solid #1e2d37;border-radius:8px}
.ep-principle-heading{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:1px;color:var(--accent);text-transform:uppercase;margin:0 0 10px;font-weight:700}
.ep-principle-text{color:#b3c0c8;font-size:14px;line-height:1.7;margin:0}
@media(max-width:900px){
  .explore-tabs{grid-template-columns:repeat(2,1fr)}
  .explore-tab.active::after{height:3px}
  .explore-panel.active{padding:36px 32px}
  .ep-steps,.ep-roles,.ep-principles{grid-template-columns:1fr}
  .ep-supporting{grid-template-columns:1fr}
}
@media(max-width:650px){
  .explore-section{padding:50px 5% 60px}
  .explore-tabs{grid-template-columns:1fr;border-radius:8px;gap:0}
  .explore-tab{flex-direction:row;align-items:center;gap:12px;padding:17px 18px;border-bottom:1px solid #243340}
  .explore-tab:last-child{border-bottom:none}
  .explore-tab.active{border-left:3px solid var(--accent)}
  .explore-tab.active::after{display:none}
  .explore-tab-num{display:none}
  .explore-panel-wrap{border-radius:8px;border:1px solid #243340;margin-top:10px}
  .explore-panel.active{padding:28px 22px}
  .ep-card{padding:18px 20px}
  .ep-featured{padding:22px 24px}
}
@media(prefers-reduced-motion:reduce){.explore-panel{animation:none!important}.explore-tab{transition:none}}

/* ── NEW CERT SECTION ── */
.cert-section{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.cert-kicker{display:block;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1.2px;color:var(--muted);margin-bottom:10px;font-weight:600;text-transform:uppercase}
.cert-intro-text{font-size:14px;color:var(--muted);margin:0 0 16px;max-width:700px;line-height:1.65}
.cert-roadmap-tag{display:inline-block;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1.4px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:3px 9px;margin-bottom:18px}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cert-card{border:1px solid var(--line);border-radius:10px;padding:22px 24px;background:#fff;display:flex;flex-direction:column;gap:10px;transition:transform .22s,box-shadow .22s}
.cert-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.09)}
.cert-provider-row{display:flex;align-items:center;gap:10px}
.cert-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cert-issuer{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:1px;color:var(--muted);font-weight:600}
.cert-name{font-size:15px;margin:0;color:var(--ink);font-weight:700;letter-spacing:-.15px;line-height:1.3}
.cert-desc{font-size:13px;color:var(--muted);margin:0;line-height:1.55}
.cert-badge-next{display:inline-flex;align-items:center;gap:5px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.8px;color:var(--muted);margin-top:4px;font-weight:600}
.cert-badge-next::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.cert-badge-done{display:inline-flex;align-items:center;gap:5px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.8px;color:#2d7a3a;margin-top:4px;font-weight:600}
.cert-credential-link{font-size:13px;color:var(--blue);border-bottom:1px solid currentColor;margin-top:auto;width:fit-content;transition:color .2s}
.cert-credential-link:hover{color:#1d3db0}
@media print{.cert-section{display:none}}

/* ═══════════════════════════════════════════════════════
   EXPLORE PAGE (/explore/ and /en/explore/)
   ═══════════════════════════════════════════════════════ */

/* ── Explore homepage teaser (replaces full explore-section) ── */
.explore-teaser{background:var(--night);padding:52px 5.5%;border-top:1px solid #1e2d37;border-bottom:1px solid #1e2d37}
.explore-teaser-inner{max-width:1380px;margin:auto;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.explore-teaser-text{flex:1;min-width:240px}
.explore-teaser-eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1.2px;color:var(--accent);margin:0 0 12px;font-weight:600}
.explore-teaser-headline{font-size:clamp(20px,2.4vw,30px);letter-spacing:-0.8px;margin:0 0 10px;color:#f0f7fb;line-height:1.2;font-weight:750}
.explore-teaser-lead{color:#8fa8b5;font-size:14px;line-height:1.65;margin:0;max-width:400px}
.explore-teaser-projects{display:flex;gap:10px;flex-wrap:wrap}
.explore-teaser-preview{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border:1px solid #243340;border-radius:6px;background:rgba(255,255,255,.03);min-width:130px}
.etp-status{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:1px;color:#627581;font-weight:700;display:flex;align-items:center;gap:5px}
.etp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.etp-name{font-size:13px;color:#b3c0c8;font-weight:600;letter-spacing:-.1px}
.explore-teaser-cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--night);font-size:14px;font-weight:700;padding:13px 22px;border-radius:6px;text-decoration:none;transition:background .18s,transform .15s;white-space:nowrap;flex-shrink:0}
.explore-teaser-cta:hover{background:#e0ffa3;transform:translateY(-2px)}
.explore-teaser-cta:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:900px){.explore-teaser-inner{gap:28px}.explore-teaser-projects{display:none}}
@media(max-width:650px){.explore-teaser{padding:40px 5%}.explore-teaser-cta{width:100%;justify-content:center}}

/* ── Explore page: global ── */
.ep-body{background:var(--night)}
.ep-back-link{font-size:13px;color:#7a9aad;border-bottom:1px solid #3b4a55;transition:color .2s,border-color .2s}
.ep-back-link:hover{color:#f0f7fb;border-bottom-color:#627581}
@media(max-width:650px){.ep-back-link{font-size:12px}}

/* ── Explore page: entry section ── */
.ep-entry-section{padding:72px 5.5% 56px;background:var(--night)}
.ep-entry-inner{max-width:1380px;margin:auto}
.ep-page-eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1.4px;color:var(--accent);margin:0 0 20px;font-weight:600}
.ep-page-headline{font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-2.5px;margin:0 0 20px;font-weight:750;color:#f0f7fb}
.ep-page-headline em{color:var(--accent);font-style:normal}
.ep-page-lead{font-size:17px;color:#8fa8b5;line-height:1.7;margin:0;max-width:520px}

/* ── Explore page: gallery ── */
.ep-gallery-section{padding:0 5.5% 80px;background:var(--night)}
.ep-gallery-inner{max-width:1380px;margin:auto}
.ep-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transition:opacity .3s ease,transform .3s ease}
.ep-gallery.ep-gallery--exiting{opacity:0;transform:scale(.97);pointer-events:none}
@media(max-width:900px){.ep-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ep-gallery{grid-template-columns:1fr}}

/* ── Explore page: project entry cards ── */
.ep-page-entry{background:#0f1e28;border:1px solid #243340;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;cursor:default;transition:transform .25s ease,border-color .25s ease}
.ep-page-entry:hover{transform:translateY(-5px);border-color:#3d5566}
.ep-page-entry-visual{aspect-ratio:16/10;overflow:hidden;position:relative}
.ep-visual-finance{background:linear-gradient(145deg,#0d2235 0%,#163a52 60%,#0a1c2a 100%)}
.ep-visual-fitness{background:linear-gradient(145deg,#1a0a2e 0%,#2d1250 60%,#150825 100%)}
.ep-visual-cv{background:linear-gradient(145deg,#0a1a10 0%,#162c1a 60%,#091510 100%)}
.ep-visual-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .4s ease}
.ep-page-entry:hover .ep-visual-img{transform:scale(1.03)}
.ep-page-entry-info{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.ep-page-status{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:1.2px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.ep-status-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ep-status-dev .ep-status-dot{background:var(--accent)}
.ep-status-proto .ep-status-dot{background:#7ab4d8}
.ep-status-live .ep-status-dot{background:#4cd89c}
.ep-status-dev{color:#8fa8b5}
.ep-status-proto{color:#8fa8b5}
.ep-status-live{color:#8fa8b5}
.ep-page-entry-title{font-size:19px;letter-spacing:-.4px;margin:0;color:#e4edf2;font-weight:700;line-height:1.25}
.ep-page-entry-teaser{font-size:14px;color:#8fa8b5;line-height:1.65;margin:0;flex:1}
.ep-page-open-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #3d5566;color:#b3c0c8;font-size:13px;font-weight:600;padding:9px 16px;border-radius:5px;cursor:pointer;transition:border-color .18s,color .18s,background .18s;margin-top:auto;width:fit-content;font-family:Arial,Helvetica,sans-serif}
.ep-page-open-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(209,247,111,.06)}
.ep-page-open-btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.ep-page-open-btn .ep-btn-arrow{transition:transform .18s}
.ep-page-open-btn:hover .ep-btn-arrow{transform:translateX(4px)}

/* ── Explore page: stories container ── */
.ep-stories-wrap{background:var(--night);min-height:100vh}
.ep-stories-wrap[hidden]{display:none}

/* ── Explore page: sticky story nav bar ── */
.ep-story-nav-bar{position:sticky;top:0;z-index:50;background:rgba(17,23,29,.95);backdrop-filter:blur(8px);border-bottom:1px solid #1e2d37;padding:0 5.5%;display:flex;align-items:center;gap:20px;min-height:58px;flex-wrap:wrap}
.ep-back-btn{background:none;border:none;color:#7a9aad;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;font-family:Arial,Helvetica,sans-serif;transition:color .18s;white-space:nowrap;flex-shrink:0}
.ep-back-btn:hover{color:#f0f7fb}
.ep-back-btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:3px}
.ep-nav-sep{width:1px;height:22px;background:#243340;flex-shrink:0}
.ep-switcher{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.ep-sw-btn{background:none;border:1px solid transparent;color:#627581;font-size:12px;font-weight:600;letter-spacing:.2px;padding:6px 12px;border-radius:5px;cursor:pointer;transition:color .18s,border-color .18s,background .18s;font-family:Arial,Helvetica,sans-serif;white-space:nowrap}
.ep-sw-btn:hover{color:#b3c0c8;border-color:#3b4a55}
.ep-sw-btn.ep-sw-active{color:var(--accent);border-color:rgba(209,247,111,.3);background:rgba(209,247,111,.06)}
.ep-sw-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:5px}
@media(max-width:650px){.ep-story-nav-bar{padding:0 5%;gap:12px;min-height:52px}.ep-sw-btn{font-size:11px;padding:5px 10px}}

/* ── Explore page: story panel ── */
.ep-story{opacity:0;display:none}
.ep-story.ep-story--visible{display:block}
.ep-story.ep-story--in{opacity:1}

/* ── Explore page: story hero ── */
.ep-story-hero{background:#080f16;padding:48px 5.5% 0}
.ep-story-hero-inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.ep-story-hero-visual{background:#080f16;grid-column:1/-1;padding-top:0;overflow:hidden;border-radius:8px 8px 0 0;position:relative;max-height:460px;overflow:hidden}
.ep-story-hero-visual img{display:block;width:100%;max-width:100%;object-fit:cover;object-position:top center;max-height:460px}
.ep-story-hero-visual .ep-hero-fallback{height:220px;display:flex;align-items:center;justify-content:center;color:#1e2d37;font-family:ui-monospace,monospace;font-size:13px;letter-spacing:1px}
.ep-story-hero-meta{padding:36px 0 40px;max-width:1380px;margin:auto;display:flex;flex-direction:column;gap:10px}
.ep-story-title{font-size:clamp(28px,4vw,52px);letter-spacing:-1.8px;margin:0;color:#f0f7fb;font-weight:750;line-height:1.1}
.ep-story-hero-status{order:-1}
.ep-story-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ep-story-tool{font-size:11px;color:#7a9aad;background:rgba(255,255,255,.05);border:1px solid #243340;border-radius:4px;padding:3px 9px;line-height:1.6;font-family:ui-monospace,monospace;letter-spacing:.2px}

/* ── Explore page: story layout (sidebar + content) ── */
.ep-story-body{max-width:1380px;margin:0 auto;padding:0 5.5%;display:grid;grid-template-columns:52px 1fr;column-gap:52px;padding-top:64px;padding-bottom:120px}
@media(max-width:999px){.ep-story-body{grid-template-columns:1fr;padding-top:48px}}

/* ── Explore page: progress sidebar ── */
.ep-sidebar{display:none}
@media(min-width:1000px){
  .ep-sidebar{display:block}
  .ep-progress-sticky{position:sticky;top:160px;padding-top:4px}
}
.ep-progress-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center}
.ep-prog-item{display:flex;flex-direction:column;align-items:center}
.ep-prog-dot-btn{width:30px;height:30px;border-radius:50%;border:1.5px solid #3b4a55;background:#0f1a22;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,background .25s;padding:0;font-family:ui-monospace,monospace;font-size:8px;font-weight:700;letter-spacing:.5px;color:#627581}
.ep-prog-dot-btn:hover,.ep-prog-dot-btn:focus-visible{border-color:#8fa8b5;color:#8fa8b5;outline:none}
.ep-prog-item.ep-prog--active .ep-prog-dot-btn{border-color:var(--accent);background:rgba(209,247,111,.12);color:var(--accent)}
.ep-prog-item.ep-prog--past .ep-prog-dot-btn{border-color:rgba(209,247,111,.35);color:rgba(209,247,111,.5)}
.ep-prog-connector{width:1px;height:48px;background:#1e2d37;transition:background .25s}
.ep-prog-item.ep-prog--past .ep-prog-connector{background:rgba(209,247,111,.2)}

/* ── Explore page: chapter content ── */
.ep-chapters{display:flex;flex-direction:column;gap:88px}
.ep-chapter{scroll-margin-top:180px}
.ep-chapter-kicker{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:600;margin:0 0 14px;text-transform:uppercase}
.ep-chapter-title{font-size:clamp(22px,3vw,36px);letter-spacing:-1px;margin:0 0 20px;color:#f0f7fb;font-weight:750;line-height:1.15}
.ep-chapter-body p{font-size:16px;color:#b3c0c8;line-height:1.8;margin:0 0 16px;max-width:640px}
.ep-chapter-body p:last-child{margin-bottom:0}

/* ── Explore page: tool chain (ch3) ── */
.ep-toolchain{display:flex;flex-wrap:wrap;gap:10px 0;align-items:stretch;margin-top:8px}
.ep-tool-node{background:rgba(255,255,255,.03);border:1px solid #243340;border-radius:8px;padding:18px 22px;display:flex;flex-direction:column;gap:5px;min-width:140px}
.ep-tool-name{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:var(--accent);font-weight:700;text-transform:uppercase}
.ep-tool-role{font-size:13px;color:#8fa8b5;line-height:1.55}
.ep-tool-connector{display:flex;align-items:center;padding:0 10px;color:#3b4a55;font-size:18px;flex-shrink:0;align-self:center}
@media(max-width:650px){.ep-toolchain{flex-direction:column}.ep-tool-connector{transform:rotate(90deg);padding:6px 0;width:24px;align-self:center}}

/* ── Explore page: chapter visual (ch4 screenshot) ── */
.ep-chapter-visual{margin-top:32px;border-radius:8px;overflow:hidden;background:#080f16}
.ep-chapter-visual img{display:block;width:100%;object-fit:cover;object-position:top;max-height:440px}
.ep-chapter-visual .ep-hero-fallback{height:180px}

/* ── Explore page: story footer navigation ── */
.ep-story-footer{border-top:1px solid #1e2d37;margin-top:24px;padding-top:32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ep-footer-nav-btn{background:none;border:1px solid #3b4a55;color:#8fa8b5;font-size:13px;font-weight:600;padding:11px 20px;border-radius:6px;cursor:pointer;transition:border-color .18s,color .18s;font-family:Arial,Helvetica,sans-serif}
.ep-footer-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.ep-footer-nav-btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.ep-footer-back-home{font-size:13px;color:#627581;border-bottom:1px solid #3b4a55;transition:color .18s,border-color .18s;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;padding:0;font-family:Arial,Helvetica,sans-serif}
.ep-footer-back-home:hover{color:#b3c0c8;border-bottom-color:#8fa8b5}
@media(max-width:650px){.ep-story-footer{flex-direction:column;align-items:flex-start}}

/* ── Explore page: reveal animation ── */
.ep-reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.ep-reveal.ep-revealed{opacity:1;transform:none}
.ep-reveal[data-delay="1"]{transition-delay:.1s}
.ep-reveal[data-delay="2"]{transition-delay:.2s}
.ep-reveal[data-delay="3"]{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.ep-reveal{opacity:1;transform:none;transition:none}.ep-story{transition:none}.ep-gallery{transition:none}.ep-page-entry{transition:none}.ep-page-open-btn .ep-btn-arrow{transition:none}}
@media print{.ep-story-nav-bar,.ep-sidebar,.ep-story-footer{display:none}}

/* ── CARD EXPAND (KI-PRAXIS + KOMPETENZEN) ── */
@keyframes cardBodyIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Desktop: make wrapper chain transparent so existing article grid/flex layout is preserved */
@media(min-width:651px){
  details.card-expand{display:contents}
  details.card-expand>summary{display:contents;pointer-events:none}
  .card-header{display:contents}
  .card-plus{display:none!important}
  /* Safety net: show card-body even if details open attribute isn't set yet */
  details.card-expand>.card-body{display:block!important}
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE ACCORDION CARDS  (< 651px only)
   One card component for every collapsible area:
   m-expand (Antrieb/Persönliches) · card-expand (KI-Praxis, Kompetenzen)
   · timeline (Berufserfahrung) · edu-entry (Ausbildung).
   The <details> element IS the card. Light and dark sections differ in
   colour only — structure, toggle and behaviour are identical.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:650px){
  :root{
    --gut:20px;              /* shared content inset → 350px at 390px */
    --acc-radius:12px;
    --acc-pad:18px;
    --acc-gap:12px;          /* between cards */
    --acc-body-gap:16px;     /* head → body */
    --acc-toggle:36px;
    --acc-title:19px;

    --acc-bg:#ffffff;
    --acc-border:#d6dfe3;
    --acc-bg-open:#edf2ff;
    --acc-border-open:#335de8;

    --acc-bg-dark:#182630;
    --acc-border-dark:#344650;
    --acc-bg-dark-open:#192943;

    --acc-blue:#335de8;
  }

  /* ── The card ──────────────────────────────────────────────────── */
  details.m-expand,
  details.card-expand,
  .timeline details,
  details.edu-entry{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0 0 var(--acc-gap);
    padding:0;
    background:var(--acc-bg);
    border:1px solid var(--acc-border);
    border-radius:var(--acc-radius);
    transition:background-color 180ms ease,border-color 180ms ease;
  }
  details.m-expand[open],
  details.card-expand[open],
  .timeline details[open],
  details.edu-entry[open]{
    background:var(--acc-bg-open);
    border-color:var(--acc-border-open);
  }
  /* [data-reveal] sets its own transition and would drop the colour fade */
  details.m-expand[data-reveal],
  details.card-expand[data-reveal],
  .timeline details[data-reveal],
  details.edu-entry[data-reveal]{
    transition:opacity .55s ease,transform .55s ease,
               background-color 180ms ease,border-color 180ms ease;
  }

  /* :target tinting from the base sheet would fight the card colours */
  details:target{background:var(--acc-bg)}
  details[open]:target{background:var(--acc-bg-open)}

  /* ── Head: the whole row is the control ────────────────────────── */
  details.m-expand>summary,
  details.card-expand>summary,
  .timeline details>summary,
  details.edu-entry>summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--acc-toggle);
    column-gap:var(--acc-gap);
    row-gap:0;              /* must stay 0 — the toggle spans every row */
    align-items:center;
    padding:var(--acc-pad);
    margin:0;
    background:none;
    border:0;
    border-radius:var(--acc-radius);
    cursor:pointer;
    list-style:none;
    font:inherit;
    color:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  details.m-expand>summary::-webkit-details-marker,
  details.card-expand>summary::-webkit-details-marker,
  .timeline details>summary::-webkit-details-marker,
  details.edu-entry>summary::-webkit-details-marker{display:none}

  /* Head text occupies column 1 and wraps inside it */
  .card-header,.role,.edu-role{grid-column:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .date,.edu-date{grid-column:1;margin-bottom:6px}
  .card-header h3,.role strong,.edu-role strong{overflow-wrap:break-word}

  /* ── Toggle: filled blue square, identical everywhere ──────────── */
  .card-plus,
  .timeline details .plus,
  details.edu-entry .plus{
    grid-column:2;
    /* `1/-1` would resolve against the EXPLICIT grid, which has no rows here,
       so it collapsed to row 1 and pinned the toggle to the top. Spanning a
       generous count covers every head; the extra rows are empty and
       row-gap is 0, so they add no height. */
    grid-row:1/span 9;
    align-self:center;
    justify-self:end;
    width:var(--acc-toggle);
    height:var(--acc-toggle);
    flex:0 0 var(--acc-toggle);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;
    border:0;
    border-radius:9px;
    background:var(--acc-blue);
    color:#fff;
    transform:none!important;
    transition:none;
    font-size:0;                    /* hides the literal "+" in the markup */
  }
  .card-plus::after,
  .timeline details .plus::after,
  details.edu-entry .plus::after,
  details.m-expand>summary::after{
    content:'+';
    font-size:18px;
    font-weight:400;
    line-height:1;
    color:#fff;
    display:block;
  }
  details.card-expand[open] .card-plus::after,
  .timeline details[open] .plus::after,
  details.edu-entry[open] .plus::after,
  details.m-expand[open]>summary::after{content:'−'}
  /* m-expand carries no icon element — the pseudo-element IS the square */
  details.m-expand>summary::after{
    grid-column:2;
    justify-self:end;
    width:var(--acc-toggle);
    height:var(--acc-toggle);
    border-radius:9px;
    background:var(--acc-blue);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  summary:focus-visible{outline:3px solid var(--acc-blue);outline-offset:2px;border-radius:var(--acc-radius)}
  .skills-section summary:focus-visible{outline-color:#8fb4ff}

  /* ── Body: same surface, no divider, no inner box ──────────────── */
  details.m-expand[open]>summary,
  details.card-expand[open]>summary,
  .timeline details[open]>summary,
  details.edu-entry[open]>summary{padding-bottom:0}

  details.card-expand>.card-body,
  .timeline details>.detail,
  details.edu-entry>.edu-detail,
  details.m-expand>:not(summary){
    padding:var(--acc-body-gap) var(--acc-pad) var(--acc-pad);
    margin:0;
    border:0;
    background:none;
    animation:none!important;       /* no slide-in; colour transition only */
  }

  /* ── Section wrappers carry no lines or boxes of their own ─────── */
  .timeline,.edu-timeline,.build-grid,.skill-grid{
    display:block;
    margin:22px 0 0;
    padding:0;
    gap:0;
    background:none;
    border:0;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
  }
  .build-grid article,.skill-grid article{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    background:none;
    border:0;
    border-radius:0;
  }
  .skill-grid .ai-card{background:none}

  /* ── Typography ────────────────────────────────────────────────── */
  .card-header h3,.role strong,.edu-role strong{
    font-size:var(--acc-title);
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.2px;
    margin:0;
  }
  .build-grid .number,.skill-grid .number{font-size:12px;line-height:1.5;display:block}
  .date,.edu-date,.role>span,.edu-role>span{font-size:14px;line-height:1.45}
  .role small{font-size:13px;line-height:1.5}
  .edu-role small{font-size:12px;line-height:1.45}
  .card-body p,.detail,.detail p,.detail li,.edu-detail,.edu-detail p,
  details.m-expand .human-note p,details.m-expand>p{font-size:16px;line-height:1.55}
  .build-grid p,.skill-grid p{margin:0;max-width:none}
  .detail h3{font-size:17px;margin-top:20px}
  .location{margin-bottom:12px}
  .detail ul{margin:12px 0 0;padding-left:20px}
  .tags,.skill-grid .tags{margin-top:16px}
  .evidence-link{display:inline-block;margin-top:14px}

  /* ── Dark section: colours only ────────────────────────────────── */
  .skills-section details.card-expand{background:var(--acc-bg-dark);border-color:var(--acc-border-dark)}
  .skills-section details.card-expand[open]{background:var(--acc-bg-dark-open);border-color:var(--acc-border-open)}
  .skills-section .card-header h3{color:#f0f7fb}
  .skills-section .card-body p{color:#c3cfd7}

  /* ── Content that must not read as a box inside the open card ──── */
  /* keeps the body padding from the shared rule — only the box goes away */
  details.m-expand .human-note{border:0;background:none;margin:0}
  details.m-expand .human-note>span{display:none}
  .thesis-block{background:none;border-radius:0;padding:10px 0 0 14px;margin:14px 0 0}
  .edu-detail,.detail{margin-left:0;padding-right:var(--acc-pad)}

  /* Non-collapsible rows keep their own layout, outside this component */
  .edu-date{white-space:normal}
  .degree-badge{display:none}
  .edu-simple{grid-template-columns:1fr;gap:4px;padding:16px 0}
}

@media(prefers-reduced-motion:reduce){
  details.m-expand,details.card-expand,.timeline details,details.edu-entry{transition:none!important}
}

/* ── HIGHLIGHTS (2×2) ───────────────────────────────────────────────
   Row-level alignment via subgrid: icon, heading and description of
   both cards in a row share the same three track lines, so they start
   at the same height no matter how many lines the heading takes.
   The old `.proof-strip article:first-child` rule (0,2,1) outranked
   `.proof-strip .proof-card` (0,2,0) and gave card 1 gap:3px while the
   rest got 14px — that specificity collision is what knocked the first
   tile out of alignment. ──────────────────────────────────────────── */
@media(max-width:650px){
  .proof-strip{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;
    padding:0;
    overflow:hidden;
  }
  .proof-strip .proof-card{
    display:grid;
    grid-template-rows:auto auto auto;
    align-content:start;
    gap:10px;
    padding:20px var(--gut);
    margin:0;
    border:0;
    overflow:hidden;
  }
  .proof-strip .proof-card:nth-child(odd){border-right:1px solid #243340}
  .proof-strip .proof-card:nth-child(-n+2){border-bottom:1px solid #243340}
  .proof-icon{grid-row:1;align-self:center}
  .proof-card strong{grid-row:2;font-size:17px;line-height:1.3;overflow-wrap:break-word;align-self:start}
  .proof-card>span{grid-row:3;align-self:start}
}
@supports(grid-template-rows:subgrid){
  @media(max-width:650px){
    .proof-strip .proof-card{grid-row:span 3;grid-template-rows:subgrid}
  }
}
/* Very narrow screens: one column rather than cramped two */
@media(max-width:340px){
  .proof-strip{grid-template-columns:minmax(0,1fr)}
  .proof-strip .proof-card:nth-child(odd){border-right:0}
  .proof-strip .proof-card{border-bottom:1px solid #243340}
  .proof-strip .proof-card:last-child{border-bottom:0}
}

/* ── MOBILE FUNDAMENTALS ── */
@media(max-width:650px){
  header,.hero,.section,.skills-section,.closing,footer{
    padding-left:var(--gut);
    padding-right:var(--gut);
  }
  .lead,.ai-lead,.skills-intro p,.about-copy,.personal p,.detail,.edu-detail{overflow-wrap:break-word}
  .email,.evidence-link,.community-block a{overflow-wrap:anywhere}
  img,svg,video{max-width:100%}
}

/* ── LANGUAGE SWITCH ── */
.lang-switch{display:flex;align-items:center;gap:7px;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1px;font-weight:700}
.lang-switch .lang-current{color:var(--accent);cursor:default}
.lang-switch .lang-sep{color:#3b4a55}
.lang-switch a{color:#7a9aad;transition:color .2s;text-decoration:none}
.lang-switch a:hover{color:var(--accent)}
@media(max-width:400px){.lang-switch{display:none}}

/* ── MOBILE READING PROGRESS ─────────────────────────────────────────
   Colour, thickness and timing are taken verbatim from .scroll-progress
   (the desktop bar): 3px, linear-gradient(--pink → --accent),
   z-index 1001, pointer-events:none, transition .08s linear. Only the
   gradient axis changes, 90deg → 180deg, so pink sits at the top and
   lime at the end of the filled progress.
   Hidden by default, so it stays hidden without JavaScript. ─────────── */
.read-progress{display:none}

@media(max-width:650px){
  /* only one indicator at a time */
  .scroll-progress{display:none}

  body.js-read-progress .read-progress{
    display:block;
    position:fixed;
    right:calc(8px + env(safe-area-inset-right,0px));
    top:88px;
    bottom:calc(24px + env(safe-area-inset-bottom,0px));
    width:3px;
    background:rgba(120,136,148,.45);   /* reads on both light and dark sections */
    z-index:1001;
    pointer-events:none;
  }
  body.nav-open .read-progress{opacity:0}

  .rp-fill{
    display:block;
    position:absolute;
    top:0;left:0;right:0;
    height:0;
    background:linear-gradient(180deg,var(--pink),var(--accent));
    transition:height .08s linear;
  }

  .rp-dot{
    position:absolute;
    left:50%;
    width:4px;height:4px;
    margin:-2px 0 0 -2px;
    border-radius:50%;
    background:rgba(120,136,148,.85);
  }
  .rp-dot.is-active{
    width:7px;height:7px;
    margin:-3.5px 0 0 -3.5px;
    background:var(--pink);
  }
}

@media(prefers-reduced-motion:reduce){.rp-fill{transition:none}}
@media print{.read-progress{display:none}}