/* Home only (/ and /en/). The structure, type and restraint of the original site, on one cream page.
 Near-black type; the red is the O, plus a few details: hover, focus, active language, selection. Project pages never load this file.
 Red #EE492B only at 24 px or more; #C8321A for small red text. Both pass AA on the cream at those sizes. */
@font-face{font-family:'Manrope';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/manrope-medium.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-regular.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-bold.ttf') format('truetype')}

:root{
 --cream:#F5EEDF;--ink:#1B1A17;--red:#EE492B;--red-deep:#C8321A;
 --muted:#5F5A4E;    /* secondary text: 5.9:1 on the cream */
 --rule:#D8CEB8;     /* hairlines between rows */
 --well:#EBE2CE;     /* behind an image that has not arrived yet */
 --gutter:3vw;
 --title:clamp(3rem,13.5vw,16rem);
 --display:'Manrope',Arial,sans-serif;--text:'DM Sans',Arial,sans-serif;
 background:var(--cream);color:var(--ink);font-family:var(--text);font-synthesis:none;
 -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--cream);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p{margin:0;font-weight:inherit}
::selection{background:var(--red);color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red-deep);outline-offset:4px}
.skip{position:fixed;z-index:20;top:0;left:1rem;padding:1rem;background:var(--cream);color:var(--ink);border:1px solid var(--ink);transform:translateY(-120%);opacity:0;pointer-events:none}
.skip:focus{top:1rem;transform:none;opacity:1;pointer-events:auto}

/* The two names: one red O */
.chase-o,.chase-ob,.stage-o{font-family:var(--display);font-weight:500;font-style:normal;color:var(--red)}
.name-star{display:inline-block;font-size:.58em;vertical-align:top;margin-left:.07em;line-height:1.3;--o-gap:.93em;transition:transform .42s cubic-bezier(.2,1.5,.4,1)}
/* With the O gone, the asterisk closes up on the r: "Lucía Valer*". It waits for the O to have left. */
@media screen{
 body.chase-on .chase-o.is-away+.name-star{transform:translateX(calc(-1*var(--o-gap)));transition-delay:.38s}
 html.o-down body:not(.chase-on) .intro h1 .name-star{transform:translateX(calc(-1*var(--o-gap)));animation:star-failsafe 1ms linear 4s forwards}
}
@keyframes star-failsafe{to{transform:none}}
/* A repeat visit opens with the O already down. If the engine never arrives, the failsafe gives the O back to the name. */
@media screen and (prefers-reduced-motion:no-preference){
 html.o-down body:not(.chase-on) .intro h1 .chase-o{color:transparent;animation:o-failsafe 1ms linear 4s forwards}
}
@keyframes o-failsafe{to{color:var(--red)}}

/* Header */
.site-header{height:76px;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:8px 16px}
.wordmark{font-family:var(--display);font-size:2.4rem;font-weight:500;letter-spacing:-.16rem;line-height:1}
.wordmark span{font-size:1rem;vertical-align:top;letter-spacing:0;margin-left:3px}
.site-header nav{display:flex;gap:2rem}
.site-header sup{font-size:.7rem;margin-left:3px;line-height:0}
.header-actions{display:flex;align-items:center;gap:1.8rem}
.external-top{font-size:.9rem}
.site-header nav:not(.language-switch) a,.external-top{transition:color .18s}
.site-header nav:not(.language-switch) a:hover,.external-top:hover{color:var(--red-deep)}
.language-switch{gap:.6rem;font-size:.75rem;align-items:center}
.language-switch a{padding:.55rem .1rem;color:var(--muted);border-bottom:1px solid transparent;transition:color .18s}
.language-switch a:hover{color:var(--red-deep)}
.language-switch a[aria-current=page]{color:var(--ink);border-bottom-color:var(--red)}

