/* ===== Type scale and surfaces =====
   Body copy sits at the 16px web standard; labels never go below 13px. Display type stays big,
   but the steps in between (lead, card titles) carry the hierarchy instead of tiny text. */
:root{
 --fs-small:.875rem;--fs-body:1rem;--fs-lead:clamp(1.0625rem,.95rem + .45vw,1.25rem);--fs-h3:clamp(1.375rem,1.1rem + .9vw,1.75rem);
 --lh-body:1.65;--muted:#a69e91;--muted-2:#857e72;--line:#ffffff14;--line-2:#ffffff22;
 --surface:#1a1915;--surface-2:#22201b;--ease-out:cubic-bezier(.16,1,.3,1)
}
body{font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
::selection{background:#ff641b;color:#14120e}
h1{font-size:clamp(60px,8.4vw,148px)}
.hero .intro{font-size:var(--fs-lead);line-height:1.6;max-width:42ch;color:#c9c2b5}

/* ===== Buttons ===== */
.hero .actions{gap:14px;flex-wrap:wrap}
.btn-primary,.hero .primary.btn-primary{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:16px;min-height:56px;padding-block:0;padding-inline:24px 8px;border:0;border-radius:999px;background:var(--orange);color:#17120c;font-size:16px;font-weight:600;letter-spacing:-.005em;box-shadow:0 10px 30px -10px #ff641b99,inset 0 1px 0 #ffffff40;transition:box-shadow .4s var(--ease-out),background .3s}
.btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);translate:-120% 0;transition:translate .8s var(--ease-out)}
.btn-primary:hover::before{translate:120% 0}
.btn-primary:hover{background:#ff7a38;box-shadow:0 16px 36px -12px #ff641bbb,inset 0 1px 0 #ffffff50}
.btn-primary .btn-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#17120c;color:var(--orange);transition:rotate .5s var(--ease-out)}
.btn-primary:hover .btn-icon{rotate:-45deg}
[dir=rtl] .btn-primary .btn-icon .icon{scale:-1 1}
[dir=rtl] .btn-primary:hover .btn-icon{rotate:45deg}
.btn-primary:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.btn-ghost,.hero .text-link.btn-ghost{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border:1px solid var(--line-2);border-bottom:1px solid var(--line-2);border-radius:999px;color:var(--bone);font-size:16px;font-weight:500;background:#ffffff06;transition:border-color .3s,background .3s,color .3s}
.btn-ghost:hover{border-color:#ffffff55;background:#ffffff0f;color:#fff}
.brand-logo{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}

/* ===== Projects: the screen panel that opens the section =====
   A 16:10 slide the size of the laptop screen. Its type scales with the panel (cqw), so it looks
   the same on the laptop screen as it does once it fills the page. */
.work{padding:0;background:transparent;color:var(--bone)}
.work-screen{container-type:inline-size;position:relative;width:100%;aspect-ratio:var(--screen-aspect,1.6);overflow:hidden;background:radial-gradient(60% 70% at 85% 10%,#ff641b26,transparent 70%),#13120f;transform-origin:0 0}
.work-screen::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:6cqw 6cqw;-webkit-mask:radial-gradient(80% 80% at 70% 30%,#000,transparent);mask:radial-gradient(80% 80% at 70% 30%,#000,transparent)}
.work-screen-inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 7cqw;gap:2.4cqw}
.work-screen h2{margin:0;font-size:12.5cqw;line-height:.86;letter-spacing:-.02em;text-wrap:balance}
.work-sub{margin:0;font-size:clamp(15px,2.1cqw,32px);line-height:1.35;color:#c4bcae;max-width:30ch}
.work-ruler{list-style:none;margin:max(6cqw,40px) 0 0;padding:0;display:flex;justify-content:space-between;border-top:1px solid var(--line-2);font-size:clamp(11px,1.15cqw,17px);font-variant-numeric:tabular-nums;color:var(--muted-2)}
.work-ruler li{position:relative;padding-top:1.4cqw;color:var(--bone)}
/* Dots are centred on the 1px ruler line: the li starts right under the border, so the line's centre is at -0.5px. */
.ruler-dot{position:absolute;top:-.5px;inset-inline-start:0;width:.9cqw;height:.9cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 .4cqw #ff641b2e;translate:0 -50%}
.ruler-year{display:inline-block;translate:calc(-50% + max(.45cqw,3px)) 0}
[dir=rtl] .ruler-year{translate:calc(50% - max(.45cqw,3px)) 0}
.work-ruler .ruler-now{color:var(--orange)}
.work-ruler .ruler-now .ruler-dot{background:transparent;border:1px solid var(--orange);box-shadow:none}
.work-cue{margin:1.5cqw 0 0;display:flex;align-items:center;gap:.8cqw;font-size:clamp(13px,1.2cqw,18px);color:var(--muted)}
.work-cue .icon{width:1.3em;height:1.3em;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{50%{translate:0 .25em}}
@container (width < 560px){.work-cue{display:none}.work-screen-inner{gap:3.2cqw}}

/* ===== Projects: filters and timeline ===== */
.work-body{position:relative;background:#13120f;padding:clamp(40px,6vw,80px) clamp(20px,5vw,72px) clamp(64px,8vw,120px)}
.work-body>*{max-width:1240px;margin-inline:auto}
.work .project-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(40px,5vw,64px)}
.work .project-filters button{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--muted);font:500 15px 'DM Sans',Arial,sans-serif;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.work .project-filters button:hover{color:var(--bone);border-color:#ffffff40}
.work .project-filters button.active{background:var(--bone);border-color:var(--bone);color:#16130f}
.timeline{--label-fs:clamp(44px,4.4vw,68px);--label-mid:calc(var(--label-fs)*.45);--sticky-top:clamp(24px,6vh,64px);--year-col:132px;--gap:72px;--spine:calc(var(--year-col) + var(--gap)/2);position:relative;list-style:none;margin:0;padding:0}
.timeline::before,.timeline::after{content:'';position:absolute;z-index:0;top:var(--spine-top,37px);bottom:var(--spine-bottom,0px);inset-inline-start:calc(var(--spine) - 1px);width:2px;border-radius:2px;pointer-events:none}
.timeline::before{background:var(--line-2)}
/* The spine is drawn by the dot of the morph (morph.js sets --line-pen, in px from the spine's top). */
.timeline::before,.timeline::after{clip-path:inset(0 0 max(0px,calc(100% - var(--line-pen,100%))) 0);-webkit-mask:linear-gradient(transparent,#000 var(--spine-fade),#000 calc(100% - var(--spine-fade)),transparent);mask:linear-gradient(transparent,#000 var(--spine-fade),#000 calc(100% - var(--spine-fade)),transparent)}
.timeline{--spine-fade:96px}
@media(max-width:760px){.timeline{--spine-fade:64px}}
/* The orange part ends exactly at the current dot (portfolio.js sets --line-fill, in px from the spine's top). */
.timeline::after{background:var(--orange);clip-path:inset(0 0 max(0px,calc(100% - min(var(--line-pen,100%),var(--line-fill,0px)))) 0)}
/* The dot that is currently sticky pings softly and glows. */
.tl-track .tl-node::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--orange);opacity:0;pointer-events:none}
.tl-item.is-current .tl-track .tl-node{box-shadow:0 0 0 5px #ff641b2e,0 0 18px 3px #ff641b70}
.tl-item.is-current .tl-track .tl-node::after{animation:node-ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes node-ping{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(2.8);opacity:0}}
.tl-year{display:grid;grid-template-columns:var(--year-col) 1fr;column-gap:var(--gap);align-items:start;padding-bottom:clamp(40px,5vw,64px)}
.tl-year[hidden]{display:none}
.tl-year-label{position:sticky;top:var(--sticky-top);margin:0;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;font-size:var(--label-fs);line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1px #ffffff40;transition:color .6s var(--ease-out),-webkit-text-stroke-color .6s}
.tl-year.in-view .tl-year-label{color:var(--bone);-webkit-text-stroke-color:transparent}
.tl-items{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.tl-item{position:relative}
.tl-item[hidden]{display:none}
.tl-node{position:absolute;z-index:2;top:30px;inset-inline-start:calc(var(--gap)/-2 - 7px);width:14px;height:14px;border-radius:50%;background:#13120f;border:2px solid #4a453c;transition:border-color .5s,background .5s,box-shadow .5s}
/* A project's dot rides down its card (like the year label) and stops at the card's end. */
.tl-track{position:absolute;z-index:2;top:0;bottom:0;inset-inline-start:calc(var(--gap)/-2 - 7px);width:14px;pointer-events:none}
.tl-track .tl-node{position:sticky;inset:auto;top:calc(var(--sticky-top) + var(--label-mid) - 7px);display:block;margin-top:calc(var(--label-mid) - 7px)}

.tl-item.in-view .tl-node{border-color:var(--orange);background:var(--orange);box-shadow:0 0 0 6px #ff641b22}
.tl-node-icon{top:50%;translate:0 -50%;inset-inline-start:calc(var(--gap)/-2 - 19px);width:38px;height:38px;display:grid;place-items:center;color:var(--muted);background:#1d1b17;border:1px solid var(--line-2)}
.tl-node-icon .icon{width:18px;height:18px}
.tl-item.in-view .tl-node-icon{background:#241d16;border-color:#ff641b66;color:var(--orange);box-shadow:0 0 0 5px #13120f}
.tl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;font-size:var(--fs-small);color:var(--muted)}
.tl-meta>span:first-child{font-variant-numeric:tabular-nums;color:#f0a77e;font-weight:600}
.tl-kind{display:inline-flex;align-items:center;gap:12px}
.tl-kind::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}

/* Milestones read as quiet waypoints, not cards. */
/* Milestones: the circle sits on the year label's centre, and so does the title line next to it. */
.tl-milestone{padding:0}
@media(min-width:761px){.tl-milestone .tl-node-icon{top:calc(var(--label-mid) - 19px);translate:none}.tl-milestone-body{margin-top:calc(var(--label-mid) - 41px)}}
.tl-milestone .tl-meta{margin-bottom:4px}
.tl-milestone-title{margin:0;font-size:1.0625rem;font-weight:600;color:var(--bone)}
.tl-milestone-sub{margin:2px 0 0;font-size:var(--fs-small);color:var(--muted)}

/* Project cards: layered surface, a highlight that follows the pointer, and a lit border. */
.tl-card{position:relative;isolation:isolate;transform-style:flat;display:grid;gap:clamp(24px,3vw,40px);padding:clamp(22px,2.6vw,34px);border-radius:22px;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);box-shadow:inset 0 1px 0 #ffffff0a,0 30px 60px -40px #000;transition:border-color .4s,translate .6s var(--ease-out),transform .5s var(--ease-out)}
.tl-card::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(520px circle at var(--mx,50%) var(--my,-20%),#ff7a3514,transparent 60%);opacity:0;transition:opacity .5s}
.tl-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-20%),#ff8a4ccc,transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .5s;pointer-events:none}
@media(hover:hover){.tl-card:hover::before,.tl-card:hover::after{opacity:1}.tl-card:hover{translate:0 -3px}}
.tl-card h3{margin:0 0 10px;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;font-weight:650;color:#f5f0e8;text-wrap:balance}
.tl-featured .tl-card h3{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem)}
.tl-lead{margin:0 0 10px;font-size:var(--fs-lead);line-height:1.45;color:#e6dfd3;font-weight:500}
.tl-body{margin:0;max-width:62ch;color:#b8b0a3;text-wrap:pretty}
.tl-note{margin:12px 0 0;font-size:var(--fs-small);color:var(--muted-2)}
.tl-card-main{min-width:0}
.tl-featured .tl-card{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}

/* Tech badges: brand logo in brand colour. */
.tech{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.tech-badge{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px 0 9px;border-radius:10px;border:1px solid var(--line);background:#ffffff07;font-size:var(--fs-small);font-weight:500;color:#ddd5c8;transition:border-color .25s,background .25s}
.tech-badge:hover{border-color:color-mix(in srgb,var(--brand,#e9e2d4) 55%,transparent);background:color-mix(in srgb,var(--brand,#e9e2d4) 12%,transparent)}
.tech-logo{width:18px;height:18px;flex:none;display:block}
span.tech-logo{background:var(--brand,var(--bone));-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.tech-logo-none{display:grid;place-items:center;background:none!important;-webkit-mask:none!important;mask:none!important;color:var(--muted-2)}
.tech-logo-none .icon{width:16px;height:16px}
.tl-extra{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.tl-extra-label{margin:0 0 6px;font-weight:600;color:var(--bone)}
.tl-extra-body{margin:0;max-width:62ch;color:#b8b0a3}

/* Links. */
.tl-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tl-link{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 15px;border-radius:12px;border:1px solid var(--line-2);color:var(--bone);font-size:15px;font-weight:500;transition:border-color .25s,background .25s}
.tl-link:hover{border-color:#ffffff50;background:#ffffff0a}
.tl-link .icon:last-child{width:15px;height:15px;opacity:.6;transition:translate .3s var(--ease-out),opacity .3s}
.tl-link:hover .icon:last-child{translate:2px -2px;opacity:1}
[dir=rtl] .tl-link .icon:last-child{scale:-1 1}
[dir=rtl] .tl-link:hover .icon:last-child{translate:-2px -2px}
.tl-link-primary{background:var(--orange);border-color:var(--orange);color:#17120c;font-weight:600}
.tl-link-primary:hover{background:#ff7a38;border-color:#ff7a38}
.tl-link .brand-logo{width:17px;height:17px}
.tl-private{border-style:dashed;color:var(--muted);cursor:help}
.tl-link:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Featured visuals. */
.tl-visual{position:relative;display:block;border-radius:14px;overflow:visible}
.tl-shot{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 30px 60px -30px #000c;transition:transform .8s var(--ease-out)}
.tl-shot-0{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
[dir=rtl] .tl-shot-0{transform:perspective(1400px) rotateY(6deg) rotateX(2deg)}
.tl-card:hover .tl-shot-0{transform:none}
.tl-shot-1,.tl-shot-2{position:absolute;bottom:-18px;width:21%;border-radius:14px;border:3px solid #2b2823}
.tl-shot-1{inset-inline-end:16%;rotate:-4deg}
.tl-shot-2{inset-inline-end:-2%;rotate:5deg;bottom:-6px}
.tl-card:hover .tl-shot-1{translate:0 -8px}.tl-card:hover .tl-shot-2{translate:0 -14px}

@media(max-width:1000px){.tl-featured .tl-card{grid-template-columns:1fr}.tl-featured .tl-visual{order:-1;margin-bottom:12px}.tl-shot-0{transform:none}}
@media(max-width:760px){
 .timeline{--year-col:0px;--gap:44px;--spine:12px}
 .timeline::before,.timeline::after{inset-inline-start:11px}
 .tl-year{grid-template-columns:1fr;padding-inline-start:var(--gap)}
 .tl-year-label{position:relative;top:0;margin-bottom:18px;font-size:44px}
 .tl-node,.tl-track{inset-inline-start:calc(var(--gap)*-1 + 5px)}
 .tl-track .tl-node{inset:auto;top:24px}
 .tl-node-icon{inset-inline-start:calc(var(--gap)*-1 - 6px);width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.tl-item.is-current .tl-track .tl-node::after{animation:none}.tl-card,.tl-shot,.btn-primary::before{transition:none}.work-cue .icon{animation:none}}

/* ===== About and contact on the same scale ===== */
.about>.eyebrow{display:none}
.about{grid-template-columns:1fr;max-width:1240px;margin-inline:auto;padding-block:clamp(72px,9vw,128px)}
.about h2{font-size:clamp(40px,5vw,76px);line-height:1.02}
.about p:not(.eyebrow){font-size:var(--fs-lead);line-height:1.7;max-width:60ch;color:#b9b1a4}
.skills{font:500 var(--fs-small) 'DM Sans',Arial,sans-serif;gap:10px;color:#e9c3a6}
.skills span{padding:8px 14px;border:1px solid var(--line-2);border-radius:999px}
.profile-facts small{font:600 13px 'DM Sans',Arial,sans-serif;letter-spacing:.06em;color:#f0a77e}
.profile-facts strong{font-size:1.125rem;font-weight:600;color:var(--bone)}
.about .profile-facts p{font-size:15px;line-height:1.6;color:var(--muted)}

.work .project-filters button span{font:inherit;margin:0;color:inherit}
/* During the laptop journey the panel lives in the sticky hero, where the screen ends up. */
.journey-on .hero>.work-screen{position:absolute;left:0;z-index:3;pointer-events:none;will-change:transform,opacity}
.journey-on .work{padding-top:var(--panel-space,100svh);pointer-events:none}
.journey-on .work-body{pointer-events:auto}

/* ===== Custom cursor (mouse and pen only) ===== */
.has-cursor,.has-cursor *{cursor:none!important}
.cursor{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.visible{opacity:1}
.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;will-change:transform}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--orange);transition:opacity .2s}
.cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;display:grid;place-items:center;border-radius:50%;border:1.5px solid #e9e2d488;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .3s,border-color .3s,border-radius .3s}
.cursor-label{font:600 12px 'DM Sans',Arial,sans-serif;letter-spacing:.04em;color:#17120c;opacity:0;transition:opacity .2s;white-space:nowrap}
html[lang=ar] .cursor-label{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
.cursor[data-state=link] .cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:#ff641b1f;border-color:var(--orange)}
.cursor[data-state=link] .cursor-dot{opacity:0}
.cursor[data-state=drag] .cursor-ring,.cursor[data-state=open] .cursor-ring,.cursor[data-state=grabbing] .cursor-ring{width:72px;height:72px;margin:-36px 0 0 -36px;background:var(--orange);border-color:var(--orange)}
.cursor[data-state=drag] .cursor-label,.cursor[data-state=open] .cursor-label{opacity:1}
.cursor[data-state=drag] .cursor-dot,.cursor[data-state=open] .cursor-dot,.cursor[data-state=grabbing] .cursor-dot{opacity:0}
.cursor[data-state=grabbing] .cursor-ring{width:52px;height:52px;margin:-26px 0 0 -26px}
.cursor[data-state=text] .cursor-ring{width:4px;height:30px;margin:-15px 0 0 -2px;border-radius:2px;border-color:transparent;background:#e9e2d4aa}
.cursor[data-state=text] .cursor-dot{opacity:0}
/* Pressing only fades: a scale here would be applied after the move and pull the ring off the pointer. */
.cursor.pressed .cursor-ring{opacity:.6}
.cursor-ring{transition-property:width,height,margin,background,border-color,border-radius,opacity}
[data-magnetic]{transition:translate .35s var(--ease-out),background .3s,box-shadow .4s,border-color .3s,color .3s}

/* Secondary hero action: same pill and icon chip, in the light tone. */
.btn-primary.btn-secondary{background:var(--bone);color:#17120c;box-shadow:0 10px 30px -14px #e9e2d466,inset 0 1px 0 #ffffff80}
.btn-primary.btn-secondary:hover{background:#fff;box-shadow:0 16px 36px -14px #e9e2d488}
.btn-primary.btn-secondary .btn-icon{background:#17120c;color:var(--bone)}
.btn-primary.btn-secondary:hover .btn-icon{rotate:-12deg}
[dir=rtl] .btn-primary.btn-secondary:hover .btn-icon{rotate:12deg}

/* ===== Contact: the channels are the content, not a footer line ===== */
footer.contact{padding:clamp(80px,10vw,140px) clamp(20px,5vw,72px) 130px}
footer.contact>.contact-inner{display:block;max-width:1240px;margin-inline:auto;font:inherit;color:inherit}
.contact h2{margin:0 0 22px;font-size:clamp(56px,8.6vw,136px);line-height:.9;letter-spacing:-.02em;text-wrap:balance}
html[lang=ar] .contact h2{font-size:clamp(44px,6.4vw,104px)}
.contact-lead{margin:0 0 clamp(36px,4vw,56px);max-width:46ch;font-size:var(--fs-lead);line-height:1.6;color:#c9c2b5}
/* Rows, not cards: a big accent icon, the address, and its direct actions. */
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contact-row{--accent:var(--orange);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 22px;padding:22px 4px;border-bottom:1px solid var(--line)}
.contact-phone{--accent:#25d366}
.contact-linkedin{--accent:#4c9be8}
.contact-icon{display:grid;place-items:center;color:var(--accent)}
.contact-icon .icon,.contact-icon .brand-logo{width:34px;height:34px;stroke-width:1.6}
.contact-text{display:grid;gap:0;min-width:0}
.contact-label{font-size:var(--fs-small);line-height:1.3;color:var(--muted)}
.contact-value{font-size:clamp(19px,1.7vw,24px);line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--bone);overflow-wrap:anywhere;width:fit-content}
.contact-value:hover{color:var(--accent)}
[dir=rtl] .contact-value{justify-self:start}
[dir=rtl] .contact-linkedin .contact-action .icon,[dir=rtl] .contact-github .contact-action .icon{scale:-1 1}
.contact-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.contact-action{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--bone);font:500 15px 'DM Sans',Arial,sans-serif;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.contact-action:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.contact-action .icon,.contact-action .brand-logo{width:17px;height:17px}
.contact-action.copied{border-color:#5fc98a80;color:#9fe3b8;background:#5fc98a14}
.contact-action:focus-visible,.contact-value:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.contact-row{grid-template-columns:auto minmax(0,1fr);padding:20px 0}.contact-actions{grid-column:1 / -1;justify-content:flex-start}}
.contact-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:1240px;margin:clamp(56px,7vw,96px) auto 0;padding-top:24px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted-2)}

/* ===== Ruler-to-timeline morph (morph.js) ===== */
.morph-layer{position:fixed;inset:0;z-index:6;pointer-events:none;visibility:hidden}
.morph-layer.on{visibility:visible}
.morph-dot,.morph-year{position:absolute;top:0;left:0;will-change:transform}
.morph-dot{border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px #ff641b22}
.morph-year{transform-origin:0 0;color:var(--bone);white-space:nowrap;font-variant-numeric:tabular-nums}
.work-ruler li{transition:none}
.work-ruler li{will-change:transform,opacity}
/* Filter chips: rise, turn and fade in one by one. */
.project-filters.chips-ready button{opacity:0;translate:0 22px;rotate:-5deg;transition:opacity .6s var(--ease-out),translate .8s var(--ease-out),rotate .8s var(--ease-out),background .25s,color .25s,border-color .25s;transition-delay:calc(var(--i,0)*90ms),calc(var(--i,0)*90ms),calc(var(--i,0)*90ms),0s,0s,0s}
[dir=rtl] .project-filters.chips-ready:not(.chips-in) button{rotate:5deg}
.project-filters.chips-in button{opacity:1;translate:0 0;rotate:0deg}
button.dock-item{border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
button.dock-item:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media(max-width:600px){button.dock-item{font-size:11px}}
@media(max-width:600px){.dock-print{flex:1.35}.dock-print span{white-space:nowrap}}
.work .project-filters .filter-n{font-size:13px;font-variant-numeric:tabular-nums;opacity:.65}
/* Private repo: a mail link with a tooltip. */
.tl-private{position:relative;cursor:pointer}
.tl-private::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);inset-inline-start:0;z-index:5;padding:9px 12px;border-radius:9px;background:var(--bone);color:#17120c;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 12px 28px #0008;opacity:0;translate:0 4px;pointer-events:none;transition:opacity .2s,translate .2s}
.tl-private:hover::after,.tl-private:focus-visible::after{opacity:1;translate:0 0}
.tl-private:hover{border-color:#ffffff50;color:var(--bone)}

/* Arabic spacing: years keep the Latin display face (Arabic text font made them overflow into the spine),
   and headings get room for the tall Arabic letterforms. */
html[lang=ar] .tl-year-label,html[lang=ar] .morph-year{font-family:'Barlow Condensed','Arial Narrow',sans-serif!important}
html[lang=ar] h1{line-height:1.42}
html[lang=ar] .scroll-journey .line{padding-bottom:.08em}
html[lang=ar] .work-screen h2,html[lang=ar] .contact h2{line-height:1.3}
html[lang=ar] .about h2{line-height:1.5}
html[lang=ar] .tl-card h3{line-height:1.4}

/* Headline joke: the first word is struck through, shrinks and steps aside for the next one. */
.word .struck{position:relative;display:inline-block;transition:font-size .38s var(--ease-out),opacity .3s,color .3s}
.word .struck::after{content:'';position:absolute;inset-inline:-.04em;top:50%;height:.09em;background:var(--orange);border-radius:.05em;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
[dir=rtl] .word .struck::after{transform-origin:right}
.word .struck.on::after{transform:scaleX(1)}
.word .struck.small{font-size:.38em;vertical-align:.95em;color:#8d867a;margin-inline-end:.18em}
.word .struck.gone{opacity:0}
/* Filters line up with the project cards, clear of the big year label. */
@media(min-width:761px){.work .project-filters{padding-inline-start:204px}}
@media(max-width:760px){.work .project-filters{padding-inline-start:44px}}
.work-body>.timeline{margin-inline:auto}/* its own margin:0 had undone the centring */

/* Key moments on the opening ruler: a small tag with an icon and a tick down to its dot. */
.ruler-mark{position:absolute;bottom:calc(100% + max(1.2cqw,8px));inset-inline-start:max(.45cqw,3px);translate:-50% 0;display:inline-flex;align-items:center;gap:.4em;padding:.3em .65em;border-radius:999px;border:1px solid #ffffff1f;background:#1e1c18;color:#cfc7b9;font-size:clamp(10px,1.05cqw,15px);font-weight:500;white-space:nowrap;line-height:1.2}
[dir=rtl] .ruler-mark{translate:50% 0}
.ruler-mark .icon{width:1.15em;height:1.15em;color:var(--orange)}
.ruler-mark::after{content:'';position:absolute;top:100%;left:50%;width:1px;height:max(1.2cqw,8px);background:#ffffff26}
@container (width < 560px){.work-ruler .ruler-minor{display:none}}


/* Phone hero: both actions on one row; contact becomes a light outlined button with a short label. */
.btn-short{display:none}
@media(max-width:600px){
 .hero .actions{flex-wrap:nowrap;gap:10px}
 .hero .btn-primary{min-height:50px;font-size:15px;padding-inline:18px 6px;gap:10px;white-space:nowrap}
 .hero .btn-primary .btn-icon{width:38px;height:38px}
 .hero .btn-primary.btn-secondary{background:transparent;color:var(--bone);border:1px solid #ffffff38;box-shadow:none;padding-inline:20px}
 .hero .btn-primary.btn-secondary:hover{background:#ffffff0d}
 .hero .btn-secondary .btn-icon{display:none}
 .btn-long{display:none}.btn-short{display:inline}
}
/* Narrow ruler: the key years keep only their icon, centred over the dot, so neighbours never collide. */
@container (width < 560px){
 .work-ruler .ruler-mark{padding:.38em;font-size:12px}
 .work-ruler .ruler-mark>span{display:none}
}
/* The ruler's line is its own layer, so the morph can fold the line without squashing the dots and markers. */
.work-ruler{position:relative;border-top-color:transparent}
.work-ruler{--ruler-ext:max(5cqw,28px)}
.work-ruler::before{content:'';position:absolute;inset-inline:calc(var(--ruler-ext)*-1);top:-1px;height:1px;background:var(--line-2);-webkit-mask:linear-gradient(90deg,transparent,#000 var(--ruler-ext),#000 calc(100% - var(--ruler-ext)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--ruler-ext),#000 calc(100% - var(--ruler-ext)),transparent);transform-origin:calc(var(--fold-x,0px) + var(--ruler-ext)) 0;scale:var(--line-scale,1) 1;opacity:var(--line-alpha,1)}
/* The timeline overlaps the bottom of the panel, so it paints above the hero. */
.journey-on .work-body{position:relative;z-index:5}
/* The cursor swallowed by a call to action: it shrinks into the button and a small ring chases the pointer inside. */
.cursor[data-state=eaten] .cursor-ring{width:8px;height:8px;margin:-4px 0 0 -4px;opacity:0;border-color:var(--orange)}
.cursor[data-state=eaten] .cursor-dot{opacity:0}
.btn-trapped{position:absolute;top:0;left:0;z-index:-1;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1.5px solid #17120c70;background:#17120c14;opacity:0;scale:.2;transition:opacity .25s,scale .4s var(--ease-out);pointer-events:none;will-change:transform}
.btn-trapped.on{opacity:1;scale:1}
/* During the journey the timeline starts closer to the ruler's dot. */
.journey-on .work-body{padding-top:20px}
.journey-on .work .project-filters{margin-bottom:clamp(28px,3.5vw,44px)}
/* No single word left alone on the intro's last line. */
.hero .intro{text-wrap:pretty}
.contact-github{--accent:var(--bone)}