:root{
  --bg:#97B9F8; --ink:#2F3239; --peach:#FAEEE3; --peach2:#F3DCC8; --orange:#B85A34; --orange-soft:#C8663F;
  --rose:#F6BCC6; --sun:#FFCF3F; --leaf:#4DBF6E; --mint:#C6E3DF;
  --line:rgba(47,50,57,.25); --bubble:#FFFFFF; --bubble-ink:#1F2024; --field:#FFFFFF;
  --serif:'Gloock', Georgia, 'Times New Roman', serif;
  --sans:'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#1C2440; --ink:#E7ECFA; --peach:#3A2A24; --peach2:#4A342A; --orange:#F0A07C; --orange-soft:#E08A62; --line:rgba(231,236,250,.22); --field:#141B31; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#1C2440; --ink:#E7ECFA; --peach:#3A2A24; --peach2:#4A342A; --orange:#F0A07C; --orange-soft:#E08A62; --line:rgba(231,236,250,.22); --field:#141B31; color-scheme:dark; }
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px);scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--orange-soft);color:#fff}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}

/* one label style for the whole site: the CV's peach + orange */
.pill{display:inline-block;background:var(--peach);color:var(--orange);font-size:14px;font-weight:500;line-height:1.3;border-radius:999px;padding:5px 13px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font-family:var(--serif);font-size:22px;text-decoration:none}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;text-decoration:none;font-size:15px;padding:6px 14px;border-radius:999px;transition:background .25s,color .25s}
.nav ul a:hover,.nav ul a.on{background:var(--peach);color:var(--orange)}
@media (max-width:720px){.nav ul{overflow-x:auto;scrollbar-width:none;gap:2px}.nav ul::-webkit-scrollbar{display:none}.nav ul a{padding:5px 8px;font-size:13.5px;white-space:nowrap}.logo{display:none}.nav .wrap{justify-content:center}}