/* Opening */
.intro{padding:1.1rem var(--gutter) 1.8rem}
.intro-meta{display:flex;justify-content:space-between;font-size:.875rem}
.intro-stage{position:relative}
.intro h1{font-family:var(--display);font-size:var(--title);font-weight:500;line-height:1.06;letter-spacing:-.078em;white-space:nowrap;margin:1.4rem 0 1.6rem}
.intro h1 .chase-o{transform-origin:50% 65%}
/* kinetic-title.js fixes each glyph's advance before making the letters boxes: the kerning does not move. */
.intro h1.kin .nl,.intro h1.kin .chase-o{display:inline-block;white-space:pre;transform-origin:50% 65%}
.intro h1.is-kinetic-moving .nl{will-change:transform}
/* The rule under the name is the floor: the O and Lucía stand on it, in the space the name leaves on the right. */
.stage-floor{height:1px;background:var(--ink)}
.stage-lucia{position:absolute;right:0;bottom:1px;height:max(84px,calc(.98*var(--title)));aspect-ratio:1040/1749;pointer-events:none}
.stage-o{position:absolute;right:calc(max(84px,calc(.98*var(--title)))*.6 + .1*var(--title));bottom:0;font-size:max(64px,var(--title));line-height:1;visibility:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}
.intro-bottom{padding-top:1.4rem;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:1.5rem 4.5rem}
.intro-bottom p{font-family:var(--display);font-size:clamp(1.5rem,2.15vw,2.1rem);font-weight:500;line-height:1.2;letter-spacing:-.045em}
.intro-index{font-size:.8125rem;line-height:1.8;letter-spacing:.07em;padding-bottom:.15rem}
.down-link{display:grid;place-items:center;width:56px;height:56px;border:1px solid currentColor;border-radius:50%;font-size:2rem;line-height:1;transition:color .2s,border-color .2s,transform .3s cubic-bezier(.2,1.4,.4,1)}
@media(hover:hover) and (pointer:fine){.down-link:hover{color:var(--red-deep);border-color:var(--red-deep);transform:translateY(3px)}}

/* Lucía on the floor when nothing moves: no JS, reduced motion, or the engine failed. */
.stage-lucia::before{content:'';position:absolute;inset:0;background:url('/assets/laguna/lucia-wave.svg') no-repeat center bottom/contain}
body.chase-on .stage-lucia::before{display:none}
.foot-lucia{position:absolute;width:0;height:0;pointer-events:none}
@media screen and (scripting:enabled) and (prefers-reduced-motion:no-preference){
 body:not(.chase-on) .stage-lucia::before{visibility:hidden;animation:home-failsafe 1ms linear 4s forwards}
 /* First visit: no film yet, it is the O that uncovers it (Chase.reveal in chase-portal.js). If the engine never arrives, it appears by itself. */
 html:not(.o-down) .reel-stage:not(.portal-on):not(.portal-off) :is(.reel-fallback,.reel-loop),
 html:not(.o-down) .reel-stage:not(.portal-on):not(.portal-off)+.reel-caption{visibility:hidden;animation:home-failsafe 1ms linear 4s forwards}
}
@keyframes home-failsafe{to{visibility:visible}}
/* On a tall screen the profile strip is on the first screen: it waits for the film too, so the opening is the name and nothing else. Same failsafe. */
@media screen and (scripting:enabled) and (prefers-reduced-motion:no-preference){
 html:not(.o-down) .reel:has(.reel-stage:not(.portal-on):not(.portal-off))+.profile-strip .strip-inner{visibility:hidden;animation:home-failsafe 1ms linear 4s forwards}
 html:not(.o-down) .reel:has(.reel-caption.is-waiting)+.profile-strip .strip-inner{visibility:hidden}
}

