/* The original personality: a curious human, real photographs, and one wandering cat. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.home-hero{grid-template-columns:minmax(0,1fr) 270px;gap:32px 64px;padding:64px 0 24px}
.home-hero .hero-role{font-size:clamp(1.75rem,2.7vw,2.3rem);line-height:1.3;margin-top:16px;max-width:28ch}
.hero-intro{font-size:1rem;line-height:1.8;max-width:min(60ch,610px);margin-bottom:16px}
.hero-system-line{display:flex;align-items:center;margin:0 0 24px;font: .875rem/1.7 var(--font-mono);color:var(--muted-text)}
.hero-word-rotator{display:inline-block;min-width:6ch;color:var(--accent-color);text-align:center;transition:opacity .32s ease,transform .32s ease}
.hero-word-rotator.is-swapping{opacity:0;transform:translateY(.12em)}
.terminal-caret{color:var(--accent-color)}
@media (prefers-reduced-motion: no-preference){
 .terminal-caret{animation:qi-caret-blink 1.15s steps(2,start) infinite}
}
@keyframes qi-caret-blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-aside .portrait-button{width:218px;height:218px;border:3px solid var(--border-color);outline:1px solid var(--accent-color);outline-offset:7px;transition:transform .25s ease}
.hero-aside .portrait-button:hover{transform:rotate(-3deg)}
.hero-aside .portrait-caption{font-size:.8125rem;line-height:1.65;margin-top:26px;color:var(--heading-color)}
.hero-aside .portrait-caption span{color:var(--muted-text);font-size:.75rem}
.portrait-annotation{font:italic .8125rem/1.6 var(--font-mono);color:var(--accent-color);margin-top:12px;transform:rotate(-4deg)}
.name-tip{display:inline;padding:0;border:0;border-bottom:1px dashed var(--accent-color);color:inherit;background:transparent;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;position:relative}
.name-tip:hover,.name-tip[aria-expanded=true]{color:var(--accent-color)}
/* Invisible hit-area expansion: keeps the dashed line flush to the glyphs. */
.name-tip::after{content:"";position:absolute;inset:-10px -10px}
.personal-note{max-width:580px;padding:16px 20px;margin:14px 0 18px;border-left:2px solid var(--accent-color);background:var(--card-background);color:var(--muted-text);font:.875rem/1.7 var(--font-mono)}
.personal-note [lang=ar]{color:var(--heading-color);font-size:1.1rem}
/* The same ASCII frames as the old site, now with a safe space to wander. */
.cat-habitat{grid-column:1/-1;min-width:0;width:100%;margin:0}
.cat-track{height:92px;position:relative;min-width:0;border-bottom:1px dashed var(--border-color)}
.wandering-cat{position:absolute;left:12px;bottom:0;width:88px;height:66px;padding:8px;background:transparent;border:0;color:var(--text-color);border-radius:6px;transform:translate3d(var(--cat-x,0px),var(--cat-y,0px),0)}
.wandering-cat:hover,.wandering-cat:focus-visible{color:var(--accent-color)}
.cat-frame{display:block;white-space:pre;font:15px/1.05 var(--font-mono);text-align:left}
.cat-speech{position:absolute;left:16px;bottom:62px;white-space:nowrap;font:12px/1.6 var(--font-mono);color:var(--accent-color)}
.cat-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;color:var(--muted-text);font:.75rem/1.5 var(--font-mono)}
.cat-pause{min-height:44px;flex-shrink:0;padding:8px 0 8px 12px;border:0;background:none;color:var(--muted-text);font:inherit;text-decoration:underline;text-underline-offset:4px}
.cat-pause:hover{color:var(--heading-color)}
html:not(.js) .cat-pause{display:none}
html:not(.js) .wandering-cat{pointer-events:none}
/* Photos belong in the story, not hidden behind it. */
.project-preview.has-personal-photo{aspect-ratio:16/9;padding:8px;background:var(--card-background)}
.project-preview.has-personal-photo>img{object-fit:contain;transform:none;transition:none;box-shadow:none}
.project-photo-caption{display:block;padding:10px 0 0;border:0;color:var(--muted-text);font:.8125rem/1.5 var(--font-mono)}
.personal-moment{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;margin:32px 0}
.personal-moment figure,.memory-strip figure{margin:0;min-width:0}
.personal-moment figure>a,.memory-strip figure>a{display:block;background:var(--card-background);padding:8px;border:1px solid var(--border-color);border-radius:4px}
.personal-moment img,.memory-strip img{width:100%;height:auto;border-radius:2px}
.personal-moment figcaption,.memory-strip figcaption{font:.75rem/1.7 var(--font-mono);padding:12px 4px 0}
.personal-moment blockquote{font-size:clamp(1.4rem,2.5vw,1.9rem);line-height:1.4;letter-spacing:-.025em;color:var(--heading-color);margin:0 0 20px}
.personal-moment>div>p{color:var(--muted-text)}
.memory-strip{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:32px 0 20px;padding:8px 4px}
.memory-strip figure{margin:0;min-width:0}
.memory-strip figure>a{display:block;background:var(--card-background);padding:8px;border:1px solid var(--border-color);border-radius:4px}
.memory-strip img{width:100%;height:auto;border-radius:2px;aspect-ratio:1.85;object-fit:cover}
.memory-strip figcaption{font:.75rem/1.7 var(--font-mono);padding:12px 4px 0}
.memory-strip figure:nth-child(1){transform:rotate(-1deg)}
.memory-strip figure:nth-child(2){transform:rotate(1deg)}
.memory-strip img{aspect-ratio:1.85;object-fit:cover}
.memory-strip figure:nth-child(2) img{object-position:50% 32%}
.memory-strip figure>a:hover{border-color:var(--accent-color)}
.exp-photo{margin:24px 0 0;max-width:540px}.exp-photo a{display:block}.exp-photo img{width:100%;height:auto;border-radius:6px}
.exp-photo figcaption{font:.75rem/1.6 var(--font-mono)}
.memory-dialog{padding:12px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-background);color:var(--text-color);width:max-content;max-width:min(980px,calc(100vw - 32px))}
.memory-dialog::backdrop{background:rgba(0,0,0,.83)}
.memory-dialog img{max-height:75dvh;max-width:100%;width:auto;margin:auto;object-fit:contain}
.memory-dialog p{margin:12px 6px 4px;font:.8125rem/1.6 var(--font-mono);max-width:760px}
.about-prose .cat-habitat{max-width:none}
.contact-container>.cat-habitat{margin:0 0 36px}
@media(max-width:1000px){
 .home-hero{grid-template-columns:minmax(0,1fr) 210px;gap:28px}
 .hero-aside .portrait-button{width:180px;height:180px}
 .portrait-annotation{font-size:.75rem}
}
@media(max-width:767px){
 .home-hero{grid-template-columns:minmax(0,1fr);padding:36px 0 20px;gap:24px}
 .home-hero h1{font-size:2.5rem}.home-hero .hero-role{font-size:1.75rem}
 .hero-system-line{font-size:.75rem;margin-bottom:20px}
 .hero-aside{flex-direction:row;flex-wrap:wrap;gap:24px;justify-content:flex-start;text-align:left;padding:12px 8px}
 .hero-aside .portrait-button{width:120px;height:120px}
 .hero-aside .portrait-caption{font-size:.875rem;margin:0}
 .hero-aside .portrait-caption span{font-size:.75rem}
 .portrait-annotation{display:none}
 .cat-track{height:78px}.cat-frame{font-size:14px}
 .cat-caption{gap:10px;font-size:.75rem}
 .personal-moment{grid-template-columns:minmax(0,1fr);gap:26px}
 .memory-strip{gap:24px;grid-template-columns:minmax(0,1fr);padding-inline:4px}
 .memory-strip figure{max-width:540px}
 .personal-note{padding:14px 16px;font-size:.8125rem}
 .about-heading .portrait-button{display:block;width:88px;height:88px}
}
@media(max-width:374px){
 .home-hero h1{font-size:2.1rem}.home-hero .hero-role{font-size:1.5rem}
 .hero-aside .portrait-button{width:108px;height:108px}
 .about-heading{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 .wandering-cat{--cat-y:0px!important}
 .hero-aside .portrait-button:hover{transform:none}
}
@media print{
 .cat-habitat,.hero-system-line,.portrait-annotation,.memory-strip,.personal-moment,.exp-photo,.project-photo-caption{display:none!important}
 .name-tip{border:0}.personal-note{display:none!important}
}