/* A personal introduction: only this hero and its navigation are restyled. */
.index-bar.personal-nav{padding-inline:max(24px,calc((100vw - 1120px)/2))}
.personal-nav:not([data-theme]),.personal-nav[data-theme="paper"]{--nav-bg:#fafaf7;--nav-color:#17191c;--nav-active:#2449f5;--nav-muted:#73787b;--nav-line:#e5e7e3}
.personal-nav nav{min-height:64px;gap:32px}
.personal-nav a{font-size:14px;gap:9px;min-height:44px;padding-block:12px}
.personal-nav a>span{font-size:10px}
.hero.hero-personal{--paper:#fafaf7;--ink:#17191c;--blue:#2449f5;--line:#e1e4df;background:var(--paper);color:var(--ink);min-height:calc(100svh - var(--header-height));height:auto;padding:32px max(24px,calc((100vw - 1120px)/2)) 24px;display:flex;flex-direction:column}
.hero-personal .personal-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:32px;align-items:center;flex:1;width:100%;max-width:1120px;margin-inline:auto}
.hero-personal .personal-copy{min-width:0;padding-block:12px}
.hero-personal .personal-role{font-size:14px;line-height:1.5;font-weight:450;color:#646a70;letter-spacing:.01em;margin:0 0 14px}
.hero-personal .name-composition{display:block;flex:none;padding:0;margin:0 0 24px}
.hero-personal .name-composition h1{position:relative;display:block;gap:.16em;width:max-content;max-width:100%;font-family:Outfit,sans-serif;font-size:clamp(110px,10.5vw,152px);font-weight:600;line-height:1.04;letter-spacing:-.045em;white-space:nowrap;margin:0}
.hero-personal .name-word,.hero-personal .hover-word{flex:none;display:block;max-width:none;width:max-content}
.hero-personal .name-word.last,.hero-personal .hover-word.last{margin-left:0}
.hero-personal .name-lettering{display:block}
.hero-personal .name-hover{display:block;gap:.16em;align-items:start}
.hero-personal .personal-statement{font-size:clamp(28px,2.35vw,36px);font-weight:450;line-height:1.2;letter-spacing:-.03em;max-width:25ch;margin:0 0 20px;text-wrap:pretty}
.hero-personal .personal-statement>span{display:block}
.hero-personal .personal-description{font-size:18px;line-height:1.55;font-weight:400;color:#60676e;max-width:36ch;margin:0}
.hero-personal .personal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:30px}
.hero-personal .personal-actions .line-link{min-height:48px;font-size:16px;line-height:1.3;gap:18px}
.hero-personal .personal-actions .personal-primary{padding:14px 22px;background:var(--blue);color:#fff;border-radius:999px}
.hero-personal .personal-primary:after{display:none}
.hero-personal .personal-primary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.hero-personal .personal-portrait{min-width:0;width:100%;max-width:520px;margin:0;justify-self:center;text-align:center}
.hero-personal .personal-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;max-width:520px}
.hero-personal .personal-portrait figcaption{font-size:12px;line-height:1.5;font-weight:400;letter-spacing:.01em;color:#777d81;margin-top:0}
.hero-personal .personal-next{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;width:100%;max-width:1120px;margin:32px auto 0;padding-block:12px;font-size:13px;line-height:1.5;color:#636a70;border-top:1px solid var(--line)}
.hero-personal .personal-next>span{font-size:18px;color:var(--ink)}
@media(min-width:651px) and (max-width:1099px){
 .hero.hero-personal{padding-top:40px}
 .hero-personal .personal-layout{gap:24px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .hero-personal .name-composition h1{font-size:clamp(78px,10vw,108px)}
 .hero-personal .personal-statement{font-size:clamp(26px,3.1vw,32px)}
 .hero-personal .personal-description{font-size:17px}
 .hero-personal .personal-actions{gap:16px 20px;margin-top:26px}
 .hero-personal .personal-portrait{max-width:440px}
}
@media(min-width:651px) and (max-width:759px){
 .hero-personal .name-composition h1{font-size:clamp(74px,10vw,84px)}
 .hero-personal .personal-layout{gap:18px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
 .hero-personal .personal-actions .line-link{font-size:15px;gap:14px}
 .hero-personal .personal-primary{padding-inline:18px}
 .hero-personal .personal-portrait figcaption{font-size:11px}
}
@media(max-width:650px){
 .index-bar.personal-nav{padding-inline:20px}
 .personal-nav nav{min-height:60px;gap:12px}
 .personal-nav a{font-size:12px;gap:6px;padding-block:10px;min-height:44px}
 .personal-nav a>span{font-size:8px}
 .hero.hero-personal{padding:34px 24px 20px}
 .hero-personal .personal-layout{grid-template-columns:minmax(0,1fr);gap:24px;align-content:center}
 .hero-personal .personal-copy{padding:0}
 .hero-personal .personal-role{font-size:13px;margin-bottom:12px}
 .hero-personal .name-composition{margin-bottom:20px}
 .hero-personal .name-composition h1{display:flex;font-size:clamp(52px,13.8vw,64px);line-height:1.04}
 .hero-personal .name-hover{display:flex}
 .hero-personal .personal-statement{font-size:26px;line-height:1.2;max-width:27ch;margin-bottom:16px}
 .hero-personal .personal-description{font-size:16px;line-height:1.5}
 .hero-personal .personal-actions{margin-top:24px;gap:20px 28px}
 .hero-personal .personal-actions .line-link{min-height:46px;font-size:15px}
 .hero-personal .personal-portrait{max-width:280px;width:min(74vw,280px)}
 .hero-personal .personal-portrait figcaption{font-size:11px}
 .hero-personal .personal-next{margin-top:24px;font-size:12px}
}
@media(max-width:380px){
 .index-bar.personal-nav{padding-inline:16px}
 .personal-nav nav{gap:8px}
 .personal-nav a{gap:4px;font-size:11px}
 .hero.hero-personal{padding-inline:20px;padding-top:28px}
 .hero-personal .personal-statement{font-size:24px}
 .hero-personal .personal-description{font-size:15px}
 .hero-personal .personal-portrait{width:230px;max-width:100%}
}
@media(max-height:600px) and (orientation:landscape){
 .hero.hero-personal{min-height:calc(100svh - var(--header-height));padding-top:28px}
 .hero-personal .personal-portrait{max-width:300px}
 .hero-personal .personal-next{margin-top:24px}
}

.hero-personal .portrait-rig{position:relative}
.hero-personal .portrait-face{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;fill:#17191c}
.hero-personal .portrait-eye{transform-box:fill-box;transform-origin:center}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.hero-personal .portrait-gaze{transition:transform 220ms var(--ease-out)}}
html.keyboard .hero-personal .portrait-gaze{transition:none}

/* Cuaderno1013: a paper scene behind Alex; the image/eye reference box stays untouched. */
.hero-personal .portrait-scene{position:relative;isolation:isolate;width:100%;aspect-ratio:1}
.hero-personal .portrait-scene>.portrait-paper{position:absolute;z-index:-1;inset:13% 8% 10%;border:1px solid #e6e1d5;border-radius:18px;background:#f1eee4;transform:rotate(-4deg);pointer-events:none}
.hero-personal .portrait-depth{position:relative;z-index:1;width:100%}
.hero-personal .portrait-depth>.portrait-arrival{position:relative}
.hero-personal .portrait-code{position:absolute;z-index:2;right:1%;bottom:10%;width:min(20%,100px);height:auto;color:#17191c;overflow:visible;pointer-events:none}
.hero-personal .portrait-doodle{position:absolute;z-index:2;left:6%;top:12%;width:min(10%,48px);height:auto;color:#2449f5;pointer-events:none}
.hero-personal .name-composition{position:relative;width:max-content;max-width:100%}
.hero-personal .name-underline{position:absolute;left:1%;bottom:-10px;width:74%;max-width:320px;height:18px;color:#2449f5;overflow:visible;pointer-events:none}
@media(max-width:650px){
 .hero-personal .portrait-code{width:22%;max-width:64px;right:0;bottom:9%}
 .hero-personal .portrait-doodle{width:12%;max-width:36px;left:5%;top:10%}
 .hero-personal .portrait-scene>.portrait-paper{border-radius:12px}
 .hero-personal .name-underline{height:13px;bottom:-8px}
}
@media(max-width:380px){.hero-personal .portrait-doodle{display:none}}

/* One signature: ink draws the name, the portrait answers, both land in the actual hero. */
.intro-story{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none;isolation:isolate;color:#17191c;font-family:Outfit,sans-serif;--story-ease-drawer:cubic-bezier(.32,.72,0,1)}
.story-paper{position:absolute;inset:0;background:#fafaf7}
.story-board{position:absolute;left:8vw;top:13svh;width:84vw;height:80svh;font-size:clamp(80px,min(calc(29vw - 12px),calc(8svh + 12vw)),260px);--story-letter-drift:.4em}
.story-word{position:absolute;left:0;top:0;width:max-content;font-size:1em;font-weight:600;line-height:1.04;letter-spacing:-.045em;white-space:nowrap;transform-origin:0 0}
.story-word--mico{left:.45em;top:1.05em}
.story-letters{position:relative;display:block}
.story-dot{color:#2449f5}
.story-ink{position:absolute;left:0;bottom:-.1em;width:100%;height:.12em;overflow:visible;color:#2449f5;transform-origin:0 50%}
.story-ink path{stroke-dasharray:1;stroke-dashoffset:0}
.story-cell{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em;margin-block:-.08em}
.story-letter,.story-dot{display:inline-block;transform-origin:50% 85%}
.story-character{position:absolute;right:0;bottom:0;width:clamp(230px,min(calc(45vw + 90px),52svh),520px);aspect-ratio:1;transform-origin:0 0}
.story-character>img{display:block;width:100%;height:auto}
.story-face{position:absolute;inset:0;width:100%;height:100%;fill:#17191c;overflow:visible;visibility:hidden}
.story-character.is-decoded .story-face{visibility:visible}
.story-gaze{transform-box:fill-box;transform-origin:50% 50%}
@media(max-height:600px) and (orientation:landscape){
 .story-board{top:12svh;height:77svh;font-size:min(25vw,24svh)}
 .story-character{width:48svh;right:10%;bottom:0}
}
@media(prefers-reduced-motion:no-preference){
 html[data-entry="running"] .intro-story{display:block;animation:storyExit var(--entry-duration,2100ms) linear both}
 html[data-entry="running"] .personal-world :is(a,button,input,summary){pointer-events:none}
 html[data-entry="running"] .story-paper{animation:storyPaperExit var(--entry-duration,2100ms) linear both}
 html[data-entry="running"] .story-word{animation:storyLand var(--entry-transfer-duration,700ms) var(--story-ease-drawer) var(--entry-transfer-start,1100ms) both,storyMatchOut var(--entry-handoff,1800ms) steps(1,end) both}
 html[data-entry="running"] .story-character{animation:storyCharacterLand var(--entry-transfer-duration,700ms) var(--story-ease-drawer) var(--entry-transfer-start,1100ms) both,storyMatchOut var(--entry-handoff,1800ms) steps(1,end) both,storyPortraitReveal 520ms var(--ease-out) 150ms backwards}
 html[data-entry="running"] .story-letter{animation:storyLetterBuild 420ms var(--ease-out) 70ms both}
 html[data-entry="running"] .story-cell:nth-child(2) .story-letter{animation-delay:110ms}
 html[data-entry="running"] .story-cell:nth-child(3) .story-letter{animation-delay:150ms}
 html[data-entry="running"] .story-cell:nth-child(4) .story-letter{animation-delay:190ms}
 html[data-entry="running"] .story-word--mico .story-letter{animation-name:storyLetterBuild;animation-delay:230ms}
 html[data-entry="running"] .story-word--mico .story-cell:nth-child(2) .story-letter{animation-delay:270ms}
 html[data-entry="running"] .story-word--mico .story-cell:nth-child(3) .story-letter{animation-delay:310ms}
 html[data-entry="running"] .story-word--mico .story-cell:nth-child(4) .story-letter{animation-delay:350ms}
 html[data-entry="running"] .story-letters{animation:storySignatureSettle 600ms var(--ease-out) 70ms both}
 html[data-entry="running"] .story-word--mico .story-letters{animation-delay:230ms}
 html[data-entry="running"] .story-dot{animation:storyDotKick 420ms var(--ease-out) 560ms both}
 html[data-entry="running"] .story-ink{animation:storyInkLand var(--entry-transfer-duration,700ms) var(--story-ease-drawer) var(--entry-transfer-start,1100ms) both}
 html[data-entry="running"] .story-ink path{animation:storyInkDraw 620ms var(--ease-out) 250ms both}
 html[data-entry="running"] .story-gaze{animation:storyCharacterLook var(--entry-duration,2100ms) linear both}
 html[data-entry="running"] .hero-personal .name-lettering{animation:storyHeroIn var(--entry-handoff,1800ms) steps(1,end) both}
 html[data-entry="running"] .hero-personal .portrait-arrival{animation:storyHeroIn var(--entry-handoff,1800ms) steps(1,end) both}
 html[data-entry="running"] .hero-personal :is(.personal-role,.personal-statement,.personal-description,.personal-actions,.personal-next){animation:personalCopyEntry 260ms var(--ease-out) var(--entry-handoff,1800ms) backwards}
 html[data-entry="running"] .hero-personal .personal-statement{animation-delay:calc(var(--entry-handoff,1800ms) + 20ms)}
 html[data-entry="running"] .hero-personal .personal-description{animation-delay:calc(var(--entry-handoff,1800ms) + 40ms)}
 html[data-entry="running"] .hero-personal .personal-actions{animation-delay:calc(var(--entry-handoff,1800ms) + 60ms);animation-duration:240ms}
 html[data-entry="running"] .hero-personal .personal-next{animation-delay:calc(var(--entry-handoff,1800ms) + 70ms);animation-duration:230ms}
 html[data-entry="running"] .hero-personal .portrait-scene>.portrait-paper{animation:personalPaperEntry 250ms var(--ease-out) var(--entry-handoff,1800ms) backwards}
 html[data-entry="running"] .hero-personal :is(.portrait-code,.portrait-doodle){animation:personalCopyEntry 230ms var(--ease-out) calc(var(--entry-handoff,1800ms) + 60ms) backwards}
 html[data-entry="running"] .hero-personal .personal-portrait figcaption{animation:personalCaptionEntry 230ms var(--ease-out) calc(var(--entry-handoff,1800ms) + 70ms) backwards}
 html[data-entry="running"] .hero-personal .name-underline{animation:personalStrokeEntry 260ms var(--ease-out) calc(var(--entry-handoff,1800ms) + 40ms) backwards}
 @keyframes storyExit{from{opacity:1}to{opacity:1}}
 @keyframes storyPaperExit{0%,74%{opacity:1;animation-timing-function:var(--ease-out)}84%,100%{opacity:0}}
 @keyframes storyLand{from{transform:translate(0,0) scale(1)}to{transform:var(--story-land,translate(0,-15px) scale(.5))}}
 @keyframes storyCharacterLand{from{transform:translate(0,0) scale(1)}to{transform:var(--story-land,translate(0,-15px) scale(.8))}}
 @keyframes storyMatchOut{from{opacity:1}to{opacity:0}}
 @keyframes storyHeroIn{from{opacity:0}to{opacity:1}}
 @keyframes storyLetterBuild{from{transform:translate(0,105%)}to{transform:translate(0,0)}}
 @keyframes storySignatureSettle{from{transform:translateX(-.08em)}to{transform:translateX(0)}}
 @keyframes storyDotKick{from{opacity:0;transform:translate(-.25em,0) scale(.7)}to{opacity:1;transform:translate(0,0) scale(1)}}
 @keyframes storyInkDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 @keyframes storyInkLand{from{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(.74)}}
 @keyframes storyPortraitReveal{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
 @keyframes storyCharacterLook{0%,8%{transform:translate(0,0)}14%,25%{transform:translate(-6px,16px)}32%,43%{transform:translate(-20px,-8px)}56%,100%{transform:translate(0,0)}}
 @keyframes personalCopyEntry{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
 @keyframes personalStrokeEntry{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
 @keyframes personalPaperEntry{from{transform:translateY(12px) rotate(-1deg) scale(.97);opacity:0}to{transform:translateY(0) rotate(-4deg) scale(1);opacity:1}}
 @keyframes personalCaptionEntry{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
}


/* Raster-preserving articulation: the image remains the fallback until every SVG image is loaded. */
.character-art{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;visibility:hidden;pointer-events:none}
.is-articulated>.character-art{visibility:visible}
.portrait-rig.is-image-loading>.portrait-face,.portrait-rig.is-image-failed>.portrait-face{visibility:hidden}
.portrait-rig.is-articulated>img,.portrait-rig.is-articulated>.portrait-face,.story-character.is-articulated>img,.story-character.is-articulated>.story-face{visibility:hidden}
.character-gaze{fill:#17191c}
.character-eye{transform-box:fill-box;transform-origin:center}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-personal .character-art .character-head{transition:transform 300ms cubic-bezier(.32,.72,0,1)}
 .hero-personal .character-art .character-gaze{transition:transform 150ms var(--ease-out)}
}
.character-paused .character-art :is(.character-head,.character-gaze),html.keyboard .character-art :is(.character-head,.character-gaze){transition:none}
@media(prefers-reduced-motion:no-preference){
 html[data-entry="running"] .story-character.character-acting .character-head{animation:characterStoryHead var(--entry-duration,2100ms) linear var(--character-story-delay,0ms) both}
 html[data-entry="running"] .story-character.character-acting .character-hand{animation:characterStoryType var(--entry-duration,2100ms) linear var(--character-story-delay,0ms) both}
 html[data-entry="running"] .story-character.character-acting .character-gaze{animation:characterStoryGaze var(--entry-duration,2100ms) linear var(--character-story-delay,0ms) both}
 html[data-entry="running"] .story-character.character-acting .character-eye{animation:characterStoryBlink var(--entry-duration,2100ms) linear var(--character-story-delay,0ms) both}
 @keyframes characterStoryHead{0%{transform:rotate(0deg);animation-timing-function:var(--story-ease-drawer)}23%,37%{transform:rotate(-4deg);animation-timing-function:var(--story-ease-drawer)}57%,100%{transform:rotate(0deg)}}
 @keyframes characterStoryType{0%,6%{transform:rotate(0deg);animation-timing-function:var(--ease-out)}10%{transform:rotate(-3.5deg);animation-timing-function:var(--ease-out)}14%,18%{transform:rotate(0deg);animation-timing-function:var(--ease-out)}22%{transform:rotate(-4deg);animation-timing-function:var(--ease-out)}27%,100%{transform:rotate(0deg)}}
 @keyframes characterStoryGaze{0%{transform:translate(0,0);animation-timing-function:var(--ease-out)}5%,18%{transform:translate(-6px,16px);animation-timing-function:var(--ease-out)}25%,38%{transform:translate(-20px,-8px);animation-timing-function:var(--ease-out)}46%{transform:translate(-16px,8px);animation-timing-function:var(--ease-out)}54%,100%{transform:translate(0,0)}}
 @keyframes characterStoryBlink{0%,42%{transform:scaleY(1);animation-timing-function:var(--ease-out)}45%,47%{transform:scaleY(.1);animation-timing-function:var(--ease-out)}51%,100%{transform:scaleY(1)}}
}