/* Film */
.reel-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--cream)}
.reel-fallback,.reel-loop{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.reel-loop{opacity:0}
.reel-loop.is-playing{opacity:1}
.reel-caption{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:.75rem 2.5rem;padding:.75rem var(--gutter);border-bottom:1px solid var(--rule);transition:opacity .35s ease,visibility 0s linear 0s}
.reel-caption.is-waiting{opacity:0;visibility:hidden;transition:none}
.reel-bottomline{font-family:var(--display);font-size:clamp(1.05rem,1.55vw,1.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.25}
.reel-topline{display:flex;gap:2.5rem;font-size:.75rem;letter-spacing:.07em;line-height:1.5}
.ambient-control{display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--ink);border-radius:50%;font-size:.875rem;line-height:1;cursor:pointer;transition:color .2s,border-color .2s}
.ambient-control:hover{color:var(--red-deep);border-color:var(--red-deep)}

/* Strip */
.profile-strip{padding:2rem var(--gutter);border-bottom:1px solid var(--rule);font-size:.75rem}
.strip-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.strip-location,.strip-portfolio{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;padding-block:.25rem}
.strip-portfolio{padding-inline:clamp(1.5rem,3vw,3rem) 2.5rem;border-left:1px solid var(--rule)}
.strip-label{display:block;font-size:.75rem;line-height:1.5;letter-spacing:.07em}
.strip-place{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,1.6vw,1.65rem);line-height:1.25;letter-spacing:-.035em}
.strip-stat{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem}
.strip-count{font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,3.6vw,3.5rem);letter-spacing:-.065em;line-height:1.05;white-space:nowrap}
.strip-caption{font-size:.875rem;line-height:1.45}
.strip-arrow{position:absolute;right:clamp(1rem,2vw,2rem);top:0;font-size:1.3rem;line-height:1.25;transition:color .2s,transform .3s cubic-bezier(.2,1.4,.4,1)}
@media(hover:hover) and (pointer:fine){.strip-portfolio:hover .strip-arrow{color:var(--red-deep);transform:translateY(3px)}}

/* Selected work */
.work{padding:3.6rem var(--gutter) 6.5rem}
.section-number,.about-label,.award-label{font-size:.75rem;line-height:1.5;letter-spacing:.07em}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.25rem 2rem;margin-bottom:2.5rem}
.section-number{grid-column:1/-1}
.section-heading h2,.about h2{font-family:var(--display);font-weight:500;letter-spacing:-.065em;line-height:1.08}
.section-heading h2{font-size:clamp(2.2rem,4.25vw,4.5rem)}
.section-heading p{font-size:1rem;line-height:1.5;padding-bottom:.2rem}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 1.5rem}
.project-card{display:block;min-width:0}
.image-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;background:var(--well)}
.image-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
[data-project-card=isdin] .image-wrap>img{object-position:left center}
.card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .25s ease}
.is-previewing .card-preview{opacity:1}
.preview-label{position:absolute;left:1rem;top:1rem;z-index:2;padding:.45rem .65rem;background:var(--cream);color:var(--ink);font-size:.75rem;line-height:1;letter-spacing:.04em;opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s}
.is-previewing .preview-label{opacity:1;transform:none}
.card-open{position:absolute;top:1rem;right:1rem;z-index:2;display:grid;place-items:center;width:44px;height:44px;background:var(--cream);color:var(--ink);border-radius:50%;font-size:1.5rem;line-height:1;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .22s ease,transform .32s cubic-bezier(.2,1.4,.4,1)}
.project-card:focus-visible .card-open{opacity:1;transform:none}
.card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.8rem;padding-top:.65rem}
.card-meta h3{font-size:clamp(1.125rem,1.7vw,1.7rem);letter-spacing:-.025em;line-height:1.3;transition:color .18s,transform .3s cubic-bezier(.2,1,.4,1)}
.card-meta h3 small{font-size:.75rem;letter-spacing:0;margin-right:.5rem;vertical-align:middle;color:var(--muted)}
.card-meta>span{flex:none;font-size:.875rem;line-height:1.4;text-align:right}
@media(hover:hover) and (pointer:fine){
 .project-card:hover .card-open{opacity:1;transform:none}
 .project-card:hover .card-meta h3{color:var(--red-deep);transform:translateX(5px)}
 .image-wrap>img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
 .project-card:hover .image-wrap>img{transform:scale(1.018)}
}
.archive-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:6.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--ink)}
.archive-heading h3{font-size:1.7rem;letter-spacing:-.04em}
.archive-heading span{font-size:.85rem;color:var(--muted)}
.archive-row{position:relative;display:grid;grid-template-columns:2rem 90px minmax(0,1fr) 17rem 3rem;align-items:center;gap:1.5rem;padding:1.1rem .3rem;border-bottom:1px solid var(--rule)}
.row-id{font-size:.78rem;color:var(--muted)}
.archive-thumb{position:relative;display:block;overflow:hidden;width:100%;height:64px;background:var(--well)}
.archive-thumb>img,.archive-thumb>.card-preview{width:100%;height:100%;object-fit:cover}
.archive-thumb>.card-preview{position:absolute;inset:0}
.archive-row h3{font-size:1.3rem;letter-spacing:-.02em;transition:color .18s,transform .3s cubic-bezier(.2,1,.4,1)}
.row-type{font-size:.8125rem;line-height:1.4}
.row-arrow{font-size:1.8rem;line-height:1;text-align:right;transition:color .18s,transform .3s cubic-bezier(.2,1.4,.4,1)}
@media(hover:hover) and (pointer:fine){
 .archive-row:hover h3{color:var(--red-deep);transform:translateX(5px)}
 .archive-row:hover .row-arrow{color:var(--red);transform:translate(2px,-2px)}
}