/* hero */
.hero{position:relative;min-height:calc(100svh - 70px);display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:30px;padding-block:40px 70px}
.hero h1{font-family:var(--serif);font-size:clamp(96px,14vw,210px);line-height:.86;margin:0;letter-spacing:-2px}
.hero h1 span{display:block}
.hero h1 span:last-child{padding-left:.55em}
.hero .intro{max-width:30ch;font-size:20px;line-height:1.45;margin:34px 0 0}
.hero .intro + .pill{margin-top:18px}
.collage{position:relative;height:min(620px,72vh)}
.collage figure{position:absolute;margin:0;box-shadow:0 18px 40px -18px rgba(20,25,50,.45);will-change:transform}
.collage img{width:100%;height:100%;object-fit:cover}
.c1{width:46%;aspect-ratio:3/4;left:2%;top:4%;--r:-5deg}
.c2{width:52%;aspect-ratio:3/4;right:0;top:18%;--r:4deg}
.c3{width:40%;aspect-ratio:3/4;left:22%;bottom:0;--r:-1.5deg}
.bubble{position:absolute;z-index:3;left:6%;bottom:30%;background:var(--bubble);color:var(--bubble-ink);font-family:var(--sans);font-weight:500;font-size:clamp(18px,2.1vw,27px);line-height:1.1;text-transform:uppercase;padding:26px 30px;border-radius:50%;width:clamp(210px,21vw,290px);text-align:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
.bubble:after{content:"";position:absolute;right:18%;bottom:-16px;border:14px solid transparent;border-top:22px solid var(--bubble);border-bottom:0;transform:rotate(-18deg)}
.bubble .t{display:block;transition:opacity .3s,transform .3s}
.bubble .t.out{opacity:0;transform:translateY(8px) scale(.96)}
.bubble .lang{display:block;font-size:12px;font-weight:500;color:#B85A34;margin-top:6px;text-transform:none}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:24px}.collage{height:440px}.hero h1 span:last-child{padding-left:.35em}}

/* sections */
section.block{padding-block:110px 40px}
.split{font-family:var(--serif);font-size:clamp(64px,11vw,168px);line-height:.9;margin:0 0 44px;letter-spacing:-1.5px;white-space:nowrap}
.split .ch{display:inline-block;will-change:transform}
.lede{font-family:var(--serif);font-size:clamp(26px,3.1vw,40px);line-height:1.22;max-width:26ch;margin:0}
.intro-line{max-width:52ch;margin:0 0 40px}

/* about */
.about{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.about .txt p{max-width:58ch}
.about .txt p.first{margin-top:34px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:40px;padding-top:28px;border-top:2px solid var(--orange-soft)}
.facts .pill{margin-bottom:8px}
.facts p{margin:0;font-size:16px}
.reveal{position:relative;overflow:hidden}
.reveal:after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:right;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.reveal.in:after{transform:scaleX(0)}
.reveal img{transform:scale(1.12);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.reveal.in img{transform:scale(1)}
.about figure{margin:0}
.about figcaption{font-size:14px;margin-top:10px}
.skills{margin-top:90px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.skill{background:var(--peach);border-radius:22px 22px 22px 4px;padding:22px 20px 24px;border-top:3px solid var(--orange-soft)}
.skill h3{font-family:var(--serif);font-size:22px;line-height:1.1;margin:0 0 10px}
.skill p{margin:0;font-size:15px;line-height:1.5}
@media (max-width:1000px){.about{grid-template-columns:1fr}.skills{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.skills{grid-template-columns:1fr}.facts{grid-template-columns:1fr}}

/* projects: one label, one title, one paragraph */
.proj{display:grid;grid-template-columns:170px 1fr .9fr;gap:40px;align-items:start;padding-block:56px;border-top:1px solid var(--line)}
.proj:last-child{border-bottom:1px solid var(--line)}
.proj .letter{width:140px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.proj:hover .letter{transform:rotate(-8deg) scale(1.06)}
.proj h3{font-family:var(--serif);font-size:clamp(32px,3.6vw,48px);line-height:1.04;margin:16px 0 18px}
.proj p{max-width:56ch;margin:0 0 14px}
.proj .pic{aspect-ratio:4/5;border-radius:4px}
.proj .pic img{width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.proj{grid-template-columns:110px 1fr}.proj .letter{width:96px}.proj .pic{grid-column:1/-1;aspect-ratio:16/10}}
@media (max-width:560px){.proj{grid-template-columns:1fr;gap:18px}.proj .letter{width:80px}}

/* buttons */
.btn{display:inline-block;font:inherit;font-size:15px;font-weight:500;text-decoration:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.solid:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:wait}

/* blog list */
.posts{list-style:none;margin:0;padding:0}
.post{border-top:1px solid var(--line)}
.post:last-child{border-bottom:1px solid var(--line)}
.post button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr 220px;gap:32px;align-items:center;width:100%;padding:30px 0}
.post h3{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);line-height:1.05;margin:14px 0 10px;transition:transform .35s}
.post button:hover h3,.post button:focus-visible h3{transform:translateX(12px)}
.post .ex{margin:0;max-width:60ch;font-size:16px}
.post .th{aspect-ratio:4/3;overflow:hidden;border-radius:3px}
.post .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.post button:hover .th img{transform:scale(1.06)}
.empty{padding:40px 0}
@media (max-width:800px){.post button{grid-template-columns:1fr;gap:12px}.post .th{order:-1;aspect-ratio:16/9}}

/* reader */
.reader{position:fixed;inset:0;z-index:70;background:var(--peach);color:var(--ink);overflow-y:auto;transform:translateY(100%);transition:transform .6s cubic-bezier(.7,0,.2,1);visibility:hidden}
.reader.on{transform:none;visibility:visible}
.reader .bar{position:sticky;top:0;display:flex;justify-content:flex-end;padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 14px;background:linear-gradient(var(--peach) 70%,transparent);z-index:2}
.reader article{width:min(720px,100% - 40px);margin:0 auto;padding-bottom:120px}
.reader h1{font-family:var(--serif);font-size:clamp(40px,6vw,72px);line-height:1;margin:16px 0 28px}
.reader .cover{margin:0 0 36px;border-radius:4px;overflow:hidden}
.reader .cover img{width:100%;max-height:70vh;object-fit:cover}
.reader .body p{font-size:19px;line-height:1.75;margin:0 0 1.1em}
.reader .body p.lead{font-family:var(--serif);font-size:clamp(24px,2.8vw,30px);line-height:1.3;margin-bottom:1.2em}
.comments{margin-top:64px;padding-top:28px;border-top:2px solid var(--orange-soft)}
.comments h2{font-family:var(--serif);font-size:34px;margin:0 0 20px}
.clist{list-style:none;margin:0 0 30px;padding:0}
.clist li{padding:16px 0;border-bottom:1px solid var(--line)}
.clist .who{font-weight:500}
.clist .when{font-size:14px;margin-left:8px;color:var(--orange)}
.clist p{margin:6px 0 0;white-space:pre-line}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform label{display:block;font-size:14px;font-weight:500;margin-bottom:5px}
.cform .full{grid-column:1/-1}
.field{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
textarea.field{min-height:120px;resize:vertical}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .note{font-size:14px;margin:0}
.cform .row-end{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.status{font-size:14px;min-height:1.2em}
@media (max-width:560px){.cform{grid-template-columns:1fr}}

/* trayectoria */
.logos{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 56px;padding:0;list-style:none}
.logos li{background:#fff;border-radius:12px;height:76px;padding:10px 16px;display:flex;align-items:center;justify-content:center}
.logos img{max-height:56px;width:auto}
.logos li.dark{background:#000}
.logos li.poster{padding:0;overflow:hidden;width:150px}
.logos li.poster img{max-height:none;width:100%;height:100%;object-fit:cover;object-position:left center}
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:60px}
.cols h3.sub{font-family:var(--serif);font-size:30px;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--orange-soft)}
.xp{list-style:none;margin:0;padding:0}
.xp li{border-bottom:1px solid var(--line)}
.xp button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:16px;width:100%;padding:18px 0;align-items:baseline}
.xp .role{font-size:18px;font-weight:500;line-height:1.35;display:block}
.xp .org{display:block;font-size:16px}
.xp .yr{font-size:15px;white-space:nowrap}
.xp .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.xp li.open .more{grid-template-rows:1fr}
.xp .more > div{overflow:hidden}
.xp .more p{margin:0 0 18px;max-width:60ch;font-size:16px}
.xp .posters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.xp .posters img{height:120px;width:auto;max-width:100%;object-fit:cover;border-radius:3px}
.xp .plus{display:inline-block;margin-left:10px;transition:transform .3s;color:var(--orange)}
.xp li.open .plus{transform:rotate(45deg)}
.edu{margin:18px 0 22px}
.edu b{display:block;font-weight:500;font-size:17px;line-height:1.35}
.edu span{display:block;font-size:16px}
.langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:900px){.cols{grid-template-columns:1fr}}

/* contact */
.contact{padding-block:120px 60px;text-align:center}
.big{font-family:var(--serif);font-size:clamp(44px,15vw,240px);line-height:.9;margin:0;letter-spacing:-2px;display:inline-block;white-space:nowrap}
.big a{text-decoration:none}
.big .ch{display:inline-block;transition:transform .35s cubic-bezier(.3,1.8,.5,1),color .25s}
.big .ch:hover{transform:translateY(-14%) rotate(var(--rot,-6deg))}
.contact p.say{max-width:44ch;margin:18px auto 34px;font-size:18px}
.links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
footer{padding-block:40px;font-size:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line)}

@media (max-width:560px){.logos li{height:62px;padding:8px 12px}.logos img{max-height:44px}.logos li.poster{width:120px}}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .reveal:after{display:none}
}