/* About page only: portrait introduction followed by a horizontal résumé. */
.resume-hero{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.25fr);gap:clamp(40px,7vw,100px);align-items:center;padding-block:60px 76px}
.resume-portrait{margin:0;position:relative;max-width:390px}
.resume-portrait>img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:18px}
.resume-portrait figcaption{display:flex;justify-content:space-between;margin-top:14px;font:500 .6875rem/1.5 SFMono-Regular,Consolas,monospace;letter-spacing:.1em;color:var(--muted)}
.resume-page .resume-intro h1{font-size:clamp(2.7rem,4.6vw,4.8rem);letter-spacing:-.06em;line-height:1.08}
.resume-page .resume-intro h1>span{color:var(--accent)}
.resume-name{font-size:1.125rem;font-weight:550;letter-spacing:-.02em;margin-top:28px;color:var(--ink)}
.resume-description{font-size:1.125rem;line-height:1.8;color:var(--muted);max-width:580px;margin-top:16px}
.resume-topics{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0 30px}
.resume-topics>span{font:500 .6875rem/1.5 SFMono-Regular,Consolas,monospace;letter-spacing:.05em;border:1px solid var(--line);padding:7px 11px;border-radius:5px;color:var(--muted)}
.resume-journey{background:var(--surface);padding-block:55px 40px;border-block:1px solid var(--line);scroll-margin-top:100px}
.journey-heading-row{display:flex;justify-content:space-between;gap:25px;align-items:end}
.journey-heading-row .eyebrow{margin-bottom:16px}
.resume-page .journey-heading-row h2{font-size:clamp(2.4rem,4vw,3.8rem);letter-spacing:-.055em;line-height:1.12}
.resume-page .journey-heading-row h2>span{color:var(--accent)}
.journey-description{color:var(--muted);font-size:1rem;line-height:1.65;margin-top:16px}
.journey-controls{display:flex;gap:10px}.journey-controls[hidden]{display:none}
.journey-controls button{height:46px;width:46px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:1.3rem}
.journey-controls button:hover:not(:disabled){background:var(--gold);color:#17181a;border-color:var(--gold)}
.journey-controls button:disabled{opacity:.35;cursor:default}
.journey-meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:36px 0 24px;color:var(--muted)}
.journey-meta>span,.journey-bottom>span{font:500 .6875rem/1.5 SFMono-Regular,Consolas,monospace;letter-spacing:.07em}.journey-meta>p{font-size:.8125rem;line-height:1.6}
.journey-track{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;padding:6px 0 20px;scroll-behavior:smooth}
.journey-track:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}
.journey-list{display:flex;list-style:none;margin:0;padding:0;align-items:stretch}
.journey-stop{flex:0 0 clamp(290px,28vw,340px);min-width:0;scroll-snap-align:start;display:flex;flex-direction:column}
.journey-date{display:flex;justify-content:space-between;align-items:center;padding-right:25px;font:500 .8125rem/1.5 SFMono-Regular,Consolas,monospace;color:var(--accent)}
.journey-number{color:var(--muted);font-size:.625rem}
.journey-marker{border-top:2px solid var(--line);height:32px;margin-top:20px;position:relative}
.journey-marker>span{position:absolute;top:-7px;left:0;width:12px;height:12px;border:2px solid var(--accent);background:var(--surface);border-radius:50%}
.journey-study .journey-marker>span{background:var(--gold);border-color:var(--gold)}
.journey-current .journey-marker>span{background:var(--accent)}
.milestone{padding:24px;margin-right:20px;border:1px solid var(--line);border-radius:14px;background:var(--paper);min-height:320px;flex:1;display:flex;flex-direction:column}
.milestone-kind{font:500 .625rem/1.5 SFMono-Regular,Consolas,monospace;letter-spacing:.07em;color:var(--accent);margin-bottom:24px}
.milestone h3{font-size:1.65rem;line-height:1.2;letter-spacing:-.04em;font-weight:600}
.milestone-role{font-size:.875rem;font-weight:500;line-height:1.6;margin-top:10px;color:var(--ink)}
.milestone-summary{font-size:.9375rem;line-height:1.7;margin:18px 0 25px;color:var(--muted)}
.milestone-details{border-top:1px solid var(--line);padding-top:15px;margin-top:auto}
.milestone-details>summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:10px;cursor:pointer;font-size:.8125rem;line-height:1.6}
.milestone-details>summary::-webkit-details-marker{display:none}.milestone-details>summary>span{font-size:1.2rem}.milestone-details[open]>summary>span{transform:rotate(45deg)}
.milestone-details>p{font-size:.875rem;line-height:1.75;color:var(--muted);margin-top:16px}
.milestone-details>.milestone-period{font-size:.75rem;color:var(--accent)}
.journey-project-link{font-size:.8125rem;margin-top:18px;gap:8px}
.journey-current .milestone{border-color:var(--gold)}
.journey-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;color:var(--muted)}
.journey-bottom .text-link{font-size:.875rem}
@media(min-width:1500px){.resume-hero{padding-block:75px 90px}.resume-portrait{max-width:410px}}
@media(max-width:800px){.resume-hero{grid-template-columns:minmax(210px,.8fr) minmax(0,1fr);gap:35px;padding-top:42px}.resume-description{font-size:1rem}.resume-page .resume-intro h1{font-size:2.7rem}.resume-name{margin-top:22px}.resume-topics{gap:8px}.resume-topics>span{font-size:.625rem}.journey-stop{flex-basis:300px}.resume-journey{scroll-margin-top:140px}}
@media(max-width:640px){.resume-hero{grid-template-columns:1fr;gap:32px;padding-block:30px 48px}.resume-portrait{max-width:340px;width:100%;margin-inline:auto}.resume-page .resume-intro h1{font-size:clamp(2.7rem,9vw,3.5rem)}.resume-description{font-size:1.0625rem}.resume-journey{padding-block:40px 30px}.journey-heading-row{align-items:start;flex-wrap:wrap;gap:20px}.journey-meta{align-items:start;flex-direction:column;gap:8px;margin-top:24px}.journey-stop{flex-basis:84%;min-width:260px}.milestone{padding:22px;margin-right:16px}.journey-bottom{align-items:start;flex-direction:column;gap:14px}}
@media(prefers-reduced-motion:reduce){.journey-track{scroll-behavior:auto}}

/* Source logos identify each chapter without changing their original colors. */
.milestone-brand{display:flex;align-items:center;justify-content:center;width:156px;max-width:100%;height:66px;padding:9px 12px;margin:-6px 0 21px;background:#fff;border:1px solid #e8e7e2;border-radius:9px}
.milestone-brand img{max-width:100%;max-height:48px;width:132px;height:48px;object-fit:contain}
.milestone-brand-dark{background:#17181a;border-color:#343537}
.milestone{min-height:395px}

/* Personal outlook directly beneath Kareem’s name. */
.resume-outlook{margin-top:25px;font-size:clamp(1.125rem,1.65vw,1.5rem);font-weight:500;line-height:1.6;letter-spacing:-.025em;color:var(--ink)}
.resume-outlook>span{display:block}
.resume-outlook+.resume-description{margin-top:24px}