/* Profile */
.about{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:2.5rem 4.5rem;padding:clamp(3.5rem,6vw,6rem) var(--gutter);border-top:1px solid var(--ink)}
.about>*{min-width:0}
.about-label{grid-column:1/-1}
.about h2{font-size:clamp(2.6rem,4.3vw,4.5rem);letter-spacing:-.05em;text-wrap:balance}
.about-copy{font-size:1.0625rem;line-height:1.65}
.about-copy p+p{margin-top:1rem}
.profile-details{grid-column:1/-1}
.expertise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.expertise span{display:flex;align-items:center;min-height:5rem;padding:1.25rem 1.25rem 1.25rem 0;font-size:.9375rem;line-height:1.45}
.expertise span+span{padding-left:1.25rem;border-left:1px solid var(--rule)}
.profile-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem 2rem;margin-top:1.25rem}
.profile-actions a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.9375rem;line-height:1.5;transition:color .18s,border-color .18s}
.profile-actions .contact-link{font-size:1.0625rem;border-color:var(--ink)}
.profile-actions a:hover{color:var(--red-deep);border-color:currentColor}
.cv-links{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.career{grid-column:1/-1;margin-top:.5rem}
.career-heading{margin-bottom:1rem}
.career-heading h3,.education>h3{font-size:1rem}
.career-row{display:grid;grid-template-columns:2rem minmax(0,1.2fr) minmax(0,1fr) minmax(11rem,.65fr);align-items:center;gap:1.25rem;padding:1.4rem 0;border-top:1px solid var(--rule)}
.career-row>*{min-width:0}
.career-row:last-child{border-bottom:1px solid var(--rule)}
.career-row>span{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.career-row h4,.education-grid h4{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.2vw,2rem);letter-spacing:-.04em;line-height:1.25}
.career-row p{font-size:.9375rem;line-height:1.5}
.career-date{font-size:.875rem;line-height:1.5;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.education{grid-column:1/-1;margin-top:0}
.education>h3{margin-bottom:1rem}
.education-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 3rem}
.education-grid>div{min-width:0;padding-top:1.25rem;border-top:1px solid var(--rule)}
.education-grid span{font-size:.875rem;color:var(--muted)}
.education-grid h4{margin:.75rem 0 .5rem;line-height:1.3}
.education-grid p{font-size:.9375rem;line-height:1.55;max-width:42ch}

/* Recognition */
.recognition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 4rem;margin:0 var(--gutter) clamp(4.5rem,7vw,7rem);padding:2.5rem 0 3rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.recognition>*{min-width:0}
.award-label{grid-column:1/-1}
.award-main{align-self:center}
.award-metal{display:block;font-family:var(--display);font-size:clamp(3.5rem,7.5vw,6.5rem);font-weight:500;letter-spacing:-.065em;line-height:1.05;white-space:nowrap;width:max-content}
.award-main h2{font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:-.04em;line-height:1.25;margin:1rem 0 .35rem}
.award-main h2 span{margin-left:.4em}
.award-main>p{font-size:.9375rem;line-height:1.5}
.award-project{align-self:center;padding-left:clamp(2rem,4vw,3rem);border-left:1px solid var(--rule)}
.award-project>span{font-size:.875rem;line-height:1.5;letter-spacing:.04em}
.award-project h3{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.5rem);letter-spacing:-.05em;line-height:1.18;margin-top:1rem;text-wrap:balance}
.award-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:1.25rem}
.award-links a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 0;border-bottom:1px solid var(--ink);font-size:.875rem;line-height:1.5;transition:color .18s,border-color .18s}
.award-links a:hover{color:var(--red-deep);border-color:currentColor}

/* Footer: cream too, under one rule */
/* The room at the top is hers: at the end she stands on the O of the name, under the rule. */
footer{padding:calc(clamp(80px,9vw,132px)*.8) var(--gutter) 1.5rem;border-top:1px solid var(--ink);font-size:.8rem;line-height:1.5}
.footer-name{display:inline-block;font-family:var(--display);font-size:clamp(3rem,9vw,9rem);font-weight:500;letter-spacing:-.07em;line-height:1.1;white-space:nowrap}
.footer-name .chase-o{display:inline-block;transform-origin:50% 65%}
.footer-name .name-star{font-size:.55em;margin-left:.04em;line-height:1.1;--o-gap:.98em}
.footer-contact{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.7rem}
.footer-contact>a{font-size:clamp(1rem,2.5vw,2rem);letter-spacing:-.03em;line-height:1.5;overflow-wrap:anywhere;border-bottom:1px solid;padding-bottom:.25rem;transition:color .18s}
.footer-contact>a:hover{color:var(--red-deep)}
.footer-contact button{min-height:40px;padding:.6rem .8rem;background:transparent;border:1px solid var(--ink);border-radius:2rem;font-size:.8rem;cursor:pointer;transition:color .18s,border-color .18s}
.footer-contact button:hover{color:var(--red-deep);border-color:var(--red-deep)}
.copy-status{font-size:.8rem}
.footer-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.875rem}
.footer-meta a{transition:color .18s}
.footer-meta a:hover{color:var(--red-deep)}
.footer-note{font-size:.75rem;line-height:1.5;margin-top:1.5rem;color:var(--muted)}

/* Wide screens: the content keeps a measure, the title stops growing with it */
@media(min-width:1800px){
 :root{--gutter:max(3vw,calc((100vw - 1800px)/2));--title:clamp(3rem,12vw,16rem)}
 .reel-stage{margin:0 var(--gutter)}
}
@media(max-width:1100px){
 .archive-row{grid-template-columns:2rem 90px minmax(0,1fr) 13rem 2.4rem;gap:1rem}
 .career-row{grid-template-columns:2rem minmax(0,1fr) minmax(0,.8fr);gap:.4rem 1.25rem}
 .career-row>span{grid-row:1/3;align-self:start;padding-top:.25rem}
 .career-row h4{grid-column:2;grid-row:1}
 .career-row p{grid-column:2;grid-row:2}
 .career-date{grid-column:3;grid-row:1/3;white-space:normal}
 .expertise{grid-template-columns:repeat(2,minmax(0,1fr))}
 .expertise span:nth-child(3){padding-left:0;border-left:0}
 .expertise span:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:850px){
 :root{--gutter:5vw;--title:12.8vw}
 .site-header{height:70px}
 .site-header nav:not(.language-switch){gap:1.2rem;font-size:.875rem}
 .header-actions{gap:1rem}
 .external-top{display:none}
 .intro-meta{font-size:.8rem}
 .intro h1{margin:1.8rem 0}
 .intro-bottom{gap:1.25rem 2rem}
 .work{padding:2.5rem var(--gutter) 4.5rem}
 .project-grid{gap:2.5rem 1rem}
 .card-meta{display:block}
 .card-meta>span{display:block;margin-top:.4rem;text-align:left}
 .archive-row{grid-template-columns:1.6rem 70px minmax(0,1fr) 2rem;gap:1rem}
 .archive-thumb{height:52px}
 .row-type{display:none}
 .about{grid-template-columns:minmax(0,1fr);row-gap:1.75rem}
 .about h2{font-size:clamp(2.6rem,7vw,3.5rem);text-wrap:initial}
 .about-copy{max-width:65ch}
 .career,.education{margin-top:1rem}
 .recognition{column-gap:2.5rem}
 .award-project{padding-left:1.75rem}
}
@media(max-width:600px){
 .intro-bottom{grid-template-columns:minmax(0,1fr) auto}
 .intro-bottom p{grid-column:1/-1}
 .down-link{width:48px;height:48px;font-size:1.75rem}
 .intro-index{font-size:.75rem;letter-spacing:.06em}
 .reel-caption{grid-template-columns:minmax(0,1fr) 44px;gap:.35rem 1rem}
 .reel-bottomline{grid-column:1;grid-row:1}
 .reel-topline{grid-column:1;grid-row:2;justify-content:space-between;gap:1rem;font-size:.6875rem}
 .ambient-control{grid-column:2;grid-row:1/3}
 .profile-strip{padding-block:1.5rem}
 .strip-inner{grid-template-columns:minmax(0,1fr)}
 .strip-location{display:none}
 .strip-portfolio{padding-inline:0 1rem;border-left:0}
 .strip-stat{gap:.75rem}
 .strip-arrow{display:none}
 .section-heading{grid-template-columns:minmax(0,1fr)}
 .section-heading h2{font-size:2.25rem}
 .section-heading p{font-size:.9375rem}
 .project-grid{grid-template-columns:minmax(0,1fr);gap:3rem}
 .card-meta{display:flex}
 .card-meta h3{min-width:0;max-width:62%}
 .card-meta h3 small{display:none}
 .card-meta>span{margin-top:0;text-align:right;font-size:.8rem}
 .archive-heading{margin-top:4rem}
 .archive-heading h3{font-size:1.3rem}
 .archive-heading span{font-size:.75rem}
 .archive-row{grid-template-columns:1.3rem 55px minmax(0,1fr) 1.2rem;gap:.6rem;padding:1rem .3rem}
 .archive-thumb{height:45px}
 .archive-row h3{font-size:1.05rem}
 .row-arrow{font-size:1.3rem}
 .archive-row:hover .row-arrow{color:var(--red-deep)}
 .profile-actions{flex-direction:column;align-items:flex-start;gap:.5rem}
 .expertise{grid-template-columns:minmax(0,1fr)}
 .expertise span,.expertise span+span{min-height:3.5rem;padding:.875rem 0;border-left:0}
 .expertise span+span{border-top:1px solid var(--rule)}
 .career-row{grid-template-columns:1.5rem minmax(0,1fr);gap:.35rem .8rem;padding:1.25rem 0}
 .career-row>span{grid-row:auto;padding-top:.25rem}
 .career-row h4{grid-column:2;grid-row:1;font-size:1.5rem}
 .career-row p{grid-column:2;grid-row:2}
 .career-date{grid-column:2;grid-row:3;text-align:left}
 .education-grid{grid-template-columns:minmax(0,1fr);gap:1.75rem}
 .recognition{grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-bottom:2rem}
 .award-metal{font-size:4rem}
 .award-project{padding:1.5rem 0 0;border-left:0;border-top:1px solid var(--rule)}
 .footer-contact button{margin-left:0}
 .footer-meta{flex-direction:column;align-items:flex-start;gap:.5rem;font-size:.8rem}
}
/* A window with hardly any height, like a phone on its side: the opening shrinks so that the film starts on the screen and the O can be seen to open it. */
@media(max-height:500px) and (min-width:560px){
 :root{--title:min(12.8vw,20vh)}
 .site-header{height:50px;padding-block:3px}
 .intro{padding-block:.2rem .7rem}
 .intro-meta{font-size:.75rem}
 .intro h1{margin:.3rem 0 .5rem}
 .intro-bottom{padding-top:.55rem;gap:.5rem 2rem}
 .intro-bottom p{font-size:1.05rem}
 .intro-index{font-size:.6875rem;line-height:1.5}
 .down-link{width:44px;height:44px;font-size:1.5rem}
}
@media print{
 .chase-o{color:var(--red)!important}
 .stage-lucia::before{display:none}
 .reel-loop{display:none}
 .name-star{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .card-preview,.preview-label{display:none}
 .project-card .card-meta h3,.archive-row h3,.project-card .image-wrap>img{transform:none!important}
}

/* Experience as a timeline: oldest to today. The engine runs Lucía along the line when every row shares its top. */
.home-page .career-row{position:relative}
.home-page .career-row::before{content:"";position:absolute;z-index:1;box-sizing:border-box;width:15px;height:15px;border:3.5px solid var(--red);border-radius:50%;background:var(--cream);transition:background-color .18s,transform .18s}
.home-page .career-row:last-child::before{background:var(--red)}
.home-page .career-row::after{content:"";position:absolute;background:var(--ink)}
@media(min-width:900px){
 .home-page .career{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .home-page .career-heading{grid-column:1/-1;margin-bottom:9.5rem}
 .home-page .career-row,.home-page .career-row:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.75rem 1.5rem 0 0;border:0}
 .home-page .career-row::before{left:0;top:-7px}
 .home-page .career-row::after{left:0;right:0;top:0;height:1px;transform-origin:0 50%}
 .home-page .career-date{order:-1;text-align:left;white-space:normal}
 .home-page .career-row h4{font-size:clamp(1.25rem,1.9vw,1.75rem)}
 .home-page .career-row:last-child::after{right:calc(-1*var(--gutter))}
}
@media(max-width:899.98px){
 .home-page .career-row,.home-page .career-row:last-child{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;padding:1.5rem 0 1.5rem 2.25rem;border:0;border-top:1px solid var(--rule)}
 .home-page .career-row:last-child{padding-bottom:.5rem}
 .home-page .career-row h4,.home-page .career-row p,.home-page .career-date{grid-column:1;grid-row:auto}
 .home-page .career-row h4{font-size:1.5rem}
 .home-page .career-row::before{left:0;top:1.75rem}
 .home-page .career-row::after{left:7px;top:0;bottom:0;width:1px;transform-origin:50% 0}
 .home-page .career-row:first-of-type::after{top:1.75rem}
 .home-page .career-row:last-child::after{bottom:auto;height:1.75rem}
 .home-page .career-date{order:-1;text-align:left;white-space:normal}
}
@media(hover:hover) and (pointer:fine){
 .home-page .career-row h4{transition:color .18s}
 .home-page .career-row:hover h4{color:var(--red-deep)}
 .home-page .career-row:hover::before{background:var(--red);transform:scale(1.25)}
}
@media(prefers-reduced-motion:no-preference){
 .tl-js .home-page .career-row::after,.tl-js.home-page .career-row::after{transition:transform .5s linear;transition-delay:calc(var(--i,0)*.45s)}
 .tl-js .career:not(.tl-in) .career-row::after{transform:scale(0)}
 .tl-js .career-row::before{transition:transform .35s cubic-bezier(.2,1.6,.4,1),background-color .18s;transition-delay:calc(var(--i,0)*.45s)}
 .tl-js .career:not(.tl-in) .career-row::before{transform:scale(0)}
 .tl-js .career-row>*{transition:opacity .4s,transform .4s;transition-delay:calc(var(--i,0)*.45s + .1s)}
 .tl-js .career:not(.tl-in) .career-row>*{opacity:0;transform:translateY(8px)}
}
@media print{.home-page .career-row::before,.home-page .career-row::after{transform:none!important}.tl-js .career .career-row>*{opacity:1!important;transform:none!important}}

/* === chase-expedition.js: route, dust, X (only this block belongs to it). Inert until the engine fills the layer. === */
.xp-route{position:absolute;left:0;top:0;display:block;overflow:visible;pointer-events:none;transition:opacity .16s linear}
.xp-route.is-quiet{opacity:0;transition:opacity .45s ease}
.xp-route path{fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round}
.xp-head{fill:var(--red)}
.xp-dust,.xp-step{position:absolute;left:0;top:0;display:block;pointer-events:none;background:#CFC2A6;opacity:0;transform-origin:50% 50%}
.xp-dust{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%}
.xp-step{width:7px;height:3px;margin:-1.5px 0 0 -3.5px;border-radius:60% 45% 45% 60%}
.xp-x{position:absolute;left:0;top:0;display:none;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.xp-x.is-on{display:flex}
.xp-x svg{display:block;overflow:visible;transition:transform .18s cubic-bezier(.2,1.5,.4,1);animation:xp-x-in .3s cubic-bezier(.2,1.5,.4,1) both}
.xp-x path{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round}
@media(hover:hover){.xp-x:hover svg{transform:scale(1.22) rotate(6deg)}}
@keyframes xp-x-in{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@media print{.xp-route,.xp-dust,.xp-step,.xp-x{display:none!important}}
@media(prefers-reduced-motion:reduce){.xp-route,.xp-dust,.xp-step,.xp-x{display:none!important}}
/* === end chase-expedition.js === */